@shoprenter/sr-styleguide 1.0.0 → 1.2.0

package/src/plugins/vuetify/preset/style/scss/components/_quantity-range-input.scss

@@ -1,93 +0,0 @@
-.admin-quantity-range {
-    position: relative;
-    width: 100%;
-    @include media-breakpoint-up(md) {
-        width: auto;
-    }
-
-    &__fieldset {
-        border: 1px solid var(--sr-pale-gray);
-        border-collapse: collapse;
-        border-radius: 3px;
-        background: white;
-        position: absolute;
-        padding-left: 12px;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        transition-duration: 0.3s;
-        transition-property: color, border-width;
-        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-
-        legend {
-            line-height: 11px;
-            padding: 0;
-            transition: width 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-        }
-    }
-
-    &:hover .admin-quantity-range__fieldset {
-        border-color: #A7ADAF;
-    }
-
-    &:focus-within {
-        border-color: #A7ADAF;
-    }
-}
-
-.admin-quantity-range__input {
-    position: relative;
-    display: flex;
-
-    .quantity-input {
-        font-size: 12px;
-        border-radius: 3px;
-        border: none;
-        color: $sub-color;
-        padding: 9px 10px 9px 5px;
-        width: 49%;
-        outline: none;
-
-        @include media-breakpoint-up(md) {
-            width: 70px;
-        }
-        margin: 0;
-
-        &:hover,
-        &:focus {
-            box-shadow: none;
-        }
-    }
-
-    .quantity-input-label {
-        color: $sub-color;
-        font-weight: normal;
-        padding-right: 0.5rem;
-        padding-left: 0.5rem;
-        background-color: #fff;
-        position: absolute;
-        pointer-events: none;
-        left: 12px;
-        top: 8px;
-        transition: 300ms ease all;
-
-        &--shrink {
-            transform: translate3d(-8px, -18px, 0) scale(0.75);
-            background: transparent;
-        }
-
-        &--focused {
-            color: var(--sr-primary);
-        }
-    }
-
-    .quantity-divider {
-        position: absolute;
-        left: calc(50% - 10px);
-        top: 50%;
-        font-weight: bold;
-        color: #C5CCD6;
-        transform: translate(-50%, -50%);
-    }
-}

package/src/plugins/vuetify/preset/style/scss/components/_select-all-plus.scss

@@ -1,5 +0,0 @@
-.select-all-plus {
-    &__selected {
-        color: var(--sr-link-grey);
-    }
-}

package/src/plugins/vuetify/preset/style/scss/components/_simple-card.scss

