OLD | NEW |
| (Empty) |
1 // This file is part of website-defaults | |
2 // Copyright (C) 2016-present eyeo GmbH | |
3 // | |
4 // website-defaults is free software: you can redistribute it and/or | |
5 // modify it under the terms of the GNU General Public License as published by | |
6 // the Free Software Foundation, either version 3 of the License, or | |
7 // (at your option) any later version. | |
8 // | |
9 // website-defaults is distributed in the hope that it will be useful, | |
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of | |
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
12 // GNU General Public License for more details. | |
13 // | |
14 // You should have received a copy of the GNU General Public License | |
15 // along with website-defaults. If not, see <http://www.gnu.org/licenses/>. | |
16 | |
17 /******************************************************************************* | |
18 * Utilities | |
19 ******************************************************************************/ | |
20 | |
21 /* Responsive widths | |
22 ******************************************************************************/ | |
23 | |
24 /** | |
25 * Stretch content (e.g. images) full-width | |
26 */ | |
27 .full-width | |
28 { | |
29 display: block; | |
30 width: 100%; | |
31 } | |
32 | |
33 /** | |
34 * Center content within a (responsive) fixed width | |
35 */ | |
36 .container | |
37 { | |
38 width: $container-width; | |
39 max-width: 100%; | |
40 margin-right: auto; | |
41 margin-left: auto; | |
42 padding-right: $small-space; | |
43 padding-left: $small-space; | |
44 } | |
45 | |
46 /* Device widths | |
47 ******************************************************************************/ | |
48 | |
49 .phone-width { width: $phone-width; } | |
50 .phablet-width { width: $phablet-width; } | |
51 .tablet-width { width: $tablet-width; } | |
52 .desktop-width { width: $desktop-width; } | |
53 .large-desktop-width { width: $large-desktop-width; } | |
54 | |
55 /* Text alignment | |
56 ******************************************************************************/ | |
57 | |
58 .text-center { text-align: center; } | |
59 .text-left { text-align: left; } | |
60 .text-right { text-align: right; } | |
61 .text-start { text-align: left; } | |
62 [dir="rtl"] .text-start { text-align: right; } | |
63 .text-end { text-align: right; } | |
64 [dir="rtl"] .text-end { text-align: left; } | |
65 | |
66 /* Floats | |
67 ******************************************************************************/ | |
68 | |
69 .float-start { float: left; } | |
70 [dir="rtl"] .float-start { float: right; } | |
71 .float-end { float: right; } | |
72 [dir="rtl"] .float-end { float: left; } | |
73 | |
74 /* Clearfix | |
75 ******************************************************************************/ | |
76 | |
77 .clearfix:after, | |
78 .clearfix:before | |
79 { | |
80 display: table; | |
81 content: " "; | |
82 } | |
83 | |
84 .clearfix:after | |
85 { | |
86 clear: both; | |
87 } | |
88 | |
89 /* Screen reader only | |
90 ******************************************************************************/ | |
91 | |
92 .sr-only | |
93 { | |
94 position: absolute; | |
95 overflow: hidden; | |
96 clip: rect(0, 0, 0, 0); | |
97 width: 1px; | |
98 height: 1px; | |
99 margin: -1px; | |
100 padding: 0; | |
101 border: 0; | |
102 } | |
103 | |
104 /* Unstyled elements | |
105 ******************************************************************************/ | |
106 | |
107 .unstyled, | |
108 .unstyled * | |
109 { | |
110 margin: 0 !important; | |
111 padding: 0 !important; | |
112 border: 0 !important; | |
113 background: none !important; | |
114 list-style: none !important; | |
115 } | |
116 | |
117 /* Backgrounds | |
118 ******************************************************************************/ | |
119 | |
120 .bg-primary | |
121 { | |
122 color: $primary-light; | |
123 background-color: $primary-dark; | |
124 } | |
125 | |
126 .bg-secondary | |
127 { | |
128 color: $secondary-light; | |
129 background-color: $secondary-dark; | |
130 } | |
131 | |
132 .bg-accent | |
133 { | |
134 color: $accent-light; | |
135 background-color: $accent-dark; | |
136 } | |
137 | |
138 .bg-error | |
139 { | |
140 color: $error-light; | |
141 background-color: $error-dark; | |
142 } | |
143 | |
144 /* Lead | |
145 ******************************************************************************/ | |
146 | |
147 .lead | |
148 { | |
149 font-size: 1.25em; | |
150 } | |
OLD | NEW |