titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

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 (59) hide show
  1. checksums.yaml +4 -4
  2. data/changelog.md +180 -61
  3. data/license.md +1 -1
  4. data/readme.md +7 -7
  5. data/roadmap.md +4 -20
  6. data/scss/toolkit/_common.scss +426 -73
  7. data/scss/toolkit/{layout/base.scss → base.scss} +13 -25
  8. data/scss/toolkit/components/accordion.scss +6 -6
  9. data/scss/toolkit/components/blackout.scss +13 -11
  10. data/scss/toolkit/components/breadcrumb.scss +2 -2
  11. data/scss/toolkit/components/button-group.scss +130 -51
  12. data/scss/toolkit/components/button.scss +110 -9
  13. data/scss/toolkit/components/carousel.scss +20 -46
  14. data/scss/toolkit/{layout → components}/code.scss +1 -1
  15. data/scss/toolkit/components/divider.scss +24 -23
  16. data/scss/toolkit/components/drop.scss +35 -26
  17. data/scss/toolkit/components/flyout.scss +5 -10
  18. data/scss/toolkit/{layout → components}/form.scss +72 -65
  19. data/scss/toolkit/components/grid.scss +21 -116
  20. data/scss/toolkit/components/icon.scss +27 -13
  21. data/scss/toolkit/components/input-group.scss +4 -6
  22. data/scss/toolkit/components/input.scss +21 -21
  23. data/scss/toolkit/components/label.scss +76 -66
  24. data/scss/toolkit/components/lazy-load.scss +2 -2
  25. data/scss/toolkit/components/loader.scss +8 -8
  26. data/scss/toolkit/components/mask.scss +5 -9
  27. data/scss/toolkit/components/matrix.scss +4 -4
  28. data/scss/toolkit/components/modal.scss +33 -40
  29. data/scss/toolkit/components/notice.scss +5 -9
  30. data/scss/toolkit/components/off-canvas.scss +80 -60
  31. data/scss/toolkit/components/pagination.scss +75 -34
  32. data/scss/toolkit/components/pin.scss +7 -3
  33. data/scss/toolkit/components/popover.scss +14 -14
  34. data/scss/toolkit/components/progress.scss +25 -14
  35. data/scss/toolkit/{layout → components}/responsive.scss +31 -37
  36. data/scss/toolkit/components/showcase.scss +10 -36
  37. data/scss/toolkit/components/step.scss +7 -7
  38. data/scss/toolkit/components/switch.scss +47 -33
  39. data/scss/toolkit/components/tab.scss +42 -0
  40. data/scss/toolkit/components/table.scss +27 -25
  41. data/scss/toolkit/components/toast.scss +13 -9
  42. data/scss/toolkit/components/tooltip.scss +15 -16
  43. data/scss/toolkit/components/type-ahead.scss +6 -6
  44. data/scss/toolkit/{layout → components}/typography.scss +2 -2
  45. data/scss/toolkit/mixins/_components.scss +12 -6
  46. data/scss/toolkit/mixins/_grid.scss +5 -1
  47. data/scss/toolkit/mixins/_helper.scss +42 -3
  48. data/scss/toolkit/mixins/_layout.scss +22 -13
  49. data/scss/toolkit/mixins/_responsive.scss +39 -39
  50. data/scss/toolkit.scss +12 -18
  51. data/version.md +1 -1
  52. metadata +16 -22
  53. data/scss/toolkit/components/tabs.scss +0 -43
  54. data/scss/toolkit/effects/oval.scss +0 -37
  55. data/scss/toolkit/effects/pill.scss +0 -94
  56. data/scss/toolkit/effects/skew.scss +0 -85
  57. data/scss/toolkit/effects/visual.scss +0 -64
  58. data/scss/toolkit/mixins/_state.scss +0 -36
  59. data/scss/toolkit/themes/demo.scss +0 -569
@@ -1,29 +1,31 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
- .#{$vendor-prefix}blackout {
10
- position: fixed;
11
- top: 0;
12
- left: 0;
13
- height: 100%;
14
- width: 100%;
9
+ #{$blackout-class} {
10
+ @include full-screen();
15
11
  z-index: $blackout-zindex;
16
12
  opacity: 0;
17
13
  visibility: hidden;
18
14
  background: black($blackout-opacity);
19
- transition: all $blackout-transition;
20
15
 
