1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/_mixins.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,301 @@
     1.4 +/**
     1.5 + * Copyright 2015 Google Inc. All Rights Reserved.
     1.6 + *
     1.7 + * Licensed under the Apache License, Version 2.0 (the "License");
     1.8 + * you may not use this file except in compliance with the License.
     1.9 + * You may obtain a copy of the License at
    1.10 + *
    1.11 + *      http://www.apache.org/licenses/LICENSE-2.0
    1.12 + *
    1.13 + * Unless required by applicable law or agreed to in writing, software
    1.14 + * distributed under the License is distributed on an "AS IS" BASIS,
    1.15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    1.16 + * See the License for the specific language governing permissions and
    1.17 + * limitations under the License.
    1.18 + */
    1.19 +
    1.20 +/* Typography */
    1.21 +
    1.22 +@mixin typo-preferred-font($usePreferred: true) {
    1.23 +  @if $usePreferred {
    1.24 +    font-family: $preferred_font;
    1.25 +  }
    1.26 +}
    1.27 +
    1.28 +@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
    1.29 +  @include typo-preferred-font($usePreferred);
    1.30 +  font-size: 112px;
    1.31 +  font-weight: 300;
    1.32 +  line-height: 1;
    1.33 +  letter-spacing: -0.04em;
    1.34 +
    1.35 +  @if $colorContrast {
    1.36 +    opacity: 0.54;
    1.37 +  }
    1.38 +}
    1.39 +
    1.40 +@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
    1.41 +  @include typo-preferred-font($usePreferred);
    1.42 +  font-size: 56px;
    1.43 +  font-weight: 400;
    1.44 +  line-height: 1.35;
    1.45 +  letter-spacing: -0.02em;
    1.46 +
    1.47 +  @if $colorContrast {
    1.48 +    opacity: 0.54;
    1.49 +  }
    1.50 +}
    1.51 +
    1.52 +@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
    1.53 +  @include typo-preferred-font($usePreferred);
    1.54 +  font-size: 45px;
    1.55 +  font-weight: 400;
    1.56 +  line-height: 48px;
    1.57 +
    1.58 +  @if $colorContrast {
    1.59 +    opacity: 0.54;
    1.60 +  }
    1.61 +}
    1.62 +
    1.63 +@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
    1.64 +  @include typo-preferred-font($usePreferred);
    1.65 +  font-size: 34px;
    1.66 +  font-weight: 400;
    1.67 +  line-height: 40px;
    1.68 +
    1.69 +  @if $colorContrast {
    1.70 +    opacity: 0.54;
    1.71 +  }
    1.72 +}
    1.73 +
    1.74 +@mixin typo-headline($colorContrast: false, $usePreferred: true) {
    1.75 +  @include typo-preferred-font($usePreferred);
    1.76 +  font-size: 24px;
    1.77 +  font-weight: 400;
    1.78 +  line-height: 32px;
    1.79 +  -moz-osx-font-smoothing: grayscale;
    1.80 +
    1.81 +  @if $colorContrast {
    1.82 +    opacity: 0.87;
    1.83 +  }
    1.84 +}
    1.85 +
    1.86 +@mixin typo-title($colorContrast: false, $usePreferred: true) {
    1.87 +  @include typo-preferred-font($usePreferred);
    1.88 +  font-size: 20px;
    1.89 +  font-weight: 500;
    1.90 +  line-height: 1;
    1.91 +  letter-spacing: 0.02em;
    1.92 +
    1.93 +  @if $colorContrast {
    1.94 +    opacity: 0.87;
    1.95 +  }
    1.96 +}
    1.97 +
    1.98 +@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
    1.99 +  @include typo-preferred-font($usePreferred);
   1.100 +  font-size: 16px;
   1.101 +  font-weight: 400;
   1.102 +  line-height: 24px;
   1.103 +  letter-spacing: 0.04em;
   1.104 +
   1.105 +  @if $colorContrast {
   1.106 +    opacity: 0.87;
   1.107 +  }
   1.108 +}
   1.109 +
   1.110 +@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
   1.111 +  @include typo-preferred-font($usePreferred);
   1.112 +  font-size: 16px;
   1.113 +  font-weight: 400;
   1.114 +  line-height: 28px;
   1.115 +  letter-spacing: 0.04em;
   1.116 +
   1.117 +  @if $colorContrast {
   1.118 +    opacity: 0.87;
   1.119 +  }
   1.120 +}
   1.121 +
   1.122 +@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
   1.123 +  @include typo-preferred-font($usePreferred);
   1.124 +  font-size: 14px;
   1.125 +  @if $usePreferred {
   1.126 +    font-weight: 500;
   1.127 +  } @else {
   1.128 +    font-weight: bold;
   1.129 +  }
   1.130 +  line-height: 24px;
   1.131 +  letter-spacing: 0;
   1.132 +
   1.133 +  @if $colorContrast {
   1.134 +    opacity: 0.87;
   1.135 +  }
   1.136 +}
   1.137 +
   1.138 +@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
   1.139 +  @include typo-preferred-font($usePreferred);
   1.140 +  font-size: 14px;
   1.141 +  font-weight: 400;
   1.142 +  line-height: 24px;
   1.143 +  letter-spacing: 0;
   1.144 +
   1.145 +  @if $colorContrast {
   1.146 +    opacity: 0.87;
   1.147 +  }
   1.148 +}
   1.149 +
   1.150 +@mixin typo-caption($colorContrast: false, $usePreferred: false) {
   1.151 +  @include typo-preferred-font($usePreferred);
   1.152 +  font-size: 12px;
   1.153 +  font-weight: 400;
   1.154 +  line-height: 1;
   1.155 +  letter-spacing: 0;
   1.156 +
   1.157 +  @if $colorContrast {
   1.158 +    opacity: 0.54;
   1.159 +  }
   1.160 +}
   1.161 +
   1.162 +@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
   1.163 +  @include typo-preferred-font($usePreferred);
   1.164 +  position: relative;
   1.165 +  font-size: 24px;
   1.166 +  font-weight: 300;
   1.167 +  font-style: italic;
   1.168 +  line-height: 1.35;
   1.169 +  letter-spacing: 0.08em;
   1.170 +
   1.171 +  &:before {
   1.172 +    position: absolute;
   1.173 +    left: -0.5em;
   1.174 +    content: '“';
   1.175 +  }
   1.176 +
   1.177 +  &:after {
   1.178 +    content: '”';
   1.179 +    margin-left: -0.05em;
   1.180 +  }
   1.181 +
   1.182 +  @if $colorContrast {
   1.183 +    opacity: 0.54;
   1.184 +  }
   1.185 +}
   1.186 +
   1.187 +@mixin typo-menu($colorContrast: false, $usePreferred: true) {
   1.188 +  @include typo-preferred-font($usePreferred);
   1.189 +  font-size: 14px;
   1.190 +  font-weight: 500;
   1.191 +  line-height: 1;
   1.192 +  letter-spacing: 0;
   1.193 +
   1.194 +  @if $colorContrast {
   1.195 +    opacity: 0.87;
   1.196 +  }
   1.197 +}
   1.198 +
   1.199 +@mixin typo-button($colorContrast: false, $usePreferred: true) {
   1.200 +  @include typo-preferred-font($usePreferred);
   1.201 +  font-size: 14px;
   1.202 +  font-weight: 500;
   1.203 +  text-transform: uppercase;
   1.204 +  line-height: 1;
   1.205 +  letter-spacing: 0;
   1.206 +
   1.207 +  @if $colorContrast {
   1.208 +    opacity: 0.87;
   1.209 +  }
   1.210 +}
   1.211 +
   1.212 +@mixin typo-icon() {
   1.213 +  font-family: 'Material Icons';
   1.214 +  font-weight: normal;
   1.215 +  font-style: normal;
   1.216 +  font-size: 24px;
   1.217 +  line-height: 1;
   1.218 +  letter-spacing: normal;
   1.219 +  text-transform: none;
   1.220 +  display: inline-block;
   1.221 +  word-wrap: normal;
   1.222 +  font-feature-settings: 'liga';
   1.223 +  -webkit-font-feature-settings: 'liga';
   1.224 +  -webkit-font-smoothing: antialiased;
   1.225 +}
   1.226 +
   1.227 +/* Shadows */
   1.228 +
   1.229 +// Focus shadow mixin.
   1.230 +@mixin focus-shadow() {
   1.231 +  box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
   1.232 +}
   1.233 +
   1.234 +@mixin shadow-2dp() {
   1.235 +  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.236 +              0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
   1.237 +              0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
   1.238 +}
   1.239 +@mixin shadow-3dp() {
   1.240 +  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.241 +              0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
   1.242 +              0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
   1.243 +}
   1.244 +@mixin shadow-4dp() {
   1.245 +  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.246 +              0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
   1.247 +              0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
   1.248 +}
   1.249 +@mixin shadow-6dp() {
   1.250 +  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.251 +              0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
   1.252 +              0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
   1.253 +}
   1.254 +@mixin shadow-8dp() {
   1.255 +  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.256 +              0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
   1.257 +              0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
   1.258 +}
   1.259 +
   1.260 +@mixin shadow-16dp() {
   1.261 +  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.262 +              0  6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
   1.263 +              0  8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
   1.264 +}
   1.265 +
   1.266 +@mixin shadow-24dp() {
   1.267 +  box-shadow: 0  9px 46px  8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   1.268 +              0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
   1.269 +              0 24px 38px  3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
   1.270 +}
   1.271 +
   1.272 +/* Animations */
   1.273 +
   1.274 +@mixin material-animation-fast-out-slow-in($duration:0.2s) {
   1.275 +  transition-duration: $duration;
   1.276 +  transition-timing-function: $animation-curve-fast-out-slow-in;
   1.277 +}
   1.278 +
   1.279 +@mixin material-animation-linear-out-slow-in($duration:0.2s) {
   1.280 +  transition-duration: $duration;
   1.281 +  transition-timing-function: $animation-curve-linear-out-slow-in;
   1.282 +}
   1.283 +
   1.284 +@mixin material-animation-fast-out-linear-in($duration:0.2s) {
   1.285 +  transition-duration: $duration;
   1.286 +  transition-timing-function: $animation-curve-fast-out-linear-in;
   1.287 +}
   1.288 +
   1.289 +@mixin material-animation-default($duration:0.2s) {
   1.290 +  transition-duration: $duration;
   1.291 +  transition-timing-function: $animation-curve-default;
   1.292 +}
   1.293 +
   1.294 +/* Dialog */
   1.295 +
   1.296 +@mixin dialog-width($units:5) {
   1.297 +  @if(type_of($units) != 'number') {
   1.298 +    @error "The unit given to dialog-width should be a number.";
   1.299 +  }
   1.300 +  // 56dp is the base unit width for Dialogs.
   1.301 +  // With 5 units being the number of units for a mobile device.
   1.302 +  // https://goo.gl/sK2O5o
   1.303 +  width: $units * 56px;
   1.304 +}