kupshop/web/common/static/wpj/wpj_toolbar.scss

#wpj-header {
   top: 25px;
   left: 0;
   position: fixed;
   z-index: 1000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #fff;
   width: 215px;
   text-align: left;
   transform: translate(0, 0);
   transition: .3s;

   &.wpjtoolbar-hidden {
      transform: translate(-180px, 0);

      ul {
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0);
      }
   }

   * {
      border: 0;
      font: inherit;
      line-height: normal;
      letter-spacing: normal;
      margin: 0;
      padding: 0;
      text-align: left;

      &::before,
      &::after {
         content: none;
         display: none;
      }
   }

   ul {
      background-color: #2c2c2c;
      box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
      list-style: none;
      margin: 0;
      padding: 10px;
      width: 175px;
   }

   li {
      color: #e7eaed;
      overflow: hidden;
      padding: 8px 0;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:first-child {
         padding: 0;
      }

      a {
         color: inherit;
         display: inline-block;
         padding: 0 0 0 30px;
         position: relative;
         text-decoration: none;

         &::before {
            background: no-repeat center;
            content: "";
            display: inline-block;
            margin-top: -9px;
            position: absolute;
            left: 0;
            top: 50%;
            width: 25px;
            height: 18px;
         }

         &:hover {
            text-decoration: underline;
         }
      }
   }

   .translate::before {
      background-image: url("/common/static/images/wpjtoolbar_translate.svg");
      background-size: 20px auto;
   }

   .admin::before {
      background-image: url("/common/static/images/wpjtoolbar_home.svg");
      background-size: 17px auto;
   }

   .filter::before {
      background-image: url("/common/static/images/wpjtoolbar_filter.svg");
      background-size: 19px auto;
   }

   .clear-cache::before {
      background-image: url("/common/static/images/wpjtoolbar_reload.svg");
      background-size: 19px auto;
   }

   .logout {
      margin-bottom: 5px;

      &::before {
         background-image: url("/common/static/images/wpjtoolbar_logout.svg");
         background-size: 15px auto;
      }
   }

   input[type=checkbox] {
      -webkit-appearance: checkbox;
      vertical-align: middle;
      position: absolute;
      left: 0;
      top: 2px;
      width: 23px;
      text-align: center;
   }

   label {
      cursor: pointer;
      display: block;
      position: relative;
      padding: 0 0 0 30px;

      &:hover {
         text-decoration: underline;
      }
   }

   // tlacitko editace-obsahu
   .wpjheader-button {
      border: 1px solid transparent;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
      display: block;
      padding: 8px 5px 8px 40px;
      position: relative;
      text-align: left;
      transition: background-color .3s;

      &:hover {
         text-decoration: none;
      }

      &.disabled {
         background: #3a3a3a;
         border: 1px solid #3a3a3a;
         color: #939393;
         cursor: auto;
         pointer-events: none;
         text-shadow: 0 -1px 1px #464646;

         &::before {
            opacity: .3;
         }
      }


      &::before {
         left: 8px;
      }
   }

   .wpjheader-button-blue {
      background-color: #0b7cff;
      border-color: #0b7cff;

      &::before {
         background-image: url("/common/static/images/wpjtoolbar_edit.svg");
         background-size: 23px auto;
         z-index: 1;
         left: 8px;
      }

      &:hover {
         background-color: #1269ce;
      }
   }

   .wpjheader-button-green {
      background-color: #85c848;
      border-color: #85c848;

      &::before {
         background-image: url("/common/static/images/wpjtoolbar_settings.svg?v1");
         background-size: 17px auto;
      }

      &:hover {
         background-color: #75b03e;
      }
   }

   a:not(.wpjheader-button).disabled {
      opacity: .5;
      cursor: not-allowed;

      &:hover {
         text-decoration: none;
      }
   }

   .superadmin {
      border-top: 1px solid #555;
      font-size: 12px;
      opacity: .5;
      padding: 10px 5px 5px;

      + .superadmin {
         border-top: 0;
         padding-top: 5px;
      }
   }

   .wpjtoolbar-toggler {
      background: #2c2c2c url("/common/static/images/wpjtoolbar_logo.svg?v2") no-repeat center;
      background-size: 20px auto;
      border-top: 5px solid #0b7cff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
      cursor: pointer;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      transition: border-top-color .3s;
      width: 40px;
      height: 115px;

      &:hover {
         border-top-color: #1269ce;
      }
   }

   .wpjtoolbar-progress {
      background: #0b7cff;
      border-radius: 3px 0 0 3px;
      display: none;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      width: 0;
   }

   .loading {
      background-color: #1269ce;

      span {
         position: relative;
      }

      .wpjtoolbar-progress {
         display: block;
         position: absolute;
      }
   }
}

@import "_wpjtoolbar-dialog";
@import "_wpjtoolbar-debugger";
@import "_wpjtoolbar-error";