21
- .#{$vendor-prefix}loader {
16
+ // Using visibility transition also causes weirdness
17
+ transition: opacity $blackout-transition;
18
+
19
+ // This fixes issues in Chrome where the blackout properties are visible/block
20
+ // But the blackout is still not visible by the client IRL
21
+ -webkit-backface-visibility: hidden;
22
+
23
+ #{$loader-class} {
24
+ @include position-center;
22
25
  opacity: 1;
23
26
  color: #fff;
24
- @include position-center;
25
27
 
26
28
  > span,
27
- .spinner > span { background: #fff !important; }
29
+ #{$loader-class-spinner} > span { background: #fff !important; }
28
30
  }
29
31
  }
@@ -1,12 +1,12 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
- .#{$vendor-prefix}breadcrumb {
9
+ #{$breadcrumb-class} {
10
10
  text-align: left;
11
11
  margin: $margin 0;
12
12
 
@@ -1,24 +1,22 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
- .#{$vendor-prefix}button-group {
9
+ #{$buttonGroup-class} {
10
10
  @include reset-inline-block;
11
11
  @include reset-list;
12
+ @include clear-fix;
12
13
  white-space: nowrap;
13
14
 
14
15
  > li,
15
- > .#{$vendor-prefix}button {
16
+ > #{$button-class} {
16
17
  float: left;
17
- margin-left: -1px;
18
18
  border-radius: 0;
19
19
 
20
- &:first-child { margin-left: 0; }
21
-
22
20
  &:hover,
23
21
  &.is-active { z-index: 1; }
24
22
  }
@@ -27,15 +25,15 @@
27
25
  position: relative;
28
26
  list-style: none;
29
27
 
30
- .#{$vendor-prefix}button {
28
+ #{$button-class} {
31
29
  display: block;
32
30
  border-radius: 0;
33
31
  }
34
32
  }
35
33
 
36
- &.#{$shape-round-class} {
37
- border-radius: $round;
34
+ //----- Effects -----//
38
35
 
36
+ &#{$shape-round-class} {
39
37
  @include button-group-first-child {
40
38
  border-top-left-radius: $round;
41
39
  border-bottom-left-radius: $round;
@@ -47,66 +45,147 @@
47
45
  }
48
46
  }
49
47
 
50
- @include clear-fix;
48
+ @if index($buttonGroup-effects, "pill") {
49
+ &#{$shape-pill-class} {
50
+ border-radius: $pill;
51
+
52
+ @include button-group-first-child {
53
+ border-top-left-radius: $pill;
54
+ border-bottom-left-radius: $pill;
55
+ }
56
+
57
+ @include button-group-last-child {
58
+ border-top-right-radius: $pill;
59
+ border-bottom-right-radius: $pill;
60
+ }
61
+ }
62
+ }
63
+
64
+ @if index($buttonGroup-effects, "skew") {
65
+ &#{$shape-skew-class} {
66
+ border-top-left-radius: $skew;
67
+ border-top-right-radius: $skew;
68
+ border-bottom-left-radius: 0;
69
+ border-bottom-right-radius: 0;
70
+
71
+ @include button-group-first-child {
72
+ border-top-left-radius: $skew;
73
+ border-bottom-left-radius: 0;
74
+ }
75
+
76
+ @include button-group-last-child {
77
+ border-top-right-radius: $skew;
78
+ border-bottom-right-radius: 0;
79
+ }
80
+ }
81
+ }
51
82
  }
52
83
 
53
84
  // Space out groups
54
- .#{$vendor-prefix}button-group + .#{$vendor-prefix}button-group {
85
+ #{$buttonGroup-class} + #{$buttonGroup-class} {
55
86
  margin-left: $margin;
56
87
  }
57
88
 
58
89
  //-------------------- Modifiers --------------------//
59
90
 
60
- .#{$vendor-prefix}button-group--vertical {
61
- @extend .#{$vendor-prefix}button-group;
62
- vertical-align: top;
91
+ @if index($buttonGroup-modifiers, "vertical") {
92
+ #{$buttonGroup-class-modifier-vertical} {
93
+ vertical-align: top;
63
94
 
64
- > li,
65
- > .#{$vendor-prefix}button {
66
- float: none;
67
- display: block;
68
- margin: -1px 0 0 0;
69
- width: 100%;
70
- max-width: 100%;
95
+ > li,
96
+ > #{$button-class} {
97
+ float: none;
98
+ display: block;
99
+ width: 100%;
100
+ max-width: 100%;
71
101
 
72
- &:first-child { margin-top: 0; }
73
- &:hover { z-index: 1; }
74
- }
102
+ &:hover { z-index: 1; }
103
+ }
75
104
 
