titon-toolkit 2.0.2 → 2.1.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 (51) hide show
  1. checksums.yaml +4 -4
  2. data/changelog.md +66 -183
  3. data/readme.md +17 -8
  4. data/roadmap.md +13 -11
  5. data/scss/toolkit.scss +3 -2
  6. data/scss/toolkit/_common.scss +72 -22
  7. data/scss/toolkit/base.scss +12 -1
  8. data/scss/toolkit/components/accordion.scss +19 -17
  9. data/scss/toolkit/components/blackout.scss +20 -18
  10. data/scss/toolkit/components/breadcrumb.scss +37 -36
  11. data/scss/toolkit/components/button-group.scss +130 -128
  12. data/scss/toolkit/components/button.scss +100 -98
  13. data/scss/toolkit/components/carousel.scss +63 -63
  14. data/scss/toolkit/components/code.scss +49 -47
  15. data/scss/toolkit/components/divider.scss +34 -32
  16. data/scss/toolkit/components/drop.scss +82 -79
  17. data/scss/toolkit/components/flex.scss +110 -0
  18. data/scss/toolkit/components/flyout.scss +59 -53
  19. data/scss/toolkit/components/form.scss +178 -170
  20. data/scss/toolkit/components/grid.scss +36 -34
  21. data/scss/toolkit/components/icon.scss +28 -25
  22. data/scss/toolkit/components/input-group.scss +35 -33
  23. data/scss/toolkit/components/input.scss +102 -99
  24. data/scss/toolkit/components/label.scss +99 -97
  25. data/scss/toolkit/components/lazy-load.scss +6 -4
  26. data/scss/toolkit/components/loader.scss +124 -122
  27. data/scss/toolkit/components/mask.scss +24 -22
  28. data/scss/toolkit/components/matrix.scss +16 -14
  29. data/scss/toolkit/components/modal.scss +104 -102
  30. data/scss/toolkit/components/notice.scss +24 -23
  31. data/scss/toolkit/components/off-canvas.scss +118 -116
  32. data/scss/toolkit/components/pagination.scss +90 -66
  33. data/scss/toolkit/components/pin.scss +11 -9
  34. data/scss/toolkit/components/popover.scss +50 -48
  35. data/scss/toolkit/components/progress.scss +42 -40
  36. data/scss/toolkit/components/responsive.scss +61 -66
  37. data/scss/toolkit/components/showcase.scss +62 -60
  38. data/scss/toolkit/components/step.scss +51 -44
  39. data/scss/toolkit/components/switch.scss +96 -93
  40. data/scss/toolkit/components/tab.scss +25 -25
  41. data/scss/toolkit/components/table.scss +76 -75
  42. data/scss/toolkit/components/toast.scss +91 -89
  43. data/scss/toolkit/components/tooltip.scss +82 -80
  44. data/scss/toolkit/components/type-ahead.scss +53 -52
  45. data/scss/toolkit/components/typography.scss +45 -43
  46. data/scss/toolkit/mixins/_flex.scss +80 -0
  47. data/scss/toolkit/mixins/_grid.scss +6 -29
  48. data/scss/toolkit/mixins/_helper.scss +33 -4
  49. data/scss/toolkit/mixins/_layout.scss +28 -1
  50. data/version.md +1 -1
  51. metadata +4 -2
data/scss/toolkit/components/form.scss CHANGED
@@ -6,222 +6,230 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- fieldset {
10
- padding: $padding 0;
11
- margin: 0;
12
- border: 0;
13
- border-top: 1px solid $gray-dark;
14
-
15
- &.no-legend {
9
+ @include export("form") {
10
+ fieldset {
11
+ padding: $padding 0;
12
+ margin: 0;
16
13
  border: 0;
17
- padding: 0;
18
- }
19
- }
20
-
21
- legend {
22
- font-size: 1.3rem;
23
- padding-right: $padding;
24
- }
14
+ border-top: 1px solid $gray-dark;
25
15
 
26
- select[multiple],
27
- select[size] { height: auto; }
28
-
29
- // Override normalize
30
- input[type="search"] {
31
- box-sizing: border-box;
32
- -webkit-appearance: none;
33
- }
34
-
35
- // Required values to match browser restrictions
36
- label,
37
- #{$form-class-input-static} {
38
- font-size: inherit;
39
- line-height: normal;
40
- }
16
+ &.no-legend {
17
+ border: 0;
18
+ padding: 0;
19
+ }
20
+ }
41
21
 
