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/step.scss CHANGED
@@ -6,60 +6,67 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$step-class-wrapper} {
10
- margin: $margin 0;
11
- font-size: $medium-size;
9
+ @include export("step") {
10
+ #{$step-class-wrapper} {
11
+ margin: $margin 0;
12
+ font-size: $medium-size;
12
13
 
13
- ol {
14
- @include reset-list;
15
- display: inline-block;
16
- overflow: hidden;
17
- @include clear-fix;
18
- }
14
+ ol {
15
+ @include reset-list;
16
+ display: inline-block;
17
+ overflow: hidden;
18
+ @include clear-fix;
19
+ }
19
20
 
20
- // Use em's to scale against the size defined on .steps
21
- #{$step-class} {
22
- padding: 0 2em 0 3.5em;
23
- position: relative;
24
- display: block;
25
- line-height: 3em;
26
- height: 3em;
21
+ // Use em's to scale against the size defined on .steps
22
+ #{$step-class} {
23
+ padding-#{$align-direction}: 3.5em;
24
+ padding-#{$align-opposite-direction}: 2em;
25
+ position: relative;
26
+ display: block;
27
+ line-height: 3em;
28
+ height: 3em;
27
29
 
28
- // Golden ratio? Seems to work for all font sizes in *most* browsers
29
- &::after {
30
- height: 2.165em;
31
- width: 2.165em;
32
- top: 0.425em;
33
- right: -1.1em;
34
- position: absolute;
35
- z-index: 2;
36
- content: "";
37
- transform: rotate(-45deg);
30
+ // Golden ratio? Seems to work for all font sizes in *most* browsers
31
+ &::after {
32
+ height: 2.165em;
33
+ width: 2.165em;
34
+ top: 0.425em;
35
+ #{$align-opposite-direction}: -1.1em;
36
+ position: absolute;
37
+ z-index: 2;
38
+ content: "";
39
+ @if $text-direction == ltr {
40
+ transform: rotate(315deg);
41
+ } @else {
42
+ transform: rotate(135deg);
43
+ }
44
+ }
38
45
  }
39
- }
40
46
 
41
- li {
42
- @include reset-inline-block;
43
- float: left;
47
+ li {
48
+ @include reset-inline-block;
49
+ float: $align-direction;
44
50
 
45
- &:first-child {
46
- #{$step-class} {
47
- padding-left: 2em;
51
+ &:first-child {
52
+ #{$step-class} {
53
+ padding-#{$align-direction}: 2em;
54
+ }
48
55
  }
49
- }
50
56
 
51
- &:last-child {
52
- #{$step-class} {
53
- &::after { display: none; }
57
+ &:last-child {
58
+ #{$step-class} {
59
+ &::after { display: none; }
60
+ }
54
61
  }
55
62
  }
56
- }
57
63
 
58
- @include is-small {
59
- font-size: $small-size;
60
- }
64
+ @include is-small {
65
+ font-size: $small-size;
66
+ }
61
67
 
62
- @include is-large {
63
- font-size: $large-size;
68
+ @include is-large {
69
+ font-size: $large-size;
70
+ }
64
71
  }
65
- }
72
+ }
data/scss/toolkit/components/switch.scss CHANGED
@@ -6,132 +6,135 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$switch-class} {
10
- @include reset-inline-block;
11
- font-size: 0;
12
- width: 100px;
13
- cursor: pointer;
14
-
15
- &.is-disabled {
16
- opacity: $disabled-opacity;
17
- }
9
+ @include export("switch") {
10
+ #{$switch-class} {
11
+ @include reset-inline-block;
12
+ font-size: 0;
13
+ width: 100px;
14
+ cursor: pointer;
15
+
16
+ &.is-disabled {
17
+ opacity: $disabled-opacity;
18
+ }
18
19
 
19
- input {
20
- display: none;
20
+ input {
21
+ display: none;
21
22
 
22
- &:checked + #{$switch-class-bar} {
23
- #{$switch-class-toggle} {
24
- left: 50%;
25
- }
23
+ &:checked + #{$switch-class-bar} {
24
+ #{$switch-class-toggle} {
25
+ left: 50%;
26
+ }
26
27
 
27
- &::before { opacity: 1; }
28
- &::after { opacity: 0; }
28
+ &::before { opacity: 1; }
29
+ &::after { opacity: 0; }
30
+ }
29
31
  }
