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/form-range.scss | 185 ++++++++++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 scss/uikit/components/form-range.scss (limited to 'scss/uikit/components/form-range.scss') diff --git a/scss/uikit/components/form-range.scss b/scss/uikit/components/form-range.scss new file mode 100644 index 00000000..f7a22a5d --- /dev/null +++ b/scss/uikit/components/form-range.scss @@ -0,0 +1,185 @@ +// Name: Form Range +// Description: Styles for the range input type +// +// Component: `uk-range` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$form-range-thumb-height: 15px !default; +$form-range-thumb-border-radius: 500px !default; +$form-range-thumb-background: $global-color !default; + +$form-range-track-height: 3px !default; +$form-range-track-background: darken($global-muted-background, 5%) !default; +$form-range-track-focus-background: darken($global-muted-background, 15%) !default; + + +/* ======================================================================== + Component: Form Range + ========================================================================== */ + +/* + * 1. Normalize and defaults + * 2. Prevent content overflow if a fixed width is used + * 3. Take the full width + * 4. Remove default style + * 5. Remove white background in Chrome + * 6. Remove padding in IE11 + */ + +.uk-range { + /* 1 */ + box-sizing: border-box; + margin: 0; + vertical-align: middle; + /* 2 */ + max-width: 100%; + /* 3 */ + width: 100%; + /* 4 */ + -webkit-appearance: none; + /* 5 */ + background: transparent; + /* 6 */ + padding: 0; + @if(mixin-exists(hook-form-range)) {@include hook-form-range();} +} + +/* Focus */ +.uk-range:focus { outline: none; } +.uk-range::-moz-focus-outer { border: none; } + +/* IE11 Reset */ +.uk-range::-ms-track { + height: $form-range-thumb-height; + background: transparent; + border-color: transparent; + color: transparent; +} + +/* + * Improves consistency of cursor style for clickable elements + */ + +.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; } +.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; } +.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; } + + +/* Thumb + ========================================================================== */ + +/* + * 1. Reset + * 2. Style + */ + +/* Webkit */ +.uk-range::-webkit-slider-thumb { + /* 1 */ + -webkit-appearance: none; + margin-top: (floor($form-range-thumb-height / 2) * -1); + /* 2 */ + height: $form-range-thumb-height; + width: $form-range-thumb-height; + border-radius: $form-range-thumb-border-radius; + background: $form-range-thumb-background; + @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} +} + +/* Firefox */ +.uk-range::-moz-range-thumb { + /* 1 */ + border: none; + /* 2 */ + height: $form-range-thumb-height; + width: $form-range-thumb-height; + border-radius: $form-range-thumb-border-radius; + background: $form-range-thumb-background; + @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} +} + +/* Edge */ +.uk-range::-ms-thumb { + /* 1 */ + margin-top: 0; +} + +/* IE11 */ +.uk-range::-ms-thumb { + /* 1 */ + border: none; + /* 2 */ + height: $form-range-thumb-height; + width: $form-range-thumb-height; + border-radius: $form-range-thumb-border-radius; + background: $form-range-thumb-background; + @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} +} + +/* Edge + IE11 */ +.uk-range::-ms-tooltip { display: none; } + + +/* Track + ========================================================================== */ + +/* + * 1. Safari doesn't have a focus state. Using active instead. + */ + +/* Webkit */ +.uk-range::-webkit-slider-runnable-track { + height: $form-range-track-height; + background: $form-range-track-background; + @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} +} + +.uk-range:focus::-webkit-slider-runnable-track, +/* 1 */ +.uk-range:active::-webkit-slider-runnable-track { + background: $form-range-track-focus-background; + @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} +} + +/* Firefox */ +.uk-range::-moz-range-track { + height: $form-range-track-height; + background: $form-range-track-background; + @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} +} + +.uk-range:focus::-moz-range-track { + background: $form-range-track-focus-background; + @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} +} + +/* Edge */ +.uk-range::-ms-fill-lower, +.uk-range::-ms-fill-upper { + height: $form-range-track-height; + background: $form-range-track-background; + @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} +} + +.uk-range:focus::-ms-fill-lower, +.uk-range:focus::-ms-fill-upper { + background: $form-range-track-focus-background; + @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();} + +// @mixin hook-form-range(){} +// @mixin hook-form-range-thumb(){} +// @mixin hook-form-range-track(){} +// @mixin hook-form-range-track-focus(){} +// @mixin hook-form-range-misc(){} -- cgit v1.2.3