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/toast.scss CHANGED
@@ -6,129 +6,131 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$toast-class-wrapper} {
10
- position: fixed;
11
- padding: $margin;
12
- width: 20%;
13
- z-index: $toast-zindex;
14
-
15
- @include if-max(nth($breakpoint-range-small, 1)) {
16
- width: 100%;
17
- }
9
+ @include export("toast") {
10
+ #{$toast-class-wrapper} {
11
+ position: fixed;
12
+ padding: $margin;
13
+ width: 20%;
14
+ z-index: $toast-zindex;
15
+
16
+ @include if-max(nth($breakpoint-range-small, 1)) {
17
+ width: 100%;
18
+ }
18
19
 
19
- @if index($toast-position, "top-left") {
20
- &.top-left {
21
- top: 0;
22
- left: 0;
20
+ @if index($toast-position, "top-left") {
21
+ &.top-left {
22
+ top: 0;
23
+ left: 0;
24
+ }
23
25
  }
24
- }
25
26
 
26
- @if index($toast-position, "top-center") {
27
- &.top-center {
28
- top: 0;
29
- left: 50%;
27
+ @if index($toast-position, "top-center") {
28
+ &.top-center {
29
+ top: 0;
30
+ left: 50%;
31
+ }
30
32
  }
31
- }
32
33
 
33
- @if index($toast-position, "top-right") {
34
- &.top-right {
35
- top: 0;
36
- right: 0;
34
+ @if index($toast-position, "top-right") {
35
+ &.top-right {
36
+ top: 0;
37
+ right: 0;
38
+ }
37
39
  }
38
- }
39
40
 
40
- @if index($toast-position, "center-left") {
41
- &.center-left {
42
- top: 50%;
43
- left: 0;
41
+ @if index($toast-position, "center-left") {
42
+ &.center-left {
43
+ top: 50%;
44
+ left: 0;
45
+ }
44
46
  }
45
- }
46
47
 
47
- @if index($toast-position, "center-right") {
48
- &.center-right {
49
- top: 50%;
50
- right: 0;
48
+ @if index($toast-position, "center-right") {
49
+ &.center-right {
50
+ top: 50%;
51
+ right: 0;
52
+ }
51
53
  }
52
- }
53
54
 
54
- @if index($toast-position, "bottom-left") {
55
- &.bottom-left {
56
- bottom: 0;
57
- left: 0;
55
+ @if index($toast-position, "bottom-left") {
56
+ &.bottom-left {
57
+ bottom: 0;
58
+ left: 0;
59
+ }
58
60
  }
59
- }
60
61
 
61
- @if index($toast-position, "bottom-center") {
62
- &.bottom-center {
63
- bottom: 0;
64
- left: 50%;
62
+ @if index($toast-position, "bottom-center") {
63
+ &.bottom-center {
64
+ bottom: 0;
65
+ left: 50%;
66
+ }
65
67
  }
66
- }
67
68
 
68
- @if index($toast-position, "bottom-right") {
69
- &.bottom-right {
70
- bottom: 0;
71
- right: 0;
69
+ @if index($toast-position, "bottom-right") {
70
+ &.bottom-right {
71
+ bottom: 0;
72
+ right: 0;
73
+ }
72
74
  }
73
- }
74
75
 
75
- @if index($toast-position, "top-center") or index($toast-position, "bottom-center") {
76
- &.top-center,
77
- &.bottom-center {
78
- transform: translateX(-50%);
76
+ @if index($toast-position, "top-center") or index($toast-position, "bottom-center") {
77
+ &.top-center,
78
+ &.bottom-center {
79
+ transform: translateX(-50%);
80
+ }
79
81
  }
80
- }
81
82
 
82
- @if index($toast-position, "center-left") or index($toast-position, "center-right") {
83
- &.center-left,
84
- &.center-right {
85
- transform: translateY(-50%);
83
+ @if index($toast-position, "center-left") or index($toast-position, "center-right") {
84
+ &.center-left,
85
+ &.center-right {
86
+ transform: translateY(-50%);
87
+ }
86
88
  }
87
89
  }
88
- }
89
90
 
90
- #{$toast-class} {
91
- margin-top: 1rem;
92
- transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
93
- opacity: 0;
94
- visibility: hidden;
91
+ #{$toast-class} {
92
+ margin-top: 1rem;
93
+ transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
94
+ opacity: 0;
95
+ visibility: hidden;
95
96
 
96
- &.show { opacity: 1; }
97
- &:first-child { margin-top: 0; }
98
- }
97
+ &.show { opacity: 1; }
98
+ &:first-child { margin-top: 0; }
99
+ }
99
100
 
100
- //-------------------- Animations --------------------//
101
+ //-------------------- Animations --------------------//
101
102
 
102
- #{$toast-class} {
103
- @if index($toast-animations, "slide-up") {
104
- &.slide-up {
105
- transform: translateY(50%);
103
+ #{$toast-class} {
104
+ @if index($toast-animations, "slide-up") {
105
+ &.slide-up {
106
+ transform: translateY(50%);
106
107
 
107
- &.show { transform: translateY(0); }
108
+ &.show { transform: translateY(0); }
109
+ }
108
110
  }
109
- }
110
111
 
111
- @if index($toast-animations, "slide-down") {
112
- &.slide-down {
113
- transform: translateY(-50%);
112
+ @if index($toast-animations, "slide-down") {
113
+ &.slide-down {
114
+ transform: translateY(-50%);
114
115
 
115
- &.show { transform: translateY(0); }
116
+ &.show { transform: translateY(0); }
117
+ }
116
118
  }
117
- }
118
119
 
119
- @if index($toast-animations, "slide-left") {
120
- &.slide-left {
121
- transform: translateX(25%);
120
+ @if index($toast-animations, "slide-left") {
121
+ &.slide-left {
122
+ transform: translateX(25%);
122
123
 
123
- &.show { transform: translateX(0); }
124
+ &.show { transform: translateX(0); }
125
+ }
124
126
  }
125
- }
126
127
 
127
- @if index($toast-animations, "slide-right") {
128
- &.slide-right {
129
- transform: translateX(-25%);
128
+ @if index($toast-animations, "slide-right") {
129
+ &.slide-right {
130
+ transform: translateX(-25%);
130
131
 
131
- &.show { transform: translateX(0); }
132
+ &.show { transform: translateX(0); }
133
+ }
132
134
  }
133
135
  }
134
- }
136
+ }
data/scss/toolkit/components/tooltip.scss CHANGED
@@ -6,109 +6,111 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
10
-
11
- #{$tooltip-class} {
12
- position: absolute;
13
- top: 0;
14
- left: 0;
15
- border: none;
16
- margin: $margin;
17
- padding: $small-padding;
18
- z-index: $tooltip-zindex;
19
- max-width: 200px;
20
- visibility: hidden;
21
- background: #000;
22
- color: #fff;
23
-
24
- &.center-left #{$tooltip-class-arrow},
25
- &.center-right #{$tooltip-class-arrow} {
26
- top: 50%;
27
- margin-top: -#{$tooltip-arrow-width}px;
28
- }
9
+ @include export("tooltip") {
10
+ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
29
11
 
30
- &.center-left #{$tooltip-class-arrow} {
31
- border-left-color: #000;
32
- right: -#{$tooltip-arrow-width-double}px;
33
- }
12
+ #{$tooltip-class} {
13
+ position: absolute;
14
+ top: 0;
15
+ left: 0;
16
+ border: none;
17
+ margin: $margin;
18
+ padding: $small-padding;
19
+ z-index: $tooltip-zindex;
20
+ max-width: 200px;
21
+ visibility: hidden;
22
+ background: #000;
23
+ color: #fff;
24
+
25
+ &.center-left #{$tooltip-class-arrow},
26
+ &.center-right #{$tooltip-class-arrow} {
27
+ top: 50%;
28
+ margin-top: -#{$tooltip-arrow-width}px;
29
+ }
34
30
 
35
- &.center-right #{$tooltip-class-arrow} {
36
- border-right-color: #000;
37
- left: -#{$tooltip-arrow-width-double}px;
38
- }
31
+ &.center-left #{$tooltip-class-arrow} {
32
+ border-left-color: #000;
33
+ right: -#{$tooltip-arrow-width-double}px;
34
+ }
39
35
 
40
- &.top-center #{$tooltip-class-arrow},
41
- &.bottom-center #{$tooltip-class-arrow} {
42
- left: 50%;
43
- margin-left: -#{$tooltip-arrow-width}px;
44
- }
36
+ &.center-right #{$tooltip-class-arrow} {
37
+ border-right-color: #000;
38
+ left: -#{$tooltip-arrow-width-double}px;
39
+ }
45
40
 
46
- &.top-center #{$tooltip-class-arrow} {
47
- border-top-color: #000;
48
- bottom: -#{$tooltip-arrow-width-double}px;
49
- }
41
+ &.top-center #{$tooltip-class-arrow},
42
+ &.bottom-center #{$tooltip-class-arrow} {
43
+ left: 50%;
44
+ margin-left: -#{$tooltip-arrow-width}px;
45
+ }
50
46
 
51
- &.bottom-center #{$tooltip-class-arrow} {
52
- border-bottom-color: #000;
53
- top: -#{$tooltip-arrow-width-double}px;
54
- }
55
- }
47
+ &.top-center #{$tooltip-class-arrow} {
48
+ border-top-color: #000;
49
+ bottom: -#{$tooltip-arrow-width-double}px;
50
+ }
56
51
 
