Core: updated MD styles to new spec

Author: nolimits4web

src/core/components/button/button-md.less

@@ -12,6 +12,8 @@
     border: none;
     transition-duration: 300ms;
     transform: translate3d(0,0,0);
+    font-weight: 500;
+    letter-spacing: 0.03em;
     &.active-state {
       background: rgba(0,0,0,0.1);
     }
@@ -32,10 +34,10 @@
       border-radius: 36px;
     }
     &.button-outline {
-      border: 1px solid @themeColor;
-      line-height: 34px;
+      border: 2px solid @themeColor;
+      line-height: 32px;
       &.button-big, &.button-big-md {
-        line-height: 46px;
+        line-height: 44px;
       }
     }
     &.button-small, &.button-small-md {
@@ -46,7 +48,7 @@
       letter-spacing: 0.03em;
       &.button-outline {
         border-width: 2px;
-        line-height: 25px;
+        line-height: 24px;
       }
     }
     > i.icon + span,
@@ -104,7 +106,7 @@
           border-left: none;
         }
         &.button-outline {
-          border: 1px solid @themeColor;
+          border: 2px solid @themeColor;
           &:nth-child(n + 2) {
             border-left: none;
           }
@@ -129,7 +131,7 @@
           border-right: none;
         }
         &.button-outline {
-          border: 1px solid @themeColor;
+          border: 2px solid @themeColor;
           &:nth-child(n + 2) {
             border-right: none;
           }

src/core/components/card/card-md.less

@@ -27,6 +27,8 @@
       border: none;
       transition-duration: 300ms;
       transform: translate3d(0,0,0);
+      font-weight: 500;
+      letter-spacing: 0.03em;
       &.active-state {
         background: rgba(0,0,0,0.1);
       }

src/core/components/contacts-list/contacts-list-md.less

@@ -6,7 +6,7 @@
       padding: 0 16px;
       pointer-events: none;
       background: none;
-      color: #888888;
+      color: @themeColor;
       font-weight: 500;
       line-height: 48px;
       height: 48px;

src/core/components/dialog/dialog-md.less

@@ -66,6 +66,8 @@
     border: none;
     transition-duration: 300ms;
     transform: translate3d(0,0,0);
+    letter-spacing: 0.03em;
+    font-weight: 500;
     &.active-state {
       background: rgba(0,0,0,0.1);
     }

src/core/components/fab/fab-md.less

@@ -94,6 +94,10 @@
       padding-left: 48px;
     }
   }
+  .fab-text {
+    font-weight: 500;
+    letter-spacing: 0.03em;
+  }
   // Labels
   .fab-label {
     .elevation(3);

src/core/components/sortable/sortable-ios.less

@@ -2,6 +2,7 @@
   @import (multiple) '../../less/colors-ios.less';
   .sortable-handler {
     width: 35px;
+    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='#c7c7cc'><path d='M0,2V0h22v2H0z'/><path d='M0,7V5h22v2H0z'/><path d='M0,12v-2h22v2H0z'/></svg>");
   }
   .sortable {
     li.sorting {

src/core/components/sortable/sortable-md.less

@@ -2,6 +2,7 @@
   @import (multiple) '../../less/colors-md.less';
   .sortable-handler {
     width: 50px;
+    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'><rect x='0' y='0' width='18' height='2' fill='#c7c7cc'></rect><rect x='0' y='6' width='18' height='2' fill='#c7c7cc'></rect></svg>");
   }
   .sortable {
     li.sorting {

src/core/components/sortable/sortable.less

@@ -7,7 +7,6 @@
     z-index: 10;
     background-repeat: no-repeat;
     background-size: 18px 12px;
-    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='#c7c7cc'><path d='M0,2V0h22v2H0z'/><path d='M0,7V5h22v2H0z'/><path d='M0,12v-2h22v2H0z'/></svg>");
     opacity: 0;
     pointer-events: none;
     cursor: move;

src/core/components/stepper/stepper-md.less

@@ -4,7 +4,7 @@
     height: 36px;
   }
   .stepper-button, .stepper-button-minus, .stepper-button-plus {
-    border: 1px solid @themeColor;
+    border: 2px solid @themeColor;
     color: @themeColor;
     line-height: 34px;
     height: 36px;
@@ -50,19 +50,19 @@
   }
   .stepper-value,
   .stepper-input-wrap {
-    border-top: 1px solid @themeColor;
-    border-bottom: 1px solid @themeColor;
+    border-top: 2px solid @themeColor;
+    border-bottom: 2px solid @themeColor;
   }
-  .stepper .stepper-value {
+  .stepper .stepper-value,
+  .stepper .stepper-input-wrap input {
     color: @themeColor;
-    font-size: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
   }
   .stepper .stepper-input-wrap {
     input {
       height: 100%;
-      text-align: center;
-      color: @themeColor;
-      font-size: 16px;
     }
   }
   .stepper-fill, .stepper-fill-md {

src/core/components/toolbar/toolbar-md.less

@@ -46,6 +46,8 @@
       padding-right: 0;
       font-size: 14px;
       text-transform: uppercase;
+      font-weight: 500;
+      letter-spacing: 0.03em;
     }
     i.icon {
       height: 24px;
@@ -63,8 +65,8 @@
       position: absolute;
       left: 0;
       bottom: 0;
-      height: 3px;
-      background: rgba(255,255,255,0.5);
+      height: 2px;
+      background: #fff;
       transition-duration: 300ms;
       .ltr({
         left: 0;
@@ -103,6 +105,8 @@
       .tabbar-label {
         text-transform: none;
         line-height: 1.2;
+        font-weight: normal;
+        letter-spacing: 0;
       }
     }
   }