diff options
Diffstat (limited to 'scss/uikit/components/icon.scss')
| -rw-r--r-- | scss/uikit/components/icon.scss | 223 |
1 files changed, 0 insertions, 223 deletions
diff --git a/scss/uikit/components/icon.scss b/scss/uikit/components/icon.scss deleted file mode 100644 index 2ff70ecf..00000000 --- a/scss/uikit/components/icon.scss +++ /dev/null @@ -1,223 +0,0 @@ -// Name: Icon -// Description: Component to create icons -// -// Component: `uk-icon` -// -// Modifiers: `uk-icon-image` -// `uk-icon-link` -// `uk-icon-button` -// -// States: `uk-preserve` -// -// ======================================================================== - - -// Variables -// ======================================================================== - -$icon-image-size: 20px !default; - -$icon-link-color: $global-muted-color !default; -$icon-link-hover-color: $global-color !default; -$icon-link-active-color: darken($global-color, 5%) !default; - -$icon-button-size: 36px !default; -$icon-button-border-radius: 500px !default; -$icon-button-background: $global-muted-background !default; -$icon-button-color: $global-muted-color !default; - -$icon-button-hover-background: darken($icon-button-background, 5%) !default; -$icon-button-hover-color: $global-color !default; - -$icon-button-active-background: darken($icon-button-background, 10%) !default; -$icon-button-active-color: $global-color !default; - - -/* ======================================================================== - Component: Icon - ========================================================================== */ - -/* - * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component. - * 1. Remove margins in Chrome, Safari and Opera. - * 2. Remove borders for `button`. - * 3. Remove border-radius in Chrome. - * 4. Address `overflow` set to `hidden` in IE. - * 5. Correct `font` properties and `color` not being inherited for `button`. - * 6. Remove the inheritance of text transform in Edge, Firefox, and IE. - * 7. Remove default `button` padding and background color - * 8. Style - * 9. Fill all SVG elements with the current text color if no `fill` attribute is set - * 10. Let the container fit the height of the icon - */ - -.uk-icon { - /* 1 */ - margin: 0; - /* 2 */ - border: none; - /* 3 */ - border-radius: 0; - /* 4 */ - overflow: visible; - /* 5 */ - font: inherit; - color: inherit; - /* 6 */ - text-transform: none; - /* 7. */ - padding: 0; - background-color: transparent; - /* 8 */ - display: inline-block; - /* 9 */ - fill: currentcolor; - /* 10 */ - line-height: 0; -} - -/* Required for `button`. */ -button.uk-icon:not(:disabled) { cursor: pointer; } - -/* - * Remove the inner border and padding in Firefox. - */ - -.uk-icon::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * Set the fill and stroke color of all SVG elements to the current text color - * 1. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+ - */ - -.uk-icon [fill*='#']:not(.uk-preserve), -.uk-icon [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 1 -.uk-icon [stroke*='#']:not(.uk-preserve), -.uk-icon [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 1 - -/* - * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 - */ - -.uk-icon > * { transform: translate(0,0); } - - -/* Image modifier - ========================================================================== */ - -/* - * Display images in icon dimensions - */ - -.uk-icon-image { - width: $icon-image-size; - height: $icon-image-size; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: contain; - vertical-align: middle; -} - - -/* Style modifiers - ========================================================================== */ - -/* - * Link - */ - -.uk-icon-link { - color: $icon-link-color; - @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();} -} - -.uk-icon-link:hover, -.uk-icon-link:focus { - color: $icon-link-hover-color; - outline: none; - @if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();} -} - -/* OnClick + Active */ -.uk-icon-link:active, -.uk-active > .uk-icon-link { - color: $icon-link-active-color; - @if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();} -} - -/* - * Button - * 1. Center icon vertically and horizontally - */ - -.uk-icon-button { - box-sizing: border-box; - width: $icon-button-size; - height: $icon-button-size; - border-radius: $icon-button-border-radius; - background: $icon-button-background; - color: $icon-button-color; - vertical-align: middle; - /* 1 */ - display: inline-flex; - justify-content: center; - align-items: center; - @if(mixin-exists(hook-icon-button)) {@include hook-icon-button();} -} - -/* Hover + Focus */ -.uk-icon-button:hover, -.uk-icon-button:focus { - background-color: $icon-button-hover-background; - color: $icon-button-hover-color; - outline: none; - @if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();} -} - -/* OnClick + Active */ -.uk-icon-button:active, -.uk-active > .uk-icon-button { - background-color: $icon-button-active-background; - color: $icon-button-active-color; - @if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();} -} - - -// Hooks -// ======================================================================== - -@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();} - -// @mixin hook-icon-link(){} -// @mixin hook-icon-link-hover(){} -// @mixin hook-icon-link-active(){} -// @mixin hook-icon-button(){} -// @mixin hook-icon-button-hover(){} -// @mixin hook-icon-button-active(){} -// @mixin hook-icon-misc(){} - - -// Inverse -// ======================================================================== - -$inverse-icon-link-color: $inverse-global-muted-color !default; -$inverse-icon-link-hover-color: $inverse-global-color !default; -$inverse-icon-link-active-color: $inverse-global-color !default; -$inverse-icon-button-background: $inverse-global-muted-background !default; -$inverse-icon-button-color: $inverse-global-muted-color !default; -$inverse-icon-button-hover-background: darken($inverse-icon-button-background, 5%) !default; -$inverse-icon-button-hover-color: $inverse-global-color !default; -$inverse-icon-button-active-background: darken($inverse-icon-button-background, 10%) !default; -$inverse-icon-button-active-color: $inverse-global-color !default; - - - -// @mixin hook-inverse-icon-link(){} -// @mixin hook-inverse-icon-link-hover(){} -// @mixin hook-inverse-icon-link-active(){} -// @mixin hook-inverse-icon-button(){} -// @mixin hook-inverse-icon-button-hover(){} -// @mixin hook-inverse-icon-button-active(){} |