Update {variables,content}.scss for latest md
Francis Lachapelle
parent
4514d7ce32
commit
8100dfa797
|
|
@ -5,22 +5,6 @@
|
|||
// the media definitions and replacing magic numbers with variables
|
||||
// ----------------------------------------------------------------------------
|
||||
md-content {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
background-color: transparent;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&[md-scroll-y] {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
&[md-scroll-x] {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
&[md-scroll-xy] {
|
||||
}
|
||||
|
||||
&.md-padding {
|
||||
padding: $mg;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
// Path variables for seamless imports
|
||||
// ----------------------------------------------------------------------------
|
||||
$version: '3.alpha';
|
||||
$version: '3.0.0';
|
||||
|
||||
|
||||
// palettes import -
|
||||
|
|
@ -18,37 +18,38 @@ $version: '3.alpha';
|
|||
//@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;
|
||||
$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);
|
||||
$background-base-color: sg-color($sogoPaper, 200);
|
||||
|
||||
// Typography
|
||||
// ------------------------------
|
||||
$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
|
||||
$font-size: 10px;
|
||||
|
||||
$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;
|
||||
$display-4-font-size-base: rem(11.20) !default;
|
||||
$display-3-font-size-base: rem(5.600) !default;
|
||||
$display-2-font-size-base: rem(4.500) !default;
|
||||
$display-1-font-size-base: rem(3.400) !default;
|
||||
$headline-font-size-base: rem(2.400) !default;
|
||||
$title-font-size-base: rem(2.000) !default;
|
||||
$subhead-font-size-base: rem(1.600) !default;
|
||||
|
||||
$body-font-size-base: 1.400rem !default;
|
||||
$caption-font-size-base: 1.200rem !default;
|
||||
$body-font-size-base: rem(1.400) !default;
|
||||
$caption-font-size-base: rem(1.200) !default;
|
||||
|
||||
// Layout and grid
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
$baseline-grid: 8px !default;
|
||||
$baseline-grid: 8px !default;
|
||||
// shortcut aliases for $baseline-grid
|
||||
$bl: $baseline-grid;
|
||||
$line: $baseline-grid;
|
||||
$bl: $baseline-grid;
|
||||
$line: $baseline-grid;
|
||||
|
||||
$sg-md-grid-pitch: 8 * $baseline-grid;
|
||||
$sg-md-grid-pitch: 8 * $baseline-grid;
|
||||
// shortcut alias for $sg-md-grid-pitch
|
||||
$pitch: $sg-md-grid-pitch;
|
||||
$pitch: $sg-md-grid-pitch;
|
||||
|
||||
// touch and pointers
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -59,24 +60,22 @@ $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;
|
||||
$layout-gutter-width: ($baseline-grid * 2) !default;
|
||||
|
||||
// Margins
|
||||
$md-base-margin: $layout-gutter-width;
|
||||
// alias
|
||||
$mg: $layout-gutter-width;
|
||||
|
||||
// Redefinitions
|
||||
// $layout-breakpoint-sm: 360px;
|
||||
|
|
@ -103,6 +102,7 @@ $media-pointer: (pointer fine);
|
|||
// App bar variables
|
||||
$app-bar-height: $sg-md-grid-pitch;
|
||||
|
||||
// Views widths
|
||||
$listView-width: grid-step(6);
|
||||
$detailView-width: grid-step(8);
|
||||
|
||||
|
|
@ -110,20 +110,27 @@ $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;
|
||||
|
||||
$shadow-multiplier: 0.7;
|
||||
$shadow-key-umbra-opacity: $shadow-multiplier * 0.2;
|
||||
$shadow-key-penumbra-opacity: $shadow-multiplier * 0.14;
|
||||
$shadow-ambient-shadow-opacity: $shadow-multiplier * 0.12;
|
||||
|
||||
// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
|
||||
// multiple lines. Ugly. Sorry.
|
||||
$whiteframe-shadow-z1: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !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;
|
||||
$whiteframe-shadow-z2: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
$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;
|
||||
$whiteframe-shadow-z3: 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;
|
||||
$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;
|
||||
$whiteframe-shadow-z4: 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;
|
||||
$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;
|
||||
$whiteframe-shadow-z5: 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;
|
||||
$sidenav-shadow-z5: 27px 0px 24px 0 rgba(0,0,0,0.22) !default;
|
||||
$whiteframe-zindex-z5: 5 !default;
|
||||
|
||||
|
|
@ -132,6 +139,7 @@ $whiteframe-zindex-z5: 5 !default;
|
|||
//--------------------------------------------
|
||||
|
||||
$z-index-tooltip: 100 !default;
|
||||
$z-index-menu: 99 !default;
|
||||
$z-index-dialog: 80 !default;
|
||||
$z-index-toast: 90 !default;
|
||||
$z-index-bottom-sheet: 70 !default;
|
||||
|
|
@ -139,7 +147,6 @@ $z-index-scroll-mask: 65 !default;
|
|||
$z-index-sidenav: 60 !default;
|
||||
$z-index-backdrop: 50 !default;
|
||||
$z-index-toolbar: 10 !default;
|
||||
$z-index-menu: 99 !default;
|
||||
$z-index-fab: 20 !default;
|
||||
$z-index-view: 9;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue