titon-toolkit 2.0.2 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
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/notice.scss CHANGED
@@ -6,32 +6,33 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$notice-class} {
10
- margin: $margin 0;
11
- padding: $padding;
12
- text-align: left;
9
+ @include export("notice") {
10
+ #{$notice-class} {
11
+ margin: $margin 0;
12
+ padding: $padding;
13
13
 
14
- hr {
15
- border: 0;
16
- border-top: 1px solid white(.15);
17
- }
14
+ hr {
15
+ border: 0;
16
+ border-top: 1px solid white(.15);
17
+ }
18
18
 
19
- p:first-child {
20
- margin-top: 0;
19
+ p:first-child {
20
+ margin-top: 0;
21
+ }
21
22
  }
22
- }
23
23
 
24
- #{$notice-class-close} {
25
- float: right;
26
- margin-left: $margin;
27
- line-height: 1rem;
28
- padding: 5px;
29
- background: none;
30
- border: 0;
24
+ #{$notice-class-close} {
25
+ float: $align-opposite-direction;
26
+ margin-#{$align-direction}: $margin;
27
+ line-height: 1rem;
28
+ padding: 5px;
29
+ background: none;
30
+ border: 0;
31
+
32
+ & ~ p { margin: 0; }
33
+ }
31
34
 
32
- & ~ p { margin: 0; }
35
+ #{$notice-class-title} {
36
+ margin: 0 0 ($margin / 2) 0;
37
+ }
33
38
  }
34
-
35
- #{$notice-class-title} {
36
- margin: 0 0 ($margin / 2) 0;
37
- }
data/scss/toolkit/components/off-canvas.scss CHANGED
@@ -6,161 +6,163 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$offCanvas-class} {
10
- position: fixed;
11
- overflow: auto;
12
- top: 0;
13
- height: 100%;
14
- z-index: 1;
15
- opacity: 0;
16
- visibility: hidden;
17
- transition: transform $offCanvas-transition, opacity $offCanvas-transition, visibility $offCanvas-transition;
18
- -webkit-overflow-scrolling: touch;
19
- }
9
+ @include export("off-canvas") {
10
+ #{$offCanvas-class} {
11
+ position: fixed;
12
+ overflow: auto;
13
+ top: 0;
14
+ height: 100%;
15
+ z-index: 1;
16
+ opacity: 0;
17
+ visibility: hidden;
18
+ transition: transform $offCanvas-transition, opacity $offCanvas-transition, visibility $offCanvas-transition;
19
+ -webkit-overflow-scrolling: touch;
20
+ }
20
21
 
21
- #{$offCanvas-class-content} {
22
- position: relative;
23
- width: 100%;
24
- max-width: 100%;
25
- z-index: 2;
26
- transition: transform $offCanvas-transition, padding $offCanvas-transition;
27
- }
22
+ #{$offCanvas-class-content} {
23
+ position: relative;
24
+ width: 100%;
25
+ max-width: 100%;
26
+ z-index: 2;
27
+ transition: transform $offCanvas-transition, padding $offCanvas-transition;
28
+ }
28
29
 
29
- #{$offCanvas-class-wrapper} {
30
- position: relative;
31
- overflow-x: hidden;
32
- }
30
+ #{$offCanvas-class-wrapper} {
31
+ position: relative;
32
+ overflow-x: hidden;
33
+ }
33
34
 
34
- //-------------------- Modifiers --------------------//
35
+ //-------------------- Modifiers --------------------//
35
36
 
36
- #{$offCanvas-class-modifier-left} {
37
- left: 0;
38
- width: $offCanvas-left-width;
39
- transform: translate3d(-100%, 0, 0);
37
+ #{$offCanvas-class-modifier-left} {
38
+ left: 0;
39
+ width: $offCanvas-left-width;
40
+ transform: translate3d(-100%, 0, 0);
40
41
 
41
- &.show { transform: translate3d(0, 0, 0) !important; }
42
- }
42
+ &.show { transform: translate3d(0, 0, 0) !important; }
43
+ }
43
44
 
44
- #{$offCanvas-class-modifier-right} {
45
- right: 0;
46
- width: $offCanvas-right-width;
47
- transform: translate3d(100%, 0, 0);
45
+ #{$offCanvas-class-modifier-right} {
46
+ right: 0;
47
+ width: $offCanvas-right-width;
48
+ transform: translate3d(100%, 0, 0);
48
49
 
49
- &.show { transform: translate3d(0, 0, 0) !important; }
50
- }
50
+ &.show { transform: translate3d(0, 0, 0) !important; }
51
+ }
51
52
 
