wirecss_rails 1.0.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.
@@ -0,0 +1,64 @@
1
+ // ----------------------
2
+ //
3
+ // BUTTONS
4
+ //
5
+ // ----------------------
6
+
7
+ // ----------------------
8
+ // Button
9
+ // ----------------------
10
+ %button {
11
+ background-color: $wire-button-bg;
12
+ border: 0;
13
+ border-radius: $wire-border-radius;
14
+ color: $wire-button-color;
15
+ display: inline-block;
16
+ line-height: inherit;
17
+ padding: em(7, 10) em(14, 10);
18
+ text-align: center;
19
+ transition: background-color .2s ease-out;
20
+ vertical-align: bottom;
21
+ &:hover {
22
+ background-color: darken($wire-button-bg, 15%);
23
+ color: #ffffff;
24
+ }
25
+ &.small {
26
+ font-size: rem(12);
27
+ }
28
+ &.large {
29
+ font-size: rem(18);
30
+ }
31
+ &.x-large {
32
+ font-size: rem(24);
33
+ }
34
+ &.alt {
35
+ background-color: $wire-button-alt-bg;
36
+ color: $wire-button-alt-color;
37
+ &:hover {
38
+ background-color: darken($wire-button-alt-bg, 15%);
39
+ }
40
+ }
41
+ }
42
+
43
+ @if $wire-markup == true {
44
+ .#{$wire-namespace}button,
45
+ .#{$wire-namespace}btn,
46
+ input[type="submit"],
47
+ input[type="button"] {
48
+ @extend %button;
49
+ }
50
+ input[type="submit"][disabled],
51
+ input[type="button"][disabled],
52
+ .#{$wire-namespace}button[disabled],
53
+ .#{$wire-namespace}btn[disabled],
54
+ .#{$wire-namespace}button.disabled,
55
+ .#{$wire-namespace}btn.disabled {
56
+ background-color: lighten($wire-button-alt-bg, 5.5%);
57
+ color: lighten($wire-button-alt-color, 5.5%);
58
+ cursor: not-allowed;
59
+ &:hover {
60
+ background-color: lighten($wire-button-alt-bg, 5.5%);
61
+ color: lighten($wire-button-alt-color, 5.5%);
62
+ }
63
+ }
64
+ }
@@ -0,0 +1,84 @@
1
+ // ----------------------
2
+ //
3
+ // Forms
4
+ //
5
+ // ----------------------
6
+
7
+ @if $wire-markup == true {
8
+ .#{$wire-namespace}form {
9
+ &[data-form~="horizontal"] {
10
+ @include grid-va-bottom();
11
+ @include grid();
12
+ .field {
13
+ padding-right: $wire-base-gutter;
14
+ &:last-child {
15
+ padding-right: 0;
16
+ }
17
+ }
18
+ }
19
+ ul {
20
+ @extend %list-unstyled;
21
+ }
22
+ .row {
23
+ @include grid();
24
+ .field {
25
+ @include mq(small) {
26
+ padding-left: 0;
27
+ padding-right: 0;
28
+ }
29
+
30
+ padding-left: $wire-base-gutter;
31
+ padding-right: $wire-base-gutter;
32
+ &:first-child {
33
+ padding-left: 0;
34
+ }
35
+ &:last-child {
36
+ padding-right: 0;
37
+ }
38
+ }
39
+ }
40
+ .field {
41
+ margin-bottom: 1em;
42
+ label {
43
+ display: inline-block;
44
+ margin-bottom: .3rem;
45
+ }
46
+ input[type="email"],
47
+ input[type="password"],
48
+ input[type="search"],
49
+ input[type="text"],
50
+ input[type="tel"],
51
+ input[type="url"],
52
+ select {
53
+ background: $wire-form-input-bg;
54
+ border: 1px solid $wire-form-input-border;
55
+ border-radius: 3px;
56
+ height: rem(38);
57
+ padding: .5em;
58
+ transition: border-color .20s ease-in-out;
59
+ width: 100%;
60
+ &:focus {
61
+ border-color: darken($wire-form-input-border, 25%);
62
+ outline: none;
63
+ }
64
+ }
65
+ textarea {
66
+ @extend input[type="text"];
67
+
68
+ height: auto;
69
+ }
70
+ input[type="checkbox"],
71
+ input[type="radio"] {
72
+ &:focus {
73
+ border-color: darken($wire-form-input-border, 25%);
74
+ outline: none;
75
+ }
76
+ + label {
77
+ margin-left: .25rem;
78
+ max-width: 88%;
79
+ vertical-align: top;
80
+ }
81
+ }
82
+ }
83
+ }
84
+ }
@@ -0,0 +1,456 @@
1
+ // ----------------------
2
+ //
3
+ // Grid
4
+ //
5
+ // Content:
6
+ // - Core definition
7
+ // - Direction
8
+ // - Wrap
9
+ // - Align
10
+ // - column Align
11
+ // ----------------------
12
+
13
+ @mixin container() {
14
+ height: 100%;
15
+ width: 100%;
16
+ &:before,
17
+ &:after {
18
+ content: " ";
19
+ display: table;
20
+ }
21
+ &:after{
22
+ clear: both;
23
+ }
24
+ }
25
+
26
+ @if $wire-markup == true {
27
+ .#{$wire-namespace}container {
28
+ @include container();
29
+ }
30
+ }
31
+
32
+ [class*="col-"] {
33
+ box-sizing: border-box;
34
+ width: 100%;
35
+ }
36
+
37
+
38
+ // $Grid
39
+ // Core Grid
40
+ @mixin grid() {
41
+ display: flex;
42
+ flex-wrap: wrap;
43
+ width: 100%;
44
+ }
45
+
46
+ @if $wire-markup == true {
47
+ .#{$wire-namespace}grid,
48
+ [data-grid] {
49
+ @include grid();
50
+ }
51
+ }
52
+
53
+ // $Direction
54
+ // Row
55
+ @mixin grid-row() {
56
+ flex-direction: row;
57
+ }
58
+
59
+ @if $wire-markup == true {
60
+ [data-grid~="row"],
61
+ .#{$wire-namespace}grid--row {
62
+ @include grid-row();
63
+ }
64
+ }
65
+
66
+ @mixin grid-row-reverse() {
67
+ flex-direction: row-reverse;
68
+ }
69
+
70
+ @if $wire-markup == true {
71
+ [data-grid~="row-reverse"],
72
+ .#{$wire-namespace}grid--row-reverse {
73
+ @include grid-row-reverse();
74
+ }
75
+ }
76
+
77
+ @mixin grid-column() {
78
+ flex-direction: column;
79
+ }
80
+
81
+ @if $wire-markup == true {
82
+ [data-grid~="column"],
83
+ .#{$wire-namespace}grid--column {
84
+ @include grid-column();
85
+ }
86
+ }
87
+
88
+ @mixin grid-column-reverse() {
89
+ flex-direction: column-reverse;
90
+ }
91
+
92
+ @if $wire-markup == true {
93
+ [data-grid~="column-reverse"],
94
+ .#{$wire-namespace}grid--column-reverse {
95
+ @include grid-column-reverse();
96
+ }
97
+ }
98
+
99
+ // $Wrap
100
+ // Wrap
101
+ @mixin grid-wrap() {
102
+ flex-wrap: wrap;
103
+ }
104
+
105
+ @if $wire-markup == true {
106
+ [data-grid~="wrap"],
107
+ .#{$wire-namespace}grid--wrap {
108
+ @include grid-wrap();
109
+ }
110
+ }
111
+
112
+ // Wrap Reverse
113
+ @mixin grid-wrap-reverse() {
114
+ flex-wrap: wrap-reverse;
115
+ }
116
+
117
+ @if $wire-markup == true {
118
+ [data-grid~="wrap-reverse"],
119
+ .#{$wire-namespace}grid--wrap-reverse {
120
+ @include grid-wrap-reverse();
121
+ }
122
+ }
123
+
124
+ // Nowrap
125
+ @mixin grid-nowrap() {
126
+ flex-wrap: nowrap;
127
+ }
128
+
129
+ @if $wire-markup == true {
130
+ [data-grid~="nowrap"],
131
+ .#{$wire-namespace}grid--nowrap {
132
+ @include grid-nowrap();
133
+ }
134
+ }
135
+
136
+ // $Align
137
+ // Left
138
+ @mixin grid-left() {
139
+ justify-content: flex-start;
140
+ }
141
+
142
+ @if $wire-markup == true {
143
+ [data-grid~="left"],
144
+ .#{$wire-namespace}grid--left {
145
+ @include grid-left();
146
+ }
147
+ }
148
+
149
+ // Right
150
+ @mixin grid-right() {
151
+ justify-content: flex-end;
152
+ }
153
+
154
+ @if $wire-markup == true {
155
+ [data-grid~="right"],
156
+ .#{$wire-namespace}grid--right {
157
+ @include grid-right();
158
+ }
159
+ }
160
+
161
+ // Center
162
+ @mixin grid-center() {
163
+ justify-content: center;
164
+ }
165
+
166
+ @if $wire-markup == true {
167
+ [data-grid~="center"],
168
+ .#{$wire-namespace}grid--center {
169
+ @include grid-center();
170
+ }
171
+ }
172
+
173
+ // Space Between
174
+ @mixin grid-between() {
175
+ justify-content: space-between;
176
+ }
177
+
178
+ @if $wire-markup == true {
179
+ [data-grid~="space-between"],
180
+ .#{$wire-namespace}grid--between {
181
+ @include grid-between();
182
+ }
183
+ }
184
+
185
+ // Space Around
186
+ @mixin grid-around() {
187
+ justify-content: space-around;
188
+ }
189
+
190
+ @if $wire-markup == true {
191
+ [data-grid~="space-around"],
192
+ .#{$wire-namespace}grid--around {
193
+ @include grid-around();
194
+ }
195
+ }
196
+
197
+ // $column Align
198
+ // Top
199
+ @mixin grid-va-top() {
200
+ align-items: flex-start;
201
+ }
202
+
203
+ @if $wire-markup == true {
204
+ [data-grid~="va-top"],
205
+ .#{$wire-namespace}grid--va-top {
206
+ @include grid-va-top();
207
+ }
208
+ }
209
+
210
+ // Bottom
211
+ @mixin grid-va-bottom() {
212
+ align-items: flex-end;
213
+ }
214
+
215
+ @if $wire-markup == true {
216
+ [data-grid~="va-bottom"],
217
+ .#{$wire-namespace}grid--va-bottom {
218
+ @include grid-va-bottom();
219
+ }
220
+ }
221
+
222
+ // Center
223
+ @mixin grid-va-center() {
224
+ align-items: center;
225
+ }
226
+
227
+ @if $wire-markup == true {
228
+ [data-grid~="va-center"],
229
+ .#{$wire-namespace}grid--va-center {
230
+ @include grid-va-center();
231
+ }
232
+ }
233
+
234
+ // Baseline
235
+ @mixin grid-va-baseline() {
236
+ align-content: baseline;
237
+ }
238
+
239
+ @if $wire-markup == true {
240
+ [data-grid~="va-baseline"],
241
+ .#{$wire-namespace}grid--va-baseline {
242
+ @include grid-va-baseline();
243
+ }
244
+ }
245
+
246
+ // Stretch
247
+ @mixin grid-va-stretch() {
248
+ align-content: stretch;
249
+ }
250
+
251
+ @if $wire-markup == true {
252
+ [data-grid~="va-stretch"],
253
+ .#{$wire-namespace}grid--va-stretch {
254
+ @include grid-va-stretch();
255
+ }
256
+ }
257
+
258
+ // $Content Align
259
+ // Stretch
260
+ @mixin grid-ca-stretch() {
261
+ align-content: stretch;
262
+ }
263
+
264
+ @if $wire-markup == true {
265
+ [data-grid~="ca-stretch"],
266
+ .#{$wire-namespace}grid--ca-stretch {
267
+ @include grid-ca-stretch();
268
+ }
269
+ }
270
+
271
+ // Top
272
+ @mixin grid-ca-top() {
273
+ align-content: flex-start;
274
+ }
275
+
276
+ @if $wire-markup == true {
277
+ [data-grid~="ca-top"],
278
+ .#{$wire-namespace}grid--ca-top {
279
+ @include grid-ca-top();
280
+ }
281
+ }
282
+
283
+ // Bottom
284
+ @mixin grid-ca-bottom() {
285
+ align-content: flex-end;
286
+ }
287
+
288
+ @if $wire-markup == true {
289
+ [data-grid~="ca-bottom"],
290
+ .#{$wire-namespace}grid--ca-bottom {
291
+ @include grid-ca-bottom();
292
+ }
293
+ }
294
+
295
+ // Center
296
+ @mixin grid-ca-center() {
297
+ align-content: center;
298
+ }
299
+
300
+ @if $wire-markup == true {
301
+ [data-grid~="ca-center"],
302
+ .#{$wire-namespace}grid--ca-center {
303
+ @include grid-ca-center();
304
+ }
305
+ }
306
+
307
+ // Space Around
308
+ @mixin grid-ca-space-around() {
309
+ align-content: space-around;
310
+ }
311
+
312
+ @if $wire-markup == true {
313
+ [data-grid~="ca-space-around"],
314
+ .#{$wire-namespace}grid--ca-space-around {
315
+ @include grid-ca-space-around();
316
+ }
317
+ }
318
+
319
+ // Space Between
320
+ @mixin grid-ca-space-between() {
321
+ align-content: space-between;
322
+ }
323
+
324
+ @if $wire-markup == true {
325
+ [data-grid~="ca-space-between"],
326
+ .#{$wire-namespace}grid--ca-space-between {
327
+ @include grid-ca-space-between();
328
+ }
329
+ }
330
+
331
+
332
+ // Grid Helpers
333
+ // Center - Center
334
+ // Center vertical and horizontal
335
+ @mixin grid-center-center() {
336
+ justify-content: center;
337
+ align-content: center;
338
+ align-items: center;
339
+ min-height: 100%;
340
+ > * {
341
+ display: flex;
342
+ flex-direction: column;
343
+ justify-content: center;
344
+ }
345
+ }
346
+
347
+ @if $wire-markup == true {
348
+ [data-grid~="center-center"],
349
+ .#{$wire-namespace}grid--center-center {
350
+ @include grid-center-center();
351
+ }
352
+ }
353
+
354
+ // Order
355
+ @mixin order($position, $force: false) {
356
+ @if $force == true {
357
+ order: $position !important;
358
+ } @else {
359
+ order: $position;
360
+ }
361
+ }
362
+
363
+ // Push Left
364
+ @mixin push-left() {
365
+ @include order(-100, true);
366
+ }
367
+
368
+ %push-left {
369
+ @include push-left;
370
+ }
371
+ @if $wire-markup == true {
372
+ .push-left {
373
+ @extend %push-left;
374
+ }
375
+ }
376
+
377
+ // Push Right
378
+ @mixin push-right() {
379
+ @include order(100, true);
380
+ }
381
+
382
+ %push-right {
383
+ @include push-right;
384
+ }
385
+ @if $wire-markup == true {
386
+ .push-right {
387
+ @extend %push-right;
388
+ }
389
+ }
390
+
391
+ // $Core Width
392
+ @mixin columns($col) {
393
+ width: $col * 100% / $wire-max-columns;
394
+ }
395
+ @for $col from 1 through ($wire-max-columns) {
396
+ %col-#{$col} {
397
+ @include columns($col);
398
+ }
399
+ @if $wire-markup == true {
400
+ .#{$wire-namespace}col-#{$col},
401
+ [data-col~="#{$col}"] {
402
+ @include columns($col);
403
+ @include mq(small) {
404
+ width: 100%;
405
+ }
406
+ }
407
+ }
408
+ }
409
+
410
+ @for $col from 1 through ($wire-max-columns) {
411
+ @each $breakpoint, $value in $wire-breakpoints {
412
+ @include mq($breakpoint) {
413
+ @if $wire-markup == true {
414
+ .#{$wire-namespace}col-#{$breakpoint}-#{$col},
415
+ [data-col-#{$breakpoint}~="#{$col}"] {
416
+ @include columns($col);
417
+ }
418
+ }
419
+ }
420
+ }
421
+ }
422
+
423
+ @for $col from 1 through ($wire-max-columns) {
424
+ %col-offset-#{$col} {
425
+ margin-left: $col * 100% / $wire-max-columns;
426
+ }
427
+
428
+ @if $wire-markup == true {
429
+ .#{$wire-namespace}col-offset-#{$col} {
430
+ @extend %col-offset-#{$col};
431
+ }
432
+ }
433
+ }
434
+
435
+ @for $col from 1 through ($wire-max-columns) {
436
+ @each $breakpoint, $value in $wire-breakpoints {
437
+ @include mq($breakpoint) {
438
+ @if $wire-markup == true {
439
+ .#{$wire-namespace}col-#{$breakpoint}-offset-#{$col} {
440
+ margin-left: $col * 100% / $wire-max-columns;
441
+ }
442
+ }
443
+ }
444
+ }
445
+ }
446
+
447
+ // $Grid Row
448
+ @mixin row() {
449
+ @include grid;
450
+ }
451
+
452
+ @if $wire-markup == true {
453
+ .#{$wire-namespace}row {
454
+ @include row();
455
+ }
456
+ }