42
- //-------------------- Inputs --------------------//
43
-
44
- #{$form-class-input},
45
- #{$form-class-input-static},
46
- #{$form-class-input-radio},
47
- #{$form-class-input-checkbox} {
48
- @include reset-inline-block;
49
- line-height: normal;
50
- border: 1px solid $gray-dark;
51
- border-radius: 0;
52
- -webkit-appearance: none; // Remove inner shadow on iOS
53
- @include size-medium;
54
- @include is-small(true, true) { @include size-small; }
55
- @include is-large(true, true) { @include size-large; }
56
- }
22
+ legend {
23
+ font-size: 1.3rem;
24
+ padding-#{$align-opposite-direction}: $padding;
25
+ }
57
26
 
58
- #{$form-class-input} {
59
- background: $gray-lightest;
60
- border-radius: $round;
61
- transition: all $default-transition;
27
+ select[multiple],
28
+ select[size] { height: auto; }
62
29
 
63
- &:hover { border-color: $gray-darkest; }
30
+ // Override normalize
31
+ input[type="search"] {
32
+ box-sizing: border-box;
33
+ -webkit-appearance: none;
34
+ }
64
35
 
65
- &:focus {
66
- border-color: $info;
67
- outline: none;
36
+ // Required values to match browser restrictions
37
+ label,
38
+ #{$form-class-input-static} {
39
+ font-size: inherit;
40
+ line-height: normal;
68
41
  }
69
42
 
70
- &[readonly] {
71
- color: $gray-darkest;
43
+ //-------------------- Inputs --------------------//
44
+
45
+ #{$form-class-input},
46
+ #{$form-class-input-static},
47
+ #{$form-class-input-radio},
48
+ #{$form-class-input-checkbox} {
49
+ @include reset-inline-block;
50
+ line-height: normal;
72
51
  border: 1px solid $gray-dark;
52
+ border-radius: 0;
53
+ -webkit-appearance: none; // Remove inner shadow on iOS
54
+ @include size-medium;
55
+ @include is-small(true, true) { @include size-small; }
56
+ @include is-large(true, true) { @include size-large; }
73
57
  }
74
58
 
75
- &.is-disabled,
76
- &[disabled],
77
- option[disabled],
78
- optgroup[disabled] {
79
- color: $gray-darkest;
80
- border-color: $gray;
81
- }
82
- }
59
+ #{$form-class-input} {
60
+ background: $gray-lightest;
61
+ border-radius: $round;
62
+ transition: all $default-transition;
83
63
 
84
- #{$form-class-input-static} {
85
- background: transparent;
86
- border-color: transparent;
87
- padding-left: 0 !important;
88
- padding-right: 0 !important;
89
- }
64
+ &:hover { border-color: $gray-darkest; }
90
65
 
91
- #{$form-class-input-radio},
92
- #{$form-class-input-checkbox} {
93
- padding-left: 0 !important;
94
- padding-right: 0 !important;
95
- border: 0;
66
+ &:focus {
67
+ border-color: $info;
68
+ outline: none;
69
+ }
96
70
 
97
- input[type="checkbox"],
98
- input[type="radio"] {
99
- vertical-align: middle;
100
- position: relative;
101
- top: -2px;
102
- margin-right: 5px;
71
+ &[readonly] {
72
+ color: $gray-darkest;
73
+ border: 1px solid $gray-dark;
74
+ }
75
+
76
+ &.is-disabled,
77
+ &[disabled],
78
+ option[disabled],
79
+ optgroup[disabled] {
80
+ color: $gray-darkest;
81
+ border-color: $gray;
82
+ }
103
83
  }
104
84
 
105
- &.is-disabled {
106
- color: $gray-darkest;
85
+ #{$form-class-input-static} {
86
+ background: transparent;
87
+ border-color: transparent;
88
+ padding-#{$align-direction}: 0 !important;
89
+ padding-#{$align-opposite-direction}: 0 !important;
107
90
  }
108
- }
109
91
 
110
- select#{$form-class-input} {
111
- -webkit-appearance: none;
112
- -moz-appearance: none;
113
- appearance: none;
92
+ #{$form-class-input-radio},
93
+ #{$form-class-input-checkbox} {
94
+ padding-#{$align-direction}: 0 !important;
95
+ padding-#{$align-opposite-direction}: 0 !important;
96
+ border: 0;
114
97
 
115
- &[multiple] {
116
- max-height: 500px;
117
- }
98
+ input[type="checkbox"],
99
+ input[type="radio"] {
100
+ vertical-align: middle;
101
+ position: relative;
102
+ top: -2px;
103
+ margin-#{$align-opposite-direction}: 5px;
104
+ }
118
105
 
119
- &::-ms-expand {
120
- display: none;
106
+ &.is-disabled {
107
+ color: $gray-darkest;
108
+ }
121
109
  }
122
- }
123
110
 
