newsupernova/lib/web/css/docs/source/_utilities.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//  # Utilities
//  <code>_utilities.less</code> is a reuseable collection of basic Less mixins.
//
// # .lib-clearfix()
//
//  The <code>.lib-clearfix()</code> mixin is a modern solution for healing container`s height which have floated elements. Also its applying prevents top-margins from collapsing.
//

.example-clearfix-container-1 {
    border: 1px solid #f00;
}

.example-clearfix-container-2 {
    .lib-clearfix();
    border: 1px solid #0f0;
}

.example-clearfix-item.left {
    float: left;
}
.example-clearfix-item.right {
    float: right;
}

// Container with floated child elements without <code>.lib-clearfix()</code>
//  ```
//  <div class="example-clearfix-container-1">
//      <div class="example-clearfix-item left">
//          Float left
//      </div>
//      <div class="example-clearfix-item right">
//          Float right
//      </div>
//  </div>
//  ```

// Container with floated child elements with <code>.lib-clearfix()</code>
//  ```
//  <div class="example-clearfix-container-2">
//      <div class="example-clearfix-item left">
//          Float left
//      </div>
//      <div class="example-clearfix-item right">
//          Float right
//      </div>
//  </div>
//  ```

// # .lib-visibility-hidden()
//
//  The <code>.lib-visibility-hidden()()</code> mixin changes element`s visibility to hidden and height to 0.
//

.example-visibility-hidden {
    .lib-visibility-hidden();
}

//
//  This is a block with applied <code>.lib-visibility-hidden()</code> mixin.

//
//  ```
//  <div class="example-visibility-hidden">
//      <div>
//          This is hidden text
//      </div>
//  </div>
//  ```

// # .lib-visually-hidden()
//
//  The <code>.lib-visually-hidden()</code> mixin safely hides the element for accessibility reasons.
//

.example-visually-hidden-1 {
    .lib-visually-hidden();
}

//
//  This is a block with applied <code>.lib-visually-hidden()</code> mixin.

//
//  ```
//  <div class="example-visually-hidden-1">
//      <div>
//          This is hidden text
//      </div>
//  </div>
//  ```

// # .lib-visually-hidden-reset()
//
//  The <code>.lib-visually-hidden-reset()</code> mixin resets hidden visibility and makes element again visible.
//

.example-visually-hidden-2 {
    background: #fdf0d5;
    padding: 5px;
    .lib-visually-hidden();
}

.example-visually-hidden-2 {
    .lib-visually-hidden-reset();
}

//
//  This is a block with applied <code>.lib-visually-hidden-reset()</code> mixin after <code>.lib-visually-hidden()</code> applying.

//
//  ```
//  <div class="example-visually-hidden-2">
//      <div>
//          The text is visible again
//      </div>
//  </div>
//  ```

// # .lib-css()
//
//  The <code>.lib-css()</code> mixin is used to set any css property if there is a value passed to it by a variable. Also <code>.lib-css()</code> can add -ms-, -webkit- and -moz- prefixes if needed.
//

.example-css-container {
    .lib-css(padding, @indent__base);
    .lib-css(background, @secondary__color);
}

//
//  If the variable is set to <code>false</code>, the <code>.lib-css()</code> mixin will add nothing to the code.
//
//  ```
//  <div class="example-css-container">
//      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt..
//  </div>
//  ```
//

.example-css-container-2 {
    .lib-css(background, false);
}

//  ```
//  <div class="example-css-container-2">
//      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt..
//  </div>
//  ```
//

//  # .lib-css() variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value </th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_property</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Any css property</td>
//        </tr>
//        <tr>
//            <th>@_value</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Any css value</td>
//        </tr>
//        <tr>
//            <th>@_prefix</th>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | 1</td>
//            <td>If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property</td>
//        </tr>
//    </table>
//  </pre>

// # .lib-rotate()
//
//  The <code>.lib-rotate()</code> mixin is a wrapper for css3 transform property with rotate value.
//

.example-rotate {
    background: #f00;
    position: absolute;
    height: 20px;
    width: 40px;
    .lib-rotate(
        @_rotation: 45deg;
    );
}

//
//  ```
//  <div class="example-rotate"></div>
//  ```

//  #  .lib-rotate() variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value </th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@rotation</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Transform rotate value, false or ''</td>
//        </tr>
//    </table>
//  </pre>

// # .lib-input-placeholder()
//
//  The <code>.lib-input-placeholder()</code> mixin is used to change placeholder font-color and font-weight.
//

.example-placeholder {
    .lib-input-placeholder(#808080, bold);
}

//
//  ```
//  <input placeholder="Default text" class="example-placeholder" type="text" />
//  ```
//

//  #  .lib-input-placeholder() variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_input-placeholder-color</th>
//            <td class="vars_value">@form-element-input-placeholder__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Input placeholder color</td>
//        </tr>
//        <tr>
//            <th>@_input-placeholder-font-weight</th>
//            <td class="vars_value">@form-element-input__font-weight</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Input placeholder font-weight</td>
//        </tr>
//    </table>
//  </pre>

// # .lib-background-gradient()
//
//  The <code>.lib-background-gradient()</code> mixin is used for applying custom css3 gradient.
//

.example-background-gradient-1 {
    .lib-background-gradient(
        @_background-gradient: true,
        @_background-gradient-direction: vertical,
        @_background-gradient-color-start: #cff,
        @_background-gradient-color-end: #ccf
    );
}

.example-background-gradient-2 {
    .lib-background-gradient(
        @_background-gradient: true,
        @_background-gradient-direction: horizontal,
        @_background-gradient-color-start: #cff,
        @_background-gradient-color-end: #ccf
    );
}

.example-background-gradient-3-wrapper {
    background: #ffc;
    padding: 10px;
}

.example-background-gradient-3 {
    .lib-background-gradient(
        @_background-gradient: true,
        @_background-gradient-direction: horizontal,
        @_background-gradient-color-start: rgba(255,255,255,0),
        @_background-gradient-color-end: #ccf,
        @_background-gradient-color-position: false
    );
}

//
//  ```
//  <div class="example-background-gradient-1">
//      I`m gradient with vertical direction
//  </div>
//  ```
//

//
//  ```
//  <div class="example-background-gradient-2">
//      I`m gradient with horizontal direction
//  </div>
//  ```
//

//
//  ```
//  <div class="example-background-gradient-3-wrapper">
//  <div class="example-background-gradient-3">
//      I`m gradient with horizontal direction from transparent to a color
//  </div>
//  </div>
//  ```
//

//  # .lib-background-gradient() variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_background-gradient</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | true</td>
//            <td>If set to 'true' the element has gradient background</td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-direction</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | horizontal | vertical</td>
//            <td>Gradient direction (horizontal or vertical)</td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-color-start</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient start color (any css color)</td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-color-end</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient end color (any css color) </td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-color-position</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | true</td>
//            <td>Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start</td>
//        </tr>
//    </table>
//  </pre>