1.icon { 2 display: inline-block; 3 width: 1.5em; 4 height: auto; 5} 6 7.icon__more { 8 fill: $primary-accent; 9 stroke: $primary-accent; 10 background: transparent; 11 overflow: visible; 12 &:hover { 13 cursor: pointer; 14 } 15} 16 17.icon__more-dropdown { 18 background: $background-02; 19 position: absolute; 20 right: 3px; 21 white-space: normal; 22 word-wrap: normal; 23 z-index: 200; 24 padding: 1em; 25 font-size: 1em; 26 box-shadow: 2px 4px 5px $box-shadow-color; 27} 28 29.icon__bar-arrow { 30 font-style: normal; 31 &:before { 32 content: '\21E5'; 33 position: absolute; 34 font-size: 1.7em; 35 vertical-align: middle; 36 transform: rotate(90deg); 37 display: inline-block; 38 left: 0px; 39 top: -5px; 40 } 41} 42 43.icon-angle { 44 font-style: normal; 45 &:before { 46 content: '\276F'; 47 display: inline-block; 48 font-size: 1em; 49 margin-left: 1em; 50 color: $text-02; 51 } 52} 53 54.icon__info{ 55 margin-top: -4px; 56 margin-right: .5em; 57 width: 25px; 58 height: 25px; 59 fill: $primary-accent; 60 float: left; 61} 62 63.icon__up-arrow { 64 margin-right: .4em; 65 margin-bottom: -15px; 66 background: url(../assets/images/icon-arrow-blue.svg) center center no-repeat; 67 height: 40px; 68 width: 30px; 69 &.icon-as-spacer { 70 background: url(../assets/images/icon-arrow-gray.svg) center center no-repeat; 71 } 72} 73 74.icon__down-arrow { 75 @extend .icon__up-arrow; 76 transform: rotate(180deg); 77} 78 79.icon__info-tooltip { 80 fill: $primary-accent; 81} 82 83.status-icon { 84 width: 1rem; 85 vertical-align: text-bottom; 86 margin-right: 0.25em; 87} 88 89.icon__info-tooltip { 90 fill: $primary-accent; 91} 92 93.tooltip { 94 @include fontFamily; 95 font-weight: normal; 96 line-height: 1.3; 97} 98 99.tooltip-inner { 100 color: $text-01; 101 background-color: $primary-light; 102 border-radius: 0; 103 border: 1px solid $primary-dark; 104 text-align: left; 105} 106 107.tooltip.in { 108 opacity: 1!important; 109}