mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
6.5 KiB
220 lines
6.5 KiB
// 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
|
|
*/
|
|
|
|
.uk-icon [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
|
|
.uk-icon [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
|
|
*/
|
|
|
|
.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(){}
|
|
|