@@ -1,97 +0,0 @@
-.sr-simple-card-link-wrapper {
-    display: block;
-    width: 100%;
-}
-
-.sr-simple-card {
-    box-shadow: 0px 4px 10px rgba(212, 218, 223, 0.1);
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    flex-grow: 0;
-    background-color: #fff;
-    &__icon {
-        background-color: var(--sr-light-grey);
-        min-height: 100px;
-        min-width: 90px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        svg {
-            width: 28px;
-            height: 28px;
-        }
-    }
-    &__info {
-        padding:  0 1rem;
-
-        .v-application  &__info__label,
-        &__label {
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 1;
-            color: var(--sr-black);
-        }
-        &-wrapper {
-            display: flex;
-            align-items: center;
-            .sr-simple-card-count {
-                font-weight: bold;
-                font-size: 16px;
-                line-height: 24px;
-                margin: 0 0.5rem 0 0;
-                background-color: var(--sr-primary);
-                border-radius: 3px;
-                color: #fff;
-                width: 40px;
-                height: 40px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-            .sr-simple-card-info-text {
-                font-weight: normal;
-                font-size: 16px;
-            }
-        }
-    }
-
-    @include media-breakpoint-down(lg) {
-        &__icon {
-            min-width: 80px;
-        }
-        &__info {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            height: 60px;
-            padding: 0 1rem;
-            flex: 0;
-        }
-        &__info__label {
-            min-width: 180px;
-        }
-    }
-
-    @include media-breakpoint-up(md) {
-        &__info__label {
-            padding-bottom: 5px;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        &__icon {
-            min-height: 60px;
-            min-width: 60px;
-        }
-        &__info {
-            flex: 1;
-        }
-    }
-    @include media-breakpoint-down(xs) {
-        &__info__label {
-            display: none;
-        }
-    }
-}

package/src/plugins/vuetify/preset/style/scss/components/_sticky-header.scss

@@ -1,41 +0,0 @@
-.sticky-header {
-    &__wrapper {
-        background-color: var(--sr-black);
-        color: #fff;
-        position: fixed;
-        top: 0;
-        height: var(--header-height);
-        left: var(--header-height);
-        width: calc(100% - var(--header-height));
-        z-index: 200;
-        visibility: hidden;
-
-        @include media-breakpoint-down(xs) {
-            padding-right: 20px;
-        }
-
-        @include media-breakpoint-up(md) {
-            left: var(--sidebar-width);
-            width: calc(100% - var(--sidebar-width));
-        }
-
-        opacity: 0;
-        transform: translateY(-20px);
-        transition: all .3s ease;
-
-        &.sticky-header--visible {
-            visibility: visible;
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-}
-
-.admin-menu-minified ~ .admin-page__body {
-    .sticky-header__wrapper {
-        @include media-breakpoint-up(md) {
-            left: var(--sidebar-small-width);
-            width: calc(100% - var(--sidebar-small-width));
-        }
-    }
-}

package/src/plugins/vuetify/preset/style/scss/pages/_apps.scss

@@ -1,99 +0,0 @@
-.admin-applist-category-card {
-    display: flex;
-    border-radius: 3px;
-    box-shadow: 0 4px 10px rgba(212, 218, 223, 0.1);
-    cursor: pointer;
-    position: relative;
-    &:after {
-        content: "";
-        display: none;
-        border-radius: 3px;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        border: 2px solid transparent;
-    }
-
-    &__icon {
-        background: var(--sr-light-grey);
-        width: 80px;
-        height: 80px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    &__content {
-        width: 230px;
-        height: 80px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        background: #fff;
-        padding: 16px 49px 16px 20px;
-
-     &__text {
-         color: var(--sr-anchor);
-         font-size: 16px;
-         line-height: 24px;
-         font-weight: 400;
-     }
-
-    }
-    &:hover {
-        .admin-applist-category-card__content__text {
-            color: var(--sr-hover-green);
-        }
-    }
-    &.active-card {
-        &:after {
-            border: 2px solid #818E9E;
-            display: block;
-        }
-        box-shadow: 0px 4px 10px rgba(212, 218, 223, 0.1);
-        border-radius: 3px;
-
-        .admin-applist-category-card__content {
-            &__text {
-                color: var(--sr-black);
-            }
-        }
-
-        .admin-applist-category-card__icon {
-            path {
-                stroke: var(--sr-black);
-            }
-        }
-    }
-}
-
-.app-list-skeleton-wrapper {
-    margin-top: 70px;
-}
-
-@include media-breakpoint-down(md) {
-    .app-cards {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .admin-applist-category-card__icon {
-        flex-shrink: 0;
-    }
-
-    .admin-applist-category-card__content {
-        width: 100%;
-    }
-}
-@include media-breakpoint-down(xs) {
-    .app-cards {
-        grid-template-columns: 1fr;
-        margin: 0 20px;
-    }
-
-    .app-list-subtitle {
-        margin-left: 20px;
-        margin-right: 20px;
-    }
-}

package/src/plugins/vuetify/preset/style/scss/pages/_campaign.scss

@@ -1,30 +0,0 @@
-.campaign-actual {
-    .campaign-head {
-        &__row-1 {
-            font-size: 35px;
-            line-height: 35px;
-        }
-        &__row-2 {
-            font-size: 50px;
-        }
-    }
-
-    .campaign-card {
-        &__content {
-            height: 100%
-        }
-        &__order-button {
-            position: absolute;
-            bottom: 30px;
-            left: 0;
-            width: 100%;
-
-        }
-        &__save-text {
-            position: absolute;
-            bottom: 100px;
-            left: 0;
-            width: 100%;
-        }
-    }
-}