titon-toolkit 0.9.4 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/license.md +23 -0
- data/readme.md +93 -0
- data/src/lib/titon-toolkit.rb +2 -2
- data/src/scss/toolkit.scss +3 -3
- data/src/scss/toolkit/effects/visual.scss +47 -47
- data/src/scss/toolkit/layout/base.scss +32 -32
- data/src/scss/toolkit/layout/code.scss +38 -38
- data/src/scss/toolkit/layout/form.scss +86 -86
- data/src/scss/toolkit/layout/grid.scss +31 -31
- data/src/scss/toolkit/layout/input-group.scss +41 -41
- data/src/scss/toolkit/layout/responsive.scss +21 -21
- data/src/scss/toolkit/layout/table.scss +59 -59
- data/src/scss/toolkit/layout/typography.scss +18 -18
- data/src/scss/toolkit/mixins/_grid.scss +8 -8
- data/src/scss/toolkit/mixins/_layout.scss +36 -36
- data/src/scss/toolkit/mixins/_responsive.scss +56 -56
- data/src/scss/toolkit/mixins/_themes.scss +78 -78
- data/src/scss/toolkit/modules/accordion.scss +33 -33
- data/src/scss/toolkit/modules/blackout.scss +13 -13
- data/src/scss/toolkit/modules/carousel.scss +141 -141
- data/src/scss/toolkit/modules/flyout.scss +57 -57
- data/src/scss/toolkit/modules/modal.scss +206 -206
- data/src/scss/toolkit/modules/popover.scss +58 -58
- data/src/scss/toolkit/modules/showcase.scss +135 -135
- data/src/scss/toolkit/modules/tabs.scss +29 -29
- data/src/scss/toolkit/modules/tooltip.scss +109 -109
- data/src/scss/toolkit/modules/type-ahead.scss +44 -44
- data/src/scss/toolkit/themes/titon.scss +242 -242
- data/src/scss/toolkit/themes/tomorrow-night.scss +322 -322
- data/src/scss/toolkit/ui/alert.scss +29 -29
- data/src/scss/toolkit/ui/breadcrumbs.scss +41 -41
- data/src/scss/toolkit/ui/button-group.scss +181 -181
- data/src/scss/toolkit/ui/button.scss +31 -31
- data/src/scss/toolkit/ui/dropdown.scss +83 -83
- data/src/scss/toolkit/ui/icon.scss +5 -5
- data/src/scss/toolkit/ui/label-badge.scss +48 -48
- data/src/scss/toolkit/ui/lazy-load.scss +8 -5
- data/src/scss/toolkit/ui/matrix.scss +26 -0
- data/src/scss/toolkit/ui/pagination.scss +108 -108
- data/src/scss/toolkit/ui/pin.scss +5 -5
- data/src/scss/toolkit/ui/progress.scss +20 -20
- data/version.md +1 -0
- metadata +17 -5
- checksums.yaml +0 -15
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @copyright
|
|
3
|
-
* @license
|
|
4
|
-
* @link
|
|
2
|
+
* @copyright 2010-2013, The Titon Project
|
|
3
|
+
* @license http://opensource.org/licenses/bsd-license.php
|
|
4
|
+
* @link http://titon.io
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -44,8 +44,8 @@ $error-dark: #7a3636;
|
|
|
44
44
|
//-------------------- Layout --------------------//
|
|
45
45
|
|
|
46
46
|
body {
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
color: $foreground-color;
|
|
48
|
+
background: $background-color;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
//-------------------- Typography --------------------//
|
|
@@ -63,10 +63,10 @@ body {
|
|
|
63
63
|
.text-success { color: $success; }
|
|
64
64
|
|
|
65
65
|
a {
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
color: $info;
|
|
67
|
+
text-decoration: none;
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
&:hover { color: $info-light; }
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
blockquote { border-color: $info; }
|
|
@@ -79,120 +79,120 @@ var { background: $error-light; color: $error-dark; }
|
|
|
79
79
|
//-------------------- Layout --------------------//
|
|
80
80
|
|
|
81
81
|
.table {
|
|
82
|
-
|
|
82
|
+
background: $gray;
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
td, th {
|
|
85
|
+
border-color: $gray-light;
|
|
86
|
+
}
|
|
87
87
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
thead tr,
|
|
89
|
+
tfoot tr {
|
|
90
|
+
background: $gray-light;
|
|
91
91
|
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
th { border-color: $gray-lightest; }
|
|
93
|
+
}
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
|
|
95
|
+
tbody tr {
|
|
96
|
+
background: $gray;
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
98
|
+
&:nth-child(odd) { background: $gray-dark; }
|
|
99
|
+
&.divider { background: $gray-light; }
|
|
100
|
+
}
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.table.table--hover {
|
|
104
|
-
|
|
104
|
+
tbody tr:not(.divider):hover { background: $gray-darkest; }
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.table.table--sortable thead th a {
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
background: $gray-light;
|
|
109
|
+
color: #fff;
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
&:hover { background: shade($gray-light, 5%); }
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
fieldset {
|
|
115
|
-
|
|
115
|
+
border-color: $gray-light;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
.input {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
119
|
+
background: $gray;
|
|
120
|
+
border-color: $gray-light;
|
|
121
|
+
color: $foreground-color;
|
|
122
122
|
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
&:hover { border-color: $gray-lightest; }
|
|
124
|
+
&:focus { border-color: $info; box-shadow: 0 0 5px $info-light; }
|
|
125
125
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
126
|
+
@include disabled-state {
|
|
127
|
+
color: $default;
|
|
128
|
+
border-color: $gray;
|
|
129
|
+
}
|
|
130
130
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
&[readonly] {
|
|
132
|
+
color: $default;
|
|
133
|
+
border-color: $gray;
|
|
134
|
+
box-shadow: none;
|
|
135
|
+
}
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.input-addon {
|
|
139
|
-
|
|
140
|
-
|
|
139
|
+
border-color: $gray-light;
|
|
140
|
+
background-color: $gray-dark;
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.input-group {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
144
|
+
.input-addon,
|
|
145
|
+
.button,
|
|
146
|
+
.button-group {
|
|
147
|
+
box-shadow: none;
|
|
148
|
+
margin-right: -5px;
|
|
149
|
+
}
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
.field {
|
|
153
|
-
|
|
153
|
+
@include field-style;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
//-------------------- Accordion --------------------//
|
|
157
157
|
|
|
158
158
|
.accordion {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
159
|
+
border-color: $gray-light;
|
|
160
|
+
border-radius: 3px;
|
|
161
|
+
background: $gray-dark;
|
|
162
|
+
|
|
163
|
+
li {
|
|
164
|
+
&:first-child .accordion-head {
|
|
165
|
+
border-top-left-radius: 3px;
|
|
166
|
+
border-top-right-radius: 3px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&:last-child {
|
|
170
|
+
.accordion-head {
|
|
171
|
+
border-bottom-left-radius: 3px;
|
|
172
|
+
border-bottom-right-radius: 3px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.accordion-body {
|
|
176
|
+
border: 0;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&.is-active .accordion-head {
|
|
181
|
+
background: $gray-light;
|
|
182
|
+
border-color: $gray-lightest;
|
|
183
|
+
color: $success;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
.accordion-head {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
189
|
+
color: $info;
|
|
190
|
+
background: $gray;
|
|
191
|
+
border-color: $gray-light;
|
|
192
|
+
padding: 1rem;
|
|
193
|
+
text-align: center;
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
@include transition(all .3s);
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
.accordion-body { padding: $padding; }
|
|
@@ -200,40 +200,40 @@ fieldset {
|
|
|
200
200
|
//-------------------- Alert --------------------//
|
|
201
201
|
|
|
202
202
|
.alert {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
203
|
+
text-shadow: 0 1px 0 white(.50);
|
|
204
|
+
box-shadow: 0 0 3px #000;
|
|
205
|
+
@include alert-style($default-light, $default-dark);
|
|
206
206
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
207
|
+
&.is-info { @include alert-style($info-light, $info-dark); }
|
|
208
|
+
&.is-warning { @include alert-style($warning-light, $warning-dark); }
|
|
209
|
+
&.is-error { @include alert-style($error-light, $error-dark); }
|
|
210
|
+
&.is-success { @include alert-style($success-light, $success-dark); }
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
//-------------------- Button --------------------//
|
|
214
214
|
|
|
215
215
|
.breadcrumbs {
|
|
216
|
-
|
|
217
|
-
|
|
216
|
+
background: $gray;
|
|
217
|
+
border-color: $gray-light;
|
|
218
218
|
|
|
219
|
-
|
|
220
|
-
|
|
219
|
+
a {
|
|
220
|
+
padding-right: 0 !important;
|
|
221
221
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
222
|
+
.caret-right {
|
|
223
|
+
top: -1px;
|
|
224
|
+
margin-left: $medium-padding;
|
|
225
|
+
opacity: .5;
|
|
226
|
+
display: inline-block;
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
229
|
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
&.small a .caret-right { margin-left: $small-padding; }
|
|
231
|
+
&.large a .caret-right { margin-left: $large-padding; }
|
|
232
232
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
233
|
+
li:last-child a {
|
|
234
|
+
color: $default;
|
|
235
|
+
.caret-right { display: none; }
|
|
236
|
+
}
|
|
237
237
|
}
|
|
238
238
|
|
|
239
239
|
//-------------------- Button --------------------//
|
|
@@ -241,118 +241,118 @@ fieldset {
|
|
|
241
241
|
$button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;
|
|
242
242
|
|
|
243
243
|
@mixin button-style($color) {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
244
|
+
color: shade($color, 75%);
|
|
245
|
+
background: $color;
|
|
246
|
+
border: 1px solid #000;
|
|
247
|
+
@include background-image(linear-gradient($color, shade($color, 30%)));
|
|
248
248
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
249
|
+
@include active-state {
|
|
250
|
+
color: #000;
|
|
251
|
+
background: tint($color, 30%);
|
|
252
|
+
@include background-image(linear-gradient(tint($color, 30%), $color));
|
|
253
|
+
}
|
|
254
254
|
|
|
255
|
-
|
|
256
|
-
|
|
255
|
+
@include disabled-state { background: $color; }
|
|
256
|
+
&:active { background: $color; }
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
.button {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
260
|
+
font-weight: bold;
|
|
261
|
+
text-shadow: 0 1px white(.35);
|
|
262
|
+
box-shadow: $button-shadow;
|
|
263
|
+
@include transition(all .3s);
|
|
264
264
|
|
|
265
|
-
|
|
266
|
-
|
|
265
|
+
&.small, .small & { text-shadow: 0 1px white(.25); }
|
|
266
|
+
&.large, .large & { font-weight: normal; }
|
|
267
267
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
268
|
+
@include button-style($default);
|
|
269
|
+
@include disabled-state {
|
|
270
|
+
opacity: .35;
|
|
271
|
+
}
|
|
272
272
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
273
|
+
&.is-info { @include button-style($info); }
|
|
274
|
+
&.is-warning { @include button-style($warning); }
|
|
275
|
+
&.is-error { @include button-style($error); }
|
|
276
|
+
&.is-success { @include button-style($success); }
|
|
277
277
|
}
|
|
278
278
|
|
|
279
279
|
.button.visual-popout {
|
|
280
|
-
|
|
280
|
+
box-shadow: $button-shadow, 0 6px 0 0 black(.25) !important;
|
|
281
281
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
282
|
+
&:active {
|
|
283
|
+
box-shadow: $button-shadow, 0 3px 0 0 black(.5) !important;
|
|
284
|
+
}
|
|
285
285
|
}
|
|
286
286
|
|
|
287
287
|
//-------------------- ButtonGroup, Pagination --------------------//
|
|
288
288
|
|
|
289
289
|
.button-group,
|
|
290
290
|
.pagination.pagination--grouped ul {
|
|
291
|
-
|
|
291
|
+
box-shadow: 0 0 3px #000;
|
|
292
292
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
293
|
+
li .button,
|
|
294
|
+
> .button {
|
|
295
|
+
box-shadow: 0 1px 0 white(0.5) inset;
|
|
296
|
+
border-left: 1px solid black(.35);
|
|
297
|
+
border-right: 1px solid black(.35);
|
|
298
|
+
}
|
|
299
299
|
}
|
|
300
300
|
|
|
301
301
|
.button-group {
|
|
302
|
-
|
|
303
|
-
|
|
302
|
+
> li:first-child .button,
|
|
303
|
+
> .button:first-child { border-left: 0; }
|
|
304
304
|
|
|
305
|
-
|
|
306
|
-
|
|
305
|
+
> li:last-child .button,
|
|
306
|
+
> .button:last-child { border-right: 0; }
|
|
307
307
|
}
|
|
308
308
|
|
|
309
309
|
.pagination.pagination--grouped li {
|
|
310
|
-
|
|
311
|
-
|
|
310
|
+
&:first-child .button { border-left: 0; }
|
|
311
|
+
&:last-child .button { border-right: 0; }
|
|
312
312
|
}
|
|
313
313
|
|
|
314
314
|
.button-group.button-group--vertical {
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
315
|
+
.button {
|
|
316
|
+
box-shadow: none;
|
|
317
|
+
border: 1px solid black(.35);
|
|
318
|
+
}
|
|
319
319
|
|
|
320
|
-
|
|
321
|
-
|
|
320
|
+
> li:first-child .button,
|
|
321
|
+
> .button:first-child { border-top: 0; }
|
|
322
322
|
|
|
323
|
-
|
|
324
|
-
|
|
323
|
+
> li:last-child .button,
|
|
324
|
+
> .button:last-child { border-bottom: 0; }
|
|
325
325
|
}
|
|
326
326
|
|
|
327
327
|
//-------------------- Label, Badge --------------------//
|
|
328
328
|
|
|
329
329
|
.label,
|
|
330
330
|
.badge {
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
331
|
+
color: #000;
|
|
332
|
+
box-shadow: 0 0 3px #000;
|
|
333
|
+
text-shadow: 0 1px white(.35);
|
|
334
|
+
background-color: $default;
|
|
335
335
|
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
336
|
+
&.is-info { background-color: $info; }
|
|
337
|
+
&.is-warning { background-color: $warning; }
|
|
338
|
+
&.is-error { background-color: $error; }
|
|
339
|
+
&.is-success { background-color: $success; }
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
.label.label--left {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
343
|
+
&:after { border-right-color: $default; }
|
|
344
|
+
&.is-info:after { border-right-color: $info; }
|
|
345
|
+
&.is-warning:after { border-right-color: $warning; }
|
|
346
|
+
&.is-error:after { border-right-color: $error; }
|
|
347
|
+
&.is-success:after { border-right-color: $success; }
|
|
348
348
|
}
|
|
349
349
|
|
|
350
350
|
.label.label--right {
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
351
|
+
&:after { border-left-color: $default; }
|
|
352
|
+
&.is-info:after { border-left-color: $info; }
|
|
353
|
+
&.is-warning:after { border-left-color: $warning; }
|
|
354
|
+
&.is-error:after { border-left-color: $error; }
|
|
355
|
+
&.is-success:after { border-left-color: $success; }
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
//-------------------- Dropdown, TypeAhead, Flyout --------------------//
|
|
@@ -360,210 +360,210 @@ $button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;
|
|
|
360
360
|
.dropdown,
|
|
361
361
|
.flyout,
|
|
362
362
|
.type-ahead {
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
363
|
+
border: 3px solid white(.75);
|
|
364
|
+
border-radius: 3px;
|
|
365
|
+
background: $gray-dark;
|
|
366
|
+
box-shadow: 0 0 3px #000;
|
|
367
|
+
|
|
368
|
+
li {
|
|
369
|
+
border-top: 1px solid $gray;
|
|
370
|
+
|
|
371
|
+
&:first-child { border: 0; }
|
|
372
|
+
|
|
373
|
+
a {
|
|
374
|
+
.caret-right {
|
|
375
|
+
float: right;
|
|
376
|
+
margin-top: 3px;
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
a:hover,
|
|
381
|
+
&.is-open > a,
|
|
382
|
+
&.is-active > a,
|
|
383
|
+
&:hover > a {
|
|
384
|
+
background: $gray-darkest;
|
|
385
|
+
color: #fff;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
&.heading {
|
|
389
|
+
background: $gray;
|
|
390
|
+
font-size: .9em;
|
|
391
|
+
color: #fff;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
&.divider {
|
|
395
|
+
background: $gray-darkest;
|
|
396
|
+
border-top: 1px solid $gray;
|
|
397
|
+
height: 10px;
|
|
398
|
+
margin: 0;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
401
|
}
|
|
402
402
|
|
|
403
403
|
.type-ahead-desc {
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
404
|
+
display: block;
|
|
405
|
+
color: $default;
|
|
406
|
+
font-size: .7rem;
|
|
407
407
|
}
|
|
408
408
|
|
|
409
409
|
.type-ahead-highlight {
|
|
410
|
-
|
|
410
|
+
color: $warning;
|
|
411
411
|
}
|
|
412
412
|
|
|
413
413
|
//-------------------- Modal --------------------//
|
|
414
414
|
|
|
415
415
|
.modal {
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
416
|
+
.close {
|
|
417
|
+
top: .9rem;
|
|
418
|
+
right: .9rem;
|
|
419
|
+
}
|
|
420
420
|
}
|
|
421
421
|
|
|
422
422
|
.modal-outer {
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
423
|
+
border: 10px solid white(.75);
|
|
424
|
+
border-radius: 3px;
|
|
425
|
+
background: $gray-dark;
|
|
426
|
+
margin: 10px;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
429
|
.modal-head,
|
|
430
430
|
.modal-foot,
|
|
431
431
|
.modal-loading,
|
|
432
432
|
.modal-error {
|
|
433
|
-
|
|
433
|
+
background: $gray-darkest;
|
|
434
434
|
}
|
|
435
435
|
|
|
436
436
|
.modal-head {
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
437
|
+
font-size: 1rem;
|
|
438
|
+
font-weight: normal;
|
|
439
|
+
color: $info;
|
|
440
440
|
}
|
|
441
441
|
|
|
442
442
|
.modal-foot {
|
|
443
|
-
|
|
443
|
+
text-align: center;
|
|
444
444
|
}
|
|
445
445
|
|
|
446
446
|
.modal-body {
|
|
447
|
-
|
|
448
|
-
|
|
447
|
+
border-top: 1px solid $gray;
|
|
448
|
+
border-bottom: 1px solid $gray;
|
|
449
449
|
}
|
|
450
450
|
|
|
451
451
|
//-------------------- Popover --------------------//
|
|
452
452
|
|
|
453
453
|
.popover {
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
454
|
+
border: 3px solid white(.75);
|
|
455
|
+
border-radius: 3px;
|
|
456
|
+
background: $gray-dark;
|
|
457
|
+
box-shadow: 0 0 3px #000;
|
|
458
|
+
margin: 10px;
|
|
459
|
+
|
|
460
|
+
.popover-head {
|
|
461
|
+
font-size: 1rem;
|
|
462
|
+
font-weight: bold;
|
|
463
|
+
color: $info;
|
|
464
|
+
background: $gray-darkest;
|
|
465
|
+
border-bottom: 1px solid $gray;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
&.center-left .popover-arrow {
|
|
469
|
+
right: -19px;
|
|
470
|
+
border-left-color: $gray-darkest;
|
|
471
|
+
|
|
472
|
+
&:after {
|
|
473
|
+
margin-left: -2px;
|
|
474
|
+
border-left-color: white(.75);
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
&.center-right .popover-arrow {
|
|
479
|
+
left: -19px;
|
|
480
|
+
border-right-color: $gray-darkest;
|
|
481
|
+
|
|
482
|
+
&:after {
|
|
483
|
+
margin-left: 2px;
|
|
484
|
+
border-right-color: white(.75);
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
&.top-center .popover-arrow {
|
|
489
|
+
bottom: -19px;
|
|
490
|
+
border-top-color: $gray-darkest;
|
|
491
|
+
|
|
492
|
+
&:after {
|
|
493
|
+
margin-top: -2px;
|
|
494
|
+
border-top-color: white(.75);
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
&.bottom-center .popover-arrow {
|
|
499
|
+
top: -19px;
|
|
500
|
+
border-bottom-color: $gray-darkest;
|
|
501
|
+
|
|
502
|
+
&:after {
|
|
503
|
+
margin-top: 2px;
|
|
504
|
+
border-bottom-color: white(.75);
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
507
|
}
|
|
508
508
|
|
|
509
509
|
//-------------------- Progress --------------------//
|
|
510
510
|
|
|
511
511
|
.progress {
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
512
|
+
background: $gray;
|
|
513
|
+
box-shadow: inset 1px 1px 2px $gray-darkest;
|
|
514
|
+
border-radius: $round;
|
|
515
515
|
}
|
|
516
516
|
|
|
517
517
|
.progress-bar {
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
518
|
+
color: #fff;
|
|
519
|
+
font-weight: bold;
|
|
520
|
+
border-top-left-radius: $round;
|
|
521
|
+
border-bottom-left-radius: $round;
|
|
522
|
+
@include progress-style($default, $default-dark);
|
|
523
523
|
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
524
|
+
&.is-info { @include progress-style($info, $info-dark); }
|
|
525
|
+
&.is-error { @include progress-style($error, $error-dark); }
|
|
526
|
+
&.is-warning { @include progress-style($warning, $warning-dark); }
|
|
527
|
+
&.is-success { @include progress-style($success, $success-dark); }
|
|
528
528
|
}
|
|
529
529
|
|
|
530
530
|
.progress-bar + .progress-bar {
|
|
531
|
-
|
|
532
|
-
|
|
531
|
+
border-top-left-radius: 0;
|
|
532
|
+
border-bottom-left-radius: 0;
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
//-------------------- Showcase --------------------//
|
|
536
536
|
|
|
537
537
|
.showcase {
|
|
538
|
-
|
|
539
|
-
|
|
538
|
+
border: 10px solid white(.75);
|
|
539
|
+
border-radius: 3px;
|
|
540
540
|
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
541
|
+
.close {
|
|
542
|
+
top: -11px;
|
|
543
|
+
right: -40px;
|
|
544
|
+
}
|
|
545
545
|
}
|
|
546
546
|
|
|
547
547
|
.showcase-inner {
|
|
548
|
-
|
|
548
|
+
padding: 0;
|
|
549
549
|
}
|
|
550
550
|
|
|
551
551
|
//-------------------- Tooltip --------------------//
|
|
552
552
|
|
|
553
553
|
.tooltip {
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
554
|
+
background: white(.90);
|
|
555
|
+
color: #000;
|
|
556
|
+
border-radius: 3px;
|
|
557
|
+
margin: $margin / 2;
|
|
558
|
+
|
|
559
|
+
.tooltip-head {
|
|
560
|
+
padding-bottom: $small-padding;
|
|
561
|
+
font-weight: bold;
|
|
562
|
+
font-size: 1rem;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
&.top-center .tooltip-arrow { border-top-color: white(.90); }
|
|
566
|
+
&.center-left .tooltip-arrow { border-left-color: white(.90); }
|
|
567
|
+
&.center-right .tooltip-arrow { border-right-color: white(.90); }
|
|
568
|
+
&.bottom-center .tooltip-arrow { border-bottom-color: white(.90); }
|
|
569
569
|
}
|