LESS to SASS porting

SnowdogApps · Oct 13, 2017 · fd0ffcc · fd0ffcc
1 parent a7a8f33
commit fd0ffcc
Show file tree

Hide file tree

Showing 108 changed files with 6,860 additions and 6,942 deletions.
diff --git a/Magento_AdvancedCheckout/styles/_module.scss b/Magento_AdvancedCheckout/styles/_module.scss
@@ -52,8 +52,8 @@
             .actions-toolbar {
                 clear: both;
                 @include lib-actions-toolbar(
-                    $_actions-toolbar-actions-position: left,
-                    $_actions-toolbar-margin: 0 0 $indent__base
+                    $_actions-toolbar-actions-position : left,
+                    $_actions-toolbar-margin           : 0 0 $indent__base
                 );
                 @include lib-actions-toolbar-clear-floats();
 
@@ -75,8 +75,8 @@
 }
 
 .block-cart-failed {
-    @extend .abs-shopping-cart-items;
     margin-top: $indent__xl;
+    @extend .abs-shopping-cart-items;
 
     .block-title {
         @include lib-font-size($h2__font-size);
@@ -110,10 +110,10 @@
             .action {
                 &.remove {
                     @include lib-button-icon(
-                        $_icon-font-content: $icon-remove,
-                        $_icon-font-text-hide: true,
-                        $_icon-font-size: 28px,
-                        $_icon-font-margin: 1px 0 0
+                        $_icon-font-content   : $icon-remove,
+                        $_icon-font-text-hide : true,
+                        $_icon-font-size      : 28px,
+                        $_icon-font-margin    : 1px 0 0
                     );
                     @include lib-button-reset();
                 }

diff --git a/Magento_AdvancedSearch/styles/_module.scss b/Magento_AdvancedSearch/styles/_module.scss
diff --git a/Magento_AdvancedSearch/styles/module/_common.scss b/Magento_AdvancedSearch/styles/module/_common.scss
diff --git a/Magento_Banner/styles/_widgets.scss b/Magento_Banner/styles/_widgets.scss
@@ -1,14 +1,18 @@
 .block-banners,
 .block-banners-inline {
     @extend .abs-margin-for-blocks-and-widgets;
+
     .banner-items {
         @extend .abs-reset-list;
     }
+
     .banner-item {
         display: block;
     }
+
     .banner-item-content {
-        margin-bottom: $indent__base;
+        @include lib-css(margin-bottom, $indent__base);
+
         img {
             display: block;
             margin: 0 auto;

diff --git a/Magento_Braintree/styles/_module.scss b/Magento_Braintree/styles/_module.scss
@@ -1,2 +1,190 @@
-@import 'variables';
-@import 'module/common';
+//
+//  Variables
+//  _____________________________________________
+
+$braintree-input-border__color              : $color-gray76;
+
+$braintree-error__color                     : $color-red10;
+$braintree-focus__color                     : $color-blue2;
+$braintree-success__color                   : $color-dark-green1;
+
+$braintree-paypal-icon__height              : 16px;
+$braintree-paypal-icon__width               : 16px;
+$braintree-paypal-account__padding-right    : 50px;
+$braintree-paypal-account__padding-vertical : 15px;
+
+.payment-method-braintree {
+
+    .hosted-date-wrap {
+        @extend .abs-add-clearfix;
+    }
+
+    .hosted-control {
+        @include lib-form-element-input($_type: input-text);
+        position: relative;
+        width: 225px;
+
+        &.braintree-hosted-fields-focused {
+            border-color: $braintree-focus__color;
+        }
+
+        &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) {
+            border-color: $braintree-error__color;
+
+            & ~ .hosted-error {
+                height: auto;
+                opacity: 1;
+            }
+        }
+
+        &.braintree-hosted-fields-valid {
+            border-color: $braintree-success__color;
+        }
+
+        &.hosted-cid {
+            width: 5rem;
+        }
+
+        &.hosted-date {
+            $distance: 50px;
+
+            float: left;
+            margin-bottom: 7px;
+            width: 6rem;
+
+            &:first-of-type {
+                margin-right: $distance;
+
+                &:after {
+                    content: '/';
+                    display: inline;
+                    padding-bottom: inherit;
+                    padding-top: inherit;
+                    position: absolute;
+                    right: -$distance / 2;
+                    top: 5px;
+                }
+            }
+        }
+    }
+
+    .field-tooltip {
+        right: 0;
+    }
+
+    .hosted-error {
+        clear: both;
+        color: $braintree-error__color;
+        font-size: 1.2rem;
+        height: 0;
+        margin-top: 7px;
+        opacity: 0;
+    }
+}
+
+.braintree-paypal-logo {
+    margin-top: $indent__s;
+    text-align: center;
+}
+
+.braintree-paypal-account {
+    padding: $braintree-paypal-account__padding-vertical 0 $braintree-paypal-account__padding-vertical $braintree-paypal-account__padding-right;
+    position: relative;
+
+    @include lib-icon-image(
+        $_icon-image: '../Magento_Braintree/images/paypal-small.png',
+        $_icon-image-position: before,
+        $_icon-image-width: $braintree-paypal-icon__width,
+        $_icon-image-height: $braintree-paypal-icon__height
+    );
+
+    &:before {
+        left: $braintree-paypal-account__padding-right/2 - $braintree-paypal-icon__width/2;
+        margin-top: -$braintree-paypal-icon__height/2;
+        position: absolute;
+        top: 50%;
+    }
+
+    .payment-method-type {
+        font-weight: $font-weight__bold;
+    }
+
+    .payment-method-description {
+        color: $color-gray34;
+    }
+}
+
+.braintree-paypal-fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.action-braintree-paypal-logo {
+    @include lib-button-reset();
+
+    img {
+        margin: 0;
+        width: 114px;
+    }
+}
+
+.payment-method {
+    .payment-method-content {
+        .actions-toolbar {
+            &.braintree-paypal-actions {
+                margin-left: 0;
+            }
+        }
+    }
+}
+
+//  My Account > Stored Payment Methods
+.account {
+    .table {
+        .col {
+            &.paypal-account {
+                img {
+                    vertical-align: middle;
+                }
+
+                + .actions {
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+}
+
+//
+//  Desktop
+//  _____________________________________________
+
+@include min-screen($screen__m) {
+    .payment-method-braintree {
+        .cvv {
+            .field-tooltip {
+                left: 6rem;
+            }
+        }
+    }
+
+    .braintree-paypal-account {
+        border-color: $color-gray80;
+        border-style: solid;
+        border-width: 1px 0;
+        display: inline-block;
+        width: 50%;
+    }
+
+    //  My Account > Stored Payment Methods
+    .account {
+        .table-credit-cards {
+            .col {
+                &.actions {
+                    width: 100px;
+                }
+            }
+        }
+    }
+}
diff --git a/Magento_Braintree/styles/_variables.scss b/Magento_Braintree/styles/_variables.scss
diff --git a/Magento_Braintree/styles/module/_common.scss b/Magento_Braintree/styles/module/_common.scss
diff --git a/Magento_BraintreeTwo/styles/_module.scss b/Magento_BraintreeTwo/styles/_module.scss
diff --git a/Magento_BraintreeTwo/styles/module/_common.scss b/Magento_BraintreeTwo/styles/module/_common.scss