Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/old/vendor/magento/magento2-base/lib/web/css/docs/source/ |
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Breadcrumbs
// Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their location within programs, websites or documents.
//
// Breadcrumbs layout with links can be separated by any symbol, for example <code>></code> symbol.
//
// The following markup corresponds to the accessibility demands:
// ```html
// <div class="example-breadcrumbs-1">
// <span class="label" id="breadcrumb-label">You are here:</span>
// <ul class="items" aria-labelledby="breadcrumb-label">
// <li class="item home">
// <a title="Go to Home Page" href="#">Home</a>
// </li>
// <li class="item category1">
// <a title="Category" href="#">Category</a>
// </li>
// <li class="item category2">
// <a title="Category" href="#">Subcategory</a>
// </li>
// <li class="item category3">
// <strong>Products</strong>
// </li>
// </ul>
// </div>
// ```
.example-breadcrumbs-1 {
.lib-breadcrumbs();
}
// # Breadcrumbs variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Global 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>@_breadcrumbs-font-size</th>
// <td>@breadcrumbs__font-size</td>
// <td class="vars_value">@font-size__s</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs font size</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-display</th>
// <td>@breadcrumbs__display</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | inline | block | inline-block</td>
// <td>Breadcrumbs links display property</td>
// </tr>
// <tr>
// <th>@_breadcrumbs__container-margin</th>
// <td>@breadcrumbs__container-margin</td>
// <td class="vars_value"> 0 0 @indent__base</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs items padding</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-padding</th>
// <td>@breadcrumbs__padding</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs items padding</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs - separator symbol</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-separator-symbol</th>
// <td>@breadcrumbs-separator__symbol</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | any symbol</td>
// <td>Breadcrumbs separating symbol</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-separator-color</th>
// <td>@breadcrumbs-separator__color</td>
// <td class="vars_value" nowrap="nowrap">@breadcrumbs-current__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs separating symbol color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-icon-use</th>
// <td>@breadcrumbs-icon__use</td>
// <td class="vars_value">true</td>
// <td class="vars_value">true | false</td>
// <td>Breadcrumbs separating symbol is an icon</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-icon-font-content</th>
// <td>@breadcrumbs-icon__font-content</td>
// <td class="vars_value">@icon-next</td>
// <td class="vars_value">'' | false | icon</td>
// <td>Breadcrumbs separating icon symbol</td>
// </tr>
// <tr>
// <th>@_icon-font</th>
// <td>@breadcrumbs-icon__font</td>
// <td class="vars_value">@icon-font</td>
// <td class="vars_value">'' | false | font</td>
// <td>Breadcrumbs separating icon font</td>
// </tr>
// <tr>
// <th>@_icon-font-size</th>
// <td>@breadcrumbs-icon__font-size</td>
// <td class="vars_value">24px</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs separating icon font size</td>
// </tr>
// <tr>
// <th>@_icon-font-line-height</th>
// <td>@breadcrumbs-icon__font-line-height</td>
// <td class="vars_value">18px</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs separating icon line height</td>
// </tr>
// <tr>
// <th>@_icon-font-color</th>
// <td>@breadcrumbs-icon__font-color</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs separating icon color</td>
// </tr>
// <tr>
// <th>@_icon-font-margin</th>
// <td>@breadcrumbs-icon__font-margin</td>
// <td class="vars_value">0</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs separating icon margin</td>
// </tr>
// <tr>
// <th>@_icon-font-vertical-align</th>
// <td>@breadcrumbs-icon__font-vertical-align</td>
// <td class="vars_value">top</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs separating icon vertical align</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs - current page</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-color</th>
// <td>@breadcrumbs-current__color</td>
// <td class="vars_value">#a3a3a3</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs current page color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-font-weight</th>
// <td>@breadcrumbs-current__font-weight</td>
// <td class="vars_value">@font-weight__regular</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs current page font weight</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-background</th>
// <td>@breadcrumbs-current__background</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs current page background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-border</th>
// <td>@breadcrumbs-current__border</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs current page border</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-gradient</th>
// <td>@breadcrumbs-current__gradient</td>
// <td class="vars_value">false</td>
// <td class="vars_value">true | false</td>
// <td>Breadcrumbs current page have gradient background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-gradient-direction</th>
// <td>@breadcrumbs-current__gradient-direction</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | vertical | horizontal</td>
// <td>Direction of breadcrumbs current page background gradient (if there is any)</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-gradient-color-start</th>
// <td>@breadcrumbs-current__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs current page gradient start color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-current-gradient-color-end</th>
// <td>@breadcrumbs-current__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs current page gradient end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs link</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient</th>
// <td>@breadcrumbs-link__gradient</td>
// <td class="vars_value">false</td>
// <td class="vars_value">true | false</td>
// <td>Breadcrumbs items have gradient background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-direction</th>
// <td>@breadcrumbs-link__gradient-direction</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | vertical | horizontal</td>
// <td>Direction of breadcrumbs item background gradient (if there is any)</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs link - default</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-color</th>
// <td>@breadcrumbs-link__color</td>
// <td class="vars_value">@primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-background</th>
// <td>@breadcrumbs-link__background</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-border</th>
// <td>@breadcrumbs-link__border</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item border</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-text-decoration</th>
// <td>@breadcrumbs-link__text-decoration</td>
// <td class="vars_value">none</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item text decoration</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-start</th>
// <td>@breadcrumbs-link__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item gradient start color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-end</th>
// <td>@breadcrumbs-link__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item gradient end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs link - visited</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-color-visited</th>
// <td>@breadcrumbs-link__visited__color</td>
// <td class="vars_value">@primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item visited color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-background-visited</th>
// <td>@breadcrumbs-link__visited__background</td>
// <td class="vars_value">@breadcrumbs-link__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item visited background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-border-visited</th>
// <td>@breadcrumbs-link__visited__border</td>
// <td class="vars_value">@breadcrumbs-link__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item visited border</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-text-decoration-visited</th>
// <td>@breadcrumbs-link__visited__text-decoration</td>
// <td class="vars_value">none</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item text decoration</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-start-visited</th>
// <td>@breadcrumbs-link__visited__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item visited gradient start color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-end-visited</th>
// <td>@breadcrumbs-link__visited__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item visited gradient end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs link - hover</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-color-hover</th>
// <td>@breadcrumbs-link__hover__color</td>
// <td class="vars_value">@primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item hover color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-background-hover</th>
// <td>@breadcrumbs-link__hover__background</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item hover background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-border-hover</th>
// <td>@breadcrumbs-link__hover__border</td>
// <td class="vars_value">@breadcrumbs-link__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item hover border</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-text-decoration-hover</th>
// <td>@breadcrumbs-link__hover__text-decoration</td>
// <td class="vars_value">underline</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item hover text decoration</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-start-hover</th>
// <td>@breadcrumbs-link__hover__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item hover gradient start color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-end-hover</th>
// <td>@breadcrumbs-link__hover__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item hover gradient end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Breadcrumbs link - active</th>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-color-active</th>
// <td>@breadcrumbs-link__active__color</td>
// <td class="vars_value">@primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item active color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-background-active</th>
// <td>@breadcrumbs-link__active__background</td>
// <td class="vars_value">@breadcrumbs-link__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item active background</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-border-active</th>
// <td>@breadcrumbs-link__active__border</td>
// <td class="vars_value">@breadcrumbs-link__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item active border</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-text-decoration-active</th>
// <td>@breadcrumbs-link__active__text-decoration</td>
// <td class="vars_value">none</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item active text decoration</td>
// </tr>
// <tr>
// <th nowrap="nowrap">@_breadcrumbs-link-gradient-color-start-active</th>
// <td>@breadcrumbs-link__active__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item active gradient start color</td>
// </tr>
// <tr>
// <th>@_breadcrumbs-link-gradient-color-end-active</th>
// <td>@breadcrumbs-link__active__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Breadcrumbs item active gradient end color</td>
// </tr>
// </table>
// </pre>
//
// # Button-styled breadcrumbs with gradient background, border, and no separating symbol
//
// Set values for the following variables to:
//
// hide separating symbol:
// ```css
// @_breadcrumbs-separator-symbol: ''
// ```
// set up links gradient background for default and hover state:
// ```css
// @_breadcrumbs-link-gradient: true,
// @_breadcrumbs-link-gradient-direction: vertical,
// @_breadcrumbs-link-gradient-color-start: #f4f4f4,
// @_breadcrumbs-link-gradient-color-end: #ccc,
// @_breadcrumbs-link-gradient-color-start-hover: #ccc,
// @_breadcrumbs-link-gradient-color-end-hover: #f4f4f4
// ```
// set up current page gradient background:
// ```css
// @_breadcrumbs-current-gradient: true,
// @_breadcrumbs-current-gradient-color-start: #f7b32e,
// @_breadcrumbs-current-gradient-color-end: #ff5501
// ```
// ```html
// <div class="example-breadcrumbs-2">
// <ul class="items">
// <li class="item home">
// <a title="Go to Home Page" href="#">Home</a>
// </li>
// <li class="item category1">
// <a title="Category" href="#">Category</a>
// </li>
// <li class="item category2">
// <a title="Category" href="#">Subcategory</a>
// </li>
// <li class="item category3">
// <strong>Products</strong>
// </li>
// </ul>
// </div>
// ```
.example-breadcrumbs-2 {
.lib-breadcrumbs(
@_breadcrumbs-separator-symbol: '',
@_breadcrumbs-display: inline-block,
@_breadcrumbs-padding: 3px 5px,
@_breadcrumbs-link-border: 1px solid #ccc,
@_breadcrumbs-link-gradient: true,
@_breadcrumbs-link-gradient-direction: vertical,
@_breadcrumbs-link-gradient-color-start: #f4f4f4,
@_breadcrumbs-link-gradient-color-end: #ccc,
@_breadcrumbs-link-gradient-color-start-hover: #ccc,
@_breadcrumbs-link-gradient-color-end-hover: #f4f4f4,
@_breadcrumbs-link-text-decoration-hover: none,
@_breadcrumbs-current-color: #1979c3,
@_breadcrumbs-current-gradient: true,
@_breadcrumbs-current-gradient-color-start: #f7b32e,
@_breadcrumbs-current-gradient-color-end: #ff5501,
@_breadcrumbs-current-border: 1px solid #d04b0a
);
}
// # Breadcrumbs with solid background
//
// Breadcrumbs with solid background and a triangle right on the right side, without separating symbol.
//
// Set values for the following variables to:
//
// hide separating symbol use:
// ```css
// @_breadcrumbs-separator-symbol: ''
// ```
// set up solid background for links for default and hover state:
// ```css
// @_breadcrumbs-link-background: #f4f4f4,
// @_breadcrumbs-link-background-hover: #ccc
// ```
// set up gradient background for current page:
// ```css
// @_breadcrumbs-current-background: #e7e7e7,
// @_breadcrumbs-current-color: #333,
// ```
//
// User can also add customization that was not provided with the breadcrumbs mixin. Here we can add solid arrow right for each link:
// ```html
// <div class="example-breadcrumbs-3">
// <ul class="items">
// <li class="item home">
// <a title="Go to Home Page" href="#">Home</a>
// </li>
// <li class="item category1">
// <a title="Category" href="#">Category</a>
// </li>
// <li class="item category2">
// <a title="Category" href="#">Subcategory</a>
// </li>
// <li class="item category3">
// <strong>Products</strong>
// </li>
// </ul>
// </div>
// ```
.example-breadcrumbs-3 {
.lib-breadcrumbs(
@_breadcrumbs-separator-symbol: '',
@_breadcrumbs-display: inline-block,
@_breadcrumbs-padding: 3px 5px,
@_breadcrumbs-current-background: #e7e7e7,
@_breadcrumbs-current-color: #333,
@_breadcrumbs-link-text-decoration-hover: none,
@_breadcrumbs-link-background: #f4f4f4,
@_breadcrumbs-link-background-hover: #ccc
);
.item a {
position: relative;
margin: 0 11px 0 0;
&:after {
.lib-arrow(right, 12px, #f4f4f4);
content: "";
position: absolute;
display: block;
top: 0;
right: -23px;
}
&:hover:after {
border-color: transparent transparent transparent #ccc;
}
}
}