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
@@ -9,6 +9,10 @@
9
9
  // Use border-box for everything
10
10
  *, *::after, *::before { box-sizing: border-box; }
11
11
 
12
+ // RTL
13
+ *[dir="rtl"], .rtl { direction: rtl; unicode-bidi: embed; }
14
+ bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
15
+
12
16
  // Alignment
13
17
  .align-left { text-align: left; }
14
18
  .align-center { text-align: center; }
@@ -29,6 +33,13 @@
29
33
  .no-scroll { overflow: hidden !important; }
30
34
  .no-transition { transition: none !important; }
31
35
 
36
+ .fluid {
37
+ display: block;
38
+ width: 100%;
39
+ height: auto;
40
+ max-width: 100%;
41
+ }
42
+
32
43
  .sr-only {
33
44
  position: absolute;
34
45
  width: 1px;
@@ -137,4 +148,4 @@
137
148
  // Sizes
138
149
  @for $i from 1 through 12 {
139
150
  .span-#{$i} { width: grid-span($i, 12); }
140
- }
151
+ }
@@ -6,24 +6,26 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$accordion-class} {
10
- @include reset-list;
11
- }
9
+ @include export("accordion") {
10
+ #{$accordion-class} {
11
+ @include reset-list;
12
+ }
12
13
 
13
- #{$accordion-class-header} {
14
- padding: $padding;
15
- cursor: pointer;
16
- }
14
+ #{$accordion-class-header} {
15
+ padding: $padding;
16
+ cursor: pointer;
17
+ }
17
18
 
18
- #{$accordion-class-body} {
19
- padding: $padding;
20
- }
19
+ #{$accordion-class-body} {
20
+ padding: $padding;
21
+ }
21
22
 
22
- // Section is used for animations, do not style it!
23
- #{$accordion-class-section} {
24
- overflow: hidden;
25
- position: relative;
26
- transition: all $accordion-transition ease-in-out;
23
+ // Section is used for animations, do not style it!
24
+ #{$accordion-class-section} {
25
+ overflow: hidden;
26
+ position: relative;
27
+ transition: all $accordion-transition ease-in-out;
27
28
 
28
- &.hide { max-height: 0; } // Don't include on base styles
29
- }
29
+ &.hide { max-height: 0; } // Don't include on base styles
30
+ }
31
+ }
@@ -6,26 +6,28 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$blackout-class} {
10
- @include full-screen();
11
- z-index: $blackout-zindex;
12
- opacity: 0;
13
- visibility: hidden;
14
- background: black($blackout-opacity);
9
+ @include export("blackout") {
10
+ #{$blackout-class} {
11
+ @include full-screen();
12
+ z-index: $blackout-zindex;
13
+ opacity: 0;
14
+ visibility: hidden;
15
+ background: black($blackout-opacity);
15
16
 
16
- // Using visibility transition also causes weirdness
17
- transition: opacity $blackout-transition;
17
+ // Using visibility transition also causes weirdness
18
+ transition: opacity $blackout-transition;
18
19
 
19
- // This fixes issues in Chrome where the blackout properties are visible/block
20
- // But the blackout is still not visible by the client IRL
21
- -webkit-backface-visibility: hidden;
20
+ // This fixes issues in Chrome where the blackout properties are visible/block
21
+ // But the blackout is still not visible by the client IRL
22
+ -webkit-backface-visibility: hidden;
22
23
 
23
- #{$loader-class} {
24
- @include position-center;
25
- opacity: 1;
26
- color: #fff;
24
+ #{$loader-class} {
25
+ @include position-center;
26
+ opacity: 1;
27
+ color: #fff;
27
28
 
28
- > span,
29
- #{$loader-class-spinner} > span { background: #fff !important; }
29
+ > span,
30
+ #{$loader-class-spinner} > span { background: #fff !important; }
31
+ }
30
32
  }