76
- &.#{$shape-round-class},
77
- &.#{$shape-pill-class},
78
- &.#{$shape-skew-class},
79
- &.#{$shape-skew-class}-reverse {
80
- .#{$vendor-prefix}button { border-radius: 0; }
81
- }
105
+ &#{$shape-round-class},
106
+ &#{$shape-pill-class},
107
+ &#{$shape-skew-class},
108
+ &#{$shape-skew-class}-reverse {
109
+ #{$button-class} { border-radius: 0; }
110
+ }
82
111
 
83
- &.#{$shape-round-class} {
84
- @include button-group-first-child {
85
- border-top-left-radius: $round;
86
- border-top-right-radius: $round;
112
+ //----- Effects -----//
113
+
114
+ &#{$shape-round-class} {
115
+ #{$button-class}:first-child,
116
+ #{$button-class}:last-child { border-radius: 0; }
117
+
118
+ @include button-group-first-child {
119
+ border-top-left-radius: $round;
120
+ border-top-right-radius: $round;
121
+ }
122
+
123
+ @include button-group-last-child {
124
+ border-bottom-left-radius: $round;
125
+ border-bottom-right-radius: $round;
126
+ }
87
127
  }
88
128
 
89
- @include button-group-last-child {
90
- border-bottom-left-radius: $round;
91
- border-bottom-right-radius: $round;
129
+ @if index($buttonGroup-effects, "pill") {
130
+ &#{$shape-pill-class} {
131
+ border-radius: $pill;
132
+
133
+ @include button-group-first-child {
134
+ border-top-left-radius: $pill;
135
+ border-top-right-radius: $pill;
136
+ border-bottom-left-radius: 0;
137
+ border-bottom-right-radius: 0;
138
+ }
139
+
140
+ @include button-group-last-child {
141
+ border-top-left-radius: 0;
142
+ border-top-right-radius: 0;
143
+ border-bottom-left-radius: $pill;
144
+ border-bottom-right-radius: $pill;
145
+ }
146
+ }
147
+ }
148
+
149
+ @if index($buttonGroup-effects, "skew") {
150
+ &#{$shape-skew-class} {
151
+ border-top-left-radius: $skew-y 1.5rem;
152
+ border-bottom-left-radius: $skew-y 1.5rem;
153
+
154
+ @include button-group-first-child {
155
+ border-top-left-radius: $skew-reverse;
156
+ }
157
+
158
+ @include button-group-last-child {
159
+ border-bottom-left-radius: $skew-reverse;
160
+ border-top-right-radius: 0;
161
+ }
162
+ }
163
+
164
+ &#{$shape-skew-class}-reverse {
165
+ border-top-right-radius: $skew-y 1.25rem;
166
+ border-bottom-right-radius: $skew-y 1.25rem;
167
+
168
+ @include button-group-first-child {
169
+ border-top-right-radius: $skew-reverse;
170
+ }
171
+
172
+ @include button-group-last-child {
173
+ border-bottom-right-radius: $skew-reverse;
174
+ }
175
+ }
92
176
  }
93
177
  }
94
178
  }
95
179
 
96
- .#{$vendor-prefix}button-group--justified {
97
- @extend .#{$vendor-prefix}button-group;
98
- display: table;
99
- width: 100%;
180
+ @if index($buttonGroup-modifiers, "justified") {
181
+ #{$buttonGroup-class-modifier-justified} {
182
+ display: table;
183
+ width: 100%;
100
184
 
101
- > li,
102
- > .#{$vendor-prefix}button {
103
- float: none;
104
- display: table-cell;
105
- margin: 0 !important;
185
+ > li,
186
+ > #{$button-class} {
187
+ float: none;
188
+ display: table-cell;
189
+ }
106
190
  }
107
-
108
- > li .#{$vendor-prefix}button { display: block; }
109
-
110
- > li:not(:first-child) .#{$vendor-prefix}button,
111
- > .#{$vendor-prefix}button:not(:first-child) { border-left: 0; }
112
191
  }
@@ -1,17 +1,15 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
- .#{$vendor-prefix}button {
9
+ #{$button-class} {
10
10
  @include reset-inline-block;
11
11
  border: 0;
12
12
  margin: 0;
13
- padding: 0;
14
- border-radius: 0;
15
13
  cursor: pointer;
16
14
  text-align: center;
17
15
  font-weight: normal;
@@ -19,15 +17,118 @@
19
17
  white-space: nowrap;
20
18
  text-decoration: none;
21
19
  @include size-medium;
