first commit

2025-08-02 16:30:27 +02:00
commit 23646bfcee
14851 changed files with 1750626 additions and 0 deletions
--- a/admin/static/scss/components/_autocomplete.scss
+++ b/admin/static/scss/components/_autocomplete.scss
@@ -0,0 +1,241 @@
+// Autocomplete
+//------------------------------------------------------
+
+.autocomplete {
+   border: 1px solid transparent;
+   border-top: 0;
+   background: $white;
+   font-size: 12px;
+   max-height: 0;
+   opacity: 0;
+   overflow: hidden;
+   position: absolute;
+   left: 15px;
+   right: 15px;
+   transition: opacity .25s, max-height .25s;
+   transition-timing-function: ease-out;
+   z-index: -1;
+
+   &.opened:not(:empty) {
+      border: 1px solid $lightgray-dark;
+      overflow-y: scroll;
+      max-height: 450px;
+      opacity: 1;
+      z-index: 1000;
+   }
+
+   &:not(.opened) {
+      max-height: 0 !important;
+   }
+
+   > div {
+      display: flex;
+      align-items: center;
+      padding: 5px;
+      border-top: 1px solid $lightgray-dark;
+
+      &:focus .btn {
+         border-color: $primary;
+         background-color: $primary;
+         color: $white;
+      }
+
+      &:hover,
+      &:focus {
+         background: $lightgray;
+         cursor: pointer;
+      }
+
+      &.no-visible {
+         background: #f2dede;
+      }
+
+      &.old {
+         background: #cdd3f2;
+      }
+
+      &.has-variations {
+         cursor: default;
+
+         &:hover,
+         &:focus {
+            background: inherit;
+         }
+      }
+
+      + .variation {
+         border-color: #f1f1f1;
+      }
+   }
+
+   .variation {
+      padding-left: 20px;
+
+      &::before {
+         color: $darkgray;
+         content: "- ";
+         display: inline-block;
+         margin-right: 3px;
+      }
+
+      + .variation {
+         border-color: #f1f1f1;
+      }
+
+      small {
+         margin-left: 5px;
+      }
+   }
+
+   p {
+      padding: 0 15px;
+      margin-bottom: 0;
+      flex-grow: 1;
+   }
+
+   small {
+      font-size: 11px;
+      color: $darkgray;
+   }
+
+   img {
+      width: 50px;
+      height: auto !important;
+   }
+
+   .btn {
+      width: 60px;
+      flex-shrink: 0;
+      padding-right: 5px;
+      padding-left: 5px;
+      margin-top: 0 !important;
+   }
+}
+
+.autocomplete-bottom {
+   top: 100%;
+
+   &.opened:not(:empty) {
+      box-shadow: 0 4px 6px 0 rgba(100, 104, 118, .25);
+      border-top: 0;
+
+      + .autocomplete-control.opened,
+      + .form-control.opened {
+         border-bottom-right-radius: 0;
+         border-bottom-left-radius: 0;
+         border-bottom-color: $lightgray-dark;
+      }
+   }
+}
+
+.autocomplete-top {
+   bottom: 100%;
+
+   &.opened:not(:empty) {
+      box-shadow: 0 -4px 6px 0 rgba(100, 104, 118, .25);
+      border-bottom: 0;
+
+      + .autocomplete-control.opened,
+      + .form-control.opened {
+         border-top-right-radius: 0;
+         border-top-left-radius: 0;
+         border-top-color: $lightgray-dark;
+      }
+   }
+}
+
+.autocomplete-results {
+
+   &.panel:first-child {
+      background: $white;
+   }
+
+   .panel-body {
+      display: flex;
+      align-items: center;
+      padding: 7px 13px;
+   }
+
+   img {
+      width: 60px;
+      height: auto !important;
+   }
+
+   p {
+      margin-bottom: 0;
+      padding-left: 15px;
+      flex-grow: 1;
+
+      a {
+         display: inline-block;
+         margin-bottom: 2px;
+      }
+
+      small {
+         color: $darkgray;
+      }
+   }
+}
+
+.autocomplete-product-wrapper {
+   .chosen-drop { display: none; }
+   .autocomplete.opened:not(:empty) { min-width: 500px; }
+}
+
+.body-menu {
+   .autocomplete-product-wrapper {
+      .autocomplete {
+         > div {
+            p {
+               color: black;
+            }
+         }
+         .btn.add {
+            display: none;
+         }
+
+         > div.has-variations {
+            cursor: auto;
+         }
+
+         &.opened:not(:empty) {
+            left: 0;
+            min-width: 230px;
+         }
+      }
+   }
+}
+
+/* additional icons */
+.search-clear-icon,
+.search-loading-icon {
+   top: calc((#{$input-height-base} / 2) - (15px / 2));
+   position: absolute;
+   line-height: 1;
+   z-index: 2;
+}
+
+.search-clear-icon {
+   right: 10px;
+   cursor: pointer;
+}
+
+.search-loading-icon {
+   right: 35px;
+   width: 15px;
+   height: 15px;
+   animation: spin .7s infinite linear;
+   border-bottom: 1px solid $border-color;
+   border-right: 1px solid $border-color;
+   border-radius: 50%;
+}
+
+@keyframes spin {
+   from {
+      transform: rotate(0deg);
+   }
+
+   to {
+      transform: rotate(360deg);
+   }
+}
--- a/admin/static/scss/components/_chosen.image.scss
+++ b/admin/static/scss/components/_chosen.image.scss
@@ -0,0 +1,91 @@
+/******************************************************   */
+
+/******************** Chosen image *********************/
+
+/******************************************************   */
+
+/**
+ * Image Select Styles
+ *
+ * @author     Web Semantics, Inc. Dev Team <info@websemantics.ca>
+ * @copyright  2011-2015 Web Semantics, Inc.
+ * @link       http://websemantics.ca
+ * @license    https://opensource.org/licenses/MIT
+ */
+
+
+/* <img> - vybrané */
+.chose-image {
+   border: 1px solid #ddd;
+   width: 100%;
+   max-width: 97px;
+   max-height: 97px;
+   vertical-align: middle;
+}
+
+/* Image for Single mode */
+.chose-image-small {
+   width: 60px;
+   max-height: 60px;
+   vertical-align: middle;
+}
+
+/* <img> - možnosti */
+.chose-image-list {
+   width: 100%;
+   max-width: 105px;
+   max-height: 105px;
+   vertical-align: middle;
+   border: 1px solid #ddd;
+   padding: 4px;
+   background: $white;
+}
+
+/* Grey-out image for Multi mode */
+.chosen-container-multi .result-selected img {
+   opacity: .3;
+}
+
+.photo-select + .chosen-container {
+   /* obal. <ul> možností */
+   &.chosen-container-active .chosen-results {
+      padding: 2px 4px;
+   }
+
+   /* <li> - možnosti */
+   .chosen-results li {
+      float: left;
+      font-size: 0;
+      padding: 3px 2px;
+   }
+
+   /* hover */
+   .highlighted {
+      background-color: transparent !important;
+
+      img {
+         border-color: $primary;
+      }
+   }
+
+   /* <li> - vybrané */
+   .search-choice {
+      background-color: $gray-background !important;
+
+      span {
+         font-size: 0;
+      }
+   }
+
+   /* ukously text "vybrat obrazk" */
+   .chosen-choices li.search-field input[type="text"] {
+      min-width: 115px !important;
+   }
+}
+
+
+/* debug *
+.chosen-drop {
+   clip: inherit !important;
+} */
+
--- a/admin/static/scss/components/_chosen.scss
+++ b/admin/static/scss/components/_chosen.scss
@@ -0,0 +1,390 @@
+$chosen-sprite: url('/admin/static/images/chosen-sprite.png') !default;
+$chosen-sprite-retina: url('/admin/static/images/chosen-sprite@2x.png') !default;
+
+.chosen-container {
+   display: inline-block;
+   font-size: $font-size-base;
+   position: relative;
+   vertical-align: middle;
+   user-select: none;
+
+   * {
+      box-sizing: border-box;
+   }
+
+   .chosen-drop {
+      position: absolute;
+      top: calc(100% - 1px);
+      z-index: 1010;
+      width: 100%;
+      border: $input-border-width solid $input-border-color;
+      border-top: 0;
+      background: $input-bg;
+      box-shadow: $input-box-shadow;
+      clip: rect(0, 0, 0, 0);
+   }
+
+   &.chosen-with-drop .chosen-drop {
+      clip: auto;
+   }
+
+   a {
+      cursor: pointer;
+   }
+
+   .search-choice,
+   .chosen-single {
+      .group-name {
+         margin-right: 4px;
+         overflow: hidden;
+         white-space: nowrap;
+         text-overflow: ellipsis;
+         font-weight: normal;
+         color: $input-color;
+
+         &::after {
+            content: ":";
+            padding-left: 2px;
+            vertical-align: top;
+         }
+      }
+   }
+}
+
+.chosen-container-single {
+   .chosen-single {
+      position: relative;
+      display: block;
+      overflow: hidden;
+      background-color: $input-bg;
+      background-clip: padding-box;
+      box-shadow: $input-box-shadow;
+      text-decoration: none;
+      white-space: nowrap;
+
+      // jako input-sm
+      font-size: $font-size-base;
+      line-height: $line-height-base;
+      padding: $padding-base-vertical $padding-base-horizontal*2 $padding-base-vertical $padding-base-horizontal;
+      height: $input-height-base;
+      border: $input-border-width solid $input-border-color;
+      border-radius: $input-border-radius-base;
+      color: $input-color;
+
+      span {
+         display: block;
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+      }
+
+      abbr {
+         position: absolute;
+         top: 9px;
+         right: 26px;
+         display: block;
+         width: 12px;
+         height: 12px;
+         background: $chosen-sprite -42px 1px no-repeat;
+         font-size: 1px;
+
+         &:hover {
+            background-position: -42px -10px;
+         }
+      }
+
+      // sipka nahoru / dolu
+      div {
+         position: absolute;
+         top: 0;
+         right: 0;
+         display: block;
+         width: 24px;
+         height: 100%;
+
+         b {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            color: $black;
+
+            &::before {
+               @include bootstrapicon;
+
+               content: "\F282";
+               font-size: $bootstrap-icon-size-base;
+            }
+         }
+      }
+   }
+
+   .chosen-default {
+      color: $input-color;
+   }
+
+   .chosen-single-with-deselect span {
+      margin-right: 38px;
+   }
+
+   &.chosen-disabled .chosen-single abbr:hover {
+      background-position: -42px -10px;
+   }
+
+   .chosen-search {
+      position: relative;
+      z-index: 1010;
+      margin: 0;
+      padding: 3px 4px;
+      white-space: nowrap;
+
+      input[type="text"] {
+         margin: 1px 0;
+         padding: 2px 20px 2px 5px;
+         width: 100%;
+         height: auto;
+         outline: 0;
+         border: $input-border-width solid $input-border-color;
+         background: $chosen-sprite no-repeat 100% -20px;
+         line-height: normal;
+         border-radius: $input-border-radius-base;
+         font-size: $font-size-small;
+      }
+   }
+
+   .chosen-drop {
+      margin-top: -1px;
+      border-radius: 0 0 3px 3px;
+      background-clip: padding-box;
+   }
+
+   &.chosen-container-single-nosearch .chosen-search {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+   }
+}
+
+.chosen-container .chosen-results {
+   color: $input-color;
+   position: relative;
+   overflow-x: hidden;
+   overflow-y: auto;
+   margin: 0;
+   padding: 0;
+   max-height: 240px;
+   -webkit-overflow-scrolling: touch;
+
+   li {
+      display: none;
+      margin: 0;
+      padding: 5px 6px !important;
+      list-style: none;
+      line-height: 20px;
+      word-wrap: break-word;
+      -webkit-touch-callout: none;
+
+      &.active-result {
+         display: list-item;
+         cursor: pointer;
+      }
+
+      &.disabled-result {
+         display: list-item;
+         color: $text-muted;
+         cursor: default;
+      }
+
+      &.highlighted {
+         color: white;
+         background: $primary;
+
+         em { background: transparent; }
+      }
+
+      &.no-results {
+         background: $gray-background;
+         display: list-item;
+      }
+
+      &.group-result {
+         display: list-item;
+         font-weight: bold;
+         color: $input-color;
+         cursor: default;
+      }
+
+      &.group-option {
+         padding-left: 15px;
+      }
+
+      // cast vyhledana ve vysledcich
+      em {
+         font-style: normal;
+         background: #feffde;
+      }
+   }
+}
+
+.chosen-container-multi {
+
+   .chosen-choices {
+      position: relative;
+      overflow: hidden;
+      margin: 0;
+      padding: 2px 5px 2px 0;
+      width: 100%;
+      height: auto;
+      border: $input-border-width solid $input-border-color;
+      background-color: $input-bg;
+      border-radius: 3px;
+      cursor: text;
+      box-shadow: $input-box-shadow;
+   }
+
+   .chosen-choices li {
+      float: left;
+      list-style: none;
+
+      &.search-field {
+         width: 100%;
+         margin: 0;
+         padding: 0;
+         white-space: nowrap;
+
+         input[type="text"] {
+            padding: $padding-base-vertical $padding-base-horizontal;
+            height: 28px;
+            outline: 0;
+            border: 0 !important;
+            background: transparent !important;
+            box-shadow: none;
+            color: $input-color;
+            font-size: 100%;
+            font-family: inherit;
+            line-height: normal;
+            border-radius: 0;
+            width: 25px;
+
+            @include placeholder;
+         }
+
+         .chosen-search-input {
+            width: 100% !important;
+         }
+      }
+
+      &.search-choice {
+         position: relative;
+         margin: 3px 0 3px 5px;
+         padding: 3px 20px 3px 5px;
+         max-width: 100%;
+         border-radius: $input-border-radius-base;
+         background-size: 100% 19px;
+         background-repeat: repeat-x;
+         background-clip: padding-box;
+         color: $input-color;
+         line-height: 13px;
+         cursor: default;
+         border: $input-border-width solid $input-border-color;
+         background-color: $gray-background;
+
+         span {
+            word-wrap: break-word;
+         }
+
+         .search-choice-close {
+            position: absolute;
+            top: 4px;
+            right: 3px;
+            display: block;
+            width: 12px;
+            height: 12px;
+            background: $chosen-sprite -42px 1px no-repeat;
+            font-size: 1px;
+
+            &:hover {
+               background-position: -42px -10px;
+            }
+         }
+      }
+
+      &.search-choice-disabled {
+         padding-right: 5px;
+         border: 1px solid #ccc;
+         background-color: #e4e4e4;
+         color: #666;
+      }
+
+      &.search-choice-focus {
+         background: $gray-background;
+
+         .search-choice-close {
+            background-position: -42px -10px;
+         }
+      }
+   }
+
+   .chosen-results {
+      margin: 0;
+      padding: 0;
+   }
+
+   .chosen-drop .result-selected {
+      display: list-item;
+      color: #ccc;
+      cursor: default;
+   }
+}
+
+.chosen-container-active {
+   @include form-chosen-focus;
+
+   &.chosen-with-drop {
+      .chosen-drop {
+         border: $input-border-width solid $input-border-focus;
+         border-top-color: $border-color-light;
+      }
+
+      .chosen-single {
+         @include border-bottom-radius(0);
+
+         div {
+            b {
+               transform: rotateX(180deg);
+            }
+         }
+      }
+
+      .chosen-choices {
+         border-bottom-left-radius: 0;
+         border-bottom-right-radius: 0;
+      }
+   }
+}
+
+.chosen-disabled {
+   opacity: .5 !important;
+   cursor: default;
+
+   .chosen-single {
+      cursor: default;
+   }
+
+   .chosen-choices .search-choice .search-choice-close {
+      cursor: default;
+   }
+}
+
+/* Retina compatibility */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
+   .chosen-rtl .chosen-search input[type="text"],
+   .chosen-container-single .chosen-single abbr,
+   .chosen-container-single .chosen-search input[type="text"],
+   .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
+   .chosen-container .chosen-results-scroll-down span,
+   .chosen-container .chosen-results-scroll-up span {
+      background-image: $chosen-sprite-retina !important;
+      background-size: 52px 37px !important;
+      background-repeat: no-repeat !important;
+   }
+}
--- a/admin/static/scss/components/_clipboard.scss
+++ b/admin/static/scss/components/_clipboard.scss
@@ -0,0 +1,17 @@
+.copy-to-clipboard {
+   cursor: pointer;
+
+   &::after {
+      @include glyphicon;
+
+      content: "\e205";
+   }
+
+   &:hover::after {
+      color: $primary;
+   }
+
+   &:active::after {
+      color: darken($primary, 10%);
+   }
+}
--- a/admin/static/scss/components/_custom_form.scss
+++ b/admin/static/scss/components/_custom_form.scss
@@ -0,0 +1,9 @@
+/***********************************
+Syntax v šabloně:
+
+<div class="radio">
+   <input type="radio" id="input">
+   <label for="input">text</label>
+</div>
+
+***********************************/
--- a/admin/static/scss/components/_dropup-actions.scss
+++ b/admin/static/scss/components/_dropup-actions.scss
@@ -0,0 +1,48 @@
+.dropup-actions {
+   .dropdown-toggle {
+      position: relative;
+      padding-left: 32px;
+
+      &::before {
+         content: "...";
+         font-size: 25px;
+         position: absolute;
+         left: 14px;
+         top: -9px;
+      }
+   }
+
+   .dropdown-menu {
+      border-radius: 4px;
+      border-top-width: 1px;
+      font-size: 14px;
+      margin-bottom: 2px;
+      left: auto;
+      right: 0;
+   }
+
+   li > a {
+      display: flex;
+      align-items: center;
+   }
+
+   .fc,
+   .glyphicon {
+      display: inline-flex;
+      width: 24px;
+   }
+
+   .icons_translate {
+      font-size: 22px;
+      transform: translateX(-5px);
+   }
+
+   li a:hover,
+   li a:active,
+   li a:focus {
+      .fc,
+      .glyphicon {
+         color: inherit;
+      }
+   }
+}
--- a/admin/static/scss/components/_file-uploader.scss
+++ b/admin/static/scss/components/_file-uploader.scss
@@ -0,0 +1,328 @@
+.qq-uploader {
+   position: relative;
+   text-align: center;
+   width: 100%;
+}
+
+.qq-upload-button {
+   display: block;
+   width: 105px;
+   padding: 7px 0;
+   text-align: center;
+   border-bottom: 1px solid #ddd;
+   color: $white;
+}
+
+.qq-upload-button-focus {
+   outline: 1px dotted $black;
+}
+
+.qq-upload-drop-area,
+.qq-upload-extra-drop-area {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 115px;
+   z-index: 2;
+   font-weight: 700;
+   font-size: 16px;
+   text-transform: uppercase;
+   line-height: 2;
+   color: $darkgray-dark;
+   background-color: $gray-background;
+   border: 1px dashed #aab2bd;
+
+   div {
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      height: 100%;
+   }
+
+   span {
+      font-size: 32px;
+      margin-right: 10px;
+      height: 56px;
+      width: 56px;
+      text-align: center;
+
+      &::before {
+         position: relative;
+         top: 1px;
+         display: inline-block;
+         font-family: 'Glyphicons Halflings';
+         font-style: normal;
+         font-weight: 400;
+         line-height: 1;
+         -webkit-font-smoothing: antialiased;
+         content: "\e087";
+      }
+   }
+}
+
+.qq-upload-extra-drop-area {
+   position: relative;
+}
+
+.qq-upload-drop-area-active {
+   background: darken(#f7f7f8, 3%);
+   color: $success;
+
+   span::before {
+      position: relative;
+      top: 1px;
+      display: inline-block;
+      font-family: 'Glyphicons Halflings';
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1;
+      -webkit-font-smoothing: antialiased;
+      content: "\e013";
+      color: $success;
+   }
+}
+
+.qq-upload-list {
+   margin: 0;
+   padding: 0;
+   list-style: none;
+   text-align: left;
+}
+
+.qq-upload-list li {
+   padding: 9px 0;
+}
+
+.qq-upload-file,
+.qq-upload-spinner,
+.qq-upload-size,
+.qq-upload-cancel,
+.qq-upload-retry,
+.qq-upload-failed-text,
+.qq-upload-delete,
+.qq-upload-pause,
+.qq-upload-continue {
+   margin-right: 12px;
+   display: inline;
+}
+
+.qq-upload-delete {
+   cursor: pointer;
+}
+
+.qq-upload-spinner {
+   display: inline-block;
+   background: url("/admin/static/fineuploader/loading.gif");
+   width: 15px;
+   height: 15px;
+   vertical-align: text-bottom;
+}
+
+.qq-drop-processing {
+   display: block;
+}
+
+.qq-drop-processing-spinner {
+   display: inline-block;
+   background: url("/admin/static/fineuploader/processing.gif");
+   width: 24px;
+   height: 24px;
+   vertical-align: text-bottom;
+}
+
+.qq-upload-delete, .qq-upload-pause, .qq-upload-continue {
+   display: inline;
+}
+
+.qq-upload-retry,
+.qq-upload-delete,
+.qq-upload-cancel,
+.qq-upload-pause,
+.qq-upload-continue {
+   color: $black;
+}
+
+.qq-upload-size,
+.qq-upload-cancel,
+.qq-upload-retry,
+.qq-upload-delete,
+.qq-upload-pause,
+.qq-upload-continue {
+   font-size: 12px;
+   font-weight: normal;
+}
+
+.qq-upload-failed-text {
+   display: none;
+   font-style: italic;
+   font-weight: bold;
+}
+
+.qq-upload-failed-icon {
+   display: none;
+   width: 15px;
+   height: 15px;
+   vertical-align: text-bottom;
+}
+
+.qq-upload-fail .qq-upload-failed-text {
+   display: inline;
+}
+
+.qq-upload-retrying .qq-upload-failed-text {
+   display: inline;
+   color: #d60000;
+}
+
+.qq-upload-list li.qq-upload-success .qq-upload-status-text {
+   color: $success;
+}
+
+.qq-upload-list li.qq-upload-fail .qq-upload-status-text {
+   color: $danger;
+}
+
+.qq-progress-bar {
+   display: block;
+   background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* W3C */
+   width: 0%;
+   height: 15px;
+   border-radius: 6px;
+   margin-bottom: 3px;
+}
+
+.qq-total-progress-bar {
+   height: 25px;
+   border-radius: 9px;
+}
+
+.qq-total-progress-bar-container {
+   margin: 9px;
+}
+
+input.qq-edit-filename {
+   position: absolute;
+   opacity: 0;
+   z-index: -1;
+}
+
+.qq-upload-file.qq-editable {
+   cursor: pointer;
+}
+
+.qq-edit-filename-icon.qq-editable {
+   display: inline-block;
+   cursor: pointer;
+}
+
+input.qq-edit-filename.qq-editing {
+   position: static;
+   margin-top: -5px;
+   margin-right: 10px;
+   margin-bottom: -5px;
+   opacity: 1;
+}
+
+.qq-edit-filename-icon {
+   display: none;
+   background: url("/admin/static/fineuploader/edit.gif");
+   width: 15px;
+   height: 15px;
+   vertical-align: text-bottom;
+   margin-right: 5px;
+}
+
+.qq-hide {
+   display: none;
+}
+
+/* <dialog> element styles */
+.qq-uploader dialog {
+   display: none;
+}
+
+.qq-uploader dialog[open] {
+   display: block;
+}
+
+.qq-uploader dialog .qq-dialog-buttons {
+   text-align: center;
+   padding-top: 10px;
+}
+
+.qq-uploader dialog .qq-dialog-buttons button {
+   margin-left: 5px;
+   margin-right: 5px;
+}
+
+.qq-uploader dialog .qq-dialog-message-selector {
+   padding-bottom: 10px;
+}
+
+.qq-uploader dialog::backdrop {
+   background-color: rgba(0, 0, 0, .7);
+}
+
+.qq-upload-button-selector {
+   line-height: 2;
+   color: $darkgray-dark;
+   background-color: $gray-background;
+   border: 1px dashed #aab2bd;
+   height: 115px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+
+   strong {
+      display: block;
+      text-transform: uppercase;
+      font-size: 16px;
+   }
+
+   p {
+      margin-bottom: 0;
+   }
+
+   input {
+      line-height: 1;
+      width: 100%;
+   }
+}
+
+.qq-upload-button-hover {
+   strong {
+      text-decoration: underline;
+   }
+}
+
+.qq-thumb-img {
+   display: none;
+}
+
+.admin-photos {
+
+   .qq-upload-button-selector {
+      border: 0;
+      background: transparent;
+      height: auto;
+   }
+
+   .qq-upload-drop-area,
+   .qq-upload-extra-drop-area {
+      height: auto;
+
+      span {
+         line-height: inherit;
+         font-size: 15px;
+
+         &::before {
+            margin-right: 7px;
+         }
+      }
+   }
+
+   .btn-block {
+      margin-bottom: 0;
+   }
+}
--- a/admin/static/scss/components/_focus-base-fe.scss
+++ b/admin/static/scss/components/_focus-base-fe.scss
@@ -0,0 +1,49 @@
+// Kill the scroll on the body
+.focus-opened {
+   overflow: hidden;
+
+   .focus {
+      overflow-x: hidden;
+      overflow-y: auto;
+   }
+}
+
+// Container with backdrop
+.focus {
+   background: rgba(0, 0, 0, .6);
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   display: none;
+   z-index: -1;
+
+   &.active {
+      display: block;
+      z-index: 1000;
+   }
+}
+
+// For vertical centering
+.focus-dialog {
+   display: flex;
+   align-items: center;
+   margin: 10px;
+   min-height: calc(100% - (10px * 2));
+   pointer-events: none;
+   position: relative;
+   width: auto;
+}
+
+// Z-index fix
+[data-wpj-focuses] {
+   position: fixed;
+}
+
+.focus-content {
+   background-color: #fff;
+   margin: auto;
+   max-width: 100%;
+   pointer-events: auto;
+}
--- a/admin/static/scss/components/_form-search.scss
+++ b/admin/static/scss/components/_form-search.scss
@@ -0,0 +1,20 @@
+.form-search {
+   position: relative;
+
+   .search-query {
+      border-radius: 17px;
+      padding: 0 17px 0 40px;
+   }
+
+   .search-icon {
+      color: $lightgray-dark;
+      font-size: 18px;
+      position: absolute;
+      top: 50%;
+      left: 4px;
+      text-align: center;
+      transform: translateY(-50%);
+      width: 35px;
+      z-index: 20;
+   }
+}
--- a/admin/static/scss/components/_helps.scss
+++ b/admin/static/scss/components/_helps.scss
@@ -0,0 +1,59 @@
+.help-tip {
+   cursor: help;
+   padding: 2px;
+   position: absolute;
+   right: -10px;
+   top: 14%;
+   z-index: 18;
+   color: $mediumgray-dark;
+   margin-top: -1px;
+
+   &:hover {
+      z-index: 20;
+      color: $mediumgray-dark;
+   }
+}
+
+label {
+   .help-tip {
+      right: unset;
+      position: relative;
+   }
+}
+
+.d-flex > * +,
+.window-order-discounts .box-header {
+   .help-tip {
+      position: static;
+   }
+}
+
+.list-wrapper {
+   .help-tip {
+      position: relative;
+      right: auto;
+      top: auto;
+   }
+}
+
+.form-group.form-group-flex {
+   .help-tip {
+      display: inline-block;
+      right: -5px;
+      top: 50%;
+      margin-top: -10px;
+   }
+}
+
+.d-flex {
+   > * + .help-tip {
+      margin-left: 3px;
+   }
+}
+
+.manual-news-campaign {
+   .help-tip {
+      position: static;
+      padding: 0;
+   }
+}
--- a/admin/static/scss/components/_index-stats.scss
+++ b/admin/static/scss/components/_index-stats.scss
@@ -0,0 +1,43 @@
+.index-stats {
+   display: flex;
+   flex-wrap: wrap;
+
+   > div {
+      margin-bottom: 20px;
+
+      @media screen and (max-width: 500px) {
+         width: 100%;
+      }
+   }
+
+   .well {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      margin: 0;
+
+      > .fc,
+      > .glyphicon {
+         background: #f1f2f6;
+         border-radius: $border-radius-base;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         flex-shrink: 0;
+         flex-grow: 0;
+         font-size: 24px;
+         margin-right: 20px;
+         width: 43px;
+         height: 43px;
+      }
+   }
+
+   h3 {
+      font-size: 20px;
+      margin: 2px 0;
+   }
+
+   p {
+      margin: 0;
+   }
+}
--- a/admin/static/scss/components/_infobox.scss
+++ b/admin/static/scss/components/_infobox.scss
@@ -0,0 +1,23 @@
+.infobox {
+   border: 1px solid #e6e9ed;
+   background-color: $gray-background;
+   border-radius: 3px;
+   padding: 20px;
+   margin-bottom: 20px;
+   margin-top: 10px;
+
+   p {
+      line-height: 1.55;
+   }
+
+   p:last-child {
+      margin-bottom: 0;
+   }
+
+   .close {
+      position: relative;
+      right: -10px;
+      top: -10px;
+      font-size: 14px;
+   }
+}
--- a/admin/static/scss/components/_invert.scss
+++ b/admin/static/scss/components/_invert.scss
@@ -0,0 +1,79 @@
+.invert {
+   height: 100%;
+
+   .form-control {
+      border-right: 0;
+      line-height: 28px;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      &:focus {
+         box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); // don't use blue glow
+
+         + .input-group-addon {
+            border-color: $primary;
+            border-left-color: #ccc;
+         }
+      }
+   }
+
+   .input-group-addon {
+      padding: 0;
+      line-height: inherit;
+      cursor: pointer;
+      height: 100%;
+
+      .input {
+         display: none;
+
+         + span {
+            padding: 7px 9px;
+            font-weight: normal;
+            line-height: 1;
+            color: $white;
+            text-align: center;
+            background-color: $input-group-addon-bg;
+            position: relative;
+            right: -$input-border-width;
+            height: calc(100% + (#{$input-border-width}));
+            display: inline-flex;
+            align-items: center;
+            border-radius: 0 4px 4px 0;
+         }
+
+         &:checked + span {
+            background: $danger;
+         }
+      }
+   }
+
+   .chosen-container-multi {
+      width: 100% !important;
+
+      input {
+         max-width: 100%;
+      }
+
+      + .input-group-addon {
+         background-color: $input-border-color;
+      }
+   }
+
+   /*.chosen-container-active.chosen-with-drop .chosen-drop {
+      border: 0;
+
+      &.active {
+         border: 1px solid #aab2bd;
+      }
+   }*/
+
+   .search-field input {
+      width: 100% !important;
+   }
+
+   .chosen-choices {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right-width: 0;
+   }
+}
--- a/admin/static/scss/components/_list-filters.scss
+++ b/admin/static/scss/components/_list-filters.scss
@@ -0,0 +1,90 @@
+.list-filters-wrapper {
+   display: flex;
+   align-items: flex-start;
+   justify-content: space-between;
+   margin-bottom: -3px;
+
+   .list-filters-right {
+      margin-left: auto;
+      white-space: nowrap;
+      padding-left: 20px;
+
+      .filter-item {
+         padding-left: 5px;
+      }
+   }
+
+   .list-filters-left {
+      display:  flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      label {
+         margin-bottom: 3px;
+         margin-right: 10px
+      }
+
+      .filter-item {
+         padding-right: 5px;
+      }
+
+      .checkbox {
+         margin-bottom: 3px;
+         display: flex;
+         align-items: center;
+
+         label {
+            margin: 0;
+         }
+      }
+   }
+
+   .filter-item {
+      display: inline-block;
+      padding-bottom: 3px;
+
+      &:first-child {
+         padding-left: 0;
+      }
+
+      li.disabled a {
+         color: $text-muted;
+
+         &:hover {
+            cursor: default;
+         }
+      }
+   }
+
+   .btn-custom {
+      color: black; /* todo */
+     // margin-bottom: 3px;
+   }
+
+   /* todo ? zkontrolovat/smazat */
+   .selecter {
+      font-size: 13px;
+      height: 26px;
+      line-height: 26px;
+   }
+
+   .chosen-container-single {
+      .chosen-single {
+         height: 26px;
+         line-height: 26px;
+         font-size: 13px;
+         padding-top: 0;
+         padding-bottom: 0;
+
+         div {
+            padding-top: 0;
+         }
+      }
+
+      .chosen-drop li {
+         line-height: 14px;
+         padding-top: 4px;
+         padding-bottom: 4px;
+      }
+   }
+}
--- a/admin/static/scss/components/_list.scss
+++ b/admin/static/scss/components/_list.scss
@@ -0,0 +1,286 @@
+.list-wrapper {
+   margin-top: 20px;
+
+   .table {
+      table-layout: fixed;
+
+      > thead th {
+         @include truncate;
+
+         text-overflow: unset;
+
+         &,
+         a {
+            color: $text-color;
+         }
+
+         a:hover {
+            text-decoration: underline;
+         }
+
+         &.hidden-label {
+            &,
+            * {
+               color: transparent;
+               font-size: 0;
+            }
+         }
+      }
+
+      tbody {
+         tr {
+            cursor: pointer;
+
+            &:hover {
+               background-color: $table-bg-hover;
+            }
+         }
+      }
+   }
+
+   .list_item {
+      display: flex;
+      align-items: center;
+      min-height: 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &.text-wrap {
+         white-space: normal;
+         flex-direction: column;
+         align-items: flex-start;
+      }
+
+      > a:not(.btn) {
+         font-weight: $font-weight-bold;
+         color: $text-dark;
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+      }
+   }
+
+   .tiny-list-items:not(th) {
+      height: auto;
+      font-size: 10px;
+
+      a:not(.btn) {
+         font-weight: 400;
+      }
+   }
+
+   p {
+      margin-bottom: 0;
+   }
+
+   .product-campaigns {
+      .badge {
+         padding-left: 0;
+         padding-right: 0;
+         min-width: 25px;
+      }
+   }
+
+   /* hromadné zpracování obj */
+   .has-input {
+      height: auto;
+
+      select,
+      input {
+         color: $input-color;
+         border: $input-border-width solid $input-border-color;
+         border-radius: $input-border-radius-base;
+         box-shadow: $input-box-shadow;
+         height: 24px;
+         transition: border-color ease-in-out .15s;
+         max-width: 100%;
+
+         @include form-control-focus;
+      }
+
+      input {
+         padding: 2px 4px;
+      }
+   }
+
+   /* kvuli hoveru */
+   .overflow-visible,
+   .columnFeeds {
+      overflow: visible !important;
+   }
+
+   .columnBtns {
+      .btn-block {
+         min-width: 120px;
+      }
+
+      .dropdown {
+         min-width: 120px;
+         float: right;
+      }
+   }
+}
+
+.list-wrapper-window {
+   // margin kvuli stinu
+   margin-top: 3px;
+}
+
+.list-reviews {
+   .table .list_item {
+      height: auto;
+      white-space: normal;
+   }
+}
+
+// nechat .img zanořené v list_item, aby to platilo jen na náhled,
+// a ne na tooltip - ten musí byt velký
+.product-list-thumbnail .list_item {
+   //line-height: 50px;
+   min-height: 50px;
+
+   .img {
+      background-color: $white;
+      border: 1px solid #ddd;
+      margin-right: 8px;
+      padding: 3px;
+      width: 50px;
+      height: 50px;
+   }
+}
+
+.pagination-sticky {
+   background-color: #f1f2f6;
+   border-top: 1px solid #ccd1d9;
+   display: flex;
+   align-items: center;
+   padding: 10px;
+   position: sticky;
+   bottom: 0;
+   z-index: 99;
+
+   .pagination-buttons {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      padding-left: 10px;
+
+      .btn {
+         margin-left: 10px;
+      }
+   }
+
+   .chosen-container.chosen-container-single {
+      max-width: 100%;
+      font-size: $font-size-base;
+
+      .chosen-single {
+         font-size: $font-size-base;
+         height: $input-height-base;
+         padding: $padding-base-vertical $padding-base-horizontal*2 $padding-base-vertical $padding-base-horizontal;
+
+         div {
+            width: 24px
+         }
+      }
+
+      .chosen-drop {
+         top: unset;
+         bottom: calc(100% - 1px)
+      }
+   }
+
+   .selecter.selecter-down + .chosen-container {
+      .chosen-drop {
+         top: calc(100% - 1px);
+         bottom: unset;
+         border-bottom: 1px solid #66afe9;
+         border-top: 0;
+      }
+   }
+
+   .chosen-container-active.chosen-with-drop .chosen-single {
+      border-radius: 0 0 $border-radius-base $border-radius-base;
+   }
+
+   .dropup-actions {
+      .dropdown-menu {
+         left: auto;
+         right: 0;
+      }
+
+      .dropdown-toggle {
+         width: 120px;
+      }
+
+      ~ .btn {
+         margin-left: 10px;
+      }
+   }
+
+   .pagination {
+      margin: 0;
+   }
+
+   .go-to-page {
+      margin: 0 0 0 10px;
+   }
+
+   .status-change {
+      display: flex;
+      align-items: center;
+      border-left: 1px solid #ccd1d9;
+      border-right: 1px solid #ccd1d9;
+      margin: 0 16px;
+      padding: 0 16px;
+
+      .checkbox {
+         margin: 0 10px;
+      }
+
+      &:last-child {
+         border-right: 0;
+      }
+
+      + .btn {
+         margin-left: 0;
+      }
+   }
+
+   .chosen-wrapper {
+      width: 180px;
+   }
+
+   .checkbox {
+      margin: 5px 0;
+
+      input[type=checkbox] + label {
+         margin: 0;
+      }
+   }
+}
+
+.highRow {
+   border-right: 1px solid $primary !important;
+
+   > td {
+      border-bottom: 1px solid $primary !important;
+      border-top: 1px solid $primary !important;
+
+      &:first-child {
+         position: relative;
+
+         &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 4px;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            background: $primary;
+         }
+      }
+   }
+}
--- a/admin/static/scss/components/_loading_form.scss
+++ b/admin/static/scss/components/_loading_form.scss
@@ -0,0 +1,45 @@
+.panel_frame.loading {
+   > * {
+      opacity: .6;
+   }
+
+   &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(241, 242, 246, .32);
+      z-index: 1;
+   }
+
+   &::after {
+      content: "";
+      display: block;
+      height: 2px;
+      background-image: linear-gradient(to right, #4b9fff, #2494f2);
+      animation: loader 2s infinite;
+      background-size: 100vw;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+   }
+}
+
+@keyframes loader {
+   0%, 100% {
+      transition-timing-function: cubic-bezier(1, 0, .65, .85);
+   }
+
+   0% {
+      width: 0;
+   }
+
+   100% {
+      width: 100%;
+   }
+}
--- a/admin/static/scss/components/_modal.scss
+++ b/admin/static/scss/components/_modal.scss
@@ -0,0 +1,135 @@
+.modal-content {
+   border: none;
+   border-radius: 0;
+   box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+   color: $darkgray-dark;
+}
+
+.modal-header {
+   border-bottom: none;
+}
+
+.modal-body {
+   padding: 10px 15px 20px;
+}
+
+.modal-footer {
+   background-color: $gray-background;
+   border-top: none;
+   box-shadow: 0 0 1px rgba(0, 0, 0, .35);
+   padding: 10px;
+}
+
+.modal-header .close {
+   background: transparent;
+   color: $darkgray-dark;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   margin-top: 0;
+   opacity: 1;
+   position: absolute;
+   top: 0;
+   right: 0;
+   width: 35px;
+   height: 35px;
+
+   &:active,
+   &:hover,
+   &:focus {
+      background-color: $primary;
+      color: $white;
+      outline: 0;
+   }
+}
+
+.modal-open {
+   //overflow: auto !important; // body with .modal-open should not scroll (it makes no sense to scroll content covered behind modal)
+   .modal {
+      visibility: unset; // .modal might scroll
+   }
+}
+
+.modal {
+   overflow: hidden;
+   visibility: hidden;
+}
+
+.modal-dialog {
+   visibility: visible;
+}
+
+.modal-translations {
+   .modal-dialog {
+      width: 1340px;
+      max-width: calc(100% - 20px);
+      height: calc(100% - 20px);
+      margin: 10px auto;
+   }
+
+   .modal-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+   }
+
+   .modal-body {
+      flex-grow: 1;
+
+      > form {
+         display: flex;
+         flex-direction: column;
+         height: 100%;
+
+         > div:first-child {
+            flex-grow: 1;
+            padding-bottom: 10px;
+         }
+      }
+   }
+}
+
+.modal-llm {
+   .modal-header {
+      border-bottom: 1px solid $border-color-light;
+
+      h5 {
+         margin: 0;
+      }
+   }
+
+   .modal-dialog {
+      width: 900px;
+      max-width: calc(100% - 20px);
+      margin: 10px auto;
+   }
+
+   .modal-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+   }
+
+   .modal-body {
+      flex-grow: 1;
+      padding: 20px 15px 10px;
+      min-height: 395px;
+      > form {
+         display: flex;
+         flex-direction: column;
+         height: 100%;
+
+         > div:first-child {
+            flex-grow: 1;
+            padding-bottom: 10px;
+         }
+      }
+   }
+
+   .modal-footer {
+      background-color: $white;
+      border-top: 1px solid $border-color-light;
+      box-shadow: none;//0 0 1px rgba(0, 0, 0, .35);
+      padding: 15px;
+   }
+}
--- a/admin/static/scss/components/_nav.scss
+++ b/admin/static/scss/components/_nav.scss
@@ -0,0 +1,230 @@
+/*
+- board right: nav nav-pills nav-stacked
+- left menu: nav nav-pills nav-stacked small-hidden
+- activity: nav nav-pills nav-stacked box boxStatic
+ */
+
+.nav.nav-pills.nav-stacked {
+
+   li {
+      border-top: 1px solid #32353e;
+      border-bottom: 1px solid #1a1c20;
+      margin: 0;
+      position: relative;
+   }
+
+   .with_caret a {
+      position: relative;
+
+      &::after {
+         content: "";
+         border-left: 4px solid transparent;
+         border-right: 4px solid transparent;
+         border-top: 4px solid;
+         display: block;
+         position: absolute;
+         height: 0;
+         top: 45%;
+         right: 20px;
+         width: 0;
+         color: #c9d4f6;
+      }
+   }
+
+   a:not(.chosen-single):not(.btn) {
+      border-radius: 0;
+      color: #c9d4f6;
+      text-shadow: 1px 1px 0 #1b1d22;
+      font-size: 12px;
+      border-left: 1px solid #272930;
+      background-color: #272930;
+      padding-top: 8px;
+      padding-bottom: 8px;
+
+      .glyphicon {
+         margin-right: 8px;
+      }
+
+      &:hover {
+         background-color: #383b44;
+         border-left: 1px solid $primary;
+      }
+   }
+
+   .nav-header {
+      border-top: none;
+      font-size: 18px;
+      margin: 0;
+      font-weight: 100;
+      color: rgba(255, 255, 255, 1);
+      padding: 14px 15px;
+
+      &.smaller {
+         font-size: 14px;
+         border-top: 1px solid #32353e;
+      }
+
+      .bi,
+      .glyphicon {
+         margin-right: 10px;
+      }
+   }
+
+   label {
+      color: #c9d4f6;
+      font-weight: normal;
+      font-size: 12px;
+   }
+
+   .form-group {
+      margin-bottom: 0;
+      padding: 6px 0;
+   }
+
+
+   /* todo - zmena velikosti inputu */
+   .chosen-container-single .chosen-single,
+   .form-control {
+      height: $input-height-xs;
+   }
+
+   .search-clear-icon,
+   .search-loading-icon {
+      top: calc((#{$input-height-xs} / 2) - (15px / 2));
+
+   }
+
+   .btn-sm {
+      padding: 4px 9px;
+      height: $input-height-xs;
+   }
+   /* todo end - zmena velikosti inputu */
+
+   .nav-sub {
+      background-color: #1a1c20;
+      color: #aab2bd;
+      padding: 5px;
+
+      ul {
+         list-style-type: none;
+         padding: 0;
+      }
+
+      li {
+         border: none;
+      }
+
+      a:not(.chosen-single):not(.btn) {
+         padding: 5px 10px 5px 15px;
+         display: block;
+         background-color: #1a1c20;
+         border: none;
+
+         &:hover {
+            background-color: #272930;
+         }
+      }
+   }
+
+   // sekce u produktu
+   .tree {
+      background-color: #1a1c20;
+      padding-bottom: 10px;
+      padding-left: 15px;
+
+      li .glyphicon {
+         left: -12px;
+      }
+
+      li::before,
+      li::after {
+         left: -5px;
+      }
+
+      > ul {
+         padding-left: 0;
+      }
+
+      ul {
+         padding-left: 10px;
+
+         li {
+            border: none;
+
+            .btn {
+               display: block;
+            }
+
+            a {
+               background: transparent !important;
+               border: 0 !important;
+               color: $white !important;
+               font-size: 11px !important;
+               padding: 0 !important;
+            }
+
+            .btn-link > a {
+               padding: 0;
+               display: block;
+               white-space: nowrap;
+               overflow: hidden;
+               text-overflow: ellipsis;
+            }
+         }
+      }
+
+      li::after {
+         width: 10px;
+      }
+   }
+
+
+   .filestyle {
+      width: 100%;
+   }
+
+   .group-span-filestyle label {
+      color: $darkgray-dark;
+   }
+
+   .pos-rel {
+      position: relative;
+   }
+
+   /* new */
+   .hidden-in-nav {
+      display: none;
+   }
+
+   .wpj-form-group {
+      margin-bottom: 10px;
+   }
+
+   .checkbox {
+      margin: 0;
+
+      label {
+         font-size: $font-size-small;
+
+         &::before {
+            top: 1px;
+         }
+      }
+   }
+
+   .input-group-addon:not(.input-group-addon-light) {
+      color: $white;
+   }
+
+   .invert .input-group-addon .input + span {
+      padding-top: 6px;
+      padding-bottom: 6px;
+   }
+}
+
+@media screen and (max-width: 195px) {
+   // posledni zmeny - zkolabovany
+   .nav.nav-pills.nav-stacked li span, .small-hidden {
+      display: none;
+   }
+}
--- a/admin/static/scss/components/_navbar.scss
+++ b/admin/static/scss/components/_navbar.scss
@@ -0,0 +1,51 @@
+.navbar {
+   .help-link {
+      background: $primary-dark;//$info-dark;
+
+      img {
+         margin-right: 4px;
+         position: relative;
+         top: -1px;
+         height: auto;
+      }
+
+      &:hover {
+         background: $primary-dark;//$info-dark;
+      }
+
+      @media screen and (max-width: 1399px) {
+         span {
+            display: none;
+         }
+      }
+   }
+
+   .autocomplete {
+      left: 0;
+      right: 0;
+
+      &.opened:not(:empty) + .form-control.opened {
+         border-bottom-right-radius: 0;
+         border-bottom-left-radius: 0;
+         border-color: #aab2bd;
+         border-bottom-color: $lightgray-dark;
+      }
+   }
+
+   .link-to-shop {
+      img {
+         margin-right: 5px;
+      }
+
+      .glyphicon {
+         font-size: 12px;
+         margin-left: 10px;
+      }
+
+      @media screen and (max-width: 1300px) {
+         .shop-name {
+            display: none;
+         }
+      }
+   }
+}
--- a/admin/static/scss/components/_pageblocks.scss
+++ b/admin/static/scss/components/_pageblocks.scss
@@ -0,0 +1,34 @@
+/******************************************************   */
+
+/******************** Page blocks **********************/
+
+/******************************************************   */
+
+#pageBlocksContainer {
+   list-style-type: none;
+   padding: 0;
+   text-indent: 0;
+
+   .blockItem {
+      border-bottom: 0;
+      display: block;
+      list-style-type: none;
+      padding-top: 1px;
+
+      > ul {
+         position: relative;
+      }
+   }
+
+   .placeholder {
+      border: 1px dashed green;
+      min-height: 40px;
+      margin: 5px;
+      list-style-type: none;
+   }
+
+   .mjs-nestedSortable-error {
+      background: #fbe3e4;
+      border-color: transparent;
+   }
+}
--- a/admin/static/scss/components/_panel.scss
+++ b/admin/static/scss/components/_panel.scss
@@ -0,0 +1,125 @@
+.panel-heading > .row {
+   padding: 4px 15px 2px;
+}
+
+.panel-heading > .row .panel-title {
+   margin-left: 20px;
+}
+
+.panel-heading-sm {
+
+   > .row {
+      padding: 8px 0 6px;
+      display: flex;
+      align-items: center;
+
+      > div:first-child {
+         flex-grow: 1;
+      }
+
+      h5 {
+         font-size: 15px;
+         margin: 0;
+      }
+   }
+}
+
+.panel.first {
+   margin-top: 10px;
+   margin-bottom: 10px;
+}
+
+.box > div.panel {
+   flex: 1 0 auto;
+}
+
+
+.panel-group-lists {
+   .panel-heading {
+      > .row .panel-title {
+         margin-left: -10px;
+      }
+
+      > .row > div > .btn-group, > .row > div > .btn {
+         margin-top: 2px;
+      }
+   }
+}
+
+.panel-heading-close {
+   color: $black;
+   font-size: 12px;
+   display: inline-flex;
+   align-items: center;
+   opacity: .5;
+
+   .glyphicon {
+      font-size: 14px;
+      margin-left: 5px;
+   }
+
+   @include haf {
+      color: $black;
+      opacity: .9;
+   }
+}
+
+.panel-heading-flex {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+}
+
+
+.panel .panel-heading p {
+   margin: 0;
+   padding: 7px 4px 7px 0;
+}
+
+
+div.panel.drag-drop {
+   box-shadow: 0 0 10px rgba(0, 0, 0, .3);
+}
+
+
+.panel-heading {
+   .badge {
+      border: none;
+      margin-top: -2px;
+      margin-left: 2px;
+      margin-right: 2px;
+   }
+}
+
+.panel.panel-sm {
+
+   .panel-body {
+      padding: 5px;
+   }
+}
+
+
+.panel.panel-sm .panel-body.text-indent {
+   padding: 10px 15px;
+}
+
+.panel-group-lists .panel:first-child {
+   background: $gray-background;
+}
+
+.panel-heading[data-toggle="collapse"] {
+   cursor: pointer;
+
+   > .glyphicon-minus-sign {
+      float: right;
+      top: 3px;
+   }
+
+   &.collapsed > .glyphicon-minus-sign::before {
+      content: "\e081";
+   }
+
+   &:hover {
+      background-color: $gray-background;
+   }
+}
--- a/admin/static/scss/components/_productfilter-nav.scss
+++ b/admin/static/scss/components/_productfilter-nav.scss
@@ -0,0 +1,136 @@
+/* todo rename to products-filter.scss */
+
+/* move to mixin file */
+@mixin placeholder-visibility($visibility: visible) {
+   &::-moz-placeholder {
+      visibility: $visibility;
+   }
+
+   &:-ms-input-placeholder {
+      visibility: $visibility;
+   }
+
+   &::-webkit-input-placeholder {
+      visibility: $visibility;
+   }
+}
+
+.products-filter, .users-filter {
+   margin-bottom: 20px;
+
+   .form-control {
+      @include placeholder-visibility(hidden);
+   }
+
+   .chosen-container .chosen-choices:has(.search-choice) {
+      border-color: $primary !important;
+   }
+}
+
+.products-filter-2, .users-filter-2 {
+   .form-control {
+      @include placeholder-visibility();
+   }
+
+   .wpj-form-group > label {
+      display: none;
+   }
+
+   .wpj-form-group-flex {
+      .btn,
+      .radio,
+      .checkbox,
+      .radio-inline,
+      .checkbox-inline {
+         margin-top: 0;
+      }
+   }
+}
+
+.productfilter-nav, .userfilter-nav {
+   .wpj-panel-heading,
+   .wpj-form-group > label {
+      display: none;
+   }
+
+   .wpj-panel-collapse.collapse.in {
+      background: transparent;
+   }
+
+   .wpj-panel-body {
+      padding: 8px 0 0;
+   }
+
+   .wpj-form-group-flex {
+      flex-wrap: wrap;
+   }
+
+   .row {
+      margin: 0;
+   }
+
+   .col-xs-6,
+   .col-xs-4,
+   .col-xs-2 {
+      width: 100%;
+      padding: 0;
+   }
+
+   .form-control {
+      @include placeholder-visibility(visible);
+
+      height: $input-height-xs;
+   }
+
+   .btn {
+      @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-base);
+
+      .bi {
+         font-size: $bootstrap-icon-size-small;
+      }
+   }
+
+   /* v postranim menu není videt tlacitko, musi se scrollovat - hotfix pred redesignem */
+   .autocomplete {
+      &.opened:not(:empty) {
+         min-width: unset;
+         left: 0;
+      }
+
+      > div:first-of-type {
+         flex-wrap: wrap;
+
+         .btn {
+            width: 100% !important;
+            margin-left: 0;
+         }
+      }
+
+      > div[data-autocomplete-item] {
+         flex-wrap: wrap;
+         position: relative;
+         min-height: 50px;
+         padding-left: 50px;
+         overflow: hidden;
+
+         img {
+            position: absolute;
+            max-width: 50px;
+            max-height: 50px;
+            width: auto;
+            left: 5px;
+         }
+      }
+
+      p {
+         width: 100%;
+      }
+
+      .btn {
+         margin-top: 5px;
+         padding: 0 10px;
+         font-size: 12px;
+         margin-left: 15px;
+      }
+   }
+}
--- a/admin/static/scss/components/_quick-access.scss
+++ b/admin/static/scss/components/_quick-access.scss
@@ -0,0 +1,36 @@
+#quick-access {
+   text-align: right;
+   width: 56px;
+
+   > a {
+      background: $primary;//-dark;
+      padding: 19px 18px 17px;
+      text-align: center;
+   }
+
+   .dropdown-menu {
+      min-width: 450px;
+      padding: 10px 0 10px;
+      z-index: 19;
+   }
+
+   .btn-block {
+      margin-top: 5px;
+      text-align: left;
+   }
+
+   .quick-access-filters .btn {
+      margin-bottom: 5px;
+      margin-right: 5px;
+
+      &:hover,
+      &:active,
+      &:focus {
+         color: $black;
+      }
+   }
+
+   form {
+      padding: 4px 0;
+   }
+}
--- a/admin/static/scss/components/_toggle.scss
+++ b/admin/static/scss/components/_toggle.scss
@@ -0,0 +1,130 @@
+//
+// Toggles
+// --------------------------------------------------
+
+$toggle-height: 32px !default;//16px !default;
+$toggle-checkbox-opacity: 0 !default;
+
+$toggle-transition-value: all .25s ease-in-out !default;
+
+$toggle-default-background-color: $white !default;
+$toggle-checked-background-color: $primary !default;
+$toggle-red-background-color: $danger-dark;
+$toggle-disabled-background-color: $lightgray !default;
+$toggle-disabled-border-color: $mediumgray !default;
+
+$toggle-handle-width: 32px !default;
+$toggle-handle-height: 16px !default;
+$toggle-handle-radius: 8px !default;
+
+$toggle-control-width: 12px !default;
+$toggle-control-height: 12px !default;
+$toggle-control-radius: 50% !default;
+
+.toggle {
+   display: inline-flex;
+   align-items: center;
+   height: $toggle-height;
+   cursor: pointer;
+   margin-bottom: 0;
+
+   &:has(input:disabled) {
+      pointer-events: none;
+   }
+
+   input[type="checkbox"],
+   input[type="radio"] {
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      text-indent: -100000px;
+      opacity: $toggle-checkbox-opacity;
+      position: absolute;
+   }
+
+   &.toggle-red {
+      input[type="checkbox"]:checked + .handle,
+      input[type="radio"]:checked + .handle {
+         background-color: $toggle-red-background-color;
+         border-color: $toggle-red-background-color;
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+         input[type="checkbox"]:checked + .handle,
+         input[type="radio"]:checked + .handle {
+            background-color: darken($toggle-red-background-color, 8%);
+            border-color: darken($toggle-red-background-color, 8%);
+         }
+      }
+   }
+
+   .handle {
+      display: block;
+      position: relative;
+      left: 0;
+      width: $toggle-handle-width;
+      height: $toggle-handle-height;
+      background-color: $toggle-default-background-color;
+      border-radius: $toggle-handle-radius;
+      border: 1px solid $mediumgray;
+      transition: $toggle-transition-value;
+
+      &::before {
+         content: "";
+         position: absolute;
+         top: 1px;
+         left: 1px;
+         display: block;
+         width: $toggle-control-width;
+         height: $toggle-control-height;
+         border-radius: $toggle-control-radius;
+         transition: $toggle-transition-value;
+         background-color: $mediumgray;
+      }
+   }
+
+   input[type="checkbox"]:disabled + .handle,
+   input[type="radio"]:disabled + .handle {
+      border-color: $toggle-disabled-border-color;
+      background: $toggle-disabled-background-color;
+
+      &::before {
+         background: $toggle-disabled-border-color;
+      }
+   }
+
+   input[type="checkbox"]:disabled:checked + .handle,
+   input[type="radio"]:disabled:checked + .handle {
+      border-color: $toggle-disabled-border-color;
+      background: $toggle-disabled-border-color;
+   }
+
+   input[type="checkbox"]:checked + .handle,
+   input[type="radio"]:checked + .handle {
+      background-color: $toggle-checked-background-color;
+      border-color: $toggle-checked-background-color;
+   }
+
+   input[type="checkbox"]:checked + .handle::before,
+   input[type="radio"]:checked + .handle::before {
+      background-color: $toggle-default-background-color;
+      left: calc(100% - 13px);
+   }
+
+   &:hover,
+   &:active,
+   &:focus {
+      input[type="checkbox"]:checked + .handle,
+      input[type="radio"]:checked + .handle {
+         background-color: darken($toggle-checked-background-color, 8%);
+         border-color: darken($toggle-checked-background-color, 8%);
+      }
+   }
+
+   + label {
+      margin-bottom: 0;
+   }
+}
--- a/admin/static/scss/components/_treeDragDrop.scss
+++ b/admin/static/scss/components/_treeDragDrop.scss
@@ -0,0 +1,148 @@
+.wpj-panel .treeDragDrop .tdd-tree {
+   border: none;
+   min-height: 0;
+   padding: 0;
+
+   &.collapsed {
+      display: none;
+   }
+}
+
+.wpj-panel body:not(.cursorGrabbing) .treeDragDrop li {
+   cursor: auto;
+}
+
+.wpj-panel .treeDragDrop li {
+   border: none;
+   background: $body-bg;
+
+   .disabled {
+      color: $white;
+   }
+
+   .bi.opener {
+      margin-right: 8px;
+
+      &.disabled {
+         display: none;
+      }
+   }
+}
+
+.wpj-panel li.tdd-selected {
+   opacity: .5;
+   background-color: $gray-background-light;
+}
+
+.treeDragDrop > .tdd-tree > li.tdd-listItem {
+   padding: 0;
+}
+
+.tdd-row {
+   border-top: 1px solid $border-color-light;
+   display: flex;
+   align-items: center;
+   margin: 0;
+   padding: 5px 0;
+   cursor: pointer;
+
+   &:hover {
+      background: $table-bg-hover;
+   }
+}
+
+.thh-row {
+   padding: 4px 0;
+   min-height: 30px;
+   pointer-events: none;
+
+   .hidden-label {
+      * {
+         color: transparent;
+      }
+   }
+}
+
+.tdd-column {
+   position: absolute;
+   padding-right: 15px;
+   padding-left: 15px;
+}
+
+.tdd-row > .tdd-column-1 {
+   position: relative;
+}
+
+.tdd-column.alignLeft {
+   text-align: left;
+}
+
+.list_item.alignRight,
+.tdd-column.alignRight {
+   text-align: right;
+   justify-content: flex-end;
+}
+
+.list_item.alignCenter,
+.tdd-column.alignCenter {
+   text-align: center;
+   justify-content: center;
+}
+
+body .ui-draggable-dragging {
+   height: 50px;
+   width: 100%;
+   background-color: #e6e6e6;
+}
+
+.sections-root {
+   list-style: none;
+   margin: 0;
+   padding: 0;
+   background: $table-bg-active;
+
+   .list_item.is-editable {
+      overflow: clip visible;
+   }
+
+   .chosen-single {
+      text-align: left;
+      height: 22px;
+      font-size: 13px;
+      line-height: 14px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+
+      div {
+         padding-top: 0;
+      }
+   }
+}
+
+.ui-sortable-placeholder,
+.treeDragDrop .tdd-after,
+.treeDragDrop .tdd-before,
+.treeDragDrop .tdd-append,
+.nestedSortable .placeholder {
+   list-style-type: none;
+   text-indent: 0;
+   height: 37px;
+   margin: 5px 0;
+   padding: 0;
+   border: 2px dashed $border-color !important;
+   background-color: transparent;
+}
+
+.nestedSortableRoot .node {
+   .node,
+   .placeholder,
+   .tdd-after,
+   .tdd-before,
+   .tdd-append {
+      margin-left: 28px;
+   }
+
+   &.ui-sortable-helper {
+      opacity: .75;
+   }
+}
--- a/admin/static/scss/components/_wpj-image-upload.scss
+++ b/admin/static/scss/components/_wpj-image-upload.scss
@@ -0,0 +1,42 @@
+.wpj-image-upload-wrapper {
+   display: flex;
+   align-items: center;
+   border: 1px solid $border-color;
+   border-radius: $border-radius-base;
+   padding: 7px;
+   gap: 15px;
+
+   .image-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      aspect-ratio: 1;
+      width: 74px;
+      min-width: 74px;
+      border-radius: $border-radius-base;
+
+      &.empty {
+         background: $gray-background;
+      }
+
+      .bi {
+         color: $text-muted;
+         font-size: 24px;
+      }
+   }
+
+   .input-group {
+      .btn {
+          border-bottom-left-radius: $border-radius-base;
+         border-top-left-radius: $border-radius-base;
+
+         .bi {
+            margin: 0;
+         }
+      }
+   }
+
+   .help-block {
+      margin-bottom: 0;
+   }
+}
--- a/admin/static/scss/components/_wpj-modules.scss
+++ b/admin/static/scss/components/_wpj-modules.scss
@@ -0,0 +1,78 @@
+.wpj-module-tile {
+   margin-bottom: 15px;
+   display: flex;
+
+   figure {
+      width: 92px;
+      height: 92px;
+      border-radius: $border-radius-base;
+      margin-right: 18px;
+      overflow: hidden;
+   }
+}
+
+.wpj-module-tile-content {
+   flex: 1;
+   padding-right: 20px;
+
+   h5 {
+      margin-top: 0;
+      margin-bottom: 4px;
+   }
+
+   p {
+      margin: 0;
+      display: block;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+   }
+}
+
+.wpj-module-tile-badges {
+   margin-bottom: 10px;
+}
+
+.wpj-module-tile-link {
+   border-left: 1px solid $border-color-light;
+   margin: -15px 0;
+   display: flex;
+   align-self: stretch;
+   align-items: center;
+   justify-content: center;
+   padding-left: 20px;
+}
+
+.wpj-module-tile-large {
+   align-items: center;
+   margin-bottom: 30px;
+
+   .wpj-module-tile-content p {
+      -webkit-line-clamp: unset;
+   }
+}
+
+.wpj-module-gallery {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   background: $gray-background;
+   padding: 20px;
+   margin-bottom: 30px;
+}
+
+.wpj-module-gallery-item {
+   padding: 10px;
+   background: $body-bg;
+   border-radius: $border-radius-base;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   width: calc(percentage(1 / 6) - 20px);
+   margin: 10px;
+
+   img {
+      border-radius: $border-radius-base;
+   }
+}
--- a/admin/static/scss/components/_wpj-tile.scss
+++ b/admin/static/scss/components/_wpj-tile.scss
@@ -0,0 +1,50 @@
+.wpj-tile {
+   display: flex;
+   align-items: center;
+   margin-bottom: 15px;
+   position: relative;
+}
+
+.wpj-tile-icon {
+   background: $gray-background;
+   border-radius: $border-radius-base;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   flex-shrink: 0;
+   flex-grow: 0;
+   font-size: 24px;
+   margin-right: 20px;
+   width: 57px;
+   height: 57px;
+}
+
+.wpj-tile-content {
+   flex: 1;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+
+   * {
+      margin: 0;
+   }
+}
+
+.wpj-tile-active {
+   &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: $border-radius-base;
+      border: 1px solid $primary;
+   }
+
+   .wpj-tile-icon {
+      background: $primary;
+      color: $white;
+   }
+}
--- a/admin/static/scss/components/_wpj_overrides.scss
+++ b/admin/static/scss/components/_wpj_overrides.scss
@@ -0,0 +1,757 @@
+/**
+ * WPJ CHANGES
+ * --------------------------------------------------
+ */
+
+a {
+   color: $primary;
+   text-decoration: none;
+
+   &:hover,
+   &:focus {
+      color: $primary-dark;
+      text-decoration: none;
+   }
+
+   &:focus {
+      outline: none;
+   }
+
+   &:hover,
+   &:active {
+      color: $primary-dark;
+   }
+}
+
+.input-sm {
+   font-size: 15px;
+   line-height: 20px;
+}
+
+span.btn.btn-white a {
+   color: $white;
+}
+
+body {
+   color: $black;
+}
+
+body.window {
+   background-color: $gray-background;
+   padding: 10px 5px 0;
+
+   > form:not(.form-fluid) {
+      min-width: 970px;
+   }
+
+   > form > .container-fluid {
+      padding-bottom: 43px;
+      padding-right: 10px;
+      padding-left: 10px;
+   }
+}
+
+label {
+   color: #424a55;
+}
+
+p.input-height {
+   padding: 5px 0;
+}
+
+.control-label.right {
+   padding-top: 4px;
+
+   @media screen and (min-width: 1200px) {
+      text-align: right;
+   }
+}
+
+.control-label.text-left {
+   text-align: left;
+}
+
+.form-group.horizontal {
+   margin-left: -15px;
+   margin-right: -15px;
+
+   &::before,
+   &::after {
+      content: " ";
+      display: table;
+   }
+
+   &::after {
+      clear: both;
+   }
+}
+
+.form-horizontal .control-label {
+   padding-top: 5px;
+}
+
+ul.nav li.dropdown:hover > ul.dropdown-menu {
+   display: block;
+}
+
+// vyrovnani marginu, napr. u stavu objednavky
+.btn-block ~ .dropdown-menu {
+   margin-top: -5px;
+}
+
+.photos .thumbnail {
+   height: 140px;
+}
+
+.btn-group .btn .glyphicon {
+   font-size: 12px;
+}
+
+input.form-control[type=file] {
+   padding: 0;
+}
+
+.form-control:focus[readonly] {
+   border-color: #aab2bd;
+   box-shadow: none;
+}
+
+.bootstrap-filestyle {
+   input {
+      font-size: 12px;
+      height: 30px;
+      line-height: 1.5;
+      padding: 5px 10px;
+   }
+
+   label {
+      font-size: 12px;
+      line-height: 1.5;
+      padding: 5px 12px;
+   }
+}
+
+label.btn {
+   margin: 0;
+}
+
+label span.glyphicon {
+   margin-right: 5px;
+}
+
+.control-label.two-lines {
+   padding-top: 0;
+   line-height: 1.2;
+
+   label {
+      margin-bottom: 0;
+   }
+}
+
+span.product-title {
+   margin-top: 5px;
+   display: inline-block;
+}
+
+.img-limited {
+   width: auto !important;
+   max-height: 200px;
+}
+
+/*
+.btn.btn-block {
+   margin-bottom: 5px;
+}
+*/
+
+table.table-striped .badge {
+   margin-right: 5px;
+}
+
+/****** DRAG SDROP STUFF ******/
+span.drag-drop-mover {
+   margin-right: 10px;
+   cursor: move;
+   color: $primary;
+   display: inline-block;
+
+   &.disabled {
+      opacity: .5;
+      pointer-events: none;
+   }
+}
+
+div.placeholder {
+   list-style: none;
+   height: 50px;
+   background-color: $gray-background;
+}
+
+
+/* for table */
+/*.table span.drag-drop-mover {
+   margin: 0 10px;
+   line-height: 16px;
+   display: block;
+   float: left;
+}*/
+
+/****** DRAG SDROP STUFF ******/
+
+.form-control.small {
+   width: auto;
+   display: inline-block;
+   margin: 0 3px;
+   height: auto;
+   line-height: normal;
+   padding: 0 3px;
+}
+
+.table.table-striped.unsortable th {
+   .glyphicon {
+      display: none;
+   }
+
+   a,
+   a:hover {
+      cursor: auto;
+      color: $darkgray-dark;
+   }
+}
+
+.line-through {
+   text-decoration: line-through;
+}
+
+.selecter {
+   font-size: 15px;
+   width: 100%;
+   border-radius: 3px;
+   color: #555;
+   border: 1px solid #aab2bd;
+   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+   padding: 0 10px;
+   line-height: 28px;
+   height: 30px;
+}
+
+.selecter-up + .chosen-container {
+   .chosen-drop {
+      border-bottom: 0;
+      border-top: 1px solid #66afe9;
+      border-radius: 3px 3px 0 0;
+      top: auto;
+      bottom: 100%;
+   }
+
+   &.chosen-container-active.chosen-with-drop {
+      .chosen-single {
+         border-radius: 0 0 3px 3px;
+      }
+
+      .chosen-choices {
+         border-radius: 0 0 3px 3px;
+      }
+   }
+}
+
+.input-group-btn .selecter,
+.input-group-btn .chosen-container .chosen-single {
+   border-bottom-right-radius: 0;
+   border-top-right-radius: 0;
+   border-right: 0;
+}
+
+.form-control + .input-group-btn .chosen-container .chosen-single {
+   border-radius: 0 3px 3px 0;
+   border-left: 0;
+   border-right: 1px solid $border-color;
+}
+
+.help-block {
+   font-size: 12px;
+   margin-bottom: 5px;
+
+   &.no-margin {
+      margin: 0;
+   }
+}
+
+.row.bottom-space {
+   padding-bottom: 10px;
+   padding-top: 10px;
+}
+
+[class*=col-].bottom-space {
+   margin-bottom: 10px;
+   margin-top: 10px;
+}
+
+.main-panel-title {
+   margin: 5px 0 10px;
+   font-size: 16px;
+   border-bottom: 1px solid $lightgray-dark;
+   padding-bottom: 8px;
+   position: relative;
+}
+
+.wpj-main-panel-title {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   margin: 5px 0 20px;
+   border-bottom: 1px solid $lightgray-dark;
+   padding-bottom: 8px;
+
+   h4 {
+      margin: 0;
+   }
+}
+
+.btn.btn-status {
+   color: $darkgray-dark;
+   border-color: #ddd;
+
+   &.btn-active {
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, .13);
+      font-weight: bold;
+   }
+}
+
+.btn-group .btn.btn-status:first-child {
+   border-color: #ddd;
+}
+
+/* storno */
+/*.table > tbody > tr.storno {
+   > th,
+   > td {
+     // background-color: #f8e1e6 !important;
+      background-color: $danger-light !important;
+   }
+
+   &:hover > th,
+   &:hover > td {
+    //  background-color: #f0d7dc !important;
+      background-color: darken($danger-light, 5%) !important;
+   }
+}*/
+
+
+/* doprava */
+/*
+.delivery {
+   height: 26px !important;
+   margin: -3px 0;
+   line-height: 26px;
+   padding: 0 10px;
+   border: 1px solid #ddd;
+   font-size: 12px;
+   background-color: $white;
+}
+*/
+
+.table.table-collapsed {
+   td,
+   th {
+      padding-left: 7px;
+      padding-right: 3px;
+   }
+}
+
+.table td.no-padding {
+   padding-top: 2px;
+   padding-bottom: 2px;
+}
+
+/* TABULKA LIST END */
+
+.table.sm {
+   margin: 0;
+   font-size: 12px;
+
+   td, th {
+      padding: 3px 10px;
+      border: none;
+   }
+
+   th {
+      font-weight: 700;
+      text-align: right;
+   }
+}
+
+/*.menu-list {
+   .row {
+      padding: 0;
+
+      h5 {
+         margin: 6px 5px;
+         font-size: 16px;
+      }
+   }
+
+   .drag-drop-mover {
+      margin-top: 0;
+      font-size: 16px;
+      margin-right: 20px;
+      position: relative;
+      top: 2px;
+   }
+
+   ul.collapsed {
+      display: none;
+   }
+}*/
+
+.glyphicon.glyphicon-minus-sign.opener.plus::before {
+   content: "\e081";
+}
+
+.bi.bi-dash-circle.opener.plus::before {
+   content: "\F4FA";
+}
+
+.list-yes,
+.list-no,
+.list-warn {
+   font-size: 15px;
+   margin-left: 1px;
+
+   i {
+      display: none;
+   }
+}
+
+.list-yes {
+   color: $success;
+}
+
+.list-warn {
+   color: $warning;
+}
+
+.list-no {
+   color: $danger;
+}
+
+
+.window-btns {
+   position: fixed;
+   bottom: 0;
+   left: 0;
+   right: 0;
+   background-color: $gray-background;
+   box-sizing: border-box;
+   padding: 15px 20px 10px;
+   box-shadow: 0 0 3px rgba(0, 0, 0, .35);
+   z-index: 99;
+}
+
+.text-disabled {
+   color: #b0b0b0;
+
+   label {
+      cursor: auto;
+   }
+}
+
+.badge.badge-light {
+   font-weight: normal;
+
+   &.badge-danger a, &.badge-success a {
+      color: $white;
+      text-decoration: underline;
+
+      &:hover {
+         text-decoration: none;
+      }
+   }
+}
+
+iframe.ui-dialog-content {
+   width: 100% !important;
+}
+
+.form-group.form-group-flex {
+   display: flex;
+   align-items: center;
+
+   .control-label {
+      padding-top: 0;
+      line-height: 1.1;
+   }
+
+   label {
+      margin-bottom: 0;
+   }
+}
+
+.row-flex {
+   display: flex;
+   align-items: center;
+
+   .btn {
+      margin-bottom: 0;
+   }
+}
+
+// emails settigns - reserve space for ckeditor
+.panel-body > .form-group {
+
+   .inputFullWidth {
+      min-height: 211px;
+   }
+
+   .placeholder-braces {
+      font-size: 16px;
+      line-height: 1;
+   }
+}
+
+// oznacuje povinny inpu, davat uvnitr relativne pozicovaneho divu
+// za input s atributem required
+.required-text::after {
+   content: "povinné";
+   position: absolute;
+   right: 20px;
+   bottom: 3px;
+   font-size: 10px;
+   color: #bbb;
+}
+
+.help-block.required-text::after {
+   bottom: 30px;
+}
+
+input:valid + .required-text::after {
+   display: none;
+}
+
+.flag-container {
+   padding: 18px 5px 17px;
+}
+
+.flag {
+   border-radius: 3px;
+   display: inline-block;
+   text-transform: uppercase;
+   font-size: 11px;
+   font-weight: bold;
+   padding: 3px 8px;
+
+   &-beta {
+      color: $white;
+      background: $primary-dark;
+   }
+}
+
+.nav .chosen-container-multi .chosen-choices {
+
+   li.search-field {
+      float: none;
+
+      input[type="text"] {
+         height: 28px;
+         padding: 5px 10px;
+         font-size: 15px;
+         line-height: 18px;
+
+         &.default {
+            color: #a9a9a9 !important;
+         }
+      }
+   }
+
+   .search-choice {
+      float: none;
+      margin: 5px;
+   }
+
+   .search-choice .search-choice-close {
+      padding: 0 !important;
+      background-color: transparent !important;
+   }
+}
+
+.nav {
+   .form-control::-moz-placeholder {
+      color: #a9a9a9;
+      opacity: 1;
+   }
+
+   .form-control:-ms-input-placeholder {
+      color: #a9a9a9;
+   }
+
+   .form-control::-webkit-input-placeholder {
+      color: #a9a9a9;
+   }
+}
+
+.delivery-select {
+   justify-content: space-between;
+   margin: 0 !important;
+   padding: 0;
+
+   label {
+      flex-grow: 1;
+      margin-right: 10px;
+   }
+
+   .widget-wrapper {
+      display: flex;
+      align-items: center;
+   }
+
+   p {
+      margin-bottom: 0;
+      margin-right: 10px;
+   }
+}
+
+.btn.btn-text {
+   background: transparent;
+   color: $darkgray;
+   border: 0;
+
+   &:hover,
+   &:active,
+   &:focus {
+      color: $primary;
+      box-shadow: none;
+   }
+}
+
+.input-group .form-control:first-child:last-child {
+   border-radius: 3px;
+}
+
+.input-group-flex {
+   display: flex;
+
+   .form-control + .form-control {
+      border-left: 0;
+   }
+
+   > .input-group-addon {
+      width: auto;
+   }
+
+   .form-control {
+      min-width: 0; // ff fix
+   }
+}
+
+.flapRewrite .list-group-item .row {
+   display: flex;
+   flex-wrap: wrap;
+
+   > div:nth-child(2) {
+      flex-grow: 1;
+   }
+
+   > div:last-child {
+      width: auto;
+   }
+}
+
+.body-menu {
+
+   .ui-datepicker {
+      width: auto;
+      min-width: 12em;
+
+      table {
+         font-size: .8em;
+      }
+
+      td span,
+      td a {
+         padding: .1em;
+      }
+   }
+
+   .ui-datepicker-title {
+      font-size: .8em;
+   }
+
+   .nav .chosen-container-multi .chosen-choices li.search-field input.default[type="text"] {
+      width: 100% !important;
+   }
+
+   .tooltip-inner-help {
+      min-width: 0;
+   }
+}
+
+/* todo: z bootflatu - je tohle potřeba? */
+.nav-tabs {
+   .dropdown-toggle,
+   .dropdown-toggle:hover,
+   .dropdown-toggle:focus {
+      color: $darkgray-dark;
+   }
+
+   li.dropdown.open .dropdown-toggle {
+      color: $darkgray-dark;
+      background-color: $lightgray;
+   }
+
+   li.dropdown.active.open .dropdown-toggle {
+      color: $darkgray-dark;
+   }
+
+   li.dropdown.active.open .dropdown-toggle .caret,
+   li.dropdown.active .dropdown-toggle .caret {
+      border-top-color: $darkgray-dark;
+      border-bottom-color: $darkgray-dark;
+   }
+
+   li.dropdown.open .caret,
+   li.dropdown.open.active .caret,
+   li.dropdown.open a:hover .caret,
+   li.dropdown.open a:focus .caret,
+   .dropdown-toggle .caret,
+   .dropdown-toggle:hover .caret,
+   .dropdown-toggle:focus .caret {
+      border-top-color: $darkgray-dark;
+      border-bottom-color: $darkgray-dark;
+   }
+}
+
+.side-hide {
+   color: $white;
+   border-color: #1a1c20;
+   background-color: #1c1e27;
+   position: fixed;
+   bottom: 10px;
+
+   &:hover,
+   &:focus,
+   &:active,
+   &.active {
+      background-color: #252832;
+      border-color: #32353e !important;
+   }
+
+   &.collapsed .glyphicon-chevron-left::before {
+      content: "\e080";
+   }
+}
+
+// TODO: refactor
+
+.wpj-input-group {
+   display: flex;
+
+   .btn {
+      &:first-child {
+         margin-right: 30px;
+      }
+
+      &:last-child {
+         margin-left: 30px;
+      }
+   }
+}
--- a/admin/static/scss/components/_wpj_temporary.scss
+++ b/admin/static/scss/components/_wpj_temporary.scss
@@ -0,0 +1,10 @@
+.SectionRow__buttons,
+.tdd-row {
+   .btn-sm {
+      padding: 5px 5px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+   }
+}
--- a/admin/static/scss/components/_wpj_tree.scss
+++ b/admin/static/scss/components/_wpj_tree.scss
@@ -0,0 +1,180 @@
+.tree {
+   .row {
+      margin: 0;
+   }
+
+   .col-md-4 {
+      padding: 0;
+      position: static;
+   }
+
+   ul {
+      padding-left: 15px;
+
+      .first-branch > ul > li:first-child::before {
+         top: 20px;
+      }
+   }
+
+   li {
+      list-style-type: none;
+      margin: 0;
+      padding: 5px 5px 0 5px;
+      position: relative;
+
+      &.collapsed > ul {
+         display: none;
+      }
+
+      .glyphicon {
+         left: -16px;
+         top: 10px;
+         position: absolute;
+         z-index: 98;
+         border-radius: 50%;
+         text-align: center;
+         line-height: 15px;
+         height: 15px;
+         width: 15px;
+         font-size: 8px;
+         cursor: pointer;
+      }
+
+      label {
+         font-size: 11px;
+         font-weight: normal;
+         margin: 0;
+      }
+
+      &::before,
+      &::after {
+         content: "";
+         left: -10px;
+         position: absolute;
+         right: auto;
+      }
+
+      &::before {
+         border-left: 1px solid #999;
+         height: 100%;
+         top: 0;
+         width: 1px;
+      }
+
+      &::after {
+         border-top: 1px solid #999;
+         height: 20px;
+         top: 18px;
+         width: 16px;
+      }
+
+      span.btn {
+         font-size: 11px;
+         text-align: left;
+         min-width: 0;
+         padding: 4px 7px 2px;
+         display: flex;
+         align-items: center;
+
+         &:hover {
+            text-decoration: none;
+         }
+
+         a {
+            color: $white;
+         }
+
+         &.btn-link {
+            color: #424a55;
+         }
+
+         input {
+            margin: 0 0 0 8px;
+         }
+
+         .section-virtual {
+            position: static;
+            width: 14px;
+            height: 14px;
+            line-height: 10px;
+            font-size: 10px;
+            text-align: center;
+            margin-left: 6px;
+         }
+
+         .section-hidden {
+            position: static;
+            color: #aab2bd;
+            font-size: 13px;
+            margin-left: 6px;
+            line-height: 10px;
+         }
+      }
+
+      &.parent_li > span {
+         cursor: pointer;
+      }
+   }
+
+   .has-child {
+      display: flex;
+      align-items: center;
+   }
+}
+
+.tree > ul > li::before, .tree > ul > li::after {
+   border: 0;
+}
+
+.tree li:last-child::before {
+   height: 18px;
+}
+
+.tree-param {
+   font-size: 11px;
+   max-width: 460px;
+
+   li {
+      padding-right: 0;
+
+      &:hover > span > .name,
+      &:hover > span > .has-child > .name {
+         text-decoration: underline;
+      }
+   }
+
+   li > span {
+      display: flex;
+      padding: 5px 7px 0;
+   }
+
+   label {
+      cursor: pointer;
+      width: 75px;
+
+      input {
+         margin: 0;
+         position: relative;
+         top: -2px;
+         vertical-align: middle;
+      }
+   }
+
+   .name {
+      overflow: hidden;
+      padding-right: 10px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: calc(100% - 150px);
+   }
+
+   .has-child {
+      display: flex;
+      width: 100%;
+   }
+}
+
+
+.tree-highlight li:hover {
+   background: rgba(0, 0, 0, .03);
+}