diff options
author | 2018-06-05 16:07:35 +0100 | |
---|---|---|
committer | 2018-06-05 16:07:35 +0100 | |
commit | 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 (patch) | |
tree | 290c6d668ec9161a39065456a33ec634215907cc /scss/uikit/components/tooltip.scss | |
parent | documentation metadata API (#57) (diff) |
Move from CSS to SCSS (#86)
* Rewrite existing style.css with sass
* Add "uses-rst" class for pages that use rendered RST
This replaces the previous method of just listing
every page in the sass
* Remove old debug print
* Mixins and error pages
* Newly built CSS
* Add SASS cache to .gitignore
* New error SASS
* Slight changes to error template
* Add UIKit SCSS to repo
This includes the LICENSE and our customizations, which
makes life way easier for contributors
* Reorganize sass folder; your watchers can avoid uikit now
* Sass folder should be called scss
* Change variable names
* [SCSS] Linting
* Fix scss_lint gem name [ci skip]
* [SCSS] Now you can compile with just Python!
* Temporary hack to make the wiki editor taller
* [SCSS] @jchristgit
* [SCSS.py] Require specification of include dir to simplify the SCSS imports
* [SCSS] All inline styles have been removed
* [SCSS] Update UIKit theme to import from our variables
* [SCSS] Remove extra newlines in errors/_common.scss
Diffstat (limited to 'scss/uikit/components/tooltip.scss')
-rw-r--r-- | scss/uikit/components/tooltip.scss | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/scss/uikit/components/tooltip.scss b/scss/uikit/components/tooltip.scss new file mode 100644 index 00000000..1f8e8c88 --- /dev/null +++ b/scss/uikit/components/tooltip.scss @@ -0,0 +1,84 @@ +// 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(){} |