30
- }
31
32
 
32
- @include is-small() {
33
- width: 70px;
33
+ @include is-small() {
34
+ width: 70px;
35
+
36
+ #{$switch-class-bar} {
37
+ font-size: $small-size;
34
38
 
35
- #{$switch-class-bar} {
36
- font-size: $small-size;
39
+ &::before,
40
+ &::after {
41
+ padding: $small-padding;
42
+ }
43
+ }
37
44
 
38
- &::before,
39
- &::after {
45
+ #{$switch-class-toggle} {
40
46
  padding: $small-padding;
41
47
  }
42
48
  }
43
49
 
44
- #{$switch-class-toggle} {
45
- padding: $small-padding;
46
- }
47
- }
50
+ @include is-large() {
51
+ width: 130px;
48
52
 
49
- @include is-large() {
50
- width: 130px;
53
+ #{$switch-class-bar} {
54
+ font-size: $large-size;
51
55
 
52
- #{$switch-class-bar} {
53
- font-size: $large-size;
56
+ &::before,
57
+ &::after {
58
+ padding: $large-padding;
59
+ }
60
+ }
54
61
 
55
- &::before,
56
- &::after {
62
+ #{$switch-class-toggle} {
57
63
  padding: $large-padding;
58
64
  }
59
65
  }
60
-
61
- #{$switch-class-toggle} {
62
- padding: $large-padding;
63
- }
64
66
  }
65
- }
66
-
67
- #{$switch-class-bar} {
68
- display: block;
69
- position: relative;
70
- font-size: $medium-size;
71
- transition: background $switch-transition;
72
67
 
73
- &::before,
74
- &::after {
75
- position: absolute;
76
- padding: $medium-padding;
77
- top: 0;
78
- opacity: 1;
79
- z-index: 1;
80
- transition: opacity $switch-transition;
81
- }
82
-
83
- &::before {
84
- left: 0;
85
- opacity: 0;
86
- content: attr(data-switch-on);
87
- }
88
-
89
- &::after {
90
- right: 0;
91
- content: attr(data-switch-off);
92
- }
68
+ #{$switch-class-bar} {
69
+ display: block;
70
+ position: relative;
71
+ font-size: $medium-size;
72
+ transition: background $switch-transition;
73
+ text-align: left;
74
+
75
+ &::before,
76
+ &::after {
77
+ position: absolute;
78
+ padding: $medium-padding;
79
+ top: 0;
80
+ opacity: 1;
81
+ z-index: 1;
82
+ transition: opacity $switch-transition;
83
+ }
93
84
 
94
- //----- Effects -----//
85
+ &::before {
86
+ left: 0;
87
+ opacity: 0;
88
+ content: attr(data-switch-on);
89
+ }
95
90
 
96
- &#{$shape-round-class} {
97
- #{$switch-class-toggle} {
98
- border-radius: $round - 0.02;
91
+ &::after {
92
+ right: 0;
93
+ content: attr(data-switch-off);
99
94
  }
100
- }
101
95
 
102
- @if index($switch-effects, "pill") {
103
- &#{$shape-pill-class} {
104
- border-radius: $pill;
96
+ //----- Effects -----//
105
97
 
98
+ &#{$shape-round-class} {
106
99
  #{$switch-class-toggle} {
100
+ border-radius: $round - 0.02;
101
+ }
102
+ }
103
+
104
+ @if index($switch-effects, "pill") {
105
+ &#{$shape-pill-class} {
107
106
  border-radius: $pill;
107
+
108
+ #{$switch-class-toggle} {
109
+ border-radius: $pill;
110
+ }
108
111
  }
109
112
  }
110
113
  }
111
- }
112
114
 
