MAGETWO-31855: UI improvements

- Rewrite responsive mixins, they should use only one mixin

Author: Natalia Momotenko

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

@@ -1,5 +1,4 @@
 /**
- * @category    design
  * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
  */
 

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

@@ -6,7 +6,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 .bundle-actions {
     &:extend(.abs-box-tocart all);
@@ -103,7 +103,7 @@
 //
 //    Desktop
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .bundle-options-container {
         .legend.title {
             &:extend(.abs-reset-left-margin all);

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

@@ -10,7 +10,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 .product-name() {
     font-weight: @font-weight-base;
@@ -250,7 +250,7 @@
 //    Mobile
 //--------------------------------------
 
-.responsive-max-m (@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
     .products-list .product {
         &-item {
             table-layout: fixed;
@@ -262,7 +262,7 @@
     }
 }
 
-.responsive-min-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-s) {
     .product {
         &-item {
             .products-grid & {
@@ -304,12 +304,12 @@
 //    Desktop
 //--------------------------------------
 
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .page-products .products-grid .product-item { width: 100%/3 }
     .page-products.page-layout-1column .products-grid .product-item { width: 100%/4 }
     .page-products.page-layout-3columns .products-grid .product-item { width: 100%/2 }
 }
-.responsive-min-l(@break) when (@break = @screen-l) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-l) {
     .products-grid .product-item { width: 100%/5 }
     .page-layout-1column .products-grid .product-item { width: 100%/6 }
     .page-layout-3columns .products-grid .product-item { width: 100%/4 }

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

@@ -36,7 +36,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 //
 //    Category view
@@ -389,7 +389,7 @@
 //
 //    Mobile
 //--------------------------------------
-.responsive-max-m(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-m) {
     .catalog-product-view {
         .column.main {
             .vendor-prefix-display(flex);
@@ -417,7 +417,7 @@
 //
 //    Desktop
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .product-info-main,
     .product-options-bottom {
         .box-tocart {
@@ -473,7 +473,7 @@
 //
 //    Desktop large
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-xl) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-xl) {
     .sidebar {
         .product-items {
             .product-item {
@@ -497,7 +497,7 @@
 //
 //    Category page layout
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .product-info-main {
         float: right;
     }
@@ -529,7 +529,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 //
 //    Minimum Advertising Price

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

@@ -9,7 +9,7 @@
 @toolbar-mode-icon-font-size: 24px;
 @toolbar-element-background: @panel-bg;
 
-.responsive-common() {
+& when (@media-common = true) {
 
 .page-products .columns {
     position: relative;
@@ -96,7 +96,7 @@
 //    Mobile
 //--------------------------------------
 
-.responsive-min-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-s) {
     .page-products .columns {
         position: relative;
         z-index: 1;

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

@@ -6,7 +6,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 .block-product-link,
 .block-category-link {
@@ -50,7 +50,7 @@
 //    Mobile
 //--------------------------------------
 
-.responsive-min-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-s) {
     .block.widget .products-grid .product-item,
     .page-layout-1column .block.widget .products-grid .product-item,
     .page-layout-3columns .block.widget .products-grid .product-item { width: 100%/3 }
@@ -60,13 +60,13 @@
 //    Desktop
 //--------------------------------------
 
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .block.widget .products-grid .product-item{ width: 100%/3 }
     .page-layout-1column .block.widget .products-grid .product-item { width: 100%/4 }
     .page-layout-3columns .block.widget .products-grid .product-item { width: 100%/2 }
 }
 
-.responsive-min-l(@break) when (@break = @screen-l) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-l) {
     .block.widget .products-grid .product-item { width: 100%/5 }
     .page-layout-1column .block.widget .products-grid .product-item {
         width: 100%/6;
@@ -90,7 +90,7 @@
     }
 }
 
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .sidebar .block.widget .pager {
         .item:not(.pages-item-next):not(.pages-item-previous) {
             &:extend(.abs-no-display-desktop all);

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

@@ -12,7 +12,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 .block-search {
     margin-bottom: 0;
@@ -155,15 +155,15 @@
 //
 //    Mobile
 //--------------------------------------
-.responsive-max-m(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-m) {
     .block-search {
         .block-content {
             margin-bottom: 0;
         }
     }
 }
 
-.responsive-max-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
     .block-search {
         margin-top: @indent-s-base;
     }
@@ -172,7 +172,7 @@
 //
 //    Desktop
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .block-search {
         position: relative;
         float: right;

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

@@ -6,7 +6,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 //
 //    Shopping cart
@@ -321,7 +321,7 @@
 //
 //    Mobile
 //--------------------------------------
-.responsive-max-m(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-m) {
     .cart {
         &.table-wrapper {
             thead {
@@ -361,7 +361,7 @@
 //
 //    Desktop
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .cart {
         &-container {
             &:extend(.abs-add-clearfix-desktop all);

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

@@ -6,7 +6,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 //
 //    Minicart
@@ -222,13 +222,13 @@
 //
 //    Mobile
 //--------------------------------------
-.responsive-max-m(@break) when (@break = @screen-xs) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-xs) {
     .minicart-wrapper .block-minicart {
         width: 290px;
     }
 }
 
-.responsive-max-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
     .minicart-wrapper {
         margin-top: @indent-s-base;
     }
@@ -237,7 +237,7 @@
 //
 //    Desktop
 //--------------------------------------
-.responsive-min-l(@break) when (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-m) {
     .minicart-wrapper {
         margin-left: 13px;
         .block-minicart {

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

@@ -11,7 +11,7 @@
 //    Common
 //--------------------------------------
 
-.responsive-common() {
+& when (@media-common = true) {
 
 //
 //    One Page Checkout
@@ -361,7 +361,7 @@
 //
 //    Mobile
 //--------------------------------------
-.responsive-max-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-s) {
     .opc-wrapper {
         table.data.table {
             &:extend(.abs-checkout-order-review all);
@@ -372,7 +372,7 @@
 //
 //    Desktop
 //--------------------------------------
-.responsive-min-m(@break) when (@break = @screen-s) {
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-s) {
     .checkout-onepage-index .column.main {
         &:extend(.abs-add-clearfix-desktop-s all);
     }