💄 ui(stylus): 规范样式

src/app/pages/pages.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

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

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%
+

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
+

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
+

src/assets/stylus/mixins/mixins.styl

@@ -0,0 +1 @@
+@import "_helper";