blob: fa3b6e1d20195b5f56d60b63562190cb70974e0b (
plain)
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
//
// Floats
//
.clearfix {
@include clearfix();
}
.center-block {
@include center-block();
}
.pull-right {
@include pull-right();
}
.pull-left {
@include pull-left();
}
//
// Screenreaders
//
.sr-only {
@include sr-only();
}
.sr-only-focusable {
@include sr-only-focusable();
}
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
display: none !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
@include text-hide();
}
//
// Text
//
// Alignment
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }
// Responsive alignment
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.text-#{$breakpoint}-left { text-align: left; }
.text-#{$breakpoint}-right { text-align: right; }
.text-#{$breakpoint}-center { text-align: center; }
}
}
// Transformation
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
// Contextual colors
.text-muted {
color: $text-muted;
}
@include text-emphasis-variant('.text-primary', $brand-primary);
@include text-emphasis-variant('.text-success', $brand-success);
@include text-emphasis-variant('.text-info', $brand-info);
@include text-emphasis-variant('.text-warning', $brand-warning);
@include text-emphasis-variant('.text-danger', $brand-danger);
// Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
// Inverse
// Todo: redo this as a proper class
.bg-inverse {
color: $gray-lighter;
background-color: $gray-dark;
}
.bg-faded {
background-color: $gray-lightest;
}
@include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $brand-success);
@include bg-variant('.bg-info', $brand-info);
@include bg-variant('.bg-warning', $brand-warning);
@include bg-variant('.bg-danger', $brand-danger);
|