@shoprenter/sr-styleguide 1.0.0 → 1.2.0

package/src/plugins/vuetify/preset/locale/sr-en.js

@@ -6,5 +6,6 @@ export default {
     no: 'No',
     clearAll: 'Clear all',
     selectAll: 'Select all',
-    help: 'Help'
+    help: 'Help',
+    pleaseSelect: 'Please select'
 }

package/src/plugins/vuetify/preset/locale/sr-hu.js

@@ -6,5 +6,6 @@ export default {
     no: 'Nem',
     clearAll: 'Mindet töröl',
     selectAll: 'Mindet választ',
-    help: 'Segítség'
+    help: 'Segítség',
+    pleaseSelect: 'Kérlek válassz'
 }

package/src/plugins/vuetify/preset/style/scss/_admin-menu.scss

@@ -8,17 +8,3 @@
   font-size: $font-size-root;
 }
 
-/* new admin layout design */
-
-/* src/Aurora/AdminBundle/Resources/front-end/adminMenu/assets/scss/layout/_layout.scss */
-
-.page-layout--slim {
-  margin: 0 auto 70px auto;
-  padding: 0 30px;
-  @include media-breakpoint-up(sm) {
-    max-width: $container-slim-width-sm;
-  }
-  @include media-breakpoint-up(md) {
-    max-width: $container-slim-width;
-  }
-}

package/src/plugins/vuetify/preset/style/scss/_components.scss

@@ -1,19 +1,7 @@
-@import "./components/actionbar";
-@import "./components/block";
-@import "./components/breadcrumb";
-@import "./components/buttons";
 @import "./components/input";
-@import "./components/pagination";
 @import "./components/select";
 @import "./components/table";
 @import "./components/cards";
-@import "./components/simple-card";
 @import "./components/buttons";
-@import "./components/copy-to-clipboard";
-@import "./components/dialog";
-@import "./components/icons";
 @import "./components/input";
-@import "./components/quantity-range-input";
-@import "./components/sticky-header";
 @import "./components/tooltip";
-@import "./components/select-all-plus";

package/src/plugins/vuetify/preset/style/scss/_new-style.scss

@@ -1,13 +1,6 @@
 .new-style {
     @import "./scaffolding";
     @import "./components";
-    @import "./layout";
-    @import "./pages";
-    @import "./utility";
-
-    .admin-filter-box {
-        margin-bottom: 18px;
-    }
 
     .v-btn--is-elevated.primary:not([disabled]) {
         box-shadow: 0 3px 10px rgba(110, 180, 0, 0.3) !important;

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

@@ -158,37 +158,6 @@
     }
 }
 
-.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;
@@ -196,4 +165,4 @@
 
 .v-input.v-input--selection-controls {
     margin-top: 0;
-}
+}

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

@@ -2,58 +2,6 @@
     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);
@@ -81,12 +29,3 @@
     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/_table.scss

@@ -25,6 +25,7 @@
             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);
@@ -33,7 +34,7 @@
             }
 
             td {
-                border: 0 !important;
+                border-bottom: thin solid rgba(0, 0, 0, .12) !important;
                 padding: $cell-padding !important;
             }
         }
@@ -53,42 +54,7 @@
     }
 }
 
-.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);
+.sr-simple-table-filter-td {
+    text-align: center;
+    vertical-align: middle;
 }

package/src/plugins/vuetify/preset/variables.scss

@@ -257,8 +257,8 @@ $input-focus-border-color: #A7ADAF;
 $product-checkbox-grid-width: 50px;
 $sub-color: var(--sr-black);
 $main-color: black;
-$cell-padding: 8px 15px;
+$cell-padding: 15px 15px;
 $order-edit-product-table-trash-cell-width: 60px;
 $order-checkbox-grid-width: 50px;
 
-
+$sr-form-row-margin-bottom: 1rem;

package/src/plugins/vuetify/preset/style/scss/_layout.scss