31
- }
33
+ }
@@ -6,52 +6,53 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$breadcrumb-class} {
10
- text-align: left;
11
- margin: $margin 0;
9
+ @include export("breadcrumb") {
10
+ #{$breadcrumb-class} {
11
+ margin: $margin 0;
12
12
 
13
- ul, ol {
14
- @include reset-list;
15
- @include clear-fix;
16
- }
17
-
18
- li {
19
- position: relative;
20
- float: left;
21
-
22
- &:last-child {
23
- .caret { display: none; }
13
+ ul, ol {
14
+ @include reset-list;
15
+ @include clear-fix;
24
16
  }
25
- }
26
-
27
- a {
28
- @include size-medium;
29
- display: block;
30
- line-height: 100%;
31
- padding-right: 0;
32
17
 
33
- .caret {
34
- margin-left: $medium-padding;
18
+ li {
35
19
  position: relative;
36
- left: -1px;
20
+ float: $align-direction;
21
+
22
+ &:last-child {
23
+ .caret { display: none; }
24
+ }
37
25
  }
38
- }
39
26
 
40
- @include is-small {
41
27
  a {
42
- @include size-small;
43
- padding-right: 0;
28
+ @include size-medium;
29
+ display: block;
30
+ line-height: 100%;
31
+ padding-#{$align-opposite-direction}: 0;
32
+
33
+ .caret {
34
+ margin-#{$align-direction}: $medium-padding;
35
+ position: relative;
36
+ #{$align-direction}: -1px;
37
+ }
38
+ }
39
+
40
+ @include is-small {
41
+ a {
42
+ @include size-small;
43
+ padding-#{$align-opposite-direction}: 0;
44
44
 
45
- .caret { margin-left: $small-padding; }
45
+ .caret { margin-#{$align-direction}: $small-padding; }
46
+ }
46
47
  }
47
- }
48
48
 
49
- @include is-large {
50
- a {
51
- @include size-large;
52
- padding-right: 0;
49
+ @include is-large {
50
+ a {
51
+ @include size-large;
52
+ padding-#{$align-opposite-direction}: 0;
53
53
 
54
- .caret { margin-left: $large-padding; }
54
+ .caret { margin-#{$align-direction}: $large-padding; }
55
+ }
55
56
  }
56
57
  }
57
- }
58
+ }
@@ -6,123 +6,43 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$buttonGroup-class} {
10
- @include reset-inline-block;
11
- @include reset-list;
12
- @include clear-fix;
13
- white-space: nowrap;
14
-
15
- > li,
16
- > #{$button-class} {
17
- float: left;
18
- border-radius: 0;
19
-
20
- &:hover,
21
- &.is-active { z-index: 1; }
22
- }
23
-
24
- > li {
25
- position: relative;
26
- list-style: none;
9
+ @include export("button-group") {
10
+ #{$buttonGroup-class} {
11
+ @include reset-inline-block;
12
+ @include reset-list;
13
+ @include clear-fix;
14
+ white-space: nowrap;
27
15
 
28
- #{$button-class} {
29
- display: block;
16
+ > li,
17
+ > #{$button-class} {
18
+ float: $align-direction;
30
19
  border-radius: 0;
31
- }
32
- }
33
-
34
- //----- Effects -----//
35
-
36
- &#{$shape-round-class} {
37
- @include button-group-first-child {
38
- border-top-left-radius: $round;
39
- border-bottom-left-radius: $round;
40
- }
41
20
 
42
- @include button-group-last-child {
43
- border-top-right-radius: $round;
44
- border-bottom-right-radius: $round;
45
- }
46
- }
47
-
48
- @if index($buttonGroup-effects, "pill") {
49
- &#{$shape-pill-class} {
50
- border-radius: $pill;
51
-
52
- @include button-group-first-child {
53
- border-top-left-radius: $pill;
54
- border-bottom-left-radius: $pill;
55
- }
56
-
57
- @include button-group-last-child {
58
- border-top-right-radius: $pill;
59
- border-bottom-right-radius: $pill;
60
- }
21
+ &:hover,
22
+ &.is-active { z-index: 1; }
61
23
  }
62
- }
63
24
 
64
- @if index($buttonGroup-effects, "skew") {
65
- &#{$shape-skew-class} {
66
- border-top-left-radius: $skew;
67
- border-top-right-radius: $skew;
68
- border-bottom-left-radius: 0;
69
- border-bottom-right-radius: 0;
25
+ > li {
26
+ position: relative;
27
+ list-style: none;
70
28
 
71
- @include button-group-first-child {
72
- border-top-left-radius: $skew;
73
- border-bottom-left-radius: 0;
29
+ #{$button-class} {
30
+ display: block;
31
+ border-radius: 0;
74
32
  }
75
-
76
- @include button-group-last-child {
77
- border-top-right-radius: $skew;
78
- border-bottom-right-radius: 0;
79
- }
80
- }
81
- }
82
- }
83
-
84
- // Space out groups
85
- #{$buttonGroup-class} + #{$buttonGroup-class} {
86
- margin-left: $margin;
87
- }
88
-
89
- //-------------------- Modifiers --------------------//
90
-
91
- @if index($buttonGroup-modifiers, "vertical") {
92
- #{$buttonGroup-class-modifier-vertical} {
93
- vertical-align: top;
94
-
95
- > li,
96
- > #{$button-class} {
97
- float: none;
98
- display: block;
99
- width: 100%;
100
- max-width: 100%;
101
-
102
- &:hover { z-index: 1; }
103
- }
104
-
105
- &#{$shape-round-class},
106
- &#{$shape-pill-class},
107
- &#{$shape-skew-class},
108
- &#{$shape-skew-class}-reverse {
109
- #{$button-class} { border-radius: 0; }
110
33
  }
