titon-toolkit 1.2.2 → 1.3.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.
- checksums.yaml +4 -4
- data/changelog.md +42 -122
- data/readme.md +1 -1
- data/roadmap.md +7 -8
- data/scss/normalize.scss +157 -138
- data/scss/toolkit.scss +2 -0
- data/scss/toolkit/_common.scss +3 -19
- data/scss/toolkit/components/accordion.scss +1 -1
- data/scss/toolkit/components/blackout.scss +2 -2
- data/scss/toolkit/components/button-group.scss +3 -1
- data/scss/toolkit/components/button.scss +0 -6
- data/scss/toolkit/components/carousel.scss +6 -6
- data/scss/toolkit/components/drop.scss +13 -18
- data/scss/toolkit/components/flyout.scss +6 -6
- data/scss/toolkit/components/grid.scss +7 -4
- data/scss/toolkit/components/icon.scss +5 -5
- data/scss/toolkit/components/input.scss +3 -3
- data/scss/toolkit/components/lazy-load.scss +1 -1
- data/scss/toolkit/components/loader.scss +24 -24
- data/scss/toolkit/components/mask.scss +2 -2
- data/scss/toolkit/components/matrix.scss +4 -3
- data/scss/toolkit/components/modal.scss +26 -26
- data/scss/toolkit/components/pagination.scss +2 -2
- data/scss/toolkit/components/pin.scss +2 -2
- data/scss/toolkit/components/progress.scss +1 -1
- data/scss/toolkit/components/showcase.scss +9 -9
- data/scss/toolkit/components/step.scss +65 -0
- data/scss/toolkit/components/switch.scss +123 -0
- data/scss/toolkit/components/table.scss +5 -5
- data/scss/toolkit/components/tooltip.scss +11 -11
- data/scss/toolkit/components/type-ahead.scss +7 -10
- data/scss/toolkit/effects/pill.scss +10 -0
- data/scss/toolkit/effects/visual.scss +3 -3
- data/scss/toolkit/layout/base.scss +8 -8
- data/scss/toolkit/layout/code.scss +1 -1
- data/scss/toolkit/layout/form.scss +6 -12
- data/scss/toolkit/mixins/_layout.scss +1 -1
- data/scss/toolkit/mixins/_state.scss +13 -13
- data/scss/toolkit/themes/demo.scss +55 -10
- data/version.md +1 -1
- metadata +4 -16
data/scss/toolkit.scss
CHANGED
@@ -27,6 +27,8 @@
|
|
27
27
|
@import "toolkit/components/notice";
|
28
28
|
@import "toolkit/components/pagination";
|
29
29
|
@import "toolkit/components/progress";
|
30
|
+
@import "toolkit/components/step";
|
31
|
+
@import "toolkit/components/switch";
|
30
32
|
@import "toolkit/components/table";
|
31
33
|
|
32
34
|
// And more advanced UI styles last
|
data/scss/toolkit/_common.scss
CHANGED
@@ -1,19 +1,7 @@
|
|
1
1
|
|
2
|
-
//-------------------- Compass --------------------//
|
3
|
-
|
4
|
-
$experimental-support-for-mozilla: true !default;
|
5
|
-
$experimental-support-for-webkit: true !default;
|
6
|
-
$experimental-support-for-opera: false !default;
|
7
|
-
$experimental-support-for-microsoft: false !default;
|
8
|
-
$experimental-support-for-khtml: false !default;
|
9
|
-
|
10
|
-
$support-for-original-webkit-gradients: false !default;
|
11
|
-
|
12
2
|
//-------------------- Toolkit --------------------//
|
13
3
|
|
14
4
|
$vendor-prefix: "";
|
15
|
-
$state-is-prefix: "is-";
|
16
|
-
$state-has-prefix: "has-";
|
17
5
|
$size-small-class: "small";
|
18
6
|
$size-large-class: "large";
|
19
7
|
$shape-square-class: "square";
|
@@ -53,7 +41,7 @@ $margin: 1.25rem !default;
|
|
53
41
|
$small-size: .7rem !default;
|
54
42
|
$small-padding: .5rem !default;
|
55
43
|
|
56
|
-
$medium-size:
|
44
|
+
$medium-size: 1rem !default;
|
57
45
|
$medium-padding: $padding !default;
|
58
46
|
|
59
47
|
$large-size: 1.3rem !default;
|
@@ -116,8 +104,10 @@ $lazyLoad-transition: $default-transition !default;
|
|
116
104
|
$mask-transition: $default-transition !default;
|
117
105
|
$matrix-transition: $default-transition !default;
|
118
106
|
$modal-transition: $default-transition !default;
|
107
|
+
$pin-transition: .2s !default;
|
119
108
|
$progress-transition: .5s !default;
|
120
109
|
$showcase-transition: $default-transition !default;
|
110
|
+
$switch-transition: $default-transition !default;
|
121
111
|
$tooltip-transition: $default-transition !default;
|
122
112
|
|
123
113
|
//-------------------- Z Index --------------------//
|
@@ -196,9 +186,3 @@ $tooltip-arrow-width: 6 !default;
|
|
196
186
|
@import "mixins/grid";
|
197
187
|
@import "mixins/responsive";
|
198
188
|
@import "mixins/components";
|
199
|
-
@import "compass/css3/box-sizing";
|
200
|
-
@import "compass/css3/images";
|
201
|
-
@import "compass/css3/transition";
|
202
|
-
@import "compass/css3/transform";
|
203
|
-
@import "compass/css3/filter";
|
204
|
-
@import "animation";
|
@@ -23,7 +23,7 @@
|
|
23
23
|
.#{$vendor-prefix}accordion-section {
|
24
24
|
overflow: hidden;
|
25
25
|
position: relative;
|
26
|
-
|
26
|
+
transition: all $accordion-transition ease-in-out;
|
27
27
|
|
28
28
|
&.hide { max-height: 0; } // don't include on base styles
|
29
29
|
}
|
@@ -16,13 +16,13 @@
|
|
16
16
|
opacity: 0;
|
17
17
|
visibility: hidden;
|
18
18
|
background: black($blackout-opacity);
|
19
|
-
|
19
|
+
transition: all $blackout-transition;
|
20
20
|
|
21
21
|
.#{$vendor-prefix}loader {
|
22
22
|
opacity: 1;
|
23
23
|
color: #fff;
|
24
|
+
transition: all $blackout-transition;
|
24
25
|
@include position-center;
|
25
|
-
@include transition(all $blackout-transition);
|
26
26
|
|
27
27
|
> span,
|
28
28
|
.spinner > span { background: #fff !important; }
|
@@ -20,7 +20,7 @@
|
|
20
20
|
&:first-child { margin-left: 0; }
|
21
21
|
|
22
22
|
&:hover,
|
23
|
-
|
23
|
+
&.is-active { z-index: 1; }
|
24
24
|
}
|
25
25
|
|
26
26
|
> li {
|
@@ -105,6 +105,8 @@
|
|
105
105
|
margin: 0 !important;
|
106
106
|
}
|
107
107
|
|
108
|
+
> li .#{$vendor-prefix}button { display: block; }
|
109
|
+
|
108
110
|
> li:not(:first-child) .#{$vendor-prefix}button,
|
109
111
|
> .#{$vendor-prefix}button:not(:first-child) { border-left: 0; }
|
110
112
|
}
|
@@ -25,7 +25,7 @@
|
|
25
25
|
position: absolute;
|
26
26
|
top: 0;
|
27
27
|
left: 0;
|
28
|
-
|
28
|
+
transition: left $carousel-transition, top $carousel-transition;
|
29
29
|
|
30
30
|
> li {
|
31
31
|
width: 100%;
|
@@ -65,7 +65,7 @@
|
|
65
65
|
height: auto;
|
66
66
|
z-index: 5;
|
67
67
|
top: 50%;
|
68
|
-
|
68
|
+
transform: translateY(-50%); // move up 50% of their height
|
69
69
|
|
70
70
|
&:focus { outline: none; }
|
71
71
|
}
|
@@ -78,18 +78,18 @@
|
|
78
78
|
top: $padding;
|
79
79
|
left: 50%;
|
80
80
|
z-index: 5;
|
81
|
-
|
81
|
+
transform: translateX(-50%); // move left 50% of their width
|
82
82
|
}
|
83
83
|
|
84
84
|
//-------------------- Animations --------------------//
|
85
85
|
|
86
86
|
.#{$vendor-prefix}carousel.slide {
|
87
87
|
.#{$vendor-prefix}carousel-items ul {
|
88
|
-
@include clear-fix;
|
89
|
-
|
90
88
|
> li {
|
91
89
|
float: left;
|
92
90
|
}
|
91
|
+
|
92
|
+
@include clear-fix;
|
93
93
|
}
|
94
94
|
}
|
95
95
|
|
@@ -103,7 +103,7 @@
|
|
103
103
|
left: 0;
|
104
104
|
opacity: 0;
|
105
105
|
z-index: 1;
|
106
|
-
|
106
|
+
transition: opacity $carousel-transition;
|
107
107
|
|
108
108
|
&.show { z-index: 5; }
|
109
109
|
}
|
@@ -6,10 +6,7 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
.#{$vendor-prefix}drop
|
10
|
-
.#{$vendor-prefix}drop--up,
|
11
|
-
.#{$vendor-prefix}drop--left,
|
12
|
-
.#{$vendor-prefix}drop--right {
|
9
|
+
.#{$vendor-prefix}drop {
|
13
10
|
@include reset-list;
|
14
11
|
display: none;
|
15
12
|
text-align: left;
|
@@ -21,16 +18,15 @@
|
|
21
18
|
z-index: $drop-zindex;
|
22
19
|
opacity: 0;
|
23
20
|
visibility: hidden;
|
24
|
-
|
21
|
+
transition: opacity $drop-transition;
|
25
22
|
|
26
23
|
// Nested
|
27
|
-
.#{$vendor-prefix}drop
|
28
|
-
.#{$vendor-prefix}drop--up {
|
24
|
+
.#{$vendor-prefix}drop {
|
29
25
|
display: block;
|
30
26
|
top: 0;
|
31
27
|
left: 90%;
|
32
28
|
z-index: $drop-zindex + 1;
|
33
|
-
|
29
|
+
transition: left $drop-transition, opacity $drop-transition;
|
34
30
|
}
|
35
31
|
|
36
32
|
// Apply to self
|
@@ -52,14 +48,13 @@
|
|
52
48
|
}
|
53
49
|
}
|
54
50
|
|
55
|
-
|
51
|
+
&.has-children {
|
56
52
|
> a .caret-right { display: inline-block; }
|
57
53
|
}
|
58
54
|
|
59
55
|
// Show nested dropdown
|
60
56
|
&:hover {
|
61
|
-
.#{$vendor-prefix}drop
|
62
|
-
.#{$vendor-prefix}drop--up {
|
57
|
+
.#{$vendor-prefix}drop {
|
63
58
|
visibility: visible;
|
64
59
|
opacity: 1;
|
65
60
|
left: 100%;
|
@@ -84,31 +79,31 @@
|
|
84
79
|
|
85
80
|
//-------------------- Modifiers --------------------//
|
86
81
|
|
87
|
-
.#{$vendor-prefix}drop--up {
|
82
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--up {
|
88
83
|
top: auto;
|
89
84
|
bottom: 100%;
|
90
85
|
}
|
91
86
|
|
92
|
-
.#{$vendor-prefix}drop--right {
|
87
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--right {
|
93
88
|
top: auto;
|
94
89
|
left: 100%;
|
95
90
|
}
|
96
91
|
|
97
|
-
.#{$vendor-prefix}drop--left {
|
92
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--left {
|
98
93
|
top: auto;
|
99
94
|
left: auto;
|
100
95
|
right: 100%;
|
101
96
|
}
|
102
97
|
|
103
|
-
.#{$vendor-prefix}drop--right,
|
104
|
-
.#{$vendor-prefix}drop--left {
|
98
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--right,
|
99
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--left {
|
105
100
|
&.reverse-align {
|
106
101
|
bottom: 0;
|
107
102
|
}
|
108
103
|
}
|
109
104
|
|
110
|
-
.#{$vendor-prefix}drop--down,
|
111
|
-
.#{$vendor-prefix}drop--up {
|
105
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--down,
|
106
|
+
.#{$vendor-prefix}drop.#{$vendor-prefix}drop--up {
|
112
107
|
&.reverse-align {
|
113
108
|
left: auto;
|
114
109
|
right: 0;
|
@@ -13,8 +13,8 @@
|
|
13
13
|
z-index: $flyout-zindex;
|
14
14
|
opacity: 0;
|
15
15
|
visibility: hidden;
|
16
|
-
|
17
|
-
|
16
|
+
box-sizing: content-box; // required by MooTools for multi columns
|
17
|
+
transition: opacity $flyout-transition;
|
18
18
|
|
19
19
|
ul {
|
20
20
|
@include reset-list;
|
@@ -36,10 +36,10 @@
|
|
36
36
|
|
37
37
|
// Hover states
|
38
38
|
> a:hover,
|
39
|
-
|
39
|
+
&.is-open > a {}
|
40
40
|
|
41
41
|
// Display caret arrow
|
42
|
-
|
42
|
+
&.has-children > a .caret-right {
|
43
43
|
float: right;
|
44
44
|
display: inline-block; // reveal
|
45
45
|
margin-top: 3px;
|
@@ -48,7 +48,7 @@
|
|
48
48
|
// Nested flyouts
|
49
49
|
> .#{$vendor-prefix}flyout {
|
50
50
|
left: 90%;
|
51
|
-
|
51
|
+
transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition;
|
52
52
|
|
53
53
|
// Reverse menu to left side in case it goes outside the viewport
|
54
54
|
// Will be set automatically from the Javascript layer
|
@@ -58,7 +58,7 @@
|
|
58
58
|
}
|
59
59
|
}
|
60
60
|
|
61
|
-
|
61
|
+
&.is-open > .#{$vendor-prefix}flyout {
|
62
62
|
opacity: 1;
|
63
63
|
visibility: visible;
|
64
64
|
left: 100%;
|
@@ -6,14 +6,17 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
%row { @include grid-row; }
|
10
|
+
%col { @include grid-column; }
|
11
|
+
|
12
|
+
// Row wrapper
|
13
|
+
.#{$vendor-prefix}grid {
|
14
|
+
@extend %row;
|
12
15
|
}
|
13
16
|
|
14
17
|
// These should be the same for all sizes
|
15
18
|
.col[class*="span-"] {
|
16
|
-
@
|
19
|
+
@extend %col;
|
17
20
|
}
|
18
21
|
|
19
22
|
@for $i from 1 through 12 {
|
@@ -21,8 +21,8 @@
|
|
21
21
|
|
22
22
|
//-------------------- Modifiers --------------------//
|
23
23
|
|
24
|
-
.icon--90deg {
|
25
|
-
.icon--180deg {
|
26
|
-
.icon--270deg {
|
27
|
-
.icon--flip {
|
28
|
-
.icon--flip-vert {
|
24
|
+
.icon--90deg { transform: rotate(90deg); }
|
25
|
+
.icon--180deg { transform: rotate(180deg); }
|
26
|
+
.icon--270deg { transform: rotate(270deg); }
|
27
|
+
.icon--flip { transform: rotateY(180deg); }
|
28
|
+
.icon--flip-vert { transform: rotateX(180deg); }
|
@@ -59,7 +59,7 @@
|
|
59
59
|
line-height: 1rem;
|
60
60
|
z-index: 3;
|
61
61
|
|
62
|
-
|
62
|
+
&.is-active {
|
63
63
|
border-color: $info;
|
64
64
|
}
|
65
65
|
}
|
@@ -112,7 +112,7 @@
|
|
112
112
|
max-height: 300px;
|
113
113
|
overflow: auto;
|
114
114
|
|
115
|
-
li
|
115
|
+
li.is-disabled {
|
116
116
|
> a,
|
117
117
|
> a:hover {
|
118
118
|
background: none;
|
@@ -122,7 +122,7 @@
|
|
122
122
|
}
|
123
123
|
|
124
124
|
&.hide-selected {
|
125
|
-
li
|
125
|
+
li.is-active { display: none !important; }
|
126
126
|
}
|
127
127
|
|
128
128
|
&.hide-first {
|
@@ -27,12 +27,12 @@
|
|
27
27
|
//-------------------- Bar Wave --------------------//
|
28
28
|
|
29
29
|
@if $loader-type == "bar-wave" or $loader-type == "all" {
|
30
|
-
@
|
30
|
+
@keyframes bar-wave {
|
31
31
|
0%, 50%, 100% {
|
32
|
-
|
32
|
+
transform: scaleY(1.0);
|
33
33
|
}
|
34
34
|
25% {
|
35
|
-
|
35
|
+
transform: scaleY(2.0);
|
36
36
|
}
|
37
37
|
}
|
38
38
|
|
@@ -41,10 +41,10 @@
|
|
41
41
|
background: $loader-color;
|
42
42
|
height: $loader-bar-height;
|
43
43
|
width: $loader-bar-width;
|
44
|
-
|
44
|
+
animation: bar-wave 1.2s infinite ease-in-out;
|
45
45
|
|
46
46
|
@for $i from 2 through $loader-wave-count {
|
47
|
-
&:nth-child(#{$i}) {
|
47
|
+
&:nth-child(#{$i}) { animation-delay: -#{(1.3 - ($i * 0.1))}s; }
|
48
48
|
}
|
49
49
|
}
|
50
50
|
|
@@ -57,12 +57,12 @@
|
|
57
57
|
//-------------------- Bubble Wave --------------------//
|
58
58
|
|
59
59
|
@if $loader-type == "bubble-wave" or $loader-type == "all" {
|
60
|
-
@
|
60
|
+
@keyframes bubble-wave {
|
61
61
|
0%, 80%, 100% {
|
62
|
-
|
62
|
+
transform: scale(0.0);
|
63
63
|
}
|
64
64
|
30% {
|
65
|
-
|
65
|
+
transform: scale(1.0);
|
66
66
|
}
|
67
67
|
}
|
68
68
|
|
@@ -72,11 +72,11 @@
|
|
72
72
|
width: $loader-bubble-size;
|
73
73
|
height: $loader-bubble-size;
|
74
74
|
border-radius: 100%;
|
75
|
-
|
76
|
-
|
75
|
+
animation: bubble-wave 1.5s infinite ease-in-out;
|
76
|
+
animation-fill-mode: both;
|
77
77
|
|
78
78
|
@for $i from 2 through $loader-wave-count {
|
79
|
-
&:nth-child(#{$i}) {
|
79
|
+
&:nth-child(#{$i}) { animation-delay: -#{(1.6 - ($i * 0.1))}s; }
|
80
80
|
}
|
81
81
|
}
|
82
82
|
}
|
@@ -85,12 +85,12 @@
|
|
85
85
|
//-------------------- Bubble Spinner --------------------//
|
86
86
|
|
87
87
|
@if $loader-type == "bubble-spinner" or $loader-type == "all" {
|
88
|
-
@
|
88
|
+
@keyframes bubble-spinner {
|
89
89
|
0%, 80%, 100% {
|
90
|
-
|
90
|
+
transform: scale(0.0);
|
91
91
|
}
|
92
92
|
30% {
|
93
|
-
|
93
|
+
transform: scale(1.3);
|
94
94
|
}
|
95
95
|
}
|
96
96
|
|
@@ -107,55 +107,55 @@
|
|
107
107
|
height: 14px;
|
108
108
|
position: absolute;
|
109
109
|
border-radius: 100%;
|
110
|
-
|
111
|
-
|
110
|
+
animation: bubble-spinner 1.6s infinite ease-in-out;
|
111
|
+
animation-fill-mode: both;
|
112
112
|
|
113
113
|
&:nth-child(1) {
|
114
114
|
top: 0;
|
115
115
|
left: 43px;
|
116
|
-
|
116
|
+
animation-delay: -1.4s;
|
117
117
|
}
|
118
118
|
|
119
119
|
&:nth-child(2) {
|
120
120
|
top: 12px;
|
121
121
|
right: 12px;
|
122
|
-
|
122
|
+
animation-delay: -1.2s;
|
123
123
|
}
|
124
124
|
|
125
125
|
&:nth-child(3) {
|
126
126
|
top: 43px;
|
127
127
|
right: 0;
|
128
|
-
|
128
|
+
animation-delay: -1.0s;
|
129
129
|
}
|
130
130
|
|
131
131
|
&:nth-child(4) {
|
132
132
|
bottom: 12px;
|
133
133
|
right: 12px;
|
134
|
-
|
134
|
+
animation-delay: -0.8s;
|
135
135
|
}
|
136
136
|
|
137
137
|
&:nth-child(5) {
|
138
138
|
bottom: 0;
|
139
139
|
left: 43px;
|
140
|
-
|
140
|
+
animation-delay: -0.6s;
|
141
141
|
}
|
142
142
|
|
143
143
|
&:nth-child(6) {
|
144
144
|
bottom: 12px;
|
145
145
|
left: 12px;
|
146
|
-
|
146
|
+
animation-delay: -0.4s;
|
147
147
|
}
|
148
148
|
|
149
149
|
&:nth-child(7) {
|
150
150
|
top: 43px;
|
151
151
|
left: 0;
|
152
|
-
|
152
|
+
animation-delay: -0.2s;
|
153
153
|
}
|
154
154
|
|
155
155
|
&:nth-child(8) {
|
156
156
|
top: 12px;
|
157
157
|
left: 12px;
|
158
|
-
|
158
|
+
animation-delay: -0.0s;
|
159
159
|
}
|
160
160
|
}
|
161
161
|
}
|