titon-toolkit 0.9.1 → 0.9.2

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 (42) hide show
  1. checksums.yaml +4 -4
  2. data/src/scss/normalize.scss +396 -0
  3. data/src/scss/toolkit.scss +38 -0
  4. data/src/scss/toolkit/_common.scss +16 -0
  5. data/src/scss/toolkit/_variables.scss +59 -0
  6. data/src/scss/toolkit/effects/visual.scss +75 -0
  7. data/src/scss/toolkit/layout/base.scss +93 -0
  8. data/src/scss/toolkit/layout/code.scss +61 -0
  9. data/src/scss/toolkit/layout/form.scss +158 -0
  10. data/src/scss/toolkit/layout/grid.scss +64 -0
  11. data/src/scss/toolkit/layout/input-group.scss +56 -0
  12. data/src/scss/toolkit/layout/responsive.scss +53 -0
  13. data/src/scss/toolkit/layout/table.scss +82 -0
  14. data/src/scss/toolkit/layout/typography.scss +49 -0
  15. data/src/scss/toolkit/mixins/_grid.scss +24 -0
  16. data/src/scss/toolkit/mixins/_layout.scss +90 -0
  17. data/src/scss/toolkit/mixins/_responsive.scss +111 -0
  18. data/src/scss/toolkit/mixins/_themes.scss +98 -0
  19. data/src/scss/toolkit/modules/accordion.scss +62 -0
  20. data/src/scss/toolkit/modules/blackout.scss +24 -0
  21. data/src/scss/toolkit/modules/carousel.scss +175 -0
  22. data/src/scss/toolkit/modules/flyout.scss +78 -0
  23. data/src/scss/toolkit/modules/modal.scss +243 -0
  24. data/src/scss/toolkit/modules/popover.scss +84 -0
  25. data/src/scss/toolkit/modules/showcase.scss +166 -0
  26. data/src/scss/toolkit/modules/tabs.scss +56 -0
  27. data/src/scss/toolkit/modules/tooltip.scss +130 -0
  28. data/src/scss/toolkit/modules/type-ahead.scss +67 -0
  29. data/src/scss/toolkit/themes/titon.scss +364 -0
  30. data/src/scss/toolkit/themes/tomorrow-night.scss +569 -0
  31. data/src/scss/toolkit/ui/alert.scss +48 -0
  32. data/src/scss/toolkit/ui/breadcrumbs.scss +51 -0
  33. data/src/scss/toolkit/ui/button-group.scss +204 -0
  34. data/src/scss/toolkit/ui/button.scss +48 -0
  35. data/src/scss/toolkit/ui/dropdown.scss +105 -0
  36. data/src/scss/toolkit/ui/icon.scss +22 -0
  37. data/src/scss/toolkit/ui/label-badge.scss +76 -0
  38. data/src/scss/toolkit/ui/lazy-load.scss +14 -0
  39. data/src/scss/toolkit/ui/pagination.scss +128 -0
  40. data/src/scss/toolkit/ui/pin.scss +16 -0
  41. data/src/scss/toolkit/ui/progress.scss +34 -0
  42. 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">&times;</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
+ }