111
34
 
112
35
  //----- Effects -----//
113
36
 
114
37
  &#{$shape-round-class} {
115
- #{$button-class}:first-child,
116
- #{$button-class}:last-child { border-radius: 0; }
117
-
118
38
  @include button-group-first-child {
119
- border-top-left-radius: $round;
120
- border-top-right-radius: $round;
39
+ border-top-#{$align-direction}-radius: $round;
40
+ border-bottom-#{$align-direction}-radius: $round;
121
41
  }
122
42
 
123
43
  @include button-group-last-child {
124
- border-bottom-left-radius: $round;
125
- border-bottom-right-radius: $round;
44
+ border-top-#{$align-opposite-direction}-radius: $round;
45
+ border-bottom-#{$align-opposite-direction}-radius: $round;
126
46
  }
127
47
  }
128
48
 
@@ -131,61 +51,143 @@
131
51
  border-radius: $pill;
132
52
 
133
53
  @include button-group-first-child {
134
- border-top-left-radius: $pill;
135
- border-top-right-radius: $pill;
136
- border-bottom-left-radius: 0;
137
- border-bottom-right-radius: 0;
54
+ border-top-#{$align-direction}-radius: $pill;
55
+ border-bottom-#{$align-direction}-radius: $pill;
138
56
  }
139
57
 
140
58
  @include button-group-last-child {
141
- border-top-left-radius: 0;
142
- border-top-right-radius: 0;
143
- border-bottom-left-radius: $pill;
144
- border-bottom-right-radius: $pill;
59
+ border-top-#{$align-opposite-direction}-radius: $pill;
60
+ border-bottom-#{$align-opposite-direction}-radius: $pill;
145
61
  }
146
62
  }
147
63
  }
148
64
 
149
65
  @if index($buttonGroup-effects, "skew") {
150
66
  &#{$shape-skew-class} {
151
- border-top-left-radius: $skew-y 1.5rem;
152
- border-bottom-left-radius: $skew-y 1.5rem;
67
+ border-top-#{$align-direction}-radius: $skew;
68
+ border-top-#{$align-opposite-direction}-radius: $skew;
69
+ border-bottom-#{$align-direction}-radius: 0;
70
+ border-bottom-#{$align-opposite-direction}-radius: 0;
153
71
 
154
72
  @include button-group-first-child {
155
- border-top-left-radius: $skew-reverse;
73
+ border-top-#{$align-direction}-radius: $skew;
74
+ border-bottom-#{$align-direction}-radius: 0;
156
75
  }
157
76
 
158
77
  @include button-group-last-child {
159
- border-bottom-left-radius: $skew-reverse;
160
- border-top-right-radius: 0;
78
+ border-top-#{$align-opposite-direction}-radius: $skew;
79
+ border-bottom-#{$align-opposite-direction}-radius: 0;
161
80
  }
162
81
  }
82
+ }
83
+ }
84
+
85
+ // Space out groups
86
+ #{$buttonGroup-class} + #{$buttonGroup-class} {
87
+ margin-#{$align-direction}: $margin;
88
+ }
89
+
90
+ //-------------------- Modifiers --------------------//
163
91
 
