titon-toolkit 0.9.4 → 0.10.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.
- data/license.md +23 -0
- data/readme.md +93 -0
- data/src/lib/titon-toolkit.rb +2 -2
- data/src/scss/toolkit.scss +3 -3
- data/src/scss/toolkit/effects/visual.scss +47 -47
- data/src/scss/toolkit/layout/base.scss +32 -32
- data/src/scss/toolkit/layout/code.scss +38 -38
- data/src/scss/toolkit/layout/form.scss +86 -86
- data/src/scss/toolkit/layout/grid.scss +31 -31
- data/src/scss/toolkit/layout/input-group.scss +41 -41
- data/src/scss/toolkit/layout/responsive.scss +21 -21
- data/src/scss/toolkit/layout/table.scss +59 -59
- data/src/scss/toolkit/layout/typography.scss +18 -18
- data/src/scss/toolkit/mixins/_grid.scss +8 -8
- data/src/scss/toolkit/mixins/_layout.scss +36 -36
- data/src/scss/toolkit/mixins/_responsive.scss +56 -56
- data/src/scss/toolkit/mixins/_themes.scss +78 -78
- data/src/scss/toolkit/modules/accordion.scss +33 -33
- data/src/scss/toolkit/modules/blackout.scss +13 -13
- data/src/scss/toolkit/modules/carousel.scss +141 -141
- data/src/scss/toolkit/modules/flyout.scss +57 -57
- data/src/scss/toolkit/modules/modal.scss +206 -206
- data/src/scss/toolkit/modules/popover.scss +58 -58
- data/src/scss/toolkit/modules/showcase.scss +135 -135
- data/src/scss/toolkit/modules/tabs.scss +29 -29
- data/src/scss/toolkit/modules/tooltip.scss +109 -109
- data/src/scss/toolkit/modules/type-ahead.scss +44 -44
- data/src/scss/toolkit/themes/titon.scss +242 -242
- data/src/scss/toolkit/themes/tomorrow-night.scss +322 -322
- data/src/scss/toolkit/ui/alert.scss +29 -29
- data/src/scss/toolkit/ui/breadcrumbs.scss +41 -41
- data/src/scss/toolkit/ui/button-group.scss +181 -181
- data/src/scss/toolkit/ui/button.scss +31 -31
- data/src/scss/toolkit/ui/dropdown.scss +83 -83
- data/src/scss/toolkit/ui/icon.scss +5 -5
- data/src/scss/toolkit/ui/label-badge.scss +48 -48
- data/src/scss/toolkit/ui/lazy-load.scss +8 -5
- data/src/scss/toolkit/ui/matrix.scss +26 -0
- data/src/scss/toolkit/ui/pagination.scss +108 -108
- data/src/scss/toolkit/ui/pin.scss +5 -5
- data/src/scss/toolkit/ui/progress.scss +20 -20
- data/version.md +1 -0
- metadata +17 -5
- checksums.yaml +0 -15
@@ -1,64 +1,64 @@
|
|
1
1
|
/**
|
2
|
-
* @copyright
|
3
|
-
* @license
|
4
|
-
* @link
|
2
|
+
* @copyright 2010-2013, The Titon Project
|
3
|
+
* @license http://opensource.org/licenses/bsd-license.php
|
4
|
+
* @link http://titon.io
|
5
5
|
*/
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
9
|
.grid {
|
10
|
-
|
10
|
+
@include grid-row;
|
11
11
|
}
|
12
12
|
|
13
13
|
// These should be the same for all sizes
|
14
14
|
@for $i from 1 through $grid-columns {
|
15
|
-
|
15
|
+
$span: grid-span($i);
|
16
16
|
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
.span-#{$i} { width: $span; }
|
18
|
+
.push-#{$i} { left: $span; }
|
19
|
+
.pull-#{$i} { right: $span; }
|
20
20
|
}
|
21
21
|
|
22
22
|
// Mobile supports 3 columns
|
23
23
|
.col[class*="span-"],
|
24
24
|
.col[class*="mobile-"] {
|
25
|
-
|
25
|
+
@include grid-column;
|
26
26
|
}
|
27
27
|
|
28
28
|
@for $i from 1 through ceil($grid-columns / 4) {
|
29
|
-
|
29
|
+
$span: grid-span($i * 4);
|
30
30
|
|
31
|
-
|
32
|
-
|
33
|
-
|
31
|
+
.col.mobile-#{$i} { width: $span; }
|
32
|
+
.col.mobile-push-#{$i} { left: $span; }
|
33
|
+
.col.mobile-pull-#{$i} { right: $span; }
|
34
34
|
}
|
35
35
|
|
36
36
|
// Tablet supports 6 columns
|
37
37
|
@include in-tablet {
|
38
|
-
|
39
|
-
|
40
|
-
|
38
|
+
.col[class*="tablet-"] {
|
39
|
+
@include grid-column;
|
40
|
+
}
|
41
41
|
|
42
|
-
|
43
|
-
|
42
|
+
@for $i from 1 through ceil($grid-columns / 2) {
|
43
|
+
$span: grid-span($i * 2);
|
44
44
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
45
|
+
.col.tablet-#{$i} { width: $span; }
|
46
|
+
.col.tablet-push-#{$i} { left: $span; }
|
47
|
+
.col.tablet-pull-#{$i} { right: $span; }
|
48
|
+
}
|
49
49
|
}
|
50
50
|
|
51
51
|
// Desktop supports 12 columns
|
52
52
|
@include in-desktop {
|
53
|
-
|
54
|
-
|
55
|
-
|
53
|
+
.col[class*="desktop-"] {
|
54
|
+
@include grid-column;
|
55
|
+
}
|
56
56
|
|
57
|
-
|
58
|
-
|
57
|
+
@for $i from 1 through $grid-columns {
|
58
|
+
$span: grid-span($i);
|
59
59
|
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
60
|
+
.col.desktop-#{$i} { width: $span; }
|
61
|
+
.col.desktop-push-#{$i} { left: $span; }
|
62
|
+
.col.desktop-pull-#{$i} { right: $span; }
|
63
|
+
}
|
64
64
|
}
|
@@ -1,56 +1,56 @@
|
|
1
1
|
/**
|
2
|
-
* @copyright
|
3
|
-
* @license
|
4
|
-
* @link
|
2
|
+
* @copyright 2010-2013, The Titon Project
|
3
|
+
* @license http://opensource.org/licenses/bsd-license.php
|
4
|
+
* @link http://titon.io
|
5
5
|
*/
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
9
|
.input-group {
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
10
|
+
display: inline-block;
|
11
|
+
|
12
|
+
> .input,
|
13
|
+
> .input-addon,
|
14
|
+
> .button,
|
15
|
+
> .button-group {
|
16
|
+
display: inline-block;
|
17
|
+
position: relative;
|
18
|
+
border-radius: 0;
|
19
|
+
margin-right: -6px; // Remove whitespace and overlap borders
|
20
|
+
white-space: nowrap;
|
21
|
+
height: auto;
|
22
|
+
vertical-align: middle;
|
23
|
+
}
|
24
|
+
|
25
|
+
// Inputs should always be above everything else
|
26
|
+
> .input { z-index: 1; }
|
27
27
|
}
|
28
28
|
|
29
29
|
.input-addon {
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
30
|
+
border: 1px solid $gray-dark;
|
31
|
+
background: $gray;
|
32
|
+
vertical-align: middle;
|
33
|
+
padding: $medium-padding;
|
34
|
+
line-height: normal;
|
35
|
+
font-size: inherit;
|
36
36
|
}
|
37
37
|
|
38
38
|
//-------------------- Modifiers --------------------//
|
39
39
|
|
40
40
|
.input-group.round {
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
41
|
+
> .input:first-child,
|
42
|
+
> .input-addon:first-child,
|
43
|
+
> .button:first-child,
|
44
|
+
> .button-group:first-child .button {
|
45
|
+
border-top-left-radius: $round;
|
46
|
+
border-bottom-left-radius: $round;
|
47
|
+
}
|
48
|
+
|
49
|
+
> .input:last-child,
|
50
|
+
> .input-addon:last-child,
|
51
|
+
> .button:last-child,
|
52
|
+
> .button-group:last-child .button {
|
53
|
+
border-top-right-radius: $round;
|
54
|
+
border-bottom-right-radius: $round;
|
55
|
+
}
|
56
56
|
}
|
@@ -1,53 +1,53 @@
|
|
1
1
|
/**
|
2
|
-
* @copyright
|
3
|
-
* @license
|
4
|
-
* @link
|
2
|
+
* @copyright 2010-2013, The Titon Project
|
3
|
+
* @license http://opensource.org/licenses/bsd-license.php
|
4
|
+
* @link http://titon.io
|
5
5
|
*/
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
9
|
img, video, canvas {
|
10
|
-
|
11
|
-
|
12
|
-
|
10
|
+
max-width: 100%;
|
11
|
+
max-height: auto;
|
12
|
+
height: auto;
|
13
13
|
}
|
14
14
|
|
15
15
|
.show-print { display: none; }
|
16
16
|
|
17
17
|
// Desktop states
|
18
18
|
@include in-desktop {
|
19
|
-
|
20
|
-
|
21
|
-
|
19
|
+
.show-tablet,
|
20
|
+
.show-mobile,
|
21
|
+
.hide-desktop { display: none; }
|
22
22
|
}
|
23
23
|
|
24
24
|
// Tablet states
|
25
25
|
@include in-tablet {
|
26
|
-
|
27
|
-
|
28
|
-
|
26
|
+
.show-desktop,
|
27
|
+
.show-mobile,
|
28
|
+
.hide-tablet { display: none; }
|
29
29
|
}
|
30
30
|
|
31
31
|
// Mobile states
|
32
32
|
@include in-mobile {
|
33
|
-
|
34
|
-
|
35
|
-
|
33
|
+
.show-desktop,
|
34
|
+
.show-tablet,
|
35
|
+
.hide-mobile { display: none; }
|
36
36
|
}
|
37
37
|
|
38
38
|
// Orientation states
|
39
39
|
@include if-portrait {
|
40
|
-
|
41
|
-
|
40
|
+
.show-landscape,
|
41
|
+
.hide-portrait { display: none; }
|
42
42
|
}
|
43
43
|
|
44
44
|
@include if-landscape {
|
45
|
-
|
46
|
-
|
45
|
+
.show-portrait,
|
46
|
+
.hide-landscape { display: none; }
|
47
47
|
}
|
48
48
|
|
49
49
|
// Type states
|
50
50
|
@media print {
|
51
|
-
|
52
|
-
|
51
|
+
.show-print { display: block; }
|
52
|
+
.hide-print { display: none; }
|
53
53
|
}
|
@@ -1,82 +1,82 @@
|
|
1
1
|
/**
|
2
|
-
* @copyright
|
3
|
-
* @license
|
4
|
-
* @link
|
2
|
+
* @copyright 2010-2013, The Titon Project
|
3
|
+
* @license http://opensource.org/licenses/bsd-license.php
|
4
|
+
* @link http://titon.io
|
5
5
|
*/
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
9
|
.table {
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
10
|
+
width: 100%;
|
11
|
+
background: $gray;
|
12
|
+
border-collapse: collapse;
|
13
|
+
|
14
|
+
th, td {
|
15
|
+
padding: $padding;
|
16
|
+
line-height: 110%;
|
17
|
+
vertical-align: top;
|
18
|
+
border: 1px solid $gray-dark;
|
19
|
+
}
|
20
|
+
|
21
|
+
// Move headings to bottom
|
22
|
+
thead th {
|
23
|
+
vertical-align: bottom;
|
24
|
+
text-align: left;
|
25
|
+
}
|
26
|
+
|
27
|
+
// Allow for multiple tbody's
|
28
|
+
tbody + tbody { border-top-width: 2px; }
|
29
|
+
|
30
|
+
// Row colors
|
31
|
+
thead tr,
|
32
|
+
tfoot tr {
|
33
|
+
background: $gray-dark;
|
34
|
+
|
35
|
+
th { border-color: shade($gray-dark, 10%); }
|
36
|
+
}
|
37
|
+
|
38
|
+
// Zebra striping
|
39
|
+
tbody tr {
|
40
|
+
background: $gray;
|
41
|
+
|
42
|
+
&:nth-child(odd) { background: $gray-light; }
|
43
|
+
&.divider { background: shade($gray, 2%); }
|
44
|
+
}
|
45
45
|
}
|
46
46
|
|
47
47
|
//-------------------- Modifiers --------------------//
|
48
48
|
|
49
49
|
.table.table--hover {
|
50
|
-
|
50
|
+
tbody tr:not(.divider):hover { background: #fff; }
|
51
51
|
}
|
52
52
|
|
53
53
|
.table.table--sortable {
|
54
|
-
|
55
|
-
|
54
|
+
thead th {
|
55
|
+
padding: 0;
|
56
56
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
57
|
+
a, span {
|
58
|
+
padding: $padding;
|
59
|
+
display: block;
|
60
|
+
}
|
61
61
|
|
62
|
-
|
63
|
-
|
64
|
-
|
62
|
+
a {
|
63
|
+
background: $gray-dark;
|
64
|
+
color: #000;
|
65
65
|
|
66
|
-
|
67
|
-
|
68
|
-
|
66
|
+
&:hover { background: shade($gray-dark, 5%); }
|
67
|
+
}
|
68
|
+
}
|
69
69
|
}
|
70
70
|
|
71
71
|
.table.table--compact {
|
72
|
-
|
73
|
-
|
72
|
+
thead th,
|
73
|
+
tbody td { padding: $small-padding; }
|
74
74
|
|
75
|
-
|
76
|
-
|
77
|
-
|
75
|
+
&.table--sortable {
|
76
|
+
thead th {
|
77
|
+
padding: 0;
|
78
78
|
|
79
|
-
|
80
|
-
|
81
|
-
|
79
|
+
a, span { padding: $small-padding; }
|
80
|
+
}
|
81
|
+
}
|
82
82
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/**
|
2
|
-
* @copyright
|
3
|
-
* @license
|
4
|
-
* @link
|
2
|
+
* @copyright 2010-2013, The Titon Project
|
3
|
+
* @license http://opensource.org/licenses/bsd-license.php
|
4
|
+
* @link http://titon.io
|
5
5
|
*/
|
6
6
|
|
7
7
|
@import "../common";
|
@@ -14,32 +14,32 @@ h5 { font-size: 1.2rem; }
|
|
14
14
|
h6 { font-size: 1rem; }
|
15
15
|
|
16
16
|
h1, h2, h3, h4, h5, h6 {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
margin: 0;
|
18
|
+
padding: 0;
|
19
|
+
line-height: 100%;
|
20
|
+
font-weight: normal;
|
21
21
|
}
|
22
22
|
|
23
23
|
p, ul, ol, hr, blockquote {
|
24
|
-
|
24
|
+
margin: $margin 0;
|
25
25
|
}
|
26
26
|
|
27
27
|
blockquote {
|
28
|
-
|
29
|
-
|
30
|
-
|
28
|
+
margin: $margin;
|
29
|
+
padding: 0 $padding;
|
30
|
+
border-left: 5px solid $gray;
|
31
31
|
|
32
|
-
|
33
|
-
|
32
|
+
cite { display: block; font-size: .8rem; }
|
33
|
+
cite:before { content: "\2014 \00A0"; /* em dash */ }
|
34
34
|
|
35
|
-
|
35
|
+
@include content-spacing;
|
36
36
|
}
|
37
37
|
|
38
38
|
mark {
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
39
|
+
display: inline-block;
|
40
|
+
background: $gray-dark;
|
41
|
+
border-radius: 2px;
|
42
|
+
padding: 0 5px;
|
43
43
|
}
|
44
44
|
|
45
45
|
.text-muted { color: $default; }
|