1.0.0 • Published 6 years ago

webts-animated-tabs v1.0.0

Weekly downloads
5
License
ISC
Repository
github
Last release
6 years ago

#webts-animated-tabs v1.0.0 ##Installation ###npm

npm install webts-animated-tabs --save

Till now webts-animated-tabs can only be installed via npm - more coming soon ###HTML

<head>
    <link rel="stylesheet" type="text/css" href="node_modules/webts-animated-tabs/src/styles/css/main.css">
</head>
<body>
<script type="text/javascript" src="node_modules/webts-animated-tabs/src/scripts/app.js"></script>

##Customization You can customize the tabs via the scss variables inside the src/styles/scss/main.scss file. Whatch out to make this in the node modules folder, because when updating packages the changes get overwritten.

$color-tab-bg:          #fff;
$color-tab-active-bg:   #f1f1f1;
$color-tab-hover-bg:    #f9f9f9;
$color-ink-bar:         #ff696d;
$color-swapper-bg:      rgba(220,220,220,0.75);
$color-swapper-hover-bg:rgba(220,220,220,0.3);
$color-swapper-text:    #333;

$transition-time-slow:    1s;
$transition-time-medium:  0.7s;
$transition-time-fast:    0.3s;

I'm working on making the customization via javascript and a options parameter in for the Tab-Class

tabsanimatedwebtsinkBarink-barslide
@infinitebrahmanuniverse/nolb-webt@everything-registry/sub-chunk-3136
1.0.0

6 years ago