MAGETWO-32274: Base Styles

- CR Updates

Author: Oleg Zinoviev

app/design/adminhtml/Magento/backend/web/css/source/_alerts.less

@@ -28,15 +28,6 @@
     > .message:last-child {
         margin-bottom: 0;
     }
-    &.license {
-        //  License message in view\adminhtml\checker\reminder.phtml
-        font-size: 20px;
-        line-height: 1.2;
-        margin: 20px auto;
-        max-width: 1300px;
-        min-width: 960px;
-        padding: 0 20px;
-    }
 }
 
 .message {
@@ -52,9 +43,8 @@
         border: 0;
         font-family: @icon-font-admin-name;
         font-size: @alert__font-size;
-        font-style: normal;
-        font-weight: normal;
-        -webkit-font-smoothing: antialiased;
+        font-style: @font-style-regular;
+        font-weight: @font-weight-regular;
         height: auto;
         left: 1.9rem;
         line-height: inherit;
@@ -70,145 +60,22 @@
         padding-left: 5rem;
         &:before {
             color: @alert-icon__info__color;
-            content: '\e61a';
+            content: @icon-info;
         }
     }
     &-error,
     &.error {
         padding-left: 5rem;
         &:before {
             color: @alert-icon__error__color;
-            content: '\e623';
+            content: @icon-error;
         }
     }
     &.success {
         padding-left: 5rem;
         &:before {
             color: @alert-icon__success__color;
-            content: '\e62d';
-        }
-    }
-}
-
-.messages-inbox {
-    float: right;
-}
-
-.messages-inbox .critical {
-    color: @color-phoenix-down;
-}
-
-//
-//  System Messages
-//  ---------------------------------------------
-
-.message-system {
-    padding: 0;
-    &:before {
-        display: none;
-    }
-    .message-inner {
-        margin: 0 auto;
-        max-width: 1300px;
-        min-width: 960px;
-        position: relative;
-        &:before {
-            background: none;
-            border: 0;
-            color: #6e685e;
-            content: '\e006'; //  Notification icon
-            font-family: 'MUI-Icons';
-            font-size: 16px;
-            -webkit-font-smoothing: antialiased;
-            font-style: normal;
-            font-weight: normal;
-            height: auto;
-            left: 8px;
-            margin-top: -10px;
-            position: absolute;
-            speak: none;
-            text-shadow: none;
-            top: 50%;
-            width: auto;
-        }
-    }
-    .message-content {
-        padding: 10px 26px 10px 32px;
-    }
-}
-
-//
-//  No-javaScript-Enabled message
-//  ---------------------------------------------
-
-.message-noscript {
-    background: #ff9;
-    border: 0;
-    box-shadow: 0 1px 2px #46433d;
-    padding: 0;
-    z-index: 994;
-    &:before {
-        content: '';
-    }
-    .message-content {
-        margin: 0 auto;
-        max-width: 1300px;
-        min-width: 960px;
-        padding: 3px 0;
-        position: relative;
-        text-align: center;
-        &:before {
-            background: none;
-            border: 0;
-            color: #6e685e;
-            content: '\e006'; //  Notification icon
-            font-family: 'MUI-Icons';
-            font-size: 32px;
-            -webkit-font-smoothing: antialiased;
-            font-style: normal;
-            font-weight: normal;
-            height: auto;
-            position: relative;
-            speak: none;
-            text-shadow: none;
-            vertical-align: middle;
-            width: auto;
-        }
-    }
-}
-
-.message-demo-mode {
-    background: #d75f07;
-    border: 0;
-    box-shadow: 0 1px 2px #46433d;
-    color: @color-white;
-    padding: 5px 0;
-    text-align: center;
-    z-index: 993;
-    &:before {
-        content: '';
-    }
-    .message-content {
-        margin: 0 auto;
-        max-width: 1300px;
-        min-width: 960px;
-        position: relative;
-        text-align: center;
-        &:before {
-            background: none;
-            border: 0;
-            content: '\e006'; //  Notification icon
-            font-family: 'MUI-Icons';
-            font-size: 16px;
-            -webkit-font-smoothing: antialiased;
-            font-style: normal;
-            font-weight: normal;
-            height: auto;
-            position: relative;
-            speak: none;
-            text-shadow: none;
-            vertical-align: middle;
-            width: auto;
+            content: @icon-check-mage;
         }
     }
 }

app/design/adminhtml/Magento/backend/web/css/source/_buttons.less

@@ -17,7 +17,7 @@
 @button-base__bg-color: @color-gray89;
 
 @button-primary__color: @color-white;
-@button-primary__bg-color: @color-prime;
+@button-primary__bg-color: @color-phoenix;
 
 @button-secondary__color: @color-white;
 @button-secondary__bg-color: @color-brownie;
@@ -151,12 +151,12 @@
 //  ---------------------------------------------
 
 .action-reset {
-    background-color: rgba(0, 0, 0, 0);
-    border-color: rgba(0, 0, 0, 0);
+    background-color: transparent;
+    border-color: transparent;
     color: @color-gray20;
     &:hover,
     &:active {
-        background-color: rgba(0, 0, 0, 0);
+        background-color: transparent;
     }
 }
 

app/design/adminhtml/Magento/backend/web/css/source/_extend.less

@@ -29,16 +29,7 @@ button {
     &:after {
         content: '*';
         color: @validation-color;
-        font-weight: normal;
-        margin-left: 3px;
-    }
-}
-
-.validation-symbol-light {
-    &:after {
-        content: '*';
-        color: @validation-color-light;
-        font-weight: normal;
+        font-weight: @font-weight-regular;
         margin-left: 3px;
     }
 }

