393 lines
7.6 KiB
SCSS
393 lines
7.6 KiB
SCSS
@import "variables";
|
|
@import "functions";
|
|
@import "mixins";
|
|
|
|
.knk-success {
|
|
font-size: 1em;
|
|
color: $knk-color-success;
|
|
|
|
.material-icons {
|
|
font-size: inherit;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.knk-error {
|
|
font-size: 1em;
|
|
color: $knk-color-wrong;
|
|
|
|
.material-icons {
|
|
font-size: inherit;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.knk-required {
|
|
font-size: 1em;
|
|
color: $knk-color-required;
|
|
vertical-align: super;
|
|
|
|
.material-icons {
|
|
font-size: inherit;
|
|
vertical-align: inherit;
|
|
}
|
|
}
|
|
|
|
.knk-form-field {
|
|
@include knk-font-default;
|
|
font-size: 14px;
|
|
|
|
.knk-label {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.knk-error {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.knk-label {
|
|
font-size: 1em;
|
|
@include theming {
|
|
color: theme-get('color-font');
|
|
}
|
|
}
|
|
|
|
.knk-toggle-label {
|
|
@include knk-toggle-label;
|
|
}
|
|
|
|
.knk-input {
|
|
@include knk-input;
|
|
@include knk-input-placeholder;
|
|
}
|
|
|
|
.knk-textarea {
|
|
max-width: 500px;
|
|
min-width: auto;
|
|
width: 100%;
|
|
outline: 0;
|
|
border: 0;
|
|
border-bottom: 1px solid #000000;
|
|
background: transparent none;
|
|
@include knk-font-default;
|
|
@include theming($if: default) {
|
|
color: rgba(0, 0, 0, 0.5);
|
|
@include knk-input-placeholder(rgba(0, 0, 0, 0.5));
|
|
}
|
|
@include theming($if: night) {
|
|
color: #ffffff;
|
|
@include knk-input-placeholder(#ffffff);
|
|
}
|
|
|
|
&.mat-autosize {
|
|
overflow: hidden;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
.knk-ng-select {
|
|
@include knk-ng-select;
|
|
|
|
&#{&}--compact {
|
|
&.ng-select.ng-select-single {
|
|
max-width: none;
|
|
width: 230px;
|
|
|
|
.ng-select-container {
|
|
height: 40px;
|
|
}
|
|
|
|
.ng-select-container .ng-value-container,
|
|
.ng-select-container .ng-value-container .ng-placeholder,
|
|
.ng-select-container .ng-value-container .ng-value {
|
|
font-size: 12px;
|
|
line-height: 2.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.knk-quill-editor {
|
|
@include knk-quill-editor;
|
|
|
|
.ql-editor.ql-blank {
|
|
&:before {
|
|
@include theming($if: default) {
|
|
color: theme-get(color-font);
|
|
}
|
|
@include theming($if: night) {
|
|
color: theme-get(color-font);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ql-toolbar .ql-picker-item.ql-selected,
|
|
.ql-toolbar .ql-picker-item:hover,
|
|
.ql-toolbar .ql-picker-label.ql-active,
|
|
.ql-toolbar .ql-picker-label:hover,
|
|
.ql-toolbar button.ql-active,
|
|
.ql-toolbar button:focus,
|
|
.ql-toolbar button:hover {
|
|
color: $knk-color-primary
|
|
}
|
|
|
|
.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
|
.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
|
.ql-toolbar .ql-picker-item:hover .ql-stroke,
|
|
.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
|
.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
|
.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
|
.ql-toolbar .ql-picker-label:hover .ql-stroke,
|
|
.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
|
.ql-toolbar button.ql-active .ql-stroke,
|
|
.ql-toolbar button.ql-active .ql-stroke-miter,
|
|
.ql-toolbar button:focus .ql-stroke,
|
|
.ql-toolbar button:focus .ql-stroke-miter,
|
|
.ql-toolbar button:hover .ql-stroke,
|
|
.ql-toolbar button:hover .ql-stroke-miter {
|
|
stroke: $knk-color-primary;
|
|
}
|
|
|
|
.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
|
.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
|
|
.ql-toolbar .ql-picker-item:hover .ql-fill,
|
|
.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
|
.ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
|
.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
|
.ql-toolbar .ql-picker-label:hover .ql-fill,
|
|
.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
|
.ql-toolbar button.ql-active .ql-fill,
|
|
.ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
|
.ql-toolbar button:focus .ql-fill,
|
|
.ql-toolbar button:focus .ql-stroke.ql-fill,
|
|
.ql-toolbar button:hover .ql-fill,
|
|
.ql-toolbar button:hover .ql-stroke.ql-fill {
|
|
fill: $knk-color-primary;
|
|
}
|
|
}
|
|
|
|
.knk-nouislider {
|
|
@include knk-nouislider;
|
|
|
|
.noUi-handle {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.noUi-target.noUi-rate {
|
|
.noUi-connects,
|
|
.noUi-connects .noUi-connect {
|
|
opacity: 0;
|
|
}
|
|
|
|
.noUi-tooltip {
|
|
font: 0 none;
|
|
}
|
|
|
|
.noUi-handle,
|
|
.noUi-tooltip {
|
|
transition: background-color 50ms ease-in-out;
|
|
will-change: background-color;
|
|
}
|
|
|
|
.noUi-tooltip:before {
|
|
transition: border-top-color 50ms ease-in-out;
|
|
will-change: border-top-color;
|
|
}
|
|
|
|
.noUi-tooltip:after {
|
|
transition: border-bottom-color 50ms ease-in-out;
|
|
will-change: border-bottom-color;
|
|
}
|
|
|
|
.noUi-rate-connect {
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
cursor: pointer;
|
|
|
|
.noUi-rate-connect-splash {
|
|
z-index: 4;
|
|
position: absolute;
|
|
left: auto;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #e4e8ea;
|
|
transition: width 50ms ease-in-out;
|
|
will-change: width;
|
|
}
|
|
|
|
.noUi-rate-connect-backdrop {
|
|
z-index: 3;
|
|
position: absolute;
|
|
left: 0;
|
|
right: auto;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: linear-gradient(to right, #ff5c4b 0%, #fb8a3d 25%, #efb338 50%, #8bc870 75%, #28dda7 100%);
|
|
}
|
|
}
|
|
|
|
.noUi-rate-rails {
|
|
z-index: 4;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
cursor: pointer;
|
|
|
|
.noUi-rate-rail {
|
|
position: absolute;
|
|
left: 0;
|
|
right: auto;
|
|
width: 3.5px;
|
|
height: 3.5px;
|
|
margin-top: 0.5px;
|
|
margin-left: 1.5px;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.noUi-target.noUi-rate.noUi-rate--point-1 {
|
|
.noUi-handle,
|
|
.noUi-tooltip {
|
|
background-color: #ff5c4b;
|
|
}
|
|
|
|
.noUi-tooltip:before {
|
|
border-top-color: #ff5c4b;
|
|
}
|
|
|
|
.noUi-tooltip:after {
|
|
border-bottom-color: #ff5c4b;
|
|
}
|
|
}
|
|
|
|
.noUi-target.noUi-rate.noUi-rate--point-2 {
|
|
.noUi-handle,
|
|
.noUi-tooltip {
|
|
background-color: #fb8a3d;
|
|
}
|
|
|
|
.noUi-tooltip:before {
|
|
border-top-color: #fb8a3d;
|
|
}
|
|
|
|
.noUi-tooltip:after {
|
|
border-bottom-color: #fb8a3d;
|
|
}
|
|
}
|
|
|
|
.noUi-target.noUi-rate.noUi-rate--point-3 {
|
|
.noUi-handle,
|
|
.noUi-tooltip {
|
|
background-color: #efb338;
|
|
}
|
|
|
|
.noUi-tooltip:before {
|
|
border-top-color: #efb338;
|
|
}
|
|
|
|
.noUi-tooltip:after {
|
|
border-bottom-color: #efb338;
|
|
}
|
|
}
|
|
|
|
.noUi-target.noUi-rate.noUi-rate--point-4 {
|
|
.noUi-handle,
|
|
.noUi-tooltip {
|
|
background-color: #8bc870;
|
|
}
|
|
|
|
.noUi-tooltip:before {
|
|
border-top-color: #8bc870;
|
|
}
|
|
|
|
.noUi-tooltip:after {
|
|
border-bottom-color: #8bc870;
|
|
}
|
|
}
|
|
|
|
.noUi-target.noUi-rate.noUi-rate--point-5 {
|
|
.noUi-handle,
|
|
.noUi-tooltip {
|
|
background-color: #28dda7;
|
|
}
|
|
|
|
.noUi-tooltip:before {
|
|
border-top-color: #28dda7;
|
|
}
|
|
|
|
.noUi-tooltip:after {
|
|
border-bottom-color: #28dda7;
|
|
}
|
|
}
|
|
|
|
&#{&}--rating {
|
|
max-width: 430px;
|
|
}
|
|
|
|
&#{&}--visible {
|
|
.noUi-tooltip {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.knk-button {
|
|
@include knk-button;
|
|
outline: 0;
|
|
|
|
.knk-button__icon {
|
|
outline: 0;
|
|
@include theming {
|
|
color: $knk-color-primary;
|
|
}
|
|
}
|
|
|
|
&:disabled .knk-button__icon {
|
|
@include theming {
|
|
color: rgba($color: #000000, $alpha: 0.37);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
&#{&}--continue {
|
|
width: 280px;
|
|
border-radius: 50px;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
&#{&}--preview,
|
|
&#{&}--cancel,
|
|
&#{&}--publish,
|
|
&#{&}--back {
|
|
width: 194px;
|
|
height: 30px;
|
|
font-size: 15px;
|
|
line-height: 2.1;
|
|
}
|
|
|
|
&#{&}--upload {
|
|
height: 38px;
|
|
font-size: 14px;
|
|
@include theming {
|
|
background-color: theme-get('color-surface');
|
|
}
|
|
}
|
|
|
|
&#{&}--upload &__icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|