1.icon {
2  display: inline-block;
3  width: 20px;
4  height: 20px;
5  position: relative;
6  speak: none;
7  font-style: normal;
8  &.icon-as-spacer {
9    text-indent: -9999px;
10  }
11}
12
13.icon__more {
14  fill: $medblue;
15  stroke: $medblue;
16  background: transparent;
17  overflow: visible;
18  &:hover {
19    cursor: pointer;
20  }
21}
22
23.icon__more-dropdown {
24  background: $lightgrey;
25  position: absolute;
26  right: 3px;
27  white-space: normal;
28  word-wrap: normal;
29  z-index: 200;
30  padding: 1em;
31  font-size: 1em;
32  box-shadow: 2px 4px 5px $medgrey;
33}
34
35.icon__bar-arrow {
36  &:before {
37    content: '\21E5';
38    position: absolute;
39    font-size: 1.7em;
40    vertical-align: middle;
41    transform: rotate(90deg);
42    display: inline-block;
43    left: 0px;
44    top: -5px;
45  }
46}
47
48.icon-angle {
49  &:before {
50    content: '\276F';
51    display: inline-block;
52    font-size: 1em;
53    margin-left: 1em;
54    color: lighten($darkgrey, 4%);
55  }
56}
57//Status icons
58@mixin status-icon {
59  background-repeat: no-repeat;
60  vertical-align: middle;
61  width: 16px;
62  height: 16px;
63  margin-right: .4em;
64  margin-left: .3em;
65}
66
67.icon__warning {
68  @include status-icon;
69  background-image: url(/assets/images/icon-warning.svg);
70}
71
72.modal .icon__warning {
73  width: 30px;
74  height: 30px;
75}
76
77.icon__critical {
78  @include status-icon;
79  background-image: url(/assets/images/icon-critical.svg);
80}
81
82.icon__good {
83  @include status-icon;
84  background-image: url(/assets/images/icon-on.svg);
85}
86
87.icon__off {
88  @include status-icon;
89  background-image: url(/assets/images/icon-off.svg);
90}
91
92.icon__return {
93  @include status-icon;
94  background-image: url(/assets/images/icon-return.svg);
95}
96
97.icon__standby {
98  @include status-icon;
99  background-image: url(/assets/images/icon-standby.svg);
100}
101
102.icon__plus {
103  @include status-icon;
104  background-image: url(/assets/images/icon-plus.svg);
105}
106
107.icon__info{
108  margin-top: -4px;
109  margin-right: .5em;
110  width: 25px;
111  height: 25px;
112  fill: $medblue;
113  float: left;
114}
115
116.icon__up-arrow {
117  margin-right: .4em;
118  margin-bottom: -15px;
119  background: url(/assets/images/icon-arrow-blue.svg) center center no-repeat;
120  height: 40px;
121  width: 30px;
122  &.icon-as-spacer {
123    background: url(/assets/images/icon-arrow-gray.svg) center center no-repeat;
124  }
125}
126.icon__down-arrow {
127  @extend .icon__up-arrow;
128  transform: rotate(180deg);
129}