@@ -1,140 +0,0 @@
-#content {
-    padding: 0; // remove padding outside vue application
-}
-
-.admin-container {
-    --container-padding: 0;
-    padding: 0 var(--container-padding);
-
-    @include media-breakpoint-up(sm) {
-        --container-padding: 20px;
-    }
-
-    @include media-breakpoint-up(md) {
-        --container-padding: 30px;
-    }
-
-    @include media-breakpoint-up(lg) {
-        --container-padding: 40px;
-    }
-
-    @media screen and (min-width: $container-main-breakpoint) {
-        max-width: $container-main-width;
-        --container-padding: 0;
-    }
-}
-
-.admin-page-cards {
-    @include media-breakpoint-down(xs) {
-        margin-left: 20px;
-        margin-right: 20px;
-    }
-}
-
-.admin-page-header {
-    @include media-breakpoint-down(xs) {
-        margin-left: 20px;
-        margin-right: 20px;
-    }
-
-    .admin-page-header-title {
-        display: flex;
-        background: transparent;
-        flex-direction: column;
-        margin-bottom: 20px;
-
-        @include media-breakpoint-up(sm) {
-            flex-direction: row;
-            justify-content: space-between;
-            margin-top: 50px;
-        }
-
-        h1 {
-            margin: 0;
-            color: var(--sr-black);
-
-            svg {
-                display: none;
-            }
-        }
-    }
-
-    @media screen and (min-width: 520px) {
-        &.sticky-head-active {
-            position: fixed;
-            width: calc(100% - var(--header-height));
-            margin: 0;
-            top: 0;
-            display: flex;
-            left: var(--header-height);
-            z-index: 201 !important;
-            height: var(--header-height);
-            background-color: var(--sr-black);
-            padding: 0 var(--container-padding);
-            align-items: center;
-            color: #fff;
-
-            .admin-page-header-title {
-                margin: 0;
-                width: 100%;
-
-                h1 {
-                    color: #fff;
-                    font-size: 18px;
-                }
-            }
-
-            .admin-breadcrumb-container,
-            .admin-page-header-head,
-            .admin-page-header-foot {
-                display: none;
-            }
-        }
-    }
-
-    @include media-breakpoint-up(md) {
-        &.sticky-head-active {
-            width: calc(100% - var(--sidebar-width));
-            left: var(--sidebar-width);
-        }
-    }
-
-    @media screen and (min-width: $container-main-breakpoint) {
-        &.sticky-head-active {
-            padding: 0 20px;
-        }
-    }
-}
-
-.admin-page-header-content {
-    display: flex;
-    align-items: center;
-
-    @include media-breakpoint-down(sm) {
-        flex-wrap: wrap;
-
-        .v-toolbar__items {
-            width: 100%;
-            margin-top: 10px;
-        }
-
-        .v-toolbar__content {
-            height: auto !important;
-        }
-    }
-}
-
-.admin-home-block {
-    margin: 65px 0;
-    &:first-child {
-        margin-top: 15px;
-    }
-
-    &__header {
-        background-color: var(--sr-bg-grey) !important;
-        margin-bottom: 15px;
-        .v-toolbar__content {
-            padding: 0;
-        }
-    }
-}

package/src/plugins/vuetify/preset/style/scss/_pages.scss

@@ -1,5 +0,0 @@
-@import "./pages/order-list";
-@import "./pages/product-list";
-@import "./pages/order-preview";
-@import "./pages/campaign";
-@import "./pages/apps";

package/src/plugins/vuetify/preset/style/scss/_utility.scss

@@ -1,14 +0,0 @@
-.cursor-pointer {
-    cursor: pointer;
-}
-.product-status {
-    &--enabled {
-        color: var(--sr-success);
-    }
-    &--disabled {
-        color: var(--v-error-base);
-    }
-    &--discontinued {
-        color: var(--sr-link-grey);
-    }
-}

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

