Merge pull request #235 from magento-webdev/MAGETWO-44595

[WebDev] MAGETWO-44595 - Fixed Inconsistent use of Framework utilities
magento · Dec 10, 2015 · b5bfc54 · b5bfc54
2 parents 32ec76e + 5eef693
commit b5bfc54
Show file tree

Hide file tree

Showing 36 changed files with 1,965 additions and 1,557 deletions.
diff --git a/lib/web/css/docs/actions-toolbar.html b/lib/web/css/docs/actions-toolbar.html
diff --git a/lib/web/css/docs/breadcrumbs.html b/lib/web/css/docs/breadcrumbs.html
diff --git a/lib/web/css/docs/buttons.html b/lib/web/css/docs/buttons.html
diff --git a/lib/web/css/docs/components.html b/lib/web/css/docs/components.html
diff --git a/lib/web/css/docs/docs.css b/lib/web/css/docs/docs.css
diff --git a/lib/web/css/docs/docs.html b/lib/web/css/docs/docs.html
diff --git a/lib/web/css/docs/dropdowns.html b/lib/web/css/docs/dropdowns.html
diff --git a/lib/web/css/docs/forms.html b/lib/web/css/docs/forms.html
diff --git a/lib/web/css/docs/icons.html b/lib/web/css/docs/icons.html
diff --git a/lib/web/css/docs/index.html b/lib/web/css/docs/index.html
diff --git a/lib/web/css/docs/layout.html b/lib/web/css/docs/layout.html
diff --git a/lib/web/css/docs/lib.html b/lib/web/css/docs/lib.html
diff --git a/lib/web/css/docs/loaders.html b/lib/web/css/docs/loaders.html
diff --git a/lib/web/css/docs/messages.html b/lib/web/css/docs/messages.html
diff --git a/lib/web/css/docs/pages.html b/lib/web/css/docs/pages.html
diff --git a/lib/web/css/docs/popups.html b/lib/web/css/docs/popups.html
diff --git a/lib/web/css/docs/rating.html b/lib/web/css/docs/rating.html
diff --git a/lib/web/css/docs/resets.html b/lib/web/css/docs/resets.html
diff --git a/lib/web/css/docs/responsive.html b/lib/web/css/docs/responsive.html
diff --git a/lib/web/css/docs/sections.html b/lib/web/css/docs/sections.html
diff --git a/lib/web/css/docs/source/_utilities.less b/lib/web/css/docs/source/_utilities.less
@@ -367,3 +367,66 @@
 //        </tr>
 //    </table>
 //  </pre>
