liquid_feedback_frontend

annotate style/mdl/_mixins.scss @ 1676:8fde003bdeb0

find changesets by author, revision, files, or words in the commit message
Added support for alternative DN string
author bsw
date Mon Jun 07 20:58:31 2021 +0200 (2021-06-07)
parents 32cc544d5a5b
children
rev   line source
bsw/jbe@1309 1 /**
bsw/jbe@1309 2 * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309 3 *
bsw/jbe@1309 4 * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309 5 * you may not use this file except in compliance with the License.
bsw/jbe@1309 6 * You may obtain a copy of the License at
bsw/jbe@1309 7 *
bsw/jbe@1309 8 * http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309 9 *
bsw/jbe@1309 10 * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309 11 * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309 13 * See the License for the specific language governing permissions and
bsw/jbe@1309 14 * limitations under the License.
bsw/jbe@1309 15 */
bsw/jbe@1309 16
bsw/jbe@1309 17 /* Typography */
bsw/jbe@1309 18
bsw/jbe@1309 19 @mixin typo-preferred-font($usePreferred: true) {
bsw/jbe@1309 20 @if $usePreferred {
bsw/jbe@1309 21 font-family: $preferred_font;
bsw/jbe@1309 22 }
bsw/jbe@1309 23 }
bsw/jbe@1309 24
bsw/jbe@1309 25 @mixin typo-display-4($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 26 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 27 font-size: 112px;
bsw/jbe@1309 28 font-weight: 300;
bsw/jbe@1309 29 line-height: 1;
bsw/jbe@1309 30 letter-spacing: -0.04em;
bsw/jbe@1309 31
bsw/jbe@1309 32 @if $colorContrast {
bsw/jbe@1309 33 opacity: 0.54;
bsw/jbe@1309 34 }
bsw/jbe@1309 35 }
bsw/jbe@1309 36
bsw/jbe@1309 37 @mixin typo-display-3($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 38 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 39 font-size: 56px;
bsw/jbe@1309 40 font-weight: 400;
bsw/jbe@1309 41 line-height: 1.35;
bsw/jbe@1309 42 letter-spacing: -0.02em;
bsw/jbe@1309 43
bsw/jbe@1309 44 @if $colorContrast {
bsw/jbe@1309 45 opacity: 0.54;
bsw/jbe@1309 46 }
bsw/jbe@1309 47 }
bsw/jbe@1309 48
bsw/jbe@1309 49 @mixin typo-display-2($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 50 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 51 font-size: 45px;
bsw/jbe@1309 52 font-weight: 400;
bsw/jbe@1309 53 line-height: 48px;
bsw/jbe@1309 54
bsw/jbe@1309 55 @if $colorContrast {
bsw/jbe@1309 56 opacity: 0.54;
bsw/jbe@1309 57 }
bsw/jbe@1309 58 }
bsw/jbe@1309 59
bsw/jbe@1309 60 @mixin typo-display-1($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 61 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 62 font-size: 34px;
bsw/jbe@1309 63 font-weight: 400;
bsw/jbe@1309 64 line-height: 40px;
bsw/jbe@1309 65
bsw/jbe@1309 66 @if $colorContrast {
bsw/jbe@1309 67 opacity: 0.54;
bsw/jbe@1309 68 }
bsw/jbe@1309 69 }
bsw/jbe@1309 70
bsw/jbe@1309 71 @mixin typo-headline($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 72 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 73 font-size: 24px;
bsw/jbe@1309 74 font-weight: 400;
bsw/jbe@1309 75 line-height: 32px;
bsw/jbe@1309 76 -moz-osx-font-smoothing: grayscale;
bsw/jbe@1309 77
bsw/jbe@1309 78 @if $colorContrast {
bsw/jbe@1309 79 opacity: 0.87;
bsw/jbe@1309 80 }
bsw/jbe@1309 81 }
bsw/jbe@1309 82
bsw/jbe@1309 83 @mixin typo-title($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 84 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 85 font-size: 20px;
bsw/jbe@1309 86 font-weight: 500;
bsw/jbe@1309 87 line-height: 1;
bsw/jbe@1309 88 letter-spacing: 0.02em;
bsw/jbe@1309 89
bsw/jbe@1309 90 @if $colorContrast {
bsw/jbe@1309 91 opacity: 0.87;
bsw/jbe@1309 92 }
bsw/jbe@1309 93 }
bsw/jbe@1309 94
bsw/jbe@1309 95 @mixin typo-subhead($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 96 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 97 font-size: 16px;
bsw/jbe@1309 98 font-weight: 400;
bsw/jbe@1309 99 line-height: 24px;
bsw/jbe@1309 100 letter-spacing: 0.04em;
bsw/jbe@1309 101
bsw/jbe@1309 102 @if $colorContrast {
bsw/jbe@1309 103 opacity: 0.87;
bsw/jbe@1309 104 }
bsw/jbe@1309 105 }
bsw/jbe@1309 106
bsw/jbe@1309 107 @mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 108 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 109 font-size: 16px;
bsw/jbe@1309 110 font-weight: 400;
bsw/jbe@1309 111 line-height: 28px;
bsw/jbe@1309 112 letter-spacing: 0.04em;
bsw/jbe@1309 113
bsw/jbe@1309 114 @if $colorContrast {
bsw/jbe@1309 115 opacity: 0.87;
bsw/jbe@1309 116 }
bsw/jbe@1309 117 }
bsw/jbe@1309 118
bsw/jbe@1309 119 @mixin typo-body-2($colorContrast: false, $usePreferred: false) {
bsw/jbe@1309 120 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 121 font-size: 14px;
bsw/jbe@1309 122 @if $usePreferred {
bsw/jbe@1309 123 font-weight: 500;
bsw/jbe@1309 124 } @else {
bsw/jbe@1309 125 font-weight: bold;
bsw/jbe@1309 126 }
bsw/jbe@1309 127 line-height: 24px;
bsw/jbe@1309 128 letter-spacing: 0;
bsw/jbe@1309 129
bsw/jbe@1309 130 @if $colorContrast {
bsw/jbe@1309 131 opacity: 0.87;
bsw/jbe@1309 132 }
bsw/jbe@1309 133 }
bsw/jbe@1309 134
bsw/jbe@1309 135 @mixin typo-body-1($colorContrast: false, $usePreferred: false) {
bsw/jbe@1309 136 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 137 font-size: 14px;
bsw/jbe@1309 138 font-weight: 400;
bsw/jbe@1309 139 line-height: 24px;
bsw/jbe@1309 140 letter-spacing: 0;
bsw/jbe@1309 141
bsw/jbe@1309 142 @if $colorContrast {
bsw/jbe@1309 143 opacity: 0.87;
bsw/jbe@1309 144 }
bsw/jbe@1309 145 }
bsw/jbe@1309 146
bsw/jbe@1309 147 @mixin typo-caption($colorContrast: false, $usePreferred: false) {
bsw/jbe@1309 148 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 149 font-size: 12px;
bsw/jbe@1309 150 font-weight: 400;
bsw/jbe@1309 151 line-height: 1;
bsw/jbe@1309 152 letter-spacing: 0;
bsw/jbe@1309 153
bsw/jbe@1309 154 @if $colorContrast {
bsw/jbe@1309 155 opacity: 0.54;
bsw/jbe@1309 156 }
bsw/jbe@1309 157 }
bsw/jbe@1309 158
bsw/jbe@1309 159 @mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 160 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 161 position: relative;
bsw/jbe@1309 162 font-size: 24px;
bsw/jbe@1309 163 font-weight: 300;
bsw/jbe@1309 164 font-style: italic;
bsw/jbe@1309 165 line-height: 1.35;
bsw/jbe@1309 166 letter-spacing: 0.08em;
bsw/jbe@1309 167
bsw/jbe@1309 168 &:before {
bsw/jbe@1309 169 position: absolute;
bsw/jbe@1309 170 left: -0.5em;
bsw/jbe@1309 171 content: '“';
bsw/jbe@1309 172 }
bsw/jbe@1309 173
bsw/jbe@1309 174 &:after {
bsw/jbe@1309 175 content: '”';
bsw/jbe@1309 176 margin-left: -0.05em;
bsw/jbe@1309 177 }
bsw/jbe@1309 178
bsw/jbe@1309 179 @if $colorContrast {
bsw/jbe@1309 180 opacity: 0.54;
bsw/jbe@1309 181 }
bsw/jbe@1309 182 }
bsw/jbe@1309 183
bsw/jbe@1309 184 @mixin typo-menu($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 185 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 186 font-size: 14px;
bsw/jbe@1309 187 font-weight: 500;
bsw/jbe@1309 188 line-height: 1;
bsw/jbe@1309 189 letter-spacing: 0;
bsw/jbe@1309 190
bsw/jbe@1309 191 @if $colorContrast {
bsw/jbe@1309 192 opacity: 0.87;
bsw/jbe@1309 193 }
bsw/jbe@1309 194 }
bsw/jbe@1309 195
bsw/jbe@1309 196 @mixin typo-button($colorContrast: false, $usePreferred: true) {
bsw/jbe@1309 197 @include typo-preferred-font($usePreferred);
bsw/jbe@1309 198 font-size: 14px;
bsw/jbe@1309 199 font-weight: 500;
bsw/jbe@1309 200 text-transform: uppercase;
bsw/jbe@1309 201 line-height: 1;
bsw/jbe@1309 202 letter-spacing: 0;
bsw/jbe@1309 203
bsw/jbe@1309 204 @if $colorContrast {
bsw/jbe@1309 205 opacity: 0.87;
bsw/jbe@1309 206 }
bsw/jbe@1309 207 }
bsw/jbe@1309 208
bsw/jbe@1309 209 @mixin typo-icon() {
bsw/jbe@1309 210 font-family: 'Material Icons';
bsw/jbe@1309 211 font-weight: normal;
bsw/jbe@1309 212 font-style: normal;
bsw/jbe@1309 213 font-size: 24px;
bsw/jbe@1309 214 line-height: 1;
bsw/jbe@1309 215 letter-spacing: normal;
bsw/jbe@1309 216 text-transform: none;
bsw/jbe@1309 217 display: inline-block;
bsw/jbe@1309 218 word-wrap: normal;
bsw/jbe@1309 219 font-feature-settings: 'liga';
bsw/jbe@1309 220 -webkit-font-feature-settings: 'liga';
bsw/jbe@1309 221 -webkit-font-smoothing: antialiased;
bsw/jbe@1309 222 }
bsw/jbe@1309 223
bsw/jbe@1309 224 /* Shadows */
bsw/jbe@1309 225
bsw/jbe@1309 226 // Focus shadow mixin.
bsw/jbe@1309 227 @mixin focus-shadow() {
bsw/jbe@1309 228 box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
bsw/jbe@1309 229 }
bsw/jbe@1309 230
bsw/jbe@1309 231 @mixin shadow-2dp() {
bsw/jbe@1309 232 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 233 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
bsw/jbe@1309 234 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
bsw/jbe@1309 235 }
bsw/jbe@1309 236 @mixin shadow-3dp() {
bsw/jbe@1309 237 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 238 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
bsw/jbe@1309 239 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
bsw/jbe@1309 240 }
bsw/jbe@1309 241 @mixin shadow-4dp() {
bsw/jbe@1309 242 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 243 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
bsw/jbe@1309 244 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
bsw/jbe@1309 245 }
bsw/jbe@1309 246 @mixin shadow-6dp() {
bsw/jbe@1309 247 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 248 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
bsw/jbe@1309 249 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
bsw/jbe@1309 250 }
bsw/jbe@1309 251 @mixin shadow-8dp() {
bsw/jbe@1309 252 box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 253 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
bsw/jbe@1309 254 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
bsw/jbe@1309 255 }
bsw/jbe@1309 256
bsw/jbe@1309 257 @mixin shadow-16dp() {
bsw/jbe@1309 258 box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 259 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
bsw/jbe@1309 260 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
bsw/jbe@1309 261 }
bsw/jbe@1309 262
bsw/jbe@1309 263 @mixin shadow-24dp() {
bsw/jbe@1309 264 box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
bsw/jbe@1309 265 0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
bsw/jbe@1309 266 0 24px 38px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
bsw/jbe@1309 267 }
bsw/jbe@1309 268
bsw/jbe@1309 269 /* Animations */
bsw/jbe@1309 270
bsw/jbe@1309 271 @mixin material-animation-fast-out-slow-in($duration:0.2s) {
bsw/jbe@1309 272 transition-duration: $duration;
bsw/jbe@1309 273 transition-timing-function: $animation-curve-fast-out-slow-in;
bsw/jbe@1309 274 }
bsw/jbe@1309 275
bsw/jbe@1309 276 @mixin material-animation-linear-out-slow-in($duration:0.2s) {
bsw/jbe@1309 277 transition-duration: $duration;
bsw/jbe@1309 278 transition-timing-function: $animation-curve-linear-out-slow-in;
bsw/jbe@1309 279 }
bsw/jbe@1309 280
bsw/jbe@1309 281 @mixin material-animation-fast-out-linear-in($duration:0.2s) {
bsw/jbe@1309 282 transition-duration: $duration;
bsw/jbe@1309 283 transition-timing-function: $animation-curve-fast-out-linear-in;
bsw/jbe@1309 284 }
bsw/jbe@1309 285
bsw/jbe@1309 286 @mixin material-animation-default($duration:0.2s) {
bsw/jbe@1309 287 transition-duration: $duration;
bsw/jbe@1309 288 transition-timing-function: $animation-curve-default;
bsw/jbe@1309 289 }
bsw/jbe@1309 290
bsw/jbe@1309 291 /* Dialog */
bsw/jbe@1309 292
bsw/jbe@1309 293 @mixin dialog-width($units:5) {
bsw/jbe@1309 294 @if(type_of($units) != 'number') {
bsw/jbe@1309 295 @error "The unit given to dialog-width should be a number.";
bsw/jbe@1309 296 }
bsw/jbe@1309 297 // 56dp is the base unit width for Dialogs.
bsw/jbe@1309 298 // With 5 units being the number of units for a mobile device.
bsw/jbe@1309 299 // https://goo.gl/sK2O5o
bsw/jbe@1309 300 width: $units * 56px;
bsw/jbe@1309 301 }

Impressum / About Us