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
diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/_motion.scss
new file mode 100644
index 0000000..55a3eed
--- /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 2e36019..aff3752 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";