Your IP : 216.73.216.170
// Name: Dotnav
// Description: Defines styles for a dot navigation
//
// Component: `uk-dotnav`
//
// Modifier: `uk-dotnav-vertical`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
@dotnav-margin-left: 15px;
@dotnav-width: 20px;
@dotnav-height: @dotnav-width;
@dotnav-background: rgba(50,50,50,0.1);
@dotnav-hover-background: rgba(50,50,50,0.4);
@dotnav-onclick-background: rgba(50,50,50,0.6);
@dotnav-active-background: rgba(50,50,50,0.4);
@dotnav-vertical-margin-top: @dotnav-margin-left;
/* ========================================================================
Component: Dotnav
========================================================================== */
/*
* 1. Remove default list style
* 2. Remove whitespace between child elements when using `inline-block`
*/
.uk-dotnav {
/* 1 */
padding: 0;
list-style: none;
/* 2 */
font-size: 0.001px;
}
/* Items
========================================================================== */
/*
* 1. Reset whitespace hack
* 2. Remove the gap at the bottom of it container
*/
.uk-dotnav > li {
display: inline-block;
/* 1 */
font-size: 1rem;
/* 2 */
vertical-align: top;
}
.uk-dotnav > li:nth-child(n+2) { margin-left: @dotnav-margin-left; }
/*
* Items
* 1. Remove the gap at the bottom of it container
* 2. Hide text if present
*/
.uk-dotnav > li > a {
display: inline-block;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: @dotnav-width;
height: @dotnav-height;
border-radius: 50%;
background: @dotnav-background;
/* 1 */
vertical-align: top;
/* 2 */
overflow: hidden;
text-indent: -999%;
.hook-dotnav-item;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-dotnav > li > a:hover,
.uk-dotnav > li > a:focus { // 1
background: @dotnav-hover-background;
/* 2 */
outline: none;
.hook-dotnav-item-hover;
}
/* OnClick */
.uk-dotnav > li > a:active {
background: @dotnav-onclick-background;
.hook-dotnav-item-onclick;
}
/* Active */
.uk-dotnav > li.uk-active > a {
background: @dotnav-active-background;
.hook-dotnav-item-active;
}
/* Modifier: 'dotnav-vertical'
========================================================================== */
.uk-dotnav-vertical > li { display: block; }
.uk-dotnav-vertical > li:nth-child(n+2) {
margin-left: 0;
margin-top: @dotnav-vertical-margin-top;
}
// Hooks
// ========================================================================
.hook-dotnav-misc;
.hook-dotnav-item() {}
.hook-dotnav-item-hover() {}
.hook-dotnav-item-onclick() {}
.hook-dotnav-item-active() {}
.hook-dotnav-misc() {}