57
- #{$tooltip-class-arrow},
58
- #{$popover-class-arrow} {
59
- width: 0;
60
- height: 0;
61
- border: #{$tooltip-arrow-width}px solid transparent;
62
- position: absolute;
52
+ &.bottom-center #{$tooltip-class-arrow} {
53
+ border-bottom-color: #000;
54
+ top: -#{$tooltip-arrow-width-double}px;
55
+ }
56
+ }
63
57
 
64
- &::after {
65
- content: "";
66
- border: #{($tooltip-arrow-width - 2)}px solid transparent;
58
+ #{$tooltip-class-arrow},
59
+ #{$popover-class-arrow} {
60
+ width: 0;
61
+ height: 0;
62
+ border: #{$tooltip-arrow-width}px solid transparent;
67
63
  position: absolute;
64
+
65
+ &::after {
66
+ content: "";
67
+ border: #{($tooltip-arrow-width - 2)}px solid transparent;
68
+ position: absolute;
69
+ }
68
70
  }
69
- }
70
71
 
71
- //-------------------- Animations --------------------//
72
+ //-------------------- Animations --------------------//
72
73
 
73
- #{$tooltip-class},
74
- #{$popover-class} {
75
- #{join-classes($popover-tooltip-animation)} {
76
- transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
77
- }
74
+ #{$tooltip-class},
75
+ #{$popover-class} {
76
+ #{join-classes($popover-tooltip-animation)} {
77
+ transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
78
+ }
78
79
 
