titon-toolkit 0.9.1 → 0.9.2

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 (42) hide show
  1. checksums.yaml +4 -4
  2. data/src/scss/normalize.scss +396 -0
  3. data/src/scss/toolkit.scss +38 -0
  4. data/src/scss/toolkit/_common.scss +16 -0
  5. data/src/scss/toolkit/_variables.scss +59 -0
  6. data/src/scss/toolkit/effects/visual.scss +75 -0
  7. data/src/scss/toolkit/layout/base.scss +93 -0
  8. data/src/scss/toolkit/layout/code.scss +61 -0
  9. data/src/scss/toolkit/layout/form.scss +158 -0
  10. data/src/scss/toolkit/layout/grid.scss +64 -0
  11. data/src/scss/toolkit/layout/input-group.scss +56 -0
  12. data/src/scss/toolkit/layout/responsive.scss +53 -0
  13. data/src/scss/toolkit/layout/table.scss +82 -0
  14. data/src/scss/toolkit/layout/typography.scss +49 -0
  15. data/src/scss/toolkit/mixins/_grid.scss +24 -0
  16. data/src/scss/toolkit/mixins/_layout.scss +90 -0
  17. data/src/scss/toolkit/mixins/_responsive.scss +111 -0
  18. data/src/scss/toolkit/mixins/_themes.scss +98 -0
  19. data/src/scss/toolkit/modules/accordion.scss +62 -0
  20. data/src/scss/toolkit/modules/blackout.scss +24 -0
  21. data/src/scss/toolkit/modules/carousel.scss +175 -0
  22. data/src/scss/toolkit/modules/flyout.scss +78 -0
  23. data/src/scss/toolkit/modules/modal.scss +243 -0
  24. data/src/scss/toolkit/modules/popover.scss +84 -0
  25. data/src/scss/toolkit/modules/showcase.scss +166 -0
  26. data/src/scss/toolkit/modules/tabs.scss +56 -0
  27. data/src/scss/toolkit/modules/tooltip.scss +130 -0
  28. data/src/scss/toolkit/modules/type-ahead.scss +67 -0
  29. data/src/scss/toolkit/themes/titon.scss +364 -0
  30. data/src/scss/toolkit/themes/tomorrow-night.scss +569 -0
  31. data/src/scss/toolkit/ui/alert.scss +48 -0
  32. data/src/scss/toolkit/ui/breadcrumbs.scss +51 -0
  33. data/src/scss/toolkit/ui/button-group.scss +204 -0
  34. data/src/scss/toolkit/ui/button.scss +48 -0
  35. data/src/scss/toolkit/ui/dropdown.scss +105 -0
  36. data/src/scss/toolkit/ui/icon.scss +22 -0
  37. data/src/scss/toolkit/ui/label-badge.scss +76 -0
  38. data/src/scss/toolkit/ui/lazy-load.scss +14 -0
  39. data/src/scss/toolkit/ui/pagination.scss +128 -0
  40. data/src/scss/toolkit/ui/pin.scss +16 -0
  41. data/src/scss/toolkit/ui/progress.scss +34 -0
  42. metadata +42 -2
