← Back to branch summary

~maas-committers/maas/trunk

« back to all changes in this revision

Viewing changes to src/maasserver/static/scss/_components.icons.scss

Adding all assets and new theme files

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/scss/_components.icons.scss
 
1
////
 
2
/// @author       Web Team at Canonical Ltd
 
3
/// @link         http://ubuntudesign.github.io/maas-gui-vanilla-theme/docs/#mixin-maas-icons
 
4
/// @since        0.0.1
 
5
////
 
6
 
 
7
/// Icons
 
8
/// @group Icons
 
9
@mixin maas-icons {
 
10
 
 
11
  .icon {
 
12
    @include icon-size(16px);
 
13
    padding: 0;
 
14
    border-bottom: 0;
 
15
    display: inline-block;
 
16
    vertical-align: middle;
 
17
    text-indent: 999em;
 
18
 
 
19
    &.icon--add {
 
20
      background: url('#{$asset-path}images/icons/add.svg') no-repeat;
 
21
      background-size: 100% 100%;
 
22
    }
 
23
 
 
24
    &.icon--cross {
 
25
      background: url('#{$asset-path}images/icons/cross.svg') no-repeat;
 
26
      background-size: 100% 100%;
 
27
    }
 
28
 
 
29
    &.icon--cross-orange {
 
30
      background: url('#{$asset-path}images/icons/cross_orange.svg') no-repeat;
 
31
      background-size: 100% 100%;
 
32
    }
 
33
 
 
34
    &.icon--debug {
 
35
      background: url('#{$asset-path}images/icons/debug.svg') no-repeat;
 
36
      background-size: 100% 100%;
 
37
    }
 
38
 
 
39
    &.icon--delete {
 
40
      background: url('#{$asset-path}images/icons/delete.svg') no-repeat;
 
41
      background-size: 100% 100%;
 
42
    }
 
43
 
 
44
    &.icon--edit {
 
45
      background: url('#{$asset-path}images/icons/edit.svg') no-repeat;
 
46
      background-size: 100% 100%;
 
47
    }
 
48
 
 
49
    &.icon--error {
 
50
      background: url('#{$asset-path}images/icons/error_colour_white.svg') no-repeat;
 
51
      background-size: 100% 100%;
 
52
 
 
53
      &-dark {
 
54
        background: url('#{$asset-path}images/icons/error_colour_black.svg') no-repeat;
 
55
      }
 
56
 
 
57
      &-mono {
 
58
        background: url('#{$asset-path}images/icons/error_colour_mono.svg') no-repeat;
 
59
      }
 
60
    }
 
61
 
 
62
    &.icon--help {
 
63
      background: url('#{$asset-path}images/icons/help_colour_white.svg') no-repeat;
 
64
      background-size: 100% 100%;
 
65
 
 
66
      &-dark {
 
67
        background: url('#{$asset-path}images/icons/help_colour_black.svg') no-repeat;
 
68
      }
 
69
 
 
70
      &-mono {
 
71
        background: url('#{$asset-path}images/icons/help_colour_mono.svg') no-repeat;
 
72
      }
 
73
    }
 
74
 
 
75
    &.icon--info {
 
76
      background: url('#{$asset-path}images/icons/information_colour_white.svg') no-repeat;
 
77
      background-size: 100% 100%;
 
78
 
 
79
      &-dark {
 
80
        background: url('#{$asset-path}images/icons/information_colour_black.svg') no-repeat;
 
81
      }
 
82
 
 
83
      &-mono {
 
84
        background: url('#{$asset-path}images/icons/information_colour_mono.svg') no-repeat;
 
85
      }
 
86
    }
 
87
 
 
88
    &.icon--loading {
 
89
      background: url('#{$asset-path}images/icons/in_progress.png') no-repeat;
 
90
      background-size: 100% 100%;
 
91
    }
 
92
 
 
93
    &.icon--partition {
 
94
      background: url('#{$asset-path}images/icons/add-partition.svg') no-repeat;
 
95
      background-size: 100% 100%;
 
96
    }
 
97
 
 
98
    &.icon--power-error {
 
99
      background: url('#{$asset-path}images/icons/power-error.svg') no-repeat;
 
100
      background-size: 100% 100%;
 
101
    }
 
102
 
 
103
    &.icon--power-off {
 
104
      background: url('#{$asset-path}images/icons/power-off.svg') no-repeat;
 
105
      background-size: 100% 100%;
 
106
    }
 
107
 
 
108
    &.icon--power-on {
 
109
      background: url('#{$asset-path}images/icons/power-on.svg') no-repeat;
 
110
      background-size: 100% 100%;
 
111
    }
 
112
 
 
113
    &.icon--remove {
 
114
      background: url('#{$asset-path}images/icons/remove.svg') no-repeat;
 
115
      background-size: 100% 100%;
 
116
    }
 
117
 
 
118
    &.icon--success {
 
119
      background: url('#{$asset-path}images/icons/success_colour_white.svg') no-repeat;
 
120
      background-size: 100% 100%;
 
121
 
 
122
      &-dark {
 
123
        background: url('#{$asset-path}images/icons/success_colour_black.svg') no-repeat;
 
124
      }
 
125
 
 
126
      &-mono {
 
127
        background: url('#{$asset-path}images/icons/success_colour_mono.svg') no-repeat;
 
128
      }
 
129
    }
 
130
 
 
131
    &.icon--tooltip {
 
132
      background: url('#{$asset-path}images/icons/tooltip.svg') no-repeat;
 
133
      background-size: 100% 100%;
 
134
    }
 
135
 
 
136
    &.icon--logical-volume {
 
137
      background: url('#{$asset-path}images/icons/add-logical-volume.svg') no-repeat;
 
138
      background-size: 100% 100%;
 
139
    }
 
140
 
 
141
    &.icon--warning {
 
142
      background: url('#{$asset-path}images/icons/warning_colour_white.svg') no-repeat;
 
143
      background-size: 100% 100%;
 
144
 
 
145
      &-dark {
 
146
        background: url('#{$asset-path}images/icons/warning_colour_black.svg') no-repeat;
 
147
      }
 
148
 
 
149
      &-mono {
 
150
        background: url('#{$asset-path}images/icons/warning_colour_mono.svg') no-repeat;
 
151
      }
 
152
    }
 
153
  }
 
154
 
 
155
  /// Set a specific icon size
 
156
  .icon--small {
 
157
    @include icon-size(14px);
 
158
  }
 
159
 
 
160
  .icon--large {
 
161
    @include icon-size(20px);
 
162
  }
 
163
 
 
164
  .icon--mega {
 
165
    @include icon-size(23px);
 
166
  }
 
167
 
 
168
  .icon--gigantic {
 
169
    @include icon-size(32px);
 
170
  }
 
171
 
 
172
  /// Icon alignment for headings / text
 
173
  h1 {
 
174
 
 
175
    .icon {
 
176
      margin-top: -6px;
 
177
    }
 
178
  }
 
179
 
 
180
  h2,
 
181
  h3 {
 
182
 
 
183
    .icon {
 
184
      margin-top: -5px;
 
185
    }
 
186
  }
 
187
 
 
188
  h4,
 
189
  h5,
 
190
  p,
 
191
  label,
 
192
  button,
 
193
  a,
 
194
  th,
 
195
  td,
 
196
  .table__header,
 
197
  .table__data {
 
198
 
 
199
    .icon {
 
200
      margin-top: -3px;
 
201
    }
 
202
  }
 
203
}
 
204
 
 
205
@mixin icon-size($size) {
 
206
  width: $size;
 
207
  height: $size;
 
208
}