52
- //-------------------- Animations --------------------//
53
+ //-------------------- Animations --------------------//
53
54
 
54
- #{$offCanvas-class-wrapper} {
55
- @if index($offCanvas-animations, "on-top") or index($offCanvas-animations, "squish") {
56
- &.on-top,
57
- &.squish {
58
- #{$offCanvas-class} { z-index: 3; }
55
+ #{$offCanvas-class-wrapper} {
56
+ @if index($offCanvas-animations, "on-top") or index($offCanvas-animations, "squish") {
57
+ &.on-top,
58
+ &.squish {
59
+ #{$offCanvas-class} { z-index: 3; }
60
+ }
59
61
  }
60
- }
61
62
 
62
- @if index($offCanvas-animations, "push-reveal") {
63
- &.push-reveal {
64
- #{$offCanvas-class-modifier-left} { transform: translate3d(-50%, 0, 0); }
65
- #{$offCanvas-class-modifier-right} { transform: translate3d(50%, 0, 0); }
63
+ @if index($offCanvas-animations, "push-reveal") {
64
+ &.push-reveal {
65
+ #{$offCanvas-class-modifier-left} { transform: translate3d(-50%, 0, 0); }
66
+ #{$offCanvas-class-modifier-right} { transform: translate3d(50%, 0, 0); }
67
+ }
66
68
  }
67
- }
68
69
 
69
- @if index($offCanvas-animations, "reverse-push") {
70
- &.reverse-push {
71
- #{$offCanvas-class-modifier-left} { transform: translate3d(50%, 0, 0); }
72
- #{$offCanvas-class-modifier-right} { transform: translate3d(-50%, 0, 0); }
70
+ @if index($offCanvas-animations, "reverse-push") {
71
+ &.reverse-push {
72
+ #{$offCanvas-class-modifier-left} { transform: translate3d(50%, 0, 0); }
73
+ #{$offCanvas-class-modifier-right} { transform: translate3d(-50%, 0, 0); }
74
+ }
73
75
  }
74
- }
75
76
 
76
- @if index($offCanvas-animations, "reveal") {
77
- &.reveal {
78
- #{$offCanvas-class} { transform: translate3d(0, 0, 0); }
77
+ @if index($offCanvas-animations, "reveal") {
78
+ &.reveal {
79
+ #{$offCanvas-class} { transform: translate3d(0, 0, 0); }
80
+ }
79
81
  }
80
- }
81
82
 
82
- @if index($offCanvas-animations, "push-down") {
83
- &.push-down {
84
- #{$offCanvas-class-modifier-left},
85
- #{$offCanvas-class-modifier-right} { transform: translate3d(0, -100%, 0); }
83
+ @if index($offCanvas-animations, "push-down") {
84
+ &.push-down {
85
+ #{$offCanvas-class-modifier-left},
86
+ #{$offCanvas-class-modifier-right} { transform: translate3d(0, -100%, 0); }
87
+ }
86
88
  }
87
- }
88
89
 
89
- @if index($offCanvas-animations, "push") or
90
- index($offCanvas-animations, "push-reveal") or
91
- index($offCanvas-animations, "push-down") or
92
- index($offCanvas-animations, "reverse-push") or
93
- index($offCanvas-animations, "reveal") {
94
- &.push,
95
- &.push-reveal,
96
- &.push-down,
97
- &.reverse-push,
98
- &.reveal {
99
- &.move-left {
100
- #{$offCanvas-class-content} {
101
- transform: translate3d(-$offCanvas-right-width, 0, 0);
90
+ @if index($offCanvas-animations, "push") or
91
+ index($offCanvas-animations, "push-reveal") or
92
+ index($offCanvas-animations, "push-down") or
93
+ index($offCanvas-animations, "reverse-push") or
94
+ index($offCanvas-animations, "reveal") {
95
+ &.push,
96
+ &.push-reveal,
97
+ &.push-down,
98
+ &.reverse-push,
99
+ &.reveal {
100
+ &.move-left {
101
+ #{$offCanvas-class-content} {
102
+ transform: translate3d(-$offCanvas-right-width, 0, 0);
103
+ }
102
104
  }
103
- }
104
105
 
105
- &.move-right {
106
- #{$offCanvas-class-content} {
107
- transform: translate3d($offCanvas-left-width, 0, 0);
106
+ &.move-right {
107
+ #{$offCanvas-class-content} {
108
+ transform: translate3d($offCanvas-left-width, 0, 0);
109
+ }
108
110
  }
109
111
  }
110
112
  }
111
- }
112
113
 
113
- @if index($offCanvas-animations, "squish") {
114
- &.squish {
115
- &.move-left {
116
- #{$offCanvas-class-content} {
117
- padding-right: $offCanvas-right-width;
114
+ @if index($offCanvas-animations, "squish") {
115
+ &.squish {
116
+ &.move-left {
117
+ #{$offCanvas-class-content} {
118
+ padding-right: $offCanvas-right-width;
119
+ }
118
120
  }
119
- }
120
121
 
121
- &.move-right {
122
- #{$offCanvas-class-content} {
123
- padding-left: $offCanvas-left-width;
122
+ &.move-right {
123
+ #{$offCanvas-class-content} {
124
+ padding-left: $offCanvas-left-width;
125
+ }
124
126
  }
125
127
  }
126
128
  }
127
129
  }
128
- }
129
130
 
130
- //-------------------- Responsive --------------------//
131
+ //-------------------- Responsive --------------------//
131
132
 
132
- @include if-max($offCanvas-mobile-breakpoint) {
133
- #{$offCanvas-class-modifier-left} {
134
- width: $offCanvas-left-width-mobile;
135
- }
133
+ @include if-max($offCanvas-mobile-breakpoint) {
134
+ #{$offCanvas-class-modifier-left} {
135
+ width: $offCanvas-left-width-mobile;
136
+ }
136
137
 
137
- #{$offCanvas-class-modifier-right} {
138
- width: $offCanvas-right-width-mobile;
139
- }
138
+ #{$offCanvas-class-modifier-right} {
139
+ width: $offCanvas-right-width-mobile;
140
+ }
140
141
 
141
- @if index($offCanvas-animations, "push") or
142
- index($offCanvas-animations, "push-reveal") or
143
- index($offCanvas-animations, "push-down") or
144
- index($offCanvas-animations, "reverse-push") or
145
- index($offCanvas-animations, "reveal") {
146
- #{$offCanvas-class-wrapper} {
147
- &.push,
148
- &.push-reveal,
149
- &.push-down,
150
- &.reverse-push,
151
- &.reveal {
152
- &.move-left {
153
- #{$offCanvas-class-content} {
154
- transform: translate3d(-$offCanvas-right-width-mobile, 0, 0);
142
+ @if index($offCanvas-animations, "push") or
143
+ index($offCanvas-animations, "push-reveal") or
144
+ index($offCanvas-animations, "push-down") or
145
+ index($offCanvas-animations, "reverse-push") or
146
+ index($offCanvas-animations, "reveal") {
147
+ #{$offCanvas-class-wrapper} {
148
+ &.push,
149
+ &.push-reveal,
150
+ &.push-down,
151
+ &.reverse-push,
152
+ &.reveal {
153
+ &.move-left {
154
+ #{$offCanvas-class-content} {
155
+ transform: translate3d(-$offCanvas-right-width-mobile, 0, 0);
156
+ }
155
157
  }
156
- }
157
158
 
158
- &.move-right {
159
- #{$offCanvas-class-content} {
160
- transform: translate3d($offCanvas-left-width-mobile, 0, 0);
159
+ &.move-right {
160
+ #{$offCanvas-class-content} {
161
+ transform: translate3d($offCanvas-left-width-mobile, 0, 0);
162
+ }
161
163
  }
162
164
  }
163
165
  }
164
166
  }
165
167
  }
166
- }
168
+ }
data/scss/toolkit/components/pagination.scss CHANGED
@@ -6,103 +6,127 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$pagination-class} {
10
- margin: $margin 0;
9
+ @include export("pagination") {
10
+ #{$pagination-class} {
11
+ margin: $margin 0;
11
12
 
12
- ol {
13
- @include reset-list;
14
- @include clear-fix;
13
+ ol {
14
+ @include reset-list;
15
+ @include clear-fix;
15
16
 
16
- > li {
17
- position: relative;
18
- float: left;
19
- margin-right: $padding / 2;
17
+ > li {
18
+ position: relative;
19
+ float: $align-direction;
20
+ margin-#{$align-opposite-direction}: $padding / 2;
20
21
 
21
- > a {
22
- display: block;
23
- }
22
+ > a {
23
+ display: block;
24
+ }
24
25
 
25
- &.is-active {
26
- z-index: 1;
26
+ &.is-active {
27
+ z-index: 1;
28
+ }
27
29
  }
28
30
  }
29
31
  }
30
- }
31
32
 
32
- //-------------------- Modifiers --------------------//
33
+ //-------------------- Modifiers --------------------//
33
34
 
34
- @if index($pagination-modifiers, "grouped") {
35
- #{$pagination-class-modifier-grouped} {
36
- ol > li {
37
- margin: 0;
35
+ @if index($pagination-modifiers, "grouped") {
36
+ #{$pagination-class-modifier-grouped} {
37
+ ol > li {
38
+ margin: 0;
38
39
 
39
- &:hover,
40
- > a:hover { z-index: 1; }
40
+ &:hover,
41
+ > a:hover { z-index: 1; }
41
42
 
42
- > a {
43
- margin: 0;
44
- border-radius: 0;
43
+ > a {
44
+ margin: 0;
45
+ border-radius: 0;
46
+ }
45
47
  }
46
- }
47
48
 
48
- //----- Effects -----//
49
+ //----- Effects -----//
49
50
 
50
- &#{$shape-round-class} ol {
51
- border-radius: $round;
51
+ &#{$shape-round-class} ol {
52
+ border-radius: $round;
52
53
 
53
- > li:first-child > a {
54
- border-top-left-radius: $round;
55
- border-bottom-left-radius: $round;
56
- }
54
+ > li:first-child > a {
55
+ border-top-#{$align-direction}-radius: $round;
56
+ border-bottom-#{$align-direction}-radius: $round;
57
+ }
57
58
 
58
- > li:last-child > a {
59
- border-top-right-radius: $round;
60
- border-bottom-right-radius: $round;
59
+ > li:last-child > a {
60
+ border-top-#{$align-opposite-direction}-radius: $round;
61
+ border-bottom-#{$align-opposite-direction}-radius: $round;
62
+ }
61
63
  }
62
- }
63
64
 
64
- @if index($pagination-effects, "oval") {
65
- &#{$shape-oval-class} ol {
66
- border-radius: #{$oval-x} / #{$oval-y};
65
+ @if index($pagination-effects, "oval") {
66
+ &#{$shape-oval-class} ol {
67
+ border-radius: #{$oval-x} / #{$oval-y};
67
68
 
68
- > li:first-child a {
69
- border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
70
- }
69
+ @if $text-direction == rtl {
70
+ > li:first-child a {
71
+ border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
72
+ }
73
+
74
+ > li:last-child a {
75
+ border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
76
+ }
71
77
 
72
- > li:last-child a {
73
- border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
78
+ } @else {
79
+ > li:first-child a {
80
+ border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
81
+ }
82
+
83
+ > li:last-child a {
84
+ border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
85
+ }
86
+ }
74
87
  }
75
88
  }
76
- }
77
89
 
78
- @if index($pagination-effects, "pill") {
79
- &#{$shape-pill-class} ol {
80
- border-radius: $pill;
90
+ @if index($pagination-effects, "pill") {
91
+ &#{$shape-pill-class} ol {
92
+ border-radius: $pill;
81
93
 
82
- > li:first-child a {
83
- border-top-left-radius: $pill;
84
- border-bottom-left-radius: $pill;
85
- }
94
+ > li:first-child a {
95
+ border-top-#{$align-direction}-radius: $pill;
96
+ border-bottom-#{$align-direction}-radius: $pill;
97
+ }
86
98
 
87
- > li:last-child a {
88
- border-top-right-radius: $pill;
89
- border-bottom-right-radius: $pill;
99
+ > li:last-child a {
100
+ border-top-#{$align-opposite-direction}-radius: $pill;
101
+ border-bottom-#{$align-opposite-direction}-radius: $pill;
102
+ }
90
103
  }
91
104
  }
92
- }
93
105
 
94
- @if index($pagination-effects, "skew") {
95
- &#{$shape-skew-class} ol {
96
- border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
106
+ @if index($pagination-effects, "skew") {
107
+ &#{$shape-skew-class} ol {
108
+ border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
97
109
 
98
- > li:first-child a {
99
- border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
100
- }
110
+ @if $text-direction == rtl {
111
+ > li:first-child a {
112
+ border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
113
+ }
114
+
115
+ > li:last-child a {
116
+ border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
117
+ }
101
118
 
102
- > li:last-child a {
103
- border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
119
+ } @else {
120
+ > li:first-child a {
121
+ border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
122
+ }
123
+
124
+ > li:last-child a {
125
+ border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
126
+ }
127
+ }
104
128
  }
105
129
  }
106
130
  }
107
131
  }
108
- }
132
+ }