+
+// # .lib-url-check()
+//
+//  The <code>.lib-url-check()</code> mixin wraps passed value with 'url( ... )' and returns <code>@lib-url-check-output</code> variable. Can be used with <code>.lib-css()</code> mixin.
+//
+
+.example-url-check {
+    //  Set image path variable
+    @_icon-image: '/images/test.png';
+
+    //  "Call" the mixin
+    .lib-url-check(@_icon-image);
+
+    //  Will return url('/images/test.png')
+    .lib-css(background, #eee @lib-url-check-output no-repeat 0 0);
+}
+
+//
+//  If the variable is set to <code>false</code>, the <code>.lib-url-check()</code> will return false.
+//
+//  ```
+//  <div class="example-url-check">
+//      Block with background.
+//  </div>
+//  ```
+//
+
+.example-url-check-false {
+    //  Set usage image path to false
+    @_icon-image: false;
+
+    //  "Call" the mixin
+    .lib-url-check(@_icon-image);
+
+    //  Will return 'false' and outputs nothing
+    .lib-css(background, #eee @lib-url-check-output no-repeat 0 0);
+}
+
+//  ```
+//  <div class="example-url-check-false">
+//      Block with no background.
+//  </div>
+//  ```
+//
+
+//  # .lib-url-check() variables
+//
+//  <pre>
+//    <table>
+//        <tr>
+//            <th class="vars_head">Mixin variable</th>
+//            <th class="vars_head">Allowed values</th>
+//            <th class="vars_head">Output variable</th>
+//            <th class="vars_head">Comment</th>
+//        </tr>
+//        <tr>
+//            <th>@_path</th>
+//            <td class="vars_value">'' | false | value</td>
+//            <td class="vars_value">@lib-url-check-output</td>
+//            <td>Passed url to wrap in 'url( ... )'. If the 'false' value passed mixin will return 'false'</td>
+//        </tr>
+//    </table>
+//  </pre>
diff --git a/lib/web/css/docs/tables.html b/lib/web/css/docs/tables.html
diff --git a/lib/web/css/docs/tooltips.html b/lib/web/css/docs/tooltips.html
diff --git a/lib/web/css/docs/typography.html b/lib/web/css/docs/typography.html
diff --git a/lib/web/css/docs/utilities.html b/lib/web/css/docs/utilities.html
diff --git a/lib/web/css/docs/variables.html b/lib/web/css/docs/variables.html
diff --git a/lib/web/css/source/components/_modals.less b/lib/web/css/source/components/_modals.less
@@ -59,16 +59,16 @@
     }
 
     .modal-inner-wrap {
-        background-color: @modal__background-color;
-        box-shadow: @modal__box-shadow;
+        .lib-css(background-color, @modal__background-color);
+        .lib-css(box-shadow, @modal__box-shadow);
         opacity: 1;
         pointer-events: auto;
     }
 }
 
 .lib-modal-slide() {
-    left: @modal-slide__first__indent-left;
-    z-index: @modal-slide__z-index;
+    .lib-css(left, @modal-slide__first__indent-left);
+    .lib-css(z-index, @modal-slide__z-index);
 
     &._show {
         .modal-inner-wrap {
@@ -92,9 +92,9 @@
 }
 
 .lib-modal-popup() {
+    .lib-css(z-index, @modal-popup__z-index);
     left: 0;
     overflow-y: auto;
-    z-index: @modal-popup__z-index;
 
     &._show {
         .modal-inner-wrap {
@@ -104,10 +104,13 @@
     }
 
     .modal-inner-wrap {
+        .lib-css(margin, @modal-popup__indent-vertical auto);
+        .lib-css(width, @modal-popup__width);
+        .lib-vendor-prefix-display(flex);
+        .lib-vendor-prefix-flex-direction(column);
         box-sizing: border-box;
         height: auto;
         left: 0;
-        margin: @modal-popup__indent-vertical auto;
         position: absolute;
         right: 0;
         -webkit-transform: translateY(-200%);
@@ -116,9 +119,7 @@
         -webkit-transition-property: -webkit-transform, visibility;
                 transition-property:         transform, visibility;
         transition-timing-function: ease;
-        .lib-vendor-prefix-display(flex);
-        .lib-vendor-prefix-flex-direction(column);
-        width: @modal-popup__width;
+
     }
 }
 
@@ -134,7 +135,7 @@ body {
 //  Modals overlay
 .modals-overlay {
     &:extend(.abs-modal-overlay all);
-    z-index: @overlay__z-index;
+    .lib-css(z-index, @overlay__z-index);
 }
 
 .modal-slide,
@@ -169,12 +170,12 @@ body {
     .modal-header,
     .modal-content,
     .modal-footer {
-        padding: 0 @modal-slide__padding @modal-slide__padding;
+        .lib-css(padding, 0 @modal-slide__padding @modal-slide__padding);
     }
 
     .modal-header {
-        padding-bottom: @modal-slide-header__padding-vertical;
-        padding-top: @modal-slide-header__padding-vertical;
+        .lib-css(padding-bottom, @modal-slide-header__padding-vertical);
+        .lib-css(padding-top, @modal-slide-header__padding-vertical);
     }
 }
 
@@ -204,8 +205,8 @@ body {
     .modal-header,
     .modal-content,
     .modal-footer {
-        padding-left: @modal-popup__padding;
-        padding-right: @modal-popup__padding;
+        .lib-css(padding-left, @modal-popup__padding);
+        .lib-css(padding-right, @modal-popup__padding);
     }
 
     .modal-header,
@@ -215,14 +216,14 @@ body {
     }
 
     .modal-header {
-        padding-bottom: @modal-popup__padding / 2.5;
-        padding-top: @modal-popup__padding;
+        .lib-css(padding-bottom, @modal-popup__padding / 2.5);
+        .lib-css(padding-top, @modal-popup__padding);
     }
 
     .modal-footer {
         margin-top: auto;
-        padding-bottom: @modal-popup__padding;
-        padding-top: @modal-popup__padding;
+        .lib-css(padding-bottom, @modal-popup__padding);
+        .lib-css(padding-top, @modal-popup__padding);
     }
 
     .modal-footer-actions {

diff --git a/lib/web/css/source/lib/_dropdowns.less b/lib/web/css/source/lib/_dropdowns.less
@@ -590,13 +590,13 @@
 
     &:before {
         border: 6px solid;
-        border-color: transparent transparent @_dropdown-list-background transparent;
+        .lib-css(border-color, transparent transparent @_dropdown-list-background transparent);
         z-index: 99;
     }
 
     &:after {
         border: 7px solid;
-        border-color: transparent transparent @_dropdown-list-pointer-border transparent;
+        .lib-css(border-color, transparent transparent @_dropdown-list-pointer-border transparent);
         z-index: 98;
     }
 }

diff --git a/lib/web/css/source/lib/_grids.less b/lib/web/css/source/lib/_grids.less
@@ -43,6 +43,7 @@
     @end-column: false
 ) when (isnumber(@span)) and (isnumber(@total-columns)) and not (isnumber(@end-column)) {
     @showgutter: false;
+
     .lib-column(@showgutter);
     .lib-span(@span, @total-columns);
 }
@@ -53,6 +54,7 @@
     @end-column: false
 ) when (isnumber(@span)) and (isnumber(@total-columns)) and (@end-column = true) {
     @showgutter: false;
+
     .lib-column(@showgutter);
     .lib-span(
         @span,
@@ -66,6 +68,7 @@
     @end-column
 ) when (isnumber(@span)) and not (isnumber(@end-column)) {
     @showgutter: false;
+
     .lib-column(@showgutter);
     .lib-span(@span);
 }
@@ -75,6 +78,7 @@
     @end-column
 ) when (isnumber(@span)) and ( @end-column = true ) {
     @showgutter: false;
+
     .lib-column(@showgutter);
     .lib-span(@span);
     .lib-end-column();
@@ -101,6 +105,7 @@
     @end-column: false
 ) when (isnumber(@span)) and (isnumber(@total-columns)) {
     @showgutter: false;
+
     .lib-inline-column(@showgutter);
     .lib-span(
         @span,
@@ -114,6 +119,7 @@
     @end-column: false
 ) when (isnumber(@span)) and (@end-column = true) {
     @showgutter: false;
+
     .lib-inline-column(@showgutter);
     .lib-span(
         @span,
@@ -127,6 +133,7 @@
     @end-column
 ) when not (isnumber(@end-column)) {
     @showgutter: false;
+
     .lib-inline-column(@showgutter);
     .lib-span(@span);
 }
@@ -136,6 +143,7 @@
     @end-column
 ) when (@end-column = true) {
     @showgutter: false;
+
     .lib-inline-column(@showgutter);
     .lib-span(@span);
     .lib-inline-end-column();
@@ -173,47 +181,53 @@
     @total-columns: @total-columns
 ) {
     @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
-    padding-left: @calc-column-width;
+
+    .lib-css(padding-left, @calc-column-width);
 }
 
 .lib-post-pad(
     @span,
     @total-columns: @total-columns
 ) {
     @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
-    padding-right: @calc-column-width;
+
+    .lib-css(padding-right, @calc-column-width);
 }
 
 .lib-pre-push(
     @span,
     @total-columns: @total-columns
 ) {
     @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
-    margin-left: @calc-column-width;
+
+    .lib-css(margin-left, @calc-column-width);
 }
 
 .lib-post-push(
     @span,
     @total-columns: @total-columns
 ) {
     @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)+@gutter-width) / @grid-width);
-    margin-right: @calc-column-width;
+
+    .lib-css(margin-right, @calc-column-width);
 }
 
 .lib-post-push-end(
     @span,
     @total-columns: @total-columns
 ) {
     @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width);
-    margin-right: @calc-column-width;
+
+    .lib-css(margin-right, @calc-column-width);
 }
 
 .lib-column-width(
     @span,
     @total-columns: @total-columns
 ) {
     @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)-@gutter-width) / @grid-width);
