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/modal.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";
@@ -9,58 +9,58 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Modal module.
11
11
  *
12
- * <div class="modal">
13
- * <div class="modal-outer">
14
- * <div class="modal-inner">
15
- * Custom content here
16
- * </div>
17
- * <button type="button" class="modal-close"></button>
18
- * </div>
19
- * </div>
12
+ * <div class="modal">
13
+ * <div class="modal-outer">
14
+ * <div class="modal-inner">
15
+ * Custom content here
16
+ * </div>
17
+ * <button type="button" class="modal-close"></button>
18
+ * </div>
19
+ * </div>
20
20
  */
21
21
 
22
22
  .modal {
23
- position: fixed;
24
- top: 50%;
25
- left: 50%;
26
- width: 50%;
27
- height: auto;
28
- margin: 0;
29
- padding: 0;
30
- z-index: 610; // higher than blackout
31
- max-width: 700px;
32
- min-width: 350px;
33
- visibility: hidden;
34
- backface-visibility: hidden;
35
- @include transform(translateX(-50%) translateY(-50%));
36
-
37
- .close {
38
- position: absolute;
39
- top: -1px;
40
- right: -35px;
41
- }
42
-
43
- &.is-loading {
44
- .close { display: none; }
45
-
46
- .modal-outer {
47
- background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
48
- }
49
- }
23
+ position: fixed;
24
+ top: 50%;
25
+ left: 50%;
26
+ width: 50%;
27
+ height: auto;
28
+ margin: 0;
29
+ padding: 0;
30
+ z-index: 610; // higher than blackout
31
+ max-width: 700px;
32
+ min-width: 350px;
33
+ visibility: hidden;
34
+ backface-visibility: hidden;
35
+ @include transform(translateX(-50%) translateY(-50%));
36
+
37
+ .close {
38
+ position: absolute;
39
+ top: -1px;
40
+ right: -35px;
41
+ }
42
+
43
+ &.is-loading {
44
+ .close { display: none; }
45
+
46
+ .modal-outer {
47
+ background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
48
+ }
49
+ }
50
50
  }
51
51
 
52
52
  // Used for animations, should also contain the styles
53
53
  .modal-outer {
54
- position: relative;
55
- margin: 0 auto;
56
- background: $gray;
57
- border: 1px solid $gray-dark;
54
+ position: relative;
55
+ margin: 0 auto;
56
+ background: $gray;
57
+ border: 1px solid $gray-dark;
58
58
  }
59
59
 
60
60
  // Reset draggable cursor
61
61
  .modal.is-draggable {
62
- .modal-inner { cursor: default; }
63
- .modal-head { cursor: move; }
62
+ .modal-inner { cursor: default; }
63
+ .modal-head { cursor: move; }
64
64
  }
65
65
 
66
66
  // Apply block padding
@@ -69,175 +69,175 @@
69
69
  .modal-foot,
70
70
  .modal-loading,
71
71
  .modal-error {
72
- padding: $padding;
72
+ padding: $padding;
73
73
  }
74
74
 
75
75
  // Remove margins from text elements
76
76
  .modal-body {
77
- @include content-spacing;
77
+ @include content-spacing;
78
78
  }
79
79
 
80
80
  //-------------------- Animations --------------------//
81
81
 
82
82
  .modal {
83
- &.from-above,
84
- &.from-below,
85
- &.slide-in-top,
86
- &.slide-in-bottom,
87
- &.slide-in-left,
88
- &.slide-in-right,
89
- &.flip,
90
- &.flip-vert {
91
- .modal-outer {
92
- opacity: 0;
93
- @include transition(all 0.3s);
94
- }
95
-
96
- &.show .modal-outer {
97
- opacity: 1;
98
- }
99
- }
100
-
101
- &.fade {
102
- opacity: 0;
103
- @include transition(opacity 0.3s);
104
- }
105
-
106
- &.from-above {
107
- .modal-outer {
108
- @include transform(scale(1.3));
109
- }
110
-
111
- &.show .modal-outer {
112
- @include transform(scale(1));
113
- }
114
- }
115
-
116
- &.from-below {
117
- .modal-outer {
118
- @include transform(scale(0.7));
119
- }
120
-
121
- &.show .modal-outer {
122
- @include transform(scale(1));
123
- }
124
- }
125
-
126
- &.slide-in-top {
127
- .modal-outer {
128
- @include transform(translateY(-50%));
129
- }
130
-
131
- &.show .modal-outer {
132
- @include transform(translateY(0));
133
- }
134
- }
135
-
136
- &.slide-in-bottom {
137
- .modal-outer {
138
- @include transform(translateY(50%));
139
- }
140
-
141
- &.show .modal-outer {
142
- @include transform(translateY(0));
143
- }
144
- }
145
-
146
- &.slide-in-left {
147
- .modal-outer {
148
- @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
149
- @include transform(translateX(-50%));
150
- }
151
-
152
- &.show .modal-outer {
153
- @include transform(translateX(0));
154
- }
155
- }
156
-
157
- &.slide-in-right {
158
- .modal-outer {
159
- @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
160
- @include transform(translateX(50%));
161
- }
162
-
163
- &.show .modal-outer {
164
- @include transform(translateX(0));
165
- }
166
- }
167
-
168
- &.sticky-top {
169
- top: -100%;
170
- opacity: 0;
171
- @include transition(all 0.3s);
172
- @include transform(translateX(-50%)); // reset to x
173
-
174
- &.show {
175
- top: 0;
176
- opacity: 1;
177
- }
178
- }
179
-
180
- &.sticky-bottom {
181
- top: auto;
182
- bottom: -100%;
183
- opacity: 0;
184
- @include transition(all 0.3s);
185
- @include transform(translateX(-50%)); // reset to x
186
-
187
- &.show {
188
- bottom: 0;
189
- opacity: 1;
190
- }
191
- }
192
-
193
- &.sticky-left {
194
- left: -100%;
195
- opacity: 0;
196
- @include transition(all 0.3s);
197
- @include transform(translate(0, -50%));
198
-
199
- &.show {
200
- left: 0;
201
- opacity: 1;
202
- }
203
- }
204
-
205
- &.sticky-right {
206
- left: auto;
207
- right: -100%;
208
- opacity: 0;
209
- @include transition(all 0.3s);
210
- @include transform(translate(0, -50%));
211
-
212
- &.show {
213
- right: 0;
214
- opacity: 1;
215
- }
216
- }
217
-
218
- &.flip {
219
- @include perspective(1300px);
220
-
221
- .modal-outer {
222
- @include transform-style(preserve-3d);
223
- @include transform(rotateY(-70deg));
224
- }
225
-
226
- &.show .modal-outer {
227
- @include transform(rotateY(0deg));
228
- }
229
- }
230
-
231
- &.flip-vert {
232
- @include perspective(1300px);
233
-
234
- .modal-outer {
235
- @include transform-style(preserve-3d);
236
- @include transform(rotateX(-70deg));
237
- }
238
-
239
- &.show .modal-outer {
240
- @include transform(rotateX(0deg));
241
- }
242
- }
83
+ &.from-above,
84
+ &.from-below,
85
+ &.slide-in-top,
86
+ &.slide-in-bottom,
87
+ &.slide-in-left,
88
+ &.slide-in-right,
89
+ &.flip,
90
+ &.flip-vert {
91
+ .modal-outer {
92
+ opacity: 0;
93
+ @include transition(all 0.3s);
94
+ }
95
+
96
+ &.show .modal-outer {
97
+ opacity: 1;
98
+ }
99
+ }
100
+
101
+ &.fade {
102
+ opacity: 0;
103
+ @include transition(opacity 0.3s);
104
+ }
105
+
106
+ &.from-above {
107
+ .modal-outer {
108
+ @include transform(scale(1.3));
109
+ }
110
+
111
+ &.show .modal-outer {
112
+ @include transform(scale(1));
113
+ }
114
+ }
115
+
116
+ &.from-below {
117
+ .modal-outer {
118
+ @include transform(scale(0.7));
119
+ }
120
+
121
+ &.show .modal-outer {
122
+ @include transform(scale(1));
123
+ }
124
+ }
125
+
126
+ &.slide-in-top {
127
+ .modal-outer {
128
+ @include transform(translateY(-50%));
129
+ }
130
+
131
+ &.show .modal-outer {
132
+ @include transform(translateY(0));
133
+ }
134
+ }
135
+
136
+ &.slide-in-bottom {
137
+ .modal-outer {
138
+ @include transform(translateY(50%));
139
+ }
140
+
141
+ &.show .modal-outer {
142
+ @include transform(translateY(0));
143
+ }
144
+ }
145
+
146
+ &.slide-in-left {
147
+ .modal-outer {
148
+ @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
149
+ @include transform(translateX(-50%));
150
+ }
151
+
152
+ &.show .modal-outer {
153
+ @include transform(translateX(0));
154
+ }
155
+ }
156
+
157
+ &.slide-in-right {
158
+ .modal-outer {
159
+ @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
160
+ @include transform(translateX(50%));
161
+ }
162
+
163
+ &.show .modal-outer {
164
+ @include transform(translateX(0));
165
+ }
166
+ }
167
+
168
+ &.sticky-top {
169
+ top: -100%;
170
+ opacity: 0;
171
+ @include transition(all 0.3s);
172
+ @include transform(translateX(-50%)); // reset to x
173
+
174
+ &.show {
175
+ top: 0;
176
+ opacity: 1;
177
+ }
178
+ }
179
+
180
+ &.sticky-bottom {
181
+ top: auto;
182
+ bottom: -100%;
183
+ opacity: 0;
184
+ @include transition(all 0.3s);
185
+ @include transform(translateX(-50%)); // reset to x
186
+
187
+ &.show {
188
+ bottom: 0;
189
+ opacity: 1;
190
+ }
191
+ }
192
+
193
+ &.sticky-left {
194
+ left: -100%;
195
+ opacity: 0;
196
+ @include transition(all 0.3s);
197
+ @include transform(translate(0, -50%));
198
+
199
+ &.show {
200
+ left: 0;
201
+ opacity: 1;
202
+ }
203
+ }
204
+
205
+ &.sticky-right {
206
+ left: auto;
207
+ right: -100%;
208
+ opacity: 0;
209
+ @include transition(all 0.3s);
210
+ @include transform(translate(0, -50%));
211
+
212
+ &.show {
213
+ right: 0;
214
+ opacity: 1;
215
+ }
216
+ }
217
+
218
+ &.flip {
219
+ @include perspective(1300px);
220
+
221
+ .modal-outer {
222
+ @include transform-style(preserve-3d);
223
+ @include transform(rotateY(-70deg));
224
+ }
225
+
226
+ &.show .modal-outer {
227
+ @include transform(rotateY(0deg));
228
+ }
229
+ }
230
+
231
+ &.flip-vert {
232
+ @include perspective(1300px);
233
+
234
+ .modal-outer {
235
+ @include transform-style(preserve-3d);
236
+ @include transform(rotateX(-70deg));
237
+ }
238
+
239
+ &.show .modal-outer {
240
+ @include transform(rotateX(0deg));
241
+ }
242
+ }
243
243
  }
