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,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";
|
@@ -9,54 +9,54 @@
|
|
9
9
|
/**
|
10
10
|
* Should be used in conjunction with the JavaScript Titon.Tooltip module.
|
11
11
|
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
12
|
+
* <ul class="accordion">
|
13
|
+
* <li>
|
14
|
+
* <header class="accordion-head">Title Bar</header>
|
15
|
+
* <section class="accordion-inner">
|
16
|
+
* <div class="accordion-body">Collapsible content</div>
|
17
|
+
* </section>
|
18
|
+
* </li>
|
19
|
+
* </ul>
|
20
20
|
*/
|
21
21
|
|
22
22
|
.accordion,
|
23
23
|
.accordion li {
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
24
|
+
list-style: none;
|
25
|
+
text-align: left;
|
26
|
+
margin: 0;
|
27
|
+
padding: 0;
|
28
28
|
}
|
29
29
|
|
30
30
|
.accordion {
|
31
|
-
|
31
|
+
border: 1px solid $gray-dark;
|
32
32
|
}
|
33
33
|
|
34
34
|
.accordion-head {
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
35
|
+
padding: $padding;
|
36
|
+
background: $gray;
|
37
|
+
border: 1px solid $gray-dark;
|
38
|
+
margin: -1px;
|
39
|
+
cursor: pointer;
|
40
|
+
|
41
|
+
.is-active & {
|
42
|
+
background: $gray-dark;
|
43
|
+
border-color: $gray-darkest;
|
44
|
+
}
|
45
45
|
}
|
46
46
|
|
47
47
|
// Style this
|
48
48
|
.accordion-body {
|
49
|
-
|
49
|
+
padding: $padding;
|
50
50
|
|
51
|
-
|
51
|
+
@include content-spacing;
|
52
52
|
}
|
53
53
|
|
54
54
|
// Inner is used for animations, do not style it!
|
55
55
|
.accordion-inner {
|
56
|
-
|
57
|
-
|
58
|
-
|
56
|
+
overflow: hidden;
|
57
|
+
position: relative;
|
58
|
+
@include transition(all .3s ease-in-out);
|
59
59
|
|
60
|
-
|
61
|
-
|
60
|
+
&.show { height: auto; }
|
61
|
+
&.hide { max-height: 0; } // don't include on base styles
|
62
62
|
}
|
@@ -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";
|
@@ -11,14 +11,14 @@
|
|
11
11
|
*/
|
12
12
|
|
13
13
|
.blackout {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
14
|
+
position: fixed;
|
15
|
+
top: 0;
|
16
|
+
left: 0;
|
17
|
+
height: 100%;
|
18
|
+
width: 100%;
|
19
|
+
z-index: 600;
|
20
|
+
opacity: 0;
|
21
|
+
visibility: hidden;
|
22
|
+
background: black(.5);
|
23
|
+
@include transition(all 0.3s);
|
24
24
|
}
|
@@ -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";
|
@@ -9,167 +9,167 @@
|
|
9
9
|
/**
|
10
10
|
* Should be used in conjunction with the JavaScript Titon.Carousel module.
|
11
11
|
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
26
|
-
*
|
27
|
-
*
|
28
|
-
*
|
12
|
+
* <div class="carousel">
|
13
|
+
* <ul class="carousel-items">
|
14
|
+
* <li>
|
15
|
+
* <img src="/path/to/image.jpg">
|
16
|
+
* <div class="carousel-caption">Image caption</div>
|
17
|
+
* </li>
|
18
|
+
* </ul>
|
19
|
+
* <ol class="carousel-tabs">
|
20
|
+
* <li><a href=""></a></li>
|
21
|
+
* </ol>
|
22
|
+
* <a href="javascript:;" class="carousel-prev">
|
23
|
+
* <span class="icon-chevron-sign-left"></span>
|
24
|
+
* </a>
|
25
|
+
* <a href="javascript:;" class="carousel-next">
|
26
|
+
* <span class="icon-chevron-sign-right"></span>
|
27
|
+
* </a>
|
28
|
+
* </div>
|
29
29
|
*/
|
30
30
|
|
31
31
|
.carousel {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
32
|
+
// 16:9
|
33
|
+
max-width: 640px;
|
34
|
+
max-height: 360px;
|
35
|
+
width: 100%;
|
36
|
+
height: auto;
|
37
|
+
margin: 0 auto;
|
38
|
+
text-align: left;
|
39
|
+
position: relative;
|
40
|
+
overflow: hidden;
|
41
41
|
}
|
42
42
|
|
43
43
|
.carousel-items {
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
44
|
+
list-style: none;
|
45
|
+
margin: 0;
|
46
|
+
padding: 0;
|
47
|
+
position: relative;
|
48
|
+
top: 0;
|
49
|
+
left: 0;
|
50
|
+
width: 100%;
|
51
|
+
height: auto;
|
52
|
+
z-index: 1;
|
53
|
+
@include transition(left 1s, top 1s);
|
54
|
+
|
55
|
+
> li {
|
56
|
+
position: relative;
|
57
|
+
width: 100%;
|
58
|
+
height: auto;
|
59
|
+
z-index: 1;
|
60
|
+
display: block;
|
61
|
+
|
62
|
+
> img {
|
63
|
+
display: block;
|
64
|
+
width: 100%;
|
65
|
+
max-width: 100%;
|
66
|
+
height: auto;
|
67
|
+
}
|
68
|
+
|
69
|
+
.carousel-caption {
|
70
|
+
position: absolute;
|
71
|
+
bottom: 0;
|
72
|
+
left: 0;
|
73
|
+
width: 100%;
|
74
|
+
padding: $padding;
|
75
|
+
color: #fff;
|
76
|
+
background: black(.70);
|
77
|
+
}
|
78
|
+
}
|
79
79
|
}
|
80
80
|
|
81
81
|
.carousel-prev,
|
82
82
|
.carousel-next {
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
83
|
+
display: block;
|
84
|
+
position: absolute;
|
85
|
+
padding: $padding;
|
86
|
+
width: auto;
|
87
|
+
height: auto;
|
88
|
+
z-index: 5;
|
89
|
+
font-size: 28px;
|
90
|
+
color: #fff;
|
91
|
+
opacity: .65;
|
92
|
+
top: 50%;
|
93
|
+
@include transform(translateY(-50%)); // move up 50% of their height
|
94
|
+
|
95
|
+
&:hover {
|
96
|
+
color: #fff;
|
97
|
+
opacity: 1;
|
98
|
+
}
|
99
|
+
|
100
|
+
&:focus {
|
101
|
+
outline: none;
|
102
|
+
}
|
103
|
+
|
104
|
+
// Large icons for large resolutions
|
105
|
+
@include if-tablet-landscape {
|
106
|
+
.carousel-prev,
|
107
|
+
.carousel-next {
|
108
|
+
font-size: 56px;
|
109
|
+
}
|
110
|
+
}
|
111
111
|
}
|
112
112
|
|
113
113
|
.carousel-prev { left: 0; }
|
114
114
|
.carousel-next { right: 0; }
|
115
115
|
|
116
116
|
.carousel-tabs {
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
117
|
+
list-style: none;
|
118
|
+
line-height: 100%;
|
119
|
+
margin: 0;
|
120
|
+
padding: $padding;
|
121
|
+
position: absolute;
|
122
|
+
top: 0;
|
123
|
+
left: 50%;
|
124
|
+
z-index: 5;
|
125
|
+
@include transform(translateX(-50%)); // move left 50% of their width
|
126
|
+
|
127
|
+
li {
|
128
|
+
display: inline-block;
|
129
|
+
margin: 0 3px;
|
130
|
+
}
|
131
|
+
|
132
|
+
a {
|
133
|
+
display: inline-block;
|
134
|
+
border: 2px solid #fff;
|
135
|
+
height: 10px;
|
136
|
+
width: 10px;
|
137
|
+
border-radius: 50%;
|
138
|
+
opacity: .65;
|
139
|
+
|
140
|
+
&:hover { opacity: 1; }
|
141
|
+
&.is-active { background: #fff; }
|
142
|
+
}
|
143
|
+
|
144
|
+
// Hide if no tabs
|
145
|
+
&:empty { display: none; }
|
146
146
|
}
|
147
147
|
|
148
148
|
//-------------------- Animations --------------------//
|
149
149
|
|
150
150
|
.carousel.slide {
|
151
|
-
|
152
|
-
|
151
|
+
.carousel-items {
|
152
|
+
@include clear-fix;
|
153
153
|
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
154
|
+
> li {
|
155
|
+
float: left;
|
156
|
+
}
|
157
|
+
}
|
158
158
|
}
|
159
159
|
|
160
160
|
.carousel.fade {
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
161
|
+
.carousel-items {
|
162
|
+
height: 360px; // needs a base height because slides are absolute
|
163
|
+
|
164
|
+
> li {
|
165
|
+
position: absolute;
|
166
|
+
top: 0;
|
167
|
+
left: 0;
|
168
|
+
opacity: 0;
|
169
|
+
z-index: 1;
|
170
|
+
@include transition(opacity 1s);
|
171
|
+
|
172
|
+
&.show { z-index: 2; }
|
173
|
+
}
|
174
|
+
}
|
175
175
|
}
|
@@ -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";
|
@@ -11,68 +11,68 @@
|
|
11
11
|
*/
|
12
12
|
|
13
13
|
.flyout {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
14
|
+
position: absolute;
|
15
|
+
top: 0;
|
16
|
+
left: 0;
|
17
|
+
z-index: 500;
|
18
|
+
opacity: 0;
|
19
|
+
visibility: hidden;
|
20
|
+
background: $gray;
|
21
|
+
border: 1px solid $gray-dark;
|
22
|
+
@include box-sizing(content-box); // required by MooTools for multi columns
|
23
|
+
@include transition(opacity 0.3s);
|
24
24
|
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
25
|
+
ul {
|
26
|
+
list-style: none;
|
27
|
+
margin: 0;
|
28
|
+
padding: 0;
|
29
|
+
float: left;
|
30
|
+
width: 200px;
|
31
31
|
|
32
|
-
|
33
|
-
|
32
|
+
li {
|
33
|
+
position: relative;
|
34
34
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
35
|
+
> a,
|
36
|
+
> .divider {
|
37
|
+
padding: $small-padding;
|
38
|
+
line-height: 100%;
|
39
|
+
display: block;
|
40
|
+
text-decoration: none;
|
41
|
+
}
|
42
42
|
|
43
|
-
|
43
|
+
> a .caret-right { display: none; }
|
44
44
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
45
|
+
&.has-children > a .caret-right {
|
46
|
+
float: right;
|
47
|
+
display: inline-block; // reveal
|
48
|
+
margin-top: 3px;
|
49
|
+
}
|
50
50
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
51
|
+
// Sub-flyouts
|
52
|
+
> .flyout {
|
53
|
+
left: 90%;
|
54
|
+
@include transition(left .3s, right .3s, opacity .3s);
|
55
55
|
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
56
|
+
// Reverse menu to left side incase it goes outside the viewport
|
57
|
+
// Will be set automatically from the Javascript layer
|
58
|
+
&.flyout--left {
|
59
|
+
left: auto;
|
60
|
+
right: 90%;
|
61
|
+
}
|
62
|
+
}
|
63
63
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
64
|
+
&.is-open > .flyout {
|
65
|
+
opacity: 1;
|
66
|
+
visibility: visible;
|
67
|
+
left: 100%;
|
68
68
|
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
69
|
+
&.flyout--left {
|
70
|
+
left: auto;
|
71
|
+
right: 100%;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
76
|
|
77
|
-
|
77
|
+
@include clear-fix;
|
78
78
|
}
|