Merge pull request #222 from magento-webdev/develop

[UI] MAGETWO-35616: Frontend themes variables inheritance update & documentation update

Author: Momotenko,Natalia(nmomotenko)

app/design/adminhtml/Magento/backend/web/css/styles.less

@@ -12,6 +12,7 @@
 //  ---------------------------------------------
 
 @import 'source/lib/_lib.less'; // Global lib
+@import (reference) 'source/_extends.less';
 @import 'source/_theme.less'; // Theme variables overrides
 @import 'source/_sources.less'; // Theme
 

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less

@@ -311,7 +311,7 @@
 
 .prices-tier {
     &:extend(.abs-reset-list all);
-    .css(background, @sidebar-background);
+    .css(background, @sidebar__background-color);
     padding: @indent__s (.75 * @indent__base);
     margin: @indent__s 0;
     .price-tier_price {

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less

@@ -3,33 +3,29 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@product-name-text-decoration: none;
-@product-name-text-decoration-hover: @link__hover__text-decoration;
+//
+//  Variables
+//  ---------------------------------------------
+
+@product-name-link__color: @text__color;
+@product-name-link__color__active: @text__color;
+@product-name-link__color__hover: @text__color;
+@product-name-link__color__visited: @text__color;
 
+@product-name-link__text-decoration: none;
+@product-name-link__text-decoration__active: @link__hover__text-decoration;
+@product-name-link__text-decoration__hover: @link__hover__text-decoration;
+@product-name-link__text-decoration__visited: @link__hover__text-decoration;
+
+//
 
 //
 //    Common
 //--------------------------------------
 
 & when (@media-common = true) {
 
-.product-name() {
-    font-weight: @font-weight__regular;
-    > a {
-        .link(
-             @_link-color: @text__color,
-             @_link-text-decoration: @product-name-text-decoration,
-             @_link-color-visited: @text__color,
-             @_link-text-decoration-visited: @product-name-text-decoration,
-             @_link-color-hover: @text__color,
-             @_link-text-decoration-hover: @product-name-text-decoration-hover,
-             @_link-color-active: @text__color,
-             @_link-text-decoration-active: @product-name-text-decoration-hover
-         );
-    }
-}
-
-// Product Lists
+//  Product Lists
 .products {
     margin: @indent__l 0;
 }
@@ -47,11 +43,11 @@
         &:extend(.abs-add-box-sizing all);
 
         &-name {
-            .product-name();
+            &:extend(.abs-product-link all);
             display: block;
             margin: @indent__xs 0;
             word-break: break-all;
-            // Non standard for webkit
+            //  Non standard for webkit
             word-break: break-word;
             -webkit-hyphens: auto;
             -moz-hyphens: auto;
@@ -248,8 +244,8 @@
 }
 
 //
-//    Mobile
-//--------------------------------------
+//  Mobile
+//  ---------------------------------------------
 
 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
     .products-list .product {
@@ -302,8 +298,8 @@
 }
 
 //
-//    Desktop
-//--------------------------------------
+//  Desktop
+//  ---------------------------------------------
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
     .page-products .products-grid .product-item { width: 100%/3 }

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_toolbar.less

@@ -94,8 +94,8 @@
 }
 
 //
-//    Mobile
-//--------------------------------------
+//  Mobile
+//  ---------------------------------------------
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
     .page-products .columns {

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/_module.less

@@ -284,7 +284,7 @@
     .opc-block-progress:extend(.abs-add-box-sizing all) {
         margin-bottom: @indent__l;
         > .title {
-            .css(background, @sidebar-background);
+            .css(background, @sidebar__background-color);
             .heading(h3);
             margin: 0;
             padding: 15px 15px @indent__base;
@@ -293,7 +293,7 @@
             }
         }
         > .content {
-            .css(background, @sidebar-background);
+            .css(background, @sidebar__background-color);
             padding: 0 15px @indent__xs;
             .item-content.complete {
                 margin: 0 0 15px;

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_cart.less

@@ -16,7 +16,7 @@
     //  Summary block
     &-summary {
         &:extend(.abs-add-box-sizing all);
-        .css(background, @sidebar-background);
+        .css(background, @sidebar__background-color);
         margin-bottom: @indent__m;
         padding: 1px 15px @indent__m;
         > .title {

app/design/frontend/Magento/blank/Magento_Cms/web/css/source/_widgets.less

@@ -3,7 +3,7 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@widgets-indent-bottom: @indent__base;
+@widgets-indent__bottom: @indent__base;
 
 //
 //    Common
@@ -14,7 +14,7 @@
 .block-static-block,
 .block-cms-link {
     &.widget {
-        .css(margin-bottom, @widgets-indent-bottom);
+        .css(margin-bottom, @widgets-indent__bottom);
         .links & {
             margin-bottom: 0;
         }

app/design/frontend/Magento/blank/Magento_GiftMessage/web/css/source/_module.less

@@ -36,7 +36,7 @@
         &:extend(.abs-reset-image-wrapper all);
     }
     .options-items {
-        .css(background, @sidebar-background);
+        .css(background, @sidebar__background-color);
         display: block;
         margin: @indent__base 0 0;
         padding: @indent__base;

app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less

@@ -34,6 +34,12 @@
 
 @h1__margin-bottom__desktop: @indent__xl;
 
+//
+//  Footer
+//  ---------------------------------------------
+
+@footer__background-color: false;
+
 //
 //    Common
 //--------------------------------------
@@ -136,8 +142,6 @@ body {
 //  Footer
 //--------------------------------------
 
-@footer__background-color: false;
-
 .page-footer {
     margin-top: auto;
     .css(background-color, @footer__background-color);

app/design/frontend/Magento/blank/Magento_Theme/web/css/source/module/_collapsible_navigation.less

@@ -3,7 +3,7 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@collapsible-nav-background: @sidebar-background;
+@collapsible-nav-background: @sidebar__background-color;
 @collapsible-nav-item-hover: @color-gray91;
 @collapsible-nav-color: false;
 @collapsible-nav-current-color: false;