← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/better-basic-reconciler-status

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/uncompressed/elements/step.css

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • mto: (132.2.1 reconciler) (145.1.1 trunk)
  • mto: This revision was merged to the branch mainline in revision 156.
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/uncompressed/elements/step.css
 
1
/*
 
2
 * # Semantic - Steps
 
3
 * http://github.com/jlukic/semantic-ui/
 
4
 *
 
5
 *
 
6
 * Copyright 2014 Contributors
 
7
 * Released under the MIT license
 
8
 * http://opensource.org/licenses/MIT
 
9
 *
 
10
 */
 
11
/*******************************
 
12
            Step
 
13
*******************************/
 
14
.ui.step,
 
15
.ui.steps .step {
 
16
  display: inline-block;
 
17
  position: relative;
 
18
  padding: 1em 2em 1em 3em;
 
19
  vertical-align: top;
 
20
  background-color: #FFFFFF;
 
21
  color: #888888;
 
22
  -webkit-box-sizing: border-box;
 
23
  -moz-box-sizing: border-box;
 
24
  -ms-box-sizing: border-box;
 
25
  box-sizing: border-box;
 
26
}
 
27
.ui.step:after,
 
28
.ui.steps .step:after {
 
29
  position: absolute;
 
30
  z-index: 2;
 
31
  content: '';
 
32
  top: 0.42em;
 
33
  right: -1em;
 
34
  border: medium none;
 
35
  background-color: #FFFFFF;
 
36
  width: 2.2em;
 
37
  height: 2.2em;
 
38
  -webkit-transform: rotate(-45deg);
 
39
     -moz-transform: rotate(-45deg);
 
40
      -ms-transform: rotate(-45deg);
 
41
          transform: rotate(-45deg);
 
42
  -webkit-box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
 
43
          box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
 
44
}
 
45
.ui.step,
 
46
.ui.steps .step,
 
47
.ui.steps .step:after {
 
48
  -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
 
49
  -moz-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
 
50
  transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
 
51
}
 
52
/*******************************
 
53
            Types
 
54
*******************************/
 
55
/* Vertical */
 
56
.ui.vertical.steps {
 
57
  overflow: visible;
 
58
}
 
59
.ui.vertical.steps .step {
 
60
  display: block;
 
61
  border-radius: 0em;
 
62
  padding: 1em 2em;
 
63
}
 
64
.ui.vertical.steps .step:first-child {
 
65
  padding: 1em 2em;
 
66
  border-radius: 0em;
 
67
  border-top-left-radius: 0.3125rem;
 
68
  border-top-right-radius: 0.3125rem;
 
69
}
 
70
.ui.vertical.steps .active.step:first-child {
 
71
  border-top-right-radius: 0rem;
 
72
}
 
73
.ui.vertical.steps .step:last-child {
 
74
  border-radius: 0em;
 
75
  border-bottom-left-radius: 0.3125rem;
 
76
  border-bottom-right-radius: 0.3125rem;
 
77
}
 
78
.ui.vertical.steps .active.step:last-child {
 
79
  border-bottom-right-radius: 0rem;
 
80
}
 
81
/* Arrow */
 
82
.ui.vertical.steps .step:after {
 
83
  display: none;
 
84
}
 
85
/* Active Arrow */
 
86
.ui.vertical.steps .active.step:after {
 
87
  display: block;
 
88
}
 
89
/* Two Line */
 
90
.ui.vertical.steps .two.line.step {
 
91
  line-height: 1.3;
 
92
}
 
93
.ui.vertical.steps .two.line.active.step:after {
 
94
  position: absolute;
 
95
  z-index: 2;
 
96
  content: '';
 
97
  top: 0em;
 
98
  right: -1.45em;
 
99
  background-color: transparent;
 
100
  border-bottom: 2.35em solid transparent;
 
101
  border-left: 1.55em solid #555555;
 
102
  border-top: 2.35em solid transparent;
 
103
  width: 0em;
 
104
  height: 0em;
 
105
  -webkit-transform: none;
 
106
     -moz-transform: none;
 
107
      -ms-transform: none;
 
108
          transform: none;
 
109
}
 
110
/*******************************
 
111
            Group
 
112
*******************************/
 
113
.ui.steps {
 
114
  cursor: pointer;
 
115
  display: inline-block;
 
116
  font-size: 0em;
 
117
  overflow: hidden;
 
118
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
119
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
120
  line-height: 1;
 
121
  -webkit-box-sizing: border-box;
 
122
  -moz-box-sizing: border-box;
 
123
  -ms-box-sizing: border-box;
 
124
  box-sizing: border-box;
 
125
  border-radius: 0.3125rem;
 
126
}
 
127
.ui.steps .step:first-child {
 
128
  padding-left: 1.35em;
 
129
  border-radius: 0.3125em 0em 0em 0.3125em;
 
130
}
 
131
.ui.steps .step:last-child {
 
132
  border-radius: 0em 0.3125em 0.3125em 0em;
 
133
}
 
134
.ui.steps .step:only-child {
 
135
  border-radius: 0.3125em;
 
136
}
 
137
.ui.steps .step:last-child {
 
138
  margin-right: 0em;
 
139
}
 
