From 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Tue, 5 Jun 2018 16:07:35 +0100 Subject: 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 --- scss/uikit/components/tooltip.scss | 84 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 scss/uikit/components/tooltip.scss (limited to 'scss/uikit/components/tooltip.scss') 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(){} -- cgit v1.2.3