app/design/adminhtml/Magento/backend/web/css/source/_icons.less

@@ -3,23 +3,44 @@
 //  * See COPYING.txt for license details.
 //  */
 
+//
+//  Variables
+//  _____________________________________________
+
+//
+//  Icons
+//  ---------------------------------------------
+
+@icon-info: '\e61a';
+@icon-error: '\e632';
+@icon-check-mage: '\e62d';
+
+//
 //  Admin Theme Icons
+//  ---------------------------------------------
+
 .font-face(
     @family-name: @icon-font-admin-name,
     @font-path: @icon-font-admin-path,
     @font-weight: normal,
     @font-style: normal
 );
 
+//
 //  Blank Theme Icons
+//  ---------------------------------------------
+
 .font-face(
     @family-name: @icon-font-blank-name,
     @font-path: @icon-font-blank-path,
     @font-weight: normal,
     @font-style: normal
 );
 
+//
 //  MUI Icons
+//  ---------------------------------------------
+
 .font-face(
     @family-name: @icon-font-mui-name,
     @font-path: @icon-font-mui-path,
@@ -47,7 +68,7 @@
 }
 
 .icon-info:before {
-    content: '\e61a';
+    content: @icon-info;
 }
 
 .icon-lock:before {
@@ -123,7 +144,7 @@
 }
 
 .icon-check-mage:before {
-    content: '\e62d';
+    content: @icon-check-mage;
 }
 
 .icon-clock:before {
@@ -143,7 +164,7 @@
 }
 
 .icon-error:before {
-    content: '\e632';
+    content: @icon-error;
 }
 
 .icon-help:before {

app/design/adminhtml/Magento/backend/web/css/source/_theme.less

@@ -7,7 +7,6 @@
 //  Colors
 //  ---------------------------------------------
 
-@color-brownie: #514943;
 @color-light-brownie: #676056;
 @color-dark-gray: #808080;
 @color-very-dark-gray: #666;
@@ -39,80 +38,56 @@
 @color-pure-blue: #007bdb;
 @color-dodger-blue: #008bdb;
 @color-green-apple: #79a22e;
+@color-brownie: #514943;
 @color-dark-brown: #4a3f39;
 @color-dark-brownie: #41362f;
 @color-very-dark-gray-black: #303030;
 @color-very-dark-gray-black2: #35302c;
 @color-very-dark-grayish-orange: #373330;
-@color-phoenix-down: #e04f00;
 @color-phoenix: #eb5202;
-@color-phoenix-almost-rise: #ef672f;
-@color-phoenix-rise: #f65405;
 @color-phoenix-brown: #b84002;
 @color-phoenix-brownie: #ae3d01;
 @color-tomato-brick: #e22626;
-@color-strawberry-milkshake: #ee7d7d;
-
-//  Nesting colors
-@color-prime: @color-phoenix;
-@color-tertiary: @color-brownie;
-@color-success: @color-green-apple;
-@color-warning: @color-phoenix-almost-rise;
-@color-failed: @color-tomato-brick;
 
 //
 //  Typography
 //  ---------------------------------------------
 
-//  Focus
-@color-focus: @color-dodger-blue;
-@focus-box-shadow: 0 0 0 1px @color-focus;
-
-//  Disabled
-@opacity-disabled: .7;
-
 //  Font
 @color-base: @color-gray19;
 @font-family-base: 'Open Sans', @font-family-sans-serif;
 @font-family-console: 'Courier New', Courier, monospace;
 @font-size-base: 1.4rem;
 @font-size-small: @font-size-base * .85;
+@font-style-regular: normal;
 @font-weight-light: 300;
 @font-weight-regular: 400;
 @font-weight-semibold: 600;
 @font-weight-bold: 700;
+@line-height-base: 1.4;
 @color-link: @color-pure-blue;
 @color-link-hover: @color-pure-blue;
 
-//  Font Icons
+//  Focus
+@color-focus: @color-dodger-blue;
+@focus-box-shadow: 0 0 0 1px @color-focus;
+
+//  Disabled
+@opacity-disabled: .7;
+
+//  Admin Font Icons
 @icon-font-admin-name: 'UX-Icons';
 @icon-font-admin-path: '@{baseDir}fonts/@{icon-font-admin-name}/@{icon-font-admin-name}';
 
 //  Legacy Font Icons
 @icon-font-blank-name: 'icons-blank-theme';
 @icon-font-blank-path: '@{baseDir}fonts/Blank-Theme-Icons/Blank-Theme-Icons';
-
 @icon-font-mui-name: 'MUI-Icons';
 @icon-font-mui-path: '@{baseDir}fonts/@{icon-font-mui-name}/@{icon-font-mui-name}';
 
-@line-height-base: 1.4;
-@indent-bottom-paragraph: 1em;
-
-//
-//  Structure
-//  ---------------------------------------------
-
-@width-container: 100rem;
-@indent-container: 2rem;
 
 //
 //  Validation
 //  ---------------------------------------------
 
 @validation-color: @color-tomato-brick;
-@validation-color-rgba: rgba(226, 38, 38, .6);
-@validation-bg: #f9d4d4;
-@validation-border: 1px dashed @validation-color;
-@validation-color-light: #f9d4d4; //  For asterisk on <th> elements of grid tables
-
-// Data-table