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