titon-toolkit 0.9.4 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
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
  }