mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-31 21:51:10 -04:00
build version 400
This commit is contained in:
Mohit Panjwani
29
resources/assets/sass/components/animation.scss
vendored
Normal file
29
resources/assets/sass/components/animation.scss
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
.shake {
|
||||
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
transform: translate3d(0, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%,
|
||||
90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
.image-upload-box {
|
||||
height: 110px;
|
||||
padding: 20px;
|
||||
background-color: transparent;
|
||||
border: 2px dashed $ls-color-gray--light;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.preview-logo {
|
||||
max-height: 80%;
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
animation: fadeIn 2s ease;
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
color: $ls-color-gray;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.white-icon {
|
||||
font-size: 30px;
|
||||
line-height: 23px;
|
||||
color: $white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
transition: .5s ease;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
height: 130px;
|
||||
width: 130px;
|
||||
.preview-logo {
|
||||
max-width: 80% !important;
|
||||
}
|
||||
|
||||
@keyframes fadeIn{
|
||||
0%{
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
83
resources/assets/sass/components/base-modal.scss
vendored
83
resources/assets/sass/components/base-modal.scss
vendored
@ -1,83 +0,0 @@
|
||||
|
||||
.base-modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(4,4,5,0.1);
|
||||
z-index: 10001;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
border-bottom: 1px solid $ls-color-gray--light;
|
||||
padding: 30px 30px 20px 30px !important;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 10px;
|
||||
background: $ls-color-primary;
|
||||
}
|
||||
|
||||
.modal-heading {
|
||||
font-size: 17.5px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background: white;
|
||||
box-shadow: $shadow-xl;
|
||||
position: relative;
|
||||
max-width: 600px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.size-lg .modal-body {
|
||||
max-width: 800px
|
||||
}
|
||||
|
||||
&.size-sm .modal-body {
|
||||
max-width: 400px
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
top: 23px;
|
||||
right: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $x-small-breakpoint) {
|
||||
.base-modal {
|
||||
|
||||
.modal-body {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
border-radius: 0px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
77
resources/assets/sass/components/base-tabs.scss
vendored
77
resources/assets/sass/components/base-tabs.scss
vendored
@ -1,77 +0,0 @@
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
border-bottom: 2px solid $ls-color-gray--light;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: block;
|
||||
padding: 10px 30px;
|
||||
color: $ls-color-gray--dark;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
.tab-link {
|
||||
color: $ls-color-gray--dark
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
background: $ls-color-gray--dark;
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
display: block;
|
||||
content: '';
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.a-active{
|
||||
font-weight: 500;
|
||||
color: $ls-color-black--light !important;
|
||||
}
|
||||
|
||||
.a-active::after {
|
||||
height: 3px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: $ls-color-primary;
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.router-link-exact-active.active::after {
|
||||
height: 3px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: $ls-color-primary;
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.router-link-exact-active.active {
|
||||
font-weight: 500;
|
||||
color: $ls-color-black--light !important;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
.base-button {
|
||||
|
||||
height: 40px;
|
||||
padding: 6px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
|
||||
&.btn-lg {
|
||||
height: 45px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
height: 34px;
|
||||
padding: 5px 15px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
&.btn-outline-danger:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
&.btn-cursor-not-allowed {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
.base-date-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.date-field {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
padding: 0px 6px 0px 40px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid #817AE3;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
border: 1px solid #FB7178 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vdp-datepicker__calendar-button {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
color: $ls-color-gray;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.icon-fa {
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
.base-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.left-icon {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
min-width: 40px;
|
||||
color: $ls-color-gray;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.right-input-group-text {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
color: $ls-color-gray;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
color: $ls-color-gray;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.small-input {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 8px 13px;
|
||||
text-align: left;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
||||
&.v-money {
|
||||
font-family: Arial, Helvetica, sans-serif !important;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid #817AE3;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
border: 1px solid #FB7178 !important;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: $ls-color-gray--light !important;
|
||||
color: $ls-color-gray--dark !important;
|
||||
}
|
||||
|
||||
&-left-icon {
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
&-right-icon {
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
.base-loader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
||||
&.table-loader {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
height: calc(100% - 80px);
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 6px solid $ls-color-primary--light;
|
||||
border-top-color: $ls-color-gray--light;
|
||||
border-radius: 100%;
|
||||
animation: rotation 0.6s infinite linear 0.25s;
|
||||
|
||||
/* the opacity is used to lazyload the spinner, see animation delay */
|
||||
/* this avoid the spinner to be displayed when visible for a very short period of time */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@function delay($interval, $count, $index) {
|
||||
@return ($index * $interval) - ($interval * $count);
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
@mixin global-bg() {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
@mixin global-animation() {
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@mixin balls() {
|
||||
@include global-bg();
|
||||
|
||||
width: $ball-size;
|
||||
height: $ball-size;
|
||||
border-radius: 100%;
|
||||
margin: $margin;
|
||||
}
|
||||
|
||||
@mixin lines() {
|
||||
@include global-bg();
|
||||
|
||||
width: $line-width;
|
||||
height: $line-height;
|
||||
border-radius: 2px;
|
||||
margin: $margin;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
$primary-color: $crater-theme--light !default;
|
||||
$ball-size: 15px !default;
|
||||
$margin: 2px !default;
|
||||
$line-height: 35px !default;
|
||||
$line-width: 4px !default;
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
@import './animation/variables';
|
||||
@import './animation/mixins';
|
||||
@import './animation/functions';
|
||||
|
||||
$size: 50px;
|
||||
|
||||
@keyframes ball-scale-ripple-multiple {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ball-scale-ripple-multiple ($n:3, $start:0) {
|
||||
@for $i from $start through $n {
|
||||
> div:nth-child(#{$i}) {
|
||||
animation-delay: delay(0.2s, $n, $i - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.ball-scale-ripple-multiple {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
transform: translateY(-25px);
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
@include ball-scale-ripple-multiple();
|
||||
transform: translateY(-$size / 2);
|
||||
|
||||
> div {
|
||||
@include global-animation();
|
||||
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -26px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $primary-color;
|
||||
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
.search-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.activator {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: $shadow-lg;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.selector-menu-above {
|
||||
top: unset !important;
|
||||
bottom: 100% !important;
|
||||
}
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
.base-prefix-input {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 2px 2px;
|
||||
flex-direction: row;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
border-radius: 5px;
|
||||
|
||||
.icon {
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
color: $ls-color-gray;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: 17px;
|
||||
margin-left: 20px;
|
||||
z-index: 1;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 0 0 0;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.prefix-label {
|
||||
display: flex;
|
||||
height: 18px;
|
||||
color: #55547A;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding: 9px 2px 9px 10px;
|
||||
}
|
||||
|
||||
.prefix-input-field {
|
||||
width: 100%;
|
||||
padding: 8px 13px;
|
||||
padding-left: 1px;
|
||||
text-align: left;
|
||||
background: #FFFFFF;
|
||||
border: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
.base-switch {
|
||||
|
||||
input[type=checkbox] {
|
||||
height: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
width: 35px;
|
||||
height: 16px;
|
||||
background: $white;
|
||||
border: 1px solid $ls-color-gray;
|
||||
display: block;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 0px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: $ls-color-gray--dark;
|
||||
border-radius: 15px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
input:checked+label {
|
||||
background: $ls-color-primary--very-light;
|
||||
}
|
||||
|
||||
input:checked+label:after {
|
||||
left: calc(100% - 0px);
|
||||
transform: translateX(-100%);
|
||||
background: $ls-color-primary;
|
||||
}
|
||||
|
||||
label:active:after {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
.base-text-area {
|
||||
width: 100%;
|
||||
|
||||
&.text-area-field {
|
||||
width: 100%;
|
||||
padding: 8px 13px;
|
||||
text-align: left;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
||||
&::placeholder {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid #817AE3;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
border: 1px solid #FB7178 !important;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: $ls-color-gray--light !important;
|
||||
color: $ls-color-gray--dark !important;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
163
resources/assets/sass/components/buttons.scss
vendored
163
resources/assets/sass/components/buttons.scss
vendored
@ -1,163 +0,0 @@
|
||||
.btn {
|
||||
&.btn-pressable:active {
|
||||
transform: translate(0px, 3px);
|
||||
-webkit-transform: translate(0px, 3px);
|
||||
}
|
||||
|
||||
font-family: $base-font-family;
|
||||
}
|
||||
|
||||
// Disable Outline on focus
|
||||
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border: 1px solid $ls-color-gray;
|
||||
background-color: $white;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $ls-color-gray--light;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-default {
|
||||
border: 1px solid $ls-color-gray;
|
||||
background-color: $white;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $ls-color-gray--light;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-theme {
|
||||
@include button-variant($ls-color-primary, $ls-color-primary);
|
||||
$color: $ls-color-secondary;
|
||||
}
|
||||
|
||||
.btn-outline-theme {
|
||||
@include button-outline-variant($ls-color-primary);
|
||||
}
|
||||
|
||||
.btn-theme-light {
|
||||
@include button-variant($ls-color-primary--light, $ls-color-primary--light);
|
||||
$color: $white;
|
||||
}
|
||||
|
||||
// Rounded Button
|
||||
.btn-rounded {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.btn i {
|
||||
width: 1.2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.6rem;
|
||||
line-height: 1em;
|
||||
|
||||
i {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.btn-xs {
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Extra
|
||||
|
||||
.ladda-button {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
|
||||
// Color Overrides
|
||||
.btn-success,.btn-warning, .btn-info {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//dropdown Button
|
||||
.btn-group .btn-group .dropdown-group {
|
||||
|
||||
.btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.btn-group:not(:last-child) > .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
.btn-group-vertical {
|
||||
> .btn-group:not(:last-child) .dropdown-group .btn{
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
> .btn-group .dropdown-group .btn{
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-crater {
|
||||
width: 148px;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
font-family: poppins;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
|
||||
.btn-label {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-crater:focus {
|
||||
outline: 10px auto #817AE3;
|
||||
}
|
||||
|
||||
.btn-crater:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-crater-default {
|
||||
color: #FFFFFF;
|
||||
background: $ls-color-primary;
|
||||
border: 1px solid $ls-color-primary;
|
||||
|
||||
.icon-fa-spinner {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-crater-default:hover {
|
||||
background: #635BF2;
|
||||
}
|
||||
|
||||
.btn-crater-hollow {
|
||||
border: 1px solid $ls-color-primary;
|
||||
color: $ls-color-primary;
|
||||
background: #ffffff;
|
||||
|
||||
.icon-fa-spinner {
|
||||
color: $ls-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-crater-hollow:hover {
|
||||
opacity: 0.9;
|
||||
color: $ls-color-primary;
|
||||
}
|
||||
111
resources/assets/sass/components/cards.scss
vendored
111
resources/assets/sass/components/cards.scss
vendored
@ -1,111 +0,0 @@
|
||||
// cards.scss - Custom Cards
|
||||
.card {
|
||||
margin-bottom: 1.5rem;
|
||||
border: none;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.card-header {
|
||||
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
border-bottom: 1px solid $ls-color-gray--light;
|
||||
|
||||
i {
|
||||
width: 1.3em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: $font-size-section-title;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
background-color: $ls-color-secondary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.caption {
|
||||
display: inline-block;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
float: right;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.section-semi-title {
|
||||
font-size: $font-size-semi-section-title;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&.with-tabs .card-header {
|
||||
padding: 0;
|
||||
|
||||
.caption {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary,
|
||||
.bg-info,
|
||||
.bg-primary,
|
||||
.bg-dark,
|
||||
.bg-success,
|
||||
.bg-danger,
|
||||
.bg-warning {
|
||||
|
||||
h3, h5, h6 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.card
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
.category-modal {
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
text-align: end;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
color: $ls-color-red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(max-width: $x-small-breakpoint ) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.category-modal {
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
77
resources/assets/sass/components/charts.scss
vendored
77
resources/assets/sass/components/charts.scss
vendored
@ -1,77 +0,0 @@
|
||||
// Gauges
|
||||
// -------------------------
|
||||
|
||||
.gauge {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gauge-lg {
|
||||
|
||||
.basic-gauge, .donut-gauge, .color-gauge {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gauge-md {
|
||||
|
||||
.basic-gauge, .donut-gauge, .color-gauge {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gauge-sm {
|
||||
|
||||
.basic-gauge, .donut-gauge, .color-gauge {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
|
||||
&.middle-label {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.gauge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media(max-width: $x-small-breakpoint) {
|
||||
|
||||
.gauge-lg {
|
||||
|
||||
.basic-gauge, .donut-gauge, .color-gauge {
|
||||
height: 180px !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
.customer-modal {
|
||||
|
||||
.card-body {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
text-align: end;
|
||||
font-family: poppins, sans-serif;
|
||||
padding-right: 0;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
color: $ls-color-red;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
|
||||
.btn-crater {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-address-button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $x-small-breakpoint) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.customer-modal {
|
||||
width: 100vw;
|
||||
|
||||
.required {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
|
||||
.customer-select {
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
padding: 15px 15px 5px 15px;
|
||||
|
||||
.search-icon {
|
||||
color: $ls-color-gray;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-data-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $ls-color-gray;
|
||||
padding: 20px 20px;
|
||||
|
||||
label {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
max-height: 173px;
|
||||
min-height: 173px;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 10px 23px;
|
||||
border-bottom: 1px solid rgba(185, 193, 209, 0.41);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background:$ls-color-gray;
|
||||
border-radius: 50%;
|
||||
margin: 1px 21px 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-family: Poppins;
|
||||
margin: 0 0 0 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: $ls-color-gray--dark;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: $ls-color-gray--very-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
6
resources/assets/sass/components/forms.scss
vendored
6
resources/assets/sass/components/forms.scss
vendored
@ -1,6 +0,0 @@
|
||||
.form-control:focus {
|
||||
border-color: #ffde00;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 125, 204, 0.25);
|
||||
box-shadow: 0 0 0 0.2rem #ffde0029
|
||||
}
|
||||
68
resources/assets/sass/components/hamburgers.scss
vendored
68
resources/assets/sass/components/hamburgers.scss
vendored
@ -1,68 +0,0 @@
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: linear;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hamburger-box {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 4.5px;
|
||||
right: 4.5px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
height: 2px;
|
||||
background-color: $header-buttons-font-color;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.hamburger-inner::before {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.hamburger-inner::after {
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
.hamburger--arrowturn.is-active .hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::before {
|
||||
transform: translate3d(3px, 1px, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::after {
|
||||
transform: translate3d(3px, -1px, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
52
resources/assets/sass/components/item-modal.scss
vendored
52
resources/assets/sass/components/item-modal.scss
vendored
@ -1,52 +0,0 @@
|
||||
.base-modal .modal-body {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.item-modal {
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
text-align: end;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
color: $ls-color-red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media(max-width: $x-small-breakpoint ) {
|
||||
|
||||
.base-modal .item-modal .input-label{
|
||||
|
||||
.item-modal {
|
||||
width: 100vw;
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
margin-left: 5px;
|
||||
color: #FB7178;
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
.item-select {
|
||||
|
||||
.main-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 15px 15px 0 15px;
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-data-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $ls-color-gray;
|
||||
padding: 20px 20px;
|
||||
|
||||
label {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 23px;
|
||||
max-height: 56px;
|
||||
border-bottom: 1px solid rgba(185, 193, 209, 0.41);
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: $ls-color-gray--very-light;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
.item-unit-modal {
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: end;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
// left: -10px;
|
||||
color: $ls-color-red;
|
||||
}
|
||||
|
||||
.compound-tax-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(max-width: $x-small-breakpoint ) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.item-unit-modal {
|
||||
width: 100vw;
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
.mail-test-modal {
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: end;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
margin-left: 4px;
|
||||
color: $ls-color-red;
|
||||
}
|
||||
|
||||
.compound-tax-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(max-width: $x-small-breakpoint ) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.mail-test-modal {
|
||||
width: 100vw;
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
$pace-loader-color: #5851d8;
|
||||
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
@ -11,7 +13,7 @@
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
background: darken($pace-loader-color,10%);
|
||||
background: darken($pace-loader-color, 10%);
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
@ -27,7 +29,7 @@
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px $pace-loader-color, 0 0 5px $pace-loader-color;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-moz-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
@ -55,26 +57,56 @@
|
||||
}
|
||||
|
||||
@-webkit-keyframes pace-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes pace-spinner {
|
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes pace-spinner {
|
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
0% {
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes pace-spinner {
|
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
0% {
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pace-spinner {
|
||||
0% { transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
.payment-modes-modal {
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: end;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
// left: -10px;
|
||||
color: $ls-color-red;
|
||||
}
|
||||
|
||||
.compound-tax-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(max-width: $x-small-breakpoint ) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.payment-modes-modal-modal {
|
||||
width: 100vw;
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
391
resources/assets/sass/components/tables.scss
vendored
391
resources/assets/sass/components/tables.scss
vendored
@ -1,391 +0,0 @@
|
||||
.table {
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $ls-color-black;
|
||||
font-weight: 300;
|
||||
border-top: none;
|
||||
font-size: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
// cursor: pointer;
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: $ls-color-black--light;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.table__actions {
|
||||
display: flex;
|
||||
// opacity: 0;
|
||||
|
||||
.btn {
|
||||
padding: 2px 0.5rem;
|
||||
}
|
||||
|
||||
a:not(:last-child) {
|
||||
border-right: 1px solid #d9d9d9;
|
||||
margin-right: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
thead th {
|
||||
border: 0;
|
||||
position: relative;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
.table-component__table__body {
|
||||
position: relative;
|
||||
tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 15px;
|
||||
padding: 25px 15px;
|
||||
height: 80px;
|
||||
background: #ffffff;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.primary {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-dropdown {
|
||||
|
||||
.dropdown-container {
|
||||
margin: 10px 5px 0 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
justify-content:space-between;
|
||||
color: #040405;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body .table {
|
||||
margin-top: -10px;
|
||||
|
||||
th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Vue Table
|
||||
|
||||
.table-component {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-top: -25px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.table-component__filter {
|
||||
align-self: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-component__filter__field {
|
||||
padding: 0.15em 1.25em 0.15em 0.75em;
|
||||
border: solid 1px #e0e0e0;
|
||||
font-size: 15px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-component__filter__clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2em;
|
||||
color: #007593;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-component__filter__field:focus {
|
||||
outline: 0;
|
||||
border-color: $ls-color-primary;
|
||||
}
|
||||
|
||||
.table-component__table-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-component__table {
|
||||
min-width: 100%;
|
||||
border-collapse: separate;
|
||||
table-layout: auto;
|
||||
margin-bottom: 0;
|
||||
border-spacing: 0 15px;
|
||||
}
|
||||
|
||||
.table-component__table__caption {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: -10000px;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.table-component__table th,
|
||||
.table-component__table td {
|
||||
padding: 0.75em 1.25em;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-component__message {
|
||||
color: #999;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.table-component__th--sort,
|
||||
.table-component__th--sort-asc,
|
||||
.table-component__th--sort-desc {
|
||||
// text-decoration: underline;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.table-component__th--sort-asc:after,
|
||||
.table-component__th--sort-desc:after {
|
||||
position: absolute;
|
||||
left: 0.25em;
|
||||
display: inline-block;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.table-component__th--sort-asc:after {
|
||||
content: "↑";
|
||||
}
|
||||
|
||||
.table-component__th--sort-desc:after {
|
||||
content: "↓";
|
||||
}
|
||||
|
||||
|
||||
// Pagination
|
||||
.table-component .pagination {
|
||||
justify-content: flex-end !important;
|
||||
margin-top: 10px;
|
||||
|
||||
.page-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
a i {
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-left: -1px;
|
||||
line-height: 1.25;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
font-style: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.disabled i {
|
||||
color: #d9d9d9;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
table.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
border-bottom: 2px solid $ls-color-gray--light;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
.table-actions-button {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
color: $ls-color-primary--light;
|
||||
user-select: none;
|
||||
|
||||
&::after {
|
||||
vertical-align: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-group.active {
|
||||
|
||||
.dropdown-container {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-stats {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.selectall {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 47px;
|
||||
left: 35px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.table-component td > span:first-child {
|
||||
background: $ls-color-gray--light;
|
||||
color: $ls-color-secondary;
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.select-all-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media(max-width: $small-breakpoint) {
|
||||
.select-all-label {
|
||||
display: inline !important;
|
||||
color: $ls-color-secondary;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectall {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.table-component {
|
||||
|
||||
.dropdown-group {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
thead {
|
||||
left: -9999px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td {
|
||||
margin: 0 -1px -1px 0;
|
||||
padding-top: 40px !important;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
left: 0;
|
||||
border: 1px solid $ls-color-gray--light !important;
|
||||
|
||||
&:not(:first-child) {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1 100%;
|
||||
height: 50px;
|
||||
padding-top: 25px !important;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-top-left-radius: 5px !important;
|
||||
border-top-right-radius: 5px !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: unset;
|
||||
visibility: hidden;
|
||||
height: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
&:nth-last-child(3) {
|
||||
border-bottom-left-radius: 5px !important;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
border-bottom-right-radius: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
td > span:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
right: 0;
|
||||
left: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
194
resources/assets/sass/components/tabs.scss
vendored
194
resources/assets/sass/components/tabs.scss
vendored
@ -1,194 +0,0 @@
|
||||
// tabs.scss - Tabs & Accordians
|
||||
|
||||
.tabs .tab-content {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.tabs-default {
|
||||
|
||||
.nav-link.active {
|
||||
background-color: $ls-color-secondary;
|
||||
color: $ls-color-primary;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $ls-color-secondary;
|
||||
color: $ls-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
border: 1px solid $ls-color-secondary;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid $ls-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-primary {
|
||||
|
||||
.nav-link.active {
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
border: 1px solid $brand-primary;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-simple {
|
||||
|
||||
.nav-link {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
color: $ls-color-black--light;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
border-bottom: 3px solid $ls-color-primary;
|
||||
border-color: lighten($ls-color-primary, 30%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
border-bottom: 3px solid $ls-color-primary;
|
||||
color: $ls-color-black;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
border-bottom: 3px solid $ls-color-primary;
|
||||
border-color: $ls-color-primary;
|
||||
color: $ls-color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs-vertical {
|
||||
|
||||
@include clearfix;
|
||||
|
||||
.nav-tabs {
|
||||
float: left;
|
||||
border-right: 1px solid $ls-color-secondary;
|
||||
border-bottom: none;
|
||||
overflow: hidden;
|
||||
margin-right: 1.2rem;
|
||||
display: block;
|
||||
|
||||
li {
|
||||
float: none;
|
||||
margin-right: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
margin-right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
margin-bottom: .2rem;
|
||||
background-color: $white;
|
||||
border-color: transparent;
|
||||
border-right-color: $ls-color-secondary;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $white;
|
||||
border-color: $ls-color-secondary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $ls-color-secondary;
|
||||
color: $ls-color-primary;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $ls-color-secondary;
|
||||
color: $ls-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-primary .nav-tabs {
|
||||
border-right: 1px solid $brand-primary;
|
||||
|
||||
li a {
|
||||
border-right-color: $brand-primary;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $white;
|
||||
border-color: $brand-primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-simple .nav-tabs {
|
||||
border-right: 1px solid #ddd;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
background: transparent;
|
||||
border-right: 3px solid transparent;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
border-bottom: 0;
|
||||
color: $ls-color-black;
|
||||
border-right: 3px solid $ls-color-primary;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: transparent;
|
||||
border-right: 3px solid $ls-color-primary;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
|
||||
.panel-heading a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: block;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-group .panel + .panel {
|
||||
margin-top: 10px;
|
||||
}
|
||||
70
resources/assets/sass/components/tax-select.scss
vendored
70
resources/assets/sass/components/tax-select.scss
vendored
@ -1,70 +0,0 @@
|
||||
.tax-select {
|
||||
|
||||
.main-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 15px 15px 0 15px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-data-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $ls-color-gray;
|
||||
padding: 20px 20px;
|
||||
|
||||
label {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
max-height: 112px;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
max-height: 56px;
|
||||
border-bottom: 1px solid rgba(185, 193, 209, 0.41);
|
||||
cursor: pointer;
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
color: #262630;
|
||||
line-height: 1.2;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: $ls-color-gray--very-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-disabled {
|
||||
background: $ls-color-gray--very-light;
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.5;
|
||||
z-index: -10;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
.tax-type-modal {
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: end;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.required {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
color: $ls-color-red;
|
||||
}
|
||||
|
||||
.compound-tax-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(max-width: $x-small-breakpoint ) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.tax-type-modal {
|
||||
width: 100vw;
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
.template-modal {
|
||||
|
||||
.template-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
flex-wrap: wrap;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.template-img {
|
||||
margin: 12px;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
}
|
||||
|
||||
.selected-template {
|
||||
border: 1px solid $ls-color-primary;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
color: $ls-color-primary;
|
||||
top: -6px;
|
||||
right: -5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 20px;
|
||||
|
||||
.btn-crater {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $x-small-breakpoint) {
|
||||
|
||||
.base-modal {
|
||||
|
||||
.template-modal {
|
||||
width: 100vw;
|
||||
|
||||
.template-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
133
resources/assets/sass/components/tooltips.scss
vendored
133
resources/assets/sass/components/tooltips.scss
vendored
@ -1,133 +0,0 @@
|
||||
.tooltip {
|
||||
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
|
||||
&.popover {
|
||||
$color: $ls-color-secondary;
|
||||
|
||||
.popover-inner {
|
||||
background: $color;
|
||||
color: white;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-loading {
|
||||
.tooltip-inner {
|
||||
color: $ls-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
$color: rgba($ls-color-light-blue, 0.9);
|
||||
|
||||
.tooltip-inner {
|
||||
background: $color;
|
||||
color: white;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
background: $ls-color-secondary;
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: $ls-color-secondary;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .2s
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-active {
|
||||
opacity: 0
|
||||
}
|
||||
47
resources/assets/sass/components/vue-color.scss
vendored
47
resources/assets/sass/components/vue-color.scss
vendored
@ -1,47 +0,0 @@
|
||||
// MATERIAL COLOR PICKER
|
||||
.vc-material {
|
||||
width: 150px !important;
|
||||
height: 130px !important;
|
||||
}
|
||||
|
||||
.color-pickers-demo {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
// Demo Div
|
||||
.demo-div {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
width: 190px;
|
||||
text-indent: -999px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
top: -10px;
|
||||
background: #194D33;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// Photosop
|
||||
@media only screen and (max-width: $small-breakpoint ) {
|
||||
.vc-photoshop {
|
||||
width: 100% !important;
|
||||
}
|
||||
.vc-chrome {
|
||||
width: 100% !important;
|
||||
}
|
||||
.vc-compact {
|
||||
width: 100% !important;
|
||||
}
|
||||
.vc-slider {
|
||||
width: 100% !important;
|
||||
}
|
||||
.vc-swatches {
|
||||
width: 100% !important;
|
||||
}
|
||||
.vc-sketch {
|
||||
width: 268px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
.vdp-datepicker__calendar .cell {
|
||||
|
||||
&:not(.blank):not(.disabled)
|
||||
{
|
||||
&.day:hover,
|
||||
&.month:hover,
|
||||
&.year:hover {
|
||||
border: 1px solid $ls-color-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $ls-color-primary !important;
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background:lighten($ls-color-primary,25%) !important;
|
||||
}
|
||||
}
|
||||
183
resources/assets/sass/components/vue-dropdown.scss
vendored
183
resources/assets/sass/components/vue-dropdown.scss
vendored
@ -1,183 +0,0 @@
|
||||
.dropdown-group {
|
||||
position: relative;
|
||||
|
||||
&.active .dropdown-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 10rem;
|
||||
padding: .5rem;
|
||||
margin: .125rem 0 0 .125rem;
|
||||
font-size: 1rem;
|
||||
color: $dropdown-link-color;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border-radius: .25rem;
|
||||
box-shadow: $shadow !important;
|
||||
border: none;
|
||||
|
||||
&.align-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-group {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-group-item .dropdown-item {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
padding: 8px 12px;
|
||||
font-weight: 300;
|
||||
color: $ls-color-black;
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: $ls-color-gray--light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $ls-color-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $ls-color-gray--dark;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-activator {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $dropdown-link-color transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 4px 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 18px;
|
||||
transition: all .2s ease-in-out;
|
||||
width: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-group.active .dropdown-activator {
|
||||
a {
|
||||
color: $dropdown-header-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(-90deg);
|
||||
border-color: $ls-color-primary transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
display: block;
|
||||
margin: 0;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
margin: .125rem .125rem 0;
|
||||
|
||||
&.align-right {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdon-group-item {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-divider {
|
||||
border-top: 1px solid $white;
|
||||
height: 1px;
|
||||
margin: .5rem 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-group.dropdown-light {
|
||||
|
||||
.dropdown-container {
|
||||
color: $ls-color-black;
|
||||
background-color: $white;
|
||||
border: 1px solid lighten($ls-color-gray--dark, 10%);
|
||||
|
||||
.dropdown-group-item a {
|
||||
color: $ls-color-black;
|
||||
}
|
||||
|
||||
.dropdown-group-item a.active {
|
||||
color: $ls-color-black;
|
||||
background-color: lighten($ls-color-gray, 7%);
|
||||
}
|
||||
|
||||
.dropdown-group-item a:hover {
|
||||
background-color: lighten($ls-color-gray, 7%);
|
||||
}
|
||||
|
||||
.dropdown-activator::before {
|
||||
border-color: $ls-color-gray--dark transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container .dropdown-group.active .dropdown-activator {
|
||||
a {
|
||||
color: $ls-color-black;
|
||||
background-color: lighten($ls-color-gray, 7%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $ls-color-gray--dark transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-divider {
|
||||
border-top: 1px solid $ls-color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
|
||||
.dropdown-item-icon {
|
||||
width: 20px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
color: $ls-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index:1;
|
||||
|
||||
.action-btn {
|
||||
color: $ls-color-primary;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@ -1,504 +0,0 @@
|
||||
fieldset[disabled] .multiselect {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.in-valid {
|
||||
border: 1px solid $ls-color-red !important;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.multiselect__spinner {
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
width: 48px;
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multiselect__spinner:before,
|
||||
.multiselect__spinner:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -8px 0 0 -8px;
|
||||
z-index: 5;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
border-color: #41b883 transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
.multiselect__spinner:before {
|
||||
animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.multiselect__spinner:after {
|
||||
animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.multiselect__loading-enter-active,
|
||||
.multiselect__loading-leave-active {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.multiselect__loading-enter,
|
||||
.multiselect__loading-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.multiselect,
|
||||
.multiselect__input,
|
||||
.multiselect__single {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
box-sizing: content-box;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
text-align: left;
|
||||
color: #35495e;
|
||||
}
|
||||
|
||||
.multiselect * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.multiselect:focus {
|
||||
border: 1px solid #817ae3 !important;
|
||||
}
|
||||
|
||||
.multiselect--disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.multiselect--active {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.multiselect--active:not(.multiselect--above) .multiselect__current,
|
||||
.multiselect--active:not(.multiselect--above) .multiselect__input,
|
||||
.multiselect--active:not(.multiselect--above) .multiselect__tags {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.multiselect--active .multiselect__select {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
.multiselect--above.multiselect--active .multiselect__current,
|
||||
.multiselect--above.multiselect--active .multiselect__input,
|
||||
.multiselect--above.multiselect--active .multiselect__tags {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.multiselect__input,
|
||||
.multiselect__single {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
padding: 0 0 0 5px;
|
||||
width: calc(100%);
|
||||
transition: border 0.1s ease;
|
||||
box-sizing: border-box;
|
||||
// margin-bottom: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.multiselect__input::placeholder {
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
.multiselect__tag ~ .multiselect__input,
|
||||
.multiselect__tag ~ .multiselect__single {
|
||||
width: auto;
|
||||
}
|
||||
.multiselect__input:hover,
|
||||
.multiselect__single:hover {
|
||||
border-color: #cfcfcf;
|
||||
}
|
||||
.multiselect__input:focus,
|
||||
.multiselect__single:focus {
|
||||
border-color: #a8a8a8;
|
||||
outline: none;
|
||||
}
|
||||
.multiselect__single {
|
||||
padding-left: 5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.multiselect__tags-wrap {
|
||||
display: inline;
|
||||
}
|
||||
.multiselect__tags {
|
||||
min-height: 40px;
|
||||
display: block;
|
||||
padding: 8px 40px 0 8px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.multiselect__tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 4px 26px 4px 10px;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
background: #41b883;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.multiselect__tag-icon {
|
||||
cursor: pointer;
|
||||
margin-left: 7px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-weight: 700;
|
||||
font-style: initial;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.multiselect__tag-icon:after {
|
||||
content: "×";
|
||||
color: #266d4d;
|
||||
font-size: 14px;
|
||||
}
|
||||
.multiselect__tag-icon:focus,
|
||||
.multiselect__tag-icon:hover {
|
||||
background: #369a6e;
|
||||
}
|
||||
.multiselect__tag-icon:focus:after,
|
||||
.multiselect__tag-icon:hover:after {
|
||||
color: white;
|
||||
}
|
||||
.multiselect__current {
|
||||
line-height: 16px;
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px 0;
|
||||
padding-right: 30px;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
cursor: pointer;
|
||||
}
|
||||
.multiselect__select {
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
padding: 4px 8px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.multiselect__select:before {
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 65%;
|
||||
color: $ls-color-gray--dark;
|
||||
margin-top: 4px;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-color: $ls-color-gray--dark transparent transparent transparent;
|
||||
content: "";
|
||||
}
|
||||
.multiselect__placeholder {
|
||||
color: $ls-color-gray;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.multiselect--active .multiselect__placeholder {
|
||||
display: none;
|
||||
}
|
||||
.multiselect__content-wrapper {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
border: 1px solid $ls-color-gray--light;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
z-index: 50;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.multiselect__content {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.multiselect--above .multiselect__content-wrapper {
|
||||
bottom: 100%;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
.multiselect__content::webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.multiselect__element {
|
||||
display: block;
|
||||
}
|
||||
.multiselect__option {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
min-height: 40px;
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.multiselect__option:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
line-height: 40px;
|
||||
padding-right: 12px;
|
||||
padding-left: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.multiselect__option--highlight {
|
||||
background: #41b883;
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
.multiselect__option--highlight:after {
|
||||
content: attr(data-select);
|
||||
background: #41b883;
|
||||
color: white;
|
||||
}
|
||||
.multiselect__option--selected {
|
||||
background: #f3f3f3;
|
||||
color: #35495e;
|
||||
font-weight: bold;
|
||||
}
|
||||
.multiselect__option--selected:after {
|
||||
content: attr(data-selected);
|
||||
color: silver;
|
||||
}
|
||||
.multiselect__option--selected.multiselect__option--highlight {
|
||||
background: #ff6a6a;
|
||||
color: #fff;
|
||||
}
|
||||
.multiselect__option--selected.multiselect__option--highlight:after {
|
||||
background: #ff6a6a;
|
||||
content: attr(data-deselect);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.multiselect--disabled .multiselect__current,
|
||||
.multiselect--disabled .multiselect__select {
|
||||
background: $ls-color-gray--light;
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
.multiselect--disabled .multiselect__tags {
|
||||
background: $ls-color-gray--light;
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
.multiselect--disabled .multiselect__input,
|
||||
.multiselect--disabled .multiselect__single {
|
||||
background: $ls-color-gray--light;
|
||||
color: $ls-color-gray;
|
||||
}
|
||||
|
||||
.multiselect__option--disabled {
|
||||
background: transparent !important;
|
||||
color: #dddddd !important;
|
||||
cursor: text;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.multiselect__option--group {
|
||||
background: #ededed;
|
||||
color: #35495e;
|
||||
}
|
||||
|
||||
.multiselect__option--group.multiselect__option--highlight {
|
||||
background: #35495e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.multiselect__option--group.multiselect__option--highlight:after {
|
||||
background: #35495e;
|
||||
}
|
||||
|
||||
.multiselect__option--disabled.multiselect__option--highlight {
|
||||
background: #dedede;
|
||||
}
|
||||
|
||||
.multiselect__option--group-selected.multiselect__option--highlight {
|
||||
background: #ff6a6a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.multiselect__option--group-selected.multiselect__option--highlight:after {
|
||||
background: #ff6a6a;
|
||||
content: attr(data-deselect);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.multiselect-enter-active,
|
||||
.multiselect-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.multiselect-enter,
|
||||
.multiselect-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.multiselect__strong {
|
||||
margin-bottom: 8px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect__select {
|
||||
right: auto;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect__tags {
|
||||
padding: 8px 8px 0px 40px;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect__content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect__option:after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect__clear {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .multiselect__spinner {
|
||||
right: auto;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
@keyframes spinning {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(2turn);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
|
||||
.multiselect__option--highlight {
|
||||
background: $ls-color-primary;
|
||||
color: $ls-color-black;
|
||||
font-weight: normal !important;
|
||||
|
||||
&.multiselect__option--selected {
|
||||
background: $ls-color-gray--light;
|
||||
color: $ls-color-black;
|
||||
font-size: 1rem;
|
||||
font-weight: normal !important;
|
||||
|
||||
&::after {
|
||||
background: $ls-color-black;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $ls-color-black;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__option--selected {
|
||||
font-weight: normal !important;
|
||||
background: $ls-color-gray--light;
|
||||
}
|
||||
|
||||
.multiselect__tags-wrap .multiselect__tag {
|
||||
background: $ls-color-primary;
|
||||
color: $ls-color-black;
|
||||
|
||||
.multiselect__tag-icon {
|
||||
&:hover {
|
||||
background: $ls-color-primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: $ls-color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: 1px solid $ls-color-red;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
339
resources/assets/sass/components/vue-tabs.scss
vendored
339
resources/assets/sass/components/vue-tabs.scss
vendored
@ -1,339 +0,0 @@
|
||||
.vue-tabs-demo .card-body .default {
|
||||
|
||||
.tabs-component .tabs-component-tabs {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
background-color: #c03;
|
||||
color: #fff;
|
||||
margin-left: 0.35em;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
background-color: #d1e8eb;
|
||||
color: #0c5174;
|
||||
margin-right: 0.35em;
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
align-items: center;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
height: 1.25rem;
|
||||
justify-content: center;
|
||||
line-height: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
padding: 0 0.1em;
|
||||
}
|
||||
|
||||
.tabs-component {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1em;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.suffix {
|
||||
position: absolute;
|
||||
right: -0.725em;
|
||||
top: -0.725em;
|
||||
}
|
||||
|
||||
.tabs-component {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
// Tabs Default
|
||||
//----------------------------------
|
||||
|
||||
.tabs-component.tabs-default {
|
||||
|
||||
.tabs-component-tabs {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.tabs-component-tab {
|
||||
border: none;
|
||||
background-color: none;
|
||||
border-radius: none;
|
||||
margin-right: 0.1rem !important;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tabs-component-tab {
|
||||
margin: 0px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
a {
|
||||
padding: 0.75em 2rem !important;
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
color: #ffde00;
|
||||
}
|
||||
border: 1px solid #333;
|
||||
background: #333;
|
||||
color: #ffde00;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-tab:hover {
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.tabs-component-panels {
|
||||
border-top: 1px solid #333333 !important;
|
||||
border: none;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
padding: 1em 0em !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Tabs Default Primary
|
||||
//----------------------------------
|
||||
|
||||
.tabs-component.tabs-default.primary {
|
||||
|
||||
.tabs-component-tab {
|
||||
|
||||
a {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 1px solid #007dcc;
|
||||
background: #007dcc;
|
||||
color: #fff;
|
||||
}
|
||||
&.is-active a {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid #007dcc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-panels {
|
||||
border-top: 1px solid #007dcc !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Vertical
|
||||
//----------------------------------
|
||||
|
||||
.tabs-component.tabs-vertical {
|
||||
display: flex !important;
|
||||
|
||||
.tabs-component-tabs {
|
||||
display: inline-block !important;
|
||||
border-right: 1px solid #333333 !important;
|
||||
border-radius: 0;
|
||||
padding: 0px;
|
||||
|
||||
.tabs-component-tab {
|
||||
border: none;
|
||||
background-color: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
margin-bottom: 0.2rem !important;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tabs-component-tab {
|
||||
margin: 0px;
|
||||
border: 1px solid transparent;
|
||||
border-right: 0;
|
||||
|
||||
a {
|
||||
padding: 0.75em 2rem !important;
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 1px solid transparent;
|
||||
border-right: 0;
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
&.is-active a {
|
||||
color: #ffde00;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-tab:hover {
|
||||
border: 1px solid #333333;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-panels {
|
||||
border: none;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
padding: 0em 0em !important;
|
||||
padding-left: 2em !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Vertical Primary
|
||||
//----------------------------------
|
||||
|
||||
.tabs-component.tabs-vertical.primary .tabs-component-tabs {
|
||||
border-right: 1px solid #007dcc !important;
|
||||
|
||||
.tabs-component-tab {
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #007dcc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-tab:hover {
|
||||
border: 1px solid #007dcc;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Simple
|
||||
//----------------------------------
|
||||
|
||||
.tabs-component.tabs-simple {
|
||||
|
||||
.tabs-component-tabs {
|
||||
padding: 0px;
|
||||
|
||||
.tabs-component-tab {
|
||||
border: none;
|
||||
background-color: none;
|
||||
border-radius: none;
|
||||
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tabs-component-tab {
|
||||
margin: 0px;
|
||||
a {
|
||||
padding: 0.75em 2rem !important;
|
||||
color: #333333;
|
||||
}
|
||||
a:hover {
|
||||
color: #333333;
|
||||
outline: none;
|
||||
border-bottom: 3px solid #fff299;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-bottom: 3px solid #ffde00;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.is-active a:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-panels {
|
||||
border-top: 1px solid #ddd !important;
|
||||
border: none;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
padding: 1em 0em !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Simple Vertical
|
||||
//----------------------------------
|
||||
|
||||
.tabs-component.tabs-simple-vertical {
|
||||
display: flex !important;
|
||||
|
||||
.tabs-component-tabs {
|
||||
padding: 0px;
|
||||
display: inline-block !important;
|
||||
border-bottom: none;
|
||||
border-right: 1px solid #ddd !important;
|
||||
border-radius: 0;
|
||||
|
||||
.tabs-component-tab {
|
||||
border: none;
|
||||
background-color: none;
|
||||
border-radius: none;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tabs-component-tab {
|
||||
margin: 0px;
|
||||
|
||||
a {
|
||||
padding: 0.75em 2rem !important;
|
||||
color: #333333;
|
||||
border-right: 3px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
border-right: 3px solid #fff299;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-right: 3px solid #ffde00;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.is-active a:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-component-panels {
|
||||
border: none;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
padding: 0em 0em !important;
|
||||
padding-left: 2em !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.tabs-component-tabs {
|
||||
border: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user