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.
Files changed (44) hide show
  1. data/license.md +23 -0
  2. data/readme.md +93 -0
  3. data/src/lib/titon-toolkit.rb +2 -2
  4. data/src/scss/toolkit.scss +3 -3
  5. data/src/scss/toolkit/effects/visual.scss +47 -47
  6. data/src/scss/toolkit/layout/base.scss +32 -32
  7. data/src/scss/toolkit/layout/code.scss +38 -38
  8. data/src/scss/toolkit/layout/form.scss +86 -86
  9. data/src/scss/toolkit/layout/grid.scss +31 -31
  10. data/src/scss/toolkit/layout/input-group.scss +41 -41
  11. data/src/scss/toolkit/layout/responsive.scss +21 -21
  12. data/src/scss/toolkit/layout/table.scss +59 -59
  13. data/src/scss/toolkit/layout/typography.scss +18 -18
  14. data/src/scss/toolkit/mixins/_grid.scss +8 -8
  15. data/src/scss/toolkit/mixins/_layout.scss +36 -36
  16. data/src/scss/toolkit/mixins/_responsive.scss +56 -56
  17. data/src/scss/toolkit/mixins/_themes.scss +78 -78
  18. data/src/scss/toolkit/modules/accordion.scss +33 -33
  19. data/src/scss/toolkit/modules/blackout.scss +13 -13
  20. data/src/scss/toolkit/modules/carousel.scss +141 -141
  21. data/src/scss/toolkit/modules/flyout.scss +57 -57
  22. data/src/scss/toolkit/modules/modal.scss +206 -206
  23. data/src/scss/toolkit/modules/popover.scss +58 -58
  24. data/src/scss/toolkit/modules/showcase.scss +135 -135
  25. data/src/scss/toolkit/modules/tabs.scss +29 -29
  26. data/src/scss/toolkit/modules/tooltip.scss +109 -109
  27. data/src/scss/toolkit/modules/type-ahead.scss +44 -44
  28. data/src/scss/toolkit/themes/titon.scss +242 -242
  29. data/src/scss/toolkit/themes/tomorrow-night.scss +322 -322
  30. data/src/scss/toolkit/ui/alert.scss +29 -29
  31. data/src/scss/toolkit/ui/breadcrumbs.scss +41 -41
  32. data/src/scss/toolkit/ui/button-group.scss +181 -181
  33. data/src/scss/toolkit/ui/button.scss +31 -31
  34. data/src/scss/toolkit/ui/dropdown.scss +83 -83
  35. data/src/scss/toolkit/ui/icon.scss +5 -5
  36. data/src/scss/toolkit/ui/label-badge.scss +48 -48
  37. data/src/scss/toolkit/ui/lazy-load.scss +8 -5
  38. data/src/scss/toolkit/ui/matrix.scss +26 -0
  39. data/src/scss/toolkit/ui/pagination.scss +108 -108
  40. data/src/scss/toolkit/ui/pin.scss +5 -5
  41. data/src/scss/toolkit/ui/progress.scss +20 -20
  42. data/version.md +1 -0
  43. metadata +17 -5
  44. checksums.yaml +0 -15
data/src/scss/toolkit/modules/type-ahead.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
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
  @import "../common";
@@ -11,57 +11,57 @@
11
11
  */
12
12
 
13
13
  .type-ahead {
14
- position: absolute;
15
- top: 0;
16
- left: 0;
17
- z-index: 500;
18
- opacity: 0;
19
- visibility: hidden;
20
- background: $gray;
21
- border: 1px solid $gray-dark;
22
- @include transition(opacity 0.3s);
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ z-index: 500;
18
+ opacity: 0;
19
+ visibility: hidden;
20
+ background: $gray;
21
+ border: 1px solid $gray-dark;
22
+ @include transition(opacity 0.3s);
23
23
 
24
- ul {
25
- list-style: none;
26
- margin: 0;
27
- padding: 0;
28
- min-width: 200px;
24
+ ul {
25
+ list-style: none;
26
+ margin: 0;
27
+ padding: 0;
28
+ min-width: 200px;
29
29
 
30
- a,
31
- li.heading {
32
- padding: $small-padding;
33
- line-height: 100%;
34
- display: block;
35
- text-decoration: none;
36
- }
30
+ a,
31
+ li.heading {
32
+ padding: $small-padding;
33
+ line-height: 100%;
34
+ display: block;
35
+ text-decoration: none;
36
+ }
37
37
 
38
- li.heading {
39
- font-weight: bold;
40
- }
41
- }
38
+ li.heading {
39
+ font-weight: bold;
40
+ }
41
+ }
42
42
  }
