// Name: Icon // Description: Component to create icons // // Component: `uk-icon` // // Modifiers: `uk-icon-image` // `uk-icon-link` // `uk-icon-button` // // States: `uk-preserve` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== 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 */ .uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; } .uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; } /* * 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 * 1. Required for `span` with background image * 2. Required for `image` */ .uk-icon-image { width: $icon-image-size; height: $icon-image-size; /* 1 */ background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; vertical-align: middle; /* 2 */ object-fit: scale-down; max-width: none; } /* Style modifiers ========================================================================== */ /* * Link * 1. Allow text within link */ .uk-icon-link { color: $icon-link-color; /* 1 */ text-decoration: none !important; @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();} } .uk-icon-link:hover { color: $icon-link-hover-color; @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 */ .uk-icon-button:hover { background-color: $icon-button-hover-background; color: $icon-button-hover-color; @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 // ======================================================================== // @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(){}