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
@@ -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,54 +9,54 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Tooltip module.
11
11
  *
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>
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
- list-style: none;
25
- text-align: left;
26
- margin: 0;
27
- padding: 0;
24
+ list-style: none;
25
+ text-align: left;
26
+ margin: 0;
27
+ padding: 0;
28
28
  }
29
29
 
30
30
  .accordion {
31
- border: 1px solid $gray-dark;
31
+ border: 1px solid $gray-dark;
32
32
  }
33
33
 
34
34
  .accordion-head {
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
- }
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
- padding: $padding;
49
+ padding: $padding;
50
50
 
51
- @include content-spacing;
51
+ @include content-spacing;
52
52
  }
53
53
 
54
54
  // Inner is used for animations, do not style it!
55
55
  .accordion-inner {
56
- overflow: hidden;
57
- position: relative;
58
- @include transition(all .3s ease-in-out);
56
+ overflow: hidden;
57
+ position: relative;
58
+ @include transition(all .3s ease-in-out);
59
59
 
60
- &.show { height: auto; }
61
- &.hide { max-height: 0; } // don't include on base styles
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 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";
@@ -11,14 +11,14 @@
11
11
  */
12
12
 
13
13
  .blackout {
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);
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 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,167 +9,167 @@
9
9
  /**
10
10
  * Should be used in conjunction with the JavaScript Titon.Carousel module.
11
11
  *
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>
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
- // 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;
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
- 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
- }
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
- 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
- }
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
- 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; }
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
- .carousel-items {
152
- @include clear-fix;
151
+ .carousel-items {
152
+ @include clear-fix;
153
153
 
154
- > li {
155
- float: left;
156
- }
157
- }
154
+ > li {
155
+ float: left;
156
+ }
157
+ }
158
158
  }
159
159
 
160
160
  .carousel.fade {
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
- }
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 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";
@@ -11,68 +11,68 @@
11
11
  */
12
12
 
13
13
  .flyout {
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);
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
- ul {
26
- list-style: none;
27
- margin: 0;
28
- padding: 0;
29
- float: left;
30
- width: 200px;
25
+ ul {
26
+ list-style: none;
27
+ margin: 0;
28
+ padding: 0;
29
+ float: left;
30
+ width: 200px;
31
31
 
32
- li {
33
- position: relative;
32
+ li {
33
+ position: relative;
34
34
 
35
- > a,
36
- > .divider {
37
- padding: $small-padding;
38
- line-height: 100%;
39
- display: block;
40
- text-decoration: none;
41
- }
35
+ > a,
36
+ > .divider {
37
+ padding: $small-padding;
38
+ line-height: 100%;
39
+ display: block;
40
+ text-decoration: none;
41
+ }
42
42
 
43
- > a .caret-right { display: none; }
43
+ > a .caret-right { display: none; }
44
44
 
45
- &.has-children > a .caret-right {
46
- float: right;
47
- display: inline-block; // reveal
48
- margin-top: 3px;
49
- }
45
+ &.has-children > a .caret-right {
46
+ float: right;
47
+ display: inline-block; // reveal
48
+ margin-top: 3px;
49
+ }
50
50
 
51
- // Sub-flyouts
52
- > .flyout {
53
- left: 90%;
54
- @include transition(left .3s, right .3s, opacity .3s);
51
+ // Sub-flyouts
52
+ > .flyout {
53
+ left: 90%;
54
+ @include transition(left .3s, right .3s, opacity .3s);
55
55
 
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
- }
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
- &.is-open > .flyout {
65
- opacity: 1;
66
- visibility: visible;
67
- left: 100%;
64
+ &.is-open > .flyout {
65
+ opacity: 1;
66
+ visibility: visible;
67
+ left: 100%;
68
68
 
69
- &.flyout--left {
70
- left: auto;
71
- right: 100%;
72
- }
73
- }
74
- }
75
- }
69
+ &.flyout--left {
70
+ left: auto;
71
+ right: 100%;
72
+ }
73
+ }
74
+ }
75
+ }
76
76
 
77
- @include clear-fix;
77
+ @include clear-fix;
78
78
  }