79
- @if index($popover-tooltip-animation, "fade") {
80
- &.fade {
81
- opacity: 0;
80
+ @if index($popover-tooltip-animation, "fade") {
81
+ &.fade {
82
+ opacity: 0;
83
+ }
82
84
  }
83
- }
84
85
 
85
- @if index($popover-tooltip-animation, "from-above") {
86
- &.from-above {
87
- transform: scale(1.2);
86
+ @if index($popover-tooltip-animation, "from-above") {
87
+ &.from-above {
88
+ transform: scale(1.2);
88
89
 
89
- &.show {
90
- transform: scale(1);
90
+ &.show {
91
+ transform: scale(1);
92
+ }
91
93
  }
92
94
  }
93
- }
94
95
 
95
- @if index($popover-tooltip-animation, "from-below") {
96
- &.from-below {
97
- transform: scale(0.8);
96
+ @if index($popover-tooltip-animation, "from-below") {
97
+ &.from-below {
98
+ transform: scale(0.8);
98
99
 
99
- &.show {
100
- transform: scale(1);
100
+ &.show {
101
+ transform: scale(1);
102
+ }
101
103
  }
102
104
  }
103
- }
104
105
 
105
- @if index($popover-tooltip-animation, "flip-rotate") {
106
- &.flip-rotate {
107
- transform: rotate(-15deg);
106
+ @if index($popover-tooltip-animation, "flip-rotate") {
107
+ &.flip-rotate {
108
+ transform: rotate(-15deg);
108
109
 
109
- &.show {
110
- transform: rotate(0deg);
110
+ &.show {
111
+ transform: rotate(0deg);
112
+ }
111
113
  }
112
114
  }
113
115
  }
114
- }
116
+ }
data/scss/toolkit/components/type-ahead.scss CHANGED
@@ -6,67 +6,68 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- #{$typeAhead-class} {
10
- position: absolute;
11
- top: 0;
12
- left: 0;
13
- z-index: $typeAhead-zindex;
14
- opacity: 0;
15
- visibility: hidden;
16
- transition: opacity $typeAhead-transition, visibility $typeAhead-transition;
9
+ @include export("type-ahead") {
10
+ #{$typeAhead-class} {
11
+ position: absolute;
12
+ top: 0;
13
+ z-index: $typeAhead-zindex;
14
+ opacity: 0;
15
+ visibility: hidden;
16
+ transition: opacity $typeAhead-transition, visibility $typeAhead-transition;
17
17
 
18
- // Fixes issues where menu does not display in iOS
19
- // Kind of hacky? Other solutions?
20
- -webkit-backface-visibility: hidden;
18
+ // Fixes issues where menu does not display in iOS
19
+ // Kind of hacky? Other solutions?
20
+ -webkit-backface-visibility: hidden;
21
21
 
22
- ul {
23
- @include reset-list;
24
- min-width: 200px;
25
- }
26
-
27
- li {
28
- > a {
29
- padding: $small-padding;
30
- line-height: 100%;
31
- display: block;
32
- text-decoration: none;
22
+ ul {
23
+ @include reset-list;
24
+ min-width: 200px;
33
25
  }
34
26
 
35
- > a:hover,
36
- &.is-active a {}
27
+ li {
28
+ > a {
29
+ padding: $small-padding;
30
+ line-height: 100%;
31
+ display: block;
32
+ text-decoration: none;
33
+ }
34
+
35
+ > a:hover,
36
+ &.is-active a {}
37
+ }
37
38
  }
38
- }
39
39
 
40
- #{$typeAhead-class-heading} {
41
- padding: $small-padding;
42
- line-height: 100%;
43
- display: block;
44
- text-decoration: none;
45
- }
40
+ #{$typeAhead-class-heading} {
41
+ padding: $small-padding;
42
+ line-height: 100%;
43
+ display: block;
44
+ text-decoration: none;
45
+ }
46
46
 
47
- #{$typeAhead-class-highlight} {
48
- background: #fff;
49
- padding: 0;
50
- }
47
+ #{$typeAhead-class-highlight} {
48
+ background: #fff;
49
+ padding: 0;
50
+ }
51
51
 
52
- #{$typeAhead-class-description} {
53
- display: block;
54
- font-size: .7rem;
55
- }
52
+ #{$typeAhead-class-description} {
53
+ display: block;
54
+ font-size: .7rem;
55
+ }
56
56
 
57
- #{$typeAhead-class-shadow} {
58
- position: relative;
57
+ #{$typeAhead-class-shadow} {
58
+ position: relative;
59
59
 
60
- .is-shadow {
61
- color: gray;
62
- }
60
+ .is-shadow {
61
+ color: gray;
62
+ }
63
63
 
64
- .not-shadow {
65
- background: transparent;
66
- position: absolute;
67
- top: 0;
68
- left: 0;
69
- z-index: 2;
70
- zoom: 1;
64
+ .not-shadow {
65
+ background: transparent;
66
+ position: absolute;
67
+ top: 0;
68
+ left: 0;
69
+ z-index: 2;
70
+ zoom: 1;
71
+ }
71
72
  }
72
- }
73
+ }