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.
« static/scss/_content.scss ('K')
|
« static/scss/_content.scss ('k')
|
static/scss/main.scss » ('j')
|
static/scss/utilities/_text.scss » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| 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 |
« static/scss/_content.scss ('K')
|
« static/scss/_content.scss ('k')
|
static/scss/main.scss » ('j')
|
static/scss/utilities/_text.scss » ('J')
