/*!
* svg-based version of: * # Semantic UI 2.3.1 - Icon * http://github.com/semantic-org/semantic-ui/ * * Released under the MIT license * http://opensource.org/licenses/MIT */
/*******************************
Changes from Semantic-UI font-based icons:
-
no icon font, no references to font files or font properties
-
css is defined for <svg> tags, not <i> tags
-
no icon symbols are defined in css; all icons are defined in svg.html as symbol definitions
specifically, by commented section:
-
Icon : tweaked to remove font references
-
Types : same
-
States : same
-
Variations : same
-
Groups : same
-
Icons : removed (see _data/svg_icons.yml for all symbol definitions and ids)
-
Outline Icons : removed (see _data/svg_icons.yml for all symbol definitions and ids)
-
Brand Icons : removed (see _data/svg_icons.yml for all symbol definitions and ids)
Usage:
font: <i class="info circle icon"></i> svg : {% include icon.liquid id='info-circle' %}
Why?
*******************************/
/*******************************
SVG Icon
*******************************/
svg.icon {
display: inline-block; position: relative; top: .18em; width: 1.18em; height: 1em; opacity: 1; margin: 0; fill: currentColor; speak: none;
}
svg.icon:before {
background: none !important;
}
/*******************************
Types
*******************************/
/*————–
Loading
—————*/
svg.icon.loading {
height: 1em; line-height: 1; -webkit-animation: icon-loading 2s linear infinite; animation: icon-loading 2s linear infinite;
} @-webkit-keyframes icon-loading {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
} @keyframes icon-loading {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/*******************************
States
*******************************/
svg.icon.hover {
opacity: 1 !important;
} svg.icon.active {
opacity: 1 !important;
} svg.emphasized.icon {
opacity: 1 !important;
} svg.disabled.icon {
opacity: 0.45 !important;
}
/*******************************
Variations
*******************************/
/*——————-
Fitted
——————–*/
svg.fitted.icon {
width: auto; margin: 0em !important;
}
/*——————-
Link
——————–*/
svg.link.icon, svg.link.icons {
cursor: pointer; opacity: 0.8; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease;
} svg.link.icon:hover, svg.link.icons:hover {
opacity: 1 !important;
}
/*——————-
Circular
——————–*/
svg.circular.icon {
border-radius: 500em !important; line-height: 1 !important; padding: 0.5em 0.5em !important; -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; width: 2em !important; height: 2em !important;
} svg.circular.inverted.icon {
border: none; -webkit-box-shadow: none; box-shadow: none;
}
/*——————-
Flipped
——————–*/
svg.flipped.icon, svg.horizontally.flipped.icon {
-webkit-transform: scale(-1, 1); transform: scale(-1, 1);
} svg.vertically.flipped.icon {
-webkit-transform: scale(1, -1); transform: scale(1, -1);
}
/*——————-
Rotated
——————–*/
svg.rotated.icon, svg.right.rotated.icon, svg.clockwise.rotated.icon {
-webkit-transform: rotate(90deg); transform: rotate(90deg);
} svg.left.rotated.icon, svg.counterclockwise.rotated.icon {
-webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
/*——————-
Bordered
——————–*/
svg.bordered.icon {
line-height: 1; vertical-align: baseline; width: 2em; height: 2em; padding: 0.5em 0em !important; -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
} svg.bordered.inverted.icon {
border: none; -webkit-box-shadow: none; box-shadow: none;
}
/*——————-
Inverted
——————–*/
/* Inverted Shapes */ svg.inverted.bordered.icon, svg.inverted.circular.icon {
background-color: #1B1C1D !important; color: #FFFFFF !important;
} svg.inverted.icon {
color: #FFFFFF;
}
/*——————-
Colors
——————–*/
/* Red */ svg.red.icon {
color: #DB2828 !important;
} svg.inverted.red.icon {
color: #FF695E !important;
} svg.inverted.bordered.red.icon, svg.inverted.circular.red.icon {
background-color: #DB2828 !important; color: #FFFFFF !important;
}
/* Orange */ svg.orange.icon {
color: #F2711C !important;
} svg.inverted.orange.icon {
color: #FF851B !important;
} svg.inverted.bordered.orange.icon, svg.inverted.circular.orange.icon {
background-color: #F2711C !important; color: #FFFFFF !important;
}
/* Yellow */ svg.yellow.icon {
color: #FBBD08 !important;
} svg.inverted.yellow.icon {
color: #FFE21F !important;
} svg.inverted.bordered.yellow.icon, svg.inverted.circular.yellow.icon {
background-color: #FBBD08 !important; color: #FFFFFF !important;
}
/* Olive */ svg.olive.icon {
color: #B5CC18 !important;
} svg.inverted.olive.icon {
color: #D9E778 !important;
} svg.inverted.bordered.olive.icon, svg.inverted.circular.olive.icon {
background-color: #B5CC18 !important; color: #FFFFFF !important;
}
/* Green */ svg.green.icon {
color: #21BA45 !important;
} svg.inverted.green.icon {
color: #2ECC40 !important;
} svg.inverted.bordered.green.icon, svg.inverted.circular.green.icon {
background-color: #21BA45 !important; color: #FFFFFF !important;
}
/* Teal */ svg.teal.icon {
color: #00B5AD !important;
} svg.inverted.teal.icon {
color: #6DFFFF !important;
} svg.inverted.bordered.teal.icon, svg.inverted.circular.teal.icon {
background-color: #00B5AD !important; color: #FFFFFF !important;
}
/* Blue */ svg.blue.icon {
color: #2185D0 !important;
} svg.inverted.blue.icon {
color: #54C8FF !important;
} svg.inverted.bordered.blue.icon, svg.inverted.circular.blue.icon {
background-color: #2185D0 !important; color: #FFFFFF !important;
}
/* Violet */ svg.violet.icon {
color: #6435C9 !important;
} svg.inverted.violet.icon {
color: #A291FB !important;
} svg.inverted.bordered.violet.icon, svg.inverted.circular.violet.icon {
background-color: #6435C9 !important; color: #FFFFFF !important;
}
/* Purple */ svg.purple.icon {
color: #A333C8 !important;
} svg.inverted.purple.icon {
color: #DC73FF !important;
} svg.inverted.bordered.purple.icon, svg.inverted.circular.purple.icon {
background-color: #A333C8 !important; color: #FFFFFF !important;
}
/* Pink */ svg.pink.icon {
color: #E03997 !important;
} svg.inverted.pink.icon {
color: #FF8EDF !important;
} svg.inverted.bordered.pink.icon, svg.inverted.circular.pink.icon {
background-color: #E03997 !important; color: #FFFFFF !important;
}
/* Brown */ svg.brown.icon {
color: #A5673F !important;
} svg.inverted.brown.icon {
color: #D67C1C !important;
} svg.inverted.bordered.brown.icon, svg.inverted.circular.brown.icon {
background-color: #A5673F !important; color: #FFFFFF !important;
}
/* Grey */ svg.grey.icon {
color: #767676 !important;
} svg.inverted.grey.icon {
color: #DCDDDE !important;
} svg.inverted.bordered.grey.icon, svg.inverted.circular.grey.icon {
background-color: #767676 !important; color: #FFFFFF !important;
}
/* Black */ svg.black.icon {
color: #1B1C1D !important;
} svg.inverted.black.icon {
color: #545454 !important;
} svg.inverted.bordered.black.icon, svg.inverted.circular.black.icon {
background-color: #1B1C1D !important; color: #FFFFFF !important;
}
/*——————-
Sizes
——————–*/
svg.mini.icon, svg.mini.icons {
line-height: 1; font-size: 0.4em;
} svg.tiny.icon, svg.tiny.icons {
line-height: 1; font-size: 0.5em;
} svg.small.icon, svg.small.icons {
line-height: 1; font-size: 0.75em;
} svg.icon, svg.icons {
font-size: 1em;
} svg.large.icon, svg.large.icons {
line-height: 1; vertical-align: middle; font-size: 1.5em;
} svg.big.icon, svg.big.icons {
line-height: 1; vertical-align: middle; font-size: 2em;
} svg.huge.icon, svg.huge.icons {
line-height: 1; vertical-align: middle; font-size: 4em;
} svg.massive.icon, svg.massive.icons {
line-height: 1; vertical-align: middle; font-size: 8em;
}
/*******************************
Groups
*******************************/
svg.icons {
display: inline-block; position: relative; line-height: 1;
} svg.icons .icon {
position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); margin: 0em; margin: 0;
} svg.icons .icon:first-child {
position: static; width: auto; height: auto; vertical-align: top; -webkit-transform: none; transform: none; margin-right: 0.25rem;
}
/* Corner Icon */ svg.icons .corner.icon {
top: auto; left: auto; right: 0; bottom: 0; -webkit-transform: none; transform: none; font-size: 0.45em; text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
} svg.icons .top.right.corner.icon {
top: 0; left: auto; right: 0; bottom: auto;
} svg.icons .top.left.corner.icon {
top: 0; left: 0; right: auto; bottom: auto;
} svg.icons .bottom.left.corner.icon {
top: auto; left: 0; right: auto; bottom: 0;
} svg.icons .bottom.right.corner.icon {
top: auto; left: auto; right: 0; bottom: 0;
} svg.icons .inverted.corner.icon {
text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D;
}