@@ -1,31 +0,0 @@
-.action-bar-wrapper {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-
-    .items-selected-text {
-        display: flex;
-        align-items: center;
-        width: auto;
-        font-size: 13px;
-        line-height: 1.2em;
-        margin-right: 30px;
-        text-transform: none;
-    }
-}
-
-.admin-order-table__head-row.bulk-action {
-
-    @include media-breakpoint-down(xs) {
-        .actions .primary {
-            word-break: break-all;
-            min-width: 0;
-            white-space: normal;
-
-            .v-btn__content {
-                flex: 1 1 auto;
-            }
-        }
-    }
-
-}

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

@@ -1,12 +0,0 @@
-.admin-block {
-    background: #fff;
-    border-radius: 3px;
-    padding: 20px;
-    margin-bottom: 40px;
-
-    &--dense {
-        margin-bottom: 10px;
-        padding-top: 13px;
-        padding-bottom: 13px;
-    }
-}

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

@@ -1,37 +0,0 @@
-.admin-breadcrumb-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    @include media-breakpoint-down(xs) {
-        display: none;
-    }
-}
-
-.admin-breadcrumbs {
-    padding: 0;
-
-    .v-breadcrumbs {
-        &__item {
-            transition: none;
-            color: var(--sr-link-grey) !important;
-
-            &:hover {
-                color: var(--sr-dark-grey) !important;
-            }
-
-            .v-icon {
-                margin-right: 5px;
-                color: inherit;
-            }
-        }
-
-        &__divider {
-            padding: 0 5px;
-        }
-    }
-
-    li:last-child {
-        font-weight: 500;
-    }
-}

package/src/plugins/vuetify/preset/style/scss/components/_copy-to-clipboard.scss

@@ -1,16 +0,0 @@
-@include media-breakpoint-up(md) {
-    .admin-copy-box svg.v-icon {
-        display: none;
-    }
-    .admin-copy-box:hover svg.v-icon {
-        display: inline-block;
-    }
-}
-
-.v-application .admin-copy-box svg.v-icon {
-    color: var(--sr-link-grey) !important;
-}
-
-.copy-clipboard-icon {
-    position: absolute;
-}

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

@@ -1,61 +0,0 @@
-.sr-dialog {
-    &.v-dialog {
-        & > .v-card {
-            & > .v-card__title {
-                padding: 28px 30px 20px 30px !important;
-
-                .sr-dialog-title {
-                    font-weight: normal;
-                    color: $dialog-title-color;
-                    word-break: normal;
-                }
-            }
-
-            .v-card__actions {
-                padding: 0 30px 30px 30px;
-            }
-
-            & > .v-card__text {
-                padding-left: 30px;
-                padding-right: 30px;
-            }
-
-            &.product-picker {
-                & > .v-card__text {
-                    padding: 0;
-                    background: var(--sr-bg-grey);
-                    font-size: 13px;
-
-                    .v-list {
-                        background: transparent !important;
-                        padding: 0;
-                    }
-
-                    .v-list-item {
-                        &.active {
-                            background-color: #ECEEEF;
-                        }
-                    }
-                }
-
-                & > .v-card__actions {
-                    padding-top: 15px;
-                }
-
-                & > .v-card__title {
-                    padding-bottom: 30px !important;
-                }
-            }
-        }
-    }
-
-    .admin-dialog-close-button {
-        position: absolute;
-        top: 8px;
-        right: 6px;
-
-        .v-icon.v-icon {
-            font-size: 18px;
-        }
-    }
-}

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

@@ -1,21 +0,0 @@
-.sr-admin-icon-link,
-.sr-admin-icon-btn {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 6px;
-    margin: 0;
-    border: 0;
-    color: var(--sr-primary);
-    outline: none;
-
-    &:focus,
-    &:active,
-    &:hover {
-        color: var(--sr-hover-green);
-
-        svg {
-            outline: none;
-        }
-    }
-}

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

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