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