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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/changelog.md +42 -122
  3. data/readme.md +1 -1
  4. data/roadmap.md +7 -8
  5. data/scss/normalize.scss +157 -138
  6. data/scss/toolkit.scss +2 -0
  7. data/scss/toolkit/_common.scss +3 -19
  8. data/scss/toolkit/components/accordion.scss +1 -1
  9. data/scss/toolkit/components/blackout.scss +2 -2
  10. data/scss/toolkit/components/button-group.scss +3 -1
  11. data/scss/toolkit/components/button.scss +0 -6
  12. data/scss/toolkit/components/carousel.scss +6 -6
  13. data/scss/toolkit/components/drop.scss +13 -18
  14. data/scss/toolkit/components/flyout.scss +6 -6
  15. data/scss/toolkit/components/grid.scss +7 -4
  16. data/scss/toolkit/components/icon.scss +5 -5
  17. data/scss/toolkit/components/input.scss +3 -3
  18. data/scss/toolkit/components/lazy-load.scss +1 -1
  19. data/scss/toolkit/components/loader.scss +24 -24
  20. data/scss/toolkit/components/mask.scss +2 -2
  21. data/scss/toolkit/components/matrix.scss +4 -3
  22. data/scss/toolkit/components/modal.scss +26 -26
  23. data/scss/toolkit/components/pagination.scss +2 -2
  24. data/scss/toolkit/components/pin.scss +2 -2
  25. data/scss/toolkit/components/progress.scss +1 -1
  26. data/scss/toolkit/components/showcase.scss +9 -9
  27. data/scss/toolkit/components/step.scss +65 -0
  28. data/scss/toolkit/components/switch.scss +123 -0
  29. data/scss/toolkit/components/table.scss +5 -5
  30. data/scss/toolkit/components/tooltip.scss +11 -11
  31. data/scss/toolkit/components/type-ahead.scss +7 -10
  32. data/scss/toolkit/effects/pill.scss +10 -0
  33. data/scss/toolkit/effects/visual.scss +3 -3
  34. data/scss/toolkit/layout/base.scss +8 -8
  35. data/scss/toolkit/layout/code.scss +1 -1
  36. data/scss/toolkit/layout/form.scss +6 -12
  37. data/scss/toolkit/mixins/_layout.scss +1 -1
  38. data/scss/toolkit/mixins/_state.scss +13 -13
  39. data/scss/toolkit/themes/demo.scss +55 -10
  40. data/version.md +1 -1
  41. 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
@@ -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: inherit !default;
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
- @include transition(all $accordion-transition ease-in-out);
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
- @include transition(all $blackout-transition);
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
- &.#{$state-is-prefix}active { z-index: 1; }
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
  }
@@ -30,10 +30,4 @@
30
30
  @include is-disabled {
31
31
  cursor: not-allowed;
32
32
  }
33
- }
34
-
35
- // Reset browser styles
36
- button::-moz-focus-inner {
37
- padding: 0;
38
- border: 0;
39
33
  }
@@ -25,7 +25,7 @@
25
25
  position: absolute;
26
26
  top: 0;
27
27
  left: 0;
28
- @include transition(left $carousel-transition, top $carousel-transition);
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
- @include transform(translateY(-50%)); // move up 50% of their height
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
- @include transform(translateX(-50%)); // move left 50% of their width
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
- @include transition(opacity $carousel-transition);
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--down,
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
- @include transition(opacity $drop-transition);
21
+ transition: opacity $drop-transition;
25
22
 
26
23
  // Nested
27
- .#{$vendor-prefix}drop--down,
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
- @include transition(left $drop-transition, opacity $drop-transition);
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
- &.#{$state-has-prefix}children {
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--down,
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
- @include box-sizing(content-box); // required by MooTools for multi columns
17
- @include transition(opacity $flyout-transition);
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
- &.#{$state-is-prefix}open > a {}
39
+ &.is-open > a {}
40
40
 
41
41
  // Display caret arrow
