titon-toolkit 1.1.0 → 1.2.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.
- checksums.yaml +4 -4
- data/changelog.md +105 -67
- data/license.md +1 -1
- data/readme.md +5 -8
- data/roadmap.md +13 -11
- data/scss/toolkit/_common.scss +19 -10
- data/scss/toolkit/components/accordion.scss +0 -7
- data/scss/toolkit/components/breadcrumb.scss +0 -2
- data/scss/toolkit/components/button-group.scss +3 -19
- data/scss/toolkit/components/button.scss +2 -2
- data/scss/toolkit/components/drop.scss +5 -8
- data/scss/toolkit/components/flyout.scss +1 -5
- data/scss/toolkit/components/grid.scss +35 -17
- data/scss/toolkit/components/icon.scss +1 -14
- data/scss/toolkit/components/input-group.scss +7 -16
- data/scss/toolkit/components/input.scss +1 -7
- data/scss/toolkit/components/label.scss +0 -5
- data/scss/toolkit/components/lazy-load.scss +1 -1
- data/scss/toolkit/components/loader.scss +1 -1
- data/scss/toolkit/components/matrix.scss +7 -13
- data/scss/toolkit/components/modal.scss +123 -131
- data/scss/toolkit/components/notice.scss +5 -2
- data/scss/toolkit/components/pagination.scss +0 -1
- data/scss/toolkit/components/popover.scss +13 -16
- data/scss/toolkit/components/progress.scss +2 -17
- data/scss/toolkit/components/showcase.scss +5 -2
- data/scss/toolkit/components/table.scss +10 -8
- data/scss/toolkit/components/tabs.scss +1 -0
- data/scss/toolkit/components/tooltip.scss +38 -42
- data/scss/toolkit/components/type-ahead.scss +2 -6
- data/scss/toolkit/effects/oval.scss +3 -1
- data/scss/toolkit/effects/pill.scss +8 -12
- data/scss/toolkit/effects/skew.scss +9 -15
- data/scss/toolkit/layout/base.scss +4 -18
- data/scss/toolkit/layout/code.scss +1 -1
- data/scss/toolkit/layout/form.scss +11 -10
- data/scss/toolkit/layout/responsive.scss +4 -2
- data/scss/toolkit/layout/typography.scss +9 -3
- data/scss/toolkit/mixins/_components.scss +16 -0
- data/scss/toolkit/mixins/_helper.scss +15 -0
- data/scss/toolkit/mixins/_layout.scss +0 -9
- data/scss/toolkit/themes/{titon.scss → demo.scss} +39 -15
- data/version.md +1 -1
- metadata +6 -5
@@ -8,7 +8,9 @@
|
|
8
8
|
|
9
9
|
//-------------------- Button --------------------//
|
10
10
|
|
11
|
-
.#{$vendor-prefix}button.#{$shape-skew-class} {
|
11
|
+
.#{$vendor-prefix}button.#{$shape-skew-class} {
|
12
|
+
border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
|
13
|
+
}
|
12
14
|
|
13
15
|
//-------------------- ButtonGroup --------------------//
|
14
16
|
|
@@ -18,16 +20,12 @@
|
|
18
20
|
border-bottom-left-radius: 0;
|
19
21
|
border-bottom-right-radius: 0;
|
20
22
|
|
21
|
-
|
22
|
-
> .#{$vendor-prefix}button:first-child,
|
23
|
-
> .#{$vendor-prefix}button.first {
|
23
|
+
@include button-group-first-child {
|
24
24
|
border-top-left-radius: $skew;
|
25
25
|
border-bottom-left-radius: 0;
|
26
26
|
}
|
27
27
|
|
28
|
-
|
29
|
-
> .#{$vendor-prefix}button:last-child,
|
30
|
-
> .#{$vendor-prefix}button.last {
|
28
|
+
@include button-group-last-child {
|
31
29
|
border-top-right-radius: $skew;
|
32
30
|
border-bottom-right-radius: 0;
|
33
31
|
}
|
@@ -38,13 +36,11 @@
|
|
38
36
|
border-top-left-radius: $skew-y 1.5rem;
|
39
37
|
border-bottom-left-radius: $skew-y 1.5rem;
|
40
38
|
|
41
|
-
|
42
|
-
> .#{$vendor-prefix}button:first-child {
|
39
|
+
@include button-group-first-child {
|
43
40
|
border-top-left-radius: $skew-reverse;
|
44
41
|
}
|
45
42
|
|
46
|
-
|
47
|
-
> .#{$vendor-prefix}button:last-child {
|
43
|
+
@include button-group-last-child {
|
48
44
|
border-bottom-left-radius: $skew-reverse;
|
49
45
|
border-top-right-radius: 0;
|
50
46
|
}
|
@@ -54,13 +50,11 @@
|
|
54
50
|
border-top-right-radius: $skew-y 1.25rem;
|
55
51
|
border-bottom-right-radius: $skew-y 1.25rem;
|
56
52
|
|
57
|
-
|
58
|
-
> .#{$vendor-prefix}button:first-child {
|
53
|
+
@include button-group-first-child {
|
59
54
|
border-top-right-radius: $skew-reverse;
|
60
55
|
}
|
61
56
|
|
62
|
-
|
63
|
-
> .#{$vendor-prefix}button:last-child {
|
57
|
+
@include button-group-last-child {
|
64
58
|
border-bottom-right-radius: $skew-reverse;
|
65
59
|
}
|
66
60
|
}
|
@@ -25,24 +25,10 @@
|
|
25
25
|
|
26
26
|
// Display
|
27
27
|
.shown { display: block; }
|
28
|
-
.inline { display: inline; }
|
29
|
-
.inline-block { display: inline-block; }
|
30
28
|
.hidden { display: none; }
|
31
|
-
|
32
|
-
// Positioning
|
33
|
-
.relative { position: relative; }
|
34
|
-
.absolute { position: absolute; }
|
35
|
-
.static { position: static; }
|
29
|
+
.no-scroll { overflow: hidden; }
|
36
30
|
|
37
31
|
// Layout
|
38
|
-
.clear-fix { @include clear-fix; }
|
39
|
-
.clear {
|
40
|
-
clear: both;
|
41
|
-
display: block;
|
42
|
-
margin: 0;
|
43
|
-
padding: 0;
|
44
|
-
}
|
45
|
-
|
46
32
|
.vertical-center {
|
47
33
|
position: absolute;
|
48
34
|
left: 50%;
|
@@ -50,6 +36,8 @@
|
|
50
36
|
@include transform(translate(-50%, -50%));
|
51
37
|
}
|
52
38
|
|
39
|
+
.clear-fix { @include clear-fix; }
|
40
|
+
|
53
41
|
// Styles
|
54
42
|
.#{$shape-round-class} { border-radius: $round; }
|
55
43
|
.#{$state-is-prefix}draggable { cursor: move; }
|
@@ -102,10 +90,8 @@
|
|
102
90
|
|
103
91
|
// Bullets
|
104
92
|
.bullets {
|
105
|
-
list
|
93
|
+
@include reset-list();
|
106
94
|
line-height: 100%;
|
107
|
-
margin: 0;
|
108
|
-
padding: 0;
|
109
95
|
|
110
96
|
li {
|
111
97
|
display: inline-block;
|
@@ -6,15 +6,13 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
form { text-align: left; }
|
10
|
-
|
11
9
|
fieldset {
|
12
10
|
padding: $padding 0;
|
13
11
|
margin: 0;
|
14
12
|
border: 0;
|
15
13
|
border-top: 1px solid $gray-dark;
|
16
14
|
|
17
|
-
|
15
|
+
&.no-legend {
|
18
16
|
border: 0;
|
19
17
|
padding: 0;
|
20
18
|
}
|
@@ -53,11 +51,12 @@ label,
|
|
53
51
|
.#{$vendor-prefix}input-radio,
|
54
52
|
.#{$vendor-prefix}input-checkbox {
|
55
53
|
@include reset-inline-block;
|
54
|
+
line-height: normal;
|
56
55
|
border: 1px solid $gray-dark;
|
57
56
|
@include size-medium;
|
58
57
|
|
59
|
-
|
60
|
-
|
58
|
+
@include is-small(true, true) { @include size-small; }
|
59
|
+
@include is-large(true, true) { @include size-large; }
|
61
60
|
}
|
62
61
|
|
63
62
|
.#{$vendor-prefix}input {
|
@@ -86,9 +85,7 @@ label,
|
|
86
85
|
}
|
87
86
|
}
|
88
87
|
|
89
|
-
.#{$vendor-prefix}input-static
|
90
|
-
.#{$vendor-prefix}input-radio,
|
91
|
-
.#{$vendor-prefix}input-checkbox {
|
88
|
+
.#{$vendor-prefix}input-static {
|
92
89
|
background: transparent;
|
93
90
|
border-color: transparent;
|
94
91
|
padding-left: 0 !important;
|
@@ -98,19 +95,21 @@ label,
|
|
98
95
|
.#{$vendor-prefix}input-radio,
|
99
96
|
.#{$vendor-prefix}input-checkbox {
|
100
97
|
padding: 0;
|
98
|
+
border: 0;
|
101
99
|
|
102
100
|
input[type="checkbox"],
|
103
101
|
input[type="radio"] {
|
104
102
|
vertical-align: middle;
|
105
103
|
position: relative;
|
106
|
-
top: -
|
104
|
+
top: -2px;
|
107
105
|
margin-right: 5px;
|
108
106
|
}
|
109
107
|
}
|
110
108
|
|
111
109
|
select.#{$vendor-prefix}input {
|
112
110
|
-webkit-appearance: none;
|
113
|
-
|
111
|
+
-moz-appearance: none;
|
112
|
+
appearance: none;
|
114
113
|
}
|
115
114
|
|
116
115
|
select.#{$vendor-prefix}input[multiple] {
|
@@ -190,6 +189,8 @@ textarea.#{$vendor-prefix}input {
|
|
190
189
|
}
|
191
190
|
|
192
191
|
.#{$vendor-prefix}form--inline {
|
192
|
+
margin-bottom: -($margin / 2);
|
193
|
+
|
193
194
|
.#{$vendor-prefix}field,
|
194
195
|
.#{$vendor-prefix}field-label,
|
195
196
|
.#{$vendor-prefix}form-actions {
|
@@ -25,7 +25,15 @@ h1, h2, h3, h4, h5, h6 {
|
|
25
25
|
font-weight: normal;
|
26
26
|
}
|
27
27
|
|
28
|
-
p, ul, ol
|
28
|
+
p, ul, ol {
|
29
|
+
margin: $margin 0 0 0;
|
30
|
+
|
31
|
+
ul, ol {
|
32
|
+
margin: 0;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
hr {
|
29
37
|
margin: $margin 0;
|
30
38
|
}
|
31
39
|
|
@@ -36,8 +44,6 @@ blockquote {
|
|
36
44
|
|
37
45
|
cite { display: block; font-size: $small-size; }
|
38
46
|
cite:before { content: "\2014 \00A0"; /* em dash */ }
|
39
|
-
|
40
|
-
@include content-spacing;
|
41
47
|
}
|
42
48
|
|
43
49
|
mark {
|
@@ -0,0 +1,16 @@
|
|
1
|
+
|
2
|
+
@mixin button-group-first-child {
|
3
|
+
> li:first-child .#{$vendor-prefix}button,
|
4
|
+
> .#{$vendor-prefix}button:first-child,
|
5
|
+
> .#{$vendor-prefix}button.first {
|
6
|
+
@content;
|
7
|
+
}
|
8
|
+
}
|
9
|
+
|
10
|
+
@mixin button-group-last-child {
|
11
|
+
> li:last-child .#{$vendor-prefix}button,
|
12
|
+
> .#{$vendor-prefix}button:last-child,
|
13
|
+
> .#{$vendor-prefix}button.last {
|
14
|
+
@content;
|
15
|
+
}
|
16
|
+
}
|
@@ -7,4 +7,19 @@
|
|
7
7
|
// White transparent background
|
8
8
|
@function white($opacity){
|
9
9
|
@return rgba(255, 255, 255, $opacity);
|
10
|
+
}
|
11
|
+
|
12
|
+
// Take a list of classes (without .) and generate a selector list
|
13
|
+
@function join-classes($classes, $inherit: true) {
|
14
|
+
$selectors: ();
|
15
|
+
|
16
|
+
@each $class in $classes {
|
17
|
+
@if $inherit {
|
18
|
+
$selectors: $selectors, unquote("&." + $class);
|
19
|
+
} @else {
|
20
|
+
$selectors: $selectors, unquote("." + $class);
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
@return $selectors;
|
10
25
|
}
|
@@ -30,15 +30,6 @@
|
|
30
30
|
@include transform(translate(-50%, -50%));
|
31
31
|
}
|
32
32
|
|
33
|
-
// Remove the top and bottom margin from content elements
|
34
|
-
// Allows for perfect spacing within content blocks
|
35
|
-
@mixin content-spacing {
|
36
|
-
p, ul, ol, hr, blockquote {
|
37
|
-
&:first-child { margin-top: 0; }
|
38
|
-
&:last-child { margin-bottom: 0; }
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
33
|
@mixin size-small {
|
43
34
|
font-size: $small-size;
|
44
35
|
padding: $small-padding;
|
@@ -33,6 +33,7 @@ mark { background: lighten($warning-light, 25%); }
|
|
33
33
|
//-------------------- Accordion --------------------//
|
34
34
|
|
35
35
|
.accordion-header {
|
36
|
+
background: $gray;
|
36
37
|
border: 1px solid $gray-dark;
|
37
38
|
margin: -1px;
|
38
39
|
@include transition(all .15s);
|
@@ -52,6 +53,11 @@ mark { background: lighten($warning-light, 25%); }
|
|
52
53
|
|
53
54
|
.breadcrumb {
|
54
55
|
border: 1px solid $gray-dark;
|
56
|
+
background: $gray;
|
57
|
+
|
58
|
+
ul, ol {
|
59
|
+
.caret { color: $gray-darkest; }
|
60
|
+
}
|
55
61
|
}
|
56
62
|
|
57
63
|
//-------------------- Button --------------------//
|
@@ -82,6 +88,7 @@ mark { background: lighten($warning-light, 25%); }
|
|
82
88
|
|
83
89
|
.button {
|
84
90
|
color: #fff;
|
91
|
+
background: $gray;
|
85
92
|
font-weight: bold;
|
86
93
|
text-shadow: 1px 1px black(.2);
|
87
94
|
@include transition(all .2s);
|
@@ -143,8 +150,13 @@ mark { background: lighten($warning-light, 25%); }
|
|
143
150
|
.drop--up,
|
144
151
|
.drop--right,
|
145
152
|
.drop--left {
|
153
|
+
background: $gray;
|
146
154
|
border: 1px solid $gray-dark;
|
147
155
|
box-shadow: 5px 5px black(.25);
|
156
|
+
padding: $small-padding;
|
157
|
+
|
158
|
+
ul { padding: $small-padding; }
|
159
|
+
> ul { padding: 0; }
|
148
160
|
|
149
161
|
li {
|
150
162
|
> a {
|
@@ -215,6 +227,11 @@ mark { background: lighten($warning-light, 25%); }
|
|
215
227
|
}
|
216
228
|
}
|
217
229
|
|
230
|
+
.flyout-heading,
|
231
|
+
.type-ahead-heading {
|
232
|
+
background: $gray-dark;
|
233
|
+
}
|
234
|
+
|
218
235
|
.type-ahead-highlight { background: $warning-light; }
|
219
236
|
|
220
237
|
.type-ahead {
|
@@ -256,13 +273,16 @@ mark { background: lighten($warning-light, 25%); }
|
|
256
273
|
}
|
257
274
|
}
|
258
275
|
|
259
|
-
//-------------------- InputGroup --------------------//
|
260
|
-
|
261
276
|
.input-group {
|
262
|
-
> .
|
263
|
-
|
264
|
-
> .button
|
265
|
-
> .button
|
277
|
+
> .button { height: 44px; }
|
278
|
+
|
279
|
+
&.small > .button { height: 30px; }
|
280
|
+
&.large > .button { height: 59px; }
|
281
|
+
}
|
282
|
+
|
283
|
+
.input-addon {
|
284
|
+
background: $gray;
|
285
|
+
border: 1px solid $gray-dark;
|
266
286
|
}
|
267
287
|
|
268
288
|
//-------------------- Label --------------------//
|
@@ -326,10 +346,6 @@ mark { background: lighten($warning-light, 25%); }
|
|
326
346
|
|
327
347
|
//-------------------- Modal --------------------//
|
328
348
|
|
329
|
-
.modal {
|
330
|
-
margin: $margin;
|
331
|
-
}
|
332
|
-
|
333
349
|
.modal-inner {
|
334
350
|
background: $gray;
|
335
351
|
border: 1px solid $gray-dark;
|
@@ -447,18 +463,26 @@ mark { background: lighten($warning-light, 25%); }
|
|
447
463
|
}
|
448
464
|
|
449
465
|
.progress {
|
466
|
+
background: $gray;
|
450
467
|
box-shadow: inset 1px 1px 2px $gray-darkest;
|
451
|
-
|
452
|
-
&.is-info .progress-bar { @include progress-style($info, $info-dark); }
|
453
|
-
&.is-error .progress-bar { @include progress-style($error, $error-dark); }
|
454
|
-
&.is-warning .progress-bar { @include progress-style($warning, $warning-dark); }
|
455
|
-
&.is-success .progress-bar { @include progress-style($success, $success-dark); }
|
456
468
|
}
|
457
469
|
|
458
470
|
.progress-bar {
|
459
471
|
color: #fff;
|
460
472
|
font-weight: bold;
|
461
473
|
@include progress-style($default, $default-dark);
|
474
|
+
|
475
|
+
&.is-info { @include progress-style($info, $info-dark); }
|
476
|
+
&.is-error { @include progress-style($error, $error-dark); }
|
477
|
+
&.is-warning { @include progress-style($warning, $warning-dark); }
|
478
|
+
&.is-success { @include progress-style($success, $success-dark); }
|
479
|
+
}
|
480
|
+
|
481
|
+
//-------------------- Showcase --------------------//
|
482
|
+
|
483
|
+
.showcase-inner {
|
484
|
+
background: $gray;
|
485
|
+
border: 1px solid $gray-dark;
|
462
486
|
}
|
463
487
|
|
464
488
|
//-------------------- Tooltip --------------------//
|
data/version.md
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.
|
1
|
+
1.2.0
|
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: titon-toolkit
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
|
-
- Titon
|
7
|
+
- Project Titon
|
8
8
|
- Miles Johnson
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2014-
|
12
|
+
date: 2014-03-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -54,7 +54,7 @@ dependencies:
|
|
54
54
|
- !ruby/object:Gem::Version
|
55
55
|
version: 0.1.alpha.0
|
56
56
|
description: A collection of extensible front-end UI components for the responsive
|
57
|
-
web.
|
57
|
+
and mobile web.
|
58
58
|
email:
|
59
59
|
executables: []
|
60
60
|
extensions: []
|
@@ -100,13 +100,14 @@ files:
|
|
100
100
|
- scss/toolkit/layout/form.scss
|
101
101
|
- scss/toolkit/layout/responsive.scss
|
102
102
|
- scss/toolkit/layout/typography.scss
|
103
|
+
- scss/toolkit/mixins/_components.scss
|
103
104
|
- scss/toolkit/mixins/_grid.scss
|
104
105
|
- scss/toolkit/mixins/_helper.scss
|
105
106
|
- scss/toolkit/mixins/_layout.scss
|
106
107
|
- scss/toolkit/mixins/_responsive.scss
|
107
108
|
- scss/toolkit/mixins/_state.scss
|
108
109
|
- scss/toolkit/mixins/_unit.scss
|
109
|
-
- scss/toolkit/themes/
|
110
|
+
- scss/toolkit/themes/demo.scss
|
110
111
|
- scss/toolkit.scss
|
111
112
|
- changelog.md
|
112
113
|
- license.md
|