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.
85 lines
2.6 KiB
85 lines
2.6 KiB
6 years ago
|
// Name: Tooltip
|
||
|
|
// Description: Component to create tooltips
|
||
|
|
//
|
||
|
|
// Component: `uk-tooltip`
|
||
|
|
//
|
||
|
|
// Modifiers `uk-tooltip-top`
|
||
|
|
// `uk-tooltip-top-left`
|
||
|
|
// `uk-tooltip-top-right`
|
||
|
|
// `uk-tooltip-bottom`
|
||
|
|
// `uk-tooltip-bottom-left`
|
||
|
|
// `uk-tooltip-bottom-right`
|
||
|
|
// `uk-tooltip-left`
|
||
|
|
// `uk-tooltip-right`
|
||
|
|
//
|
||
|
|
// States: `uk-active`
|
||
|
|
//
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
|
||
|
|
// Variables
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
$tooltip-z-index: $global-z-index + 30 !default;
|
||
|
|
$tooltip-max-width: 200px !default;
|
||
|
|
$tooltip-padding-vertical: 3px !default;
|
||
|
|
$tooltip-padding-horizontal: 6px !default;
|
||
|
|
$tooltip-background: #666 !default;
|
||
|
|
$tooltip-border-radius: 2px !default;
|
||
|
|
$tooltip-color: $global-inverse-color !default;
|
||
|
|
$tooltip-font-size: 12px !default;
|
||
|
|
|
||
|
|
$tooltip-margin: 10px !default;
|
||
|
|
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
Component: Tooltip
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
/*
|
||
|
|
* 1. Hide by default
|
||
|
|
* 2. Position
|
||
|
|
* 3. Dimensions
|
||
|
|
* 4. Style
|
||
|
|
*/
|
||
|
|
|
||
|
|
.uk-tooltip {
|
||
|
|
/* 1 */
|
||
|
|
display: none;
|
||
|
|
/* 2 */
|
||
|
|
position: absolute;
|
||
|
|
z-index: $tooltip-z-index;
|
||
|
|
/* 3 */
|
||
|
|
box-sizing: border-box;
|
||
|
|
max-width: $tooltip-max-width;
|
||
|
|
padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
|
||
|
|
/* 4 */
|
||
|
|
background: $tooltip-background;
|
||
|
|
border-radius: $tooltip-border-radius;
|
||
|
|
color: $tooltip-color;
|
||
|
|
font-size: $tooltip-font-size;
|
||
|
|
@if(mixin-exists(hook-tooltip)) {@include hook-tooltip();}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Show */
|
||
|
|
.uk-tooltip.uk-active { display: block; }
|
||
|
|
|
||
|
|
|
||
|
|
/* Direction / Alignment modifiers
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
/* Direction */
|
||
|
|
[class*='uk-tooltip-top'] { margin-top: (-$tooltip-margin); }
|
||
|
|
[class*='uk-tooltip-bottom'] { margin-top: $tooltip-margin; }
|
||
|
|
[class*='uk-tooltip-left'] { margin-left: (-$tooltip-margin); }
|
||
|
|
[class*='uk-tooltip-right'] { margin-left: $tooltip-margin; }
|
||
|
|
|
||
|
|
|
||
|
|
// Hooks
|
||
|
|
// ========================================================================
|
||
|
|
|
||
|
|
@if(mixin-exists(hook-tooltip-misc)) {@include hook-tooltip-misc();}
|
||
|
|
|
||
|
|
// @mixin hook-tooltip(){}
|
||
|
|
// @mixin hook-tooltip-misc(){}
|