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
@@ -16,7 +16,7 @@
16
16
  opacity: 0;
17
17
  visibility: hidden;
18
18
  background: black($mask-opacity);
19
- @include transition(all $mask-transition);
19
+ transition: all $mask-transition;
20
20
  color: #fff;
21
21
  }
22
22
 
@@ -24,8 +24,8 @@
24
24
  text-align: center;
25
25
  max-width: 80%;
26
26
  opacity: 1;
27
+ transition: all $mask-transition;
27
28
  @include position-center;
28
- @include transition(all $mask-transition);
29
29
 
30
30
  &:empty { display: none; }
31
31
  }
@@ -9,16 +9,17 @@
9
9
  .#{$vendor-prefix}matrix {
10
10
  @include reset-list;
11
11
  position: relative;
12
- @include clear-fix;
13
12
 
14
13
  > li {
15
14
  float: left;
16
15
  margin: 0;
17
16
  padding: 0;
18
- @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
17
+ transition: top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition;
19
18
  }
20
19
 
21
- &.#{$state-has-prefix}no-columns > li {
20
+ &.has-no-columns > li {
22
21
  position: relative !important;
23
22
  }
23
+
24
+ @include clear-fix;
24
25
  }
@@ -18,11 +18,11 @@
18
18
  visibility: hidden;
19
19
  pointer-events: none; // fall through to blackout
20
20
 
21
- &.#{$state-is-prefix}loading {
21
+ &.is-loading {
22
22
  .#{$vendor-prefix}modal-close { display: none; }
23
23
  }
24
24
 
25
- &.#{$state-is-prefix}draggable {
25
+ &.is-draggable {
26
26
  .#{$vendor-prefix}modal-inner { cursor: default; }
27
27
  .#{$vendor-prefix}modal-head { cursor: move; }
28
28
  }
@@ -49,7 +49,7 @@
49
49
  height: auto;
50
50
  margin: $margin;
51
51
  pointer-events: auto; // allow within modal
52
- @include transform(translateX(-50%));
52
+ transform: translateX(-50%);
53
53
  }
54
54
 
55
55
  .#{$vendor-prefix}modal-inner {
@@ -65,7 +65,7 @@
65
65
 
66
66
  //-------------------- Modifiers --------------------//
67
67
 
68
- .#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen .#{$vendor-prefix}modal-outer {
68
+ .#{$vendor-prefix}modal.is-fullscreen .#{$vendor-prefix}modal-outer {
69
69
  top: 0;
70
70
  left: 0;
71
71
  margin: 0;
@@ -73,7 +73,7 @@
73
73
  max-width: 100%;
74
74
  max-height: auto;
75
75
  border-radius: 0;
76
- @include transform(translateX(0) translateY(0));
76
+ transform: translate(0, 0);
77
77
  }
78
78
 
79
79
  //-------------------- Animations --------------------//
@@ -82,7 +82,7 @@
82
82
  #{join-classes($modal-animation)} {
83
83
  .#{$vendor-prefix}modal-handle {
84
84
  opacity: 0;
85
- @include transition(all $modal-transition);
85
+ transition: all $modal-transition;
86
86
  }
87
87
 
88
88
  &.show .#{$vendor-prefix}modal-handle {
@@ -93,11 +93,11 @@
93
93
  @if index($modal-animation, "from-above") {
94
94
  &.from-above {
95
95
  .#{$vendor-prefix}modal-handle {
96
- @include transform(scale(1.3));
96
+ transform: scale(1.3);
97
97
  }
98
98
 
99
99
  &.show .#{$vendor-prefix}modal-handle {
100
- @include transform(scale(1));
100
+ transform: scale(1);
101
101
  }
102
102
  }
103
103
  }
@@ -105,11 +105,11 @@
105
105
  @if index($modal-animation, "from-below") {
106
106
  &.from-below {
107
107
  .#{$vendor-prefix}modal-handle {
108
- @include transform(scale(0.7));
108
+ transform: scale(0.7);
109
109
  }
110
110
 
111
111
  &.show .#{$vendor-prefix}modal-handle {
112
- @include transform(scale(1));
112
+ transform: scale(1);
113
113
  }
