diff options
Diffstat (limited to 'scss/uikit/components/form-range.scss')
-rw-r--r-- | scss/uikit/components/form-range.scss | 185 |
1 files changed, 185 insertions, 0 deletions
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(){} |