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
@@ -52,17 +52,17 @@
52
52
 
53
53
  //-------------------- Modifiers --------------------//
54
54
 
55
- .#{$vendor-prefix}table.#{$state-has-prefix}hover {
55
+ .#{$vendor-prefix}table.has-hover {
56
56
  tbody tr:not(.#{$vendor-prefix}table-divider):hover { background: #fff; }
57
57
  }
58
58
 
59
- .#{$vendor-prefix}table.#{$state-is-prefix}striped tbody tr {
59
+ .#{$vendor-prefix}table.is-striped tbody tr {
60
60
  background: $gray;
61
61
 
62
62
  &:nth-child(odd) { background: $gray-lightest; }
63
63
  }
64
64
 
65
- .#{$vendor-prefix}table.#{$state-is-prefix}sortable {
65
+ .#{$vendor-prefix}table.is-sortable {
66
66
  thead th {
67
67
  padding: 0;
68
68
 
@@ -86,7 +86,7 @@
86
86
  thead th,
87
87
  tbody td { padding: $small-padding; }
88
88
 
89
- &.#{$state-is-prefix}sortable {
89
+ &.is-sortable {
90
90
  thead th {
91
91
  padding: 0;
92
92
 
@@ -100,7 +100,7 @@
100
100
  thead th,
101
101
  tbody td { padding: $large-padding; }
102
102
 
103
- &.#{$state-is-prefix}sortable {
103
+ &.is-sortable {
104
104
  thead th {
105
105
  padding: 0;
106
106
 
@@ -20,7 +20,7 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
20
20
  visibility: hidden;
21
21
  background: #000;
22
22
  color: #fff;
23
- @include box-sizing(content-box); // Required or else MooTools position() is off
23
+ box-sizing: content-box; // Required or else MooTools position() is off
24
24
 
25
25
  &.center-left .#{$vendor-prefix}tooltip-arrow,
26
26
  &.center-right .#{$vendor-prefix}tooltip-arrow {
@@ -76,39 +76,39 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
76
76
  @if index($popover-tooltip-animation, "fade") {
77
77
  &.fade {
78
78
  opacity: 0;
79
- @include transition(opacity 0.5s);
79
+ transition: opacity 0.5s;
80
80
  }
81
81
  }
82
82
 
83
83
  @if index($popover-tooltip-animation, "from-above") {
84
84
  &.from-above {
85
- @include transition(transform $tooltip-transition);
86
- @include transform(scale(1.2));
85
+ transition: transform $tooltip-transition;
86
+ transform: scale(1.2);
87
87
 
88
88
  &.show {
89
- @include transform(scale(1));
89
+ transform: scale(1);
90
90
  }
91
91
  }
92
92
  }
93
93
 
94
94
  @if index($popover-tooltip-animation, "from-below") {
95
95
  &.from-below {
96
- @include transition(transform $tooltip-transition);
97
- @include transform(scale(0.8));
96
+ transition: transform $tooltip-transition;
97
+ transform: scale(0.8);
98
98
 
99
99
  &.show {
100
- @include transform(scale(1));
100
+ transform: scale(1);
101
101
  }
102
102
  }
103
103
  }
104
104
 
105
105
  @if index($popover-tooltip-animation, "flip-rotate") {
106
106
  &.flip-rotate {
107
- @include transition(transform $tooltip-transition);
108
- @include transform(rotate(-15deg));
107
+ transition: transform $tooltip-transition;
108
+ transform: rotate(-15deg);
109
109
 
110
110
  &.show {
111
- @include transform(rotate(0deg));
111
+ transform: rotate(0deg);
112
112
  }
113
113
  }
114
114
  }
@@ -13,7 +13,7 @@
13
13
  z-index: $typeAhead-zindex;
14
14
  opacity: 0;
15
15
  visibility: hidden;
16
- @include transition(opacity 0.3s);
16
+ transition: opacity 0.3s;
17
17
 
18
18
  ul {
19
19
  @include reset-list;
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  > a:hover,
32
- &.#{$state-is-prefix}active a {}
32
+ &.is-active a {}
33
33
  }
34
34
  }
35
35
 
@@ -52,13 +52,6 @@
52
52
 
53
53
  .#{$vendor-prefix}type-ahead-shadow {
54
54
  position: relative;
55
- height: 2rem;
56
-
57
- input {
58
- position: absolute;
59
- top: 0;
60
- left: 0;
61
- }
62
55
 
63
56
  .is-shadow {
64
57
  color: gray;
@@ -66,6 +59,10 @@
66
59
 
67
60
  .not-shadow {
68
61
  background: transparent;
69
- z-index: 1;
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ z-index: 2;
66
+ zoom: 1;
70
67
  }
71
68
  }
@@ -75,6 +75,16 @@
75
75
  }
76
76
  }
77
77
 
78
+ //-------------------- Switch --------------------//
79
+
80
+ .#{$vendor-prefix}switch.#{$shape-pill-class} {
81
+ border-radius: $pill;
82
+
83
+ .#{$vendor-prefix}switch-toggle {
84
+ border-radius: $pill;
85
+ }
86
+ }
87
+
78
88
  //-------------------- Visual --------------------//
