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