1/// variables.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- 2 3// palettes import - 4// ------------------------------------------------------------------------------ 5// fixme : consolidate all settings and imports in a decent 'settings' file 6//@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript 7@import 'components/palette'; // fixme : The maps in color-palettes are more js then scss 8 9//$primary-color: sg-color($sogoBlue, 300) !default; 10//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; 11//$foreground-primary-color: rgba($primary-color, 0.87);//override 12//$background-base-color: sg-color($sogoPaper, 200); 13 14// Typography 15// ------------------------------ 16$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default; 17$font-size: 10px; 18 19//-- Must be defined before $font-size. 20@function rem($multiplier) { 21 @return $multiplier * $font-size; 22} 23 24$display-4-font-size-base: rem(11.20) !default; 25$display-3-font-size-base: rem(5.600) !default; 26$display-2-font-size-base: rem(4.500) !default; 27$display-1-font-size-base: rem(3.400) !default; 28$headline-font-size-base: rem(2.400) !default; 29$title-font-size-base: rem(2.000) !default; 30$subhead-font-size-base: rem(1.600) !default; 31 32$body-font-size-base: rem(1.400) !default; 33$caption-font-size-base: rem(1.200) !default; 34 35// Layout 36// ------------------------------ 37 38$baseline-grid: 8px !default; 39$layout-gutter-width: ($baseline-grid * 2) !default; 40 41// shortcut aliases for $baseline-grid 42$bl: $baseline-grid; 43$line: $baseline-grid; 44 45$sg-md-grid-pitch: 8 * $baseline-grid; 46// shortcut alias for $sg-md-grid-pitch 47$pitch: $sg-md-grid-pitch; 48 49// touch and pointers 50// ---------------------------------------------------------------------------- 51$touch-zone-width: 36px; 52// shortcut alias for $touch-zone-width 53$touch-zone: $touch-zone-width; 54 55// Google specifies dimensions in grid pitch 56// This is a small utility function 57// Return dimension in px 58@function grid-step($nb) { 59 @return ($pitch * $nb) 60} 61 62// angular-material share breakpoint values between sass and js files (/core/constant.js) 63// we might consider using a sass library to import values as json single source for both 64 65/** 66 * Breakpoint: 0 600px 960px 1024px 1280px 67 * |----------------------|----------|----------|-------------|----------> 68 * Slice : . xs · sm · md · lg . xl 69 * · · · · · 70 * · · · at(md) · · 71 * · · |----------| · 72 * · · · · · 73 * · · · from(md) · · 74 * · · |-----------------------------------> 75 * · · . · · 76 * · · . to(md) · · 77 * |--------------------------------------------| · 78 * . · . . · 79 * . · between(sm, lg) · 80 * . |-----------------------------------| 81 */ 82 83$layout-breakpoint-xs: 600px !default; 84$layout-breakpoint-sm: 960px !default; 85$layout-breakpoint-md: 1280px !default; 86$layout-breakpoint-lg: 1920px !default; 87 88// Margins 89$md-base-margin: $layout-gutter-width; 90// alias 91$mg: $layout-gutter-width; 92 93// Redefinitions 94// $layout-breakpoint-sm: 360px; 95$layout-breakpoint-md: 1024px; 96$layout-breakpoint-lg: 1280px; 97 98// We use column-based responsive grids inspired by Google's Material design metrics 99// ---------------------------------------------------------------------------- 100 101$base-grid-total-columns: ( 102 'xs': 1, 103 'sm': 16, 104 'md': 20, 105 'lg': 20, 106); 107 108// Passing to breakpoint-slicer 109$slicer-breakpoints: 0 $layout-breakpoint-xs $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg; 110// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix 111$slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl'; 112 113$media-pointer: (pointer fine); 114 115// Icon 116$icon-size: rem(2.400) !default; 117 118// App bar variables 119$app-bar-height: $sg-md-grid-pitch; 120 121// Views widths 122$listView-width: grid-step(6); 123$detailView-width: grid-step(8); 124 125$toast-height: $baseline-grid * 3 !default; 126$toast-margin: $baseline-grid * 1 !default; 127 128// Whiteframes 129 130$shadow-key-umbra-opacity: 0.2 !default; 131$shadow-key-penumbra-opacity: 0.14 !default; 132$shadow-ambient-shadow-opacity: 0.12 !default; 133 134$whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 135$whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 136$whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 137$whiteframe-shadow-4dp: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 138$whiteframe-shadow-5dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 139$whiteframe-shadow-6dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 140$whiteframe-shadow-7dp: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 141$whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 142$whiteframe-shadow-9dp: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 143$whiteframe-shadow-10dp: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 144$whiteframe-shadow-11dp: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 145$whiteframe-shadow-12dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 146$whiteframe-shadow-13dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 147$whiteframe-shadow-14dp: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 148$whiteframe-shadow-15dp: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 149$whiteframe-shadow-16dp: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 150$whiteframe-shadow-17dp: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 151$whiteframe-shadow-18dp: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 152$whiteframe-shadow-19dp: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 153$whiteframe-shadow-20dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 154$whiteframe-shadow-21dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 155$whiteframe-shadow-22dp: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 156$whiteframe-shadow-23dp: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 157$whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; 158 159// Z-indexes 160//-------------------------------------------- 161 162$z-index-toast: 105 !default; 163$z-index-tooltip: 100 !default; 164$z-index-menu: 100 !default; 165$z-index-calendar-pane: 100 !default; 166//$z-index-select: 90 !default; 167$z-index-select: 106 !default; 168$z-index-dialog: 80 !default; 169$z-index-bottom-sheet: 70 !default; 170$z-index-scroll-mask: 65 !default; 171$z-index-scroll-mask-bar: 65 !default; 172$z-index-sidenav: 60 !default; 173$z-index-backdrop: 50 !default; 174$z-index-fab: 20 !default; 175$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome 176$z-index-toolbar: 10 !default; 177$z-index-view: 9; 178 179// Easing Curves 180//-------------------------------------------- 181 182$swift-ease-out-duration: 0.4s !default; 183$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; 184$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default; 185 186$swift-ease-in-duration: 0.3s !default; 187$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default; 188$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default; 189 190$swift-ease-in-out-duration: 0.5s !default; 191$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default; 192$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default; 193 194$swift-linear-duration: 0.08s !default; 195$swift-linear-timing-function: linear !default; 196$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default; 197 198$material-enter-duration: 0.3s; 199$material-enter-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); 200$material-enter: all $material-enter-duration $material-enter-timing-function; 201 202$material-leave-duration: 0.3s; 203$material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1); 204$material-leave: all $material-leave-duration $material-leave-timing-function; 205 206// Button 207$button-left-right-padding: rem(0.800); 208$icon-button-height: rem(4.000) !default; 209$icon-button-width: rem(4.000) !default; 210 211// Fab Buttons (shared between buttons.scss and fab*.scss) 212$button-fab-width: rem(5.600) !default; 213$button-fab-height: rem(5.600) !default; 214$button-fab-padding: rem(1.60) !default; 215 216 217// Shared Checkbox variables 218$checkbox-width: 18px !default; 219$checkbox-height: $checkbox-width !default; 220$checkbox-border-radius: 2px !default; 221$checkbox-border-width: 2px !default; 222 223// Shared Horizontal Margin Variables 224$default-horizontal-margin: 16px !default; 225