114
114
  }
115
115
  }
@@ -117,11 +117,11 @@
117
117
  @if index($modal-animation, "slide-in-top") {
118
118
  &.slide-in-top {
119
119
  .#{$vendor-prefix}modal-handle {
120
- @include transform(translateY(-50%));
120
+ transform: translateY(-50%);
121
121
  }
122
122
 
123
123
  &.show .#{$vendor-prefix}modal-handle {
124
- @include transform(translateY(0));
124
+ transform: translateY(0);
125
125
  }
126
126
  }
127
127
  }
@@ -129,11 +129,11 @@
129
129
  @if index($modal-animation, "slide-in-bottom") {
130
130
  &.slide-in-bottom {
131
131
  .#{$vendor-prefix}modal-handle {
132
- @include transform(translateY(50%));
132
+ transform: translateY(50%);
133
133
  }
134
134
 
135
135
  &.show .#{$vendor-prefix}modal-handle {
136
- @include transform(translateY(0));
136
+ transform: translateY(0);
137
137
  }
138
138
  }
139
139
  }
@@ -141,12 +141,12 @@
141
141
  @if index($modal-animation, "slide-in-left") {
142
142
  &.slide-in-left {
143
143
  .#{$vendor-prefix}modal-handle {
144
- @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
145
- @include transform(translateX(-50%));
144
+ transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
145
+ transform: translateX(-50%);
146
146
  }
147
147
 
148
148
  &.show .#{$vendor-prefix}modal-handle {
149
- @include transform(translateX(0));
149
+ transform: translateX(0);
150
150
  }
151
151
  }
152
152
  }
@@ -154,12 +154,12 @@
154
154
  @if index($modal-animation, "slide-in-right") {
155
155
  &.slide-in-right {
156
156
  .#{$vendor-prefix}modal-handle {
157
- @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
158
- @include transform(translateX(50%));
157
+ transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
158
+ transform: translateX(50%);
159
159
  }
160
160
 
161
161
  &.show .#{$vendor-prefix}modal-handle {
162
- @include transform(translateX(0));
162
+ transform: translateX(0);
163
163
  }
164
164
  }
165
165
  }
@@ -169,7 +169,7 @@
169
169
  .#{$vendor-prefix}modal-outer {
170
170
  top: -100%;
171
171
  opacity: 0;
172
- @include transition(all $modal-transition);
172
+ transition: all $modal-transition;
173
173
  }
174
174
 
175
175
  &.show .#{$vendor-prefix}modal-outer {
@@ -185,7 +185,7 @@
185
185
  top: auto;
186
186
  bottom: -100%;
187
187
  opacity: 0;
188
- @include transition(all $modal-transition);
188
+ transition: all $modal-transition;
189
189
  }
190
190
 
191
191
  &.show .#{$vendor-prefix}modal-outer {
@@ -201,8 +201,8 @@
201
201
  left: -100%;
202
202
  opacity: 0;
203
203
  top: 50%;
204
- @include transition(all $modal-transition);
205
- @include transform(translate(0, -50%));
204
+ transition: all $modal-transition;
205
+ transform: translate(0, -50%);
206
206
  }
207
207
 
208
208
  &.show .#{$vendor-prefix}modal-outer {
@@ -219,8 +219,8 @@
219
219
  right: -100%;
220
220
  top: 50%;
221
221
  opacity: 0;
222
- @include transition(all $modal-transition);
223
- @include transform(translate(0, -50%));
222
+ transition: all $modal-transition;
223
+ transform: translate(0, -50%);
224
224
  }
225
225
 
226
226
  &.show .#{$vendor-prefix}modal-outer {
@@ -23,7 +23,7 @@
23
23
  display: block;
24
24
  }
25
25
 
26
- &.#{$state-is-prefix}active {
26
+ &.is-active {
27
27
  z-index: 1;
28
28
  }