43
43
 
44
44
  .type-ahead-desc {
45
- display: block;
46
- color: $gray-darkest;
47
- font-size: .7rem;
45
+ display: block;
46
+ color: $gray-darkest;
47
+ font-size: .7rem;
48
48
  }
49
49
 
50
50
  .type-ahead-shadow {
51
- position: relative;
51
+ position: relative;
52
52
 
53
- input {
54
- position: absolute;
55
- top: 0;
56
- left: 0;
57
- }
53
+ input {
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ }
58
58
 
59
- .is-shadow {
60
- color: gray;
61
- }
59
+ .is-shadow {
60
+ color: gray;
61
+ }
62
62
 
63
- .not-shadow {
64
- background: transparent;
65
- z-index: 1;
66
- }
63
+ .not-shadow {
64
+ background: transparent;
65
+ z-index: 1;
66
+ }
67
67
  }
data/src/scss/toolkit/themes/titon.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
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
  @import "../common";
8
8
 
9
9
  body {
10
- font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
11
- background: $background-color;
12
- color: $foreground-color;
10
+ font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
11
+ background: $background-color;
12
+ color: $foreground-color;
13
13
  }
14
14
 
15
15
  //-------------------- Layout --------------------//
16
16
 
17
17
  a {
18
- color: shade($info, 15%);
19
- text-decoration: none;
18
+ color: shade($info, 15%);
19
+ text-decoration: none;
20
20
 
21
- &:hover { color: $info-dark; }
21
+ &:hover { color: $info-dark; }
22
22
  }
23
23
 
24
24
  blockquote cite { color: $default; }
@@ -28,7 +28,7 @@ var { background: $error-light; color: $error-dark; }
28
28
  mark { background: tint($warning-light, 25%); }
29
29
 
30
30
  input, textarea {
31
- font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
31
+ font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
32
32
  }
33
33
 
34
34
  .close { line-height: 90%; }
