mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.7 KiB
71 lines
1.7 KiB
6 years ago
|
// Name: Leader
|
||
|
|
// Description: Component to create dot leaders
|
||
|
|
//
|
||
|
|
// Component: `uk-leader`
|
||
|
|
//
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
|
||
|
|
// Variables
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
$leader-fill-content: unquote('.') !default;
|
||
|
|
$leader-fill-margin-left: $global-small-gutter !default;
|
||
|
|
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
Component: Leader
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
.uk-leader { overflow: hidden; }
|
||
|
|
|
||
|
|
/*
|
||
|
|
* 1. Place element in text flow
|
||
|
|
* 2. Never break into a new line
|
||
|
|
* 3. Get a string back with as many repeating characters to fill the container
|
||
|
|
* 4. Prevent wrapping. Overflowing characters will be clipped by the container
|
||
|
|
*/
|
||
|
|
|
||
|
|
.uk-leader-fill::after {
|
||
|
|
/* 1 */
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: $leader-fill-margin-left;
|
||
|
|
/* 2 */
|
||
|
|
width: 0;
|
||
|
|
/* 3 */
|
||
|
|
content: attr(data-fill);
|
||
|
|
/* 4 */
|
||
|
|
white-space: nowrap;
|
||
|
|
@if(mixin-exists(hook-leader)) {@include hook-leader();}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Hide if media does not match
|
||
|
|
*/
|
||
|
|
|
||
|
|
.uk-leader-fill.uk-leader-hide::after { display: none; }
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Pass fill character to JS
|
||
|
|
*/
|
||
|
|
|
||
|
|
.uk-leader-fill-content::before { content: '#{$leader-fill-content}'; }
|
||
|
|
:root { --uk-leader-fill-content: $leader-fill-content; }
|
||
|
|
|
||
|
|
|
||
|
|
// Hooks
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
@if(mixin-exists(hook-leader-misc)) {@include hook-leader-misc();}
|
||
|
|
|
||
|
|
// @mixin hook-leader(){}
|
||
|
|
// @mixin hook-leader-misc(){}
|
||
|
|
|
||
|
|
|
||
|
|
// Inverse
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// @mixin hook-inverse-leader(){}
|