124
- textarea#{$form-class-input} {
125
- line-height: 135%;
126
- min-height: 150px;
127
- }
111
+ select#{$form-class-input} {
112
+ -webkit-appearance: none;
113
+ -moz-appearance: none;
114
+ appearance: none;
128
115
 
129
- //-------------------- Fields, Labels --------------------//
116
+ &[multiple] {
117
+ max-height: 500px;
118
+ }
130
119
 
131
- #{$form-class-fields} {
132
- @include reset-list;
133
- }
120
+ &::-ms-expand {
121
+ display: none;
122
+ }
123
+ }
124
+
125
+ textarea#{$form-class-input} {
126
+ line-height: 135%;
127
+ min-height: 150px;
128
+ }
134
129
 
135
- #{$form-class-field},
136
- #{$form-class-fields} li {
137
- margin-bottom: $margin;
130
+ //-------------------- Fields, Labels --------------------//
138
131
 
139
- &.is-required {
140
- #{$form-class-field-label} { font-weight: bold; }
132
+ #{$form-class-fields} {
133
+ @include reset-list;
141
134
  }
142
135
 
143
- &:not(.is-disabled) {
144
- &.is-error {
145
- #{$form-class-input} {
146
- border-color: $error;
147
- }
136
+ #{$form-class-field},
137
+ #{$form-class-fields} li {
138
+ margin-bottom: $margin;
148
139
 
149
- #{$form-class-input-radio},
150
- #{$form-class-input-checkbox} {
151
- color: $error-dark;
152
- }
140
+ &.is-required {
141
+ #{$form-class-field-label} { font-weight: bold; }
153
142
  }
154
143
 
155
- &.is-success {
156
- #{$form-class-input} {
157
- border-color: $success;
144
+ &:not(.is-disabled) {
145
+ &.is-error {
146
+ #{$form-class-input} {
147
+ border-color: $error;
148
+ }
149
+
150
+ #{$form-class-input-radio},
151
+ #{$form-class-input-checkbox} {
152
+ color: $error-dark;
153
+ }
158
154
  }
159
155
 
160
- #{$form-class-input-radio},
161
- #{$form-class-input-checkbox} {
162
- color: $success-dark;
156
+ &.is-success {
157
+ #{$form-class-input} {
158
+ border-color: $success;
159
+ }
160
+
161
+ #{$form-class-input-radio},
162
+ #{$form-class-input-checkbox} {
163
+ color: $success-dark;
164
+ }
163
165
  }
164
166
  }
165
167
  }
166
- }
167
168
 
168
- #{$form-class-field-label} {
169
- display: block;
170
- vertical-align: middle;
171
- margin-bottom: .5em;
172
- }
169
+ #{$form-class-field-label} {
170
+ display: block;
171
+ vertical-align: middle;
172
+ margin-bottom: .5em;
173
+ }
173
174
 
174
- #{$form-class-field-help} {
175
- margin-top: .5em;
176
- font-size: $small-size;
177
- }
175
+ #{$form-class-field-help} {
176
+ margin-top: .5em;
177
+ font-size: $small-size;
178
+ }
178
179
 
179
- #{$form-class-actions} {
180
- text-align: center;
181
- }
180
+ #{$form-class-actions} {
181
+ text-align: center;
182
+ }
182
183
 
183
- //-------------------- Modifiers --------------------//
184
+ //-------------------- Modifiers --------------------//
184
185
 
185
- @if index($form-modifiers, "horizontal") {
186
- #{$form-class-modifier-horizontal} {
187
- #{$form-class-field},
188
- #{$form-class-fields} li { @include grid-row; }
186
+ @if index($form-modifiers, "horizontal") {
187
+ #{$form-class-modifier-horizontal} {
188
+ #{$form-class-field},
189
+ #{$form-class-fields} li { @include grid-row; }
189
190
 
190
- #{$form-class-field-label} {
191
- text-align: right;
192
- border: 1px solid transparent; // matches input sizes
193
- padding-top: $medium-padding;
194
- }
191
+ #{$form-class-field-label} {
192
+ text-align: $align-opposite-direction;
193
+ border: 1px solid transparent; // matches input sizes
194
+ padding-top: $medium-padding;
195
+ }
195
196
 
196
- #{$form-class-field-column} { padding-left: $margin; }
197
+ #{$form-class-field-column} {
198
+ padding-#{$align-direction}: $margin;
199
+ text-align: $align-direction;
200
+ }
201
+ }
197
202
  }
