@shoprenter/sr-styleguide 1.0.0

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

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

@@ -0,0 +1,83 @@
+.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;
+    }
+}