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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/changelog.md +70 -30
  3. data/readme.md +5 -5
  4. data/roadmap.md +19 -7
  5. data/scss/toolkit.scss +3 -1
  6. data/scss/toolkit/_common.scss +21 -3
  7. data/scss/toolkit/components/accordion.scss +1 -4
  8. data/scss/toolkit/components/blackout.scss +10 -0
  9. data/scss/toolkit/components/breadcrumb.scss +1 -4
  10. data/scss/toolkit/components/button-group.scss +7 -6
  11. data/scss/toolkit/components/button.scss +7 -3
  12. data/scss/toolkit/components/carousel.scss +1 -3
  13. data/scss/toolkit/components/{dropdown.scss → drop.scss} +31 -21
  14. data/scss/toolkit/components/flyout.scss +1 -3
  15. data/scss/toolkit/components/grid.scss +5 -0
  16. data/scss/toolkit/components/icon.scss +5 -26
  17. data/scss/toolkit/components/input-group.scss +1 -1
  18. data/scss/toolkit/components/input.scss +31 -1
  19. data/scss/toolkit/components/loader.scss +163 -0
  20. data/scss/toolkit/components/mask.scss +35 -0
  21. data/scss/toolkit/components/matrix.scss +2 -5
  22. data/scss/toolkit/components/modal.scss +1 -1
  23. data/scss/toolkit/components/pagination.scss +2 -5
  24. data/scss/toolkit/components/progress.scss +1 -1
  25. data/scss/toolkit/components/showcase.scss +3 -3
  26. data/scss/toolkit/components/table.scss +4 -0
  27. data/scss/toolkit/components/tabs.scss +2 -2
  28. data/scss/toolkit/components/type-ahead.scss +2 -4
  29. data/scss/toolkit/effects/oval.scss +3 -3
  30. data/scss/toolkit/effects/pill.scss +6 -6
  31. data/scss/toolkit/effects/skew.scss +6 -6
  32. data/scss/toolkit/effects/visual.scss +1 -1
  33. data/scss/toolkit/layout/base.scss +2 -2
  34. data/scss/toolkit/layout/form.scss +0 -1
  35. data/scss/toolkit/mixins/_grid.scss +0 -1
  36. data/scss/toolkit/mixins/_layout.scss +16 -8
  37. data/scss/toolkit/themes/titon.scss +34 -11
  38. data/version.md +1 -1
  39. metadata +21 -5
@@ -18,9 +18,7 @@
18
18
  @include transition(opacity $flyout-transition);
19
19
 
20
20
  ul {
21
- list-style: none;
22
- margin: 0;
23
- padding: 0;
21
+ @include reset-list;
24
22
  float: left;
25
23
  width: 200px;
26
24
  }
@@ -11,6 +11,11 @@
11
11
  @include grid-row;
12
12
  }
13
13
 
14
+ .col.end {
15
+ margin-right: 0 !important;
16
+ float: right !important;
17
+ }
18
+
14
19
  // These should be the same for all sizes
15
20
  .col[class*="span-"] {
16
21
  @include grid-column;
@@ -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
- .button {
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
- @-webkit-keyframes rotate {
35
- from { -webkit-transform: rotate(0deg); }
36
- to { -webkit-transform: rotate(360deg); }
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
- -webkit-animation-name: rotate;
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.round {
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: 1;
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
- &.no-columns .#{$vendor-prefix}matrix-item {
14
+ &.#{$state-has-prefix}no-columns .#{$vendor-prefix}matrix-item {
18
15
  position: relative !important;
19
16
  }
20
17
  }
@@ -97,7 +97,7 @@
97
97
 
98
98
  &.fade {
99
99
  opacity: 0;
100
- @include transition(opacity $modal-transition);
100
+ @include transition(opacity $modal-transition, visibility $modal-transition);
101
101
  }
102
102
 
103
103
  &.from-above {
@@ -11,15 +11,12 @@
11
11
  margin: $margin 0;
12
12
 
13
13
  ul, ol {
14
- margin: 0;
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
- &.round {
53
+ &.#{$shape-round-class} {
57
54
  ul {
58
55
  border-radius: $round;
59
56
  }
@@ -55,7 +55,7 @@
55
55
  @include transition(width .6s, background $progress-transition);
56
56
  }
57
57
 
58
- .#{$vendor-prefix}progress.round {
58
+ .#{$vendor-prefix}progress.#{$shape-round-class} {
59
59
  border-radius: $round;
60
60
 
61
61
  .#{$vendor-prefix}progress-bar {
@@ -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-style: none;
55
- padding: 0;
56
- margin: 0;
56
+ @include reset-list;
57
57
  width: 100px;
58
58
  height: 100px;
59
59
  max-width: 1024px;
@@ -22,6 +22,10 @@
22
22
  thead th {
23
23
  vertical-align: bottom;
24
24
  text-align: left;
25
+
26
+ .sorter {
27
+ margin: -.5rem .25rem;
28
+ }
25
29
  }
26
30
 
27
31
  // Allow for multiple tbody's
@@ -15,8 +15,8 @@
15
15
  margin-bottom: $margin;
16
16
 
17
17
  ul, ol, li {
18
- @include reset-inline-block;
19
- list-style: none;
18
+ @include reset-list;
19
+ display: inline-block;
20
20
  }
21
21
 
22
22
  @include clear-fix;