feat(Layout): 调整布局组件的样式

jd-opensource · Aug 14, 2018 · 6f6eae2 · 6f6eae2
1 parent 5acbef2
commit 6f6eae2
Show file tree

Hide file tree

Showing 12 changed files with 210 additions and 131 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -67,24 +67,6 @@ view {
   }
 }
 
-// Flex 展示样式
-.page .at-flex {
-  margin-bottom: 40px;
-
-  &__item {
-    color: white;
-    text-align: center;
-
-    &:nth-child(odd) {
-      background-color: #6190e8;
-    }
-
-    &:nth-child(even) {
-      background-color: #78a4f4;
-    }
-  }
-}
-
 .doc-body {
   min-height: calc(100vh - 180px);
   background: #fff;

diff --git a/src/components/card/index.scss b/src/components/card/index.scss
@@ -1,12 +1,14 @@
 @import "../../style/mixins/index.scss";
 @import "../../style/theme/default.scss";
 
+$card-thumb-size: 32px;
+
 .at-card {
-  @include border-thin();
+  @include border-thin($color: $color-border-light, $width: 1PX);
 
   margin: 0 $spacing-h-lg;
-  background-color: $color-white;
-  border-radius: $border-radius-md;
+  background-color: $color-bg;
+  border-radius: $border-radius-lg;
 
   &--full {
     margin: 0;
@@ -18,10 +20,9 @@
   &-header {
     @include display-flex;
     @include align-items(center);
-    @include border-thin-bottom();
+    @include border-thin-bottom($width: 1PX);
 
-    height: 94px;
-    padding: 0 $spacing-h-lg;
+    padding: $spacing-v-md $spacing-h-lg;
     position: relative;
 
     &__title,
@@ -32,9 +33,9 @@
     }
 
     &__thumb {
-      @include flex(0, 0, 34px);
+      @include flex(0, 0, $card-thumb-size);
 
-      height: 34px;
+      height: $card-thumb-size;
       display: block;
       line-height: 0;
       margin-right: $spacing-h-md;
@@ -49,7 +50,7 @@
       @include flex(auto);
 
       display: block;
-      font-size: $font-size-xl;
+      font-size: $font-size-lg;
     }
 
     &__extra {
@@ -62,16 +63,16 @@
   }
 
   &-content {
-    padding: $spacing-v-md $spacing-h-lg;
+    padding: $spacing-v-lg $spacing-h-lg;
 
     &__info {
-      font-size: $font-size-lg;
+      font-size: $font-size-base;
     }
 
     &__note {
-      color: $color-grey-2;
-      font-size: $font-size-base;
       margin-top: $spacing-v-md;
+      color: $color-grey-2;
+      font-size: $font-size-sm;
     }
   }
 }
diff --git a/src/components/float-layout/index.scss b/src/components/float-layout/index.scss
@@ -1,14 +1,18 @@
 @import "../../style/mixins/index.scss";
 @import "../../style/theme/default.scss";
 
+$float-layout-timer: 300ms;
+$float-layout-height-min: 600px;
+$float-layout-height-max: 950px;
+
 .at-float-layout {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   visibility: hidden;
-  transition: visibility 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+  transition: visibility $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1);
 
   &__overlay {
     @include overlay;
@@ -21,39 +25,38 @@
     position: absolute;
     bottom: 0;
     width: 100%;
-    background-color: white;
-    min-height: 600px;
-    max-height: 950px;
+    min-height: $float-layout-height-min;
+    max-height: $float-layout-height-max;
+    background-color: $color-bg;
     transform: translate3d(0, 100%, 0);
-    transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+    transition: transform $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1);
   }
 }
 
 .at-float-layout .layout {
   &-header {
-    height: 92px;
-    background-color: $color-grey-6;
-    padding: 0 20px;
-    line-height: 85px;
     position: relative;
+    padding: $spacing-v-md;
+    line-height: $line-height-zh;
+    background-color: $color-bg-grey;
 
     &__title {
-      font-size: 32px;
-      color: $color-grey-0;
+      color: $color-text-base;
+      font-size: $font-size-lg;
     }
 
     &__icon {
       line-height: 0;
       position: absolute;
       top: 50%;
-      right: 20px;
+      right: $spacing-v-md;
       transform: translate(0, -50%);
     }
   }
 
   &-body {
-    font-size: 32px;
-    padding: 30px 20px 0 20px;
+    font-size: $font-size-base;
+    padding: $spacing-v-md;
   }
 }
 

diff --git a/src/components/grid/index.scss b/src/components/grid/index.scss
@@ -1,22 +1,25 @@
 @import "../../style/mixins/index.scss";
 @import "../../style/theme/default.scss";
 
