blob: 10258cdf2867427fca01120cc3657d555952e1ab (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
// Layout
// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
/* Position */
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $position in $responsive-positions {
.position#{$variant}-#{$position} {
position: $position !important;
}
}
}
}
/* Final position */
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
.top#{$variant}-0 { top: 0 !important; }
.right#{$variant}-0 { right: 0 !important; }
.bottom#{$variant}-0 { bottom: 0 !important; }
.left#{$variant}-0 { left: 0 !important; }
.top#{$variant}-auto { top: auto !important; }
.right#{$variant}-auto { right: auto !important; }
.bottom#{$variant}-auto { bottom: auto !important; }
.left#{$variant}-auto { left: auto !important; }
}
}
/* Vertical align middle */
.v-align-middle { vertical-align: middle !important; }
/* Vertical align top */
.v-align-top { vertical-align: top !important; }
/* Vertical align bottom */
.v-align-bottom { vertical-align: bottom !important; }
/* Vertical align to the top of the text */
.v-align-text-top { vertical-align: text-top !important; }
/* Vertical align to the bottom of the text */
.v-align-text-bottom { vertical-align: text-bottom !important; }
/* Vertical align to the parent's baseline */
.v-align-baseline { vertical-align: baseline !important; }
// Overflow utilities
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $overflow in (visible, hidden, auto, scroll) {
.overflow#{$variant}-#{$overflow} { overflow: $overflow !important; }
.overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
.overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
}
}
}
// Clear floats
/* Clear floats around the element */
.clearfix {
@include clearfix;
}
// Floats
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Float to the left */
.float#{$variant}-left { float: left !important; }
/* Float to the right */
.float#{$variant}-right { float: right !important; }
/* No float */
.float#{$variant}-none { float: none !important; }
}
}
// Width and height utilities, helpful in combination
// with display-table utilities and images
/* Max width 100% */
.width-fit { max-width: 100% !important; }
/* Set the width to 100% */
.width-full { width: 100% !important; }
/* Max height 100% */
.height-fit { max-height: 100% !important; }
/* Set the height to 100% */
.height-full { height: 100% !important; }
/* Remove min-width from element */
.min-width-0 { min-width: 0 !important; }
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Auto varients
.width#{$variant}-auto { width: auto !important; }
/* Set the direction to rtl */
.direction#{$variant}-rtl { direction: rtl !important; }
/* Set the direction to ltr */
.direction#{$variant}-ltr { direction: ltr !important; }
}
}
|
