Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/scss/_utilities.scss

Issue 29603821: Noissue - Separated website-default utilities (Closed) Base URL: https://hg.adblockplus.org/website-defaults
Patch Set: Consolidated utilities Created Dec. 8, 2017, 4:10 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(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 }
OLDNEW

Powered by Google App Engine
This is Rietveld