20
+ @include is-small(true, true) { @include size-small; }
21
+ @include is-large(true, true) { @include size-large; }
22
+
23
+ &.is-disabled,
24
+ &[disabled] {
25
+ cursor: not-allowed;
26
+ }
22
27
 
23
28
  &:focus { outline: none; }
24
29
 
25
- @include is-small(true, true) { @include size-small; }
26
- @include is-large(true, true) { @include size-large; }
30
+ //----- Effects -----//
27
31
 
28
- &.#{$shape-round-class} { border-radius: $round; }
32
+ @if index($button-effects, "oval") {
33
+ &#{$shape-oval-class} {
34
+ border-radius: #{$oval-x} / #{$oval-y};
35
+ }
36
+ }
29
37
 
30
- @include is-disabled {
31
- cursor: not-allowed;
38
+ @if index($button-effects, "pill") {
39
+ &#{$shape-pill-class} {
40
+ border-radius: $pill;
41
+ }
42
+ }
43
+
44
+ @if index($button-effects, "skew") {
45
+ &#{$shape-skew-class} {
46
+ border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
47
+ }
48
+ }
49
+ }
50
+
51
+ //-------------------- Modifiers --------------------//
52
+
53
+ @if index($button-modifiers, "gloss") {
54
+ #{$button-class-modifier-gloss} {
55
+ &::after {
56
+ content: "";
57
+ position: absolute;
58
+ width: 100%;
59
+ height: 60%;
60
+ top: 1%;
61
+ left: 0;
62
+ border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
63
+ background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
64
+ }
65
+
66
+ //----- Effects -----//
67
+
68
+ &#{$shape-round-class}::after {
69
+ border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
70
+ width: 98%;
71
+ left: 1.5%;
72
+ }
73
+
74
+ @if index($button-effects, "oval") {
75
+ &#{$shape-oval-class}::after {
76
+ width: 90%;
77
+ left: 5.5%;
78
+ border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
79
+ }
80
+ }
81
+
82
+ @if index($button-effects, "pill") {
83
+ &#{$shape-pill-class}::after {
84
+ width: 90%;
85
+ left: 5.5%;
86
+ border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
87
+ }
88
+ }
89
+
90
+ @if index($button-effects, "skew") {
91
+ &#{$shape-skew-class}::after {
92
+ width: 90%;
93
+ left: 5.5%;
94
+ border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
95
+ }
96
+ }
97
+ }
98
+ }
99
+
100
+ @if index($button-modifiers, "reflect") {
101
+ #{$button-class-modifier-reflect}::after {
102
+ content: "";
103
+ position: absolute;
104
+ width: 100%;
105
+ height: 50%;
106
+ top: 0;
107
+ left: 0;
108
+ background: linear-gradient(180deg, white(0), white(.3));
109
+ }
110
+ }
111
+
112
+ @if index($button-modifiers, "glare") {
113
+ #{$button-class-modifier-glare}::after {
114
+ content: "";
115
+ position: absolute;
116
+ width: 100%;
117
+ height: 100%;
118
+ top: 0;
119
+ left: 0;
120
+ background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
121
+ }
122
+ }
123
+
124
+ @if index($button-modifiers, "popout") {
125
+ #{$button-class-modifier-popout} {
126
+ box-shadow: 0 6px 0 0 black(.25) !important;
127
+ top: -3px;
128
+
129
+ &:active {
130
+ box-shadow: 0 3px 0 0 black(.5) !important;
131
+ top: 0;
132
+ }
32
133
  }
33
134
  }
@@ -1,21 +1,22 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
- .#{$vendor-prefix}carousel {
9
+ #{$carousel-class} {
10
10
  margin: 0 auto;
11
11
  text-align: left;
12
12
  position: relative;
13
+ max-width: 100%;
13
14
 
14
- &.no-next .#{$vendor-prefix}carousel-next { display: none; }
15
- &.no-prev .#{$vendor-prefix}carousel-prev { display: none; }
15
+ &.no-next #{$carousel-class-next} { display: none; }
16
+ &.no-prev #{$carousel-class-prev} { display: none; }
16
17
  }
17
18
 
18
- .#{$vendor-prefix}carousel-items {
19
+ #{$carousel-class-items} {
19
20
  /* 4:3 ratio */
20
21
  padding-bottom: 75%;
21
22
  width: 100%;
@@ -45,35 +46,10 @@
45
46
  }
46
47
  }
47
48
 