113
- #{$switch-class-toggle} {
114
- @include reset-inline-block;
115
- padding: $medium-padding;
116
- width: 50%;
117
- z-index: 2;
118
- left: 0;
119
- user-select: none;
120
- transition: left $switch-transition;
115
+ #{$switch-class-toggle} {
116
+ @include reset-inline-block;
117
+ padding: $medium-padding;
118
+ width: 50%;
119
+ z-index: 2;
120
+ left: 0;
121
+ user-select: none;
122
+ transition: left $switch-transition;
121
123
 
122
- &::before { content: "\00A0"; } // NBSP
123
- }
124
+ &::before { content: "\00A0"; } // NBSP
125
+ }
124
126
 
125
- //-------------------- Modifiers --------------------//
127
+ //-------------------- Modifiers --------------------//
126
128
 
127
- @if index($switch-modifiers, "stacked") {
128
- #{$switch-class-modifier-stacked} {
129
- #{$switch-class-bar} {
130
- &::before,
131
- &::after {
132
- z-index: 3;
133
- opacity: 1 !important;
129
+ @if index($switch-modifiers, "stacked") {
130
+ #{$switch-class-modifier-stacked} {
131
+ #{$switch-class-bar} {
132
+ &::before,
133
+ &::after {
134
+ z-index: 3;
135
+ opacity: 1 !important;
136
+ }
134
137
  }
135
138
  }
136
139
  }
137
- }
140
+ }
data/scss/toolkit/components/tab.scss CHANGED
@@ -6,37 +6,37 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$tab-class} {
10
- text-align: left;
11
- }
9
+ @include export("tab") {
10
+ #{$tab-class} { }
12
11
 
13
- #{$tab-class-nav} {
14
- display: block;
15
- margin-bottom: $margin;
12
+ #{$tab-class-nav} {
13
+ display: block;
14
+ margin-bottom: $margin;
16
15
 
17
- ul, ol, li {
18
- @include reset-list;
19
- display: inline-block;
20
- }
16
+ ul, ol, li {
17
+ @include reset-list;
18
+ display: inline-block;
19
+ }
21
20
 
22
- @include clear-fix;
23
- }
21
+ @include clear-fix;
22
+ }
24
23
 
25
- // Add display none on sections since visibility property takes up DOM space
26
- #{$tab-class-section}.hide {
27
- display: none;
28
- }
24
+ // Add display none on sections since visibility property takes up DOM space
25
+ #{$tab-class-section}.hide {
26
+ display: none;
27
+ }
29
28
 
30
- //-------------------- Modifiers --------------------//
29
+ //-------------------- Modifiers --------------------//
31
30
 
32
- @if index($tab-modifiers, "horizontal") {
33
- #{$tab-class-modifier-horizontal} {
34
- #{$tab-class-nav} {
35
- ul, ol, li, a, button {
36
- display: block;
37
- float: none;
38
- text-align: left;
31
+ @if index($tab-modifiers, "horizontal") {
32
+ #{$tab-class-modifier-horizontal} {
33
+ #{$tab-class-nav} {
34
+ ul, ol, li, a, button {
35
+ display: block;
36
+ float: none;
37
+ text-align: $align-direction;
38
+ }
39
39
  }
40
40
  }
41
41
  }
