liquid_feedback_frontend

annotate style/mdl/_variables.scss @ 1504:2a0d86117d54

find changesets by author, revision, files, or words in the commit message
Added hidden and role units
author bsw
date Fri Jul 31 00:18:55 2020 +0200 (2020-07-31)
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 /*------------------------------------*\
bsw/jbe@1309 18 $CONTENTS
bsw/jbe@1309 19 \*------------------------------------*/
bsw/jbe@1309 20 /**
bsw/jbe@1309 21 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
bsw/jbe@1309 22 * -----Typography
bsw/jbe@1309 23 * -----Colors
bsw/jbe@1309 24 * -----Textfield
bsw/jbe@1309 25 * -----Switch
bsw/jbe@1309 26 * -----Spinner
bsw/jbe@1309 27 * -----Radio
bsw/jbe@1309 28 * -----Menu
bsw/jbe@1309 29 * -----List
bsw/jbe@1309 30 * -----Layout
bsw/jbe@1309 31 * -----Icon toggles
bsw/jbe@1309 32 * -----Footer
bsw/jbe@1309 33 * -----Column
bsw/jbe@1309 34 * -----Checkbox
bsw/jbe@1309 35 * -----Card
bsw/jbe@1309 36 * -----Button
bsw/jbe@1309 37 * -----Animation
bsw/jbe@1309 38 * -----Progress
bsw/jbe@1309 39 * -----Badge
bsw/jbe@1309 40 * -----Shadows
bsw/jbe@1309 41 * -----Grid
bsw/jbe@1309 42 * -----Data table
bsw/jbe@1309 43 * -----Dialog
bsw/jbe@1309 44 * -----Snackbar
bsw/jbe@1309 45 * -----Tooltip
bsw/jbe@1309 46 * -----Chip
bsw/jbe@1309 47 *
bsw/jbe@1309 48 * Even though all variables have the `!default` directive, most of them
bsw/jbe@1309 49 * should not be changed as they are dependent one another. This can cause
bsw/jbe@1309 50 * visual distortions (like alignment issues) that are hard to track down
bsw/jbe@1309 51 * and fix.
bsw/jbe@1309 52 */
bsw/jbe@1309 53
bsw/jbe@1309 54
bsw/jbe@1309 55 /* ========== TYPOGRAPHY ========== */
bsw/jbe@1309 56
bsw/jbe@1309 57 /* We're splitting fonts into "preferred" and "performance" in order to optimize
bsw/jbe@1309 58 page loading. For important text, such as the body, we want it to load
bsw/jbe@1309 59 immediately and not wait for the web font load, whereas for other sections,
bsw/jbe@1309 60 such as headers and titles, we're OK with things taking a bit longer to load.
bsw/jbe@1309 61 We do have some optional classes and parameters in the mixins, in case you
bsw/jbe@1309 62 definitely want to make sure you're using the preferred font and don't mind
bsw/jbe@1309 63 the performance hit.
bsw/jbe@1309 64 We should be able to improve on this once CSS Font Loading L3 becomes more
bsw/jbe@1309 65 widely available.
bsw/jbe@1309 66 */
bsw/jbe@1309 67 $preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
bsw/jbe@1309 68 $performance_font: 'Helvetica', 'Arial', sans-serif !default;
bsw/jbe@1309 69
bsw/jbe@1309 70 /* ========== COLORS ========== */
bsw/jbe@1309 71
bsw/jbe@1309 72 /**
bsw/jbe@1309 73 *
bsw/jbe@1309 74 * Material design color palettes.
bsw/jbe@1309 75 * @see http://www.google.com/design/spec/style/color.html
bsw/jbe@1309 76 *
bsw/jbe@1309 77 **/
bsw/jbe@1309 78
bsw/jbe@1309 79 @import "color-definitions";
bsw/jbe@1309 80 @import "functions";
bsw/jbe@1309 81
bsw/jbe@1309 82 /* ========== IMAGES ========== */
bsw/jbe@1309 83 $image_path: '/static/mdl' !default;
bsw/jbe@1309 84
bsw/jbe@1309 85 /* ========== Color & Themes ========== */
bsw/jbe@1309 86
bsw/jbe@1309 87 // Define whether individual color palette items should have classes created.
bsw/jbe@1309 88 // Setting this to true will remove individual color classes for each color in the palettes.
bsw/jbe@1309 89 // To improve overall performance (assuming they aren't used) by:
bsw/jbe@1309 90 // * Saving server bandwidth sending the extra classes
bsw/jbe@1309 91 // * Save client computation against the classes
bsw/jbe@1309 92 // it is RECOMMENDED you set this to true.
bsw/jbe@1309 93 $trim-color-classes: false !default;
bsw/jbe@1309 94
bsw/jbe@1309 95 // Use color primarily for emphasis. Choose colors that fit with
bsw/jbe@1309 96 // your brand and provide good contrast between visual components.
bsw/jbe@1309 97 $color-primary: $palette-indigo-500 !default;
bsw/jbe@1309 98 $color-primary-dark: $palette-indigo-700 !default;
bsw/jbe@1309 99 $color-accent: $palette-pink-A200 !default;
bsw/jbe@1309 100
bsw/jbe@1309 101 // Our primary is dark, so use $color-dark-contrast for overlaid text.
bsw/jbe@1309 102 $color-primary-contrast: $color-dark-contrast !default;
bsw/jbe@1309 103 // Our accent is dark, so use $color-dark-contrast for overlaid text.
bsw/jbe@1309 104 $color-accent-contrast: $color-dark-contrast !default;
bsw/jbe@1309 105
bsw/jbe@1309 106 // Replace all colors with placeholders if we're generating a template.
bsw/jbe@1309 107 @if $styleguide-generate-template == true {
bsw/jbe@1309 108 $color-primary: '$color-primary';
bsw/jbe@1309 109 $color-primary-dark: '$color-primary-dark';
bsw/jbe@1309 110 $color-accent: '$color-accent';
bsw/jbe@1309 111 $color-primary-contrast: '$color-primary-contrast';
bsw/jbe@1309 112 $color-accent-contrast: '$color-accent-contrast';
bsw/jbe@1309 113 }
bsw/jbe@1309 114
bsw/jbe@1309 115 /* ========== Typography ========== */
bsw/jbe@1309 116
bsw/jbe@1309 117 // We use the following default color styles: text-color-primary and
bsw/jbe@1309 118 // text-color-secondary. For light themes, use text-color-primary-inverse
bsw/jbe@1309 119 // and text-color-secondary-inverse.
bsw/jbe@1309 120
bsw/jbe@1309 121 $text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309 122 $text-link-color: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 123
bsw/jbe@1309 124 // Define whether to target elements directly for typographic enhancements.
bsw/jbe@1309 125 // Turning this off means you need to use mdl-* classes more often.
bsw/jbe@1309 126 // Other components may also fail to adhere to MD without these rules.
bsw/jbe@1309 127 // It is strongly recommended you leave this as true.
bsw/jbe@1309 128
bsw/jbe@1309 129 $target-elements-directly: true !default;
bsw/jbe@1309 130
bsw/jbe@1309 131 /* ========== Components ========== */
bsw/jbe@1309 132
bsw/jbe@1309 133 /* ========== Standard Buttons ========== */
bsw/jbe@1309 134
bsw/jbe@1309 135 // Default button colors.
bsw/jbe@1309 136 $button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
bsw/jbe@1309 137 $button-secondary-color: unquote("rgb(#{$color-black})") !default;
bsw/jbe@1309 138 $button-hover-color: $button-primary-color !default;
bsw/jbe@1309 139 $button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
bsw/jbe@1309 140 $button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309 141
bsw/jbe@1309 142 // Colored button colors.
bsw/jbe@1309 143 $button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 144 $button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
bsw/jbe@1309 145 $button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 146 $button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 147 $button-focus-color-alt: $button-focus-color !default;
bsw/jbe@1309 148
bsw/jbe@1309 149 // Ripple color for colored raised buttons.
bsw/jbe@1309 150 $button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
bsw/jbe@1309 151
bsw/jbe@1309 152 // Disabled button colors.
bsw/jbe@1309 153 $button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309 154 $button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 155
bsw/jbe@1309 156 // FAB colors and sizes.
bsw/jbe@1309 157 $button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 158 $button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 159 $button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 160 $button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
bsw/jbe@1309 161 $button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
bsw/jbe@1309 162
bsw/jbe@1309 163 // Icon button colors and sizes.
bsw/jbe@1309 164 $button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
bsw/jbe@1309 165 $button-icon-focus-color: $button-focus-color !default;
bsw/jbe@1309 166
bsw/jbe@1309 167 /* ========== Icon Toggles ========== */
bsw/jbe@1309 168
bsw/jbe@1309 169 $icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
bsw/jbe@1309 170 $icon-toggle-focus-color: $button-focus-color !default;
bsw/jbe@1309 171 $icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 172 $icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309 173 $icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 174
bsw/jbe@1309 175 /* ========== Radio Buttons ========== */
bsw/jbe@1309 176
bsw/jbe@1309 177 $radio-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 178 $radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309 179 $radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 180
bsw/jbe@1309 181 /* ========== Ripple effect ========== */
bsw/jbe@1309 182
bsw/jbe@1309 183 $ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
bsw/jbe@1309 184
bsw/jbe@1309 185 /* ========== Layout ========== */
bsw/jbe@1309 186
bsw/jbe@1309 187 $layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309 188
bsw/jbe@1309 189 // Drawer
bsw/jbe@1309 190 $layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
bsw/jbe@1309 191 $layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309 192 $layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
bsw/jbe@1309 193 $layout-drawer-navigation-color: #757575 !default;
bsw/jbe@1309 194 $layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309 195 $layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
bsw/jbe@1309 196
bsw/jbe@1309 197 // Header
bsw/jbe@1309 198 $layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 199 $layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
bsw/jbe@1309 200 $layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
bsw/jbe@1309 201 $layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
bsw/jbe@1309 202
bsw/jbe@1309 203 // Tabs
bsw/jbe@1309 204 $layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 205
bsw/jbe@1309 206 /* ========== Content Tabs ========== */
bsw/jbe@1309 207
bsw/jbe@1309 208 $tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 209 $tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309 210 $tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309 211 $tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309 212
bsw/jbe@1309 213 /* ========== Checkboxes ========== */
bsw/jbe@1309 214
bsw/jbe@1309 215 $checkbox-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 216 $checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309 217 $checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 218 $checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309 219 $checkbox-image-path: $image_path;
bsw/jbe@1309 220
bsw/jbe@1309 221 /* ========== Switches ========== */
bsw/jbe@1309 222
bsw/jbe@1309 223 $switch-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 224 $switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309 225 $switch-thumb-color: $switch-color !default;
bsw/jbe@1309 226 $switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
bsw/jbe@1309 227
bsw/jbe@1309 228 $switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
bsw/jbe@1309 229 $switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 230 $switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
bsw/jbe@1309 231 $switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309 232
bsw/jbe@1309 233 /* ========== Spinner ========== */
bsw/jbe@1309 234
bsw/jbe@1309 235 $spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
bsw/jbe@1309 236 $spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
bsw/jbe@1309 237 $spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
bsw/jbe@1309 238 $spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
bsw/jbe@1309 239
bsw/jbe@1309 240 $spinner-single-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 241
bsw/jbe@1309 242 /* ========== Text fields ========== */
bsw/jbe@1309 243
bsw/jbe@1309 244 $input-text-background-color: transparent !default;
bsw/jbe@1309 245 $input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 246 $input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309 247 $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 248 $input-text-disabled-color: $input-text-bottom-border-color !default;
bsw/jbe@1309 249 $input-text-disabled-text-color: $input-text-label-color !default;
bsw/jbe@1309 250 $input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
bsw/jbe@1309 251
bsw/jbe@1309 252 /* ========== Card ========== */
bsw/jbe@1309 253
bsw/jbe@1309 254 $card-background-color: unquote("rgb(#{$color-white})") !default;
bsw/jbe@1309 255 $card-text-color: unquote("rgb(#{$color-black})") !default;
bsw/jbe@1309 256 $card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 257 $card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309 258 $card-border-color: rgba(0,0,0,0.1) !default;
bsw/jbe@1309 259 $card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309 260
bsw/jbe@1309 261 /* ========== Sliders ========== */
bsw/jbe@1309 262
bsw/jbe@1309 263 $range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309 264 $range-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 265 $range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309 266 $range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309 267
bsw/jbe@1309 268 /* ========== Progress ========== */
bsw/jbe@1309 269 $progress-main-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309 270 $progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
bsw/jbe@1309 271 $progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
bsw/jbe@1309 272 $progress-image-path: $image_path;
bsw/jbe@1309 273
bsw/jbe@1309 274 /* ========== List ========== */
bsw/jbe@1309 275
bsw/jbe@1309 276 $list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309 277 $list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309 278 $list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
bsw/jbe@1309 279 $list-avatar-color: white !default;
bsw/jbe@1309 280
bsw/jbe@1309 281 /* ========== Item ========== */
bsw/jbe@1309 282
bsw/jbe@1309 283 // Default Item Colors
bsw/jbe@1309 284 $default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309 285 $default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
bsw/jbe@1309 286 $default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
bsw/jbe@1309 287 $default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
bsw/jbe@1309 288 $default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309 289 $default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309 290
bsw/jbe@1309 291 // Disabled Button Colors
bsw/jbe@1309 292 $disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
bsw/jbe@1309 293
bsw/jbe@1309 294 /* ========== Dropdown menu ========== */
bsw/jbe@1309 295
bsw/jbe@1309 296 $default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
bsw/jbe@1309 297
bsw/jbe@1309 298 /* ========== Tooltips ========== */
bsw/jbe@1309 299
bsw/jbe@1309 300 $tooltip-text-color: unquote("rgb(#{$color-white})") !default;
bsw/jbe@1309 301 $tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
bsw/jbe@1309 302
bsw/jbe@1309 303 /* ========== Footer ========== */
bsw/jbe@1309 304
bsw/jbe@1309 305 $footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
bsw/jbe@1309 306 $footer-color: unquote("rgb(#{$palette-grey-500})") !default;
bsw/jbe@1309 307 $footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309 308 $footer-button-fill-color: $footer-color !default;
bsw/jbe@1309 309 $footer-underline-color: $footer-color !default;
bsw/jbe@1309 310
bsw/jbe@1309 311
bsw/jbe@1309 312 /* TEXTFIELD */
bsw/jbe@1309 313
bsw/jbe@1309 314 $input-text-font-size: 16px !default;
bsw/jbe@1309 315 $input-text-width: 100% !default;
bsw/jbe@1309 316 $input-text-padding: 4px !default;
bsw/jbe@1309 317 $input-text-vertical-spacing: 20px !default;
bsw/jbe@1309 318
bsw/jbe@1309 319 $input-text-button-size: 32px !default;
bsw/jbe@1309 320 $input-text-floating-label-fontsize: 12px !default;
bsw/jbe@1309 321 $input-text-expandable-icon-top: 16px !default;
bsw/jbe@1309 322
bsw/jbe@1309 323
bsw/jbe@1309 324 /* SWITCH */
bsw/jbe@1309 325
bsw/jbe@1309 326 $switch-label-font-size: 16px !default;
bsw/jbe@1309 327 $switch-label-height: 24px !default;
bsw/jbe@1309 328 $switch-track-height: 14px !default;
bsw/jbe@1309 329 $switch-track-length: 36px !default;
bsw/jbe@1309 330 $switch-thumb-size: 20px !default;
bsw/jbe@1309 331 $switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
bsw/jbe@1309 332 $switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
bsw/jbe@1309 333 $switch-ripple-size: $switch-label-height * 2 !default;
bsw/jbe@1309 334 $switch-helper-size: 8px !default;
bsw/jbe@1309 335
bsw/jbe@1309 336 /* SPINNER */
bsw/jbe@1309 337
bsw/jbe@1309 338 $spinner-size: 28px !default;
bsw/jbe@1309 339 $spinner-stroke-width: 3px !default;
bsw/jbe@1309 340
bsw/jbe@1309 341 // Amount of circle the arc takes up.
bsw/jbe@1309 342 $spinner-arc-size: 270deg !default;
bsw/jbe@1309 343 // Time it takes to expand and contract arc.
bsw/jbe@1309 344 $spinner-arc-time: 1333ms !default;
bsw/jbe@1309 345 // How much the start location of the arc should rotate each time.
bsw/jbe@1309 346 $spinner-arc-start-rot: 216deg !default;
bsw/jbe@1309 347
bsw/jbe@1309 348 $spinner-duration: 360 * $spinner-arc-time / (
bsw/jbe@1309 349 strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
bsw/jbe@1309 350
bsw/jbe@1309 351
bsw/jbe@1309 352 /* RADIO */
bsw/jbe@1309 353
bsw/jbe@1309 354 $radio-label-font-size: 16px !default;
bsw/jbe@1309 355 $radio-label-height: 24px !default;
bsw/jbe@1309 356 $radio-button-size: 16px !default;
bsw/jbe@1309 357 $radio-inner-margin: $radio-button-size / 4;
bsw/jbe@1309 358 $radio-padding: 8px !default;
bsw/jbe@1309 359 $radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
bsw/jbe@1309 360 $radio-ripple-size: 42px !default;
bsw/jbe@1309 361
bsw/jbe@1309 362
bsw/jbe@1309 363 /* MENU */
bsw/jbe@1309 364
bsw/jbe@1309 365 $menu-expand-duration: 0.3s !default;
bsw/jbe@1309 366 $menu-fade-duration: 0.2s !default;
bsw/jbe@1309 367
bsw/jbe@1309 368 /* LIST */
bsw/jbe@1309 369
bsw/jbe@1309 370 $list-border: 8px !default;
bsw/jbe@1309 371 $list-min-height: 48px !default;
bsw/jbe@1309 372 $list-min-padding: 16px !default;
bsw/jbe@1309 373 $list-bottom-padding: 20px !default;
bsw/jbe@1309 374 $list-avatar-text-left-distance: 72px !default;
bsw/jbe@1309 375 $list-icon-text-left-distance: 72px !default;
bsw/jbe@1309 376
bsw/jbe@1309 377 $list-avatar-size: 40px !default;
bsw/jbe@1309 378 $list-icon-size: 24px !default;
bsw/jbe@1309 379
bsw/jbe@1309 380 $list-two-line-height: 72px !default;
bsw/jbe@1309 381 $list-three-line-height: 88px !default;
bsw/jbe@1309 382
bsw/jbe@1309 383 /* LAYOUT */
bsw/jbe@1309 384
bsw/jbe@1309 385 $layout-drawer-narrow: 240px !default;
bsw/jbe@1309 386 $layout-drawer-wide: 456px !default;
bsw/jbe@1309 387 $layout-drawer-width: $layout-drawer-narrow !default;
bsw/jbe@1309 388
bsw/jbe@1309 389 $layout-header-icon-size: 32px !default;
bsw/jbe@1309 390 $layout-screen-size-threshold: 1024px !default;
bsw/jbe@1309 391 $layout-header-icon-margin: 24px !default;
bsw/jbe@1309 392 $layout-drawer-button-mobile-size: 32px !default;
bsw/jbe@1309 393 $layout-drawer-button-desktop-size: 48px !default;
bsw/jbe@1309 394
bsw/jbe@1309 395 $layout-header-mobile-row-height: 56px !default;
bsw/jbe@1309 396 $layout-mobile-header-height: $layout-header-mobile-row-height;
bsw/jbe@1309 397 $layout-header-desktop-row-height: 64px !default;
bsw/jbe@1309 398 $layout-desktop-header-height: $layout-header-desktop-row-height;
bsw/jbe@1309 399
bsw/jbe@1309 400 $layout-header-desktop-baseline: 80px !default;
bsw/jbe@1309 401 $layout-header-mobile-baseline: 72px !default;
bsw/jbe@1309 402 $layout-header-mobile-indent: 16px !default;
bsw/jbe@1309 403 $layout-header-desktop-indent: 40px !default;
bsw/jbe@1309 404
bsw/jbe@1309 405 $layout-tab-font-size: 14px !default;
bsw/jbe@1309 406 $layout-tab-bar-height: 48px !default;
bsw/jbe@1309 407 $layout-tab-mobile-padding: 12px !default;
bsw/jbe@1309 408 $layout-tab-desktop-padding: 24px !default;
bsw/jbe@1309 409 $layout-tab-highlight-thickness: 2px !default;
bsw/jbe@1309 410
bsw/jbe@1309 411
bsw/jbe@1309 412 /* ICON TOGGLE */
bsw/jbe@1309 413
bsw/jbe@1309 414 $icon-toggle-size: 32px !default;
bsw/jbe@1309 415 $icon-toggle-font-size: 24px !default;
bsw/jbe@1309 416 $icon-toggle-ripple-size: 36px !default;
bsw/jbe@1309 417
bsw/jbe@1309 418 /* FOOTER */
bsw/jbe@1309 419
bsw/jbe@1309 420 /*mega-footer*/
bsw/jbe@1309 421 $footer-min-padding: 16px !default;
bsw/jbe@1309 422 $footer-padding-sides: 40px !default;
bsw/jbe@1309 423 $footer-heading-font-size: 14px !default;
bsw/jbe@1309 424 $footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
bsw/jbe@1309 425 $footer-btn-size: 36px !default;
bsw/jbe@1309 426
bsw/jbe@1309 427 /*mini-footer*/
bsw/jbe@1309 428 $padding: 16px !default;
bsw/jbe@1309 429 $footer-heading-font-size: 24px !default;
bsw/jbe@1309 430 $footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
bsw/jbe@1309 431 $footer-btn-size: 36px !default;
bsw/jbe@1309 432
bsw/jbe@1309 433 /* CHECKBOX */
bsw/jbe@1309 434
bsw/jbe@1309 435 $checkbox-label-font-size: 16px !default;
bsw/jbe@1309 436 $checkbox-label-height: 24px !default;
bsw/jbe@1309 437 $checkbox-button-size: 16px !default;
bsw/jbe@1309 438 $checkbox-inner-margin: 2px !default;
bsw/jbe@1309 439 $checkbox-padding: 8px !default;
bsw/jbe@1309 440 $checkbox-top-offset:
bsw/jbe@1309 441 ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
bsw/jbe@1309 442 $checkbox-ripple-size: $checkbox-label-height * 1.5;
bsw/jbe@1309 443
bsw/jbe@1309 444 /* CARD */
bsw/jbe@1309 445
bsw/jbe@1309 446 /* Card dimensions */
bsw/jbe@1309 447 $card-width: 330px !default;
bsw/jbe@1309 448 $card-height: 200px !default;
bsw/jbe@1309 449 $card-font-size: 16px !default;
bsw/jbe@1309 450 $card-title-font-size: 24px !default;
bsw/jbe@1309 451 $card-subtitle-font-size: 14px !default;
bsw/jbe@1309 452 $card-horizontal-padding: 16px !default;
bsw/jbe@1309 453 $card-vertical-padding: 16px !default;
bsw/jbe@1309 454
bsw/jbe@1309 455 $card-title-perspective-origin-x: 165px !default;
bsw/jbe@1309 456 $card-title-perspective-origin-y: 56px !default;
bsw/jbe@1309 457
bsw/jbe@1309 458 $card-title-transform-origin-x: 165px !default;
bsw/jbe@1309 459 $card-title-transform-origin-y: 56px !default;
bsw/jbe@1309 460
bsw/jbe@1309 461 $card-title-text-transform-origin-x: 149px !default;
bsw/jbe@1309 462 $card-title-text-transform-origin-y: 48px !default;
bsw/jbe@1309 463
bsw/jbe@1309 464 $card-supporting-text-font-size: 1rem !default;
bsw/jbe@1309 465 $card-supporting-text-line-height: 18px !default;
bsw/jbe@1309 466
bsw/jbe@1309 467 $card-actions-font-size: 16px !default;
bsw/jbe@1309 468
bsw/jbe@1309 469 $card-title-text-font-weight: 300 !default;
bsw/jbe@1309 470 $card-z-index: 1 !default;
bsw/jbe@1309 471
bsw/jbe@1309 472 /* Cover image */
bsw/jbe@1309 473 $card-cover-image-height: 186px !default;
bsw/jbe@1309 474 $card-background-image-url: '' !default;
bsw/jbe@1309 475
bsw/jbe@1309 476
bsw/jbe@1309 477 /* BUTTON */
bsw/jbe@1309 478 /**
bsw/jbe@1309 479 *
bsw/jbe@1309 480 * Dimensions
bsw/jbe@1309 481 *
bsw/jbe@1309 482 */
bsw/jbe@1309 483 $button-min-width: 64px !default;
bsw/jbe@1309 484 $button-height: 36px !default;
bsw/jbe@1309 485 $button-padding: 16px !default;
bsw/jbe@1309 486 $button-margin: 4px !default;
bsw/jbe@1309 487 $button-border-radius: 2px !default;
bsw/jbe@1309 488
bsw/jbe@1309 489 $button-fab-size: 56px !default;
bsw/jbe@1309 490 $button-fab-size-mini: 40px !default;
bsw/jbe@1309 491 $button-fab-font-size: 24px !default;
bsw/jbe@1309 492
bsw/jbe@1309 493 $button-icon-size: 32px !default;
bsw/jbe@1309 494 $button-icon-size-mini: 24px !default;
bsw/jbe@1309 495
bsw/jbe@1309 496
bsw/jbe@1309 497 /* ANIMATION */
bsw/jbe@1309 498 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
bsw/jbe@1309 499 $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
bsw/jbe@1309 500 $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
bsw/jbe@1309 501
bsw/jbe@1309 502 $animation-curve-default: $animation-curve-fast-out-slow-in !default;
bsw/jbe@1309 503
bsw/jbe@1309 504
bsw/jbe@1309 505 /* PROGRESS */
bsw/jbe@1309 506 $bar-height: 4px !default;
bsw/jbe@1309 507
bsw/jbe@1309 508 /* BADGE */
bsw/jbe@1309 509 $badge-font-size: 12px !default;
bsw/jbe@1309 510 $badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
bsw/jbe@1309 511 $badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 512 $badge-background: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 513 $badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
bsw/jbe@1309 514 $badge-size : 22px !default;
bsw/jbe@1309 515 $badge-padding: 2px !default;
bsw/jbe@1309 516 $badge-overlap: 12px !default;
bsw/jbe@1309 517
bsw/jbe@1309 518 /* SHADOWS */
bsw/jbe@1309 519
bsw/jbe@1309 520 $shadow-key-umbra-opacity: 0.2 !default;
bsw/jbe@1309 521 $shadow-key-penumbra-opacity: 0.14 !default;
bsw/jbe@1309 522 $shadow-ambient-shadow-opacity: 0.12 !default;
bsw/jbe@1309 523
bsw/jbe@1309 524 /* GRID */
bsw/jbe@1309 525
bsw/jbe@1309 526 $grid-desktop-columns: 12 !default;
bsw/jbe@1309 527 $grid-desktop-gutter: 16px !default;
bsw/jbe@1309 528 $grid-desktop-margin: 16px !default;
bsw/jbe@1309 529
bsw/jbe@1309 530 $grid-desktop-breakpoint: 840px !default;
bsw/jbe@1309 531
bsw/jbe@1309 532 $grid-tablet-columns: 8 !default;
bsw/jbe@1309 533 $grid-tablet-gutter: $grid-desktop-gutter !default;
bsw/jbe@1309 534 $grid-tablet-margin: $grid-desktop-margin !default;
bsw/jbe@1309 535
bsw/jbe@1309 536 $grid-tablet-breakpoint: 480px !default;
bsw/jbe@1309 537
bsw/jbe@1309 538 $grid-phone-columns: 4 !default;
bsw/jbe@1309 539 $grid-phone-gutter: $grid-desktop-gutter !default;
bsw/jbe@1309 540 $grid-phone-margin: $grid-desktop-margin !default;
bsw/jbe@1309 541
bsw/jbe@1309 542 $grid-cell-default-columns: $grid-phone-columns !default;
bsw/jbe@1309 543 $grid-max-columns: $grid-desktop-columns !default;
bsw/jbe@1309 544
bsw/jbe@1309 545 /* DATA TABLE */
bsw/jbe@1309 546
bsw/jbe@1309 547 $data-table-font-size: 13px !default;
bsw/jbe@1309 548 $data-table-header-font-size: 12px !default;
bsw/jbe@1309 549 $data-table-header-sort-icon-size: 16px !default;
bsw/jbe@1309 550
bsw/jbe@1309 551 $data-table-header-color: rgba(#000, 0.54) !default;
bsw/jbe@1309 552 $data-table-header-sorted-color: rgba(#000, 0.87) !default;
bsw/jbe@1309 553 $data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
bsw/jbe@1309 554 $data-table-divider-color: rgba(#000, 0.12) !default;
bsw/jbe@1309 555
bsw/jbe@1309 556 $data-table-hover-color: #eeeeee !default;
bsw/jbe@1309 557 $data-table-selection-color: #e0e0e0 !default;
bsw/jbe@1309 558
bsw/jbe@1309 559 $data-table-dividers: 1px solid $data-table-divider-color !default;
bsw/jbe@1309 560
bsw/jbe@1309 561 $data-table-row-height: 48px !default;
bsw/jbe@1309 562 $data-table-last-row-height: 56px !default;
bsw/jbe@1309 563 $data-table-header-height: 56px !default;
bsw/jbe@1309 564
bsw/jbe@1309 565 $data-table-column-spacing: 36px !default;
bsw/jbe@1309 566 $data-table-column-padding: $data-table-column-spacing / 2;
bsw/jbe@1309 567
bsw/jbe@1309 568 $data-table-card-header-height: 64px !default;
bsw/jbe@1309 569 $data-table-card-title-top: 20px !default;
bsw/jbe@1309 570 $data-table-card-padding: 24px !default;
bsw/jbe@1309 571 $data-table-button-padding-right: 16px !default;
bsw/jbe@1309 572 $data-table-cell-top: $data-table-card-padding / 2;
bsw/jbe@1309 573
bsw/jbe@1309 574 /* DIALOG */
bsw/jbe@1309 575 $dialog-content-color: $card-supporting-text-text-color;
bsw/jbe@1309 576
bsw/jbe@1309 577 /* SNACKBAR */
bsw/jbe@1309 578
bsw/jbe@1309 579 // Hard coded since the color is not present in any palette.
bsw/jbe@1309 580 $snackbar-background-color: #323232 !default;
bsw/jbe@1309 581 $snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
bsw/jbe@1309 582 $snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309 583
bsw/jbe@1309 584 /* TOOLTIP */
bsw/jbe@1309 585 $tooltip-font-size: 10px !default;
bsw/jbe@1309 586 $tooltip-font-size-large: 14px !default;
bsw/jbe@1309 587
bsw/jbe@1309 588 /* CHIP */
bsw/jbe@1309 589 $chip-bg-color: rgb(222, 222, 222) !default;
bsw/jbe@1309 590 $chip-bg-active-color: rgb(214, 214, 214) !default;
bsw/jbe@1309 591 $chip-height: 32px !default;
bsw/jbe@1309 592 $chip-font-size: 13px !default;

Impressum / About Us