data/src/scss/toolkit/modules/popover.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";
@@ -9,76 +9,76 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Popover module.
11
11
  *
12
- * <div class="popover">
13
- * <div class="popover-inner">
14
- * <div class="popover-head">Popover Title</div>
15
- * <div class="popover-body">Popover Content</div>
16
- * </div>
17
- * <div class="popover-arrow"></div>
18
- * </div>
12
+ * <div class="popover">
13
+ * <div class="popover-inner">
14
+ * <div class="popover-head">Popover Title</div>
15
+ * <div class="popover-body">Popover Content</div>
16
+ * </div>
17
+ * <div class="popover-arrow"></div>
18
+ * </div>
19
19
  */
20
20
 
21
21
  .popover {
22
- position: absolute;
23
- top: 0;
24
- left: 0;
25
- margin: 0;
26
- padding: 0;
27
- z-index: 500;
28
- max-width: 300px;
29
- visibility: hidden;
30
- background: $gray;
31
- border: 1px solid $gray-dark;
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ margin: 0;
26
+ padding: 0;
27
+ z-index: 500;
28
+ max-width: 300px;
29
+ visibility: hidden;
30
+ background: $gray;
31
+ border: 1px solid $gray-dark;
32
32
 
33
- &.center-left .popover-arrow,
34
- &.center-right .popover-arrow {
35
- top: 50%;
36
- margin-top: -8px;
37
- }
33
+ &.center-left .popover-arrow,
34
+ &.center-right .popover-arrow {
35
+ top: 50%;
36
+ margin-top: -8px;
37
+ }
38
38
 
39
- &.center-left .popover-arrow {
40
- border-left-color: #000;
41
- right: -16px;
42
- }
39
+ &.center-left .popover-arrow {
40
+ border-left-color: #000;
41
+ right: -16px;
42
+ }
43
43
 
44
- &.center-right .popover-arrow {
45
- border-right-color: #000;
46
- left: -16px;
47
- }
44
+ &.center-right .popover-arrow {
45
+ border-right-color: #000;
46
+ left: -16px;
47
+ }
48
48
 
49
- &.top-center .popover-arrow,
50
- &.bottom-center .popover-arrow {
51
- left: 50%;
52
- margin-left: -8px;
53
- }
49
+ &.top-center .popover-arrow,
50
+ &.bottom-center .popover-arrow {
51
+ left: 50%;
52
+ margin-left: -8px;
53
+ }
54
54
 
55
- &.top-center .popover-arrow {
56
- border-top-color: #000;
57
- bottom: -16px;
58
- }
55
+ &.top-center .popover-arrow {
56
+ border-top-color: #000;
57
+ bottom: -16px;
58
+ }
59
59
 
60
- &.bottom-center .popover-arrow {
61
- border-bottom-color: #000;
62
- top: -16px;
63
- }
60
+ &.bottom-center .popover-arrow {
61
+ border-bottom-color: #000;
62
+ top: -16px;
63
+ }
64
64
  }
65
65
 
66
66
  .popover-head,
67
67
  .popover-body {
68
- padding: $small-padding;
68
+ padding: $small-padding;
69
69
  }
70
70
 
71
71
  .popover-arrow {
72
- width: 0;
73
- height: 0;
74
- border: 8px solid transparent;
75
- position: absolute;
72
+ width: 0;
73
+ height: 0;
74
+ border: 8px solid transparent;
75
+ position: absolute;
76
76
 
77
- &:after {
78
- content: "";
79
- border: 6px solid transparent;
80
- position: absolute;
81
- top: -6px;
82
- left: -6px;
83
- }
77
+ &:after {
78
+ content: "";
79
+ border: 6px solid transparent;
80
+ position: absolute;
81
+ top: -6px;
82
+ left: -6px;
83
+ }
84
84
  }