mirror of
https://github.com/mokuappio/serverless-invoices.git
synced 2025-10-31 18:01:07 -04:00
Init commit
This commit is contained in:
Marek Fraczyk
7
src/assets/scss/_alerts.scss
Normal file
7
src/assets/scss/_alerts.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.alert {
|
||||
&-secondary {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--shade);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
89
src/assets/scss/_animations.scss
Normal file
89
src/assets/scss/_animations.scss
Normal file
@ -0,0 +1,89 @@
|
||||
@keyframes bump-in {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bump {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, 56px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(32px, 0);
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 4px);
|
||||
}
|
||||
}
|
||||
21
src/assets/scss/_backdrops.scss
Normal file
21
src/assets/scss/_backdrops.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1038;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: $modal-backdrop-bg;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
transition: opacity .4s $base-ease;
|
||||
visibility: visible;
|
||||
&.in {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
83
src/assets/scss/_buttons.scss
Normal file
83
src/assets/scss/_buttons.scss
Normal file
@ -0,0 +1,83 @@
|
||||
.btn {
|
||||
border-width: 0;
|
||||
|
||||
&-sm {
|
||||
&.btn--icon-left {
|
||||
padding-left: $btn-padding-x-sm / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-outline-secondary {
|
||||
border-width: $btn-border-width;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
color: var(--bg-primary);
|
||||
background-color: var(--primary);
|
||||
|
||||
&:hover, &focus {
|
||||
color: var(--bg-primary);
|
||||
background-color: var(--primary-darken);
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active, {
|
||||
color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
&-outline-dark {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
border-width: $btn-border-width;
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active, {
|
||||
color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
&--light {
|
||||
color: $success;
|
||||
background-color: rgba($success, 0.07);
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $success;
|
||||
background-color: rgba($success, 0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&--fab {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
z-index: 1;
|
||||
border-radius: 99px;
|
||||
box-shadow: $box-shadow-light-3;
|
||||
}
|
||||
}
|
||||
14
src/assets/scss/_cards.scss
Normal file
14
src/assets/scss/_cards.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.card {
|
||||
box-shadow: $box-shadow-light-1;
|
||||
border-color: transparent;
|
||||
border-radius: $border-radius-large;
|
||||
border-width: 0;
|
||||
|
||||
&-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
61
src/assets/scss/_checkboxes.scss
Normal file
61
src/assets/scss/_checkboxes.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.custom-checkbox {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
min-height: 1.25em;
|
||||
|
||||
.custom-control-label {
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&--rounded {
|
||||
.custom-control-label {
|
||||
&:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
min-height: 1.5em;
|
||||
|
||||
.custom-control-label {
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--caption {
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&:before {
|
||||
background-color: $gray-400;
|
||||
border-color: $gray-400;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--narrow {
|
||||
&.custom-control {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/assets/scss/_dropdowns.scss
Normal file
11
src/assets/scss/_dropdowns.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.dropdown {
|
||||
&-menu {
|
||||
@extend .bg-base;
|
||||
border-color: transparent;
|
||||
box-shadow: $box-shadow-light-2;
|
||||
}
|
||||
|
||||
&-item {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
6
src/assets/scss/_forms.scss
Normal file
6
src/assets/scss/_forms.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--error-darken);
|
||||
}
|
||||
15
src/assets/scss/_indicators.scss
Normal file
15
src/assets/scss/_indicators.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.indicator {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
vertical-align: middle;
|
||||
|
||||
&--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&--sm {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
63
src/assets/scss/_modals.scss
Normal file
63
src/assets/scss/_modals.scss
Normal file
@ -0,0 +1,63 @@
|
||||
.modal {
|
||||
&-dialog {
|
||||
&.modal-lg {
|
||||
@include media-breakpoint-up(sm) {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fade {
|
||||
&-slide-horizontal {
|
||||
.modal-dialog {
|
||||
transform: translate(32px, 0);
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-slide-vertical {
|
||||
.modal-dialog {
|
||||
transform: translate(0, 16px);
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.high {
|
||||
.modal-dialog {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.modal-dialog {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-backdrop {
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
|
||||
&-content {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: $modal-content-box-shadow-sm-up;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
src/assets/scss/_navs.scss
Normal file
5
src/assets/scss/_navs.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
53
src/assets/scss/_scaffolding.scss
Normal file
53
src/assets/scss/_scaffolding.scss
Normal file
@ -0,0 +1,53 @@
|
||||
.app {
|
||||
&__content {
|
||||
padding-top: 32px;
|
||||
padding-right: 66px;
|
||||
padding-left: 66px;
|
||||
will-change: padding-left;
|
||||
transition: padding-left 0.2s $base-ease;
|
||||
|
||||
//@include media-breakpoint-up(xl) {
|
||||
// padding-left: $sidebar-width + ($grid-gutter-width * 2);
|
||||
// &.app__content--sidebar-collapsed {
|
||||
// padding-left: 66px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//&--sheet-open {
|
||||
// @include media-breakpoint-up(xl) {
|
||||
// padding-right: $sheet-width + ($grid-gutter-width * 2);
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace {
|
||||
.app {
|
||||
&__content {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: $sidebar-width + ($grid-gutter-width * 2);
|
||||
&.app__content--sidebar-collapsed {
|
||||
padding-left: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
z-index: 2;
|
||||
|
||||
&--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
18
src/assets/scss/_snackbars.scss
Normal file
18
src/assets/scss/_snackbars.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.snackbar {
|
||||
&.vue-notification-template {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
padding: ($spacer / 4) ($spacer);
|
||||
margin-bottom: $spacer / 4;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $box-shadow-2;
|
||||
background-color: $dark;
|
||||
font-size: .875rem;
|
||||
color: $light-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-notification-wrapper {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
41
src/assets/scss/_surfaces.scss
Normal file
41
src/assets/scss/_surfaces.scss
Normal file
@ -0,0 +1,41 @@
|
||||
.dp {
|
||||
&--00 {
|
||||
background-color: var(--dp00);
|
||||
}
|
||||
|
||||
&--01 {
|
||||
background-color: var(--dp01);
|
||||
}
|
||||
|
||||
&--02 {
|
||||
background-color: var(--dp02);
|
||||
}
|
||||
|
||||
&--03 {
|
||||
background-color: var(--dp03);
|
||||
}
|
||||
|
||||
&--04 {
|
||||
background-color: var(--dp04);
|
||||
}
|
||||
|
||||
&--06 {
|
||||
background-color: var(--dp06);
|
||||
}
|
||||
|
||||
&--08 {
|
||||
background-color: var(--dp08);
|
||||
}
|
||||
|
||||
&--12 {
|
||||
background-color: var(--dp12);
|
||||
}
|
||||
|
||||
&--16 {
|
||||
background-color: var(--dp16);
|
||||
}
|
||||
|
||||
&--24 {
|
||||
background-color: var(--dp24);
|
||||
}
|
||||
}
|
||||
31
src/assets/scss/_tables.scss
Normal file
31
src/assets/scss/_tables.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.table {
|
||||
&--card {
|
||||
background-color: var(--dp02);
|
||||
border-radius: $card-border-radius;
|
||||
box-shadow: $box-shadow-light-1;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: .75em;
|
||||
font-size: .875rem;
|
||||
border-top-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
&.align-middle {
|
||||
td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
tr {
|
||||
transition: background-color $link-transition-duration $base-ease;
|
||||
}
|
||||
}
|
||||
59
src/assets/scss/_transitions.scss
Normal file
59
src/assets/scss/_transitions.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slideFade-enter-active,
|
||||
.slideFade-leave-active {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
transition: all 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.slideFade-enter,
|
||||
.slideFade-leave-to {
|
||||
transform: translate(-4px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slideLeftFade-enter-active,
|
||||
.slideLeftFade-leave-active {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
transition: all 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.slideLeftFade-enter,
|
||||
.slideLeftFade-leave-to {
|
||||
transform: translate(32px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.slideFromTopFade-enter-active,
|
||||
.slideFromTopFade-leave-active {
|
||||
transform: translate(0, 16px);
|
||||
opacity: 1;
|
||||
transition: all 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.slideFromTopFade-enter,
|
||||
.slideFromTopFade-leave-to {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bump-enter-active,
|
||||
.bump-leave-active {
|
||||
animation: bump-in .5s;
|
||||
}
|
||||
|
||||
.bump-enter,
|
||||
.bump-leave-to {
|
||||
animation: bump-in .5s reverse;
|
||||
}
|
||||
73
src/assets/scss/_type.scss
Normal file
73
src/assets/scss/_type.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.material-icons.md-10 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.material-icons.md-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.material-icons.md-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.material-icons.md-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.material-icons.md-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.material-icons.md-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
.material-icons.md-dark {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.material-icons.md-dark.md-inactive {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
.material-icons.md-light {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.material-icons.md-light.md-inactive {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
color: var(--text-caption);
|
||||
|
||||
.form-control {
|
||||
color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--orange) !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
141
src/assets/scss/_utilities.scss
Normal file
141
src/assets/scss/_utilities.scss
Normal file
@ -0,0 +1,141 @@
|
||||
.js-loading *,
|
||||
.js-loading *:before,
|
||||
.js-loading *:after {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $body-bg;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.scaling-svg-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-bottom: 100%;
|
||||
/* override this inline for aspect ratio other than square */
|
||||
}
|
||||
|
||||
.scaling-svg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
.form-control {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.pulsate {
|
||||
animation-name: pulsate;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bump {
|
||||
animation-name: bump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bg-gradient-gray {
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,eceff1+100 */
|
||||
background: rgb(255, 255, 255); /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(236, 239, 241, 1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(236, 239, 241, 1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(236, 239, 241, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eceff1', GradientType=1); /* IE6-9 fallback on horizontal gradient */
|
||||
}
|
||||
|
||||
.min-vh-50 {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.break-line {
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
// scrollbar styles
|
||||
scrollbar-color: var(--text-caption);
|
||||
scrollbar-width: 12px;
|
||||
scrollbar-gutter: always;
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--shade);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--text-caption);
|
||||
&:hover {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-color: var(--bg-primary);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-shade {
|
||||
background-color: var(--shade) !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: var(--success) !important;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: var(--text-primary) !important;
|
||||
}
|
||||
342
src/assets/scss/_variables.scss
Normal file
342
src/assets/scss/_variables.scss
Normal file
@ -0,0 +1,342 @@
|
||||
:root {
|
||||
--text-primary: rgba(0, 0, 0, .87);
|
||||
--text-secondary: rgba(0, 0, 0, .6);
|
||||
--text-disabled: rgba(0, 0, 0, .38);
|
||||
--text-caption: rgba(0, 0, 0, .12);
|
||||
--divider: rgba(0, 0, 0, .12);
|
||||
--shade: rgba(0, 0, 0, .04);
|
||||
|
||||
--primary: #2962ff;
|
||||
--primary-darken: #0D47A1;
|
||||
--success: #64DD17;
|
||||
--error: #C62828;
|
||||
--error-darken: #B71C1C;
|
||||
|
||||
--bg-body: #f3f8f8;
|
||||
--bg-primary: #fff;
|
||||
--bg-secondary: #EEEEEE;
|
||||
--bg-control: transparent;
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: #fff;
|
||||
--dp01: #fff;
|
||||
--dp02: #fff;
|
||||
--dp03: #fff;
|
||||
--dp04: #fff;
|
||||
--dp06: #fff;
|
||||
--dp08: #fff;
|
||||
--dp12: #fff;
|
||||
--dp16: #fff;
|
||||
--dp24: #fff;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--text-primary: rgba(255, 255, 255, .87);
|
||||
--text-secondary: rgba(255, 255, 255, .6);
|
||||
--text-disabled: rgba(255, 255, 255, .38);
|
||||
--text-caption: rgba(255, 255, 255, .12);
|
||||
--divider: rgba(255, 255, 255, .2);
|
||||
--shade: rgba(255, 255, 255, .04);
|
||||
|
||||
--primary: #bbdefb;
|
||||
--primary-darken: #90CAF9;
|
||||
--success: #DCEDC8;
|
||||
--error: #FFCDD2;
|
||||
--error-darken: #EF9A9A;
|
||||
|
||||
|
||||
--bg-body: #121212;
|
||||
--bg-primary: #121212;
|
||||
--bg-secondary: #616161;
|
||||
--bg-control: rgba(255, 255, 255, 0.04);
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: transparent;
|
||||
--dp01: rgba(255, 255, 255, 0.05);
|
||||
--dp02: rgba(255, 255, 255, 0.07);
|
||||
--dp03: rgba(255, 255, 255, 0.08);
|
||||
--dp04: rgba(255, 255, 255, 0.09);
|
||||
--dp06: rgba(255, 255, 255, 0.11);
|
||||
--dp08: rgba(255, 255, 255, 0.12);
|
||||
--dp12: rgba(255, 255, 255, 0.14);
|
||||
--dp16: rgba(255, 255, 255, 0.15);
|
||||
--dp24: rgba(255, 255, 255, 0.16);
|
||||
|
||||
&[data-theme="light"] {
|
||||
--text-primary: rgba(0, 0, 0, .87);
|
||||
--text-secondary: rgba(0, 0, 0, .6);
|
||||
--text-disabled: rgba(0, 0, 0, .38);
|
||||
--text-caption: rgba(0, 0, 0, .12);
|
||||
--divider: rgba(0, 0, 0, .12);
|
||||
--shade: rgba(0, 0, 0, .04);
|
||||
|
||||
--primary: #2962ff;
|
||||
--primary-darken: #0D47A1;
|
||||
--success: #64DD17;
|
||||
--error: #C62828;
|
||||
--error-darken: #B71C1C;
|
||||
|
||||
--bg-body: #f3f8f8;
|
||||
--bg-primary: #fff;
|
||||
--bg-secondary: #EEEEEE;
|
||||
--bg-control: transparent;
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: #fff;
|
||||
--dp01: #fff;
|
||||
--dp02: #fff;
|
||||
--dp03: #fff;
|
||||
--dp04: #fff;
|
||||
--dp06: #fff;
|
||||
--dp08: #fff;
|
||||
--dp12: #fff;
|
||||
--dp16: #fff;
|
||||
--dp24: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-theme="dark"] {
|
||||
--text-primary: rgba(255, 255, 255, .87);
|
||||
--text-secondary: rgba(255, 255, 255, .6);
|
||||
--text-disabled: rgba(255, 255, 255, .38);
|
||||
--text-caption: rgba(255, 255, 255, .12);
|
||||
--divider: rgba(255, 255, 255, .2);
|
||||
--shade: rgba(255, 255, 255, .04);
|
||||
|
||||
--primary: #bbdefb;
|
||||
--primary-darken: #90CAF9;
|
||||
--success: #DCEDC8;
|
||||
--error: #FFCDD2;
|
||||
--error-darken: #EF9A9A;
|
||||
|
||||
|
||||
--bg-body: #121212;
|
||||
--bg-primary: #121212;
|
||||
--bg-secondary: #616161;
|
||||
--bg-control: rgba(255, 255, 255, 0.04);
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: transparent;
|
||||
--dp01: rgba(255, 255, 255, 0.05);
|
||||
--dp02: rgba(255, 255, 255, 0.07);
|
||||
--dp03: rgba(255, 255, 255, 0.08);
|
||||
--dp04: rgba(255, 255, 255, 0.09);
|
||||
--dp06: rgba(255, 255, 255, 0.11);
|
||||
--dp08: rgba(255, 255, 255, 0.12);
|
||||
--dp12: rgba(255, 255, 255, 0.14);
|
||||
--dp16: rgba(255, 255, 255, 0.15);
|
||||
--dp24: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
$blue: #03A9F4;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #F44336;
|
||||
$orange: #E65100;
|
||||
$yellow: #ffc107;
|
||||
//$green: #64DD17;
|
||||
//$green: #009688;
|
||||
$green: #64DD17;
|
||||
$teal: #20c997;
|
||||
$cyan: #17a2b8;
|
||||
$white: #fff;
|
||||
$blue-dark: #0091EA;
|
||||
|
||||
|
||||
@import "../../../node_modules/bootstrap/scss/functions";
|
||||
@import "../../../node_modules/bootstrap/scss/variables";
|
||||
@import "../../../node_modules/bootstrap/scss/mixins";
|
||||
|
||||
$warning: $orange;
|
||||
|
||||
//$box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
$box-shadow-1: rgba(23, 43, 77, 0.2) 0px 1px 1px, rgba(23, 43, 77, 0.2) 0px 0px 1px;
|
||||
$box-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
$box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
$box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
$box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
$box-shadow-light-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light-2: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light-3: 0 10px 20px rgba(0, 0, 0, 0.09), 0 6px 6px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light-4: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.11);
|
||||
$box-shadow-light-5: 0 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.11);
|
||||
$box-shadow-light-6: 0 0 82px 2px rgba(61, 69, 74, .2);
|
||||
|
||||
$font-family-base: 'Work Sans', sans-serif;
|
||||
|
||||
$gray-primary: rgba(0, 0, 0, 0.87);
|
||||
$gray-medium: rgba(0, 0, 0, 0.72);
|
||||
$gray-secondary: rgba(0, 0, 0, 0.54);
|
||||
$gray-caption: rgba(0, 0, 0, 0.20);
|
||||
$gray-divider: rgba(0, 0, 0, 0.12);
|
||||
$gray-highlight: rgba(0, 0, 0, 0.07);
|
||||
$gray-shade: rgba(0, 0, 0, 0.02);
|
||||
|
||||
$light-primary: rgba(255, 255, 255, 0.87);
|
||||
$light-secondary: rgba(255, 255, 255, 0.54);
|
||||
$light-caption: rgba(255, 255, 255, 0.20);
|
||||
$light-divider: rgba(255, 255, 255, 0.12);
|
||||
$light-highlight: rgba(255, 255, 255, 0.07);
|
||||
$light-shade: rgba(255, 255, 255, 0.03);
|
||||
|
||||
$body-bg: var(--bg-body);
|
||||
$body-color: var(--text-primary);
|
||||
|
||||
$line-height-base: 1.25;
|
||||
|
||||
$btn-font-weight: 500;
|
||||
|
||||
$card-cap-bg: transparent;
|
||||
|
||||
$grid-gutter-width: 32px;
|
||||
|
||||
$spacer: 1rem;
|
||||
|
||||
$alert-bg-level: -11;
|
||||
$alert-border-level: -11;
|
||||
$alert-padding-x: .75rem;
|
||||
|
||||
$badge-font-size: 68.75%;
|
||||
|
||||
$border-color: var(--text-caption);
|
||||
|
||||
$border-radius-large: 6px;
|
||||
|
||||
$base-ease: cubic-bezier(0, 0, 0.2, 1) 0ms;
|
||||
|
||||
$hr-border-color: var(--divider);
|
||||
|
||||
$dropdown-bg: var(--dp24);
|
||||
$dropdown-border-color: transparent;
|
||||
$dropdown-color: $body-color;
|
||||
$dropdown-link-color: $body-color;
|
||||
$dropdown-link-active-color: $body-color;
|
||||
$dropdown-link-active-bg: var(--shade);
|
||||
$dropdown-link-hover-bg: var(--shade);
|
||||
$dropdown-link-hover-color: $dropdown-link-color;
|
||||
$dropdown-divider-bg: $hr-border-color;
|
||||
$dropdown-header-color: var(--text-secondary);
|
||||
|
||||
$close-color: var(--text-primary);
|
||||
$close-text-shadow: none;
|
||||
$close-font-weight: 500;
|
||||
|
||||
$modal-header-border-color: transparent;
|
||||
$modal-footer-border-color: transparent;
|
||||
$modal-transition: all 200ms $base-ease;
|
||||
$modal-backdrop-bg: var(--scrim);
|
||||
$modal-backdrop-opacity: 1;
|
||||
$modal-content-border-color: transparent;
|
||||
$modal-content-box-shadow-sm-up: $box-shadow-light-6;
|
||||
|
||||
$navbar-light-color: var(--text-secondary);
|
||||
$navbar-light-hover-color: $body-color;
|
||||
$navbar-light-active-color: $body-color;
|
||||
|
||||
$nav-tabs-link-active-bg: var(--bg-control);
|
||||
$nav-tabs-link-active-border-color: transparent;
|
||||
$nav-tabs-border-color: transparent;
|
||||
$nav-tabs-link-hover-border-color: transparent;
|
||||
$nav-tabs-link-active-color: var(--text-primary);
|
||||
|
||||
$navbar-padding-y: $spacer;
|
||||
$navbar-nav-link-padding-x: 1rem;
|
||||
|
||||
$navbar-brand-font-size: 1.75rem;
|
||||
|
||||
$nav-pills-link-active-bg: var(--text-caption);
|
||||
$nav-pills-link-active-color: $body-color;
|
||||
|
||||
$input-color: $body-color;
|
||||
$input-focus-color: $input-color;
|
||||
$input-border-color: var(--text-caption);
|
||||
$input-bg: var(--bg-control);
|
||||
$input-focus-bg: $input-bg;
|
||||
$input-disabled-bg: var(--text-disabled);
|
||||
$input-btn-padding-x: $grid-gutter-width / 2;
|
||||
$input-placeholder-color: var(--text-disabled);
|
||||
|
||||
$input-focus-box-shadow: none;
|
||||
$input-focus-border-color: $body-color;
|
||||
|
||||
$btn-font-size-sm: $font-size-sm;
|
||||
$btn-focus-box-shadow: none;
|
||||
$btn-padding-x: $input-btn-padding-x;
|
||||
|
||||
$headings-font-weight: $font-weight-normal;
|
||||
|
||||
$input-group-addon-bg: $input-bg;
|
||||
$input-group-addon-border-color: $input-border-color;
|
||||
|
||||
$list-group-border-color: transparent;
|
||||
$list-group-bg: var(--bg-control);
|
||||
$list-group-color: $body-color;
|
||||
$list-group-item-padding-y: $grid-gutter-width / 4;
|
||||
$list-group-item-padding-x: $grid-gutter-width / 2;
|
||||
|
||||
$progress-bar-bg: var(--text-caption);
|
||||
|
||||
$spacers: (0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, 6: $spacer * 5);
|
||||
|
||||
// Custom
|
||||
|
||||
$link-transition-duration: 0.15s;
|
||||
|
||||
$text-muted: var(--text-disabled);
|
||||
|
||||
$sidebar-width: 220px;
|
||||
$sidebar-width-collapsed: 72px;
|
||||
|
||||
$sheet-width: 360px;
|
||||
|
||||
$tracker-width: $sheet-width * 1.5;
|
||||
|
||||
$table-cell-padding: $grid-gutter-width / 2;
|
||||
$table-border-color: $border-color;
|
||||
$table-border-color: var(--text-caption);
|
||||
$table-hover-bg: var(--divider);
|
||||
$table-color: $body-color;
|
||||
$table-hover-color: $body-color;
|
||||
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 600px,
|
||||
md: 800px,
|
||||
lg: 1000px,
|
||||
xl: 1280px,
|
||||
xxl: 1600px
|
||||
);
|
||||
|
||||
// vue2-datepicker variables
|
||||
|
||||
$default-color: var(--text-primary);
|
||||
$primary-color: var(--primary);
|
||||
|
||||
$today-color: $primary-color;
|
||||
|
||||
$disabled-color: var(--text-secondary);
|
||||
$disabled-background-color: var(--text-disabled);
|
||||
|
||||
$calendar-active-color: var(--text-primary);
|
||||
$calendar-active-background-color: $primary-color !default;
|
||||
|
||||
$calendar-hover-color: $default-color !default;
|
||||
$calendar-hover-background-color: $calendar-active-background-color;
|
||||
|
||||
$calendar-in-range-color: $default-color !default;
|
||||
$calendar-in-range-background-color: $calendar-active-background-color;
|
||||
|
||||
$time-active-color: $primary-color !default;
|
||||
$time-active-background-color: transparent !default;
|
||||
|
||||
$time-hover-color: $default-color !default;
|
||||
$time-hover-background-color: $calendar-active-background-color;
|
||||
|
||||
$input-border-radius: $input-border-radius;
|
||||
28
src/assets/scss/app.scss
Normal file
28
src/assets/scss/app.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import "alerts";
|
||||
@import "animations";
|
||||
@import "backdrops";
|
||||
@import "buttons";
|
||||
@import "cards";
|
||||
@import "checkboxes";
|
||||
@import "dropdowns";
|
||||
@import "forms";
|
||||
@import "indicators";
|
||||
@import "modals";
|
||||
@import "navs";
|
||||
@import "scaffolding";
|
||||
@import "snackbars";
|
||||
@import "surfaces";
|
||||
@import "tables";
|
||||
@import "transitions";
|
||||
@import "type";
|
||||
@import "utilities";
|
||||
|
||||
@import "components/app-editable";
|
||||
@import "components/color-picker";
|
||||
@import "components/duration-popover";
|
||||
@import "components/empty-state";
|
||||
@import "components/invoice";
|
||||
@import "components/multiselect";
|
||||
@import "components/search-popover";
|
||||
@import "components/vue2-datepicker";
|
||||
@import "components/vue-autosuggest";
|
||||
25
src/assets/scss/components/_app-editable.scss
Normal file
25
src/assets/scss/components/_app-editable.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.editable {
|
||||
&__project-selector {
|
||||
button {
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom-color: var(--divider);
|
||||
background-color: var(--shade);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
@media print {
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/assets/scss/components/_color-picker.scss
Normal file
20
src/assets/scss/components/_color-picker.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.color-picker {
|
||||
.dropdown-menu {
|
||||
min-width: initial;
|
||||
width: 11.25rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.25rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
23
src/assets/scss/components/_duration-popover.scss
Normal file
23
src/assets/scss/components/_duration-popover.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.duration-popover__container {
|
||||
display: inline-block;
|
||||
|
||||
.duration-popover__overlay {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.duration-popover__select {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp24);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 340px;
|
||||
box-shadow: $box-shadow-light-3;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
24
src/assets/scss/components/_empty-state.scss
Normal file
24
src/assets/scss/components/_empty-state.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.empty-state {
|
||||
&__task {
|
||||
height: 72px;
|
||||
border-radius: $border-radius;
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f8f9fa+100 */
|
||||
background: rgb(255, 255, 255); /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f8f9fa', GradientType=1); /* IE6-9 fallback on horizontal gradient */
|
||||
transition: opacity $link-transition-duration $base-ease;
|
||||
}
|
||||
|
||||
&__text {
|
||||
height: 12px;
|
||||
width: 60%;
|
||||
border-radius: $border-radius;
|
||||
background-color: $gray-highlight;
|
||||
}
|
||||
|
||||
&--active {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
29
src/assets/scss/components/_invoice.scss
Normal file
29
src/assets/scss/components/_invoice.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.invoice-box {
|
||||
margin: auto;
|
||||
padding: 30px;
|
||||
box-shadow: $box-shadow-light-1;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html, body {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
.invoice-box {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-invoice-row {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: 10px;
|
||||
}
|
||||
299
src/assets/scss/components/_multiselect.scss
Normal file
299
src/assets/scss/components/_multiselect.scss
Normal file
@ -0,0 +1,299 @@
|
||||
.multiselect {
|
||||
color: var(--text-primary) !important;
|
||||
|
||||
&--active {
|
||||
&.multiselect-custom {
|
||||
.multiselect__tags {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
.multiselect__tags {
|
||||
padding-top: $input-padding-y-lg !important;
|
||||
padding-bottom: $input-padding-y-lg !important;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
font-weight: 500 !important;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&--form-control {
|
||||
.multiselect {
|
||||
.multiselect__tags {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.multiselect__single,
|
||||
.multiselect__input {
|
||||
padding: $input-padding-y ($input-padding-x * 3) $input-padding-y $input-padding-x;
|
||||
font-size: $input-font-size;
|
||||
line-height: $input-line-height;
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
&:before {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--capitalize {
|
||||
.multiselect__option {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
&--primary {
|
||||
.multiselect {
|
||||
.multiselect__tags,
|
||||
.multiselect__single,
|
||||
.multiselect__input {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
&::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
&:before {
|
||||
color: var(--bg-primary);
|
||||
border-color: var(--bg-primary) transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
min-height: $input-height !important;
|
||||
|
||||
.multiselect__spinner {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.multiselect__spinner:after,
|
||||
.multiselect__spinner:before {
|
||||
border-color: $green transparent transparent;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__input,
|
||||
.multiselect__single {
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-weight: $input-font-weight;
|
||||
font-size: $input-font-size;
|
||||
color: $input-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.multiselect__input:-ms-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
.multiselect__input::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
.multiselect__input:hover,
|
||||
.multiselect__single:hover {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
.multiselect__input:focus,
|
||||
.multiselect__single:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
min-height: $input-height;
|
||||
border: 1px solid $input-border-color;
|
||||
background: $input-bg;
|
||||
//padding-bottom: 4px;
|
||||
font-size: $input-font-size;
|
||||
border-radius: $border-radius;
|
||||
padding: $input-padding-y ($input-padding-x * 2.5) $input-padding-y $input-padding-x;
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
color: var(--text-primary);
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.multiselect__tag-icon:after {
|
||||
color: darken($green, 0.07);
|
||||
}
|
||||
|
||||
.multiselect__tag-icon:focus,
|
||||
.multiselect__tag-icon:hover {
|
||||
background: darken($green, 0.07);
|
||||
}
|
||||
|
||||
.multiselect__tag-icon:focus:after,
|
||||
.multiselect__tag-icon:hover:after {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__current {
|
||||
border: 1px solid var(--text-secondary);
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
transition: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -4px;
|
||||
right: 12px;
|
||||
color: $gray-600;
|
||||
border-color: $gray-600 transparent transparent;
|
||||
//display: none;
|
||||
//color: $gray-light;
|
||||
//border-color: $gray-light transparent transparent;
|
||||
}
|
||||
|
||||
//&:after {
|
||||
// position: absolute;
|
||||
// //font-family: 'Material Icons';
|
||||
// display: inline-block;
|
||||
// //content: '\e313';
|
||||
// top: 50%;
|
||||
// margin-top: -8px;
|
||||
// right: 6px;
|
||||
// font-size: 18px;
|
||||
// pointer-events: none;
|
||||
// color: inherit;
|
||||
//}
|
||||
}
|
||||
|
||||
&.multiselect--active {
|
||||
.multiselect__select {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__placeholder {
|
||||
color: var(--bg-secondary);
|
||||
font-weight: 400;
|
||||
padding-top: 9px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
//@extend .bg-base;
|
||||
//background: var(--dp24);
|
||||
border: 1px solid var(--bg-primary);
|
||||
box-shadow: $box-shadow-2;
|
||||
}
|
||||
|
||||
.multiselect__content {
|
||||
position: relative;
|
||||
@extend .bg-base;
|
||||
background: var(--dp24);
|
||||
}
|
||||
|
||||
.multiselect--above .multiselect__content-wrapper {
|
||||
border-top: 1px solid var(--bg-primary);
|
||||
}
|
||||
|
||||
.multiselect__option {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight {
|
||||
background: var(--shade);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight:after {
|
||||
background: var(--shade);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--selected {
|
||||
background: $input-bg;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__option--selected.multiselect__option--highlight {
|
||||
background: $input-bg;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__option--selected.multiselect__option--highlight:after {
|
||||
background: $input-bg;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 1 !important;
|
||||
background: $input-disabled-bg;
|
||||
|
||||
.multiselect__tags {
|
||||
background: $input-disabled-bg;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
opacity: .35;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__option--disabled {
|
||||
background: $input-disabled-bg !important;
|
||||
color: var(--text-disabled) !important;
|
||||
}
|
||||
|
||||
.multiselect__option--group {
|
||||
background: $gray-100;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--group.multiselect__option--highlight {
|
||||
background: inherit;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__option--group.multiselect__option--highlight:after {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--disabled.multiselect__option--highlight {
|
||||
background: $input-disabled-bg;
|
||||
}
|
||||
|
||||
.multiselect__option--group-selected.multiselect__option--highlight {
|
||||
background: $input-bg;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--group-selected.multiselect__option--highlight:after {
|
||||
background: $input-bg;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
75
src/assets/scss/components/_search-popover.scss
Normal file
75
src/assets/scss/components/_search-popover.scss
Normal file
@ -0,0 +1,75 @@
|
||||
.search-popover__container {
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.search-popover__overlay {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search-popover__select {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp24);
|
||||
|
||||
z-index: 6;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 320px;
|
||||
box-shadow: $box-shadow-light-5;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: 0.75rem;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autosuggest__results-container {
|
||||
ul {
|
||||
@extend .scrollbar;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0 0 0;
|
||||
|
||||
li {
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.autosuggest__results-before {
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: initial;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.autosuggest__results-item {
|
||||
border-radius: $border-radius;
|
||||
transition: background-color $link-transition-duration $base-ease;
|
||||
|
||||
&--highlighted {
|
||||
background-color: $gray-highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/assets/scss/components/_vue-autosuggest.scss
Normal file
50
src/assets/scss/components/_vue-autosuggest.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.typeahead {
|
||||
.autosuggest__results-container {
|
||||
@extend .scrollbar;
|
||||
position: absolute;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: $box-shadow-light-3;
|
||||
z-index: 3;
|
||||
background: var(--bg-primary);
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0 .5rem 0;
|
||||
|
||||
li {
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
&.autosuggest__results-before {
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: initial;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.autosuggest__results {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp12);
|
||||
}
|
||||
|
||||
.autosuggest__results-item--highlighted {
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
.autosuggest__results-item--highlighted {
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
33
src/assets/scss/components/_vue2-datepicker.scss
Normal file
33
src/assets/scss/components/_vue2-datepicker.scss
Normal file
@ -0,0 +1,33 @@
|
||||
@import '~vue2-datepicker/scss/index';
|
||||
|
||||
.mx-input {
|
||||
height: $input-height;
|
||||
border-color: $input-border-color;
|
||||
box-shadow: none;
|
||||
color: $input-color;
|
||||
font-size: $input-font-size;
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
background-color: $input-bg;
|
||||
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-icon-calendar,
|
||||
.mx-icon-clear {
|
||||
color: $input-color;
|
||||
&:hover {
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-datepicker-main {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp24);
|
||||
}
|
||||
Reference in New Issue
Block a user