Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
242 lines (214 sloc) 5.26 KB
// @page Design/Icons
// @name Icons
// @partial icons
//
// @description
// Our icons are displayed via `xlink:href` in the `<use>` tags. This allows us to directly embed SVGs in a flexible manner and be able to apply transformations and any sort of colours onto them.
// We use an SVG sprite called `icons.svg` that is versioned just like ustyle. As per the examples, the icons are referenced via the ID, like this: `icons.svg#icon-bookmark`
//
// **Accessibility**: In most cases, icons are purely presentational elements. In this scenario, you want to add: `aria-hidden="true"` and `role="presentation"` to your code.
//
// #### Usage
// * Suffixing with `--{size}` where size is one of *small*, *medium* or *large* will change the size of the icon from 16px, 32px and 64px respectively.
// * `.us-icon--{size}--sm-tablet` and `.us-icon--{size}--mobile` will override icon sizes for those screen size
// * `.us-icon--notext` allows you to set any element with no content to an icon
// * blue, typegrey, inputgrey, typecyan and custom are colors that can be set on the icon with `.us-icon--{color}`
// * Colors can be changed by adding your own `fill:` style to the SVG.
// * [svg4everybody.js](https://github.com/jonathantneal/svg4everybody) is needed for Internet Explorer browsers
//
// @state alarm
// @state android
// @state arrow-circle
// @state arrow-up
// @state arrow-down
// @state book
// @state bookmark
// @state breadcrumb
// @state calculator
// @state calendar
// @state car
// @state checkbox-tick
// @state chevron-right
// @state clock
// @state close
// @state cog
// @state credit-card
// @state cross
// @state dual-fuel
// @state electric-light
// @state envelope
// @state exit-noexit
// @state facebook
// @state facebook-brand
// @state filter
// @state fixed-variable
// @state gas
// @state gauge
// @state github
// @state google
// @state google-brand
// @state graph-up
// @state home
// @state hot
// @state info
// @state kettle
// @state key
// @state lock
// @state magnify-in
// @state magnify
// @state menu
// @state message
// @state mobile
// @state monthly-dd
// @state network
// @state no-exit
// @state pdf
// @state pencil
// @state person-add
// @state person
// @state phone
// @state piggy-bank
// @state pin
// @state pound-note
// @state present
// @state print
// @state quarterly-dd
// @state question-circle
// @state quote
// @state recycle
// @state remove
// @state renewable
// @state results
// @state save
// @state share
// @state shield
// @state sim
// @state smiley
// @state sort
// @state speech-circle
// @state speech
// @state spinner
// @state star-half
// @state star
// @state starline-half
// @state starline
// @state talk
// @state tick-circle
// @state tick
// @state tv
// @state twitter
// @state twitter-brand
// @state uswitch
// @state variable
// @state warning-circle
// @state wifi
// @state wiki
// @state xml
// @state play
// @state pound-circle
// @state dashcam
// @state warning
// @state chevron-left
// @state controller
//
// @markup
// <svg role="image" class="us-icon--medium us-icon--custom us-icon--{$modifiers}">
// <use xlink:href="/images/icons.svg#icon-{$modifiers}"></use>
// </svg>
@import "ustyle/basics/variables/icons";
/// Returns a background position for the number of `$icon-colors`
///
/// @group icons
/// @author David Annez
///
// scss-lint:disable QualifyingElement
// Overrides normalize.css
// Stops icon clipping in Firefox
svg:not(:root) {
overflow: visible;
}
svg.us-icon--before,
svg.us-icon--after {
display: inline-block;
vertical-align: middle;
}
svg.us-icon--before {
margin-right: $gutter-width/4;
}
svg.us-icon--after {
margin-left: $gutter-width/4;
}
.us-icon--centered {
position: relative;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
}
.us-icon--notext {
display: inline-block;
text-indent: -999em;
}
//
// ICON COLOURS
//
/// @require {Variable} icon-colors--svg
///
/// @require {Variable} icon-colors--svg--custom
@each $icon-color in $icon-colors--svg {
$color-name: nth($icon-color, 1);
$color-hex: nth($icon-color, 2);
svg.us-icon--#{$color-name} {
fill: $color-hex;
}
}
// SVG icon coloring for custom classes
@each $icon-colors-svg in $icon-colors--svg--custom {
$icon-name: nth($icon-colors-svg, 1);
$icon-fill: nth($icon-colors-svg, 2);
svg.us-icon--#{$icon-name} {
fill: $icon-fill;
}
}
// SVG icon coloring
@each $icon-color in $icon-colors--svg {
$color-name: nth($icon-color, 1);
$color-hex: nth($icon-color, 2);
svg.us-icon--hover--#{$color-name}:hover {
fill: $color-hex;
}
}
// scss-lint:enable QualifyingElement
//
// ICON SIZING
//
@each $size in $icon-sizes {
$size-name: nth($size, 1);
$width: nth($size, 2);
$height: nth($size, 3);
.us-icon--#{$size-name} {
width: $width;
height: $height;
}
}
@include respond-to(to-small-tablet) {
@each $size in $icon-sizes {
$size-name: nth($size, 1);
$width: nth($size, 2);
$height: nth($size, 3);
.us-icon--#{$size-name}--sm-tablet {
width: $width;
height: $height;
}
}
}
@include respond-to(mobile) {
@each $size in $icon-sizes {
$size-name: nth($size, 1);
$width: nth($size, 2);
$height: nth($size, 3);
.us-icon--#{$size-name}--mobile {
width: $width;
height: $height;
}
}
}
You can’t perform that action at this time.