48
- .#{$vendor-prefix}carousel-prev,
49
- .#{$vendor-prefix}carousel-next {
50
- display: block;
51
- position: absolute;
52
- padding: $padding;
53
- width: auto;
54
- height: auto;
55
- z-index: 5;
56
- top: 50%;
57
- transform: translateY(-50%); // move up 50% of their height
58
-
59
- &:focus { outline: none; }
60
- }
61
-
62
- .#{$vendor-prefix}carousel-prev { left: 0; }
63
- .#{$vendor-prefix}carousel-next { right: 0; }
64
-
65
- .#{$vendor-prefix}carousel-tabs {
66
- position: absolute;
67
- top: $padding;
68
- left: 50%;
69
- z-index: 5;
70
- transform: translateX(-50%); // move left 50% of their width
71
- }
72
-
73
49
  //-------------------- Animations --------------------//
74
50
 
75
- .#{$vendor-prefix}carousel.slide {
76
- .#{$vendor-prefix}carousel-items > ul {
51
+ #{$carousel-class}.slide {
52
+ #{$carousel-class-items} > ul {
77
53
  > li {
78
54
  float: left;
79
55
  }
@@ -82,8 +58,8 @@
82
58
  }
83
59
  }
84
60
 
85
- .#{$vendor-prefix}carousel.fade {
86
- .#{$vendor-prefix}carousel-items > ul {
61
+ #{$carousel-class}.fade {
62
+ #{$carousel-class-items} > ul {
87
63
  position: relative;
88
64
 
89
65
  > li {
@@ -101,20 +77,18 @@
101
77
 
102
78
  //-------------------- Modifiers --------------------//
103
79
 
104
- .#{$vendor-prefix}carousel--wide {
105
- @extend .#{$vendor-prefix}carousel;
106
-
107
- .#{$vendor-prefix}carousel-items {
108
- /* 16:9 ratio */
109
- padding-bottom: 56.25%;
80
+ @if index($carousel-modifiers, "wide") {
81
+ #{$carousel-class-modifier-wide} {
82
+ #{$carousel-class-items} {
83
+ padding-bottom: 56.25%; // 16:9 ratio
84
+ }
110
85
  }
111
86
  }
112
87
 
113
- .#{$vendor-prefix}carousel--square {
114
- @extend .#{$vendor-prefix}carousel;
115
-
116
- .#{$vendor-prefix}carousel-items {
117
- /* 1:1 ratio */
118
- padding-bottom: 100%;
88
+ @if index($carousel-modifiers, "square") {
89
+ #{$carousel-class-modifier-square} {
90
+ #{$carousel-class-items} {
91
+ padding-bottom: 100%; // 1:1 ratio
92
+ }
119
93
  }
120
94
  }
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
@@ -1,46 +1,47 @@
1
1
  /**
2
- * @copyright 2010-2014, The Titon Project
2
+ * @copyright 2010-2015, The Titon Project
3
3
  * @license http://opensource.org/licenses/BSD-3-Clause
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
8
8
 
9
- .#{$vendor-prefix}divider {
10
- position: relative;
9
+ #{$divider-class} {
11
10
  text-align: center;
12
- margin: $margin 0;
13
- user-select: none;
14
11
  overflow: hidden;
15
- clear: both;
16
- min-height: 2px;
17
12
 
18
- &:after,
19
- &:before {
20
- position: absolute;
21
- content: " ";
22
- width: 50%;
23
- top: 50%;
24
- margin-top: -1px;
13
+ &::after,
14
+ &::before {
15
+ content: "";
16
+ display: inline-block;
17
+ vertical-align: middle;
18
+ position: relative;
19
+ width: 100%;
25
20
  border-top: 1px solid black(.1);
26
21
  border-bottom: 1px solid white(.75);
27
22
  }
28
23
 
29
- &:before {
30
- left: 0;
31
- margin-left: -1.5rem;
24
+ &::before {
25
+ margin-left: -100%;
26
+ left: -$margin;
32
27
  }
33
28
 
34
- &:after {
35
- right: 0;
36
- margin-right: -1.5rem;
29
+ &::after {
30
+ margin-right: -100%;
31
+ right: -$margin;
37
32
  }
38
33
 
39
34
  // Collapse the middle when there is no content
40
35
  &:empty {
41
- &:before,
42
- &:after {
43
- margin: -1px 0 0 0 !important;
36
+ &::before,
37
+ &::after {
38
+ right: 0;
39
+ left: 0;
44
40
  }
45
41
  }
42
+
43
+ > span {
44
+ display: inline-block;
45
+ vertical-align: middle;
46
+ }
46
47
  }