@shoprenter/sr-styleguide 1.0.0 → 1.2.0

package/src/plugins/vuetify/preset/style/scss/pages/_order-list.scss

@@ -1,498 +0,0 @@
-.admin-order-table {
-    background: transparent !important;
-}
-
-.admin-order-table .v-data-table-header tr,
-.admin-order-table__body-row {
-    display: grid;
-}
-
-.admin-order-table__body {
-    background: #fff;
-}
-
-.admin-order-table__status-chip {
-    padding: 0 18px;
-
-    .v-chip__content {
-        display: inline-grid;
-    }
-}
-
-.admin-order-table__status-chip-text {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: block;
-    max-width: 100%;
-}
-
-.admin-order-table__outer-id {
-    font-weight: 600;
-    font-size: 10px;
-    color: var(--sr-secondary-text);
-}
-
-.select-save__select {
-    @include media-breakpoint-up(xl) {
-        width: 100%;
-        max-width: 160px;
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .order-filter-box {
-        .v-input {
-            max-width: 140px;
-        }
-    }
-}
-
-.order-filter-search {
-    .v-input {
-        max-width: 250px;
-    }
-}
-
-.admin-order-table__shipping-method__container {
-    width: 100%;
-}
-
-@include media-breakpoint-down(xs) {
-    .admin-order-table .admin-bulk-actions-table-head tr,
-    .withInvoice.admin-order-table .admin-bulk-actions-table-head tr {
-        grid-template-columns: $order-checkbox-grid-width 1fr;
-        grid-template-areas:
-            "checkbox order";
-    }
-    .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width repeat(2, 1fr);
-        grid-template-areas:
-            "checkbox order total"
-            "checkbox date payment"
-            "checkbox customer shipping"
-            "checkbox status actions";
-    }
-
-    .withInvoice .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width repeat(2, 1fr);
-        grid-template-areas:
-            "checkbox order total"
-            "checkbox date payment"
-            "checkbox customer shipping"
-            "checkbox status invoice"
-            "checkbox status actions";
-    }
-
-    .admin-order-table__invoice,
-    .admin-order-table__payment-method,
-    .admin-order-table__shipping-method {
-        justify-content: flex-end !important;
-        text-align: right;
-    }
-
-    .admin-order-table .v-data-table-header > tr > th {
-        border-top: 0;
-    }
-
-    .admin-order-table .v-data-table-header > tr > th:nth-child(2) {
-        border-right: 0;
-    }
-
-    .admin-order-table .v-data-table-header > tr > th:nth-child(n+3) {
-        display: none;
-    }
-
-    .admin-order-table__order-id,
-    .admin-order-table__order-total {
-        padding-bottom: 0;
-    }
-
-    .admin-order-table__order-total {
-        font-weight: 800;
-        font-size: 14px !important;
-    }
-
-    .admin-order-table__body-row > td {
-        border-top: 0 !important;
-    }
-
-    .admin-bulk-actions-table-head th.admin-order-table__head-bulk-checkbox {
-        border-right: 0 !important;
-    }
-
-    .admin-order-table__customer,
-    .admin-order-table__status,
-    .admin-order-table__order-id,
-    .admin-order-table__checkbox,
-    .admin-order-table__date-added {
-        border-right: 0 !important;
-    }
-
-    .admin-order-table__date-added,
-    .admin-order-table__customer,
-    .admin-order-table__shipping-method,
-    .admin-order-table__payment-method {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-    .admin-order-table__status,
-    .admin-order-table__invoice {
-        padding-top: 0;
-        padding-bottom: 8px;
-    }
-
-    .admin-order-table__head-formattedTotal,
-    .admin-data-table__actions,
-    .admin-order-table__head-shippingMethod,
-    .admin-order-table__head-paymentMethod,
-    .admin-order-table__head-action,
-    .orderlist-customer__email {
-        display: none !important;
-    }
-
-    td.admin-order-table__status {
-        .select-save__select {
-            border: 1px solid #cccccc;
-            padding-top: 4px;
-            padding-bottom: 4px;
-        }
-    }
-
-    .admin-order-table__customer span,
-    .admin-order-table__customer a,
-    .admin-order-table__shipping-method span,
-    .admin-order-table__payment-method span {
-        display: block;
-        max-height: 34px;
-        overflow: hidden;
-    }
-
-    .admin-order-table__customer span.admin-order-table__customer-link {
-        display: flex;
-        span.v-icon {
-            overflow: unset;
-        }
-
-        .sr-admin-line-clamp {
-            display: block;
-            display: -webkit-box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-height: 100%;
-            word-break: break-word;
-            -webkit-box-orient: vertical;
-        }
-    }
-
-    .admin-order-table__invoice,
-    .admin-order-table__shipping-method,
-    .admin-order-table__order-total,
-    .admin-order-table__payment-method,
-    .admin-order-table__customer {
-        border-bottom: 0;
-    }
-}
-
-@include media-breakpoint-only(sm) {
-
-    .order-list-reset-filter-button {
-        grid-column-end: span 2;
-        max-width: 50% !important;
-        justify-self: center;
-    }
-
-    .admin-order-table__status  {
-        border-top: 0;
-    }
-
-    .admin-order-table__customer {
-        padding-bottom: 0;
-    }
-
-    .admin-order-table .admin-bulk-actions-table-head tr,
-    .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(2, minmax(10%, 1fr)) 100px 62px;
-        grid-template-areas:
-            "checkbox order shipping payment total actions"
-            "checkbox date shipping payment total actions"
-            "checkbox customer shipping payment total actions"
-            "checkbox status shipping payment total actions";
-    }
-
-    .withInvoice.admin-order-table .admin-bulk-actions-table-head tr {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(2, minmax(10%, 1fr)) 80px 62px;
-        grid-template-areas:
-            "checkbox order shipping payment invoice total actions"
-            "checkbox date shipping payment invoice total actions"
-            "checkbox customer shipping payment invoice total actions"
-            "checkbox status shipping payment invoice total actions";
-    }
-
-    .withInvoice .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(2, minmax(10%, 1fr)) 80px 62px;
-        grid-template-areas:
-            "checkbox order shipping payment total actions"
-            "checkbox date shipping payment total actions"
-            "checkbox customer shipping payment total actions"
-            "checkbox status shipping invoice total actions";
-    }
-
-    .admin-order-table .v-data-table-header > tr > th:nth-child(3),
-    .admin-order-table .v-data-table-header > tr > th:nth-child(6),
-    .admin-order-table .v-data-table-header > tr > th:nth-child(7) {
-        display: none;
-    }
-
-    .admin-order-table__body-row td.admin-order-table__payment-method {
-        border-bottom: 0;
-    }
-
-    td.admin-order-table__shipping-method span {
-        display: block;
-        word-break: break-word;
-    }
-
-    .admin-order-table__body-row td.admin-order-table__invoice {
-        border-top: 0;
-        align-items: flex-start;
-        justify-content: flex-start;
-    }
-
-    .orderlist-customer__email {
-        display: none;
-    }
-}
-
-@include media-breakpoint-between(sm, md) {
-    .admin-order-table__date-added,
-    .admin-order-table__customer {
-        border-top: 0;
-        padding-top: 0;
-    }
-
-    .admin-order-table__date-added,
-    .admin-order-table__order-id {
-        padding-bottom: 0;
-    }
-}
-
-@include media-breakpoint-down(md) {
-    .admin-order-table__head-name,
-    .admin-order-table__head-dateAdded,
-    .admin-order-table__body-row .admin-order-table__customer .admin-order-table__customer-email {
-        display: none !important;
-    }
-
-    .admin-order-table__date-added,
-    .admin-order-table__order-id {
-        border-bottom: 0;
-    }
-
-    .admin-order-table__order-link {
-        font-weight: 800;
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .admin-order-table__head-status,
-    .admin-order-table__head-invoiceData {
-        display: none !important;
-    }
-
-    .order-filter-search .v-text-field__slot {
-        width: 100%;
-    }
-}
-
-@include media-breakpoint-only(md) {
-    .admin-order-table tr.admin-order-table__head-row:not(.bulk-action) {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(3, minmax(10%, 1fr)) 100px 62px;
-        grid-template-areas:
-            "checkbox order status shipping payment total actions";
-    }
-
-    .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(3, minmax(10%, 1fr)) 100px 62px;
-        grid-template-areas:
-            "checkbox order status shipping payment total actions"
-            "checkbox date status shipping payment total actions"
-            "checkbox customer status shipping payment total actions";
-    }
-
-    .withInvoice.admin-order-table .admin-bulk-actions-table-head tr:not(.bulk-action) {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(3, minmax(10%, 1fr)) 60px 100px 62px;
-        grid-template-areas:
-            "checkbox order status shipping payment invoice total actions";
-    }
-
-    .withInvoice .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width 150px repeat(3, minmax(10%, 1fr)) 60px 100px 62px;
-        grid-template-areas:
-            "checkbox order status shipping payment invoice total actions"
-            "checkbox date status shipping payment invoice total actions"
-            "checkbox customer status shipping payment invoice total actions";
-    }
-
-    .admin-order-table .v-data-table-header > tr > th:nth-child(3),
-    .admin-order-table .v-data-table-header > tr > th:nth-child(7) {
-        display: none;
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .admin-bulk-actions-table-head tr,
-    .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width 105px repeat(5, 1fr) 105px 62px;
-        grid-template-areas: "checkbox order customer status shipping payment date total actions";
-    }
-
-    .withInvoice.admin-order-table .admin-bulk-actions-table-head tr,
-    .withInvoice .admin-order-table__body-row {
-        grid-template-columns: $order-checkbox-grid-width 105px repeat(5, 1fr) 60px 105px 62px;
-        grid-template-areas: "checkbox order customer status shipping payment date invoice total actions";
-    }
-}
-
-.admin-order-table .admin-bulk-actions-table-head tr.bulk-action,
-.withInvoice.admin-order-table .admin-bulk-actions-table-head tr.bulk-action {
-    display: grid;
-    grid-template-columns: $order-checkbox-grid-width 1fr;
-    grid-template-areas: "checkbox bulk";
-}
-
-.admin-order-table__order-link {
-    font-size: 14px;
-    font-weight: 700;
-}
-
-.admin-order-table__actions-btn {
-    .v-icon.v-icon {
-        width: 20px !important;
-        height: 20px !important;
-    }
-}
-
-.admin-order-table tr.admin-order-table__head-row {
-    display: grid;
-}
-
-.admin-order-table .v-data-table-header th {
-    width: auto !important;
-    min-width: auto !important;
-}
-
-.orderlist-customer__email,
-.admin-order-table__body-row td {
-    overflow-wrap: break-word;
-}
-
-.admin-order-table__body-row td {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.admin-order-table__bulk-checkbox {
-    grid-area: checkbox;
-}
-
-.admin-order-table__bulk-actions {
-    grid-area: bulk;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(1),
-.admin-order-table__checkbox {
-    grid-area: checkbox;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(2),
-.admin-order-table__order-id {
-    grid-area: order;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(3),
-.admin-order-table__customer {
-    grid-area: customer;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(4),
-.admin-order-table__status {
-    grid-area: status;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(5),
-.admin-order-table__shipping-method {
-    grid-area: shipping;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(6),
-.admin-order-table__payment-method {
-    grid-area: payment;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(7),
-.admin-order-table__date-added {
-    grid-area: date;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(8),
-.admin-order-table__invoice {
-    grid-area: invoice;
-    justify-content: center;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(8),
-.admin-order-table__order-total {
-    grid-area: total;
-}
-
-.admin-order-table .v-data-table-header > tr > th:nth-child(9),
-.admin-order-table__order-actions {
-    grid-area: actions;
-}
-
-.admin-order-table__head-formattedTotal,
-.admin-order-table__order-total {
-    justify-content: flex-end;
-    text-align: right;
-}
-
-.order-list-reset-filter-button {
-    height: 40px !important;
-    width: 100%;
-    max-width: 100%;
-
-    @include media-breakpoint-up(md) {
-        width: auto;
-        height: 30px !important;
-    }
-}
-
-.filter-second-part {
-    & > div {
-
-        @include media-breakpoint-up(lg) {
-            max-width: 195px;
-        }
-
-        @include media-breakpoint-up(sm) {
-            margin: 0 3px;
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .filter-second-part {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-row-gap: 12px;
-        grid-column-gap: 12px;
-    }
-}
-
-@include media-breakpoint-down(xs) {
-    .filter-second-part {
-        grid-template-columns: repeat(1, 1fr);
-    }
-}

package/src/plugins/vuetify/preset/style/scss/pages/_order-preview.scss

@@ -1,83 +0,0 @@
-.order-preview__content {
-    padding: 20px 30px;
-    position: relative;
-}
-
-.order-preview-close {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-}
-
-.order-preview__status-select {
-    max-width: 220px !important;
-}
-
-.order-preview__addresses,
-.order-preview__customer {
-    line-height: 21px;
-}
-
-.order-preview__outer-id {
-    font-size: 18px;
-    font-weight: 300;
-}
-
-.order-preview__product-list {
-    display: flex;
-    width: 100%;
-
-    & > div {
-        padding-top: 8px;
-        padding-bottom: 8px;
-    }
-}
-
-.order-preview__product-list-quantity {
-    flex: 0 0 60px;
-}
-
-.order-preview__product-list-quantity .caption {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    max-width: 60px;
-}
-
-.order-preview__product-list-product {
-    flex: 1 1 auto;
-}
-
-.order-preview__product-list-price {
-    flex: 1 1 100px;
-    text-align: right;
-}
-
-.order-preview__product-list + .order-preview__product-list {
-    .order-preview__product-list-product {
-         border-top: 1px solid #EEEEEE;
-    }
-
-    .order-preview__product-list-price {
-        border-top: 1px solid #EEEEEE;
-    }
-}
-
-.order-preview__summary {
-    background: var(--sr-light-grey);
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding: 15px 25px;
-    margin-left: -30px;
-    margin-right: -30px;
-    font-size: 14px;
-
-    .row + .row {
-        margin-top: 10px;
-    }
-
-    .row:last-child {
-        font-weight: bold;
-        font-size: 15px;
-    }
-}