@@ -36,329 +36,329 @@ input, textarea {
36
36
  //-------------------- Accordion --------------------//
37
37
 
38
38
  .accordion-head {
39
- @include transition(all .15s);
39
+ @include transition(all .15s);
40
40
 
41
- .is-active & {
42
- background: $info;
43
- border-color: $info-dark;
44
- color: #fff;
45
- }
41
+ .is-active & {
42
+ background: $info;
43
+ border-color: $info-dark;
44
+ color: #fff;
45
+ }
46
46
  }
47
47
 
48
48
  //-------------------- Alert --------------------//
49
49
 
50
50
  .alert {
51
- @include alert-style($default-light, $default-dark);
51
+ @include alert-style($default-light, $default-dark);
52
52
 
53
- &.is-info { @include alert-style($info-light, $info-dark); }
54
- &.is-error { @include alert-style($error-light, $error-dark); }
55
- &.is-warning { @include alert-style($warning-light, $warning-dark); }
56
- &.is-success { @include alert-style($success-light, $success-dark); }
53
+ &.is-info { @include alert-style($info-light, $info-dark); }
54
+ &.is-error { @include alert-style($error-light, $error-dark); }
55
+ &.is-warning { @include alert-style($warning-light, $warning-dark); }
56
+ &.is-success { @include alert-style($success-light, $success-dark); }
57
57
  }
58
58
 
59
59
  //-------------------- Breadcrumbs --------------------//
60
60
 
61
61
  .breadcrumbs {
62
- overflow: hidden;
63
-
64
- a {
65
- height: 45px;
66
- line-height: 45px;
67
- padding: 0 30px 0 20px;
68
- border-right: 0;
69
- outline: none;
70
-
71
- &:before,
72
- &:after {
73
- content: "";
74
- position: absolute;
75
- height: 32px;
76
- width: 32px;
77
- border-right: 1px solid $gray-lightest;
78
- border-bottom: 1px solid $gray-lightest;
79
- top: 6px;
80
- right: 2px;
81
- z-index: 1;
82
- @include transform(rotate(-45deg));
83
- }
84
-
85
- &:before {
86
- height: 32px;
87
- width: 32px;
88
- border-right: 1px solid $gray-dark;
89
- border-bottom: 1px solid $gray-dark;
90
- right: 4px;
91
- }
92
-
93
- &:hover {
94
- &:before {
95
- border-color: $gray-darkest;
96
- }
97
- }
98
-
99
- .caret-right { display: none; }
100
- }
101
-
102
- li:last-child a {
103
- color: $default;
104
- }
105
-
106
- &.small {
107
- a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
108
- a:before { height: 22px; width: 22px; top: 4px; }
109
- a:after { height: 22px; width: 22px; top: 4px; }
110
- }
111
-
112
- &.large {
113
- a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
114
- a:before { height: 40px; width: 40px; top: 4px; }
115
- a:after { height: 40px; width: 40px; top: 4px; }
116
- }
62
+ overflow: hidden;
63
+
64
+ a {
65
+ height: 45px;
66
+ line-height: 45px;
67
+ padding: 0 30px 0 20px;
68
+ border-right: 0;
69
+ outline: none;
70
+
71
+ &:before,
72
+ &:after {
73
+ content: "";
74
+ position: absolute;
75
+ height: 32px;
76
+ width: 32px;
77
+ border-right: 1px solid $gray-lightest;
78
+ border-bottom: 1px solid $gray-lightest;
79
+ top: 6px;
80
+ right: 2px;
81
+ z-index: 1;
82
+ @include transform(rotate(-45deg));
83
+ }
84
+
85
+ &:before {
86
+ height: 32px;
87
+ width: 32px;
88
+ border-right: 1px solid $gray-dark;
89
+ border-bottom: 1px solid $gray-dark;
90
+ right: 4px;
91
+ }
92
+
93
+ &:hover {
94
+ &:before {
95
+ border-color: $gray-darkest;
96
+ }
97
+ }
98
+
99
+ .caret-right { display: none; }
100
+ }
101
+
102
+ li:last-child a {
103
+ color: $default;
104
+ }
105
+
106
+ &.small {
107
+ a { height: 30px; line-height: 30px; padding: 0 25px 0 15px; }
108
+ a:before { height: 22px; width: 22px; top: 4px; }
109
+ a:after { height: 22px; width: 22px; top: 4px; }
110
+ }
111
+
112
+ &.large {
113
+ a { height: 50px; line-height: 50px; padding: 0 30px 0 20px; }
114
+ a:before { height: 40px; width: 40px; top: 4px; }
115
+ a:after { height: 40px; width: 40px; top: 4px; }
116
+ }
117
117
  }
118
118
 
119
119
  //-------------------- Button --------------------//
120
120
 
121
121
  .button {
122
- color: #fff;
123
- @include transition(all .2s);
124
- @include button-style($default, $default-light, $default-dark);
125
-
126
- &:active {
127
- top: 1px;
128
- }
129
-
130
- &.is-info { @include button-style($info, $info-light, $info-dark); }
131
- &.is-error { @include button-style($error, $error-light, $error-dark); }
132
- &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
133
- &.is-success { @include button-style($success, $success-light, $success-dark); }
122
+ color: #fff;
123
+ @include transition(all .2s);
124
+ @include button-style($default, $default-light, $default-dark);
125
+
126
+ &:active {
127
+ top: 1px;
128
+ }
129
+
130
+ &.is-info { @include button-style($info, $info-light, $info-dark); }
131
+ &.is-error { @include button-style($error, $error-light, $error-dark); }
132
+ &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
133
+ &.is-success { @include button-style($success, $success-light, $success-dark); }
134
134
  }
135
135
 
136
136
  //-------------------- Dropdown --------------------//
137
137
 
138
138
  .dropdown {
139
- box-shadow: 5px 5px black(.25);
139
+ box-shadow: 5px 5px black(.25);
140
140
 
141
- li {
142
- a {
143
- @include transition(background .15s);
141
+ li {
142
+ a {
143
+ @include transition(background .15s);
144
144
 
145
- .caret-right {
146
- top: 2px;
147
- }
148
- }
145
+ .caret-right {
146
+ top: 2px;
147
+ }
148
+ }
149
149
 
150
- &.heading {
151
- color: $default;
152
- font-size: .8rem;
153
- }
150
+ &.heading {
151
+ color: $default;
152
+ font-size: .8rem;
153
+ }
154
154
 
155
- &:hover > a {
156
- background: $info;
157
- color: #fff;
155
+ &:hover > a {
156
+ background: $info;
157
+ color: #fff;
158
158
 
159
- .caret-right { border-left-color: #fff; }
160
- }
159
+ .caret-right { border-left-color: #fff; }
160
+ }
161
161
 
162
- &:nth-child(odd) {
163
- background: $gray-lightest;
164
- }
165
- }
162
+ &:nth-child(odd) {
163
+ background: $gray-lightest;
164
+ }
165
+ }
166
166
  }
167
167
 
168
168
  .dropdown.dropdown--top {
169
- box-shadow: 5px -5px black(.25);
169
+ box-shadow: 5px -5px black(.25);
170
170
  }
171
171
 
172
172
  //-------------------- Flyout, TypeAhead --------------------//
173
173
 
174
174
  .flyout,
175
175
  .type-ahead {
176
- background: $gray;
177
- border: 1px solid $gray-dark;
178
- box-shadow: 5px 5px black(.25);
179
- padding: $small-padding;
180
-
181
- li {
182
- &:nth-child(odd) > a { background: $gray-lightest; }
183
- &.heading { background: $gray-dark; }
184
-
185
- > a {
186
- @include transition(all .15s);
187
- }
188
-
189
- > a:hover,
190
- &.is-open > a,
191
- &.is-active > a {
192
- background: $info;
193
- color: #fff;
194
-
195
- .caret-right { border-left-color: #fff; }
196
- }
197
- }
176
+ background: $gray;
177
+ border: 1px solid $gray-dark;
178
+ box-shadow: 5px 5px black(.25);
179
+ padding: $small-padding;
180
+
181
+ li {
182
+ &:nth-child(odd) > a { background: $gray-lightest; }
183
+ &.heading { background: $gray-dark; }
184
+
185
+ > a {
186
+ @include transition(all .15s);
187
+ }
188
+
189
+ > a:hover,
190
+ &.is-open > a,
191
+ &.is-active > a {
192
+ background: $info;
193
+ color: #fff;
194
+
195
+ .caret-right { border-left-color: #fff; }
196
+ }
197
+ }
198
198
  }
199
199
 
200
200
  .type-ahead-highlight { background: $warning-light; }
201
201
 
202
202
  .type-ahead {
203
- li a:hover,
204
- li.is-active a {
205
- .type-ahead-desc { color: $gray-lightest; }
206
- .type-ahead-highlight{ background: $info-light; color: $info-dark; }
207
- }
203
+ li a:hover,
204
+ li.is-active a {
205
+ .type-ahead-desc { color: $gray-lightest; }
206
+ .type-ahead-highlight{ background: $info-light; color: $info-dark; }
207
+ }
208
208
  }
209
209
 
210
210
  //-------------------- Label, Badge --------------------//
211
211
 
212
212
  .label,
213
213
  .badge {
214
- @include label-style($default-light, $default-dark);
214
+ @include label-style($default-light, $default-dark);
215
215
 
216
- &.is-info { @include label-style($info-light, $info-dark); }
217
- &.is-error { @include label-style($error-light, $error-dark); }
218
- &.is-warning { @include label-style($warning-light, $warning-dark); }
219
- &.is-success { @include label-style($success-light, $success-dark); }
216
+ &.is-info { @include label-style($info-light, $info-dark); }
217
+ &.is-error { @include label-style($error-light, $error-dark); }
218
+ &.is-warning { @include label-style($warning-light, $warning-dark); }
219
+ &.is-success { @include label-style($success-light, $success-dark); }
220
220
  }
221
221
 
222
222
  .label.label--left {
223
- &:after { border-right-color: $default-light; }
224
- &.is-info:after { border-right-color: $info-light; }
225
- &.is-error:after { border-right-color: $error-light; }
226
- &.is-warning:after { border-right-color: $warning-light; }
227
- &.is-success:after { border-right-color: $success-light; }
223
+ &:after { border-right-color: $default-light; }
224
+ &.is-info:after { border-right-color: $info-light; }
225
+ &.is-error:after { border-right-color: $error-light; }
226
+ &.is-warning:after { border-right-color: $warning-light; }
227
+ &.is-success:after { border-right-color: $success-light; }
228
228
  }
229
229
 
230
230
  .label.label--right {
231
- &:after { border-left-color: $default-light; }
232
- &.is-info:after { border-left-color: $info-light; }
233
- &.is-error:after { border-left-color: $error-light; }
234
- &.is-warning:after { border-left-color: $warning-light; }
235
- &.is-success:after { border-left-color: $success-light; }
231
+ &:after { border-left-color: $default-light; }
232
+ &.is-info:after { border-left-color: $info-light; }
233
+ &.is-error:after { border-left-color: $error-light; }
234
+ &.is-warning:after { border-left-color: $warning-light; }
235
+ &.is-success:after { border-left-color: $success-light; }
236
236
  }
237
237
 
238
238
  //-------------------- Modal --------------------//
239
239
 
240
240
  .modal-outer {
241
- margin: $margin;
242
- background: $gray;
243
- border: 1px solid $gray-dark;
244
- box-shadow: 5px 5px black(.25);
241
+ margin: $margin;
242
+ background: $gray;
243
+ border: 1px solid $gray-dark;
244
+ box-shadow: 5px 5px black(.25);
245
245
  }
246
246
 
247
247
  .modal-body {
248
- background: #fff;
249
- border-top: 1px solid $gray-dark;
250
- border-bottom: 1px solid $gray-dark;
248
+ background: #fff;
249
+ border-top: 1px solid $gray-dark;
250
+ border-bottom: 1px solid $gray-dark;
251
251
  }
252
252
 
253
253
  .modal-foot {
254
- background: $gray-lightest;
255
- text-align: center;
254
+ background: $gray-lightest;
255
+ text-align: center;
256
256
  }
257
257
 
258
258
  //-------------------- Popover --------------------//
259
259
 
260
260
  .popover {
261
- margin: 15px;
262
- background: #fff;
263
- line-height: 115%;
264
- border-radius: $round;
265
- border: 1px solid $gray-dark;
266
- box-shadow: 5px 5px black(.25);
267
-
268
- &.top-center .popover-arrow {
269
- border-top-color: black(.25);
270
- @include transform(translateY(6px));
271
-
272
- &:after {
273
- margin-top: -8px;
274
- border-top: 8px solid #fff;
275
- }
276
- }
277
-
278
- &.center-left .popover-arrow {
279
- border-left-color: black(.25);
280
- @include transform(translateX(6px));
281
-
282
- &:after {
283
- margin-left: -8px;
284
- border-left: 8px solid #fff;
285
- }
286
- }
287
-
288
- &.center-right .popover-arrow {
289
- border-right-color: $gray-dark;
290
-
291
- &:after {
292
- margin-left: 2px;
293
- border-right-color: #fff;
294
- }
295
- }
296
-
297
- &.bottom-center .popover-arrow {
298
- border-bottom-color: $gray-dark;
299
-
300
- &:after {
301
- margin-top: 2px;
302
- border-bottom-color: #fff;
303
- }
304
- }
305
-
306
- &.top-left,
307
- &.top-right,
308
- &.bottom-left,
309
- &.bottom-right {
310
- margin: $margin / 2;
311
- }
261
+ margin: 15px;
262
+ background: #fff;
263
+ line-height: 115%;
264
+ border-radius: $round;
265
+ border: 1px solid $gray-dark;
266
+ box-shadow: 5px 5px black(.25);
267
+
268
+ &.top-center .popover-arrow {
269
+ border-top-color: black(.25);
270
+ @include transform(translateY(6px));
271
+
272
+ &:after {
273
+ margin-top: -8px;
274
+ border-top: 8px solid #fff;
275
+ }
276
+ }
277
+
278
+ &.center-left .popover-arrow {
279
+ border-left-color: black(.25);
280
+ @include transform(translateX(6px));
281
+
282
+ &:after {
283
+ margin-left: -8px;
284
+ border-left: 8px solid #fff;
285
+ }
286
+ }
287
+
288
+ &.center-right .popover-arrow {
289
+ border-right-color: $gray-dark;
290
+
291
+ &:after {
292
+ margin-left: 2px;
293
+ border-right-color: #fff;
294
+ }
295
+ }
296
+
297
+ &.bottom-center .popover-arrow {
298
+ border-bottom-color: $gray-dark;
299
+
300
+ &:after {
301
+ margin-top: 2px;
302
+ border-bottom-color: #fff;
303
+ }
304
+ }
305
+
306
+ &.top-left,
307
+ &.top-right,
308
+ &.bottom-left,
309
+ &.bottom-right {
310
+ margin: $margin / 2;
311
+ }
312
312
  }
313
313
 
314
314
  .popover-head {
315
- font-weight: bold;
316
- background: $gray;
317
- border-bottom: 1px solid $gray-dark;
315
+ font-weight: bold;
316
+ background: $gray;
317
+ border-bottom: 1px solid $gray-dark;
318
318
  }
319
319
 
320
320
  //-------------------- Progress --------------------//
321
321
 
322
322
  .progress {
323
- box-shadow: inset 1px 1px 2px $gray-darkest;
324
- border-radius: $round;
323
+ box-shadow: inset 1px 1px 2px $gray-darkest;
324
+ border-radius: $round;
325
325
  }
326
326
 
327
327
  .progress-bar {
328
- color: #fff;
329
- font-weight: bold;
330
- border-top-left-radius: $round;
331
- border-bottom-left-radius: $round;
332
- @include progress-style($default, $default-dark);
333
-
334
- &.is-info { @include progress-style($info, $info-dark); }
335
- &.is-error { @include progress-style($error, $error-dark); }
336
- &.is-warning { @include progress-style($warning, $warning-dark); }
337
- &.is-success { @include progress-style($success, $success-dark); }
328
+ color: #fff;
329
+ font-weight: bold;
330
+ border-top-left-radius: $round;
331
+ border-bottom-left-radius: $round;
332
+ @include progress-style($default, $default-dark);
333
+
334
+ &.is-info { @include progress-style($info, $info-dark); }
335
+ &.is-error { @include progress-style($error, $error-dark); }
336
+ &.is-warning { @include progress-style($warning, $warning-dark); }
337
+ &.is-success { @include progress-style($success, $success-dark); }
338
338
  }
339
339
 
340
340
  .progress-bar + .progress-bar {
341
- border-top-left-radius: 0;
342
- border-bottom-left-radius: 0;
341
+ border-top-left-radius: 0;
342
+ border-bottom-left-radius: 0;
343
343
  }
344
344
 
345
345
  //-------------------- Tooltip --------------------//
346
346
 
347
347
  .tooltip {
348
- background: black(.70);
349
- color: #fff;
350
- border-radius: $round;
351
- margin: 10px;
352
- line-height: 115%;
353
-
354
- &.top-center .tooltip-arrow { border-top-color: black(.70); }
355
- &.center-left .tooltip-arrow { border-left-color: black(.70); }
356
- &.center-right .tooltip-arrow { border-right-color: black(.70); }
357
- &.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
348
+ background: black(.70);
349
+ color: #fff;
350
+ border-radius: $round;
351
+ margin: 10px;
352
+ line-height: 115%;
353
+
354
+ &.top-center .tooltip-arrow { border-top-color: black(.70); }
355
+ &.center-left .tooltip-arrow { border-left-color: black(.70); }
356
+ &.center-right .tooltip-arrow { border-right-color: black(.70); }
357
+ &.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
358
358
  }
359
359
 
360
360
  .tooltip-head {
361
- color: $info;
362
- font-weight: bold;
363
- margin-bottom: $margin / 2;
361
+ color: $info;
362
+ font-weight: bold;
363
+ margin-bottom: $margin / 2;
364
364
  }