Merge branch 'MC-5701' of github.com:magento-obsessive-owls/magento2-page-builder into cms-team-1-delivery

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

@@ -3,7 +3,6 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@ccc: #ccc;
 @b3: #b3b3b3;
 
 //
@@ -223,7 +222,6 @@
                 &.active {
                     .navigation-dot-anchor:after {
                         background: @color-very-dark-grayish-orange;
-                        border: none;
                         transition: all .3s;
                     }
 
@@ -261,7 +259,6 @@
 
                     &.active .navigation-dot-anchor:after {
                         background: @color-pagebuilder-darkest-gray;
-                        border: none;
                     }
                 }
             }
@@ -354,7 +351,7 @@
             vertical-align: middle;
             width: 14px;
             button {
-                background: transparent;
+                background: @color-white;
                 border: 1px solid @color-gray;
                 border-radius: 10px;
                 box-shadow: none;
@@ -373,15 +370,13 @@
                 &:active,
                 &:focus,
                 &:not(.primary) {
-                    background: transparent;
                     box-shadow: none;
                 }
             }
 
             &.slick-active {
                 button {
                     background: @color-pagebuilder-darkest-gray;
-                    border: none;
                 }
             }
         }

app/code/Magento/PageBuilder/view/frontend/web/css/source/slick/_slick.less

@@ -1,17 +1,26 @@
-/* Slider */
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+@b3: #b3b3b3;
+
+//
+//  Slick slider styles
+//  _____________________________________________
 
 .slick-slider {
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-touch-action: pan-y;
+    -ms-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     box-sizing: border-box;
     display: block;
     position: relative;
-    -webkit-tap-highlight-color: transparent;
-    -ms-touch-action: pan-y;
     touch-action: pan-y;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 .slick-list {
@@ -89,10 +98,10 @@
 
 .slick-slider .slick-track,
 .slick-slider .slick-list {
-    -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
 
@@ -118,6 +127,8 @@
 
 .slick-prev,
 .slick-next {
+    -ms-transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
     background: rgba(252, 252, 252, .6);
     border: none;
     border-radius: 0;
@@ -131,8 +142,6 @@
     padding: 0;
     position: absolute;
     top: 50%;
-    -webkit-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
     transform: translate(0, -50%);
     width: 60px;
     z-index: 101;
@@ -161,7 +170,6 @@
         opacity: 1;
     }
 
-    // Reset luma styles applied to all buttons
     &:active,
     &:focus,
     &:not(.primary) {
@@ -194,8 +202,8 @@
         vertical-align: middle;
         width: 14px;
         button {
-            background: transparent;
-            border: 1px solid #ccc;
+            background: @color-white;
+            border: 1px solid @color-gray80;
             border-radius: 10px;
             box-shadow: none;
             cursor: pointer;
@@ -207,21 +215,19 @@
             width: 14px;
 
             &:hover {
-                border: 1px solid #b3b3b3;
+                border: 1px solid @b3;
             }
 
             &:active,
             &:focus,
             &:not(.primary) {
-                background: transparent;
                 box-shadow: none;
             }
         }
 
         &.slick-active {
             button {
-                background: #1c1918;
-                border: none;
+                background: @color-pagebuilder-darkest-gray;
             }
         }
     }