29
29
  }
@@ -50,7 +50,7 @@
50
50
  }
51
51
 
52
52
  &.#{$shape-round-class} {
53
- ul {
53
+ ul, ol {
54
54
  border-radius: $round;
55
55
  }
56
56
 
@@ -7,9 +7,9 @@
7
7
  @import "../common";
8
8
 
9
9
  .#{$vendor-prefix}pin.sticky {
10
- @include transition(top 1s ease-in-out, right .5s ease-in-out, left .5s ease-in-out);
10
+ transition: top .6s ease-in-out, right $pin-transition ease-in-out, left $pin-transition ease-in-out;
11
11
  }
12
12
 
13
13
  .#{$vendor-prefix}pin.slide {
14
- @include transition(top .5s linear, right .5s linear, left .5s linear);
14
+ transition: top $pin-transition linear, right $pin-transition linear, left $pin-transition linear;
15
15
  }
@@ -37,7 +37,7 @@
37
37
  text-align: center;
38
38
  font-size: $medium-size;
39
39
  float: left;
40
- @include transition(width $progress-transition, background $progress-transition);
40
+ transition: width $progress-transition, background $progress-transition;
41
41
  }
42
42
 
43
43
  .#{$vendor-prefix}progress.#{$shape-round-class} {
@@ -19,11 +19,11 @@
19
19
  visibility: hidden;
20
20
  -webkit-backface-visibility: hidden;
21
21
  backface-visibility: hidden;
22
- @include transform(translateX(-50%) translateY(-50%));
23
- @include transition(opacity $showcase-transition, visibility $showcase-transition);
22
+ transform: translate(-50%, -50%);
23
+ transition: opacity $showcase-transition, visibility $showcase-transition;
24
24
 
25
- &.#{$state-is-prefix}loading,
26
- &.#{$state-is-prefix}single {
25
+ &.is-loading,
26
+ &.is-single {
27
27
  .#{$vendor-prefix}showcase-prev,
28
28
  .#{$vendor-prefix}showcase-next,
29
29
  .#{$vendor-prefix}showcase-tabs {
@@ -31,7 +31,7 @@
31
31
  }
32
32
  }
33
33
 
34
- &.#{$state-is-prefix}loading {
34
+ &.is-loading {
35
35
  .#{$vendor-prefix}showcase-close {
36
36
  display: none !important;
37
37
  }
@@ -60,14 +60,14 @@
60
60
  max-width: 1024px;
61
61
  position: relative;
62
62
  overflow: hidden;
63
- @include transition(width $showcase-transition, height $showcase-transition);
63
+ transition: width $showcase-transition, height $showcase-transition;
64
64
 
65
65
  > li {
66
66
  position: absolute;
67
67
  top: 0;
68
68
  left: 0;
69
69
  opacity: 0;
70
- @include transition(opacity $showcase-transition);
70
+ transition: opacity $showcase-transition;
71
71
 
72
72
  > img {
73
73
  max-width: 100%;
@@ -110,7 +110,7 @@
110
110
  top: 50%;
111
111
  background: none;
112
112
  border: 0;
113
- @include transform(translateY(-50%)); // move up 50% of their height
113
+ transform: translateY(-50%); // move up 50% of their height
114
114
 
115
115
  &:focus { outline: none; }
116
116
  }
@@ -122,5 +122,5 @@
122
122
  position: absolute;
123
123
  top: ($padding * 2);
124
124
  left: 50%;
125
- @include transform(translateX(-50%)); // move left 50% of their width
125
+ transform: translateX(-50%); // move left 50% of their width
126
126
  }
