1.icon { 2 display: inline-block; 3 width: 20px; 4 height: 20px; 5 position: relative; 6 speak: none; 7 &.icon-as-spacer { 8 text-indent: -9999px; 9 } 10} 11 12.icon__more { 13 fill: $medblue; 14 stroke: $medblue; 15 background: $white; 16 overflow: visible; 17 &:hover { 18 cursor: pointer; 19 } 20} 21 22.icon__more-dropdown { 23 background: $lightgrey; 24 position: absolute; 25 right: 3px; 26 white-space: normal; 27 word-wrap: normal; 28 z-index: 200; 29 padding: 1em; 30 font-size: 1em; 31 box-shadow: 2px 4px 5px $medgrey; 32} 33 34.icon__bar-arrow { 35 &:before { 36 content: '\21E5'; 37 position: absolute; 38 font-size: 1.7em; 39 vertical-align: middle; 40 transform: rotate(90deg); 41 display: inline-block; 42 left: 0px; 43 top: -5px; 44 } 45} 46 47.icon__warning { 48 width: 30px; 49 height: 30px; 50 background-image: url(/assets/images/icon-warning.svg); 51 background-repeat: no-repeat; 52 vertical-align: middle; 53} 54 55.icon__critical { 56 width: 20px; 57 height: 20px; 58 border-radius: 50%; 59 position: relative; 60 border-width: 2px; 61 border-style: solid; 62 color: $critical-lightbg; 63 background-color: rgba($critical-bg, 1); 64 background-image: url(/assets/images/crit-x.svg); 65 background-size: 120%; 66 background-position: 50% 50%; 67 background-repeat: no-repeat; 68 border-color: $critical-lightbg; 69} 70 71.icon__info { 72 margin-top: -4px; 73 margin-right: .5em; 74 width: 25px; 75 height: 25px; 76 fill: $medblue; 77 float: left; 78} 79 80.icon__up-arrow { 81 margin-right: 1em; 82 &:before { 83 content: '\029C0'; 84 position: absolute; 85 font-size: 3em; 86 left: 0; 87 top: -50%; 88 transform: rotate(90deg); 89 } 90 &.hide { 91 text-align: -9999px; 92 } 93} 94 95.icon__down-arrow { 96 margin-right: 1em; 97 &:before { 98 content: '\029C0'; 99 position: absolute; 100 font-size: 3em; 101 left: -4px; 102 top: -50%; 103 transform: rotate(-90deg); 104 } 105}