helium-rails 0.0.1

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.
@@ -0,0 +1,109 @@
1
+ // Progress indicator
2
+ // ------------------
3
+
4
+ $progress-indicator-step-diameter: 36px;
5
+ $progress-indicator-connector-height: 14px;
6
+ $progress-indicator-fill-padding: 4px;
7
+
8
+ .progress-indicator {
9
+
10
+ @include list-reset();
11
+ text-align: center;
12
+ font-size: 0;
13
+
14
+ .step {
15
+ display: inline-block;
16
+ position: relative;
17
+ width: 16%;
18
+
19
+ a {
20
+ &:hover {
21
+ text-decoration: none;
22
+ }
23
+ }
24
+
25
+ .step-number {
26
+ display: block;
27
+ width: $progress-indicator-step-diameter;
28
+ height: $progress-indicator-step-diameter;
29
+ margin: 0 auto;
30
+ padding: $progress-indicator-fill-padding;
31
+ background: #ccc;
32
+
33
+ @include border-radius(100px);
34
+
35
+ .fill {
36
+ display: block;
37
+ position: relative;
38
+ z-index: 2;
39
+ width: $progress-indicator-step-diameter - ($progress-indicator-fill-padding * 2);
40
+ height: $progress-indicator-step-diameter - ($progress-indicator-fill-padding * 2);
41
+
42
+ @include border-radius(100px);
43
+
44
+ font-size: 16px;
45
+ line-height: $progress-indicator-step-diameter - ($progress-indicator-fill-padding * 2);
46
+
47
+
48
+ }
49
+ }
50
+
51
+ .step-title {
52
+ color: $muted-font-color;
53
+ font-size: 12px;
54
+ }
55
+
56
+ .step-connector {
57
+ display: block;
58
+ position: absolute;
59
+ top: ($progress-indicator-step-diameter / 2) - ($progress-indicator-connector-height / 2);
60
+ left: 50%;
61
+ width: 100%;
62
+ height: $progress-indicator-connector-height;
63
+ padding: $progress-indicator-fill-padding 0;
64
+ background: #ccc;
65
+ }
66
+
67
+ &.completed {
68
+
69
+ .step-number {
70
+ .fill {
71
+ background: $link-color;
72
+ color: #fff;
73
+ }
74
+ }
75
+
76
+ .step-connector {
77
+ .fill {
78
+ display: block;
79
+ position: relative;
80
+ z-index: 1;
81
+ height: $progress-indicator-connector-height - ($progress-indicator-fill-padding * 2);
82
+ background: $link-color;
83
+ }
84
+ }
85
+ }
86
+
87
+ &.current {
88
+ .step-number {
89
+ padding: 0;
90
+ background: none;
91
+
92
+ .fill {
93
+ width: $progress-indicator-step-diameter;
94
+ height: $progress-indicator-step-diameter;
95
+ background: $link-color;
96
+ color: #fff;
97
+ font-size: 18px;
98
+ line-height: $progress-indicator-step-diameter;
99
+ }
100
+ }
101
+ }
102
+
103
+ &:last-child {
104
+ .step-connector {
105
+ display: none;
106
+ }
107
+ }
108
+ }
109
+ }
@@ -0,0 +1,134 @@
1
+ // Colors
2
+ // ------
3
+
4
+ $gray-light: #999;
5
+ $gray: #444;
6
+ $gray-dark: #222;
7
+ $blue: #006699;
8
+ $facebook-blue: #3B5998;
9
+ $twitter-blue: #00ACED;
10
+ $red-dark: #A01D2B;
11
+
12
+
13
+ // Grid
14
+ // -----
15
+
16
+ $page-width: 940px;
17
+ $column-count: 12;
18
+ $column-gutter: 20px;
19
+ $responsive-breakpoint: 767px;
20
+ $mobile-padding: 15px; // Distance from content to edge of screen on mobile
21
+ $tablet-padding: 20px; // Distance from content to edge of screen on tablet
22
+
23
+ // Typography
24
+ // ----------
25
+
26
+ $base-font-color : $gray;
27
+ $muted-font-color : $gray-light;
28
+ $base-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
29
+ $base-font-size : 14px;
30
+ $base-line-height : 21px;
31
+ $small-font-size : 12px;
32
+ $small-line-height : 18px;
33
+ $heading-font-family : $base-font-family;
34
+ $heading-font-weight: 600;
35
+ $heading-color : $gray-dark;
36
+ $icon-size: 20px;
37
+
38
+ // Links
39
+ // -----
40
+
41
+ $link-color : $blue;
42
+
43
+ // Miscellaneous UI
44
+ // ----------------
45
+
46
+ $site-background-color: #fafafa;
47
+ $big-border-radius: 4px;
48
+ $small-border-radius: 4px;
49
+ $border-color: rgba(0,0,0,0.13);
50
+ $box-shadow: 0px 1px 1px rgba(0,0,0,0.08);
51
+
52
+ // Buttons
53
+ // -------
54
+
55
+ $button-theme: glossy; // Required - can take values of glossy or flat
56
+ $button-height: 32px; // Total height of normal size button
57
+ $button-caret-height: 4px;
58
+ $button-font-color: $base-font-color;
59
+ $button-font-family: $heading-font-family;
60
+ $button-font-size: 12px;
61
+ $button-font-weight: 600;
62
+ $button-icon-size: 16px;
63
+ $button-solid-background: #e0e0e0; // Solid color for flat buttons and fallback
64
+ $button-highlight: #fbfbfb; // Top gradient stop for glossy theme
65
+ $button-lowlight: darken($button-highlight, 6%); // Bottom gradient stop for glossy theme
66
+ $button-border-color: rgba(0,0,0,0.2); // Border color - ignored when theme is flat, highly recommended to keep this as an alpha value of black
67
+ $button-border-width: 1px; // Border width - ignored when theme is flat
68
+ $button-shine: #fff; // 1px shine at top of button and inset text - ignored when theme is flat
69
+ $button-horizontal-padding: $button-font-size;
70
+ $button-border-radius: $small-border-radius;
71
+ $button-box-shadow: 0px 1px 1px rgba(0,0,0,0.08);
72
+ $button-large-height: 40px;
73
+ $button-large-font-size: 16px;
74
+ $button-large-horizontal-padding: 20px;
75
+ $button-small-height: 24px;
76
+ $button-small-font-size: 11px;
77
+ $button-small-horizontal-padding: 11px;
78
+
79
+ // Navbar
80
+ // ------
81
+
82
+ $navbar-background-color: $gray-dark;
83
+ $navbar-height: 50px;
84
+ $navbar-highlight: #99191C;
85
+ $navbar-lowlight: #6A111A;
86
+ $navbar-link-font-size: 14px;
87
+ $navbar-link-color: #fff;
88
+ $navbar-branding-font-size: 18px;
89
+ $navbar-caret-height: 5px;
90
+ $navbar-link-horizontal-padding: $navbar-link-font-size;
91
+
92
+ $vertical-nav-link-font-size: 16px;
93
+ $vertical-nav-link-height: 32px;
94
+
95
+ $mobile-nav-link-font-size: $base-font-size;
96
+ $mobile-nav-link-height: 30px;
97
+
98
+ // Dropdowns
99
+ // ---------
100
+
101
+ $dropdown-background: #fff;
102
+ $dropdown-link-font-size: $base-font-size;
103
+ $dropdown-link-height: 24px;
104
+ $dropdown-caret-height: 5px;
105
+ $dropdown-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
106
+
107
+ // Forms
108
+ // -----
109
+
110
+ $form-input-height: 30px;
111
+ $form-input-gutter: 20px;
112
+ $form-transition-duration: 0.2s;
113
+ $input-border-radius: 2px;
114
+ $placeholder-color: $muted-font-color;
115
+ $placeholder-focus-color: lighten($muted-font-color, 15%);
116
+ $radio-checkbox-input-height: 13px;
117
+ $radio-checkbox-item-height: $base-font-size * 2;
118
+ $radio-checkbox-font-size: $base-font-size;
119
+ $radio-checkbox-line-height: $base-line-height;
120
+ $single-checkbox-font-size: $small-font-size;
121
+ $error-color: $red-dark;
122
+
123
+ // Modals
124
+ // ------
125
+
126
+ $modal-padding: 20px;
127
+ $modal-width: 400px;
128
+
129
+ // Sprites
130
+ // -------
131
+
132
+ $sprite-color-size: 300px 300px;
133
+ $sprite-icons-white-size: 300px 300px;
134
+ $sprite-icons-black-size: 300px 300px;
@@ -0,0 +1,94 @@
1
+ // Generic dropdown styles
2
+ // -----------------------
3
+
4
+ .has-dropdown {
5
+ position: relative; // for positioning of dropdown
6
+
7
+ > a {
8
+ position: relative; // for positioning of caret
9
+ }
10
+
11
+ &.open > a {
12
+ background: $dropdown-background !important;
13
+ color: $base-font-color !important;
14
+
15
+ &:after {
16
+ @include pseudo();
17
+ width: 100%;
18
+ height: 6px;
19
+ background: $dropdown-background;
20
+ bottom: -4px;
21
+ left: 0px;
22
+ z-index: 2;
23
+ }
24
+ }
25
+
26
+ .dropdown { // dropdown menu styles
27
+
28
+ @include border-radius(0 0 $small-border-radius $small-border-radius);
29
+
30
+ @if $button-theme == "glossy" {
31
+ @include box-shadow($dropdown-box-shadow);
32
+ }
33
+
34
+ visibility: hidden;
35
+ position: absolute;
36
+ left: -1px;
37
+ top: 100%;
38
+ min-width: 160px;
39
+ margin: 0;
40
+ padding: $base-font-size - (($dropdown-link-height - $dropdown-link-font-size) / 2) 0;
41
+ background: $dropdown-background;
42
+ background-clip: border-box;
43
+ border: $button-border-width solid $button-border-color;
44
+ line-height: 1;
45
+ z-index: 1;
46
+
47
+ &.right { // Align dropdown with right edge of parent item
48
+ float: none;
49
+ left: auto;
50
+ right: -1px;
51
+ }
52
+
53
+ > li {
54
+ display: block;
55
+ margin: 0;
56
+ padding: 0;
57
+
58
+ > a {
59
+ position: relative;
60
+ display: block;
61
+ padding: ($dropdown-link-height - $dropdown-link-font-size) / 2 $base-font-size;
62
+ font-size: $dropdown-link-font-size;
63
+ text-decoration: none;
64
+ white-space: nowrap;
65
+
66
+ &:hover {
67
+ background-color: $link-color;
68
+ color: #fff;
69
+ }
70
+ }
71
+ }
72
+
73
+ .divider {
74
+ border-top: 1px solid $border-color;
75
+ margin: $base-font-size - (($dropdown-link-height - $dropdown-link-font-size) / 2) 0;
76
+ }
77
+
78
+ .section-title {
79
+ padding: ($dropdown-link-height - $dropdown-link-font-size) / 2 $base-font-size;
80
+ color: $muted-font-color;
81
+ font-size: 11px;
82
+ font-weight: bold;
83
+ text-transform: uppercase;
84
+ cursor: default;
85
+ }
86
+
87
+ }
88
+
89
+ &.open {
90
+ .dropdown {
91
+ visibility: visible;
92
+ }
93
+ }
94
+ }
@@ -0,0 +1,339 @@
1
+ // ! Forms
2
+ // -----
3
+
4
+ label,
5
+ input,
6
+ textarea {
7
+ color: $base-font-color;
8
+ font-size: $base-font-size;
9
+ font-family: $base-font-family;
10
+ font-weight: normal;
11
+ }
12
+
13
+ // ! Basic form layouts
14
+ // ------------------
15
+
16
+ .field-group {
17
+ margin-bottom: $base-font-size;
18
+
19
+ .field-label {
20
+ display: block;
21
+ color: $gray-dark;
22
+ }
23
+
24
+ .field-instructions {
25
+ float: none;
26
+ clear: both;
27
+ padding-top: ($small-line-height - $small-font-size) / 2;
28
+ color: $muted-font-color;
29
+ font-size: $small-font-size;
30
+ line-height: 1.5;
31
+
32
+ a {
33
+ color: $muted-font-color;
34
+ text-decoration: underline;
35
+ }
36
+ }
37
+
38
+ .fields {
39
+ @include respond-to(desktop) {
40
+ position: relative;
41
+
42
+ .error-message {
43
+ position: absolute;
44
+ left: 100%;
45
+ top: 2px;
46
+ margin-top: 0;
47
+ margin-left: 12px;
48
+ white-space: nowrap;
49
+
50
+ &:after {
51
+ position: absolute;
52
+ top: 6px;
53
+ left: -12px;
54
+ @include css-triangle(6px, $error-color, right)
55
+ }
56
+ }
57
+ }
58
+ }
59
+ }
60
+
61
+ .input-inline {
62
+ display: inline-block;
63
+ height: $form-input-height;
64
+ line-height: $form-input-height;
65
+ }
66
+
67
+ .multi-field {
68
+
69
+ @include clearfix();
70
+
71
+ input, .input-inline {
72
+ float: left;
73
+ margin-right: ($base-font-size / 2) - 2;
74
+ }
75
+ }
76
+
77
+ // ! Left-aligned labels
78
+ // -------------------
79
+
80
+
81
+ @media screen and (min-width: $responsive-breakpoint) {
82
+
83
+ .labels-left {
84
+
85
+ .field-group {
86
+ @include clearfix();
87
+ }
88
+
89
+ .field-label {
90
+ position: relative;
91
+ left: $form-input-gutter / 2;
92
+ padding: ($form-input-height - ($base-font-size + 2)) / 2 0;
93
+ line-height: $base-font-size + 2;
94
+ text-align: right;
95
+ }
96
+ }
97
+ }
98
+
99
+ // ! Text fields and textareas
100
+ // ---------------------------
101
+
102
+ textarea,
103
+ .select-mask,
104
+ input[type="text"],
105
+ input[type="password"],
106
+ input[type="datetime"],
107
+ input[type="datetime-local"],
108
+ input[type="date"],
109
+ input[type="month"],
110
+ input[type="time"],
111
+ input[type="week"],
112
+ input[type="number"],
113
+ input[type="email"],
114
+ input[type="url"],
115
+ input[type="search"],
116
+ input[type="tel"],
117
+ input[type="color"] {
118
+
119
+ @include border-radius($input-border-radius);
120
+ @include box-shadow(inset 0px 1px 0px rgba(0,0,0,0.06));
121
+
122
+ display: inline-block;
123
+ height: $form-input-height;
124
+ width: 100%;
125
+ max-width: 100%;
126
+ padding: 0 $base-font-size / 2;
127
+ background: #fff;
128
+ border: 1px solid rgba(0,0,0,0.25);
129
+
130
+ outline: none;
131
+ -webkit-appearance: none;
132
+
133
+ &:focus,
134
+ &.focus {
135
+ border-color: $link-color;
136
+ @include box-shadow(0px 0px 3px rgba($link-color, 0.3));
137
+ }
138
+ }
139
+
140
+ input::-webkit-outer-spin-button,
141
+ input::-webkit-inner-spin-button {
142
+ /* display: none; <- Crashes Chrome on hover */
143
+ -webkit-appearance: none;
144
+ margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
145
+ }
146
+
147
+ textarea {
148
+ height: auto;
149
+ min-width: 100%;
150
+ min-height: $form-input-height;
151
+ padding: $base-font-size / 2;
152
+ }
153
+
154
+ @for $i from 1 through 16 {
155
+ input.char#{$i} { width: ($i * ($base-font-size * 0.75)) + $base-font-size !important; }
156
+ }
157
+
158
+ // ! Special masking for select
159
+ // ----------------------------
160
+
161
+ .select-holder {
162
+ height: $form-input-height;
163
+ position: relative;
164
+ }
165
+
166
+ select {
167
+ opacity: 0;
168
+ display: block;
169
+ position: relative;
170
+ z-index: 1;
171
+ width: 100%;
172
+ height: $form-input-height;
173
+ font-size: $base-font-size;
174
+ padding: 0 $base-font-size / 2;
175
+ -webkit-appearance: none;
176
+
177
+ option {
178
+ font-size: 11px;
179
+ }
180
+ }
181
+
182
+ .select-mask {
183
+ position: absolute;
184
+ z-index: -1;
185
+ top: 0;
186
+ left: 0;
187
+ background: #fff;
188
+ padding-top: 7px;
189
+ line-height: 1;
190
+
191
+ &:after {
192
+ @include css-triangle(5px, $gray-dark, top);
193
+ position: absolute;
194
+ top: 12px;
195
+ right: 10px;
196
+ }
197
+ }
198
+
199
+ // ! Placeholders
200
+ // --------------
201
+
202
+ ::-webkit-input-placeholder {
203
+ color: $placeholder-color;
204
+ @include transition($form-transition-duration all);
205
+ }
206
+
207
+ :-moz-placeholder {
208
+ color: $placeholder-color;
209
+ @include transition($form-transition-duration all);
210
+ }
211
+
212
+ ::-webkit-input-placeholder:focus {
213
+ color: $placeholder-focus-color;
214
+ }
215
+
216
+ :-moz-placeholder:focus {
217
+ color: $placeholder-focus-color;
218
+ }
219
+
220
+ // ! Radio and checkbox
221
+ // --------------------
222
+
223
+ input[type=radio],
224
+ input[type=checkbox] {
225
+ margin: 0;
226
+ cursor: pointer;
227
+ }
228
+
229
+ // ! Radio and checkbox lists
230
+ // --------------------------
231
+
232
+ .radio-checkbox-list {
233
+ @include list-reset();
234
+
235
+ > li {
236
+ padding: ($radio-checkbox-item-height - $radio-checkbox-line-height) / 2 0;
237
+ }
238
+
239
+ input[type=radio],
240
+ input[type=checkbox] {
241
+ display: block;
242
+ position: absolute;
243
+ top: ($radio-checkbox-line-height - $radio-checkbox-input-height) / 2;
244
+ left: 0px;
245
+ }
246
+
247
+ .radio-checkbox-label {
248
+ display: block;
249
+ position: relative;
250
+ padding-left: $radio-checkbox-input-height * 1.61;
251
+ cursor: pointer;
252
+
253
+ &.small {
254
+
255
+ input[type=radio],
256
+ input[type=checkbox] {
257
+ top: ($small-line-height - $radio-checkbox-input-height) / 2;
258
+ }
259
+ }
260
+ }
261
+
262
+ .error-message {
263
+ margin-left: $radio-checkbox-input-height * 1.61;
264
+ }
265
+ }
266
+
267
+ // ! Single checkboxes
268
+ // -------------------
269
+
270
+ .single-checkbox {
271
+ display: block;
272
+ position: relative;
273
+ padding: ($base-line-height - ($single-checkbox-font-size * 1.2)) / 2 0 ($base-line-height - ($single-checkbox-font-size * 1.2)) / 2 $radio-checkbox-input-height * 1.61;
274
+ font-size: $single-checkbox-font-size;
275
+ line-height: 1.2;
276
+ cursor: pointer;
277
+
278
+ input[type=radio],
279
+ input[type=checkbox] {
280
+ display: block;
281
+ position: absolute;
282
+ top: ($base-line-height - $radio-checkbox-input-height) / 2;
283
+ left: 0px;
284
+ }
285
+
286
+ a {
287
+ text-decoration: underline;
288
+ }
289
+ }
290
+
291
+ // ! Buttons
292
+ // ---------
293
+
294
+ button {
295
+ margin: 0;
296
+ font-size: 100%;
297
+ vertical-align: middle;
298
+ // *overflow: visible; // Inner spacing ie IE6/7
299
+ // line-height: normal !important; // FF3/4 have !important on line-height in UA stylesheet
300
+ }
301
+
302
+ button::-moz-focus-inner,
303
+ input::-moz-focus-inner {
304
+ padding: 0;
305
+ border: 0;
306
+ }
307
+
308
+ // ! Errors
309
+ // --------
310
+
311
+ .error {
312
+ label {
313
+ color: $error-color;
314
+ }
315
+
316
+ input {
317
+ border-color: $error-color;
318
+ }
319
+ }
320
+
321
+ .error-message {
322
+ @include border-radius($input-border-radius);
323
+
324
+ display: inline-block;
325
+ position: relative;
326
+ margin-top: $base-font-size / 2;
327
+ padding: $base-font-size / 2;
328
+ background: $error-color;
329
+ color: #fff;
330
+ font-size: $small-font-size;
331
+ line-height: $small-font-size;
332
+
333
+ &:after {
334
+ position: absolute;
335
+ top: -12px;
336
+ left: 10px;
337
+ @include css-triangle(6px, $error-color, bottom)
338
+ }
339
+ }