42
- &.#{$state-has-prefix}children > a .caret-right {
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
- @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);
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
- &.#{$state-is-prefix}open > .#{$vendor-prefix}flyout {
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
- .#{$vendor-prefix}grid,
10
- .#{$vendor-prefix}row {
11
- @include grid-row;
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
- @include grid-column;
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 { @include transform(rotate(90deg)); }
25
- .icon--180deg { @include transform(rotate(180deg)); }
26
- .icon--270deg { @include transform(rotate(270deg)); }
27
- .icon--flip { @include transform(rotateY(180deg)); }
28
- .icon--flip-vert { @include transform(rotateX(180deg)); }
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
- &.#{$state-is-prefix}active {
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.#{$state-is-prefix}disabled {
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.#{$state-is-prefix}active { display: none !important; }
125
+ li.is-active { display: none !important; }
126
126
  }
127
127
 
128
128
  &.hide-first {
@@ -8,5 +8,5 @@
8
8
 
9
9
  .#{$vendor-prefix}lazy-load {
10
10
  background-image: none !important;
11
- @include transition(background-image $lazyLoad-transition);
11
+ transition: background-image $lazyLoad-transition;
12
12
  }
@@ -27,12 +27,12 @@
27
27
  //-------------------- Bar Wave --------------------//
28
28
 
29
29
  @if $loader-type == "bar-wave" or $loader-type == "all" {
30
- @include keyframes(bar-wave) {
30
+ @keyframes bar-wave {
31
31
  0%, 50%, 100% {
32
- @include transform(scaleY(1.0));
32
+ transform: scaleY(1.0);
33
33
  }
34
34
  25% {
35
- @include transform(scaleY(2.0));
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
- @include animation(bar-wave 1.2s infinite ease-in-out);
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}) { @include animation-delay(-#{(1.3 - ($i * 0.1))}s); }
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
- @include keyframes(bubble-wave) {
60
+ @keyframes bubble-wave {
61
61
  0%, 80%, 100% {
62
- @include transform(scale(0.0));
62
+ transform: scale(0.0);
63
63
  }
64
64
  30% {
65
- @include transform(scale(1.0));
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
- @include animation(bubble-wave 1.5s infinite ease-in-out);
76
- @include animation-fill-mode(both);
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}) { @include animation-delay(-#{(1.6 - ($i * 0.1))}s); }
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
- @include keyframes(bubble-spinner) {
88
+ @keyframes bubble-spinner {
89
89
  0%, 80%, 100% {
90
- @include transform(scale(0.0));
90
+ transform: scale(0.0);
91
91
  }
92
92
  30% {
93
- @include transform(scale(1.3));
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
- @include animation(bubble-spinner 1.6s infinite ease-in-out);
111
- @include animation-fill-mode(both);
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
- @include animation-delay(-1.4s);
116
+ animation-delay: -1.4s;
117
117
  }
118
118
 
119
119
  &:nth-child(2) {
120
120
  top: 12px;
121
121
  right: 12px;
122
- @include animation-delay(-1.2s);
122
+ animation-delay: -1.2s;
123
123
  }
124
124
 
125
125
  &:nth-child(3) {
126
126
  top: 43px;
127
127
  right: 0;
128
- @include animation-delay(-1.0s);
128
+ animation-delay: -1.0s;
129
129
  }
130
130
 
131
131
  &:nth-child(4) {
132
132
  bottom: 12px;
133
133
  right: 12px;
134
- @include animation-delay(-0.8s);
134
+ animation-delay: -0.8s;
135
135
  }
136
136
 
137
137
  &:nth-child(5) {
138
138
  bottom: 0;
139
139
  left: 43px;
140
- @include animation-delay(-0.6s);
140
+ animation-delay: -0.6s;
141
141
  }
142
142
 
143
143
  &:nth-child(6) {
144
144
  bottom: 12px;
145
145
  left: 12px;
146
- @include animation-delay(-0.4s);
146
+ animation-delay: -0.4s;
147
147
  }
148
148
 
149
149
  &:nth-child(7) {
150
150
  top: 43px;
151
151
  left: 0;
152
- @include animation-delay(-0.2s);
152
+ animation-delay: -0.2s;
153
153
  }
154
154
 
155
155
  &:nth-child(8) {
156
156
  top: 12px;
157
157
  left: 12px;
158
- @include animation-delay(-0.0s);
158
+ animation-delay: -0.0s;
159
159
  }
160
160
  }
161
161
  }