soulsam480/ecom-cms

//variables go here

$bg-primary: #232931;
$bg-seconday: #393e46;
$bg-seconday-light: #474c55;
$primary: #ffffff;
$secondary: #4ecca3;
$bg-danger: #da1a1a;
$bg-danger-light: #cc1515;
$bg-success: #63d363;
$bg-success-secondary: #43b943;

//fonts
@font-face {
  font-family: Source Sans Pro;
  src: url(~@/assets/SourceSansPro-Regular.otf);
}
//todo default styles

button {
  &:focus {
    outline: none !important;
  }
}

//styles go here
:root,
#app {
  background-color: $bg-primary;
  color: white;
  line-height: normal;
  font-family: Source Sans Pro;
  font-weight: 300;
}
a {
  color: unset;
  text-decoration: none !important;
  &:hover {
    color: unset !important;
    text-decoration: none !important;
  }
}

.e-btn {
  background: $bg-seconday;
  border-radius: 2px;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  color: $secondary;
  display: inline-block;
  &:hover {
    color: $secondary;
    background-color: $bg-seconday-light;
  }
  &:focus {
    outline: none;
  }
  &:not([href]) {
    cursor: pointer;
    color: $secondary;
    text-decoration: none;
  }
  &:not([href]):hover {
    color: $secondary;
    text-decoration: none;
  }
  &:disabled {
    background-color: $bg-seconday-light;
    cursor: not-allowed;
  }
  a {
    cursor: pointer;
    color: $secondary;
    text-decoration: none;
    display: block !important;
    width: 100%;
    &:hover {
      color: $secondary;
      text-decoration: none;
    }
  }
}

.e-btn-sm {
  padding: 7px 10px;
}
.e-btn-danger {
  background: $bg-danger;
  border-radius: 2px;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  color: $primary;
  display: inline-block;
  &:hover {
    color: $primary;
    background-color: $bg-danger-light;
  }
  &:focus {
    outline: none;
  }
  &:not([href]) {
    cursor: pointer;
    color: $primary;
    text-decoration: none;
  }
  &:not([href]):hover {
    color: $primary;
    text-decoration: none;
  }
  &:disabled {
    background-color: $bg-danger-light;
    cursor: not-allowed;
  }
  a {
    cursor: pointer;
    color: $primary;
    text-decoration: none;
    display: block !important;
    width: 100%;
    &:hover {
      color: $primary;
      text-decoration: none;
    }
  }
}

.attention {
  &::before {
    content: "";
    padding: 0.5px 30px;
    background-color: $secondary;
    position: absolute;
  }
}
input[type="text"],
input[type="email"],
input[type="password"] {
  background-color: $bg-seconday;
  border: none;
  color: white;
  border-left: 2px solid transparent;
  transition: border 0.5s ease;
  &:focus {
    background-color: $bg-seconday;
    outline: none !important;
    box-shadow: none;
    color: white;
    border-color: #f3971b;
  }
}
.p-card {
  background-color: $bg-seconday !important;
  .e-btn {
    padding: 4px 10px;
  }
}

.notification {
  display: none;
  position: fixed;
  z-index: 20000 !important;
  width: 300px;
  top: 10px;
  right: 30px;
  border-radius: 2px;
  animation: notifyanim 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  span {
    display: block;
    width: 100%;
    padding: 10px;
  }
  .title {
    border-radius: 2px;
    font-size: 20px;
  }
}
.suc {
  display: block !important;
  background-color: $bg-success;
  .title {
    background-color: $bg-success-secondary;
  }
}
.err {
  display: block !important;
  background-color: $bg-danger;
  .title {
    background-color: $bg-danger-light;
  }
}
@keyframes notifyanim {
  from {
    transform: translate(-100px, 0);
    opacity: 0;
  }
  10% {
    transform: translate(20px, 0);
  }
  12% {
    transform: translate(22px, 0);
  }
  16% {
    transform: translate(20px, 0);
    opacity: 1;
  }
  80% {
    transform: translate(20px, 0);
    opacity: 1;
  }
  85% {
    transform: translate(25px, 0);
    opacity: 1;
  }
  to {
    transform: translate(-200px, 0);
    opacity: 0;
  }
}
@keyframes modalanim {
  from {
    transform: translate(0, -200px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 10px);
    opacity: 1;
  }
}

.modal-wrap {
  display: none;
  top: 20%;
  position: fixed;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 20000;
}
.modAct {
  display: block !important;
}
.v-modal {
  position: relative;
  background-color: #222222e7;
  text-align: center;
  padding: 10px;
  border-radius: 2px;
  width: 300px;
  margin: 10px;
  animation: modalanim 0.5s;
  animation-fill-mode: forwards;
  /*   animation-iteration-count: infinite;
 */
  .modal-img img {
    display: block;
    margin: auto;
    width: 50px;
  }
}
.pend {
  background-color: $bg-danger;
  font-size: 19px;
  padding: 5px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
.can {
  background-color: rgb(250, 48, 48);
  font-size: 19px;
  padding: 5px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
.fail {
  background-color: rgb(208, 18, 233);
  font-size: 19px;
  padding: 5px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
.proc {
  background-color: rgb(250, 180, 51);
  font-size: 19px;
  padding: 5px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
.ship {
  background-color: rgb(79, 79, 231);
  font-size: 19px;
  padding: 5px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
.comp {
  background-color: rgb(81, 219, 81);
  font-size: 19px;
  padding: 5px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
.btn_act::after {
  content: " ";
  position: absolute;
  display: block;
  text-align: center;
  background-color: #4ecca3;
  height: 30px;
  width: 1px;
  margin-left: -24px;
  margin-top: -24px;
}
.dropdown {
  display: inline-block;
  .dropdown-menu {
    background: $bg-seconday !important;
    border-radius: 2px !important;
    .dropdown-item {
      background: $bg-seconday !important;
      color: $secondary !important;
      cursor: pointer;
      &:hover {
        color: $secondary !important;
        background-color: $bg-seconday-light !important;
      }
    }
  }
}
//TODO This is the style for npprogress bar
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
  .bar {
    background: #4ecca3;
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
  }
  .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px 1px #4ecca3, 0 0 5px 1px #4ecca3;
    opacity: 1;

    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
  }
}

#nprogress 

/* Fancy blur effect */
#nprogress 

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// ** category modal custom
.modal {
  .modal-header,
  .modal-footer,
  .modal-body {
    padding: 10px 16px;
  }
  .modal-header {
    border: none;
  }
  .modal-footer {
    border: none;
  }
  .custom-content {
    background-color: $bg-primary !important;
    box-shadow: 0 0 5px 0 #4ecca29d;
  }
}
.modal-backdrop.show {
  display: none;
}