79
89
 
80
90
  .#{$vendor-prefix}visual-gloss.#{$shape-pill-class}:after {
@@ -17,7 +17,7 @@
17
17
  top: 1%;
18
18
  left: 0;
19
19
  border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
20
- @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
20
+ background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
21
21
  }
22
22
 
23
23
  &.#{$shape-round-class}:after {
@@ -36,7 +36,7 @@
36
36
  height: 50%;
37
37
  top: 0;
38
38
  left: 0;
39
- @include background-image(linear-gradient(top, white(0), white(.3)));
39
+ background: linear-gradient(180deg, white(0), white(.3));
40
40
  }
41
41
 
42
42
  //-------------------- Glare --------------------//
@@ -48,7 +48,7 @@
48
48
  height: 100%;
49
49
  top: 0;
50
50
  left: 0;
51
- @include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
51
+ background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
52
52
  }
53
53
 
54
54
  //-------------------- Popout --------------------//
@@ -7,7 +7,7 @@
7
7
  @import "../common";
8
8
 
9
9
  // Use border-box for everything
10
- *, *:after, *:before { @include box-sizing(border-box); }
10
+ *, *:after, *:before { box-sizing: border-box; }
11
11
 
12
12
  // Alignment
13
13
  .align-left { text-align: left; }
@@ -33,16 +33,16 @@
33
33
  position: absolute;
34
34
  left: 50%;
35
35
  top: 50%;
36
- @include transform(translate(-50%, -50%));
36
+ transform: translate(-50%, -50%);
37
37
  }
38
38
 
39
39
  .clear-fix { @include clear-fix; }
40
40
 
41
41
  // Styles
42
42
  .#{$shape-round-class} { border-radius: $round; }
43
- .#{$state-is-prefix}draggable { cursor: move; }
44
- .#{$state-is-prefix}dragging { cursor: grabbing; }
45
- .#{$state-is-prefix}disabled,
43
+ .is-draggable { cursor: move; }
44
+ .is-dragging { cursor: grabbing; }
45
+ .is-disabled,
46
46
  [disabled] { cursor: not-allowed !important; }
47
47
 
48
48
  // Carets
@@ -84,9 +84,9 @@
84
84
  content: "\025B4"; /* blacktriangle */
85
85
  }
86
86
 
87
- .arrow-right:before { @include transform(rotate(90deg)); }
88
- .arrow-left:before { @include transform(rotate(-90deg)); }
89
- .arrow-down:before { @include transform(rotate(180deg)); }
87
+ .arrow-right:before { transform: rotate(90deg); }
88
+ .arrow-left:before { transform: rotate(-90deg); }
89
+ .arrow-down:before { transform: rotate(180deg); }
90
90
 
91
91
  // Bullets
92
92
  .bullets {
@@ -45,7 +45,7 @@ pre {
45
45
  display: block;
46
46
  }
47
47
 
48
- &.#{$state-is-prefix}scrollable {
48
+ &.is-scrollable {
49
49
  max-height: 350px;
50
50
  overflow-y: auto;
51
51
  }
@@ -26,15 +26,9 @@ legend {
26
26
  select[multiple],
27
27
  select[size] { height: auto; }
28
28
 
29
- // Reset browser styles
30
- input::-moz-focus-inner {
31
- padding: 0;
32
- border: 0;
33
- }
34
-
35
29
  // Override normalize
36
30
  input[type="search"] {
37
- @include box-sizing(border-box);
31
+ box-sizing: border-box;
38
32
  }
39
33
 
40
34
  // Required values to match browser restrictions
@@ -62,7 +56,7 @@ label,
62
56
  .#{$vendor-prefix}input {
63
57
  background: $gray-lightest;
64
58
  border-radius: $round;
65
- @include transition(all $default-transition);
59
+ transition: all $default-transition;
66
60
 
67
61
  &:hover { border-color: $gray-darkest; }
68
62
 
@@ -126,13 +120,13 @@ textarea.#{$vendor-prefix}input {
126
120
  .#{$vendor-prefix}field {
127
121
  margin-bottom: $margin;
128
122
 
129
- &.#{$state-is-prefix}required {
123
+ &.is-required {
130
124
  .#{$vendor-prefix}field-label { font-weight: bold; }
131
125
  }
132
126
  }
133
127
 
134
- .#{$vendor-prefix}field:not(.#{$state-is-prefix}disabled) {
135
- &.#{$state-is-prefix}error {
128
+ .#{$vendor-prefix}field:not(.is-disabled) {
129
+ &.is-error {
136
130
  .#{$vendor-prefix}input {
137
131
  border-color: $error;
138
132
 
@@ -145,7 +139,7 @@ textarea.#{$vendor-prefix}input {
145
139
  }
146
140
  }
147
141
 
148
- &.#{$state-is-prefix}success {
142
+ &.is-success {
149
143
  .#{$vendor-prefix}input {
150
144
  border-color: $success;
151
145
 
@@ -27,7 +27,7 @@
27
27
  position: absolute;
28
28
  left: 50%;
29
29
  top: 50%;
30
- @include transform(translate(-50%, -50%));
30
+ transform: translate(-50%, -50%);
31
31
  }
32
32
 
33
33
  @mixin size-small {
@@ -1,36 +1,36 @@
1
1
 
2
2
  @mixin is-active {
3
- .#{$state-is-prefix}active > &,
4
- .#{$state-is-prefix}active > li > &,
5
- &.#{$state-is-prefix}active,
6
- &.#{$state-is-prefix}active:hover { @content; }
3
+ .is-active > &,
4
+ .is-active > li > &,
5
+ &.is-active,
6
+ &.is-active:hover { @content; }
7
7
  }
8
8
 
9
9
  @mixin is-active-parent {
10
- .#{$state-is-prefix}active & { @content; }
10
+ .is-active & { @content; }
11
11
  }
12
12
 
13
13
  @mixin is-disabled {
14
- .#{$state-is-prefix}disabled > &,
15
- .#{$state-is-prefix}disabled > li > &,
16
- &.#{$state-is-prefix}disabled,
17
- &.#{$state-is-prefix}disabled:hover,
14
+ .is-disabled > &,
15
+ .is-disabled > li > &,
16
+ &.is-disabled,
17
+ &.is-disabled:hover,
18
18
  &[disabled],
19
19
  &[disabled]:hover { @content; }
20
20
  }
21
21
 
22
22
  @mixin is-info {
23
- &.#{$state-is-prefix}info { @content; }
23
+ &.is-info { @content; }
24
24
  }
25
25
 
26
26
  @mixin is-error {
27
- &.#{$state-is-prefix}error { @content; }
27
+ &.is-error { @content; }
28
28
  }
29
29
 
30
30
  @mixin is-warning {
31
- &.#{$state-is-prefix}warning { @content; }
31
+ &.is-warning { @content; }
32
32
  }
33
33
 
34
34
  @mixin is-success {
35
- &.#{$state-is-prefix}success { @content; }
35
+ &.is-success { @content; }
36
36
  }
@@ -36,7 +36,7 @@ mark { background: lighten($warning-light, 25%); }
36
36
  background: $gray;
37
37
  border: 1px solid $gray-dark;
38
38
  margin: -1px;
39
- @include transition(all .15s);
39
+ transition: all .15s;
40
40
 
41
41
  &:hover { background-color: $gray-light; }
42
42
 
@@ -91,7 +91,7 @@ mark { background: lighten($warning-light, 25%); }
91
91
  background: $gray;
92
92
  font-weight: bold;
93
93
  text-shadow: 1px 1px black(.2);
94
- @include transition(all .2s);
94
+ transition: all .2s;
95
95
  @include button-style($default, $default-light, $default-dark);
96
96
 
97
97
  &:active {
@@ -146,10 +146,7 @@ mark { background: lighten($warning-light, 25%); }
146
146
 
147
147
  //-------------------- Drop --------------------//
148
148
 
149
- .drop--down,
150
- .drop--up,
151
- .drop--right,
152
- .drop--left {
149
+ .drop {
153
150
  background: $gray;
154
151
  border: 1px solid $gray-dark;
155
152
  box-shadow: 5px 5px black(.25);
@@ -250,7 +247,7 @@ mark { background: lighten($warning-light, 25%); }
250
247
  .checkbox,
251
248
  .radio,
252
249
  .select {
253
- @include transition(all $default-transition);
250
+ transition: all $default-transition;
254
251
  }
255
252
 
256
253
  input {
@@ -268,7 +265,7 @@ mark { background: lighten($warning-light, 25%); }
268
265
  .select.is-active {
269
266
  .caret-down {
270
267
  top: -5px;
271
- @include transform(rotate(-180deg));
268
+ transform: rotate(-180deg);
272
269
  }
273
270
  }
274
271
  }
@@ -402,7 +399,7 @@ mark { background: lighten($warning-light, 25%); }
402
399
 
403
400
  &.top-center .popover-arrow {
404
401
  border-top-color: black(.25);
405
- @include transform(translateY(6px));
402
+ transform: translateY(6px);
406
403
 
407
404
  &:after {
408
405
  margin-top: -8px;
@@ -412,7 +409,7 @@ mark { background: lighten($warning-light, 25%); }
412
409
 
413
410
  &.center-left .popover-arrow {
414
411
  border-left-color: black(.25);
415
- @include transform(translateX(6px));
412
+ transform: translateX(6px);
416
413
 
417
414
  &:after {
418
415
  margin-left: -8px;
@@ -485,6 +482,54 @@ mark { background: lighten($warning-light, 25%); }
485
482
  border: 1px solid $gray-dark;
486
483
  }
487
484
 
485
+ //-------------------- Step --------------------//
486
+
487
+ .steps ol {
488
+ border: 1px solid $gray-dark;
489
+ background: $gray;
490
+ }
491
+
492
+ .step:after {
493
+ background: $gray;
494
+ border-right: 1px solid $gray-dark;
495
+ border-bottom: 1px solid $gray-dark;
496
+ }
497
+
498
+ a.step:hover,
499
+ a.step:hover:after {
500
+ background: $gray-lightest;
501
+ }
502
+
503
+ .steps li.is-complete {
504
+ a.step,
505
+ a.step:after {
506
+ background: $info;
507
+ color: #fff;
508
+ }
509
+ }
510
+
511
+ //-------------------- Switch --------------------//
512
+
513
+ .switch {
514
+ overflow: hidden;
515
+ background: $gray-light;
516
+ border: 1px solid $gray-dark;
517
+
518
+ input:checked + .switch-bar {
519
+ background: $info;
520
+ color: #fff;
521
+ }
522
+ }
523
+
524
+ .switch-toggle {
525
+ background: #fff;
526
+ }
527
+
528
+ .switch--stacked input:not(:checked) + .switch-bar:before,
529
+ .switch--stacked input:checked + .switch-bar:after {
530
+ color: $foreground-color;
531
+ }
532
+
488
533
  //-------------------- Tooltip --------------------//
489
534
 
490
535
  .tooltip {