@@ -0,0 +1,98 @@
1
+
2
+ @mixin alert-style($bg, $text) {
3
+ color: $text;
4
+ background: $bg;
5
+ border: 1px solid shade($bg, 10%);
6
+
7
+ hr { border-color: shade($bg, 10%); }
8
+
9
+ a { color: shade($text, 10%); }
10
+ a:hover { color: tint($text, 25%); }
11
+
12
+ @content;
13
+ }
14
+
15
+ @mixin button-style($base, $light, $dark) {
16
+ font-weight: bold;
17
+ background: shade($base, 5%);
18
+ text-shadow: 1px 1px black(.2);
19
+ border: 1px solid shade($base, 12%);
20
+
21
+ @include active-state {
22
+ color: #fff;
23
+ background-color: shade($base, 20%);
24
+ text-shadow: 1px 1px $dark;
25
+ border-color: shade($base, 30%);
26
+ }
27
+
28
+ @include disabled-state {
29
+ background: $base;
30
+ border-color: $base;
31
+ box-shadow: none;
32
+ text-shadow: none;
33
+ top: 0;
34
+ opacity: $disabled-opacity;
35
+ }
36
+
37
+ @content;
38
+ }
39
+
40
+ @mixin label-style($bg, $text) {
41
+ background: $bg;
42
+ color: $text;
43
+
44
+ @content;
45
+ }
46
+
47
+ @mixin progress-style($bg, $border) {
48
+ background: $bg;
49
+ text-shadow: 1px 1px $border;
50
+ border: 1px solid tint($border, 35%);
51
+ border-right: 0;
52
+
53
+ @content;
54
+ }
55
+
56
+ @mixin field-style() {
57
+ &.has-error {
58
+ .input,
59
+ .select {
60
+ border-color: $error;
61
+
62
+ &:focus { box-shadow: 0 0 5px $error-light; }
63
+ }
64
+
65
+ .radio,
66
+ .checkbox {
67
+ color: $error-dark;
68
+ }
69
+ }
70
+
71
+ &.has-warning {
72
+ .input,
73
+ .select {
74
+ border-color: $warning;
75
+
76
+ &:focus { box-shadow: 0 0 5px $warning-light; }
77
+ }
78
+
79
+ .radio,
80
+ .checkbox {
81
+ color: $warning-dark;
82
+ }
83
+ }
84
+
85
+ &.has-success {
86
+ .input,
87
+ .select {
88
+ border-color: $success;
89
+
90
+ &:focus { box-shadow: 0 0 5px $success-light; }
91
+ }
92
+
93
+ .radio,
94
+ .checkbox {
95
+ color: $success-dark;
96
+ }
97
+ }
98
+ }
@@ -0,0 +1,62 @@
1
+ /**
2
+ * @copyright Copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ /**
10
+ * Should be used in conjunction with the JavaScript Titon.Tooltip module.
11
+ *
12
+ * <ul class="accordion">
13
+ * <li>
14
+ * <header class="accordion-head">Title Bar</header>
15
+ * <section class="accordion-inner">
16
+ * <div class="accordion-body">Collapsible content</div>
17
+ * </section>
18
+ * </li>
19
+ * </ul>
20
+ */
21
+
22
+ .accordion,
23
+ .accordion li {
24
+ list-style: none;
25
+ text-align: left;
26
+ margin: 0;
27
+ padding: 0;
28
+ }
29
+
30
+ .accordion {
31
+ border: 1px solid $gray-dark;
32
+ }
33
+
34
+ .accordion-head {
35
+ padding: $padding;
36
+ background: $gray;
37
+ border: 1px solid $gray-dark;
38
+ margin: -1px;
39
+ cursor: pointer;
40
+
41
+ .is-active & {
42
+ background: $gray-dark;
43
+ border-color: $gray-darkest;
44
+ }
45
+ }
46
+
47
+ // Style this
48
+ .accordion-body {
49
+ padding: $padding;
50
+
51
+ @include content-spacing;
52
+ }
53
+
54
+ // Inner is used for animations, do not style it!
55
+ .accordion-inner {
56
+ overflow: hidden;
57
+ position: relative;
58
+ @include transition(all .3s ease-in-out);
59
+
60
+ &.show { height: auto; }
61
+ &.hide { max-height: 0; } // don't include on base styles
62
+ }
@@ -0,0 +1,24 @@
1
+ /**
2
+ * @copyright Copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ /**
10
+ * Should be used in conjunction with the JavaScript Titon.Blackout module.
11
+ */
12
+
13
+ .blackout {
14
+ position: fixed;
15
+ top: 0;
16
+ left: 0;
17
+ height: 100%;
18
+ width: 100%;
19
+ z-index: 600;
20
+ opacity: 0;
21
+ visibility: hidden;
22
+ background: black(.5);
23
+ @include transition(all 0.3s);
24
+ }
@@ -0,0 +1,175 @@
1
+ /**
2
+ * @copyright Copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ /**
10
+ * Should be used in conjunction with the JavaScript Titon.Carousel module.
11
+ *
12
+ * <div class="carousel">
13
+ * <ul class="carousel-items">
14
+ * <li>
15
+ * <img src="/path/to/image.jpg">
16
+ * <div class="carousel-caption">Image caption</div>
17
+ * </li>
18
+ * </ul>
19
+ * <ol class="carousel-tabs">
20
+ * <li><a href=""></a></li>
21
+ * </ol>
22
+ * <a href="javascript:;" class="carousel-prev">
23
+ * <span class="icon-chevron-sign-left"></span>
24
+ * </a>
25
+ * <a href="javascript:;" class="carousel-next">
26
+ * <span class="icon-chevron-sign-right"></span>
27
+ * </a>
28
+ * </div>
29
+ */
30
+
31
+ .carousel {
32
+ // 16:9
33
+ max-width: 640px;
34
+ max-height: 360px;
35
+ width: 100%;
36
+ height: auto;
37
+ margin: 0 auto;
38
+ text-align: left;
39
+ position: relative;
40
+ overflow: hidden;
41
+ }
42
+
43
+ .carousel-items {
44
+ list-style: none;
45
+ margin: 0;
46
+ padding: 0;
47
+ position: relative;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: auto;
52
+ z-index: 1;
53
+ @include transition(left 1s, top 1s);
54
+
55
+ > li {
56
+ position: relative;
57
+ width: 100%;
58
+ height: auto;
59
+ z-index: 1;
60
+ display: block;
61
+
62
+ > img {
63
+ display: block;
64
+ width: 100%;
65
+ max-width: 100%;
66
+ height: auto;
67
+ }
68
+
69
+ .carousel-caption {
70
+ position: absolute;
71
+ bottom: 0;
72
+ left: 0;
73
+ width: 100%;
74
+ padding: $padding;
75
+ color: #fff;
76
+ background: black(.70);
77
+ }
78
+ }
79
+ }
80
+
81
+ .carousel-prev,
82
+ .carousel-next {
83
+ display: block;
84
+ position: absolute;
85
+ padding: $padding;
86
+ width: auto;
87
+ height: auto;
88
+ z-index: 5;
89
+ font-size: 28px;
90
+ color: #fff;
91
+ opacity: .65;
92
+ top: 50%;
93
+ @include transform(translateY(-50%)); // move up 50% of their height
94
+
95
+ &:hover {
96
+ color: #fff;
97
+ opacity: 1;
98
+ }
99
+
100
+ &:focus {
101
+ outline: none;
102
+ }
103
+
104
+ // Large icons for large resolutions
105
+ @include if-tablet-landscape {
106
+ .carousel-prev,
107
+ .carousel-next {
108
+ font-size: 56px;
109
+ }
110
+ }
111
+ }
112
+
113
+ .carousel-prev { left: 0; }
114
+ .carousel-next { right: 0; }
115
+
116
+ .carousel-tabs {
117
+ list-style: none;
118
+ line-height: 100%;
119
+ margin: 0;
120
+ padding: $padding;
121
+ position: absolute;
122
+ top: 0;
123
+ left: 50%;
124
+ z-index: 5;
125
+ @include transform(translateX(-50%)); // move left 50% of their width
126
+
127
+ li {
128
+ display: inline-block;
129
+ margin: 0 3px;
130
+ }
131
+
132
+ a {
133
+ display: inline-block;
134
+ border: 2px solid #fff;
135
+ height: 10px;
136
+ width: 10px;
137
+ border-radius: 50%;
138
+ opacity: .65;
139
+
140
+ &:hover { opacity: 1; }
141
+ &.is-active { background: #fff; }
142
+ }
143
+
144
+ // Hide if no tabs
145
+ &:empty { display: none; }
146
+ }
147
+
148
+ //-------------------- Animations --------------------//
149
+
150
+ .carousel.slide {
151
+ .carousel-items {
152
+ @include clear-fix;
153
+
154
+ > li {
155
+ float: left;
156
+ }
157
+ }
158
+ }
159
+
160
+ .carousel.fade {
161
+ .carousel-items {
162
+ height: 360px; // needs a base height because slides are absolute
163
+
164
+ > li {
165
+ position: absolute;
166
+ top: 0;
167
+ left: 0;
168
+ opacity: 0;
169
+ z-index: 1;
170
+ @include transition(opacity 1s);
171
+
172
+ &.show { z-index: 2; }
173
+ }
174
+ }
175
+ }
@@ -0,0 +1,78 @@
1
+ /**
2
+ * @copyright Copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ /**
10
+ * Should be used in conjunction with the JavaScript Titon.Flyout module.
11
+ */
12
+
13
+ .flyout {
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 box-sizing(content-box); // required by MooTools for multi columns
23
+ @include transition(opacity 0.3s);
24
+
25
+ ul {
26
+ list-style: none;
27
+ margin: 0;
28
+ padding: 0;
29
+ float: left;
30
+ width: 200px;
31
+
32
+ li {
33
+ position: relative;
34
+
35
+ > a,
36
+ > .divider {
37
+ padding: $small-padding;
38
+ line-height: 100%;
39
+ display: block;
40
+ text-decoration: none;
41
+ }
42
+
43
+ > a .caret-right { display: none; }
44
+
45
+ &.has-children > a .caret-right {
46
+ float: right;
47
+ display: inline-block; // reveal
48
+ margin-top: 3px;
49
+ }
50
+
51
+ // Sub-flyouts
52
+ > .flyout {
53
+ left: 90%;
54
+ @include transition(left .3s, right .3s, opacity .3s);
55
+
56
+ // Reverse menu to left side incase it goes outside the viewport
57
+ // Will be set automatically from the Javascript layer
58
+ &.flyout--left {
59
+ left: auto;
60
+ right: 90%;
61
+ }
62
+ }
63
+
64
+ &.is-open > .flyout {
65
+ opacity: 1;
66
+ visibility: visible;
67
+ left: 100%;
68
+
69
+ &.flyout--left {
70
+ left: auto;
71
+ right: 100%;
72
+ }
73
+ }
74
+ }
75
+ }
76
+
77
+ @include clear-fix;
78
+ }
@@ -0,0 +1,243 @@
1
+ /**
2
+ * @copyright Copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ /**
10
+ * Should be used in conjunction with the JavaScript Titon.Modal module.
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>
20
+ */
21
+
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
+ }
50
+ }
51
+
52
+ // Used for animations, should also contain the styles
53
+ .modal-outer {
54
+ position: relative;
55
+ margin: 0 auto;
56
+ background: $gray;
57
+ border: 1px solid $gray-dark;
58
+ }
59
+
60
+ // Reset draggable cursor
61
+ .modal.is-draggable {
62
+ .modal-inner { cursor: default; }
63
+ .modal-head { cursor: move; }
64
+ }
65
+
66
+ // Apply block padding
67
+ .modal-head,
68
+ .modal-body,
69
+ .modal-foot,
70
+ .modal-loading,
71
+ .modal-error {
72
+ padding: $padding;
73
+ }
74
+
75
+ // Remove margins from text elements
76
+ .modal-body {
77
+ @include content-spacing;
78
+ }
79
+
80
+ //-------------------- Animations --------------------//
81
+
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
+ }
243
+ }