improve mixins.less

ant-design · May 18, 2017 · 6b026e9 · 6b026e9
1 parent 9cad67c
commit 6b026e9
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 113 deletions.
diff --git a/components/accordion/style/index.less b/components/accordion/style/index.less
@@ -38,12 +38,12 @@
         background-size: contain;
         background-repeat: no-repeat;
         background-position: 50% 50%;
-        .transform(rotate(90deg));
+        transform: rotate(90deg);
       }
 
       &[aria-expanded~="true"] {
         i {
-          .transform(rotate(270deg));
+          transform: rotate(270deg);
         }
       }
     }

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -9,8 +9,7 @@
   min-height: 1.92rem;
   position: relative;
   padding-bottom: @v-spacing-sm;
-  .display-box();
-
+  display: flex;
   flex-direction: column;
   background-color: @fill-base;
 
@@ -21,8 +20,7 @@
   }
 
   &-header {
-    .display-box();
-
+    display: flex;
     align-items: center;
     font-size: @font-size-heading;
     padding: @v-spacing-md @h-spacing-lg;
@@ -61,7 +59,7 @@
     font-size: @font-size-base;
     color: @color-text-caption;
     padding: 0 @h-spacing-lg;
-    .display-box();
+    display: flex;
 
     &-content {
       flex: 1;

diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less
@@ -19,7 +19,7 @@
     height: @icon-size-sm;
     border: 3px solid @color-text-caption;
     .border-radius(@radius-circle);
-    .transform(rotate(0deg));
+    transform: rotate(0deg);
     box-sizing: border-box;
 
     &:after {
@@ -33,7 +33,7 @@
       border-style: solid;
       border-width: 0 3px 3px 0;
       content: '\0020';
-      .transform(rotate(45deg));
+      transform: rotate(45deg);
     }
   }
 

diff --git a/components/flex/style/index.less b/components/flex/style/index.less
@@ -7,103 +7,103 @@
   text-align: left;
   overflow-y: hidden;
   display: flex;
-  .box-align;
+  align-items: center;
 
   &&-dir-row {
-    .flex-direction(row);
+    flex-direction: row;
   }
 
   &&-dir-row-reverse {
-    .flex-direction(row-reverse);
+    flex-direction: row-reverse;
   }
 
   &&-dir-column {
-    .flex-direction(column);
+    flex-direction: column;
   }
 
   &&-dir-column-reverse {
-    .flex-direction(column-reverse);
+    flex-direction: column-reverse;
   }
 
   &&-nowrap {
-    .flex-wrap(nowrap);
+    flex-wrap: nowrap;
   }
 
   &&-wrap {
-    .flex-wrap(wrap);
+    flex-wrap: wrap;
   }
 
   &&-wrap-reverse {
-    .flex-wrap(wrap-reverse);
+    flex-wrap: wrap-reverse;
   }
 
   &&-justify-start {
-    .flex-justify(flex-start);
+    justify-content: flex-start;
   }
 
   &&-justify-end {
-    .flex-justify(flex-end);
+    justify-content: flex-end;
   }
 
   &&-justify-center {
-    .flex-justify(center);
+    justify-content: center;
   }
 
   &&-justify-between {
-    .flex-justify(space-between);
+    justify-content: space-between;
   }
 
   &&-justify-around {
-    .flex-justify(space-around);
+    justify-content: space-around;
   }
 
   &&-align-top {
-    .box-align(flex-start);
+    align-items: flex-start;
   }
 
   &&-align-bottom {
-    .box-align(flex-end);
+    align-items: flex-end;
   }
 
   &&-align-middle {
-    .box-align(center);
+    align-items: center;
   }
 
   &&-align-stretch {
-    .box-align(stretch);
+    align-items: stretch;
   }
 
   &&-align-baseline {
-    .box-align(baseline);
+    align-items: baseline;
   }
 
   &&-align-content-start {
-    .box-align-content(flex-start);
+    align-content: flex-start;
   }
 
   &&-align-content-end {
-    .box-align(flex-end);
+    align-items: flex-end;
   }
 
   &&-align-content-center {
-    .box-align(center);
+    align-items: center;
   }
 
   &&-align-content-between {
-    .box-align(stretch);
+    align-items: stretch;
   }
 
   &&-align-content-around {
-    .box-align(baseline);
+    align-items: baseline;
   }
 
   &&-align-content-stretch {
-    .box-align(baseline);
+    align-items: baseline;
   }
 
   & &-item {
     box-sizing: border-box;
-    .box-flex(1);
+    flex: 1;
 
     margin-left: @h-spacing-md;
     min-width: 20px;

diff --git a/components/input-item/style/index.less b/components/input-item/style/index.less
@@ -48,7 +48,7 @@
 
   .@{inputPrefixCls}-control {
     font-size: @input-font-size;
-    .box-flex(1);
+    flex: 1;
 
     input {
       color: @color-text-base;

diff --git a/components/list/style/index.less b/components/list/style/index.less
@@ -49,7 +49,7 @@
   vertical-align: middle;
   overflow: hidden;
   transition: background-color 200ms;
-  .box-align;
+  align-items: center;
 
   .@{listPrefixCls}-ripple {
     position: absolute;
@@ -71,7 +71,7 @@
 
   &.@{listPrefixCls}-item-top {
     .@{listPrefixCls}-line {
-      .box-align(flex-start);
+      align-items: flex-start;
 
       .@{listPrefixCls}-arrow {
         margin-top: 4px;
@@ -81,13 +81,13 @@
 
   &.@{listPrefixCls}-item-middle {
     .@{listPrefixCls}-line {
-      .box-align(center);
+      align-items: center;
     }
   }
 
   &.@{listPrefixCls}-item-bottom {
     .@{listPrefixCls}-line {
-      .box-align(flex-end);
+      align-items: flex-end;
     }
   }
 
@@ -202,12 +202,12 @@
 
       &-vertical {
         visibility: visible;
-        .transform(rotate(90deg));
+        transform: rotate(90deg);
       }
 
       &-vertical-up {
         visibility: visible;
-        .transform(rotate(270deg));
+        transform: rotate(270deg);
       }
     }
 

diff --git a/components/modal/style/Dialog.less b/components/modal/style/Dialog.less
@@ -27,7 +27,7 @@
     z-index: @modal-zindex;
     -webkit-overflow-scrolling: touch;
     outline: 0;
-    .display-box();
+    display: flex;
 
     align-items: center;
     justify-content: center;

diff --git a/components/modal/style/index.less b/components/modal/style/index.less
@@ -21,11 +21,11 @@
 
   &-button-group-h {
     border-top: @border-width-sm solid @border-color-base;
-    .display-box();
+    display: flex;
 
     .@{modalPrefixClass}-button {
       -webkit-touch-callout: none;
-      .box-flex();
+      flex: 1;
       .button-common();
 
       &:first-child {

diff --git a/components/notice-bar/style/index.less b/components/notice-bar/style/index.less
@@ -10,10 +10,10 @@
   font-size: @font-size-base;
   line-height: @notice-bar-height;
   color: @notice-bar-color;
-  .display-box();
+  display: flex;
 
   &-content {
-    .box-flex();
+    flex: 1;
 
     width: 100%;
     margin: auto @h-spacing-lg;

diff --git a/components/picker/style/index.less b/components/picker/style/index.less
@@ -43,8 +43,8 @@
     background-position: bottom;
     background-size: 100% 1px;
     background-repeat: no-repeat;
-    .display-box;
-    .box-align;
+    display: flex;
+    align-items: center;
     // border-bottom: @border-width-sm solid @border-color-base;
     position: relative;
     .hairline-bottom(@border-color-base);
@@ -67,7 +67,7 @@
   }
 
   &-title {
-    .box-flex(1);
+    flex: 1;
 
     text-align: center;
     color: @color-text-base;

diff --git a/components/radio/style/index.less b/components/radio/style/index.less
@@ -18,7 +18,7 @@
     width: @icon-size-xxs;
     height: @icon-size-xxs;
     box-sizing: border-box;
-    .transform(rotate(0deg));
+    transform: rotate(0deg);
 
     &:after {
       position: absolute;
@@ -31,7 +31,7 @@
       border-style: solid;
       border-width: 0 3px 3px 0;
       content: '\0020';
-      .transform(rotate(45deg));
+      transform: rotate(45deg);
     }
   }
 

diff --git a/components/segmented-control/style/index.less b/components/segmented-control/style/index.less
@@ -4,7 +4,7 @@
 @segment-prefix-cls: am-segment;
 
 .@{segment-prefix-cls} {
-  .display-box;
+  display: flex;
 
   background-color: @fill-base;
   border-radius: @radius-md;
@@ -17,7 +17,7 @@
   }
 
   &-item {
-    .box-flex(1);
+    flex: 1;
 
     display: flex;
     justify-content: center;