198
- }
199
-
200
- @if index($form-modifiers, "inline") {
201
- #{$form-class-modifier-inline} {
202
- margin-bottom: -($margin / 2);
203
203
 
204
- #{$form-class-field},
205
- #{$form-class-fields} li,
206
- #{$form-class-field-label},
207
- #{$form-class-actions},
208
- fieldset {
209
- display: inline-block;
210
- vertical-align: middle;
211
- line-height: normal;
212
- margin-right: $margin;
213
- margin-bottom: $margin / 2;
214
- }
204
+ @if index($form-modifiers, "inline") {
205
+ #{$form-class-modifier-inline} {
206
+ margin-bottom: -($margin / 2);
207
+
208
+ #{$form-class-field},
209
+ #{$form-class-fields} li,
210
+ #{$form-class-field-label},
211
+ #{$form-class-actions},
212
+ fieldset {
213
+ display: inline-block;
214
+ vertical-align: middle;
215
+ line-height: normal;
216
+ margin-#{$align-opposite-direction}: $margin;
217
+ margin-bottom: $margin / 2;
218
+ }
215
219
 
216
- fieldset {
217
- border: 0;
218
- margin: 0;
219
- padding: 0;
220
- }
220
+ fieldset {
221
+ border: 0;
222
+ margin: 0;
223
+ padding: 0;
224
+ }
221
225
 
222
- #{$form-class-field-label} { margin: 0 ($margin / 2) 0 0; }
226
+ #{$form-class-field-label} {
227
+ margin: 0;
228
+ margin-#{$align-opposite-direction}: ($margin / 2);
229
+ }
223
230
 
224
- legend,
225
- #{$form-class-field-help} { display: none; }
231
+ legend,
232
+ #{$form-class-field-help} { display: none; }
233
+ }
226
234
  }
227
- }
235
+ }
data/scss/toolkit/components/grid.scss CHANGED
@@ -6,50 +6,52 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- // Row wrapper
10
- #{$grid-class} {
11
- @include grid-row();
12
- }
9
+ @include export("grid") {
10
+ // Row wrapper
11
+ #{$grid-class} {
12
+ @include grid-row();
13
+ }
13
14
 
14
- // These should be the same for all sizes
15
- #{$grid-class-column}[class*="span-"] {
16
- @include grid-column();
17
- }
15
+ // These should be the same for all sizes
16
+ #{$grid-class-column}[class*="span-"] {
17
+ @include grid-column();
18
+ }
18
19
 
19
- // Global Push and pull classes
20
- @if $grid-push-pull {
21
- @for $i from 1 through 12 {
22
- $span: grid-span($i, 12);
20
+ // Global Push and pull classes
21
+ @if $grid-push-pull {
22
+ @for $i from 1 through 12 {
23
+ $span: grid-span($i, 12);
23
24
 
24
- .push-#{$i} { left: $span; }
25
- .pull-#{$i} { right: $span; }
25
+ .push-#{$i} { #{$align-direction}: $span; }
26
+ .pull-#{$i} { #{$align-opposite-direction}: $span; }
27
+ }
26
28
  }
27
- }
28
29
 
29
- // Grid sizes
30
- @each $size, $options in $grid-sizes {
31
- $size-columns: nth($options, 1);
30
+ // Responsive sizes
31
+ @each $size, $options in $grid-sizes {
32
+ $size-columns: nth($options, 1);
32
33
 
33
- @include in-range(nth($options, 2)) {
34
- #{$grid-class-column}[class*="#{$size}-"] {
35
- @include grid-column;
36
- }
34
+ @include in-range(nth($options, 2)) {
35
+ #{$grid-class-column}[class*="#{$size}-"] {
36
+ @include grid-column;
37
+ }
37
38
 
38
- @for $i from 1 through $size-columns {
39
- $span: grid-span($i, $size-columns);
39
+ @for $i from 1 through $size-columns {
40
+ $span: grid-span($i, $size-columns);
40
41
 
41
- #{$grid-class-column}.#{$size}-#{$i} { width: $span; }
42
+ #{$grid-class-column}.#{$size}-#{$i} { width: $span; }
42
43
 
43
- @if $grid-push-pull {
44
- #{$grid-class-column}.#{$size}-push-#{$i} { left: $span; }
45
- #{$grid-class-column}.#{$size}-pull-#{$i} { right: $span; }
44
+ @if $grid-push-pull {
45
+ .#{$size}-push-#{$i} { #{$align-direction}: $span; }
46
+ .#{$size}-pull-#{$i} { #{$align-opposite-direction}: $span; }
47
+ }
46
48
  }
47
49
  }
48
50
  }
49
- }
50
51
 
51
- // End capping
52
- #{$grid-class-column}#{$grid-class-end} {
53
- margin-right: 0 !important;
54
- float: right !important;
55
- }
52
+ // End capping
53
+ #{$grid-class-column}#{$grid-class-end} {
54
+ margin-#{$align-opposite-direction}: 0 !important;
55
+ float: $align-opposite-direction !important;
56
+ }
57
+ }