titon-toolkit 1.0.5 → 1.1.0.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.
- checksums.yaml +4 -4
- data/changelog.md +70 -30
- data/readme.md +5 -5
- data/roadmap.md +19 -7
- data/scss/toolkit.scss +3 -1
- data/scss/toolkit/_common.scss +21 -3
- data/scss/toolkit/components/accordion.scss +1 -4
- data/scss/toolkit/components/blackout.scss +10 -0
- data/scss/toolkit/components/breadcrumb.scss +1 -4
- data/scss/toolkit/components/button-group.scss +7 -6
- data/scss/toolkit/components/button.scss +7 -3
- data/scss/toolkit/components/carousel.scss +1 -3
- data/scss/toolkit/components/{dropdown.scss → drop.scss} +31 -21
- data/scss/toolkit/components/flyout.scss +1 -3
- data/scss/toolkit/components/grid.scss +5 -0
- data/scss/toolkit/components/icon.scss +5 -26
- data/scss/toolkit/components/input-group.scss +1 -1
- data/scss/toolkit/components/input.scss +31 -1
- data/scss/toolkit/components/loader.scss +163 -0
- data/scss/toolkit/components/mask.scss +35 -0
- data/scss/toolkit/components/matrix.scss +2 -5
- data/scss/toolkit/components/modal.scss +1 -1
- data/scss/toolkit/components/pagination.scss +2 -5
- data/scss/toolkit/components/progress.scss +1 -1
- data/scss/toolkit/components/showcase.scss +3 -3
- data/scss/toolkit/components/table.scss +4 -0
- data/scss/toolkit/components/tabs.scss +2 -2
- data/scss/toolkit/components/type-ahead.scss +2 -4
- data/scss/toolkit/effects/oval.scss +3 -3
- data/scss/toolkit/effects/pill.scss +6 -6
- data/scss/toolkit/effects/skew.scss +6 -6
- data/scss/toolkit/effects/visual.scss +1 -1
- data/scss/toolkit/layout/base.scss +2 -2
- data/scss/toolkit/layout/form.scss +0 -1
- data/scss/toolkit/mixins/_grid.scss +0 -1
- data/scss/toolkit/mixins/_layout.scss +16 -8
- data/scss/toolkit/themes/titon.scss +34 -11
- data/version.md +1 -1
- metadata +21 -5
@@ -19,7 +19,7 @@
|
|
19
19
|
[class*="icon-32"] { width: 32px; height: 32px; }
|
20
20
|
[class*="icon-64"] { width: 64px; height: 64px; }
|
21
21
|
|
22
|
-
|
22
|
+
.#{$vendor-prefix}button {
|
23
23
|
[class*="icon-"] { margin-top: -1px; }
|
24
24
|
}
|
25
25
|
|
@@ -31,32 +31,11 @@
|
|
31
31
|
.icon--flip { @include transform(rotateY(180deg)); }
|
32
32
|
.icon--flip-vert { @include transform(rotateX(180deg)); }
|
33
33
|
|
34
|
-
|
35
|
-
from {
|
36
|
-
to {
|
37
|
-
}
|
38
|
-
|
39
|
-
@-moz-keyframes rotate {
|
40
|
-
from { -moz-transform: rotate(0deg); }
|
41
|
-
to { -moz-transform: rotate(360deg); }
|
42
|
-
}
|
43
|
-
|
44
|
-
@keyframes rotate {
|
45
|
-
from { transform: rotate(0deg); }
|
46
|
-
to { transform: rotate(360deg); }
|
34
|
+
@include keyframes(rotate) {
|
35
|
+
from { @include transform(rotate(0deg)); }
|
36
|
+
to { @include transform(rotate(360deg)); }
|
47
37
|
}
|
48
38
|
|
49
39
|
.icon--rotate {
|
50
|
-
-
|
51
|
-
-webkit-animation-duration: $icon-animation;
|
52
|
-
-webkit-animation-iteration-count: infinite;
|
53
|
-
-webkit-animation-timing-function: linear;
|
54
|
-
-moz-animation-name: rotate;
|
55
|
-
-moz-animation-duration: $icon-animation;
|
56
|
-
-moz-animation-iteration-count: infinite;
|
57
|
-
-moz-animation-timing-function: linear;
|
58
|
-
animation-name: rotate;
|
59
|
-
animation-duration: $icon-animation;
|
60
|
-
animation-iteration-count: infinite;
|
61
|
-
animation-timing-function: linear;
|
40
|
+
@include animation(rotate $icon-animation infinite linear);
|
62
41
|
}
|
@@ -43,7 +43,7 @@
|
|
43
43
|
|
44
44
|
//-------------------- Modifiers --------------------//
|
45
45
|
|
46
|
-
.#{$vendor-prefix}input-group
|
46
|
+
.#{$vendor-prefix}input-group.#{$shape-round-class} {
|
47
47
|
> .#{$vendor-prefix}input:first-child,
|
48
48
|
> .#{$vendor-prefix}input-addon:first-child,
|
49
49
|
> .#{$vendor-prefix}button:first-child,
|
@@ -63,6 +63,11 @@
|
|
63
63
|
border-radius: $round;
|
64
64
|
white-space: nowrap;
|
65
65
|
line-height: 1rem;
|
66
|
+
z-index: 3;
|
67
|
+
|
68
|
+
&.#{$state-is-prefix}active {
|
69
|
+
border-color: $info;
|
70
|
+
}
|
66
71
|
}
|
67
72
|
|
68
73
|
.#{$vendor-prefix}select-label,
|
@@ -84,7 +89,7 @@
|
|
84
89
|
position: absolute;
|
85
90
|
top: 0;
|
86
91
|
left: 0;
|
87
|
-
z-index:
|
92
|
+
z-index: 5;
|
88
93
|
opacity: 0;
|
89
94
|
width: 100%;
|
90
95
|
|
@@ -103,6 +108,31 @@
|
|
103
108
|
cursor: not-allowed;
|
104
109
|
color: $gray-darkest;
|
105
110
|
border-color: $gray;
|
111
|
+
|
112
|
+
.#{$vendor-prefix}select-arrow { opacity: $default-opacity; }
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
// Select dropdown
|
117
|
+
.#{$vendor-prefix}select-options {
|
118
|
+
max-height: 300px;
|
119
|
+
overflow: auto;
|
120
|
+
|
121
|
+
li.#{$state-is-prefix}disabled {
|
122
|
+
> a,
|
123
|
+
> a:hover {
|
124
|
+
background: none;
|
125
|
+
color: $gray-darkest;
|
126
|
+
cursor: default;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
&.hide-selected {
|
131
|
+
li.#{$state-is-prefix}active { display: none !important; }
|
132
|
+
}
|
133
|
+
|
134
|
+
&.hide-first {
|
135
|
+
li:first-child:not(.#{$vendor-prefix}drop-heading) { display: none !important; }
|
106
136
|
}
|
107
137
|
}
|
108
138
|
}
|
@@ -0,0 +1,163 @@
|
|
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
|
+
// Based on SpinKit
|
10
|
+
// http://tobiasahlin.com/spinkit/
|
11
|
+
|
12
|
+
.#{$vendor-prefix}loader {
|
13
|
+
@include reset-inline-block;
|
14
|
+
margin: 0 auto;
|
15
|
+
text-align: center;
|
16
|
+
|
17
|
+
> span {
|
18
|
+
display: inline-block;
|
19
|
+
margin: 0 2px;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
.#{$vendor-prefix}loader-message {
|
24
|
+
margin-top: 1rem;
|
25
|
+
}
|
26
|
+
|
27
|
+
//-------------------- Bar Wave --------------------//
|
28
|
+
|
29
|
+
@if $loader-type == "bar-wave" or $loader-type == "all" {
|
30
|
+
@include keyframes(bar-wave) {
|
31
|
+
0%, 50%, 100% {
|
32
|
+
@include transform(scaleY(1.0));
|
33
|
+
}
|
34
|
+
25% {
|
35
|
+
@include transform(scaleY(2.0));
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
.#{$vendor-prefix}loader.bar-wave {
|
40
|
+
> span {
|
41
|
+
background: $loader-color;
|
42
|
+
height: $loader-bar-height;
|
43
|
+
width: $loader-bar-width;
|
44
|
+
@include animation(bar-wave 1.2s infinite ease-in-out);
|
45
|
+
|
46
|
+
@for $i from 2 through $loader-wave-count {
|
47
|
+
&:nth-child(#{$i}) { @include animation-delay(-#{(1.3 - ($i * 0.1))}s); }
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
.#{$vendor-prefix}loader-message {
|
52
|
+
margin-top: 1.5rem;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
//-------------------- Bubble Wave --------------------//
|
58
|
+
|
59
|
+
@if $loader-type == "bubble-wave" or $loader-type == "all" {
|
60
|
+
@include keyframes(bubble-wave) {
|
61
|
+
0%, 80%, 100% {
|
62
|
+
@include transform(scale(0.0));
|
63
|
+
}
|
64
|
+
30% {
|
65
|
+
@include transform(scale(1.0));
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
.#{$vendor-prefix}loader.bubble-wave {
|
70
|
+
> span {
|
71
|
+
background: $loader-color;
|
72
|
+
width: $loader-bubble-size;
|
73
|
+
height: $loader-bubble-size;
|
74
|
+
border-radius: 100%;
|
75
|
+
@include animation(bubble-wave 1.5s infinite ease-in-out);
|
76
|
+
@include animation-fill-mode(both);
|
77
|
+
|
78
|
+
@for $i from 2 through $loader-wave-count {
|
79
|
+
&:nth-child(#{$i}) { @include animation-delay(-#{(1.6 - ($i * 0.1))}s); }
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
//-------------------- Bubble Spinner --------------------//
|
86
|
+
|
87
|
+
@if $loader-type == "bubble-spinner" or $loader-type == "all" {
|
88
|
+
@include keyframes(bubble-spinner) {
|
89
|
+
0%, 80%, 100% {
|
90
|
+
@include transform(scale(0.0));
|
91
|
+
}
|
92
|
+
30% {
|
93
|
+
@include transform(scale(1.3));
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
.#{$vendor-prefix}loader.bubble-spinner {
|
98
|
+
.spinner {
|
99
|
+
width: 100px;
|
100
|
+
height: 100px;
|
101
|
+
position: relative;
|
102
|
+
margin: 0 auto;
|
103
|
+
|
104
|
+
> span {
|
105
|
+
background: $loader-color;
|
106
|
+
width: 14px;
|
107
|
+
height: 14px;
|
108
|
+
position: absolute;
|
109
|
+
border-radius: 100%;
|
110
|
+
@include animation(bubble-spinner 1.6s infinite ease-in-out);
|
111
|
+
@include animation-fill-mode(both);
|
112
|
+
|
113
|
+
&:nth-child(1) {
|
114
|
+
top: 0;
|
115
|
+
left: 43px;
|
116
|
+
@include animation-delay(-1.4s);
|
117
|
+
}
|
118
|
+
|
119
|
+
&:nth-child(2) {
|
120
|
+
top: 12px;
|
121
|
+
right: 12px;
|
122
|
+
@include animation-delay(-1.2s);
|
123
|
+
}
|
124
|
+
|
125
|
+
&:nth-child(3) {
|
126
|
+
top: 43px;
|
127
|
+
right: 0;
|
128
|
+
@include animation-delay(-1.0s);
|
129
|
+
}
|
130
|
+
|
131
|
+
&:nth-child(4) {
|
132
|
+
bottom: 12px;
|
133
|
+
right: 12px;
|
134
|
+
@include animation-delay(-0.8s);
|
135
|
+
}
|
136
|
+
|
137
|
+
&:nth-child(5) {
|
138
|
+
bottom: 0;
|
139
|
+
left: 43px;
|
140
|
+
@include animation-delay(-0.6s);
|
141
|
+
}
|
142
|
+
|
143
|
+
&:nth-child(6) {
|
144
|
+
bottom: 12px;
|
145
|
+
left: 12px;
|
146
|
+
@include animation-delay(-0.4s);
|
147
|
+
}
|
148
|
+
|
149
|
+
&:nth-child(7) {
|
150
|
+
top: 43px;
|
151
|
+
left: 0;
|
152
|
+
@include animation-delay(-0.2s);
|
153
|
+
}
|
154
|
+
|
155
|
+
&:nth-child(8) {
|
156
|
+
top: 12px;
|
157
|
+
left: 12px;
|
158
|
+
@include animation-delay(-0.0s);
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
}
|
163
|
+
}
|
@@ -0,0 +1,35 @@
|
|
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}mask {
|
10
|
+
position: absolute;
|
11
|
+
top: 0;
|
12
|
+
left: 0;
|
13
|
+
height: 100%;
|
14
|
+
width: 100%;
|
15
|
+
z-index: 600;
|
16
|
+
opacity: 0;
|
17
|
+
visibility: hidden;
|
18
|
+
background: black($mask-opacity);
|
19
|
+
@include transition(all $mask-transition);
|
20
|
+
color: #fff;
|
21
|
+
}
|
22
|
+
|
23
|
+
.#{$vendor-prefix}mask-message {
|
24
|
+
text-align: center;
|
25
|
+
max-width: 80%;
|
26
|
+
opacity: 1;
|
27
|
+
@include position-center;
|
28
|
+
@include transition(all $mask-transition);
|
29
|
+
|
30
|
+
&:empty { display: none; }
|
31
|
+
}
|
32
|
+
|
33
|
+
.#{$vendor-prefix}maskable {
|
34
|
+
overflow: hidden;
|
35
|
+
}
|
@@ -7,14 +7,11 @@
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
9
|
.#{$vendor-prefix}matrix {
|
10
|
+
@include reset-list;
|
10
11
|
position: relative;
|
11
|
-
list-style: none;
|
12
|
-
margin: 0;
|
13
|
-
padding: 0;
|
14
|
-
|
15
12
|
@include clear-fix;
|
16
13
|
|
17
|
-
|
14
|
+
&.#{$state-has-prefix}no-columns .#{$vendor-prefix}matrix-item {
|
18
15
|
position: relative !important;
|
19
16
|
}
|
20
17
|
}
|
@@ -11,15 +11,12 @@
|
|
11
11
|
margin: $margin 0;
|
12
12
|
|
13
13
|
ul, ol {
|
14
|
-
|
15
|
-
padding: 0;
|
16
|
-
|
14
|
+
@include reset-list;
|
17
15
|
@include clear-fix;
|
18
16
|
}
|
19
17
|
|
20
18
|
li {
|
21
19
|
position: relative;
|
22
|
-
list-style: none;
|
23
20
|
float: left;
|
24
21
|
margin-right: $padding / 2;
|
25
22
|
|
@@ -53,7 +50,7 @@
|
|
53
50
|
}
|
54
51
|
}
|
55
52
|
|
56
|
-
|
53
|
+
&.#{$shape-round-class} {
|
57
54
|
ul {
|
58
55
|
border-radius: $round;
|
59
56
|
}
|
@@ -15,9 +15,11 @@
|
|
15
15
|
margin: 0;
|
16
16
|
padding: 0;
|
17
17
|
z-index: 610; // higher than blackout
|
18
|
+
opacity: 0;
|
18
19
|
visibility: hidden;
|
19
20
|
backface-visibility: hidden;
|
20
21
|
@include transform(translateX(-50%) translateY(-50%));
|
22
|
+
@include transition(opacity $showcase-transition, visibility $showcase-transition);
|
21
23
|
|
22
24
|
&.#{$state-is-prefix}loading,
|
23
25
|
&.#{$state-is-prefix}single {
|
@@ -51,9 +53,7 @@
|
|
51
53
|
}
|
52
54
|
|
53
55
|
.#{$vendor-prefix}showcase-items {
|
54
|
-
list
|
55
|
-
padding: 0;
|
56
|
-
margin: 0;
|
56
|
+
@include reset-list;
|
57
57
|
width: 100px;
|
58
58
|
height: 100px;
|
59
59
|
max-width: 1024px;
|