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/ui/alert.scss CHANGED
@@ -1,48 +1,48 @@
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
  /**
10
- * <div class="alert is-info">
11
- * <button type="button" class="close">
12
- * <span class="x">&times;</span>
13
- * </button>
10
+ * <div class="alert is-info">
11
+ * <button type="button" class="close">
12
+ * <span class="x">&times;</span>
13
+ * </button>
14
14
  *
15
- * <h3 class="alert-title">Title</h3>
16
- * <p>This is an information message!</p>
17
- * </div>
15
+ * <h3 class="alert-title">Title</h3>
16
+ * <p>This is an information message!</p>
17
+ * </div>
18
18
  */
19
19
 
20
20
  .alert {
21
- margin: $margin 0;
22
- padding: $padding;
23
- background: $gray;
24
- border: 1px solid $gray-dark;
25
- text-align: left;
21
+ margin: $margin 0;
22
+ padding: $padding;
23
+ background: $gray;
24
+ border: 1px solid $gray-dark;
25
+ text-align: left;
26
26
 
27
- hr {
28
- border: 0;
29
- border-top: 1px solid transparent;
30
- }
27
+ hr {
28
+ border: 0;
29
+ border-top: 1px solid transparent;
30
+ }
31
31
 
32
- a {
33
- font-weight: bold;
34
- }
32
+ a {
33
+ font-weight: bold;
34
+ }
35
35
 
36
- .close {
37
- float: right;
38
- margin-left: $margin;
36
+ .close {
37
+ float: right;
38
+ margin-left: $margin;
39
39
 
40
- & ~ p { margin: 0; }
41
- }
40
+ & ~ p { margin: 0; }
41
+ }
42
42
 
43
- @include content-spacing;
43
+ @include content-spacing;
44
44
  }
45
45
 
46
46
  .alert-title {
47
- margin: 0 0 ($margin / 2) 0;
47
+ margin: 0 0 ($margin / 2) 0;
48
48
  }
data/src/scss/toolkit/ui/breadcrumbs.scss CHANGED
@@ -1,51 +1,51 @@
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
  /**
10
- * <nav class="breadcrumbs">
11
- * <ol>
12
- * <li><a href="">Home</a></li>
13
- * <li><a href="">Sub-page</a></li>
14
- * <li><a href="">Sub-page</a></li>
15
- * <li><a href="">Sub-page</a></li>
16
- * <li><a href="">Current</a></li>
17
- * </ol>
18
- * </nav>
10
+ * <nav class="breadcrumbs">
11
+ * <ol>
12
+ * <li><a href="">Home</a></li>
13
+ * <li><a href="">Sub-page</a></li>
14
+ * <li><a href="">Sub-page</a></li>
15
+ * <li><a href="">Sub-page</a></li>
16
+ * <li><a href="">Current</a></li>
17
+ * </ol>
18
+ * </nav>
19
19
  */
20
20
 
