solarwood components for Magento 2

Page Slice: Default 

<div class="page-slide">
    <div class="container">
        <svg class="icon octagon" role="presentation" focusable="false">
            <title>octagon</title>
            <use xlink:href="/images/icons-sprite.svg#octagon"></use>
        </svg>

    </div>
</div>
 
<div class="page-slide">
    <div class="{{ classStyle }}">
        {{ render '@icon' octagon.icon }}
    </div>
</div>
 
{
  "classStyle": "container",
  "octagon": {
    "icon": {
      "id": "octagon",
      "title": "octagon",
      "class": "octagon",
      "hidden": true
    }
  }
}
  • Content: 
    $page-slice--octagon__size                                   : 325px !default;
$page-slice--octagon__size\@medium                           : 600px !default;
$page-slice--octagon__size\@large                            : 600px !default;
$page-slice--octagon__size\@extra-large                      : 600px !default;
$page-slice--octagon__top                                    : calc(#{$page-slice--octagon__size} * -0.1) !default;
$page-slice--octagon__top\@medium                            : calc(#{$page-slice--octagon__size\@medium} * -0.2) !default;
$page-slice--octagon__top\@large                             : calc(#{$page-slice--octagon__size\@large} * -0.2) !default;
$page-slice--octagon__top\@extra-large                       : calc(#{$page-slice--octagon__size\@extra-large} * -0.2) !default;
$page-slice--octagon__right                                  : calc(#{$page-slice--octagon__size} * -0.3) !default;
$page-slice--octagon__right\@medium                          : calc(#{$page-slice--octagon__size\@medium} * -0.25) !default;
$page-slice--octagon__right\@large                           : calc(#{$page-slice--octagon__size\@large} * -0.25) !default;
$page-slice--octagon__right\@extra-large                     : calc(#{$page-slice--octagon__size\@extra-large} * -0.25) !default;
$page-slice--slice-nav__color                                : $bg-color-base !default;
$page-slice--slice-nav__color\@active                        : $bg-color-base !default;
.page-slice {
    .slice-nav {
        display: none;
        @include mq($screen-m) {
            display: block;
        }
    }
    &__slider {
        position: relative;
        display: flex;

        .width-full {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .slice-nav {
            display: none;
            position: absolute;
            bottom: 0;
            color: #fff;
            list-style: none;
            @include mq($screen-m) {
                display: block;
            }

            li {
                padding-bottom: $spacer--medium;
            }

            a {
                color: $page-slice--slice-nav__color;
                &:hover {
                    text-decoration: none;
                    font-weight: 400;
                    transition: none;
                }
            }

            &--number {
                font-size: $font-size-super-extra-large;
            }

            &--text {
                font-size: $font-size-medium;
            }

            &:hover,
            &.active {
                color: $page-slice--slice-nav__color\@active;
            }

            .octagon {
                display: none;
                position: absolute;
                width: $page-slice--octagon__size;
                height: $page-slice--octagon__size;
                bottom: $page-slice--octagon__top;
                right: $page-slice--octagon__right;
                z-index: 2;

                @include mq($screen-m) {
                    display: block;
                    width: $page-slice--octagon__size\@medium;
                    height: $page-slice--octagon__size\@medium;
                    bottom: $page-slice--octagon__top\@medium;
                    left: $page-slice--octagon__right\@medium;
                }
                @include mq($screen-l) {
                    width: $page-slice--octagon__size\@large;
                    height: $page-slice--octagon__size\@large;
                    bottom: $page-slice--octagon__top\@large;
                    left: $page-slice--octagon__right\@large;
                }
                @include mq($screen-xxxl) {
                    width: $page-slice--octagon__size\@extra-large;
                    height: $page-slice--octagon__size\@extra-large;
                    bottom: $page-slice--octagon__top\@extra-large;
                    left: $page-slice--octagon__right\@extra-large;
                }
                @media screen and (max-height: 820px) {
                    display: none;
                }
            }
        }
    }
}
  • URL: /components/raw/page-slice/_page-slice.scss
  • Filesystem Path: build/components/Slices/page-slice/_page-slice.scss
  • Size: 4.1 KB

There are no notes for this item.