From 8100dfa79757304900e7fb63eb49a25f3d899eb4 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Fri, 12 Jun 2015 15:58:44 -0400 Subject: [PATCH] Update {variables,content}.scss for latest md --- .../scss/components/content/content.scss | 16 ---- .../scss/core/variables.scss | 73 ++++++++++--------- 2 files changed, 40 insertions(+), 49 deletions(-) diff --git a/UI/WebServerResources/scss/components/content/content.scss b/UI/WebServerResources/scss/components/content/content.scss index ffc423b29..24f88f894 100644 --- a/UI/WebServerResources/scss/components/content/content.scss +++ b/UI/WebServerResources/scss/components/content/content.scss @@ -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; diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss index 38a7fafe9..4cf2a8b9f 100644 --- a/UI/WebServerResources/scss/core/variables.scss +++ b/UI/WebServerResources/scss/core/variables.scss @@ -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;