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,48 @@
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
+ * <div class="alert is-info">
11
+ * <button type="button" class="close">
12
+ * <span class="x">&times;</span>
13
+ * </button>
14
+ *
15
+ * <h3 class="alert-title">Title</h3>
16
+ * <p>This is an information message!</p>
17
+ * </div>
18
+ */
19
+
20
+ .alert {
21
+ margin: $margin 0;
22
+ padding: $padding;
23
+ background: $gray;
24
+ border: 1px solid $gray-dark;
25
+ text-align: left;
26
+
27
+ hr {
28
+ border: 0;
29
+ border-top: 1px solid transparent;
30
+ }
31
+
32
+ a {
33
+ font-weight: bold;
34
+ }
35
+
36
+ .close {
37
+ float: right;
38
+ margin-left: $margin;
39
+
40
+ & ~ p { margin: 0; }
41
+ }
42
+
43
+ @include content-spacing;
44
+ }
45
+
46
+ .alert-title {
47
+ margin: 0 0 ($margin / 2) 0;
48
+ }
@@ -0,0 +1,51 @@
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
+ * <nav class="breadcrumbs">
11
+ * <ol>
12
+ * <li><a href="">Home</a></li>
13
+ * <li><a href="">Sub-page</a></li>
14
+ * <li><a href="">Sub-page</a></li>
15
+ * <li><a href="">Sub-page</a></li>
16
+ * <li><a href="">Current</a></li>
17
+ * </ol>
18
+ * </nav>
19
+ */
20
+
21
+ .breadcrumbs {
22
+ text-align: left;
23
+ margin: $margin 0;
24
+ background: $gray;
25
+ border: 1px solid $gray-dark;
26
+ border-radius: $round;
27
+
28
+ ul, ol {
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+
33
+ li {
34
+ position: relative;
35
+ list-style: none;
36
+ float: left;
37
+ }
38
+
39
+ a {
40
+ display: block;
41
+ padding: $medium-padding;
42
+ line-height: 100%;
43
+ font-size: $medium-size;
44
+ }
45
+
46
+ // Sizes
47
+ &.small a { padding: $small-padding; font-size: $small-size; }
48
+ &.large a { padding: $large-padding; font-size: $large-size; }
49
+
50
+ @include clear-fix;
51
+ }
@@ -0,0 +1,204 @@
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
+ * <div class="button-group pill">
11
+ * <a href="" class="button">Left Button</a>
12
+ * <a href="" class="button">Center Button</a>
13
+ * <a href="" class="button">Right Button</a>
14
+ * </div>
15
+ */
16
+
17
+ .button-group {
18
+ @include reset-inline-block;
19
+ white-space: nowrap;
20
+
21
+ > li,
22
+ > .button {
23
+ float: left;
24
+ margin-left: -1px !important;
25
+ border-radius: 0;
26
+ display: block;
27
+
28
+ &:first-child { margin-left: 0; }
29
+ &:hover { z-index: 1; }
30
+ }
31
+
32
+ > li .button {
33
+ display: block;
34
+ border-radius: 0;
35
+ }
36
+
37
+ // Shape: round
38
+ &.round {
39
+ border-radius: $round;
40
+
41
+ > li:first-child .button,
42
+ > .button:first-child,
43
+ > .button.first {
44
+ border-top-left-radius: $round;
45
+ border-bottom-left-radius: $round;
46
+ }
47
+
48
+ > li:last-child .button,
49
+ > .button:last-child,
50
+ > .button.last {
51
+ border-top-right-radius: $round;
52
+ border-bottom-right-radius: $round;
53
+ }
54
+ }
55
+
56
+ // Shape: pill
57
+ &.pill {
58
+ border-radius: $pill;
59
+
60
+ > li:first-child .button,
61
+ > .button:first-child,
62
+ > .button.first {
63
+ border-top-left-radius: $pill;
64
+ border-bottom-left-radius: $pill;
65
+ }
66
+
67
+ > li:last-child .button,
68
+ > .button:last-child,
69
+ > .button.last {
70
+ border-top-right-radius: $pill;
71
+ border-bottom-right-radius: $pill;
72
+ }
73
+ }
74
+
75
+ // Shape: skew
76
+ &.skew {
77
+ border-top-left-radius: $skew;
78
+ border-top-right-radius: $skew;
79
+ border-bottom-left-radius: 0;
80
+ border-bottom-right-radius: 0;
81
+
82
+ > li:first-child .button,
83
+ > .button:first-child,
84
+ > .button.first {
85
+ border-top-left-radius: $skew;
86
+ border-bottom-left-radius: 0;
87
+ }
88
+
89
+ > li:last-child .button,
90
+ > .button:last-child,
91
+ > .button.last {
92
+ border-top-right-radius: $skew;
93
+ border-bottom-right-radius: 0;
94
+ }
95
+ }
96
+
97
+ @include clear-fix;
98
+ }
99
+
100
+ // Space out groups
101
+ .button-group + .button-group {
102
+ margin-left: $margin;
103
+ }
104
+
105
+ //-------------------- Modifiers --------------------//
106
+
107
+ .button-group.button-group--vertical {
108
+ vertical-align: top;
109
+
110
+ > li,
111
+ > .button {
112
+ float: none;
113
+ display: block;
114
+ margin: -1px 0 0 0 !important;
115
+ width: auto;
116
+ max-width: 100%;
117
+
118
+ &:first-child { margin-top: 0 !important; }
119
+ &:hover { z-index: 1; }
120
+ }
121
+
122
+ // Reset radius
123
+ &.round,
124
+ &.pill,
125
+ &.skew,
126
+ &.skew-reverse {
127
+ .button { border-radius: 0; }
128
+ }
129
+
130
+ // Shape: round
131
+ &.round {
132
+ > li:first-child .button,
133
+ > .button:first-child {
134
+ border-top-left-radius: $round;
135
+ border-top-right-radius: $round;
136
+ }
137
+
138
+ > li:last-child .button,
139
+ > .button:last-child {
140
+ border-bottom-left-radius: $round;
141
+ border-bottom-right-radius: $round;
142
+ }
143
+ }
144
+
145
+ // Shape: pill
146
+ &.pill {
147
+ border-radius: $pill;
148
+
149
+ > li:first-child .button,
150
+ > .button:first-child {
151
+ border-top-left-radius: $pill;
152
+ border-top-right-radius: $pill;
153
+ }
154
+
155
+ > li:last-child .button,
156
+ > .button:last-child {
157
+ border-bottom-left-radius: $pill;
158
+ border-bottom-right-radius: $pill;
159
+ }
160
+ }
161
+
162
+ // Shape: skew
163
+ &.skew {
164
+ border-top-left-radius: $skew-y 1.5rem;
165
+ border-bottom-left-radius: $skew-y 1.5rem;
166
+
167
+ > li:first-child .button,
168
+ > .button:first-child {
169
+ border-top-left-radius: $skew-reverse;
170
+ }
171
+
172
+ > li:last-child .button,
173
+ > .button:last-child {
174
+ border-bottom-left-radius: $skew-reverse;
175
+ border-top-right-radius: 0;
176
+ }
177
+ }
178
+
179
+ // Shape: skew-reverse
180
+ &.skew-reverse {
181
+ border-top-right-radius: $skew-y 1.25rem;
182
+ border-bottom-right-radius: $skew-y 1.25rem;
183
+
184
+ > li:first-child .button,
185
+ > .button:first-child {
186
+ border-top-right-radius: $skew-reverse;
187
+ }
188
+
189
+ > li:last-child .button,
190
+ > .button:last-child {
191
+ border-bottom-right-radius: $skew-reverse;
192
+ }
193
+ }
194
+ }
195
+
196
+ .button-group.button-group--justified {
197
+ display: table;
198
+ width: 100%;
199
+
200
+ > .button {
201
+ float: none;
202
+ display: table-cell;
203
+ }
204
+ }
@@ -0,0 +1,48 @@
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
+ * <button type="button" class="button large round">Large Rounded Button</button>
11
+ * <a href="" class="button small pill">Small Pill Button</a>
12
+ */
13
+
14
+ .button {
15
+ @include reset-inline-block;
16
+ cursor: pointer;
17
+ text-align: center;
18
+ overflow: hidden;
19
+ font-weight: normal;
20
+ line-height: normal; // setting it to normal allows it to match form input heights
21
+ user-select: none;
22
+ white-space: nowrap;
23
+ @include size-medium;
24
+ background: $gray;
25
+ border: 1px solid $gray-dark;
26
+
27
+ // Sizes
28
+ &.small, .small & { @include size-small; }
29
+ &.large, .large & { @include size-large; }
30
+
31
+ // Shapes
32
+ &.round { border-radius: $round; }
33
+ &.pill { border-radius: $pill; }
34
+ &.oval { border-radius: #{$oval-x} / #{$oval-y}; }
35
+ &.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
36
+
37
+ // State
38
+ @include disabled-state {
39
+ cursor: not-allowed;
40
+ pointer-events: none;
41
+ }
42
+ }
43
+
44
+ // Reset browser styles
45
+ button::-moz-focus-inner {
46
+ padding: 0;
47
+ border: 0;
48
+ }
@@ -0,0 +1,105 @@
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
+ * <ul class="dropdown">
11
+ * <li class="heading>Heading</li>
12
+ * <li><a href="">Some Action</a></li>
13
+ * <li><a href="">Some Action</a></li>
14
+ * <li class="divider"></li>
15
+ * <li><a href="">Some Action</a></li>
16
+ * </ul>
17
+ */
18
+
19
+ .dropdown {
20
+ display: none;
21
+ text-align: left;
22
+ position: absolute;
23
+ top: 100%;
24
+ left: 0;
25
+ width: 200px;
26
+ background: $gray-light;
27
+ border: 1px solid $gray-dark;
28
+ line-height: 100%;
29
+ z-index: 500;
30
+ opacity: 0;
31
+ visibility: hidden;
32
+ @include transition(opacity .3s);
33
+
34
+ // Nested dropdowns
35
+ .dropdown {
36
+ display: block;
37
+ top: 0;
38
+ left: 90%;
39
+ z-index: 510;
40
+ @include transition(left .3s, opacity .3s);
41
+ }
42
+
43
+ li {
44
+ position: relative;
45
+
46
+ > a {
47
+ padding: $small-padding;
48
+ display: block;
49
+
50
+ .caret-right {
51
+ float: right;
52
+ display: none;
53
+ }
54
+ }
55
+
56
+ &.divider {
57
+ margin: ($margin / 2) 0;
58
+ border-top: 1px solid $gray-dark;
59
+ }
60
+
61
+ &.has-children {
62
+ > a .caret-right { display: inline-block; }
63
+ }
64
+
65
+ // Show nested dropdown
66
+ &:hover {
67
+ > a { background: #fff; }
68
+
69
+ .dropdown {
70
+ visibility: visible;
71
+ opacity: 1;
72
+ left: 100%;
73
+ }
74
+ }
75
+
76
+ &.heading {
77
+ font-weight: bold;
78
+ padding: $small-padding;
79
+ }
80
+ }
81
+
82
+ // Force display
83
+ &.show {
84
+ display: block;
85
+ }
86
+ }
87
+
88
+ .dropdown,
89
+ .dropdown ul {
90
+ list-style: none;
91
+ margin: 0;
92
+ padding: 0;
93
+ }
94
+
95
+ //-------------------- Modifiers --------------------//
96
+
97
+ .dropdown.dropdown--right {
98
+ left: auto;
99
+ right: 0;
100
+ }
101
+
102
+ .dropdown.dropdown--top {
103
+ top: auto;
104
+ bottom: 100%;
105
+ }