From 74f8687d4ab358c071bd081b0b7709eba5a521c2 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Mon, 10 Feb 2020 12:28:37 -0800
Subject: Add responsive layout

The main navigation will be collapsed until the viewport
minimum width reaches the Bootstrap defined 'lg' breakpoint
(defaults to 992px).

- Adding motion variables and updating some CSS values to
  use existing Sass variables

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
---
 src/assets/styles/_motion.scss      | 14 ++++++++++++++
 src/assets/styles/_obmc-custom.scss |  4 ++++
 2 files changed, 18 insertions(+)
 create mode 100644 src/assets/styles/_motion.scss

(limited to 'src/assets')

diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/_motion.scss
new file mode 100644
index 00000000..55a3eed9
--- /dev/null
+++ b/src/assets/styles/_motion.scss
@@ -0,0 +1,14 @@
+$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
+$duration--fast-02: 110ms; //Micro-interactions such as fade
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$duration--moderate-02: 240ms; //Expansion, system communication, toast
+$duration--slow-01: 400ms; //Large expansion, important system notifications
+$duration--slow-02: 700ms; //Background dimming
+
+// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing
+$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
+$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 2e360193..aff37529 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,10 +1,14 @@
 $enable-rounded: false;
 $enable-validation-icons: false;
+$responsive-layout-bp: lg;
+$header-height: 56px;
+$navigation-width: 300px;
 
 // Required
 @import "~bootstrap/scss/functions";
 @import "./functions";
 @import "./colors";
+@import "./motion";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 
-- 
cgit v1.2.3