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/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
  }