42
- }
42
+ }
data/scss/toolkit/components/table.scss CHANGED
@@ -6,108 +6,109 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$table-class} {
10
- width: 100%;
11
- margin-top: $margin;
12
- background: $gray-lightest;
13
- border-collapse: collapse;
14
-
15
- th, td {
16
- padding: $padding;
17
- line-height: 110%;
18
- vertical-align: top;
19
- border: 1px solid $gray-dark;
20
- }
9
+ @include export("table") {
10
+ #{$table-class} {
11
+ width: 100%;
12
+ margin-top: $margin;
13
+ background: $gray-lightest;
14
+ border-collapse: collapse;
15
+
16
+ th, td {
17
+ padding: $padding;
18
+ line-height: 110%;
19
+ vertical-align: top;
20
+ border: 1px solid $gray-dark;
21
+ }
21
22
 
22
- // Move headings to bottom
23
- thead th {
24
- vertical-align: bottom;
25
- text-align: left;
23
+ // Move headings to bottom
24
+ thead th {
25
+ vertical-align: bottom;
26
26
 
27
- .sorter {
28
- margin: -.5rem .25rem;
27
+ .sorter {
28
+ margin: -.5rem .25rem;
29
+ }
29
30
  }
30
- }
31
31
 
32
- // Allow for multiple tbody's
33
- tbody + tbody { border-top-width: 2px; }
32
+ // Allow for multiple tbody's
33
+ tbody + tbody { border-top-width: 2px; }
34
+
35
+ // Row colors
36
+ thead tr,
37
+ tfoot tr {
38
+ background: $gray-dark;
34
39
 
35
- // Row colors
36
- thead tr,
37
- tfoot tr {
38
- background: $gray-dark;
40
+ th { border-color: $gray-darkest; }
41
+ }
39
42
 
40
- th { border-color: $gray-darkest; }
43
+ // Divider
44
+ tbody tr#{$table-class-divider} { background: $gray-dark !important; }
41
45
  }
42
46
 
43
- // Divider
44
- tbody tr#{$table-class-divider} { background: $gray-dark !important; }
45
- }
46
-
47
- #{$table-class-responsive} {
48
- width: 100%;
49
- max-width: 100%;
50
- overflow-x: auto;
51
- }
47
+ #{$table-class-responsive} {
48
+ width: 100%;
49
+ max-width: 100%;
50
+ overflow-x: auto;
51
+ }
52
52
 
53
- //-------------------- Modifiers --------------------//
53
+ //-------------------- Modifiers --------------------//
54
54
 
55
- #{$table-class}.has-hover {
56
- tbody tr:not(#{$table-class-divider}):hover { background: #fff; }
57
- }
55
+ #{$table-class}.has-hover {
56
+ tbody tr:not(#{$table-class-divider}):hover { background: #fff; }
57
+ }
58
58
 
59
- #{$table-class}.is-striped tbody tr {
60
- background: $gray;
59
+ #{$table-class}.is-striped tbody tr {
60
+ background: $gray;
61
61
 
62
- &:nth-child(odd) { background: $gray-lightest; }
63
- }
62
+ &:nth-child(odd) { background: $gray-lightest; }
63
+ }
64
64
 
65
- #{$table-class}.is-sortable {
66
- thead th {
67
- padding: 0;
65
+ #{$table-class}.is-sortable {
66
+ thead th {
67
+ padding: 0;
68
68
 
69
- > a,
70
- > span {
71
- padding: $padding;
72
- display: block;
73
- }
69
+ > a,
70
+ > span {
71
+ padding: $padding;
72
+ display: block;
73
+ }
74
74
 
75
- > a {
76
- background: $gray-dark;
75
+ > a {
76
+ background: $gray-dark;
77
77
 
78
- &:hover { background: $gray-darkest; }
78
+ &:hover { background: $gray-darkest; }
79
+ }
79
80
  }
80
81
  }
81
- }
82
82
 
83
- //-------------------- Sizes --------------------//
83
+ //-------------------- Sizes --------------------//
84
84
 
85
- #{$table-class} {
86
- @include is-small {
87
- thead th,
88
- tbody td { padding: $small-padding; }
85
+ #{$table-class} {
86
+ @include is-small {
87
+ thead th,
88
+ tbody td { padding: $small-padding; }
89
89
 
90
- &.is-sortable {
91
- thead th {
92
- padding: 0;
90
+ &.is-sortable {
91
+ thead th {
92
+ padding: 0;
93
93
 
94
- > a,
95
- > span { padding: $small-padding; }
94
+ > a,
95
+ > span { padding: $small-padding; }
96
+ }
96
97
  }
97
98
  }
98
- }
99
99
 
100
- @include is-large {
101
- thead th,
102
- tbody td { padding: $large-padding; }
100
+ @include is-large {
101
+ thead th,
102
+ tbody td { padding: $large-padding; }
103
103
 
104
- &.is-sortable {
105
- thead th {
106
- padding: 0;
104
+ &.is-sortable {
105
+ thead th {
106
+ padding: 0;
107
107
 
108
- > a,
109
- > span { padding: $large-padding; }
108
+ > a,
109
+ > span { padding: $large-padding; }
110
+ }
110
111
  }
111
112
  }
112
113
  }
113
- }
114
+ }