@shoprenter/sr-styleguide 1.0.0

package/src/plugins/vuetify/preset/style/scss/components/_input.scss

@@ -0,0 +1,199 @@
+.v-input {
+    input, textarea {
+        border: 0;
+        box-shadow: none;
+
+        &::placeholder {
+            font-style: italic;
+        }
+    }
+
+    &__control {
+        .v-messages {
+            &__message {
+                font-size: 12px;
+                line-height: 16px;
+            }
+        }
+    }
+}
+
+.v-input--selection-controls {
+    width: auto;
+
+    .v-input__control {
+        width: auto;
+    }
+
+    .v-input__slot {
+        width: auto;
+        align-items: center;
+    }
+
+    .v-input__slot > .v-label {
+        flex: 0 0 auto;
+    }
+
+    .v-input--selection-controls__input {
+        transition: none;
+
+        .v-icon {
+            width: auto;
+        }
+    }
+
+    &.v-input--checkbox {
+        padding-top: 0;
+
+        &:not(.v-input--has-state) {
+            .v-icon__component {
+                color: var(--sr-black);
+            }
+
+            &:hover {
+                .v-icon__component {
+                    color: var(--sr-primary);
+                }
+            }
+        }
+
+        &.v-input--is-disabled {
+            .v-icon__component {
+                color: var(--sr-pale-gray);
+            }
+        }
+    }
+}
+
+.v-simple-checkbox {
+    &:not(.v-simple-checkbox--disabled) {
+        color: var(--sr-black);
+
+        &:hover {
+            .v-icon__component {
+                color: var(--sr-primary);
+            }
+        }
+    }
+
+    .v-icon.v-icon--disabled {
+        color: var(--sr-pale-gray) !important;
+    }
+}
+
+.v-radio {
+    &:not(.v-radio--is-disabled) {
+        .v-icon {
+            color: var(--sr-black);
+        }
+
+        &:hover {
+            .v-icon {
+                color: var(--sr-primary);
+            }
+        }
+    }
+
+    &.v-radio--is-disabled {
+        .v-icon {
+            color: var(--sr-pale-gray) !important;
+        }
+    }
+}
+
+.v-text-field--outlined.v-input--is-focused fieldset,
+.v-text-field--outlined.v-input--has-state fieldset {
+    border-width: 1px;
+}
+
+.textarea-save {
+    &__textarea {
+        outline: none;
+        width: 100%;
+        height: 80px;
+        padding: 4px 7px;
+        text-align: left;
+        border-radius: 3px;
+        border: 1px solid var(--sr-pale-gray);
+        background: white;
+
+        &:hover {
+            border: 1px solid $input-hover-border-color;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+}
+
+.input-save {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__input {
+        outline: none;
+        width: 100%;
+        max-width: 120px;
+        padding: 4px 7px;
+        text-align: right;
+        border: 1px solid transparent;
+        border-radius: 3px;
+
+        &:not([disabled]):hover {
+            border: 1px solid $input-focus-border-color;
+        }
+
+        &:not([disabled]):focus {
+            border: 1px solid $input-focus-border-color;
+            background: white;
+        }
+    }
+
+    &__loading-container {
+        min-width: 14px;
+    }
+}
+
+.admin-order-table__body-row:hover .select-save__select,
+.admin-product-table__body-row:hover .input-save__input,
+.admin-product-table__body-row:hover .select-save__select {
+    border: 1px solid #cccccc;
+    background: #fff;
+}
+
+.admin-product-table__model,
+.admin-product-table__model > div {
+    width: 100%;
+}
+
+.admin-product-table__model > div input {
+    max-width: 100%;
+}
+
+@include media-breakpoint-down(sm) {
+    .admin-order-table__body-row .select-save__select,
+    .admin-product-table__body-row .input-save__input,
+    .admin-product-table__body-row .select-save__select {
+        border: 1px solid #cccccc;
+        background: #fff;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .admin-order-table__body-row .select-save__select,
+    .admin-product-table__body-row .select-save__select {
+        min-width: 120px;
+    }
+}
+.v-label {
+    font-size: 12px;
+    margin: unset;
+}
+
+.v-input.v-input--selection-controls {
+    margin-top: 0;
+}

package/src/plugins/vuetify/preset/style/scss/components/_pagination.scss

@@ -0,0 +1,36 @@
+.admin-pagination .row {
+    flex-direction: row-reverse;
+    align-items: center;
+}
+
+.admin-pagination-results {
+    font-size: 13px;
+}
+
+.admin-pagination-results__label {
+    display: none;
+}
+
+.admin-pagination-pages {
+    .v-pagination {
+        justify-content: flex-end;
+    }
+
+    .v-pagination__navigation,
+    .v-pagination__item--active,
+    .v-pagination__item {
+        background: transparent !important;
+        box-shadow: none;
+        border-radius: 0;
+        outline: none;
+    }
+
+    .v-pagination__item {
+        color: var(--sr-dark-grey) !important;
+    }
+
+    .v-pagination__item--active {
+        color: var(--sr-black) !important;
+        font-weight: bold;
+    }
+}

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

@@ -0,0 +1,93 @@
+.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

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

package/src/plugins/vuetify/preset/style/scss/components/_select.scss

@@ -0,0 +1,92 @@
+.v-select__selection--comma {
+    margin: 5px 4px 5px 0;
+}
+
+.select-save {
+    position: relative;
+
+    .select-arrow {
+        position: absolute;
+        right: 20px;
+        top: 0;
+        width: 15px;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        pointer-events: none;
+        color: #546A79;
+
+        .v-icon {
+            margin: 0;
+            font-size: 14px;
+        }
+    }
+
+    &__loading-container {
+        min-width: 14px;
+    }
+    &__select {
+        border: 1px solid transparent;
+        background-color: transparent;
+        box-shadow: unset;
+        border-radius: 0;
+        appearance: none;
+        padding: 4px 25px 4px 10px;
+
+        &:hover {
+            border: 1px solid $input-hover-border-color;
+        }
+
+        &:focus {
+            border: 1px solid $input-focus-border-color;
+            background: white;
+            outline: 0;
+        }
+    }
+    &__option {
+        font-size: 13px;
+        padding: 3px;
+
+        &.active {
+            color: var(--sr-primary);
+            background-color: #f2f8e7;
+        }
+    }
+}
+
+.v-menu__content {
+    max-width: 300px;
+    box-shadow: 0 3px 10px rgba(162, 162, 162, 0.25);
+    border-radius: 3px;
+    border: 1px solid #A7ADAF;
+}
+
+.v-application--is-ltr .v-list-item__action:first-child,
+.v-application--is-ltr .v-list-item__icon:first-child {
+    margin: 6px;
+    min-width: 18px;
+}
+
+.v-list-item--dense .v-list-item__title,
+.v-list-item--dense .v-list-item__subtitle,
+.v-list--dense .v-list-item .v-list-item__title,
+.v-list--dense .v-list-item .v-list-item__subtitle {
+    font-size: 0.8125rem;
+    font-weight: 400;
+}
+
+.v-list-item__title,
+.v-list-item__subtitle {
+    text-overflow: clip;
+    white-space: normal;
+}
+
+@include media-breakpoint-only(md) {
+    .admin-filter-box .v-select__selections input {
+        padding: 0;
+        height: 0;
+    }
+    .admin-filter-box .v-select__selections > span {
+        line-height: 14px;
+    }
+}

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

@@ -0,0 +1,97 @@
+.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

@@ -0,0 +1,41 @@
+.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/components/_table.scss

@@ -0,0 +1,94 @@
+.v-data-table.theme--light {
+    thead {
+        tr {
+            th {
+                font-weight: normal;
+                text-transform: uppercase;
+                background: var(--sr-light-grey);
+                border-bottom: 0 !important;
+                padding: $cell-padding !important;
+                color: var(--sr-link-grey) !important;
+
+                &.active {
+                    color: var(--sr-black) !important;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+
+    tbody {
+        margin-top: 10px;
+
+        tr {
+            border: 1px solid transparent;
+            border-bottom: 1px solid #ECEFF1;
+            margin-bottom: 1px;
+
+            &.selected:not(.v-data-table__expanded__content),
+            &:hover:not(.v-data-table__expanded__content) {
+                background: var(--sr-bg-grey);
+                border: 1px solid #DFE3E7;
+                border-radius: 3px;
+            }
+
+            td {
+                border: 0 !important;
+                padding: $cell-padding !important;
+            }
+        }
+    }
+    .table-select-all-plus {
+        tr:hover {
+            background: unset !important;
+        }
+        td {
+            padding: 0 !important;
+            margin: 0;
+        }
+    }
+
+    .v-data-footer {
+        border-top: 0;
+    }
+}
+
+.admin-data-table__actions {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.admin-bulk-actions-table__bulk-actions,
+.admin-bulk-actions-table__bulk-checkbox {
+    display: flex;
+    align-items: center;
+}
+
+.admin-bulk-actions-table__bulk-checkbox {
+    padding: $cell-padding !important;
+}
+
+.admin-data-table__head-row {
+    border-radius: 3px;
+}
+
+.admin-bulk-actions-table-head {
+    th {
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        z-index: 8;
+    }
+}
+
+.admin-table-sticky-head {
+    margin-bottom: 10px;
+    display: block;
+}
+
+.admin-table-sticky-head.sticky {
+    position: fixed;
+    z-index: 197;
+    top: var(--header-height);
+}

package/src/plugins/vuetify/preset/style/scss/components/_tooltip.scss

@@ -0,0 +1,3 @@
+.v-tooltip__content {
+    font-weight: 500;
+}