+$grid-img-size: 80px;
+$gird-img-size-sm: 50px;
+
 .at-grid__flex {
   @include display-flex;
 
   &-item {
     position: relative;
-    @include border-thin-bottom($color-grey-4);
+    @include border-thin-bottom();
 
     &:not(:last-child)::after {
       content: " ";
       position: absolute;
       right: 0;
       top: 0;
-      background-color: $color-grey-4;
+      background-color: $color-border-lighter;
 
       /* prettier-ignore */
-      width: 1PX;
+      width: 1px;
       height: 100%;
     }
   }
@@ -31,9 +34,10 @@
 .at-grid__flex .content-inner {
   &__text {
     flex: 0 0 auto;
-    font-size: 32px;
-    margin-top: 10px;
-    line-height: 1;
+    margin-top: 12px;
+    color: $color-text-base;
+    font-size: $font-size-lg;
+    line-height: $line-height-zh;
   }
 
   &__icon {
@@ -42,14 +46,14 @@
   }
 
   &__img {
-    width: 80px;
-    height: 80px;
+    width: $grid-img-size;
+    height: $grid-img-size;
   }
 }
 
 .at-grid-item--rect .content-inner {
   &__text {
-    margin-left: 10px;
+    margin-left: 12px;
     margin-top: initial;
   }
 }
@@ -71,6 +75,7 @@
       @include display-flex;
       @include align-items(center);
       @include justify-content(center);
+      @include active;
 
       height: 100%;
       flex-direction: column;
@@ -100,8 +105,8 @@
       }
 
       .content-inner__img {
-        width: 60px;
-        height: 60px;
+        width: $gird-img-size-sm;
+        height: $gird-img-size-sm;
       }
     }
   }

diff --git a/src/components/list/index.scss b/src/components/list/index.scss
@@ -4,7 +4,6 @@
 .at-list {
   @include border-thin-top;
 
-  padding-left: $spacing-h-md;
   position: relative;
 
   &::after {
@@ -13,7 +12,7 @@
     width: 100%;
     bottom: 0;
     left: 0;
-    background-color: $color-grey-4;
+    background-color: $color-border-lighter;
 
     /* prettier-ignore */
     height: 1PX;
@@ -22,7 +21,7 @@
   &::before {
     content: " ";
     left: 0;
-    width: 45px;
+    width: $spacing-h-xl;
     z-index: 100;
     position: absolute;
     background-color: $color-white;

diff --git a/src/components/list/item/index.scss b/src/components/list/item/index.scss
@@ -3,12 +3,11 @@
 
 $image-size: 56px;
 $image-distance: 32px;
-$item-horizontal-padding: 30px;
+$item-horizontal-padding: 24px;
 
 @mixin squareImg($size: 56px) {
   width: $size;
   height: $size;
-  background-color: #d8d8d8;
 
   &-info {
     width: 100%;
@@ -20,32 +19,19 @@ $item-horizontal-padding: 30px;
   @include display-flex;
   @include border-thin-bottom;
   @include align-items(center);
+  @include active;
 
-  height: 90px;
-  font-size: 34px;
+  padding: $spacing-v-lg $spacing-h-xl;
   position: relative;
   box-sizing: border-box;
-  color: $color-black-0;
+  color: $color-text-base;
+  font-size: $font-size-lg;
   line-height: $line-height-zh;
-  padding: $spacing-h-md $spacing-v-xl;
 
   &--thumb {
-    padding-left: $image-size + $item-horizontal-padding + $image-distance;
-
     .item-thumb {
+      margin-right: $item-horizontal-padding;
       @include squareImg($image-size);
-
-      position: absolute;
-      top: $spacing-v-md;
-      left: $item-horizontal-padding;
-    }
-  }
-
-  &--multiple {
-    height: 140px;
-
-    .item-thumb {
-      top: 30px;
     }
   }
 
@@ -67,11 +53,13 @@ $item-horizontal-padding: 30px;
     &-title {
       color: inherit;
       font-size: inherit;
+      line-height: $line-height-zh;
     }
 
     &-note {
+      color: $color-grey-2;
       font-size: $font-size-base;
-      color: lighten($color: $color-grey-2, $amount: 10%);
+      line-height: $line-height-zh;
     }
   }
 }
@@ -86,8 +74,8 @@ $item-horizontal-padding: 30px;
 
   &__info {
     color: $color-grey-2;
-    vertical-align: middle;
     font-size: $font-size-lg;
+    vertical-align: middle;
   }
 
   &__icon {