1/* Generated using nucleoapp.com */ 2/* -------------------------------- 3 4Icon colors 5 6-------------------------------- */ 7 8.icon { 9 display: inline-block; 10 /* icon primary color */ 11 color: #111111; 12 height: 1em; 13 width: 1em; 14} 15 16.icon use { 17 /* icon secondary color - fill */ 18 fill: #7ea6f6; 19} 20 21.icon.icon-outline use { 22 /* icon secondary color - stroke */ 23 stroke: #7ea6f6; 24} 25 26/* -------------------------------- 27 28Change icon size 29 30-------------------------------- */ 31 32.icon-xs { 33 height: 0.5em; 34 width: 0.5em; 35} 36 37.icon-sm { 38 height: 0.8em; 39 width: 0.8em; 40} 41 42.icon-lg { 43 height: 1.6em; 44 width: 1.6em; 45} 46 47.icon-xl { 48 height: 2em; 49 width: 2em; 50} 51 52/* -------------------------------- 53 54Align icon and text 55 56-------------------------------- */ 57 58.icon-text-aligner { 59 /* add this class to parent element that contains icon + text */ 60 display: flex; 61 align-items: center; 62} 63 64.icon-text-aligner .icon { 65 color: inherit; 66 margin-right: 0.4em; 67} 68 69.icon-text-aligner .icon use { 70 color: inherit; 71 fill: currentColor; 72} 73 74.icon-text-aligner .icon.icon-outline use { 75 stroke: currentColor; 76} 77 78/* -------------------------------- 79 80Icon reset values - used to enable color customizations 81 82-------------------------------- */ 83 84.icon { 85 fill: currentColor; 86 stroke: none; 87} 88 89.icon.icon-outline { 90 fill: none; 91 stroke: currentColor; 92} 93 94.icon use { 95 stroke: none; 96} 97 98.icon.icon-outline use { 99 fill: none; 100} 101 102/* -------------------------------- 103 104Stroke effects - Nucleo outline icons 105 106- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes) 107- 24px, 32px icons -> up to 2px stroke 108- 48px, 64px icons -> up to 4px stroke 109 110-------------------------------- */ 111 112.icon-outline.icon-stroke-1 { 113 stroke-width: 1px; 114} 115 116.icon-outline.icon-stroke-2 { 117 stroke-width: 2px; 118} 119 120.icon-outline.icon-stroke-3 { 121 stroke-width: 3px; 122} 123 124.icon-outline.icon-stroke-4 { 125 stroke-width: 4px; 126} 127 128.icon-outline.icon-stroke-1 use, 129.icon-outline.icon-stroke-3 use { 130 -webkit-transform: translateX(0.5px) translateY(0.5px); 131 -moz-transform: translateX(0.5px) translateY(0.5px); 132 -ms-transform: translateX(0.5px) translateY(0.5px); 133 -o-transform: translateX(0.5px) translateY(0.5px); 134 transform: translateX(0.5px) translateY(0.5px); 135}