Merge remote-tracking branch 'origin/MAGETWO-44317' into PR-4

Author: Natalia Momotenko

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

@@ -4,105 +4,109 @@
 //  */
 
 //
-//    Common
-//--------------------------------------
+//  Common
+//  _____________________________________________
 
 @toolbar-mode-icon-font-size: 24px;
 @toolbar-element-background: @panel__background-color;
 
 & when (@media-common = true) {
 
-.page-products .columns {
-    position: relative;
-    z-index: 1;
-}
-
-.toolbar {
-    &:extend(.abs-add-clearfix all);
-    &-amount {
-        display: block;
-        line-height: @toolbar-mode-icon-font-size+2;
-        padding: 8px 0 0;
-        margin: 0;
-        vertical-align: middle;
-        .products.wrapper ~ .toolbar & {
-            display: none;
+    .page-products {
+        .columns {
+            position: relative;
+            z-index: 1;
         }
     }
-    &-products {
-        margin-bottom: @indent__xl;
-        text-align: center;
-        padding: 0 @indent__s;
+
+    .toolbar {
         &:extend(.abs-add-clearfix all);
-        .pages {
-            display: none;
-            .products.wrapper ~ & {
-                display: block;
+        &-amount {
+            display: block;
+            line-height: @toolbar-mode-icon-font-size+2;
+            margin: 0;
+            padding: 8px 0 0;
+            vertical-align: middle;
+            .products.wrapper ~ .toolbar & {
+                display: none;
             }
         }
-        .limiter {
-            display: none;
-            .control {
-                display: inline-block;
+        &-products {
+            margin-bottom: @indent__xl;
+            padding: 0 @indent__s;
+            text-align: center;
+            &:extend(.abs-add-clearfix all);
+            .pages {
+                display: none;
+                .products.wrapper ~ & {
+                    display: block;
+                }
+            }
+            .limiter {
+                display: none;
+                .control {
+                    display: inline-block;
+                }
             }
         }
     }
-}
 
-.sorter {
-    padding: 4px 0 0;
-    .products.wrapper ~ .toolbar & {
-        display: none;
-    }
-    &-options {
-        margin: 0 0 0 7px;
-        width: auto;
-    }
-    &-action {
-        vertical-align: top;
-        .lib-icon-font(
+    .sorter {
+        padding: 4px 0 0;
+        .products.wrapper ~ .toolbar & {
+            display: none;
+        }
+        &-options {
+            margin: 0 0 0 7px;
+            width: auto;
+        }
+        &-action {
+            vertical-align: top;
+            .lib-icon-font(
             @icon-arrow-up,
             @_icon-font-size: 28px,
             @_icon-font-line-height: 32px,
             @_icon-font-color: @header-icons-color,
             @_icon-font-color-hover: @header-icons-color-hover,
             @_icon-font-text-hide: true
-        );
-        &.sort-desc:before {
-            content: @icon-arrow-down;
+            );
+            &.sort-desc:before {
+                content: @icon-arrow-down;
+            }
         }
     }
-}
 
-.modes {
-    display: none;
-}
-
-.limiter {
-    &-options {
-        width: auto;
-        margin: 0 5px 0 7px;
-    }
-    &-label {
-        font-weight: 400;
-    }
-    .page-products .toolbar & {
+    .modes {
         display: none;
     }
-}
 
+    .limiter {
+        &-options {
+            width: auto;
+            margin: 0 5px 0 7px;
+        }
+        &-label {
+            font-weight: 400;
+        }
+        .page-products .toolbar & {
+            display: none;
+        }
+    }
 }
 
 //
-//  Mobile
-//  ---------------------------------------------
+//  Desctop
+//  _____________________________________________
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
-    .page-products .columns {
-        position: relative;
-        z-index: 1;
-        padding-top: 0;
+    .page-products {
+        .columns {
+            padding-top: 0;
+            position: relative;
+            z-index: 1;
+        }
     }
+
     .toolbar {
         .products.wrapper ~ & .pages {
             float: left;
@@ -111,19 +115,24 @@
             float: left;
         }
     }
+
     .sorter {
         float: right;
     }
+
     .modes {
-        float: left;
         display: inline-block;
+        float: left;
         margin-right: @indent__base;
+
         .products.wrapper ~ .toolbar & {
             display: none;
         }
+
         &-label {
             &:extend(.abs-visually-hidden-desktop-s all);
         }
+
         &-mode {
             .lib-css(color, @text__color__muted);
             border: 1px solid @border-color__base;
@@ -134,8 +143,8 @@
             padding: 7px 10px;
             text-align: center;
             &:not(.active):hover {
-                background: darken(@toolbar-element-background, 7%);
                 .lib-css(color, @text__color__muted);
+                background: darken(@toolbar-element-background, 7%);
             }
             &:last-child {
                 border-right: 1px solid @border-color__base;
@@ -144,15 +153,19 @@
                 .lib-css(color, @primary__color__light);
             }
             .lib-icon-font(
-                @icon-grid,
-                @_icon-font-size: @toolbar-mode-icon-font-size,
-                @_icon-font-text-hide: true
+            @icon-grid,
+            @_icon-font-size: @toolbar-mode-icon-font-size,
+            @_icon-font-text-hide: true,
+            @_icon-font-color: @text__color__muted,
+            @_icon-font-color-hover: @text__color__muted
             );
         }
     }
+
     .mode-list {
         .lib-icon-font-symbol(@icon-list);
     }
+
     .limiter {
         float: right;
         .products.wrapper ~ .toolbar & {