mirror of
https://github.com/WebStackPage/WebStackPage.github.io.git
synced 2026-02-08 04:45:33 +08:00
368 lines
8.9 KiB
Plaintext
Executable File
368 lines
8.9 KiB
Plaintext
Executable File
// Name: Tab
|
|
// Description: Defines styles for a tabbed navigation
|
|
//
|
|
// Component: `uk-tab`
|
|
//
|
|
// Modifiers: `uk-tab-flip`
|
|
// `uk-tab-center`
|
|
// `uk-tab-grid`
|
|
// `uk-tab-bottom`
|
|
// `uk-tab-left`
|
|
// `uk-tab-right`
|
|
// `uk-tab-responsive`
|
|
//
|
|
// States: `uk-active`
|
|
// `uk-disabled`
|
|
//
|
|
// Markup:
|
|
//
|
|
// <!-- uk-tab -->
|
|
// <ul class="uk-tab" data-uk-tab>
|
|
// <li class="uk-active"><a href=""></a></li>
|
|
// <li><a href=""></a></li>
|
|
// </ul>
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
@tab-border: #ddd;
|
|
@tab-border-width: 1px;
|
|
@tab-padding-horizontal: 12px;
|
|
@tab-padding-vertical: 8px;
|
|
@tab-padding-top: @tab-padding-vertical;
|
|
@tab-padding-bottom: @tab-padding-vertical;
|
|
@tab-margin-horizontal: 5px;
|
|
@tab-margin-vertical: 5px;
|
|
@tab-color: #07D;
|
|
@tab-hover-border: #f5f5f5;
|
|
@tab-hover-background: #f5f5f5;
|
|
@tab-hover-color: #059;
|
|
@tab-active-border: #ddd;
|
|
@tab-active-background: #fff;
|
|
@tab-active-color: #444;
|
|
@tab-disabled-color: #999;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Tab
|
|
========================================================================== */
|
|
|
|
.uk-tab {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-bottom: @tab-border-width solid @tab-border;
|
|
}
|
|
|
|
/*
|
|
* Micro clearfix on the deepest container
|
|
*/
|
|
|
|
.uk-tab:before,
|
|
.uk-tab:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.uk-tab:after { clear: both; }
|
|
|
|
/*
|
|
* Items
|
|
* 1. Create position context for dropdowns
|
|
*/
|
|
|
|
.uk-tab > li {
|
|
margin-bottom: -@tab-border-width;
|
|
float: left;
|
|
/* 1 */
|
|
position: relative;
|
|
}
|
|
|
|
.uk-tab > li > a {
|
|
display: block;
|
|
padding: @tab-padding-top @tab-padding-horizontal @tab-padding-bottom @tab-padding-horizontal;
|
|
border: @tab-border-width solid transparent;
|
|
border-bottom-width: 0;
|
|
color: @tab-color;
|
|
text-decoration: none;
|
|
.hook-tab;
|
|
}
|
|
|
|
.uk-tab > li:nth-child(n+2) > a { margin-left: @tab-margin-horizontal; }
|
|
|
|
/*
|
|
* Hover
|
|
* 1. Apply hover style also to focus state
|
|
* 2. Also apply if dropdown is opened
|
|
* 3. Remove default focus style
|
|
*/
|
|
|
|
.uk-tab > li > a:hover,
|
|
.uk-tab > li > a:focus, // 1
|
|
.uk-tab > li.uk-open > a { // 2
|
|
border-color: @tab-hover-border;
|
|
background: @tab-hover-background;
|
|
color: @tab-hover-color;
|
|
/* 2 */
|
|
outline: none;
|
|
.hook-tab-hover;
|
|
}
|
|
|
|
.uk-tab > li:not(.uk-active) > a:hover,
|
|
.uk-tab > li:not(.uk-active) > a:focus,
|
|
.uk-tab > li.uk-open:not(.uk-active) > a {
|
|
margin-bottom: @tab-border-width;
|
|
padding-bottom: @tab-padding-bottom - @tab-border-width;
|
|
}
|
|
|
|
/* Active */
|
|
.uk-tab > li.uk-active > a {
|
|
border-color: @tab-active-border;
|
|
border-bottom-color: transparent;
|
|
background: @tab-active-background;
|
|
color: @tab-active-color;
|
|
.hook-tab-active;
|
|
}
|
|
|
|
/* Disabled */
|
|
.uk-tab > li.uk-disabled > a {
|
|
color: @tab-disabled-color;
|
|
cursor: auto;
|
|
.hook-tab-disabled;
|
|
}
|
|
|
|
.uk-tab > li.uk-disabled > a:hover,
|
|
.uk-tab > li.uk-disabled > a:focus,
|
|
.uk-tab > li.uk-disabled.uk-active > a {
|
|
background: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
|
|
/* Modifier: 'tab-flip'
|
|
========================================================================== */
|
|
|
|
.uk-tab-flip > li { float: right; }
|
|
|
|
.uk-tab-flip > li:nth-child(n+2) > a {
|
|
margin-left: 0;
|
|
margin-right: @tab-margin-horizontal;
|
|
}
|
|
|
|
|
|
/* Modifier: 'tab-responsive'
|
|
========================================================================== */
|
|
|
|
.uk-tab > li.uk-tab-responsive > a {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/*
|
|
* Icon
|
|
*/
|
|
|
|
.uk-tab-responsive > a:before {
|
|
content: "\f0c9\00a0";
|
|
font-family: FontAwesome;
|
|
}
|
|
|
|
|
|
/* Modifier: 'tab-center'
|
|
========================================================================== */
|
|
|
|
.uk-tab-center { border-bottom: @tab-border-width solid @tab-border; }
|
|
|
|
.uk-tab-center-bottom {
|
|
border-bottom: none;
|
|
border-top: @tab-border-width solid @tab-border;
|
|
}
|
|
|
|
.uk-tab-center:before,
|
|
.uk-tab-center:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.uk-tab-center:after { clear: both; }
|
|
|
|
|
|
/*
|
|
* 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs
|
|
*/
|
|
|
|
.uk-tab-center .uk-tab {
|
|
position: relative;
|
|
right: 50%;
|
|
border: none;
|
|
float: right;
|
|
}
|
|
|
|
.uk-tab-center .uk-tab > li {
|
|
position: relative;
|
|
right: -50%;
|
|
}
|
|
|
|
.uk-tab-center .uk-tab > li > a { text-align: center; }
|
|
|
|
|
|
/* Modifier: 'tab-bottom'
|
|
========================================================================== */
|
|
|
|
.uk-tab-bottom {
|
|
border-top: @tab-border-width solid @tab-border;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.uk-tab-bottom > li {
|
|
margin-top: -@tab-border-width;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.uk-tab-bottom > li > a {
|
|
padding-top: @tab-padding-bottom;
|
|
padding-bottom: @tab-padding-top;
|
|
border-bottom-width: @tab-border-width;
|
|
border-top-width: 0;
|
|
}
|
|
|
|
.uk-tab-bottom > li:not(.uk-active) > a:hover,
|
|
.uk-tab-bottom > li:not(.uk-active) > a:focus,
|
|
.uk-tab-bottom > li.uk-open:not(.uk-active) > a {
|
|
margin-bottom: 0;
|
|
margin-top: @tab-border-width;
|
|
padding-bottom: @tab-padding-top;
|
|
padding-top: @tab-padding-bottom - @tab-border-width;
|
|
}
|
|
|
|
.uk-tab-bottom > li.uk-active > a {
|
|
border-top-color: transparent;
|
|
border-bottom-color: @tab-active-border;
|
|
}
|
|
|
|
|
|
/* Modifier: 'tab-grid'
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Create position context to prevent hidden border because of negative `z-index`
|
|
*/
|
|
|
|
.uk-tab-grid {
|
|
margin-left: -@tab-margin-horizontal;
|
|
border-bottom: none;
|
|
/* 1 */
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.uk-tab-grid:before {
|
|
display: block;
|
|
position: absolute;
|
|
left: @tab-margin-horizontal;
|
|
right: 0;
|
|
bottom: -@tab-border-width;
|
|
border-top: @tab-border-width solid @tab-border;
|
|
/* 1 */
|
|
z-index: -1;
|
|
}
|
|
|
|
.uk-tab-grid > li:first-child > a { margin-left: @tab-margin-horizontal; }
|
|
|
|
.uk-tab-grid > li > a { text-align: center; }
|
|
|
|
/*
|
|
* If `uk-tab-bottom`
|
|
*/
|
|
|
|
.uk-tab-grid.uk-tab-bottom { border-top: none; }
|
|
.uk-tab-grid.uk-tab-bottom:before {
|
|
top: -@tab-border-width;
|
|
bottom: auto;
|
|
}
|
|
|
|
|
|
/* Modifier: 'tab-left', 'tab-right'
|
|
========================================================================== */
|
|
|
|
/* Tablet and bigger */
|
|
@media (min-width: @breakpoint-medium) {
|
|
|
|
.uk-tab-left,
|
|
.uk-tab-right { border-bottom: none; }
|
|
|
|
.uk-tab-left > li,
|
|
.uk-tab-right > li {
|
|
margin-bottom: 0;
|
|
float: none;
|
|
}
|
|
|
|
.uk-tab-left > li > a,
|
|
.uk-tab-right > li > a {
|
|
padding-top: @tab-padding-vertical;
|
|
padding-bottom: @tab-padding-vertical;
|
|
}
|
|
|
|
.uk-tab-left > li:nth-child(n+2) > a,
|
|
.uk-tab-right > li:nth-child(n+2) > a {
|
|
margin-left: 0;
|
|
margin-top: @tab-margin-vertical;
|
|
}
|
|
|
|
.uk-tab-left > li.uk-active > a,
|
|
.uk-tab-right > li.uk-active > a { border-color: @tab-active-border; }
|
|
|
|
/*
|
|
* Modifier: 'tab-left'
|
|
*/
|
|
|
|
.uk-tab-left { border-right: @tab-border-width solid @tab-border; }
|
|
.uk-tab-left > li { margin-right: -@tab-border-width; }
|
|
.uk-tab-left > li > a {
|
|
border-bottom-width: @tab-border-width;
|
|
border-right-width: 0;
|
|
}
|
|
.uk-tab-left > li:not(.uk-active) > a:hover,
|
|
.uk-tab-left > li:not(.uk-active) > a:focus {
|
|
margin-bottom: 0;
|
|
margin-right: @tab-border-width;
|
|
padding-bottom: @tab-padding-vertical;
|
|
padding-right: @tab-padding-horizontal - @tab-border-width;
|
|
}
|
|
.uk-tab-left > li.uk-active > a { border-right-color: transparent; }
|
|
|
|
/*
|
|
* Modifier: 'tab-right'
|
|
*/
|
|
|
|
.uk-tab-right { border-left: @tab-border-width solid @tab-border; }
|
|
.uk-tab-right > li { margin-left: -@tab-border-width; }
|
|
.uk-tab-right > li > a {
|
|
border-bottom-width: @tab-border-width;
|
|
border-left-width: 0;
|
|
}
|
|
.uk-tab-right > li:not(.uk-active) > a:hover,
|
|
.uk-tab-right > li:not(.uk-active) > a:focus {
|
|
margin-bottom: 0;
|
|
margin-left: @tab-border-width;
|
|
padding-bottom: @tab-padding-vertical;
|
|
padding-left: @tab-padding-horizontal - @tab-border-width;
|
|
}
|
|
.uk-tab-right > li.uk-active > a { border-left-color: transparent; }
|
|
|
|
}
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
.hook-tab-misc;
|
|
|
|
.hook-tab() {}
|
|
.hook-tab-hover() {}
|
|
.hook-tab-active() {}
|
|
.hook-tab-disabled() {}
|
|
.hook-tab-misc() {} |