titon-toolkit 0.9.1 → 0.9.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/src/scss/normalize.scss +396 -0
- data/src/scss/toolkit.scss +38 -0
- data/src/scss/toolkit/_common.scss +16 -0
- data/src/scss/toolkit/_variables.scss +59 -0
- data/src/scss/toolkit/effects/visual.scss +75 -0
- data/src/scss/toolkit/layout/base.scss +93 -0
- data/src/scss/toolkit/layout/code.scss +61 -0
- data/src/scss/toolkit/layout/form.scss +158 -0
- data/src/scss/toolkit/layout/grid.scss +64 -0
- data/src/scss/toolkit/layout/input-group.scss +56 -0
- data/src/scss/toolkit/layout/responsive.scss +53 -0
- data/src/scss/toolkit/layout/table.scss +82 -0
- data/src/scss/toolkit/layout/typography.scss +49 -0
- data/src/scss/toolkit/mixins/_grid.scss +24 -0
- data/src/scss/toolkit/mixins/_layout.scss +90 -0
- data/src/scss/toolkit/mixins/_responsive.scss +111 -0
- data/src/scss/toolkit/mixins/_themes.scss +98 -0
- data/src/scss/toolkit/modules/accordion.scss +62 -0
- data/src/scss/toolkit/modules/blackout.scss +24 -0
- data/src/scss/toolkit/modules/carousel.scss +175 -0
- data/src/scss/toolkit/modules/flyout.scss +78 -0
- data/src/scss/toolkit/modules/modal.scss +243 -0
- data/src/scss/toolkit/modules/popover.scss +84 -0
- data/src/scss/toolkit/modules/showcase.scss +166 -0
- data/src/scss/toolkit/modules/tabs.scss +56 -0
- data/src/scss/toolkit/modules/tooltip.scss +130 -0
- data/src/scss/toolkit/modules/type-ahead.scss +67 -0
- data/src/scss/toolkit/themes/titon.scss +364 -0
- data/src/scss/toolkit/themes/tomorrow-night.scss +569 -0
- data/src/scss/toolkit/ui/alert.scss +48 -0
- data/src/scss/toolkit/ui/breadcrumbs.scss +51 -0
- data/src/scss/toolkit/ui/button-group.scss +204 -0
- data/src/scss/toolkit/ui/button.scss +48 -0
- data/src/scss/toolkit/ui/dropdown.scss +105 -0
- data/src/scss/toolkit/ui/icon.scss +22 -0
- data/src/scss/toolkit/ui/label-badge.scss +76 -0
- data/src/scss/toolkit/ui/lazy-load.scss +14 -0
- data/src/scss/toolkit/ui/pagination.scss +128 -0
- data/src/scss/toolkit/ui/pin.scss +16 -0
- data/src/scss/toolkit/ui/progress.scss +34 -0
- metadata +42 -2
@@ -0,0 +1,84 @@
|
|
1
|
+
/**
|
2
|
+
* @copyright 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
|
+
/**
|
10
|
+
* Should be used in conjunction with the JavaScript Titon.Popover module.
|
11
|
+
*
|
12
|
+
* <div class="popover">
|
13
|
+
* <div class="popover-inner">
|
14
|
+
* <div class="popover-head">Popover Title</div>
|
15
|
+
* <div class="popover-body">Popover Content</div>
|
16
|
+
* </div>
|
17
|
+
* <div class="popover-arrow"></div>
|
18
|
+
* </div>
|
19
|
+
*/
|
20
|
+
|
21
|
+
.popover {
|
22
|
+
position: absolute;
|
23
|
+
top: 0;
|
24
|
+
left: 0;
|
25
|
+
margin: 0;
|
26
|
+
padding: 0;
|
27
|
+
z-index: 500;
|
28
|
+
max-width: 300px;
|
29
|
+
visibility: hidden;
|
30
|
+
background: $gray;
|
31
|
+
border: 1px solid $gray-dark;
|
32
|
+
|
33
|
+
&.center-left .popover-arrow,
|
34
|
+
&.center-right .popover-arrow {
|
35
|
+
top: 50%;
|
36
|
+
margin-top: -8px;
|
37
|
+
}
|
38
|
+
|
39
|
+
&.center-left .popover-arrow {
|
40
|
+
border-left-color: #000;
|
41
|
+
right: -16px;
|
42
|
+
}
|
43
|
+
|
44
|
+
&.center-right .popover-arrow {
|
45
|
+
border-right-color: #000;
|
46
|
+
left: -16px;
|
47
|
+
}
|
48
|
+
|
49
|
+
&.top-center .popover-arrow,
|
50
|
+
&.bottom-center .popover-arrow {
|
51
|
+
left: 50%;
|
52
|
+
margin-left: -8px;
|
53
|
+
}
|
54
|
+
|
55
|
+
&.top-center .popover-arrow {
|
56
|
+
border-top-color: #000;
|
57
|
+
bottom: -16px;
|
58
|
+
}
|
59
|
+
|
60
|
+
&.bottom-center .popover-arrow {
|
61
|
+
border-bottom-color: #000;
|
62
|
+
top: -16px;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
.popover-head,
|
67
|
+
.popover-body {
|
68
|
+
padding: $small-padding;
|
69
|
+
}
|
70
|
+
|
71
|
+
.popover-arrow {
|
72
|
+
width: 0;
|
73
|
+
height: 0;
|
74
|
+
border: 8px solid transparent;
|
75
|
+
position: absolute;
|
76
|
+
|
77
|
+
&:after {
|
78
|
+
content: "";
|
79
|
+
border: 6px solid transparent;
|
80
|
+
position: absolute;
|
81
|
+
top: -6px;
|
82
|
+
left: -6px;
|
83
|
+
}
|
84
|
+
}
|
@@ -0,0 +1,166 @@
|
|
1
|
+
/**
|
2
|
+
* @copyright 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
|
+
/**
|
10
|
+
* Should be used in conjunction with the JavaScript Titon.Showcase module.
|
11
|
+
*
|
12
|
+
* <div class="showcase">
|
13
|
+
* <div class="showcase-inner">
|
14
|
+
* <ul class="showcase-items"></u>
|
15
|
+
* <ol class="showcase-tabs"></ol>
|
16
|
+
* <a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
|
17
|
+
* <a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
|
18
|
+
* <button type="button" class="close showcase-event-close">
|
19
|
+
* <span class="x">×</span>
|
20
|
+
* </button>
|
21
|
+
* </div>
|
22
|
+
* </div>
|
23
|
+
*/
|
24
|
+
|
25
|
+
.showcase {
|
26
|
+
position: fixed;
|
27
|
+
top: 50%;
|
28
|
+
left: 50%;
|
29
|
+
width: auto;
|
30
|
+
height: auto;
|
31
|
+
margin: 0;
|
32
|
+
padding: 0;
|
33
|
+
z-index: 610; // higher than blackout
|
34
|
+
visibility: hidden;
|
35
|
+
backface-visibility: hidden;
|
36
|
+
@include transform(translateX(-50%) translateY(-50%));
|
37
|
+
|
38
|
+
.close {
|
39
|
+
position: absolute;
|
40
|
+
top: -1px;
|
41
|
+
right: -35px;
|
42
|
+
}
|
43
|
+
|
44
|
+
&.is-loading,
|
45
|
+
&.is-single {
|
46
|
+
.showcase-prev,
|
47
|
+
.showcase-next,
|
48
|
+
.showcase-tabs {
|
49
|
+
display: none !important;
|
50
|
+
}
|
51
|
+
|
52
|
+
.showcase-inner {
|
53
|
+
background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
.showcase-inner {
|
59
|
+
position: relative;
|
60
|
+
padding: $padding;
|
61
|
+
background: $gray;
|
62
|
+
border: 1px solid $gray-dark;
|
63
|
+
}
|
64
|
+
|
65
|
+
.showcase-items {
|
66
|
+
list-style: none;
|
67
|
+
padding: 0;
|
68
|
+
margin: 0;
|
69
|
+
width: 100px;
|
70
|
+
height: 100px;
|
71
|
+
max-width: 1024px;
|
72
|
+
position: relative;
|
73
|
+
overflow: hidden;
|
74
|
+
@include transition(width .3s, height .3s);
|
75
|
+
|
76
|
+
> li {
|
77
|
+
position: absolute;
|
78
|
+
top: 0;
|
79
|
+
left: 0;
|
80
|
+
opacity: 0;
|
81
|
+
@include transition(opacity .3s);
|
82
|
+
|
83
|
+
> img {
|
84
|
+
max-width: 100%;
|
85
|
+
width: 100%;
|
86
|
+
height: auto;
|
87
|
+
display: block;
|
88
|
+
}
|
89
|
+
|
90
|
+
&.show {
|
91
|
+
.showcase-caption {
|
92
|
+
display: block;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
.showcase-caption {
|
99
|
+
position: absolute;
|
100
|
+
bottom: 0;
|
101
|
+
left: 0;
|
102
|
+
width: 100%;
|
103
|
+
padding: $padding;
|
104
|
+
color: #fff;
|
105
|
+
background: black(.70);
|
106
|
+
display: none;
|
107
|
+
}
|
108
|
+
|
109
|
+
.showcase-prev,
|
110
|
+
.showcase-next {
|
111
|
+
display: block;
|
112
|
+
position: absolute;
|
113
|
+
padding: $padding;
|
114
|
+
width: auto;
|
115
|
+
height: auto;
|
116
|
+
z-index: 5;
|
117
|
+
font-size: 28px;
|
118
|
+
color: #fff;
|
119
|
+
opacity: .65;
|
120
|
+
top: 50%;
|
121
|
+
@include transform(translateY(-50%)); // move up 50% of their height
|
122
|
+
|
123
|
+
&:hover {
|
124
|
+
color: #fff;
|
125
|
+
opacity: 1;
|
126
|
+
}
|
127
|
+
|
128
|
+
&:focus {
|
129
|
+
outline: none;
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
.showcase-prev { left: $padding; }
|
134
|
+
.showcase-next { right: $padding; }
|
135
|
+
|
136
|
+
.showcase-tabs {
|
137
|
+
list-style: none;
|
138
|
+
line-height: 100%;
|
139
|
+
margin: 0;
|
140
|
+
padding: $padding;
|
141
|
+
position: absolute;
|
142
|
+
top: $padding;
|
143
|
+
left: 50%;
|
144
|
+
z-index: 5;
|
145
|
+
@include transform(translateX(-50%)); // move left 50% of their width
|
146
|
+
|
147
|
+
li {
|
148
|
+
display: inline-block;
|
149
|
+
margin: 0 3px;
|
150
|
+
}
|
151
|
+
|
152
|
+
a {
|
153
|
+
display: inline-block;
|
154
|
+
border: 2px solid #fff;
|
155
|
+
height: 10px;
|
156
|
+
width: 10px;
|
157
|
+
border-radius: 50%;
|
158
|
+
opacity: .65;
|
159
|
+
|
160
|
+
&:hover { opacity: 1; }
|
161
|
+
&.is-active { background: #fff; }
|
162
|
+
}
|
163
|
+
|
164
|
+
// Hide if no tabs
|
165
|
+
&:empty { display: none; }
|
166
|
+
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
/**
|
2
|
+
* @copyright 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
|
+
/**
|
10
|
+
* Should be used in conjunction with the JavaScript Titon.Tabs module.
|
11
|
+
*
|
12
|
+
* <div id="tabs" class="tabs">
|
13
|
+
* <nav class="tabs-nav">
|
14
|
+
* <ul>
|
15
|
+
* <li><a href="#tab-1">Tab 1</a></li>
|
16
|
+
* <li><a href="#tab-2">Tab 2</a></li>
|
17
|
+
* </ul>
|
18
|
+
* </nav>
|
19
|
+
*
|
20
|
+
* <section id="tab-1" class="tabs-section"></section>
|
21
|
+
* <section id="tab-2" class="tabs-section"></section>
|
22
|
+
* </div>
|
23
|
+
*/
|
24
|
+
|
25
|
+
.tabs {
|
26
|
+
text-align: left;
|
27
|
+
}
|
28
|
+
|
29
|
+
.tabs-nav {
|
30
|
+
display: block;
|
31
|
+
margin-bottom: $margin;
|
32
|
+
|
33
|
+
ul, li {
|
34
|
+
@include reset-inline-block;
|
35
|
+
list-style: none;
|
36
|
+
}
|
37
|
+
|
38
|
+
@include clear-fix;
|
39
|
+
}
|
40
|
+
|
41
|
+
// Display none on sections since visibility takes up DOM space
|
42
|
+
.tabs-section.hide {
|
43
|
+
display: none;
|
44
|
+
}
|
45
|
+
|
46
|
+
//-------------------- Modifiers --------------------//
|
47
|
+
|
48
|
+
.tabs.tabs--horizontal {
|
49
|
+
.tabs-nav {
|
50
|
+
ul, li, a, button {
|
51
|
+
display: block;
|
52
|
+
float: none;
|
53
|
+
text-align: left;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
@@ -0,0 +1,130 @@
|
|
1
|
+
/**
|
2
|
+
* @copyright 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
|
+
/**
|
10
|
+
* Should be used in conjunction with the JavaScript Titon.Tooltip module.
|
11
|
+
*
|
12
|
+
* <div class="tooltip">
|
13
|
+
* <div class="tooltip-inner">
|
14
|
+
* <div class="tooltip-head">Tooltip Title</div>
|
15
|
+
* <div class="tooltip-body">Tooltip Content</div>
|
16
|
+
* </div>
|
17
|
+
* <div class="tooltip-arrow"></div>
|
18
|
+
* </div>
|
19
|
+
*/
|
20
|
+
|
21
|
+
.tooltip {
|
22
|
+
position: absolute;
|
23
|
+
top: 0;
|
24
|
+
left: 0;
|
25
|
+
margin: 0;
|
26
|
+
padding: $small-padding;
|
27
|
+
z-index: 500;
|
28
|
+
max-width: 200px;
|
29
|
+
visibility: hidden;
|
30
|
+
background: #000;
|
31
|
+
color: #fff;
|
32
|
+
@include box-sizing(content-box); // required or else MooTools position() is off
|
33
|
+
|
34
|
+
&.center-left .tooltip-arrow,
|
35
|
+
&.center-right .tooltip-arrow {
|
36
|
+
top: 50%;
|
37
|
+
margin-top: -6px;
|
38
|
+
}
|
39
|
+
|
40
|
+
&.center-left .tooltip-arrow {
|
41
|
+
border-left-color: #000;
|
42
|
+
right: -12px;
|
43
|
+
}
|
44
|
+
|
45
|
+
&.center-right .tooltip-arrow {
|
46
|
+
border-right-color: #000;
|
47
|
+
left: -12px;
|
48
|
+
}
|
49
|
+
|
50
|
+
&.top-center .tooltip-arrow,
|
51
|
+
&.bottom-center .tooltip-arrow {
|
52
|
+
left: 50%;
|
53
|
+
margin-left: -6px;
|
54
|
+
}
|
55
|
+
|
56
|
+
&.top-center .tooltip-arrow {
|
57
|
+
border-top-color: #000;
|
58
|
+
bottom: -12px;
|
59
|
+
}
|
60
|
+
|
61
|
+
&.bottom-center .tooltip-arrow {
|
62
|
+
border-bottom-color: #000;
|
63
|
+
top: -12px;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
.tooltip-arrow {
|
68
|
+
width: 0;
|
69
|
+
height: 0;
|
70
|
+
border: 6px solid transparent;
|
71
|
+
position: absolute;
|
72
|
+
|
73
|
+
&:after {
|
74
|
+
content: "";
|
75
|
+
border: 4px solid transparent;
|
76
|
+
position: absolute;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
//-------------------- Animations --------------------//
|
81
|
+
|
82
|
+
.tooltip,
|
83
|
+
.popover {
|
84
|
+
&.fade {
|
85
|
+
opacity: 0;
|
86
|
+
@include transition(opacity 0.5s);
|
87
|
+
}
|
88
|
+
|
89
|
+
&.from-above {
|
90
|
+
@include transition(transform 0.3s);
|
91
|
+
@include transform(scale(1.2));
|
92
|
+
|
93
|
+
&.show {
|
94
|
+
@include transform(scale(1));
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
&.from-below {
|
99
|
+
@include transition(transform 0.3s);
|
100
|
+
@include transform(scale(0.8));
|
101
|
+
|
102
|
+
&.show {
|
103
|
+
@include transform(scale(1));
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
&.flip-rotate {
|
108
|
+
@include transition(transform 0.3s);
|
109
|
+
@include transform(rotate(-90deg));
|
110
|
+
|
111
|
+
&.show {
|
112
|
+
@include transform(rotate(0deg));
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
&.slide-in {
|
117
|
+
@include transition(transform 0.3s);
|
118
|
+
|
119
|
+
&.top-left { @include transform(translate(-25%, -25%)); }
|
120
|
+
&.top-center { @include transform(translateY(-50%)); }
|
121
|
+
&.top-right { @include transform(translate(25%, -25%)); }
|
122
|
+
&.center-left { @include transform(translateX(-25%)); }
|
123
|
+
&.center-right { @include transform(translateX(25%)); }
|
124
|
+
&.bottom-left { @include transform(translate(-25%, 25%)); }
|
125
|
+
&.bottom-center { @include transform(translateY(50%)); }
|
126
|
+
&.bottom-right { @include transform(translate(25%, 25%)); }
|
127
|
+
|
128
|
+
&.show { @include transform(translate(0)); }
|
129
|
+
}
|
130
|
+
}
|
@@ -0,0 +1,67 @@
|
|
1
|
+
/**
|
2
|
+
* @copyright 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
|
+
/**
|
10
|
+
* Should be used in conjunction with the JavaScript Titon.TypeAhead module.
|
11
|
+
*/
|
12
|
+
|
13
|
+
.type-ahead {
|
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 transition(opacity 0.3s);
|
23
|
+
|
24
|
+
ul {
|
25
|
+
list-style: none;
|
26
|
+
margin: 0;
|
27
|
+
padding: 0;
|
28
|
+
min-width: 200px;
|
29
|
+
|
30
|
+
a,
|
31
|
+
li.heading {
|
32
|
+
padding: $small-padding;
|
33
|
+
line-height: 100%;
|
34
|
+
display: block;
|
35
|
+
text-decoration: none;
|
36
|
+
}
|
37
|
+
|
38
|
+
li.heading {
|
39
|
+
font-weight: bold;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
.type-ahead-desc {
|
45
|
+
display: block;
|
46
|
+
color: $gray-darkest;
|
47
|
+
font-size: .7rem;
|
48
|
+
}
|
49
|
+
|
50
|
+
.type-ahead-shadow {
|
51
|
+
position: relative;
|
52
|
+
|
53
|
+
input {
|
54
|
+
position: absolute;
|
55
|
+
top: 0;
|
56
|
+
left: 0;
|
57
|
+
}
|
58
|
+
|
59
|
+
.is-shadow {
|
60
|
+
color: gray;
|
61
|
+
}
|
62
|
+
|
63
|
+
.not-shadow {
|
64
|
+
background: transparent;
|
65
|
+
z-index: 1;
|
66
|
+
}
|
67
|
+
}
|