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