140
.ui.steps .step:last-child:after {
 
141
  display: none;
 
142
}
 
143
/*******************************
 
144
             States
 
145
*******************************/
 
146
/* Hover */
 
147
.ui.step:hover,
 
148
.ui.step.hover {
 
149
  background-color: #F7F7F7;
 
150
  color: rgba(0, 0, 0, 0.8);
 
151
}
 
152
.ui.steps .step.hover:after,
 
153
.ui.steps .step:hover:after,
 
154
.ui.step:hover,
 
155
.ui.step.hover::after {
 
156
  background-color: #F7F7F7;
 
157
}
 
158
/* Hover */
 
159
.ui.steps .step.down,
 
160
.ui.steps .step:active,
 
161
.ui.step.down,
 
162
.ui.step:active {
 
163
  background-color: #F0F0F0;
 
164
}
 
165
.ui.steps .step.down:after,
 
166
.ui.steps .step:active:after,
 
167
.ui.steps.down::after,
 
168
.ui.steps:active::after {
 
169
  background-color: #F0F0F0;
 
170
}
 
171
/* Active */
 
172
.ui.steps .step.active,
 
173
.ui.active.step {
 
174
  cursor: auto;
 
175
  background-color: #555555;
 
176
  color: #FFFFFF;
 
177
  font-weight: bold;
 
178
}
 
179
.ui.steps .step.active:after,
 
180
.ui.active.steps:after {
 
181
  background-color: #555555;
 
182
  -webkit-box-shadow: none;
 
183
          box-shadow: none;
 
184
}
 
185
/* Disabled */
 
186
.ui.steps .disabled.step,
 
187
.ui.disabled.step {
 
188
  cursor: auto;
 
189
  background-color: #FFFFFF;
 
190
  color: #CBCBCB;
 
191
}
 
192
.ui.steps .disabled.step:after,
 
193
.ui.disabled.step:after {
 
194
  background-color: #FFFFFF;
 
195
}
 
196
/*******************************
 
197
           Variations
 
198
*******************************/
 
199
/* Attached */
 
200
.attached.ui.steps {
 
201
  margin: 0em;
 
202
  border-radius: 0.3125em 0.3125em 0em 0em;
 
203
}
 
204
.attached.ui.steps .step:first-child {
 
205
  border-radius: 0.3125em 0em 0em 0em;
 
206
}
 
207
.attached.ui.steps .step:last-child {
 
208
  border-radius: 0em 0.3125em 0em 0em;
 
209
}
 
210
/* Bottom Side */
 
211
.bottom.attached.ui.steps {
 
212
  margin-top: -1px;
 
213
  border-radius: 0em 0em 0.3125em 0.3125em;
 
214
}
 
215
.bottom.attached.ui.steps .step:first-child {
 
216
  border-radius: 0em 0em 0em 0.3125em;
 
217
}
 
218
.bottom.attached.ui.steps .step:last-child {
 
219
  border-radius: 0em 0em 0.3125em 0em;
 
220
}
 
221
/* Evenly divided  */
 
222
.ui.one.steps,
 
223
.ui.two.steps,
 
224
.ui.three.steps,
 
225
.ui.four.steps,
 
226
.ui.five.steps,
 
227
.ui.six.steps,
 
228
.ui.seven.steps,
 
229
.ui.eight.steps {
 
230
  display: block;
 
231
}
 
232
.ui.one.steps > .step {
 
233
  width: 100%;
 
234
}
 
235
.ui.two.steps > .step {
 
236
  width: 50%;
 
237
}
 
238
.ui.three.steps > .step {
 
239
  width: 33.333%;
 
240
}
 
241
.ui.four.steps > .step {
 
242
  width: 25%;
 
243
}
 
244
.ui.five.steps > .step {
 
245
  width: 20%;
 
246
}
 
247
.ui.six.steps > .step {
 
248
  width: 16.666%;
 
249
}
 
250
.ui.seven.steps > .step {
 
251
  width: 14.285%;
 
252
}
 
253
.ui.eight.steps > .step {
 
254
  width: 12.500%;
 
255
}
 
256
/*******************************
 
257
             Sizes
 
258
*******************************/
 
259
.ui.mini.step,
 
260
.ui.mini.steps .step {
 
261
  font-size: 0.8rem;
 
262
}
 
263
.ui.small.step,
 
264
.ui.small.steps .step {
 
265
  font-size: 0.875rem;
 
266
}
 
267
.ui.step,
 
268
.ui.steps .step {
 
269
  font-size: 1rem;
 
270
}
 
271
.ui.large.step,
 
272
.ui.large.steps .step {
 
273
  font-size: 1.125rem;
 
274
}
 
275
.ui.big.step,
 
276
.ui.big.steps .step {
 
277
  font-size: 1.25rem;
 
278
}
 
279
.ui.huge.step,
 
280
.ui.huge.steps .step {
 
281
  font-size: 1.375rem;
 
282
}
 
283
.ui.massive.step,
 
284
.ui.massive.steps .step {
 
285
  font-size: 1.5rem;
 
286
  font-weight: bold;
 
287
}