92
+ @if index($buttonGroup-modifiers, "vertical") {
93
+ #{$buttonGroup-class-modifier-vertical} {
94
+ vertical-align: top;
95
+
96
+ > li,
97
+ > #{$button-class} {
98
+ float: none;
99
+ display: block;
100
+ width: 100%;
101
+ max-width: 100%;
102
+
103
+ &:hover { z-index: 1; }
104
+ }
105
+
106
+ &#{$shape-round-class},
107
+ &#{$shape-pill-class},
108
+ &#{$shape-skew-class},
164
109
  &#{$shape-skew-class}-reverse {
165
- border-top-right-radius: $skew-y 1.25rem;
166
- border-bottom-right-radius: $skew-y 1.25rem;
110
+ #{$button-class} { border-radius: 0; }
111
+ }
112
+
113
+ //----- Effects -----//
114
+
115
+ &#{$shape-round-class} {
116
+ #{$button-class}:first-child,
117
+ #{$button-class}:last-child { border-radius: 0; }
167
118
 
168
119
  @include button-group-first-child {
169
- border-top-right-radius: $skew-reverse;
120
+ border-top-#{$align-direction}-radius: $round;
121
+ border-top-#{$align-opposite-direction}-radius: $round;
170
122
  }
171
123
 
172
124
  @include button-group-last-child {
173
- border-bottom-right-radius: $skew-reverse;
125
+ border-bottom-#{$align-direction}-radius: $round;
126
+ border-bottom-#{$align-opposite-direction}-radius: $round;
127
+ }
128
+ }
129
+
130
+ @if index($buttonGroup-effects, "pill") {
131
+ &#{$shape-pill-class} {
132
+ border-radius: $pill;
133
+
134
+ @include button-group-first-child {
135
+ border-top-#{$align-direction}-radius: $pill;
136
+ border-top-#{$align-opposite-direction}-radius: $pill;
137
+ border-bottom-#{$align-direction}-radius: 0;
138
+ border-bottom-#{$align-opposite-direction}-radius: 0;
139
+ }
140
+
141
+ @include button-group-last-child {
142
+ border-top-#{$align-direction}-radius: 0;
143
+ border-top-#{$align-opposite-direction}-radius: 0;
144
+ border-bottom-#{$align-direction}-radius: $pill;
145
+ border-bottom-#{$align-opposite-direction}-radius: $pill;
146
+ }
147
+ }
148
+ }
149
+
150
+ @if index($buttonGroup-effects, "skew") {
151
+ &#{$shape-skew-class} {
152
+ border-top-#{$align-direction}-radius: $skew-y 1.5rem;
153
+ border-bottom-#{$align-direction}-radius: $skew-y 1.5rem;
154
+
155
+ @include button-group-first-child {
156
+ border-top-#{$align-direction}-radius: $skew-reverse;
157
+ }
158
+
159
+ @include button-group-last-child {
160
+ border-bottom-#{$align-direction}-radius: $skew-reverse;
161
+ border-top-#{$align-opposite-direction}-radius: 0;
162
+ }
163
+ }
164
+
165
+ &#{$shape-skew-class}-reverse {
166
+ border-top-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
167
+ border-bottom-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
168
+
169
+ @include button-group-first-child {
170
+ border-top-#{$align-opposite-direction}-radius: $skew-reverse;
171
+ }
172
+
173
+ @include button-group-last-child {
174
+ border-bottom-#{$align-opposite-direction}-radius: $skew-reverse;
175
+ }
174
176
  }
175
177
  }
176
178
  }
177
179
  }
178
- }
179
180
 
180
- @if index($buttonGroup-modifiers, "justified") {
181
- #{$buttonGroup-class-modifier-justified} {
182
- display: table;
183
- width: 100%;
181
+ @if index($buttonGroup-modifiers, "justified") {
182
+ #{$buttonGroup-class-modifier-justified} {
183
+ display: table;
184
+ width: 100%;
184
185
 
185
- > li,
186
- > #{$button-class} {
187
- float: none;
188
- display: table-cell;
186
+ > li,
187
+ > #{$button-class} {
188
+ float: none;
189
+ display: table-cell;
190
+ }
189
191
  }
190
192
  }
191
- }
193
+ }