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.
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
  }