MAINHACK

Viewing / Editing File: style.scss

@import "./default";
@import "./tooltip";
.b__body {
  margin: 0;
  padding: 0;
  background-color: $soft_white;
}
#pos__screen {
  .main__header {
    background-color: white;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
    ul {
      margin: 0;
      padding: 0;
      li {
        display: inline-block;
        a {
          text-decoration: none;
          display: block;
        }
      }
    }
    .right__icons,
    .left__icons {
      li a {
        padding: 7px 15px;
      }
    }
    .left__icons {
      li:first-child a {
        padding: 7px 15px 7px 0;
      }
    }
    .left__menu,
    .right__menu {
      width: calc(99% / 2);
    }
    .left__menu {
      display: flex;
      justify-content: space-between;
      ul:not(.sub-menu) {
        display: flex;
        justify-content: space-between;
        a {
          font-size: 20px;
          color: $skyblue;
          transition: all 0.3s;
          &:hover,
          &:focus {
            color: $skyblue;
          }
        }
      }
      .menu__trigger {
        font-size: 30px;
        padding: 0 10px;
        color: $txt_color;
        display: none;
        transition: color 0.3s;
        &:hover,
        &:focus {
          color: $skyblue;
        }
      }
    }
    .right__menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .separate__menu {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        & > a {
          position: relative;
          padding: 6px 8px;
          margin-right: 2%;
          font-size: 15px;
          border-radius: 3px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          transition: opacity 0.3s;
          &:hover {
            opacity: 0.8;
          }
          &:last-child {
            margin-right: 0;
          }
        }
        .it_has_children {
          position: relative;
          margin-right: 2%;
          & > a {
            padding: 8px;
            font-size: 15px;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: opacity 0.3s;
            &:hover {
              opacity: 0.8;
            }
          }

.sub__menu {
            position: absolute;
            top: 40px;
            left: 0;
            background-color: white;
            width: 200px;
            max-height: 400px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            z-index: 1;
            overflow: hidden;
            display: none;
            &:hover {
              overflow: auto;
            }
            li {
              display: block;
              width: 100%;
            }
            a {
              display: block;
              box-shadow: 0 0 0 rgba(0, 0, 0, 0);
              color: $skyblue;
              padding: 6px 10px;
              font-size: 14px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              &:hover {
                background-color: #f7f7f7;
              }
            }
          }
        }
      }
      .single {
        font-size: 15px;
        padding: 6px 8px;
        display: flex;
        align-items: center;
        i {
          margin-right: 5px;
          font-size: 8px;
        }
      }
      a {
        text-decoration: none;
        color: white;
        border-radius: 3px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: opacity 0.3s;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .header_tow {
    padding: 20px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: calc(97% / 3);
      padding: 6px 8px;
      font-size: 15px;
      border-radius: 3px;
      border: none;
      outline: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: opacity 0.3s;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .menu__tow {
    position: absolute;
    right: 20px;
    max-width: 400px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 0 0 5px 5px;
    z-index: 100;
    display: none;
    & > ul.menu__list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      & > li {
        width: calc(98% / 2);
      }
    }
    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      li {
        &.it__has__children {
          position: relative;
          &:hover .sub__menu {
            transform: translateX(-100%);
            opacity: 1;
            z-index: 1;
          }
          .sub__menu {
            padding: 5px;
            position: absolute;
            top: 20px;
            left: 0;
            background-color: white;
            z-index: -23;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            opacity: 0;
            a {
              display: block;
            }
          }
        }
        a {
          display: block;
          padding: 5px;
          font-size: 16px;
          text-decoration: none;
          color: $skyblue;
          transition: all 0.3s;
          &:hover {
            background-color: #f7f7f7;
          }
        }
      }
    }
  }
  .middle__area {
    padding: 10px 10px 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .cart__product,
    .product__list {
      width: calc(99% / 2);
    }
    .cart__product {
      & > .content {
        background-color: white;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        height: calc(100vh - 135px);
      }
      .cart__selected__item {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba($txt_color, 0.4);
        .select__box {
          flex: 1;
          display: flex;
          justify-content: space-between;

span.select2-selection.select2-selection--single:focus {
            outline-color: rgba($skyblue, 0.5);
          }
          .select2-container .select2-selection--single {
            height: 35px;
            padding: 3px 0;
            background-color: rgba($skyblue, 0.04);
            border-color: rgba($skyblue, 0.2) !important;
            font-size: 13px;
            .select2-selection__rendered {
              color: $skyblue;
            }
          }
          .select2-container--default
            .select2-selection--single
            .select2-selection__arrow {
            height: 33px;
            b {
              border-color: $skyblue transparent transparent transparent;
            }
          }
        }
        .add__edit {
          width: 120px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          a {
            color: $txt_color;
            text-decoration: none;
            transition: all 0.3s;
            &:first-child {
              font-size: 27px;
              margin-right: 30px;
              color: lighten($skyblue, 15);
              &:hover {
                color: darken($skyblue, 10);
              }
            }
            &:last-child {
              font-size: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: $skyblue;
              width: 30px;
              height: 30px;
              color: white;
              border-radius: 5px;
              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
      .table__overlay {
        width: 100%;
        overflow-x: auto;
        margin-top: 10px;
        table {
          width: 100%;
          border: none;
          border-collapse: collapse;
          thead {
            th {
              position: sticky;
              top: 0;
              background-color: rgba($skyblue, 0.2);
              text-align: center;
              padding: 8px 10px;
              font-weight: 500;
              font-size: 14px;
              &:nth-child(1) {
                width: 43%;
              }
              &:last-child {
                text-align: left;
              }
              &:first-child {
                text-align: left;
              }
            }
          }
          tbody {
            td {
              padding: 10px 0;
              text-align: center;
              vertical-align: top;
              &:first-child {
                text-align: left;
                width: 46.5%;
              }
              &:nth-child(2) {
                width: 18%;
              }
              &:nth-child(3) {
                width: 15%;
                text-align: left;
                padding-left: 4%;
              }
              &:nth-child(4) {
                padding-left: 9px;
              }
            }
            .item__info {
              display: flex;
              .edit__item {
                font-size: 16px;
                margin-right: 10px;
                color: $skyblue;
              }
              .separate {
                flex: 1;
                margin-top: 3px;
                p {
                  margin: 0 0 3px 0;
                  font-size: 12px;
                }
              }
            }

.quantity__box {
              display: flex;
              .plus,
              .minus {
                border: none;
                outline: none;
                color: $skyblue;
                width: 22px;
                height: 23px;
                border-radius: 2px;
                font-size: 15px;
                background-color: rgba($skyblue, 0.2);
                cursor: pointer;
                transition: all 0.3s;
                &:hover {
                  background-color: rgba($skyblue, 0.4);
                }
              }
              .value {
                padding: 2px;
                margin: 0 3px;
                width: 40px;
                outline: none;
                height: 23px;
                border-radius: 2px;
                font-size: 14px;
                text-align: center;
                user-select: none;
                line-height: 17px;
              }
            }
            .price {
              border: none;
              background-color: white;
              padding: 2px;
              width: 50px;
              outline: none;
              height: 18px;
              user-select: none;
              border-radius: 2px;
              font-size: 14px;
              text-align: left;
            }
            .total {
              font-size: 14px;
              user-select: none;
              text-align: right;
            }
            .subtotal__price {
              position: relative;
              display: flex;
              align-items: center;
            }
            .remove__cart__item {
              position: absolute;
              right: 15px;
              top: 2px;
              background-color: rgba($red, 0.6);
              color: white;
              border-radius: 50%;
              width: 18px;
              height: 18px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              text-decoration: none;
              border: none;
              outline: none;
              transition: all 0.3s;
              &:hover {
                background-color: rgba($red, 0.9);
              }
            }
          }
        }
        .table__of__content {
          // height: 270px;
          height: calc(100vh - 370px);
        }
      }
      .cart__footer {
        .content {
          border-top: 1px solid #aaa;
          padding: 5px;
          margin-top: 10px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          .total__item {
            margin: 0;
            font-size: 14px;
          }
          .menu__list {
            text-align: left;
            ul {
              margin: 0;
              padding: 0;
              li {
                display: inline-block;
                margin-right: 10px;
                a {
                  color: $skyblue;
                  font-size: 16px;
                  display: block;
                  transition: all 0.3s;
                  &:hover,
                  &:focus {
                    color: $skyblue;
                  }
                }
              }
            }
            .discount {
              font-size: 16px;
              margin: 7px 0 0 0;
              i {
                color: lighten($skyblue, 15);
              }
            }
          }
          .txt__subtotal {
            text-align: center;
            &:last-child {
              text-align: right;
            }
            i {
              color: $skyblue;
            }
            span {
              font-size: 14px;
            }
            p {
              margin: 5px 0 0 0;
              font-size: 14px;
            }
          }
        }
        .total__payment {
          background-color: rgba($skyblue, 0.2);
          text-align: center;
          padding: 10px 5px;
          font-size: 22px;
          color: rgba($skyblue, 1);
          margin: 5px 0 0 0;
        }
      }
      .footer__btn {
        padding: 13px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        button {
          position: relative;
          border: none;
          outline: none;
          width: 200px;
          padding: 8px 10px;
          border-radius: 3px;
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
          font-size: 16px;
          color: white;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            opacity: 0.8;
          }
          &:nth-child(1) i {
            color: $red;
          }
          &:nth-child(2) i {
            color: $khoyre;
          }
          &:nth-child(3) i {
            color: $green2;
          }
          i {
            position: absolute;
            left: 20px;
            top: 50%;
            font-size: 12px;
            transform: translateY(-50%);
            background-color: white;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            line-height: 22px;
          }
        }
      }
    }
    .product__list {
      .product__search__box {
        background-color: white;
        padding: 10px;
        margin-bottom: 20px;
        label {
          border-radius: 5px;
          display: flex;
          border: 1px solid rgba($skyblue, 0.5);
        }
        input {
          background-color: rgba($skyblue, 0.04);
          flex: 1;
          height: 40px;
          outline: none;
          padding-left: 10px;
          transition: all 0.3s;
          border-radius: 5px 0 0 5px;
          border: none;
          font-weight: lighter;
        }
        ::placeholder {
          font-weight: lighter;
          color: $skyblue;
        }
        button {
          width: 40px;
          border: none;
          outline: none;
          color: $skyblue;
          background-color: rgba($skyblue, 0.04);
          font-size: 20px;
          cursor: pointer;
        }
      }
      .product__wrap {
        background-color: white;
        overflow: hidden;
        height: calc(100vh - 222px);
        .scrollbar-macosx {
          height: calc(100% - 12px);
        }
      }
      .product__list__container {
        // height: 410px;
        border-radius: 5px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 10px;
        // overflow: hidden;
        .product__item {
          width: calc(96% / 4);
          position: relative;
          text-align: center;
          cursor: pointer;
          background-color: white;
          margin: 0 1% 1% 0;
          border-radius: 5px;
          overflow: hidden;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          &:nth-child(4n + 4) {
            margin: 0 0 1% 0;
          }
          .product__img {
            padding: 10px;
            position: relative;
            &:hover .cart__overlay {
              opacity: 1;
            }
            &:hover .cart__overlay > .cart__single__item {
              transform: translateY(0);
              opacity: 1;
            }
            img {
              width: auto;
              height: 100px;
            }
            .cart__overlay {
              position: absolute;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.5);
              width: 100%;
              height: 130px;
              display: flex;
              justify-content: center;
              align-items: center;
              opacity: 0;
              transition: all 0.3s;
              .cart__single__item {
                background-color: $skyblue;
                color: white;
                border: none;
                outline: none;
                padding: 5px 10px;
                text-transform: capitalize;
                border-radius: 2px;
                cursor: pointer;
                opacity: 0;
                transform: translateY(-20px);
                transition: all 0.3s;

&:hover {
                  background-color: darken($skyblue, 10);
                }
              }
              .cart__quantity__trigger {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                display: none;
                align-items: center;
                justify-content: center;

p {
                  margin: 0 10px;
                  color: white;
                  font-size: 30px;
                }
                button {
                  background-color: transparent;
                  color: $skyblue;
                  border: none;
                  outline: none;
                  font-size: 30px;
                  cursor: pointer;
                }
              }
            }
          }
          .name,
          .price {
            padding: 0 7px;
          }
          .name {
            margin: 10px 0;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .price {
            color: $skyblue;
            font-size: 14px;
            margin: 0 0 5px 0;
          }
        }
      }
      .footer__content {
        padding: 15px 0 0 0;
        display: flex;
        .pagination {
          margin: 0;
          ul {
            display: flex;
            border-top: 1px solid $skyblue;
            border-bottom: 1px solid $skyblue;
            margin: 0;
            padding: 0;
            border-radius: 3px;
            list-style-type: none;
            overflow: hidden;
            a {
              position: relative;
              padding: 7px 5px;
              margin: 0;
              text-decoration: none;
              display: block;
              border-right: 1px solid $skyblue;
              color: $skyblue;
            }
            .paginationjs-page.active a {
              color: darken($skyblue, 20);
              cursor: not-allowed;
            }
            .paginationjs-next.disabled,
            .paginationjs-prev.disabled {
              background-color: darken($skyblue, 10);
              border-right-color: transparent;
              cursor: not-allowed;
            }
            .paginationjs-prev,
            .paginationjs-next {
              background-color: $skyblue;
              a {
                color: white;
                padding: 7px 10px;
              }
            }
          }
        }
        .btn__box {
          flex: 1;
          text-align: right;
          button {
            background-color: $skyblue;
            color: white;
            border: none;
            outline: none;
            padding: 8px 10px;
            font-size: 15px;
            border-radius: 3px;
            cursor: pointer;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }
}

@import "./sidebar";

@import "./modal";
/*
  +============
  Media Query
*/
@media (min-width: 1367px) {
  #pos__screen
    .middle__area
    .product__list
    .product__list__container
    .product__item {
    width: calc(96% / 3);
  }
}
@media (min-width: 992px) {
  #pos__screen .header_tow {
    display: none;
  }
}

@media (max-width: 992px) {
  #pos__screen {
    .main__header {
      display: none;
      .left__menu,
      .right__menu {
        width: 100%;
      }
      .right__menu {
        margin-top: 10px;
      }
    }
    .middle__area {
      .product__list {
        display: none;
      }
      .cart__product,
      .product__list {
        width: 100%;
      }
    }
  }
}

@media (max-width: 600px) {
  #pos__screen .menu__tow {
    width: 96%;
    right: 50%;
    transform: translateX(50%);
    ul li.it__has__children {
      &:hover .sub__menu {
        transform: translateX(0) translateY(30px);
      }
      .sub__menu {
        top: 0;
      }
    }
  }
  #pos__screen .main__header {
    .left__menu {
      position: relative;
      justify-content: space-between;
      ul:not(.sub-menu) {
        position: absolute;
        right: 0;
        top: 50px;
        display: block;
        columns: 2;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        display: none;
        li {
          display: block;
          text-align: center;
          a {
            padding: 10px;
          }
        }
      }
      .menu__trigger {
        display: block;
      }
    }
  }
  #pos__screen .middle__area .cart__product .footer__btn {
    justify-content: center;
    button {
      margin-bottom: 10px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
  #pos__screen .middle__area .product__list .footer__content {
    flex-wrap: wrap;
    justify-content: center;
    .btn__box {
      text-align: center;
      flex: none;
      margin-top: 20px;
    }
  }
  #pos__screen .main__header .right__menu {
    align-items: flex-start;

.separate__menu {
      flex-wrap: wrap;
      a {
        margin-bottom: 5px;
      }
    }
  }
}
@media (max-width: 420px) {
  #pos__screen .middle__area .cart__product .footer__btn {
    justify-content: center;
    button {
      margin-bottom: 10px;
      &:first-child {
        margin-right: 0;
      }
    }
  }
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: style.scss

Server Info

System Features

User Info