From 9faca838f7b116965984bd62e8e9479767da4f93 Mon Sep 17 00:00:00 2001
From: Teeoo <1982890538@qq.com>
Date: Sat, 28 Mar 2020 17:11:29 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20ui(stylus):=20=E8=A7=84=E8=8C=83?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/pages/pages.component.html | 2 +-
src/assets/stylus/core/_base.styl | 27 +
src/assets/stylus/core/core.styl | 34 ++
src/assets/stylus/helper/helper.styl | 121 +++++
src/assets/stylus/mixins/_helper.styl | 65 +++
src/assets/stylus/mixins/mixins.styl | 1 +
src/assets/stylus/resets/_normalize.styl | 308 +++++++++++
src/assets/stylus/resets/resets.styl | 1 +
src/assets/stylus/style.styl | 15 +
src/assets/stylus/variables/_colors.styl | 285 +++++++++++
src/assets/stylus/variables/_custom.styl | 12 +
src/assets/stylus/variables/variables.styl | 2 +
src/styles.styl | 563 +--------------------
13 files changed, 873 insertions(+), 563 deletions(-)
create mode 100644 src/assets/stylus/core/_base.styl
create mode 100644 src/assets/stylus/core/core.styl
create mode 100644 src/assets/stylus/helper/helper.styl
create mode 100644 src/assets/stylus/mixins/_helper.styl
create mode 100644 src/assets/stylus/mixins/mixins.styl
create mode 100644 src/assets/stylus/resets/_normalize.styl
create mode 100644 src/assets/stylus/resets/resets.styl
create mode 100644 src/assets/stylus/style.styl
create mode 100644 src/assets/stylus/variables/_colors.styl
create mode 100644 src/assets/stylus/variables/_custom.styl
create mode 100644 src/assets/stylus/variables/variables.styl
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 0680b43..6c46b1d 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -1 +1 @@
-
+
diff --git a/src/assets/stylus/core/_base.styl b/src/assets/stylus/core/_base.styl
new file mode 100644
index 0000000..7822466
--- /dev/null
+++ b/src/assets/stylus/core/_base.styl
@@ -0,0 +1,27 @@
+// Reset the box-sizing
+//
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing
+*
+ box-sizing border-box
+ -webkit-tap-highlight-color rgba(0, 0, 0, 0)
+
+*:before,
+*:after
+ box-sizing border-box
+
+html,
+body
+ height 100%
+ width 100%
+
+html
+ -webkit-font-smoothing antialiased
+ color $body-text-color
+ font-family $contentFontFamily
+ background-color $canvas-color
+
+hr
+ border none
+ border-bottom solid 1px $border-color
diff --git a/src/assets/stylus/core/core.styl b/src/assets/stylus/core/core.styl
new file mode 100644
index 0000000..e111a0c
--- /dev/null
+++ b/src/assets/stylus/core/core.styl
@@ -0,0 +1,34 @@
+@import '_base';
+
+// interval
+$grid-gap-8 = 8px
+$grid-gap-16 = 16px
+$grid-gap-24 = 24px
+$grid-gap-40 = 40px
+
+// 92% - 96%
+.md-container
+ max-width 1280px
+ width 96%
+ @media (min-width $screen-sm-min)
+ width 94%
+ @media (min-width $screen-md-min)
+ width 92%
+
+// 100%
+.md-container,
+.md-container-fluid
+ box-sizing border-box
+ margin-left auto
+ margin-right auto
+ padding-left ($grid-gap-16 / 2)
+ padding-right ($grid-gap-16 / 2)
+ &:after
+ content ''
+ display table
+ clear both
+.full-width
+ width 100%
+.full-height
+ height 100%
+
diff --git a/src/assets/stylus/helper/helper.styl b/src/assets/stylus/helper/helper.styl
new file mode 100644
index 0000000..515af38
--- /dev/null
+++ b/src/assets/stylus/helper/helper.styl
@@ -0,0 +1,121 @@
+/**
+ * =============================================================================
+ * ************ Helper 辅助类 ************
+ * =============================================================================
+ */
+
+/**
+ * =================== 边距
+ */
+for $spacing in 1 .. 5
+ .md-m-a-{$spacing}
+ md-m-a($spacing) !important
+ .md-m-t-{$spacing}
+ md-m-t($spacing) !important
+ .md-m-r-{$spacing}
+ md-m-r($spacing) !important
+ .md-m-b-{$spacing}
+ md-m-b($spacing) !important
+ .md-m-l-{$spacing}
+ md-m-l($spacing) !important
+ .md-m-x-{$spacing}
+ md-m-x($spacing) !important
+ .md-m-y-{$spacing}
+ md-m-y($spacing) !important
+ .md-p-a-{$spacing}
+ md-p-a($spacing) !important
+ .md-p-t-{$spacing}
+ md-p-t($spacing) !important
+ .md-p-r-{$spacing}
+ md-p-r($spacing) !important
+ .md-p-b-{$spacing}
+ md-p-b($spacing) !important
+ .md-p-l-{$spacing}
+ md-p-l($spacing) !important
+ .md-p-x-{$spacing}
+ md-p-x($spacing) !important
+ .md-p-y-{$spacing}
+ md-p-y($spacing) !important
+
+/**
+ * ======================== 快速浮动
+ */
+
+/* 向左浮动 */
+.md-float-left
+ float: left !important
+
+/* 向右浮动 */
+.md-float-right
+ float: right !important
+
+/**
+ * ========================= 水平居中
+ */
+/* 水平居中 */
+.md-center
+ md-center() !important
+
+/**
+ * ========================= 垂直居中
+ */
+/* 垂直居中 */
+.md-valign
+ md-valign() !important
+
+/**
+ * ========================= 文本对齐方式
+ */
+/* 文本左对齐 */
+.md-text-left
+ text-align: left !important
+
+/* 文本居中对齐 */
+.md-text-center
+ text-align: center !important
+
+/* 文本向右对齐 */
+.md-text-right
+ text-align: right !important
+
+/**
+ * ========================= 文本大小写转换
+ */
+/* 文本转为小写 */
+.md-text-lowercase
+ text-transform: lowercase !important
+
+/* 文本转为大写 */
+.md-text-uppercase
+ text-transform: uppercase !important
+
+/* 文本转为单词的首字母大写 */
+.md-text-capitalize
+ text-transform: capitalize !important
+
+/**
+ * ======================== 文本截断
+ */
+/* 文本截断 */
+.md-text-truncate
+ md-text-truncate()
+
+/**
+ * ========================= 清除浮动
+ */
+/* 清除浮动 */
+.md-clearfix
+ md-clearfix()
+
+/**
+ * ========================= 隐藏内容
+ */
+/* 隐藏元素 */
+.md-hidden,
+[hidden]
+ display: none !important
+
+/* 使元素不可见 */
+.md-invisible
+ visibility: hidden
+
diff --git a/src/assets/stylus/mixins/_helper.styl b/src/assets/stylus/mixins/_helper.styl
new file mode 100644
index 0000000..bcf85c8
--- /dev/null
+++ b/src/assets/stylus/mixins/_helper.styl
@@ -0,0 +1,65 @@
+md-m-a($spacing)
+ margin $spacing * $spacing-base
+md-m-t($spacing)
+ margin-top $spacing * $spacing-base
+md-m-r($spacing)
+ margin-right $spacing * $spacing-base
+md-m-b($spacing)
+ margin-bottom $spacing * $spacing-base
+md-m-l($spacing)
+ margin-left $spacing * $spacing-base
+md-m-x($spacing)
+ margin-left $spacing * $spacing-base
+ margin-right $spacing * $spacing-base
+md-m-y($spacing)
+ margin-top $spacing * $spacing-base
+ margin-bottom $spacing * $spacing-base
+md-p-a($spacing)
+ padding $spacing * $spacing-base
+md-p-t($spacing)
+ padding-top $spacing * $spacing-base
+md-p-r($spacing)
+ padding-right $spacing * $spacing-base
+md-p-b($spacing)
+ padding-bottom $spacing * $spacing-base
+md-p-l($spacing)
+ padding-left $spacing * $spacing-base
+md-p-x($spacing)
+ padding-left $spacing * $spacing-base
+ padding-right $spacing * $spacing-base
+md-p-y($spacing)
+ padding-top $spacing * $spacing-base
+ padding-bottom $spacing * $spacing-base
+//=========================== 清除浮动
+// 清除浮动
+md-clearfix()
+ &:before,
+ &:after
+ content: " "
+ display: table
+ &:after
+ clear: both
+
+
+// 用省略号代替被截断的文本
+md-text-truncate()
+ white-space: nowrap
+ overflow: hidden
+ text-overflow: ellipsis
+
+// 文本强制换行
+md-textwrap()
+ word-wrap: break-word
+ word-break: break-all
+
+// 使子元素垂直居中
+md-valign()
+ display: flex
+ align-items: center
+
+// 使元素水平居中
+md-center()
+ display: block
+ margin-left: auto
+ margin-right: auto
+
diff --git a/src/assets/stylus/mixins/mixins.styl b/src/assets/stylus/mixins/mixins.styl
new file mode 100644
index 0000000..a7f7c24
--- /dev/null
+++ b/src/assets/stylus/mixins/mixins.styl
@@ -0,0 +1 @@
+@import "_helper";
diff --git a/src/assets/stylus/resets/_normalize.styl b/src/assets/stylus/resets/_normalize.styl
new file mode 100644
index 0000000..1c49a05
--- /dev/null
+++ b/src/assets/stylus/resets/_normalize.styl
@@ -0,0 +1,308 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html
+ line-height 1.15 /* 1 */
+ -webkit-text-size-adjust 100% /* 2 */
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body
+ margin 0
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1
+ font-size 2em
+ margin 0.67em 0
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr
+ box-sizing content-box /* 1 */
+ height 0 /* 1 */
+ overflow visible /* 2 */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre
+ font-family monospace, monospace /* 1 */
+ font-size 1em /* 2 */
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a
+ background-color transparent
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title]
+ border-bottom none /* 1 */
+ text-decoration underline /* 2 */
+ text-decoration underline dotted /* 2 */
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong
+ font-weight bolder
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp
+ font-family monospace, monospace /* 1 */
+ font-size 1em /* 2 */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small
+ font-size 80%
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup
+ font-size 75%
+ line-height 0
+ position relative
+ vertical-align baseline
+
+sub
+ bottom -0.25em
+
+sup
+ top -0.5em
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img
+ border-style none
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea
+ font-family inherit /* 1 */
+ font-size 100% /* 1 */
+ line-height 1.15 /* 1 */
+ margin 0 /* 2 */
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input /* 1 */
+ overflow visible
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select /* 1 */
+ text-transform none
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"]
+ -webkit-appearance button
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner
+ border-style none
+ padding 0
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]-moz-focusring,
+[type="reset"]-moz-focusring,
+[type="submit"]-moz-focusring
+ outline 1px dotted ButtonText
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset
+ padding 0.35em 0.75em 0.625em
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend
+ box-sizing border-box /* 1 */
+ color inherit /* 2 */
+ display table /* 1 */
+ max-width 100% /* 1 */
+ padding 0 /* 3 */
+ white-space normal /* 1 */
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress
+ vertical-align baseline
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea
+ overflow auto
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"]
+ box-sizing border-box /* 1 */
+ padding 0 /* 2 */
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+ height auto
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"]
+ -webkit-appearance textfield /* 1 */
+ outline-offset -2px /* 2 */
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration
+ -webkit-appearance none
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button
+ -webkit-appearance button /* 1 */
+ font inherit /* 2 */
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details
+ display block
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary
+ display list-item
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template
+ display none
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden]
+ display none
diff --git a/src/assets/stylus/resets/resets.styl b/src/assets/stylus/resets/resets.styl
new file mode 100644
index 0000000..89e4b6f
--- /dev/null
+++ b/src/assets/stylus/resets/resets.styl
@@ -0,0 +1 @@
+@import "_normalize";
diff --git a/src/assets/stylus/style.styl b/src/assets/stylus/style.styl
new file mode 100644
index 0000000..e13634b
--- /dev/null
+++ b/src/assets/stylus/style.styl
@@ -0,0 +1,15 @@
+// Reset and dependencies
+@import 'resets/resets';
+
+// Core variables
+@import 'variables/variables';
+
+// Common mixins
+@import 'mixins/mixins';
+
+// Core
+@import 'helper/helper';
+
+// Core
+@import 'core/core';
+
diff --git a/src/assets/stylus/variables/_colors.styl b/src/assets/stylus/variables/_colors.styl
new file mode 100644
index 0000000..aac52ef
--- /dev/null
+++ b/src/assets/stylus/variables/_colors.styl
@@ -0,0 +1,285 @@
+$red-50 = #ffebee;
+$red-100 = #ffcdd2;
+$red-200 = #ef9a9a;
+$red-300 = #e57373;
+$red-400 = #ef5350;
+$red-500 = #f44336;
+$red-600 = #e53935;
+$red-700 = #d32f2f;
+$red-800 = #c62828;
+$red-900 = #b71c1c;
+$red-A100 = #ff8a80;
+$red-A200 = #ff5252;
+$red-A400 = #ff1744;
+$red-A700 = #d50000;
+
+$pink-50 = #fce4ec;
+$pink-100 = #f8bbd0;
+$pink-200 = #f48fb1;
+$pink-300 = #f06292;
+$pink-400 = #ec407a;
+$pink-500 = #e91e63;
+$pink-600 = #d81b60;
+$pink-700 = #c2185b;
+$pink-800 = #ad1457;
+$pink-900 = #880e4f;
+$pink-A100 = #ff80ab;
+$pink-A200 = #ff4081;
+$pink-A400 = #f50057;
+$pink-A700 = #c51162;
+
+$purple-50 = #f3e5f5;
+$purple-100 = #e1bee7;
+$purple-200 = #ce93d8;
+$purple-300 = #ba68c8;
+$purple-400 = #ab47bc;
+$purple-500 = #9c27b0;
+$purple-600 = #8e24aa;
+$purple-700 = #7b1fa2;
+$purple-800 = #6a1b9a;
+$purple-900 = #4a148c;
+$purple-A100 = #ea80fc;
+$purple-A200 = #e040fb;
+$purple-A400 = #d500f9;
+$purple-A700 = #aa00ff;
+
+$deep-purple-50 = #ede7f6;
+$deep-purple-100 = #d1c4e9;
+$deep-purple-200 = #b39ddb;
+$deep-purple-300 = #9575cd;
+$deep-purple-400 = #7e57c2;
+$deep-purple-500 = #673ab7;
+$deep-purple-600 = #5e35b1;
+$deep-purple-700 = #512da8;
+$deep-purple-800 = #4527a0;
+$deep-purple-900 = #311b92;
+$deep-purple-A100 = #b388ff;
+$deep-purple-A200 = #7c4dff;
+$deep-purple-A400 = #651fff;
+$deep-purple-A700 = #6200ea;
+
+$indigo-50 = #e8eaf6;
+$indigo-100 = #c5cae9;
+$indigo-200 = #9fa8da;
+$indigo-300 = #7986cb;
+$indigo-400 = #5c6bc0;
+$indigo-500 = #3f51b5;
+$indigo-600 = #3949ab;
+$indigo-700 = #303f9f;
+$indigo-800 = #283593;
+$indigo-900 = #1a237e;
+$indigo-A100 = #8c9eff;
+$indigo-A200 = #536dfe;
+$indigo-A400 = #3d5afe;
+$indigo-A700 = #304ffe;
+
+$blue-50 = #e3f2fd;
+$blue-100 = #bbdefb;
+$blue-200 = #90caf9;
+$blue-300 = #64b5f6;
+$blue-400 = #42a5f5;
+$blue-500 = #2196f3;
+$blue-600 = #1e88e5;
+$blue-700 = #1976d2;
+$blue-800 = #1565c0;
+$blue-900 = #0d47a1;
+$blue-A100 = #82b1ff;
+$blue-A200 = #448aff;
+$blue-A400 = #2979ff;
+$blue-A700 = #2962ff;
+
+$light-blue-50 = #e1f5fe;
+$light-blue-100 = #b3e5fc;
+$light-blue-200 = #81d4fa;
+$light-blue-300 = #4fc3f7;
+$light-blue-400 = #29b6f6;
+$light-blue-500 = #03a9f4;
+$light-blue-600 = #039be5;
+$light-blue-700 = #0288d1;
+$light-blue-800 = #0277bd;
+$light-blue-900 = #01579b;
+$light-blue-A100 = #80d8ff;
+$light-blue-A200 = #40c4ff;
+$light-blue-A400 = #00b0ff;
+$light-blue-A700 = #0091ea;
+
+$cyan-50 = #e0f7fa;
+$cyan-100 = #b2ebf2;
+$cyan-200 = #80deea;
+$cyan-300 = #4dd0e1;
+$cyan-400 = #26c6da;
+$cyan-500 = #00bcd4;
+$cyan-600 = #00acc1;
+$cyan-700 = #0097a7;
+$cyan-800 = #00838f;
+$cyan-900 = #006064;
+$cyan-A100 = #84ffff;
+$cyan-A200 = #18ffff;
+$cyan-A400 = #00e5ff;
+$cyan-A700 = #00b8d4;
+
+$teal-50 = #e0f2f1;
+$teal-100 = #b2dfdb;
+$teal-200 = #80cbc4;
+$teal-300 = #4db6ac;
+$teal-400 = #26a69a;
+$teal-500 = #009688;
+$teal-600 = #00897b;
+$teal-700 = #00796b;
+$teal-800 = #00695c;
+$teal-900 = #004d40;
+$teal-A100 = #a7ffeb;
+$teal-A200 = #64ffda;
+$teal-A400 = #1de9b6;
+$teal-A700 = #00bfa5;
+
+$green-50 = #e8f5e9;
+$green-100 = #c8e6c9;
+$green-200 = #a5d6a7;
+$green-300 = #81c784;
+$green-400 = #66bb6a;
+$green-500 = #4caf50;
+$green-600 = #43a047;
+$green-700 = #388e3c;
+$green-800 = #2e7d32;
+$green-900 = #1b5e20;
+$green-A100 = #b9f6ca;
+$green-A200 = #69f0ae;
+$green-A400 = #00e676;
+$green-A700 = #00c853;
+
+$light-green-50 = #f1f8e9;
+$light-green-100 = #dcedc8;
+$light-green-200 = #c5e1a5;
+$light-green-300 = #aed581;
+$light-green-400 = #9ccc65;
+$light-green-500 = #8bc34a;
+$light-green-600 = #7cb342;
+$light-green-700 = #689f38;
+$light-green-800 = #558b2f;
+$light-green-900 = #33691e;
+$light-green-A100 = #ccff90;
+$light-green-A200 = #b2ff59;
+$light-green-A400 = #76ff03;
+$light-green-A700 = #64dd17;
+
+$lime-50 = #f9fbe7;
+$lime-100 = #f0f4c3;
+$lime-200 = #e6ee9c;
+$lime-300 = #dce775;
+$lime-400 = #d4e157;
+$lime-500 = #cddc39;
+$lime-600 = #c0ca33;
+$lime-700 = #afb42b;
+$lime-800 = #9e9d24;
+$lime-900 = #827717;
+$lime-A100 = #f4ff81;
+$lime-A200 = #eeff41;
+$lime-A400 = #c6ff00;
+$lime-A700 = #aeea00;
+
+$yellow-50 = #fffde7;
+$yellow-100 = #fff9c4;
+$yellow-200 = #fff59d;
+$yellow-300 = #fff176;
+$yellow-400 = #ffee58;
+$yellow-500 = #ffeb3b;
+$yellow-600 = #fdd835;
+$yellow-700 = #fbc02d;
+$yellow-800 = #f9a825;
+$yellow-900 = #f57f17;
+$yellow-A100 = #ffff8d;
+$yellow-A200 = #ffff00;
+$yellow-A400 = #ffea00;
+$yellow-A700 = #ffd600;
+
+$amber-50 = #fff8e1;
+$amber-100 = #ffecb3;
+$amber-200 = #ffe082;
+$amber-300 = #ffd54f;
+$amber-400 = #ffca28;
+$amber-500 = #ffc107;
+$amber-600 = #ffb300;
+$amber-700 = #ffa000;
+$amber-800 = #ff8f00;
+$amber-900 = #ff6f00;
+$amber-A100 = #ffe57f;
+$amber-A200 = #ffd740;
+$amber-A400 = #ffc400;
+$amber-A700 = #ffab00;
+
+$orange-50 = #fff3e0;
+$orange-100 = #ffe0b2;
+$orange-200 = #ffcc80;
+$orange-300 = #ffb74d;
+$orange-400 = #ffa726;
+$orange-500 = #ff9800;
+$orange-600 = #fb8c00;
+$orange-700 = #f57c00;
+$orange-800 = #ef6c00;
+$orange-900 = #e65100;
+$orange-A100 = #ffd180;
+$orange-A200 = #ffab40;
+$orange-A400 = #ff9100;
+$orange-A700 = #ff6d00;
+
+$deep-orange-50 = #fbe9e7;
+$deep-orange-100 = #ffccbc;
+$deep-orange-200 = #ffab91;
+$deep-orange-300 = #ff8a65;
+$deep-orange-400 = #ff7043;
+$deep-orange-500 = #ff5722;
+$deep-orange-600 = #f4511e;
+$deep-orange-700 = #e64a19;
+$deep-orange-800 = #d84315;
+$deep-orange-900 = #bf360c;
+$deep-orange-A100 = #ff9e80;
+$deep-orange-A200 = #ff6e40;
+$deep-orange-A400 = #ff3d00;
+$deep-orange-A700 = #dd2c00;
+
+$brown-50 = #efebe9;
+$brown-100 = #d7ccc8;
+$brown-200 = #bcaaa4;
+$brown-300 = #a1887f;
+$brown-400 = #8d6e63;
+$brown-500 = #795548;
+$brown-600 = #6d4c41;
+$brown-700 = #5d4037;
+$brown-800 = #4e342e;
+$brown-900 = #3e2723;
+
+$blue-grey-50 = #eceff1;
+$blue-grey-100 = #cfd8dc;
+$blue-grey-200 = #b0bec5;
+$blue-grey-300 = #90a4ae;
+$blue-grey-400 = #78909c;
+$blue-grey-500 = #607d8b;
+$blue-grey-600 = #546e7a;
+$blue-grey-700 = #455a64;
+$blue-grey-800 = #37474f;
+$blue-grey-900 = #263238;
+
+$grey-50 = #fafafa;
+$grey-100 = #f5f5f5;
+$grey-200 = #eeeeee;
+$grey-300 = #e0e0e0;
+$grey-400 = #bdbdbd;
+$grey-500 = #9e9e9e;
+$grey-600 = #757575;
+$grey-700 = #616161;
+$grey-800 = #424242;
+$grey-900 = #212121;
+
+$black = #000000;
+$white = #ffffff;
+
+$transparent = rgba(0, 0, 0, 0);
+$full-black = rgba(0, 0, 0, 1);
+$dark-black = rgba(0, 0, 0, 0.87);
+$light-black = rgba(0, 0, 0, 0.54);
+$min-black = rgba(0, 0, 0, 0.26);
+$faint-black = rgba(0, 0, 0, 0.12);
+$full-white = rgba(255, 255, 255, 1);
+$dark-white = rgba(255, 255, 255, 0.87);
+$light-white = rgba(255, 255, 255, 0.54);
diff --git a/src/assets/stylus/variables/_custom.styl b/src/assets/stylus/variables/_custom.styl
new file mode 100644
index 0000000..2a9d239
--- /dev/null
+++ b/src/assets/stylus/variables/_custom.styl
@@ -0,0 +1,12 @@
+// Text Colors
+$body-text-color = $dark-black;
+
+// Borders Colors
+$border-color = $grey-300;
+
+// Base margin
+$spacing-base = 8px;
+
+// Breakpoint
+$screen-sm-min = 600px;
+$screen-md-min = 1024px;
diff --git a/src/assets/stylus/variables/variables.styl b/src/assets/stylus/variables/variables.styl
new file mode 100644
index 0000000..63fdcea
--- /dev/null
+++ b/src/assets/stylus/variables/variables.styl
@@ -0,0 +1,2 @@
+@import '_colors';
+@import '_custom';
diff --git a/src/styles.styl b/src/styles.styl
index b3c5adc..a8ab74d 100644
--- a/src/styles.styl
+++ b/src/styles.styl
@@ -1,563 +1,2 @@
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
-
-*,::after,::before
- box-sizing border-box
-
-html
- font-family sans-serif
- line-height 1.15
- -webkit-text-size-adjust 100%
- -ms-text-size-adjust 100%
- -ms-overflow-style scrollbar
- -webkit-tap-highlight-color transparent
- width 100%
- height 100%
- max-height 100%
- min-height 100%
- margin 0
- padding 0
- overflow hidden
-
-@-ms-viewport
- width device-width
-
-article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section
- display block
-
-body
- margin 0
- font-family -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
- font-size 1rem
- font-weight 400
- line-height 1.5
- color #212529
- text-align left
- background-color #fff
-
-[tabindex="-1"]:focus
- outline 0!important
-
-hr
- box-sizing content-box
- height 0
- overflow visible
-
-h1,h2,h3,h4,h5,h6
- margin-top 0
- margin-bottom .5rem
-
-p
- margin-top 0
- margin-bottom 1rem
-
-abbr[data-original-title],abbr[title]
- text-decoration underline
- -webkit-text-decoration underline dotted
- text-decoration underline dotted
- cursor help
- border-bottom 0
-
-address
- margin-bottom 1rem
- font-style normal
- line-height inherit
-
-dl,ol,ul
- margin-top 0
- margin-bottom 1rem
-
-ol ol,ol ul,ul ol,ul ul
- margin-bottom 0
-
-dt
- font-weight 700
-
-dd
- margin-bottom .5rem
- margin-left 0
-
-blockquote
- margin 0 0 1rem
-
-dfn
- font-style italic
-
-b,strong
- font-weight bolder
-
-small
- font-size 80%
-
-sub,sup
- position relative
- font-size 75%
- line-height 0
- vertical-align baseline
-
-sub
- bottom -.25em
-
-sup
- top -.5em
-
-a
- color #007bff
- text-decoration none
- background-color transparent
- -webkit-text-decoration-skip objects
- &:hover
- color #0056b3
- text-decoration underline
- &:not([href]):not([tabindex])
- color inherit
- text-decoration none
- &:not([href]):not([tabindex]):focus
- outline 0
-
-a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover
- color inherit
- text-decoration none
-
-code,kbd,pre,samp
- font-family monospace,monospace
- font-size 1em
-
-pre
- margin-top 0
- margin-bottom 1rem
- overflow auto
- -ms-overflow-style scrollbar
-
-figure
- margin 0 0 1rem
-
-img
- vertical-align middle
- border-style none
-
-svg
- &:not(:root)
- overflow hidden
-
-table
- border-collapse collapse
-
-caption
- padding-top .75rem
- padding-bottom .75rem
- color #6c757d
- text-align left
- caption-side bottom
-
-th
- text-align inherit
-
-label
- display inline-block
- margin-bottom .5rem
-
-button
- border-radius 0
- &:focus
- outline 1px dotted
- outline 5px auto -webkit-focus-ring-color
-
-button,input,optgroup,select,textarea
- margin 0
- font-family inherit
- font-size inherit
- line-height inherit
-
-button,input
- overflow visible
-
-button,select
- text-transform none
-
-[type=reset],[type=submit],button,html [type=button]
- -webkit-appearance button
-
-[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner
- padding 0
- border-style none
-
-input[type=checkbox],input[type=radio]
- box-sizing border-box
- padding 0
-
-input[type=date],input[type=datetime-local],input[type=month],input[type=time]
- -webkit-appearance listbox
-
-textarea
- overflow auto
- resize vertical
-
-fieldset
- min-width 0
- padding 0
- margin 0
- border 0
-
-legend
- display block
- width 100%
- max-width 100%
- padding 0
- margin-bottom .5rem
- font-size 1.5rem
- line-height inherit
- color inherit
- white-space normal
-
-progress
- vertical-align baseline
-
-[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button
- height auto
-
-[type=search]
- outline-offset -2px
- -webkit-appearance none
-
-[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration
- -webkit-appearance none
-
-::-webkit-file-upload-button
- font inherit
- -webkit-appearance button
-
-output
- display inline-block
-
-summary
- display list-item
- cursor pointer
-
-template
- display none
-
-[hidden]
- display none!important
-
-.md-m-a-0
- margin 0 !important
-
-.md-m-t-0
- margin-top 0 !important
-
-.md-m-r-0
- margin-right 0 !important
-
-.md-m-b-0
- margin-bottom 0 !important
-
-.md-m-l-0
- margin-left 0 !important
-
-.md-m-x-0
- margin-right 0 !important
- margin-left 0 !important
-
-.md-m-y-0
- margin-top 0 !important
- margin-bottom 0 !important
-
-.md-p-a-0
- padding 0 !important
-
-.md-p-t-0
- padding-top 0 !important
-
-.md-p-r-0
- padding-right 0 !important
-
-.md-p-b-0
- padding-bottom 0 !important
-
-.md-p-l-0
- padding-left 0 !important
-
-.md-p-x-0
- padding-right 0 !important
- padding-left 0 !important
-
-.md-p-y-0
- padding-top 0 !important
- padding-bottom 0 !important
-
-.md-m-a-1
- margin 8px !important
-
-.md-m-t-1
- margin-top 8px !important
-
-.md-m-r-1
- margin-right 8px !important
-
-.md-m-b-1
- margin-bottom 8px !important
-
-.md-m-l-1
- margin-left 8px !important
-
-.md-m-x-1
- margin-right 8px !important
- margin-left 8px !important
-
-.md-m-y-1
- margin-top 8px !important
- margin-bottom 8px !important
-
-.md-p-a-1
- padding 8px !important
-
-.md-p-t-1
- padding-top 8px !important
-
-.md-p-r-1
- padding-right 8px !important
-
-.md-p-b-1
- padding-bottom 8px !important
-
-.md-p-l-1
- padding-left 8px !important
-
-.md-p-x-1
- padding-right 8px !important
- padding-left 8px !important
-
-.md-p-y-1
- padding-top 8px !important
- padding-bottom 8px !important
-
-.md-m-a-2
- margin 16px !important
-
-.md-m-t-2
- margin-top 16px !important
-
-.md-m-r-2
- margin-right 16px !important
-
-.md-m-b-2
- margin-bottom 16px !important
-
-.md-m-l-2
- margin-left 16px !important
-
-.md-m-x-2
- margin-right 16px !important
- margin-left 16px !important
-
-.md-m-y-2
- margin-top 16px !important
- margin-bottom 16px !important
-
-.md-p-a-2
- padding 16px !important
-
-.md-p-t-2
- padding-top 16px !important
-
-.md-p-r-2
- padding-right 16px !important
-
-.md-p-b-2
- padding-bottom 16px !important
-
-.md-p-l-2
- padding-left 16px !important
-
-.md-p-x-2
- padding-right 16px !important
- padding-left 16px !important
-
-.md-p-y-2
- padding-top 16px !important
- padding-bottom 16px !important
-
-.md-m-a-3
- margin 24px !important
-
-.md-m-t-3
- margin-top 24px !important
-
-.md-m-r-3
- margin-right 24px !important
-
-.md-m-b-3
- margin-bottom 24px !important
-
-.md-m-l-3
- margin-left 24px !important
-
-.md-m-x-3
- margin-right 24px !important
- margin-left 24px !important
-
-.md-m-y-3
- margin-top 24px !important
- margin-bottom 24px !important
-
-.md-p-a-3
- padding 24px !important
-
-.md-p-t-3
- padding-top 24px !important
-
-.md-p-r-3
- padding-right 24px !important
-
-.md-p-b-3
- padding-bottom 24px !important
-
-.md-p-l-3
- padding-left 24px !important
-
-.md-p-x-3
- padding-right 24px !important
- padding-left 24px !important
-
-.md-p-y-3
- padding-top 24px !important
- padding-bottom 24px !important
-
-.md-m-a-4
- margin 32px !important
-
-.md-m-t-4
- margin-top 32px !important
-
-.md-m-r-4
- margin-right 32px !important
-
-.md-m-b-4
- margin-bottom 32px !important
-
-.md-m-l-4
- margin-left 32px !important
-
-.md-m-x-4
- margin-right 32px !important
- margin-left 32px !important
-
-.md-m-y-4
- margin-top 32px !important
- margin-bottom 32px !important
-
-.md-p-a-4
- padding 32px !important
-
-.md-p-t-4
- padding-top 32px !important
-
-.md-p-r-4
- padding-right 32px !important
-
-.md-p-b-4
- padding-bottom 32px !important
-
-.md-p-l-4
- padding-left 32px !important
-
-.md-p-x-4
- padding-right 32px !important
- padding-left 32px !important
-
-.md-p-y-4
- padding-top 32px !important
- padding-bottom 32px !important
-
-.md-m-a-5
- margin 40px !important
-
-.md-m-t-5
- margin-top 40px !important
-
-.md-m-r-5
- margin-right 40px !important
-
-.md-m-b-5
- margin-bottom 40px !important
-
-.md-m-l-5
- margin-left 40px !important
-
-.md-m-x-5
- margin-right 40px !important
- margin-left 40px !important
-
-.md-m-y-5
- margin-top 40px !important
- margin-bottom 40px !important
-
-.md-p-a-5
- padding 40px !important
-
-.md-p-t-5
- padding-top 40px !important
-
-.md-p-r-5
- padding-right 40px !important
-
-.md-p-b-5
- padding-bottom 40px !important
-
-.md-p-l-5
- padding-left 40px !important
-
-.md-p-x-5
- padding-right 40px !important
- padding-left 40px !important
-
-.md-p-y-5
- padding-top 40px !important
- padding-bottom 40px !important
-
-.md-float-left
- float left !important
-
-.md-float-right
- float right !important
-
-.md-center
- display block !important
- margin-right auto !important
- margin-left auto !important
-
-.md-valign
- display -webkit-box !important
- display -webkit-flex !important
- display -ms-flexbox !important
- display flex !important
- -webkit-box-align center !important
- -webkit-align-items center !important
- -ms-flex-align center !important
- align-items center !important
-
-.md-text-left
- text-align left !important
-
-.md-text-center
- text-align center !important
-
-.md-text-right
- text-align right !important
-
-.md-text-lowercase
- text-transform lowercase !important
-
-.md-text-uppercase
- text-transform uppercase !important
-
-.md-text-capitalize
- text-transform capitalize !important
-
-.md-text-truncate
- overflow hidden
- text-overflow ellipsis
- white-space nowrap
-
-.full-width
- width 100%
+@import "~assets/stylus/style"