-    width: @calc-column-width;
+
+    .lib-css(width, @calc-column-width);
 }
 
 .lib-column-gutter(
@@ -228,5 +242,6 @@
     @end-column: false
 ) when not (@end-column) {
     @calc-gutter-width: 100%*(@gutter-width/@grid-width);
-    margin-right: @calc-gutter-width;
+
+    .lib-css(margin-right, @calc-gutter-width);
 }
diff --git a/lib/web/css/source/lib/_icons.less b/lib/web/css/source/lib/_icons.less
@@ -294,23 +294,28 @@
     @_icon-image-position-x,
     @_icon-image-position-y
 ) {
+    .lib-url-check(@_icon-image);
+
+    .lib-css(background-image, @lib-url-check-output); // @lib-url-check-output is a returned variable of .lib-url-check() mixin
+    .lib-css(background-position-x, @_icon-image-position-x);
+    .lib-css(background-position-y, @_icon-image-position-y);
     .lib-css(line-height, @_icon-image-height);
     .lib-css(margin, @_icon-image-margin);
     .lib-css(vertical-align, @_icon-image-vertical-align);
-    background: url(@_icon-image) no-repeat @_icon-image-position-x @_icon-image-position-y;
-    content: '';
-    display: inline-block;
     ._lib-icon-image-size(
-    @_icon-image-width,
-    @_icon-image-height
+        @_icon-image-width,
+        @_icon-image-height
     );
+    background-repeat: no-repeat;
+    content: '';
+    display: inline-block;
 }
 
 ._lib-icon-image-position(
     @_icon-image-position-x,
     @_icon-image-position-y
 ) {
-    background-position: @_icon-image-position-x @_icon-image-position-y;
+    .lib-css(background-position, @_icon-image-position-x @_icon-image-position-y);
 }
 
 ._lib-icon-image-size(
@@ -326,7 +331,7 @@
     @_icon-sprite-position-y,
     @_icon-sprite-grid
 ) {
-    background-position: -(@_icon-sprite-position-x*@_icon-sprite-grid) -(@_icon-sprite-position-y*@_icon-sprite-grid);
+    .lib-css(background-position, -(@_icon-sprite-position-x*@_icon-sprite-grid) -(@_icon-sprite-position-y*@_icon-sprite-grid));
 }
 
 ._lib-icon-font(

diff --git a/lib/web/css/source/lib/_messages.less b/lib/web/css/source/lib/_messages.less
@@ -239,13 +239,13 @@ and not (@_message-border-style = false) {
 ._lib-message-icon-lateral-border-radius(
     @_message-icon-position
 ) when (@_message-icon-position = left) and not (@message__border-radius = false) and not (@message__border-width = false) {
-    border-radius: (@message__border-radius - @message__border-width) 0 0 (@message__border-radius - @message__border-width);
+    .lib-css(border-radius, (@message__border-radius - @message__border-width) 0 0 (@message__border-radius - @message__border-width));
 }
 
 ._lib-message-icon-lateral-border-radius(
     @_message-icon-position
 ) when (@_message-icon-position = right) and not (@message__border-radius = false) and not (@message__border-width = false) {
-    border-radius: 0 (@message__border-radius - @message__border-width) (@message__border-radius - @message__border-width) 0;
+    .lib-css(border-radius, 0 (@message__border-radius - @message__border-width) (@message__border-radius - @message__border-width) 0);
 }
 
 ._lib-message-icon-inner(