150 lines
5 KiB
SCSS
150 lines
5 KiB
SCSS
|
|
// Path variables for seamless imports
|
|
// ----------------------------------------------------------------------------
|
|
$version: '3.alpha';
|
|
|
|
|
|
// palettes import -
|
|
// ------------------------------------------------------------------------------
|
|
// fixme : consolidate all settings and imports in a decent 'settings' file
|
|
//@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
|
|
@import 'components/palette'; // fixme : The maps in color-palettes are more js then scss
|
|
|
|
$primary-color: sg-color($sogoBlue, 300) !default;
|
|
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
|
|
$foreground-primary-color: rgba($primary-color, 0.87);//override
|
|
$background-base-color: sg-color($sogoPaper, 200);
|
|
|
|
// Typography
|
|
// ------------------------------
|
|
$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
|
|
|
|
$display-4-font-size-base: 11.20rem !default;
|
|
$display-3-font-size-base: 5.600rem !default;
|
|
$display-2-font-size-base: 4.500rem !default;
|
|
$display-1-font-size-base: 3.400rem !default;
|
|
$headline-font-size-base: 2.400rem !default;
|
|
$title-font-size-base: 2.000rem !default;
|
|
$subhead-font-size-base: 1.600rem !default;
|
|
|
|
$body-font-size-base: 1.400rem !default;
|
|
$caption-font-size-base: 1.200rem !default;
|
|
|
|
// Layout and grid
|
|
// ------------------------------
|
|
|
|
$baseline-grid: 8px !default;
|
|
// shortcut aliases for $baseline-grid
|
|
$bl: $baseline-grid;
|
|
$line: $baseline-grid;
|
|
|
|
$sg-md-grid-pitch: 8 * $baseline-grid;
|
|
// shortcut alias for $sg-md-grid-pitch
|
|
$pitch: $sg-md-grid-pitch;
|
|
|
|
// touch and pointers
|
|
// ----------------------------------------------------------------------------
|
|
$touch-zone-width: 48px;
|
|
// shortcut alias for $touch-zone-width
|
|
$touch-zone: $touch-zone-width;
|
|
|
|
// Google specifies dimensions in grid pitch
|
|
// This is a small utility function
|
|
// Return dimension in px
|
|
|
|
@function grid-step($nb) {
|
|
@return ($pitch * $nb)
|
|
}
|
|
|
|
|
|
// Margins
|
|
$layout-gutter-width: ($baseline-grid * 2) !default;
|
|
$md-base-margin: $layout-gutter-width;
|
|
// alias
|
|
$mg: $layout-gutter-width;
|
|
|
|
// angular-material share breakpoint values between sass and js files (/core/constant.js)
|
|
// we might consider using a sass library to import values as json single source for both
|
|
|
|
$layout-breakpoint-sm: 600px !default;
|
|
$layout-breakpoint-md: 960px !default;
|
|
$layout-breakpoint-lg: 1200px !default;
|
|
|
|
// Redefinitions
|
|
// $layout-breakpoint-sm: 360px;
|
|
$layout-breakpoint-md: 1024px;
|
|
$layout-breakpoint-lg: 1280px;
|
|
|
|
// We use column-based responsive grids inspired by Google's Material design metrics
|
|
// ----------------------------------------------------------------------------
|
|
|
|
$base-grid-total-columns: (
|
|
'sm': 1,
|
|
'md': 16,
|
|
'lg': 20,
|
|
);
|
|
|
|
// Passing to breakpoint-slicer
|
|
$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
|
|
// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
|
|
$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
|
|
|
|
$media-pointer: (pointer fine);
|
|
|
|
|
|
// App bar variables
|
|
$app-bar-height: $sg-md-grid-pitch;
|
|
|
|
$listView-width: grid-step(6);
|
|
$detailView-width: grid-step(8);
|
|
|
|
$toast-height: $baseline-grid * 3 !default;
|
|
$toast-margin: $baseline-grid * 1 !default;
|
|
|
|
// Whiteframes
|
|
// todo: program a mixin
|
|
$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26) !default;
|
|
$sidenav-shadow-z1: 2px 0px 5px 0 rgba(0,0,0,0.26) !default;
|
|
$whiteframe-zindex-z1: 1 !default;
|
|
$whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2) !default;
|
|
$sidenav-shadow-z2: 8px 0px 17px 0 rgba(0,0,0,0.2) !default;
|
|
$whiteframe-zindex-z2: 2 !default;
|
|
$whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19) !default;
|
|
$sidenav-shadow-z3: 17px 0px 50px 0 rgba(0,0,0,0.19) !default;
|
|
$whiteframe-zindex-z3: 3 !default;
|
|
$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22) !default;
|
|
$sidenav-shadow-z4: 16px 0px 28px 0 rgba(0,0,0,0.22) !default;
|
|
$whiteframe-zindex-z4: 4 !default;
|
|
$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
|
|
$sidenav-shadow-z5: 27px 0px 24px 0 rgba(0,0,0,0.22) !default;
|
|
$whiteframe-zindex-z5: 5 !default;
|
|
|
|
|
|
// Z-indexes
|
|
//--------------------------------------------
|
|
|
|
$z-index-tooltip: 100 !default;
|
|
$z-index-dialog: 80 !default;
|
|
$z-index-toast: 90 !default;
|
|
$z-index-bottom-sheet: 70 !default;
|
|
$z-index-sidenav: 60 !default;
|
|
$z-index-backdrop: 50 !default;
|
|
$z-index-toolbar: 10 !default;
|
|
$z-index-fab: 20;
|
|
$z-index-view: 9;
|
|
|
|
// Easing Curves
|
|
//--------------------------------------------
|
|
|
|
$swift-ease-out-duration: 0.4s !default;
|
|
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
|
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
|
|
|
$swift-ease-in-duration: 0.3s !default;
|
|
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
|
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
|
|
|
|
$swift-ease-in-out-duration: 0.5s !default;
|
|
$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
|
|
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
|