titon-toolkit 1.2.2 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }