titon-toolkit 0.9.4 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. data/license.md +23 -0
  2. data/readme.md +93 -0
  3. data/src/lib/titon-toolkit.rb +2 -2
  4. data/src/scss/toolkit.scss +3 -3
  5. data/src/scss/toolkit/effects/visual.scss +47 -47
  6. data/src/scss/toolkit/layout/base.scss +32 -32
  7. data/src/scss/toolkit/layout/code.scss +38 -38
  8. data/src/scss/toolkit/layout/form.scss +86 -86
  9. data/src/scss/toolkit/layout/grid.scss +31 -31
  10. data/src/scss/toolkit/layout/input-group.scss +41 -41
  11. data/src/scss/toolkit/layout/responsive.scss +21 -21
  12. data/src/scss/toolkit/layout/table.scss +59 -59
  13. data/src/scss/toolkit/layout/typography.scss +18 -18
  14. data/src/scss/toolkit/mixins/_grid.scss +8 -8
  15. data/src/scss/toolkit/mixins/_layout.scss +36 -36
  16. data/src/scss/toolkit/mixins/_responsive.scss +56 -56
  17. data/src/scss/toolkit/mixins/_themes.scss +78 -78
  18. data/src/scss/toolkit/modules/accordion.scss +33 -33
  19. data/src/scss/toolkit/modules/blackout.scss +13 -13
  20. data/src/scss/toolkit/modules/carousel.scss +141 -141
  21. data/src/scss/toolkit/modules/flyout.scss +57 -57
  22. data/src/scss/toolkit/modules/modal.scss +206 -206
  23. data/src/scss/toolkit/modules/popover.scss +58 -58
  24. data/src/scss/toolkit/modules/showcase.scss +135 -135
  25. data/src/scss/toolkit/modules/tabs.scss +29 -29
  26. data/src/scss/toolkit/modules/tooltip.scss +109 -109
  27. data/src/scss/toolkit/modules/type-ahead.scss +44 -44
  28. data/src/scss/toolkit/themes/titon.scss +242 -242
  29. data/src/scss/toolkit/themes/tomorrow-night.scss +322 -322
  30. data/src/scss/toolkit/ui/alert.scss +29 -29
  31. data/src/scss/toolkit/ui/breadcrumbs.scss +41 -41
  32. data/src/scss/toolkit/ui/button-group.scss +181 -181
  33. data/src/scss/toolkit/ui/button.scss +31 -31
  34. data/src/scss/toolkit/ui/dropdown.scss +83 -83
  35. data/src/scss/toolkit/ui/icon.scss +5 -5
  36. data/src/scss/toolkit/ui/label-badge.scss +48 -48
  37. data/src/scss/toolkit/ui/lazy-load.scss +8 -5
  38. data/src/scss/toolkit/ui/matrix.scss +26 -0
  39. data/src/scss/toolkit/ui/pagination.scss +108 -108
  40. data/src/scss/toolkit/ui/pin.scss +5 -5
  41. data/src/scss/toolkit/ui/progress.scss +20 -20
  42. data/version.md +1 -0
  43. metadata +17 -5
  44. checksums.yaml +0 -15
data/src/scss/toolkit/modules/showcase.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
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,158 +9,158 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Showcase module.
11
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">&times;</span>
20
- * </button>
21
- * </div>
22
- * </div>
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">&times;</span>
20
+ * </button>
21
+ * </div>
22
+ * </div>
23
23
  */
24
24
 
25
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
- }
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
56
  }
57
57
 
58
58
  .showcase-inner {
59
- position: relative;
60
- padding: $padding;
61
- background: $gray;
62
- border: 1px solid $gray-dark;
59
+ position: relative;
60
+ padding: $padding;
61
+ background: $gray;
62
+ border: 1px solid $gray-dark;
63
63
  }
64
64
 
65
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
- }
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
96
  }
97
97
 
98
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;
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
107
  }
108
108
 
109
109
  .showcase-prev,
110
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
- }
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
131
  }
132
132
 
133
133
  .showcase-prev { left: $padding; }
134
134
  .showcase-next { right: $padding; }
135
135
 
136
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; }
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
166
  }
data/src/scss/toolkit/modules/tabs.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
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,48 +9,48 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Tabs module.
11
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>
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
19
  *
20
- * <section id="tab-1" class="tabs-section"></section>
21
- * <section id="tab-2" class="tabs-section"></section>
22
- * </div>
20
+ * <section id="tab-1" class="tabs-section"></section>
21
+ * <section id="tab-2" class="tabs-section"></section>
22
+ * </div>
23
23
  */
24
24
 
25
25
  .tabs {
26
- text-align: left;
26
+ text-align: left;
27
27
  }
28
28
 
29
29
  .tabs-nav {
30
- display: block;
31
- margin-bottom: $margin;
30
+ display: block;
31
+ margin-bottom: $margin;
32
32
 
33
- ul, li {
34
- @include reset-inline-block;
35
- list-style: none;
36
- }
33
+ ul, li {
34
+ @include reset-inline-block;
35
+ list-style: none;
36
+ }
37
37
 
38
- @include clear-fix;
38
+ @include clear-fix;
39
39
  }
40
40
 
41
41
  // Display none on sections since visibility takes up DOM space
42
42
  .tabs-section.hide {
43
- display: none;
43
+ display: none;
44
44
  }
45
45
 
46
46
  //-------------------- Modifiers --------------------//
47
47
 
48
48
  .tabs.tabs--horizontal {
49
- .tabs-nav {
50
- ul, li, a, button {
51
- display: block;
52
- float: none;
53
- text-align: left;
54
- }
55
- }
49
+ .tabs-nav {
50
+ ul, li, a, button {
51
+ display: block;
52
+ float: none;
53
+ text-align: left;
54
+ }
55
+ }
56
56
  }
data/src/scss/toolkit/modules/tooltip.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
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,122 +9,122 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Tooltip module.
11
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>
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
19
  */
20
20
 
21
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
- }
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
65
  }
66
66
 
67
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
- }
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
78
  }
79
79
 
80
80
  //-------------------- Animations --------------------//
81
81
 
82
82
  .tooltip,
83
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
- }
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
130
  }