21
21
  .breadcrumbs {
22
- text-align: left;
23
- margin: $margin 0;
24
- background: $gray;
25
- border: 1px solid $gray-dark;
26
- border-radius: $round;
27
-
28
- ul, ol {
29
- margin: 0;
30
- padding: 0;
31
- }
32
-
33
- li {
34
- position: relative;
35
- list-style: none;
36
- float: left;
37
- }
38
-
39
- a {
40
- display: block;
41
- padding: $medium-padding;
42
- line-height: 100%;
43
- font-size: $medium-size;
44
- }
45
-
46
- // Sizes
47
- &.small a { padding: $small-padding; font-size: $small-size; }
48
- &.large a { padding: $large-padding; font-size: $large-size; }
49
-
50
- @include clear-fix;
22
+ text-align: left;
23
+ margin: $margin 0;
24
+ background: $gray;
25
+ border: 1px solid $gray-dark;
26
+ border-radius: $round;
27
+
28
+ ul, ol {
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+
33
+ li {
34
+ position: relative;
35
+ list-style: none;
36
+ float: left;
37
+ }
38
+
39
+ a {
40
+ display: block;
41
+ padding: $medium-padding;
42
+ line-height: 100%;
43
+ font-size: $medium-size;
44
+ }
45
+
46
+ // Sizes
47
+ &.small a { padding: $small-padding; font-size: $small-size; }
48
+ &.large a { padding: $large-padding; font-size: $large-size; }
49
+
50
+ @include clear-fix;
51
51
  }
data/src/scss/toolkit/ui/button-group.scss CHANGED
@@ -1,204 +1,204 @@
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
  /**
10
- * <div class="button-group pill">
11
- * <a href="" class="button">Left Button</a>
12
- * <a href="" class="button">Center Button</a>
13
- * <a href="" class="button">Right Button</a>
14
- * </div>
10
+ * <div class="button-group pill">
11
+ * <a href="" class="button">Left Button</a>
12
+ * <a href="" class="button">Center Button</a>
13
+ * <a href="" class="button">Right Button</a>
14
+ * </div>
15
15
  */
16
16
 
17
17
  .button-group {
18
- @include reset-inline-block;
19
- white-space: nowrap;
20
-
21
- > li,
22
- > .button {
23
- float: left;
24
- margin-left: -1px !important;
25
- border-radius: 0;
26
- display: block;
27
-
28
- &:first-child { margin-left: 0; }
29
- &:hover { z-index: 1; }
30
- }
31
-
32
- > li .button {
33
- display: block;
34
- border-radius: 0;
35
- }
36
-
37
- // Shape: round
38
- &.round {
39
- border-radius: $round;
40
-
41
- > li:first-child .button,
42
- > .button:first-child,
43
- > .button.first {
44
- border-top-left-radius: $round;
45
- border-bottom-left-radius: $round;
46
- }
47
-
48
- > li:last-child .button,
49
- > .button:last-child,
50
- > .button.last {
51
- border-top-right-radius: $round;
52
- border-bottom-right-radius: $round;
53
- }
54
- }
55
-
56
- // Shape: pill
57
- &.pill {
58
- border-radius: $pill;
59
-
60
- > li:first-child .button,
61
- > .button:first-child,
62
- > .button.first {
63
- border-top-left-radius: $pill;
64
- border-bottom-left-radius: $pill;
65
- }
66
-
67
- > li:last-child .button,
68
- > .button:last-child,
69
- > .button.last {
70
- border-top-right-radius: $pill;
71
- border-bottom-right-radius: $pill;
72
- }
73
- }
74
-
75
- // Shape: skew
76
- &.skew {
77
- border-top-left-radius: $skew;
78
- border-top-right-radius: $skew;
79
- border-bottom-left-radius: 0;
80
- border-bottom-right-radius: 0;
81
-
82
- > li:first-child .button,
83
- > .button:first-child,
84
- > .button.first {
85
- border-top-left-radius: $skew;
86
- border-bottom-left-radius: 0;
87
- }
88
-
89
- > li:last-child .button,
90
- > .button:last-child,
91
- > .button.last {
92
- border-top-right-radius: $skew;
93
- border-bottom-right-radius: 0;
94
- }
95
- }
96
-
97
- @include clear-fix;
18
+ @include reset-inline-block;
19
+ white-space: nowrap;
20
+
21
+ > li,
22
+ > .button {
23
+ float: left;
24
+ margin-left: -1px !important;
25
+ border-radius: 0;
26
+ display: block;
27
+
28
+ &:first-child { margin-left: 0; }
29
+ &:hover { z-index: 1; }
30
+ }
31
+
32
+ > li .button {
33
+ display: block;
34
+ border-radius: 0;
35
+ }
36
+
37
+ // Shape: round
38
+ &.round {
39
+ border-radius: $round;
40
+
41
+ > li:first-child .button,
42
+ > .button:first-child,
43
+ > .button.first {
44
+ border-top-left-radius: $round;
45
+ border-bottom-left-radius: $round;
46
+ }
47
+
48
+ > li:last-child .button,
49
+ > .button:last-child,
50
+ > .button.last {
51
+ border-top-right-radius: $round;
52
+ border-bottom-right-radius: $round;
53
+ }
54
+ }
55
+
56
+ // Shape: pill
57
+ &.pill {
58
+ border-radius: $pill;
59
+
60
+ > li:first-child .button,
61
+ > .button:first-child,
62
+ > .button.first {
63
+ border-top-left-radius: $pill;
64
+ border-bottom-left-radius: $pill;
65
+ }
66
+
67
+ > li:last-child .button,
68
+ > .button:last-child,
69
+ > .button.last {
70
+ border-top-right-radius: $pill;
71
+ border-bottom-right-radius: $pill;
72
+ }
73
+ }
74
+
75
+ // Shape: skew
76
+ &.skew {
77
+ border-top-left-radius: $skew;
78
+ border-top-right-radius: $skew;
79
+ border-bottom-left-radius: 0;
80
+ border-bottom-right-radius: 0;
81
+
82
+ > li:first-child .button,
83
+ > .button:first-child,
84
+ > .button.first {
85
+ border-top-left-radius: $skew;
86
+ border-bottom-left-radius: 0;
87
+ }
88
+
89
+ > li:last-child .button,
90
+ > .button:last-child,
91
+ > .button.last {
92
+ border-top-right-radius: $skew;
93
+ border-bottom-right-radius: 0;
94
+ }
95
+ }
96
+
97
+ @include clear-fix;
98
98
  }
99
99
 
100
100
  // Space out groups
101
101
  .button-group + .button-group {
102
- margin-left: $margin;
102
+ margin-left: $margin;
103
103
  }
104
104
 
105
105
  //-------------------- Modifiers --------------------//
106
106
 
107
107
  .button-group.button-group--vertical {
108
- vertical-align: top;
109
-
110
- > li,
111
- > .button {
112
- float: none;
113
- display: block;
114
- margin: -1px 0 0 0 !important;
115
- width: auto;
116
- max-width: 100%;
117
-
118
- &:first-child { margin-top: 0 !important; }
119
- &:hover { z-index: 1; }
120
- }
121
-
122
- // Reset radius
123
- &.round,
124
- &.pill,
125
- &.skew,
126
- &.skew-reverse {
127
- .button { border-radius: 0; }
128
- }
129
-
130
- // Shape: round
131
- &.round {
132
- > li:first-child .button,
133
- > .button:first-child {
134
- border-top-left-radius: $round;
135
- border-top-right-radius: $round;
136
- }
137
-
138
- > li:last-child .button,
139
- > .button:last-child {
140
- border-bottom-left-radius: $round;
141
- border-bottom-right-radius: $round;
142
- }
143
- }
144
-
145
- // Shape: pill
146
- &.pill {
147
- border-radius: $pill;
148
-
149
- > li:first-child .button,
150
- > .button:first-child {
151
- border-top-left-radius: $pill;
152
- border-top-right-radius: $pill;
153
- }
154
-
155
- > li:last-child .button,
156
- > .button:last-child {
157
- border-bottom-left-radius: $pill;
158
- border-bottom-right-radius: $pill;
159
- }
160
- }
161
-
162
- // Shape: skew
163
- &.skew {
164
- border-top-left-radius: $skew-y 1.5rem;
165
- border-bottom-left-radius: $skew-y 1.5rem;
166
-
167
- > li:first-child .button,
168
- > .button:first-child {
169
- border-top-left-radius: $skew-reverse;
170
- }
171
-
172
- > li:last-child .button,
173
- > .button:last-child {
174
- border-bottom-left-radius: $skew-reverse;
175
- border-top-right-radius: 0;
176
- }
177
- }
178
-
179
- // Shape: skew-reverse
180
- &.skew-reverse {
181
- border-top-right-radius: $skew-y 1.25rem;
182
- border-bottom-right-radius: $skew-y 1.25rem;
183
-
184
- > li:first-child .button,
185
- > .button:first-child {
186
- border-top-right-radius: $skew-reverse;
187
- }
188
-
189
- > li:last-child .button,
190
- > .button:last-child {
191
- border-bottom-right-radius: $skew-reverse;
192
- }
193
- }
108
+ vertical-align: top;
109
+
110
+ > li,
111
+ > .button {
112
+ float: none;
113
+ display: block;
114
+ margin: -1px 0 0 0 !important;
115
+ width: auto;
116
+ max-width: 100%;
117
+
118
+ &:first-child { margin-top: 0 !important; }
119
+ &:hover { z-index: 1; }
120
+ }
121
+
122
+ // Reset radius
123
+ &.round,
124
+ &.pill,
125
+ &.skew,
126
+ &.skew-reverse {
127
+ .button { border-radius: 0; }
128
+ }
129
+
130
+ // Shape: round
131
+ &.round {
132
+ > li:first-child .button,
133
+ > .button:first-child {
134
+ border-top-left-radius: $round;
135
+ border-top-right-radius: $round;
136
+ }
137
+
138
+ > li:last-child .button,
139
+ > .button:last-child {
140
+ border-bottom-left-radius: $round;
141
+ border-bottom-right-radius: $round;
142
+ }
143
+ }
144
+
145
+ // Shape: pill
146
+ &.pill {
147
+ border-radius: $pill;
148
+
149
+ > li:first-child .button,
150
+ > .button:first-child {
151
+ border-top-left-radius: $pill;
152
+ border-top-right-radius: $pill;
153
+ }
154
+
155
+ > li:last-child .button,
156
+ > .button:last-child {
157
+ border-bottom-left-radius: $pill;
158
+ border-bottom-right-radius: $pill;
159
+ }
160
+ }
161
+
162
+ // Shape: skew
163
+ &.skew {
164
+ border-top-left-radius: $skew-y 1.5rem;
165
+ border-bottom-left-radius: $skew-y 1.5rem;
166
+
167
+ > li:first-child .button,
168
+ > .button:first-child {
169
+ border-top-left-radius: $skew-reverse;
170
+ }
171
+
172
+ > li:last-child .button,
173
+ > .button:last-child {
174
+ border-bottom-left-radius: $skew-reverse;
175
+ border-top-right-radius: 0;
176
+ }
177
+ }
178
+
179
+ // Shape: skew-reverse
180
+ &.skew-reverse {
181
+ border-top-right-radius: $skew-y 1.25rem;
182
+ border-bottom-right-radius: $skew-y 1.25rem;
183
+
184
+ > li:first-child .button,
185
+ > .button:first-child {
186
+ border-top-right-radius: $skew-reverse;
187
+ }
188
+
189
+ > li:last-child .button,
190
+ > .button:last-child {
191
+ border-bottom-right-radius: $skew-reverse;
192
+ }
193
+ }
194
194
  }
195
195
 
196
196
  .button-group.button-group--justified {
197
- display: table;
198
- width: 100%;
197
+ display: table;
198
+ width: 100%;
199
199
 
200
- > .button {
201
- float: none;
202
- display: table-cell;
203
- }
200
+ > .button {
201
+ float: none;
202
+ display: table-cell;
203
+ }
204
204
  }