@@ -0,0 +1,65 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ .#{$vendor-prefix}steps {
10
+ margin: $margin 0;
11
+ font-size: $medium-size;
12
+
13
+ ol {
14
+ @include reset-list;
15
+ display: inline-block;
16
+ overflow: hidden;
17
+ @include clear-fix;
18
+ }
19
+
20
+ // Use em's to scale against the size defined on .steps
21
+ .#{$vendor-prefix}step {
22
+ padding: 0 2em 0 3.5em;
23
+ position: relative;
24
+ display: block;
25
+ line-height: 3em;
26
+ height: 3em;
27
+
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);
38
+ }
39
+ }
40
+
41
+ li {
42
+ @include reset-inline-block;
43
+ float: left;
44
+
45
+ &:first-child {
46
+ .#{$vendor-prefix}step {
47
+ padding-left: 2em;
48
+ }
49
+ }
50
+
51
+ &:last-child {
52
+ .#{$vendor-prefix}step {
53
+ &:after { display: none; }
54
+ }
55
+ }
56
+ }
57
+
58
+ @include is-small {
59
+ font-size: $small-size;
60
+ }
61
+
62
+ @include is-large {
63
+ font-size: $large-size;
64
+ }
65
+ }
@@ -0,0 +1,123 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ .#{$vendor-prefix}switch {
10
+ @include reset-inline-block;
11
+ font-size: 0;
12
+ width: 100px;
13
+ cursor: pointer;
14
+
15
+ &.is-disabled {
16
+ opacity: $disabled-opacity;
17
+ }
18
+
19
+ &.#{$shape-round-class} {
20
+ .#{$vendor-prefix}switch-toggle {
21
+ border-radius: $round - 0.02;
22
+ }
23
+ }
24
+
25
+ input {
26
+ display: none;
27
+
28
+ &:checked + .#{$vendor-prefix}switch-bar {
29
+ .#{$vendor-prefix}switch-toggle {
30
+ left: 50%;
31
+ }
32
+
33
+ &:before { opacity: 1; }
34
+ &:after { opacity: 0; }
35
+ }
36
+ }
37
+
38
+ @include is-small() {
39
+ width: 70px;
40
+
41
+ .#{$vendor-prefix}switch-bar {
42
+ font-size: $small-size;
43
+
44
+ &:before,
45
+ &:after {
46
+ padding: $small-padding;
47
+ }
48
+ }
49
+
50
+ .#{$vendor-prefix}switch-toggle {
51
+ padding: $small-padding;
52
+ }
53
+ }
54
+
55
+ @include is-large() {
56
+ width: 130px;
57
+
58
+ .#{$vendor-prefix}switch-bar {
59
+ font-size: $large-size;
60
+
61
+ &:before,
62
+ &:after {
63
+ padding: $large-padding;
64
+ }
65
+ }
66
+
67
+ .#{$vendor-prefix}switch-toggle {
68
+ padding: $large-padding;
69
+ }
70
+ }
71
+ }
72
+
73
+ .#{$vendor-prefix}switch-bar {
74
+ display: block;
75
+ position: relative;
76
+ font-size: $medium-size;
77
+ transition: background $switch-transition;
78
+
79
+ &:before,
80
+ &:after {
81
+ position: absolute;
82
+ padding: $medium-padding;
83
+ top: 0;
84
+ opacity: 1;
85
+ z-index: 1;
86
+ transition: opacity $switch-transition;
87
+ }
88
+
89
+ &:before {
90
+ left: 0;
91
+ opacity: 0;
92
+ content: attr(data-switch-on);
93
+ }
94
+
95
+ &:after {
96
+ right: 0;
97
+ content: attr(data-switch-off);
98
+ }
99
+ }
100
+
101
+ .#{$vendor-prefix}switch-toggle {
102
+ @include reset-inline-block;
103
+ padding: $medium-padding;
104
+ width: 50%;
105
+ z-index: 2;
106
+ left: 0;
107
+ user-select: none;
108
+ transition: left $switch-transition;
109
+
110
+ &:before { content: "\00A0"; } // NBSP
111
+ }
112
+
113
+ //-------------------- Modifiers --------------------//
114
+
115
+ .#{$vendor-prefix}switch--stacked {
116
+ .#{$vendor-prefix}switch-bar {
117
+ &:before,
118
+ &:after {
119
+ z-index: 3;
120
+ opacity: 1 !important;
121
+ }
122
+ }
123
+ }