- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
This commit is contained in:
Joris Slagter
995
assets/variables.scss
Normal file
995
assets/variables.scss
Normal file
@@ -0,0 +1,995 @@
|
||||
// Fonts
|
||||
$body-font-family: "Source Sans Pro", sans-serif;
|
||||
$heading-font-family: "Source Sans Pro";
|
||||
$font-size-root: 18px;
|
||||
|
||||
//Text editor
|
||||
.v-application .ql-tooltip a,
|
||||
.v-application .ql-editor a {
|
||||
color: var(--v-txt-base) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.v-card__text a {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
|
||||
//Tooltip
|
||||
.v-tooltip__content {
|
||||
max-width: 220px !important;
|
||||
font-size: 14px !important;
|
||||
padding: 15px !important;
|
||||
-webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.11) !important;
|
||||
-moz-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.11) !important;
|
||||
box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.11) !important;
|
||||
}
|
||||
|
||||
// Learning product
|
||||
.v-card__title,
|
||||
.v-card__title i {
|
||||
color: var(--v-txt-base);
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-color: var(--v-lines-base) !important;
|
||||
}
|
||||
|
||||
tbody tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
|
||||
background: var(--v-primary-base) !important;
|
||||
-webkit-box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.08);
|
||||
-moz-box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.v-data-table__wrapper {
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.v-select .v-select__selection--comma,
|
||||
.v-chip__content,
|
||||
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled),
|
||||
.v-select.v-select--chips:not(.v-text-field--single-line).v-text-field--enclosed .v-select__selections,
|
||||
.v-list-item .v-list-item__title,
|
||||
.v-list-item .v-list-item__subtitle,
|
||||
.v-input--is-disabled input,
|
||||
.v-input--is-disable,
|
||||
p,
|
||||
li {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
// Organize
|
||||
.v-input--is-disabled .v-input__append-inner,
|
||||
.v-list--disabled .v-input__slot i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Time picker
|
||||
.v-time-picker-title {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
// Data table
|
||||
$data-table-regular-row-height: 96px;
|
||||
|
||||
.v-data-table-header tr th {
|
||||
border-bottom: 0px !important;
|
||||
border-top: 1px solid var(--v-lines-base) !important;
|
||||
}
|
||||
|
||||
.v-data-table {
|
||||
table {
|
||||
border-spacing: 0px 16px !important;
|
||||
|
||||
> .v-data-table-header tr {
|
||||
background-color: var(--v-secondary-base);
|
||||
}
|
||||
|
||||
> tbody tr {
|
||||
background-color: var(--v-primary-base);
|
||||
|
||||
> td &:first-child {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-data-footer {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
font-weight: 700 !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
// default icon size
|
||||
$icon-size: 21px;
|
||||
|
||||
// Content icon (adds icon-calendar in v-text-field)
|
||||
.content-icon {
|
||||
&.theme--light {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
&.theme--dark {
|
||||
color: #d5eaf0 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.v-text-field__slot {
|
||||
&:after {
|
||||
color: var(--v-info-base) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li &:active {
|
||||
.v-text-field__slot {
|
||||
&:after {
|
||||
color: var(--v-info-base) !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-text-field__slot {
|
||||
&:after {
|
||||
content: "\e905";
|
||||
font-family: "mijnggz";
|
||||
color: var(--v-txt-base) !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content badge (adds an interactive icon-close in v-btn)
|
||||
.content-badge {
|
||||
background-color: #e0f0f4 !important;
|
||||
letter-spacing: normal;
|
||||
|
||||
&:after {
|
||||
content: "\e907";
|
||||
font-family: "mijnggz";
|
||||
color: var(--v-secAccent-base) !important;
|
||||
font-size: 8px;
|
||||
margin-left: 7px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
color: #bb1d28 !important;
|
||||
}
|
||||
|
||||
&.theme--dark {
|
||||
background-color: var(--v-primary-base) !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-color: var(--v-badge-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle button
|
||||
.v-input--switch--inset {
|
||||
margin: 0px 10px !important;
|
||||
|
||||
.v-input--selection-controls__input {
|
||||
.v-input--switch__track {
|
||||
color: var(--v-primary-base) !important;
|
||||
border: 1px solid var(--v-lines-base) !important;
|
||||
}
|
||||
|
||||
.v-input--switch__thumb {
|
||||
color: var(--v-lines-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--is-label-active {
|
||||
.v-input--switch__track {
|
||||
color: var(--v-info-base) !important;
|
||||
border: none !important;
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
.v-input--switch__thumb {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Close-button color in dark mode
|
||||
.theme--dark .v-btn:not(.v-btn--text):not(.v-btn--outlined).v-btn--active:before {
|
||||
opacity: 1;
|
||||
color: var(--v-secAccent-base);
|
||||
}
|
||||
|
||||
// Selection box
|
||||
.v-input--is-label-active {
|
||||
.v-icon.notranslate.icon-selectionbox-checked {
|
||||
color: var(--v-info-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary CTA
|
||||
.cta-primary {
|
||||
color: var(--v-primary-base) !important;
|
||||
background-color: var(--v-info-base) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--v-info-base) !important;
|
||||
background-color: var(--v-primary-base) !important;
|
||||
border: 1px solid var(--v-info-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary CTA
|
||||
.cta-secondary {
|
||||
color: var(--v-txt-base) !important;
|
||||
// height: 60px !important;
|
||||
// width: 240px !important;
|
||||
background-color: var(--v-primary-base) !important;
|
||||
border-radius: 5px !important;
|
||||
// background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%c8dde4' stroke-width='3' stroke-dasharray='8%2c6' stroke-dashoffset='11' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
border: 2px dashed var(--v-lines-base) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--v-stroke-base) !important;
|
||||
background-color: var(--v-primary-base) !important;
|
||||
// background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23003547FF' stroke-width='3' stroke-dasharray='8%2c6' stroke-dashoffset='11' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
border: 2px dashed var(--v-secAccent-base) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Interactive CTA
|
||||
.cta-interactive {
|
||||
color: #002937 !important;
|
||||
background-color: #e0f4f8 !important;
|
||||
border: 1px solid var(--v-stroke-base) !important;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
background-color: #002937 !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #002937 !important;
|
||||
opacity: 0.5;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Autocomplete search
|
||||
.v-autocomplete {
|
||||
.v-input__control {
|
||||
.v-input__slot {
|
||||
border: 1px solid var(--v-search-base);
|
||||
box-shadow: none !important;
|
||||
height: auto;
|
||||
|
||||
.v-select__selections {
|
||||
.v-chip--select {
|
||||
background-color: var(--v-search-base) !important;
|
||||
letter-spacing: normal;
|
||||
height: 30px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__append-inner {
|
||||
.v-input__icon .mdi-menu-down {
|
||||
&:before {
|
||||
content: "\e90a" !important;
|
||||
font-family: "mijnggz" !important;
|
||||
color: var(--v-txt-base);
|
||||
font-size: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-select--is-menu-active {
|
||||
.v-input__icon .mdi-menu-down {
|
||||
&:before {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-autocomplete__content {
|
||||
width: 620px !important;
|
||||
top: 90px !important;
|
||||
left: 50% !important;
|
||||
margin-left: -310px;
|
||||
|
||||
border: 1px solid var(--v-search-base) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.v-autocomplete__content .v-list .v-list-item:not(.v-list-item--active):not(.v-list-item--disabled):hover {
|
||||
color: var(--v-primary-base) !important;
|
||||
}
|
||||
|
||||
.users.v-autocomplete__content {
|
||||
top: 408px !important;
|
||||
left: 366px !important;
|
||||
width: 595px !important;
|
||||
border: 1px solid var(--v-search-base) !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
left: 506px !important;
|
||||
top: 539px !important;
|
||||
width: 620px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 3840px) {
|
||||
left: 1328px !important;
|
||||
top: 1079px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions -> Fields
|
||||
.v-select.v-select--chips:not(.v-text-field--single-line).v-text-field--box .v-select__selections,
|
||||
.v-select.v-select--chips:not(.v-text-field--single-line).v-text-field--enclosed .v-select__selections,
|
||||
.v-select.v-select--chips.v-select--chips--small .v-select__selections {
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
// Actions + Version show add button in edit mode
|
||||
.v-dialog__container {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
// Three dot menu
|
||||
.v-menu__content {
|
||||
.v-list {
|
||||
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
|
||||
&:hover {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
background: var(--v-primary-base) !important;
|
||||
|
||||
.mdi-checkbox-blank-outline {
|
||||
&:before {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdi-checkbox-blank-outline {
|
||||
&:before {
|
||||
content: "\e921" !important;
|
||||
font-family: "mijnggz";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item--active {
|
||||
&:before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.v-list-item__action .v-simple-checkbox .v-icon {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
|
||||
&.mdi-checkbox-marked {
|
||||
&:before {
|
||||
content: "\e923" !important;
|
||||
font-family: "mijnggz";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
color: var(--v-tertiary-base) !important;
|
||||
background: var(--v-primary-base) !important;
|
||||
}
|
||||
|
||||
.v-list-item__action {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Badges (Colors for message-badge and message-bar)
|
||||
.v-badge__badge {
|
||||
color: #003547 !important;
|
||||
|
||||
&__red {
|
||||
background-color: #ffcccc !important;
|
||||
border: 1px solid #bb1d28 !important;
|
||||
|
||||
&::before {
|
||||
color: #bb1d28 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__orange {
|
||||
background-color: #fdeecc !important;
|
||||
border: 1px solid #e54e0f !important;
|
||||
|
||||
&::before {
|
||||
color: #e54e0f !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__green {
|
||||
background-color: #dbf2cd !important;
|
||||
border: 1px solid #1ada79 !important;
|
||||
|
||||
&::before {
|
||||
color: #1ada79 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Message badge
|
||||
.message-badge {
|
||||
border-radius: 15px !important;
|
||||
padding: 3px 8px 16px 8px;
|
||||
}
|
||||
|
||||
// Message bar
|
||||
.message-bar {
|
||||
width: 230px !important;
|
||||
height: 35px !important;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
padding: 8px 0 !important;
|
||||
|
||||
&::before {
|
||||
content: "\e91a";
|
||||
font-family: "mijnggz";
|
||||
font-size: 15px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// tooltip bg-color
|
||||
$tooltip-background-color: #30b7cd;
|
||||
|
||||
// input fields customization
|
||||
.v-text-field--outlined {
|
||||
.v-input__prepend-inner {
|
||||
.v-icon {
|
||||
color: var(--v-txt-base);
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// searchbar customization
|
||||
// $text-field-outlined-fieldset-border: 2px solid var(--v-secAccent-base);
|
||||
.v-text-field--outlined.v-input--is-focused fieldset {
|
||||
border: 1px solid var(--v-secAccent-base);
|
||||
}
|
||||
|
||||
#searchbar {
|
||||
color: var(--v-txt-base) !important;
|
||||
caret-color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
#searchbar
|
||||
.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
|
||||
> .v-input__control
|
||||
> .v-input__slot:hover
|
||||
fieldset {
|
||||
color: var(--v-primary-base) !important;
|
||||
}
|
||||
|
||||
#searchbar .theme--light.v-text-field--filled > .v-input__control > .v-input__slot {
|
||||
background: #ecf6f8 !important;
|
||||
}
|
||||
|
||||
// input regular field outlined color
|
||||
.v-text-field--outlined {
|
||||
> .v-input__control .v-input__slot {
|
||||
caret-color: black;
|
||||
|
||||
fieldset {
|
||||
color: var(--v-lines-base) !important;
|
||||
border-width: 1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-sheet--outlined {
|
||||
color: var(--v-lines-base) !important;
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
.v-sheet .v-list {
|
||||
border-radius: 5px !important;
|
||||
color: var(--v-lines-base) !important;
|
||||
}
|
||||
|
||||
// input regular field hover color
|
||||
.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) {
|
||||
> .v-input__control > .v-input__slot:hover fieldset {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// input regular fields disabled
|
||||
.v-text-field--outlined:not(.v-input--is-focused).v-input--is-disabled > .v-input__control > .v-input__slot fieldset {
|
||||
color: var(--v-secDisabled-base) !important;
|
||||
}
|
||||
|
||||
label.v-label.v-label--is-disabled {
|
||||
color: var(--v-terDisabled-base) !important;
|
||||
}
|
||||
|
||||
.v-text-field--filled > .v-input__control > .v-input__slot {
|
||||
background-color: var(--v-quaDisabled-base) !important;
|
||||
}
|
||||
|
||||
// dropdown fields customization
|
||||
.v-select.theme--dark.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
|
||||
> .v-input__control
|
||||
> .v-input__slot
|
||||
fieldset {
|
||||
color: var(--v-lines-base) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-select.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
|
||||
> .v-input__control
|
||||
> .v-input__slot
|
||||
fieldset {
|
||||
color: #d5eaf0 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// v-select focus & hover
|
||||
.v-select.v-text-field--outlined.v-input--is-focused fieldset,
|
||||
.v-select.v-text-field--outlined.v-input--is-focused > fieldset:hover {
|
||||
border: 1px solid #30b7cd !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-select.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
|
||||
> .v-input__control
|
||||
> .v-input__slot:hover
|
||||
fieldset {
|
||||
border: 1px solid #30b7cd !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-select.theme--dark.v-text-field--outlined.v-input--is-focused fieldset,
|
||||
.v-select.theme--dark.v-text-field--outlined.v-input--has-state fieldset {
|
||||
border: 1px solid #d5eaf0;
|
||||
opacity: 0.24;
|
||||
}
|
||||
|
||||
.v-select.v-select--is-menu-active {
|
||||
.v-icon {
|
||||
color: #30b7cd !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation icon
|
||||
.icon-menu,
|
||||
.icon-close {
|
||||
&:before {
|
||||
// color: var(--v-txt-base); this stlying overrides the color in _user.vue, so I outcommented this one because the styling in _user.vue is scoped
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: var(--v-secAccent-base);
|
||||
}
|
||||
}
|
||||
|
||||
// Interface icon
|
||||
.icon-fullscreen {
|
||||
&:before {
|
||||
color: var(--v-tertiary-base);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: var(--v-secAccent-base);
|
||||
}
|
||||
|
||||
&:active:before {
|
||||
color: var(--v-secAccent-base);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:disabled:before {
|
||||
color: var(--v-disabled-base);
|
||||
}
|
||||
}
|
||||
|
||||
// quill editor customization
|
||||
|
||||
// svg icon color
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
stroke: var(--v-secAccent-base) !important;
|
||||
}
|
||||
|
||||
// quill editor border color when focused
|
||||
.quill-editor.focused {
|
||||
.ql-toolbar.ql-snow {
|
||||
border: 1px solid rgba($color: #30b7cd, $alpha: 1) !important;
|
||||
}
|
||||
|
||||
.ql-container.ql-snow {
|
||||
border: 1px solid rgba($color: #30b7cd, $alpha: 1) !important;
|
||||
border-top: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// quill editor border color when hovered
|
||||
.quill-editor.quill:hover {
|
||||
.ql-toolbar.ql-snow {
|
||||
border: 1px solid #30b7cd !important;
|
||||
}
|
||||
|
||||
.ql-container.ql-snow {
|
||||
border: 1px solid #30b7cd !important;
|
||||
border-top: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// quill editor border color when not focused
|
||||
.quill-editor.quill {
|
||||
.ql-toolbar.ql-snow {
|
||||
border: 1px solid var(--v-lines-base);
|
||||
}
|
||||
|
||||
.ql-container.ql-snow {
|
||||
border: 1px solid var(--v-lines-base);
|
||||
border-top: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// quil editor border radius
|
||||
.theme--dark {
|
||||
.quill-editor {
|
||||
.ql-container,
|
||||
.ql-toolbar {
|
||||
border: 1px solid rgba($color: #d5eaf0, $alpha: 0.24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme--light {
|
||||
.quill-editor {
|
||||
.ql-container,
|
||||
.ql-toolbar {
|
||||
border: 1px solid rgba($color: #000000, $alpha: 0.38);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quill-editor {
|
||||
.ql-container {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.ql-toolbar {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.ql-stroke {
|
||||
stroke: rgba($color: #5f838e, $alpha: 1);
|
||||
}
|
||||
|
||||
.ql-picker-label::before {
|
||||
color: rgba($color: #5f838e, $alpha: 1);
|
||||
}
|
||||
}
|
||||
|
||||
// quill editor placeholder text customization
|
||||
.theme--dark {
|
||||
.ql-editor {
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme--light {
|
||||
.ql-editor {
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
color: #003547;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-editor.ql-blank::before {
|
||||
color: #5f838e;
|
||||
}
|
||||
|
||||
// to remove placholder text when focused
|
||||
.ql-editor.ql-blank:focus::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
// back icon footers
|
||||
.v-footer {
|
||||
.v-btn.v-btn--flat {
|
||||
&:before {
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
.v-btn__content {
|
||||
.icon-arrow-left {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// icon remove inside input fields
|
||||
.v-input__slot {
|
||||
.icon-close {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// vue dropzone
|
||||
.vue-dropzone {
|
||||
background-clip: content-box;
|
||||
background-color: var(--v-secondary-base) !important;
|
||||
height: 480px;
|
||||
border: dashed 3px var(--v-lines-base) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dz-message {
|
||||
width: 100%;
|
||||
}
|
||||
.dz-error-message {
|
||||
top: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-dropzone:hover {
|
||||
background-clip: content-box !important;
|
||||
background-color: var(--v-secondary-base) !important;
|
||||
border: dashed 3px var(--v-secAccent-base) !important;
|
||||
}
|
||||
|
||||
// Filter/navigation drawer (menu right)
|
||||
.v-navigation-drawer {
|
||||
border-left: 1px solid var(--v-primary-base);
|
||||
|
||||
.v-list-item--link {
|
||||
&::before {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.v-navigation-drawer__content {
|
||||
.v-expansion-panels {
|
||||
display: block !important;
|
||||
|
||||
.icon-close {
|
||||
font-size: 14px;
|
||||
padding-bottom: 30px;
|
||||
margin-right: 6px;
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-expansion-panels--tile {
|
||||
padding: 0px 45px 0px 65px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 85px;
|
||||
}
|
||||
|
||||
.v-expansion-panel {
|
||||
border-top: 1px solid var(--v-lines-base);
|
||||
padding: 10px 0px;
|
||||
|
||||
.v-expansion-panel-header {
|
||||
padding: 0px !important;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--v-txt-base) !important;
|
||||
|
||||
i {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
.v-application .secondary {
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-expansion-panel-content {
|
||||
.v-expansion-panel-content__wrap {
|
||||
padding: 0px !important;
|
||||
|
||||
.v-list-item {
|
||||
padding: 0px !important;
|
||||
|
||||
.v-icon,
|
||||
.v-list-item__title {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
.mdi-checkbox-marked::before {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.v-icon,
|
||||
.v-list-item__title {
|
||||
color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Dark theme background colors
|
||||
.theme--dark .v-navigation-drawer .v-navigation-drawer__content .v-expansion-panels--tile .v-expansion-panel,
|
||||
.theme--dark .v-navigation-drawer,
|
||||
.theme--dark.v-card.v-card--outlined,
|
||||
.theme--dark.v-list {
|
||||
background: var(--v-primary-base) !important;
|
||||
}
|
||||
|
||||
.theme--dark.v-application {
|
||||
background: var(--v-secondary-base) !important;
|
||||
}
|
||||
|
||||
.theme--dark .v-navigation-drawer .v-list .v-item-group .v-list-item--active {
|
||||
background-color: var(--v-secAccent-base) !important;
|
||||
}
|
||||
|
||||
// chips close
|
||||
.v-chip {
|
||||
background-color: var(--v-primary-base) !important;
|
||||
font-size: 16px !important;
|
||||
|
||||
.mdi-close-circle::before {
|
||||
font-family: "mijnggz";
|
||||
content: "\e907" !important;
|
||||
color: var(--v-secAccent-base) !important;
|
||||
font-size: 8px;
|
||||
margin-left: 2px;
|
||||
margin-right: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mdi-close-circle {
|
||||
&:hover::before {
|
||||
color: #bb1d28 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-select-list {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
//v-picker
|
||||
.v-picker__body {
|
||||
padding-bottom: 30px;
|
||||
|
||||
.v-btn {
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
|
||||
.v-btn__content {
|
||||
line-height: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//tablet styling
|
||||
@media only screen and (device-width: 768px) {
|
||||
.v-data-table {
|
||||
th {
|
||||
padding: 5px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.plant,
|
||||
.cat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v-text-field__slot input {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//contribution
|
||||
.v-card .checkbox .v-input__slot {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.v-card .checkbox .v-input__slot .v-input--selection-controls__ripple {
|
||||
color: var(--v-txt-base) !important;
|
||||
}
|
||||
|
||||
//employeesMembers
|
||||
|
||||
//vue-text-field number hide number arrows
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
//euro icon
|
||||
|
||||
.mdi-currency-eur {
|
||||
font-size: 16px !important;
|
||||
top: -1px !important;
|
||||
}
|
||||
Reference in New Issue
Block a user