1466 lines
33 KiB
SCSS
1466 lines
33 KiB
SCSS
@import "variables";
|
|
@import "functions";
|
|
@import "~material-components-web/material-components-web";
|
|
|
|
/* Theme */
|
|
@mixin theming($if: (), $not: (), $themes: $themes) {
|
|
@if not & {
|
|
@error 'No selector found.';
|
|
}
|
|
|
|
$theme-entity-list: theme-filter($themes, $if, $not);
|
|
@each $theme, $map in $themes {
|
|
@if index($theme-entity-list, $theme) {
|
|
.#{$theme}-theme & {
|
|
$theme-loop-entity: $theme !global;
|
|
$theme-map: () !global;
|
|
@each $key, $submap in $map {
|
|
$value: map-get(map-get($themes, $theme), '#{$key}');
|
|
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
|
}
|
|
@content;
|
|
$theme-loop-entity: null !global;
|
|
$theme-map: null !global;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin ng-theming($if: (), $not: (), $themes: $themes) {
|
|
@if not & {
|
|
@error 'No selector found.';
|
|
}
|
|
|
|
$theme-entity-list: theme-filter($themes, $if, $not);
|
|
@each $theme, $map in $themes {
|
|
@if index($theme-entity-list, $theme) {
|
|
:host-context(.#{$theme}-theme) & {
|
|
$theme-loop-entity: $theme !global;
|
|
$theme-map: () !global;
|
|
@each $key, $submap in $map {
|
|
$value: map-get(map-get($themes, $theme), '#{$key}');
|
|
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
|
}
|
|
@content;
|
|
$theme-loop-entity: null !global;
|
|
$theme-map: null !global;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Base */
|
|
@mixin knk-prop-alias($property, $data) {
|
|
-webkit-#{$property}: $data;
|
|
-moz-#{$property}: $data;
|
|
-ms-#{$property}: $data;
|
|
-o-#{$property}: $data;
|
|
#{$property}: $data;
|
|
}
|
|
|
|
@mixin knk-clearfix() {
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@mixin knk-font-default() {
|
|
font-family: $knk-font-family-primary;
|
|
font-size: $knk-font-size-primary;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
color: theme-pull('color-font', default);
|
|
}
|
|
|
|
@mixin knk-knok-expansion() {
|
|
&__headline {
|
|
@include mdc-ripple-surface;
|
|
@include mdc-states($knk-color-primary);
|
|
@include mdc-ripple-radius-unbounded(200%);
|
|
@include ng-theming($if: night) {
|
|
background-color: theme-get('color-secondary');
|
|
}
|
|
box-shadow: 0 2px 9px 0 rgba(#000000, 0.07);
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 10px 20px 10px 35px;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-appearance: none;
|
|
|
|
&:before {
|
|
transition: opacity 25ms linear;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.25s ease-out;
|
|
@include ng-theming($if: night) {
|
|
background-color: theme-get('color-surface');
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-toggle-label() {
|
|
position: relative;
|
|
max-width: 280px;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
|
|
&__input {
|
|
position: absolute;
|
|
left: -9999em;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
&__model {
|
|
// @include mdc-ripple-surface;
|
|
// @include mdc-ripple-radius-bounded;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
max-width: 280px;
|
|
width: 100%;
|
|
height: 44px;
|
|
padding: 5px 20px;
|
|
border: solid 1px transparent;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
@include knk-font-default;
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
text-transform: initial;
|
|
vertical-align: middle;
|
|
@include theming {
|
|
// @include mdc-states(theme-get('color-primary'));
|
|
@include mdc-theme-prop(border-color, theme-get('color-primary'));
|
|
@include mdc-theme-prop(color, theme-get('color-primary'));
|
|
}
|
|
}
|
|
|
|
&__model#{&}__model--selected,
|
|
&__input:checked + &__model {
|
|
// font-weight: bold;
|
|
@include theming {
|
|
@include mdc-theme-prop(background-color, theme-get('color-primary'), $edgeOptOut: true);
|
|
@include mdc-theme-prop(border-color, theme-get('color-primary'));
|
|
@include mdc-theme-prop(color, #ffffff);
|
|
}
|
|
}
|
|
|
|
&__model#{&}__model--disabled,
|
|
&__input:disabled + &__model {
|
|
@include theming {
|
|
// @include mdc-states(#bbbbbb);
|
|
@include mdc-theme-prop(border-color, theme-get('color-spacer'));
|
|
@include mdc-theme-prop(background-color, theme-get('color-secondary'), $edgeOptOut: true);
|
|
@include mdc-theme-prop(color, #9b9b9b);
|
|
}
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
@mixin knk-button() {
|
|
@include mdc-button-base_;
|
|
// @include mdc-states($knk-color-primary);
|
|
min-width: 200px;
|
|
height: 44px;
|
|
outline: 0;
|
|
@include mdc-button-container-fill-color(transparent);
|
|
@include mdc-button-corner-radius(5px);
|
|
box-shadow: none;
|
|
@include knk-font-default;
|
|
@include mdc-button-ink-color($knk-color-primary);
|
|
font-size: 20px;
|
|
line-height: 1.6;
|
|
text-transform: initial;
|
|
white-space: nowrap;
|
|
|
|
&:disabled {
|
|
@include mdc-button-ink-color($knk-color-grey);
|
|
// @include mdc-states(#bdbdbd);
|
|
}
|
|
|
|
.knk-button__icon {
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
font-size: 125%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
svg.knk-button__icon {
|
|
@include mdc-button__icon-svg_;
|
|
}
|
|
|
|
&--outlined {
|
|
@include mdc-button--outlined_;
|
|
@include mdc-button-outline-width(1px);
|
|
@include mdc-button-outline-color($knk-color-primary);
|
|
}
|
|
|
|
&--outlined#{&}--greyed {
|
|
@include mdc-button-outline-color($knk-color-grey);
|
|
@include mdc-button-ink-color($knk-color-grey);
|
|
// @include mdc-states(#bdbdbd);
|
|
}
|
|
|
|
&--filled {
|
|
@include mdc-button--filled_;
|
|
@include mdc-button-container-fill-color($knk-color-primary);
|
|
@include mdc-button-ink-color(#ffffff);
|
|
// @include mdc-states(#ffffff);
|
|
}
|
|
|
|
&--filled:hover {
|
|
@include mdc-button-ink-color(darken(#ffffff, 10%));
|
|
box-shadow: 0 2px 9px 0 rgba($knk-color-primary, 1);
|
|
}
|
|
|
|
&--filled:active {
|
|
@include mdc-button-container-fill-color(shade($knk-color-primary, 25%));
|
|
@include mdc-button-ink-color(#ffffff);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&--filled#{&}--greyed {
|
|
@include mdc-button-container-fill-color($knk-color-grey);
|
|
@include mdc-button-ink-color(#ffffff);
|
|
// @include mdc-states(#bdbdbd);
|
|
}
|
|
|
|
&--filled#{&}--greyed:hover {
|
|
@include mdc-button-ink-color(darken(#ffffff, 10%));
|
|
box-shadow: 0 2px 9px 0 rgba($knk-color-grey, 1);
|
|
}
|
|
|
|
&--filled#{&}--greyed:active {
|
|
@include mdc-button-container-fill-color(shade($knk-color-grey, 25%));
|
|
@include mdc-button-ink-color(#ffffff);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&--rounded {
|
|
@include mdc-button-corner-radius(30px);
|
|
}
|
|
|
|
&--transparent {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@mixin knk-dropdown() {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&__label {
|
|
display: inline-block;
|
|
max-width: 280px;
|
|
width: 100%;
|
|
height: 44px;
|
|
padding: 5px 20px;
|
|
border: solid 1px #bbbbbb;
|
|
border-radius: 5px;
|
|
background-color: #ffffff;
|
|
@include knk-font-default;
|
|
font-size: 20px;
|
|
line-height: 1.6;
|
|
color: #9b9b9b;
|
|
text-transform: initial;
|
|
|
|
&[aria-pressed=true] {
|
|
border-color: $knk-color-primary;
|
|
font-weight: bold;
|
|
color: $knk-color-primary;
|
|
}
|
|
|
|
&--less {
|
|
width: 230px;
|
|
height: 40px;
|
|
font-size: 12px;
|
|
line-height: 2.2;
|
|
}
|
|
}
|
|
|
|
.material-icons {
|
|
margin-right: -12px;
|
|
font-size: 36px;
|
|
color: $knk-color-primary;
|
|
}
|
|
|
|
&__menu {
|
|
max-width: 280px;
|
|
width: 100%;
|
|
max-height: 280px !important;
|
|
z-index: 50;
|
|
}
|
|
|
|
.mdc-list > .mdc-list-item {
|
|
height: 32px;
|
|
padding: 0 18px;
|
|
@include knk-font-default;
|
|
font-size: 20px;
|
|
line-height: 2.2;
|
|
}
|
|
|
|
.mdc-list:not(.mdc-list--non-interactive) > .mdc-list-item::before,
|
|
.mdc-list:not(.mdc-list--non-interactive) > .mdc-list-item::after {
|
|
background-color: transparentize($knk-color-primary, 0.2);
|
|
box-shadow: 0 0 5px 0 transparentize($knk-color-primary, 0.08);
|
|
}
|
|
}
|
|
|
|
@mixin knk-nouislider() {
|
|
width: 100%;
|
|
|
|
.noUi-horizontal {
|
|
height: 4px;
|
|
width: auto;
|
|
margin: 0 6px 0 0;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
@at-root {
|
|
html:not([dir=rtl]) & .noUi-horizontal .noUi-handle,
|
|
& .noUi-horizontal .noUi-handle {
|
|
top: -6px;
|
|
right: -9px;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
.noUi-target {
|
|
border: 1px solid transparent;
|
|
border-radius: 0;
|
|
background: none transparent;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
|
|
.noUi-handle {
|
|
height: 12px;
|
|
width: 12px;
|
|
border: 0;
|
|
outline: 0;
|
|
border-radius: 50%;
|
|
background-color: $knk-color-nouislider-handle-tooltip;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
|
|
.noUi-handle:after,
|
|
.noUi-handle:before {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.noUi-tooltip {
|
|
opacity: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 0 0 8px 0;
|
|
padding: 4px;
|
|
border: 0;
|
|
outline: 0;
|
|
border-radius: 50%;
|
|
background-color: $knk-color-nouislider-handle-tooltip;
|
|
transition: opacity 250ms ease-in-out;
|
|
will-change: opacify;
|
|
@include knk-font-default;
|
|
font-size: 12px;
|
|
line-height: 2;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 4px;
|
|
margin-top: -6px;
|
|
border: 12px solid transparent;
|
|
border-top: 12px solid $knk-color-nouislider-handle-tooltip;
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 12px;
|
|
border: 4px solid transparent;
|
|
border-bottom: 12px solid $knk-color-nouislider-handle-tooltip;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.noUi-active .noUi-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.noUi-connects {
|
|
background-color: transparentize($knk-color-nouislider-connect, .62);
|
|
}
|
|
|
|
.noUi-connect {
|
|
background-color: $knk-color-nouislider-connect;
|
|
}
|
|
}
|
|
|
|
@mixin knk-card() {
|
|
border-radius: 6px;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 -1px 9px 0 rgba(0, 0, 0, 0.05);
|
|
|
|
&__headline,
|
|
&__content {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
&__headline {
|
|
z-index: 11;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 10px 14px 10px 28px;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
@include theming {
|
|
border: solid 1px theme-get('color-list-item-spacer'); // #e4e8ea;
|
|
background-color: theme-get('color-surface');
|
|
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
|
|
transition: background-color 0.25s linear;
|
|
}
|
|
@include ng-theming {
|
|
border: solid 1px theme-get('color-list-item-spacer'); // #e4e8ea;
|
|
background-color: theme-get('color-surface');
|
|
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
|
|
transition: background-color 0.25s linear;
|
|
}
|
|
@include knk-font-default;
|
|
font-size: 16px;
|
|
|
|
/*&#{&}--success {
|
|
@include theming($if: default) {
|
|
border-color: transparentize($knk-color-success, 0.9);
|
|
background-color: transparentize($knk-color-success, 0.9);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-success, 0.9);
|
|
}
|
|
@include ng-theming($if: default) {
|
|
border-color: transparentize($knk-color-success, 0.9);
|
|
background-color: transparentize($knk-color-success, 0.9);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-success, 0.9);
|
|
}
|
|
@include theming($if: night) {
|
|
border-color: transparentize($knk-color-success, 0.3);
|
|
background-color: transparentize($knk-color-success, 0.3);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-success, 0.3);
|
|
}
|
|
@include ng-theming($if: night) {
|
|
border-color: transparentize($knk-color-success, 0.3);
|
|
background-color: transparentize($knk-color-success, 0.3);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-success, 0.3);
|
|
}
|
|
}
|
|
|
|
&#{&}--warning {
|
|
@include theming($if: default) {
|
|
border-color: transparentize($knk-color-warning, 0.9);
|
|
background-color: transparentize($knk-color-warning, 0.9);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-warning, 0.9);
|
|
}
|
|
@include ng-theming($if: default) {
|
|
border-color: transparentize($knk-color-warning, 0.9);
|
|
background-color: transparentize($knk-color-warning, 0.9);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-warning, 0.9);
|
|
}
|
|
@include theming($if: night) {
|
|
border-color: transparentize($knk-color-warning, 0.3);
|
|
background-color: transparentize($knk-color-warning, 0.3);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-warning, 0.3);
|
|
}
|
|
@include ng-theming($if: night) {
|
|
border-color: transparentize($knk-color-warning, 0.3);
|
|
background-color: transparentize($knk-color-warning, 0.3);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-warning, 0.3);
|
|
}
|
|
}
|
|
|
|
&#{&}--wrong {
|
|
@include theming($if: default) {
|
|
border-color: transparentize($knk-color-wrong, 0.9);
|
|
background-color: transparentize($knk-color-wrong, 0.9);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-wrong, 0.9);
|
|
}
|
|
@include ng-theming($if: default) {
|
|
border-color: transparentize($knk-color-wrong, 0.9);
|
|
background-color: transparentize($knk-color-wrong, 0.9);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-wrong, 0.9);
|
|
}
|
|
@include theming($if: night) {
|
|
border-color: transparentize($knk-color-wrong, 0.3);
|
|
background-color: transparentize($knk-color-wrong, 0.3);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-wrong, 0.3);
|
|
}
|
|
@include ng-theming($if: night) {
|
|
border-color: transparentize($knk-color-wrong, 0.3);
|
|
background-color: transparentize($knk-color-wrong, 0.3);
|
|
box-shadow: 0 1px 5px 0 transparentize($knk-color-wrong, 0.3);
|
|
}
|
|
}*/
|
|
}
|
|
|
|
&__content {
|
|
z-index: 9;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 8px 14px;
|
|
@include theming {
|
|
background-color: theme-get('color-surface');
|
|
}
|
|
@include ng-theming {
|
|
background-color: theme-get('color-surface');
|
|
}
|
|
|
|
&#{&}--endline {
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
}
|
|
|
|
&__headline ~ &__content:last-child,
|
|
&__headline ~ &__content#{&}__content--endline {
|
|
z-index: 10;
|
|
position: relative;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
}
|
|
|
|
@mixin knk-feedback-meter() {
|
|
&__model {
|
|
position: relative;
|
|
min-width: 200px;
|
|
max-width: 200px;
|
|
width: 100%;
|
|
height: 30px;
|
|
border-radius: 15px;
|
|
background-image: linear-gradient(to right, transparentize($knk-color-wrong, 0.33), transparentize($knk-color-warning, 0.33) 50%, transparentize($knk-color-success, 0.33));
|
|
}
|
|
|
|
&__connect {
|
|
position: absolute;
|
|
top: calc(50% - 1px);
|
|
left: 10px;
|
|
right: 10px;
|
|
height: 1px;
|
|
background-color: #f4f8f9;
|
|
}
|
|
|
|
&__spin {
|
|
position: absolute;
|
|
top: calc(50% - 6px);
|
|
left: auto;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
@mixin knk-tab-group() {
|
|
@include theming {
|
|
background-color: theme-get('color-surface');
|
|
}
|
|
|
|
.mat-tab-header {
|
|
border: none;
|
|
}
|
|
|
|
.mat-tab-label-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.mat-tab-label {
|
|
opacity: 1;
|
|
height: 62px;
|
|
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.02);
|
|
@include knk-font-default;
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
@include theming($if: default) {
|
|
background-color: #f4f8f9;
|
|
color: #9b9b9b;
|
|
}
|
|
@include theming($if: night) {
|
|
background-color: theme-get('color-background');
|
|
color: theme-get('color-font');
|
|
}
|
|
|
|
&.mat-tab-label-active {
|
|
font-weight: bold;
|
|
@include theming {
|
|
background-color: theme-get('color-surface');
|
|
color: $knk-color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus,
|
|
&.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus,
|
|
& .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus,
|
|
& .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus {
|
|
@include theming {
|
|
background-color: rgba(theme-get('color-primary'), 0.3);
|
|
}
|
|
}
|
|
|
|
.mat-ink-bar {
|
|
height: 7px;
|
|
border-radius: 0;
|
|
border-top-left-radius: 15px;
|
|
border-top-right-radius: 15px;
|
|
background-color: $knk-color-primary;
|
|
box-shadow: 0 0 12px 0 transparentize($knk-color-primary, 0.5);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
&.mat-primary .mat-ink-bar,
|
|
& .mat-tab-nav-bar.mat-primary .mat-ink-bar {
|
|
background-color: $knk-color-primary;
|
|
}
|
|
}
|
|
|
|
@mixin knk-input() {
|
|
display: inline-block;
|
|
opacity: 0.5;
|
|
width: auto;
|
|
height: 38px;
|
|
padding: 4px 22px;
|
|
outline: 0;
|
|
border-radius: 5px;
|
|
@include knk-font-default;
|
|
font-size: 14px;
|
|
line-height: 2.2;
|
|
@include theming($if: default) {
|
|
border: solid 1px #bbbbbb;
|
|
background-color: #ffffff;
|
|
}
|
|
@include theming($if: night) {
|
|
border: solid 1px rgba(1, 1, 1, 0.5);
|
|
background-color: theme-get('color-surface');
|
|
color: #ffffff;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
&#{&}--wide {
|
|
width: 100%;
|
|
}
|
|
|
|
&#{&}--wrong {
|
|
@include theming {
|
|
border-color: #ff544d;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-input-placeholder($color: #979797) {
|
|
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: $color;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
|
|
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: $color;
|
|
}
|
|
|
|
&::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
@mixin knk-quill-editor() {
|
|
.ql-toolbar {
|
|
border: 0;
|
|
}
|
|
|
|
.ql-toolbar + .ql-container {
|
|
opacity: 0.5;
|
|
min-height: 120px;
|
|
height: auto;
|
|
outline: 0;
|
|
border-radius: 5px;
|
|
background-color: #ffffff;
|
|
@include knk-font-default;
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
@include theming($if: default) {
|
|
border: solid 1px #bbbbbb;
|
|
background-color: #ffffff;
|
|
}
|
|
@include theming($if: night) {
|
|
border: solid 1px rgba(1, 1, 1, 0.5);
|
|
background-color: theme-get('color-surface');
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.ql-editor {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.ql-stroke {
|
|
@include theming($if: default) {
|
|
stroke: #808080;
|
|
}
|
|
@include theming($not: default) {
|
|
stroke: theme-get('color-font');
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok() {
|
|
&__card {
|
|
max-width: 941px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
border-radius: 6px;
|
|
box-shadow: 0 -1px 9px 0 rgba(0, 0, 0, 0.05);
|
|
@include theming($if: default) {
|
|
background-color: #ffffff;
|
|
}
|
|
@include theming($if: night) {
|
|
background-color: theme-get('color-secondary');
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-item() {
|
|
&__headline {
|
|
padding: 10px 10px 10px 20px;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
background-color: $knk-color-primary;
|
|
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.25);
|
|
z-index: 22;
|
|
}
|
|
|
|
&__activity {
|
|
padding: 15px 20px;
|
|
@include theming($if: default) {
|
|
background-color: #f8f9f9;
|
|
border-top: solid 1px theme-get('color-list-item-spacer');
|
|
border-bottom: solid 1px theme-get('color-list-item-spacer');
|
|
}
|
|
@include theming($if: night) {
|
|
background-color: theme-get('color-surface');
|
|
border-top: solid 1px theme-get('color-list-item-spacer');
|
|
border-bottom: solid 1px theme-get('color-list-item-spacer');
|
|
}
|
|
}
|
|
|
|
&__history {
|
|
padding: 15px 25px 15px 25px; // padding: 15px 20px 20px;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
box-shadow: 0px -1px 9px 0 rgba(0, 0, 0, 0.08); // box-shadow: 0 -2px 9px 0 rgba(0, 0, 0, 0.05);
|
|
@include theming($if: default) {
|
|
background-color: #ffffff;
|
|
}
|
|
@include theming($if: night) {
|
|
background-color: theme-get('color-secondary');
|
|
}
|
|
}
|
|
|
|
&__rail {
|
|
position: relative;
|
|
margin-right: 15px;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 1px;
|
|
@include theming {
|
|
border-right: 1px solid theme-get('color-list-item-spacer');
|
|
}
|
|
}
|
|
}
|
|
|
|
&__trading {
|
|
font-family: Roboto;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
&__exchange {
|
|
font-family: Roboto;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
&__btn-menu.mdc-icon-toggle,
|
|
&__btn-menu {
|
|
@include mdc-ripple-surface;
|
|
@include mdc-states(#ffffff);
|
|
@include mdc-ripple-radius-unbounded(100%);
|
|
|
|
width: 15px;
|
|
height: 15px;
|
|
padding: 15px;
|
|
color: #ffffff;
|
|
|
|
|
|
&:before,
|
|
&:after {
|
|
border-radius: 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-purchase() {
|
|
&__label {
|
|
margin-bottom: 15px;
|
|
opacity: 0.5;
|
|
font-family: Roboto;
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: 1px;
|
|
@include theming {
|
|
color: theme-get('color-ongoing-label');
|
|
}
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&__record {
|
|
font-family: Roboto;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
@include theming($if: default) {
|
|
color: #4f4f4f;
|
|
}
|
|
@include theming($if: night) {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
&__notice {
|
|
opacity: 0.5;
|
|
font-family: Roboto;
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-font');
|
|
}
|
|
}
|
|
|
|
&__coins {
|
|
display: inline-block;
|
|
width: 17px;
|
|
height: 16px;
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-user() {
|
|
&__avatar {
|
|
display: inline-block;
|
|
width: 66px;
|
|
height: 66px;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&__avatar-image {
|
|
max-width: 66px;
|
|
max-height: 66px;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 50%;
|
|
object-fit: contain;
|
|
|
|
&#{&}--icon {
|
|
font-size: 66px;
|
|
@include theming {
|
|
color: theme-get('color-primary');
|
|
}
|
|
}
|
|
}
|
|
|
|
&__name {
|
|
font-family: Roboto;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.6;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-ongoing-label');
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
margin-bottom: 5px;
|
|
opacity: 0.5;
|
|
font-family: Roboto;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-ongoing-label');
|
|
}
|
|
}
|
|
|
|
&__record {
|
|
font-family: Roboto;
|
|
font-size: 15px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.3;
|
|
letter-spacing: normal;
|
|
color: #00baff;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-expansion() {
|
|
@include knk-knok-expansion;
|
|
|
|
&__title {
|
|
font-family: Roboto;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-font');
|
|
}
|
|
}
|
|
|
|
&__section {
|
|
padding: 20px 80px 20px 40px;
|
|
font-family: Roboto;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.2;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-font');
|
|
}
|
|
|
|
&#{&}--lined {
|
|
box-shadow: 0 -1px 9px 0 rgba(0, 0, 0, 0.05);
|
|
@include ng-theming {
|
|
border-top: solid 1px theme-get('color-list-item-spacer');
|
|
border-bottom: solid 1px theme-get('color-list-item-spacer');
|
|
}
|
|
}
|
|
}
|
|
|
|
&__tags {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__analysis {
|
|
display: inline-block;
|
|
padding: 5px 15px;
|
|
border-radius: 15px;
|
|
@include theming($if: default) {
|
|
background-color: #e2e2e2;
|
|
}
|
|
@include theming($if: night) {
|
|
background-color: theme-get('color-surface');
|
|
}
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
|
|
&#{&}--technical {
|
|
background: linear-gradient(120deg, #4275ff, #82a3ff);
|
|
}
|
|
|
|
&#{&}--fundamental {
|
|
background: linear-gradient(120deg, #3bb3eb, #70d1fe);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-tag-list() {
|
|
&__item {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 10px 30px;
|
|
outline: 0;
|
|
border: solid 1px #bbbbbb;
|
|
border-radius: 15px;
|
|
background: transparent none;
|
|
@include theming($if: night) {
|
|
color: #bbbbbb;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-article() {
|
|
&__thumbnail {
|
|
display: inline-block;
|
|
width: 110px;
|
|
height: 100px;
|
|
margin: 0;
|
|
padding: 5px;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.83);
|
|
}
|
|
|
|
&__thumbnail-image {
|
|
width: 100px;
|
|
height: 90px;
|
|
object-fit: cover;
|
|
object-position: center center;
|
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.83);
|
|
}
|
|
|
|
&__thumbnail-icon {
|
|
width: 100px;
|
|
height: 90px;
|
|
font-size: 100px;
|
|
line-height: 90px;
|
|
color: $knk-color-primary;
|
|
text-align: center;
|
|
text-shadow: 0 0 4px rgba(0, 0, 0, 0.83);
|
|
}
|
|
|
|
&__title {
|
|
font-family: Roboto;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.5;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-font');
|
|
}
|
|
}
|
|
|
|
&__subtitle {
|
|
font-family: Roboto;
|
|
font-size: 9px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 2;
|
|
letter-spacing: normal;
|
|
@include theming() {
|
|
color: theme-get('color-font');
|
|
}
|
|
}
|
|
|
|
&__description {
|
|
margin-top: 10px;
|
|
font-family: Roboto;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.4;
|
|
letter-spacing: normal;
|
|
@include theming() {
|
|
color: theme-get('color-font');
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-history() {
|
|
&__slab {
|
|
position: relative;
|
|
margin-right: 20px;
|
|
margin-top: 25px;
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 1px;
|
|
height: 100%;
|
|
margin-right: 0;
|
|
@include theming {
|
|
border-right: solid 1px theme-get('color-filter-spacer');
|
|
}
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
overflow: hidden;
|
|
margin-bottom: 5px;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
@include theming {
|
|
color: rgba(theme-get('color-ongoing-label'), 0.5);
|
|
}
|
|
text-transform: uppercase;
|
|
|
|
&#{&}--circle:before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 13px;
|
|
margin-right: 5px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
background-color: #f6f9fd;
|
|
}
|
|
|
|
&#{&}--circle#{&}--entry-price:before {
|
|
background-color: $knk-color-entry-price;
|
|
}
|
|
|
|
&#{&}--circle#{&}--exit-price:before {
|
|
background-color: $knk-color-exit-price;
|
|
}
|
|
|
|
&#{&}--circle#{&}--stop-loss:before {
|
|
background-color: $knk-color-stop-loss;
|
|
}
|
|
}
|
|
|
|
&__record {
|
|
font-size: 23px;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-ongoing-label');
|
|
}
|
|
|
|
small {
|
|
font-size: 15px;
|
|
}
|
|
|
|
&#{&}--entry-price {
|
|
@include theming {
|
|
color: $knk-color-entry-price;
|
|
}
|
|
}
|
|
|
|
&#{&}--exit-price {
|
|
@include theming {
|
|
color: $knk-color-exit-price;
|
|
}
|
|
}
|
|
|
|
&#{&}--stop-loss {
|
|
@include theming {
|
|
color: $knk-color-stop-loss;
|
|
}
|
|
}
|
|
|
|
&#{&}--negative {
|
|
font-size: 23px;
|
|
@include theming {
|
|
color: $knk-color-negative;
|
|
}
|
|
}
|
|
|
|
&#{&}--positive {
|
|
font-size: 23px;
|
|
@include theming {
|
|
color: $knk-color-positive;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__time-left {
|
|
font-family: Roboto;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
@include theming {
|
|
color: theme-get('color-ongoing-label');
|
|
}
|
|
}
|
|
|
|
&__price-direction {
|
|
font-size: 13px;
|
|
position: absolute;
|
|
}
|
|
|
|
&__chart {
|
|
height: 175px !important;
|
|
}
|
|
|
|
&__price {
|
|
margin-bottom: 8px !important;
|
|
margin-top: 24px;
|
|
margin-left: 21px;
|
|
}
|
|
}
|
|
|
|
@mixin knk-track-knok-image-card() {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 300px;
|
|
border-radius: 5px;
|
|
@include theming($if: default) {
|
|
border: solid 1px #e4e8ea;
|
|
background-color: #f2f2f2;
|
|
}
|
|
@include theming($if: night) {
|
|
background-color: theme-get('color-surface');
|
|
border: solid 1px rgba(1, 1, 1, 0.5);
|
|
}
|
|
|
|
&__model {
|
|
object-fit: scale-down;
|
|
object-position: center center;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
&__controls {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0 16px 8px;
|
|
}
|
|
|
|
&__control {
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: 0;
|
|
border: 0;
|
|
background: transparent none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@mixin knk-avatar($area: 58px) {
|
|
width: $area;
|
|
height: $area;
|
|
border: solid 2px transparent;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
|
|
&__image {
|
|
max-width: $area;
|
|
max-height: $area;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 50%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
&__icon {
|
|
font-size: $area;
|
|
@include ng-theming {
|
|
color: theme-get('color-primary');
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-ng-select-dropdown() {
|
|
&.ng-dropdown-panel {
|
|
@include theming {
|
|
border-color: theme-get('color-spacer');
|
|
background-color: theme-get('color-secondary');
|
|
}
|
|
|
|
.ng-dropdown-panel-items .ng-option {
|
|
@include theming {
|
|
background-color: theme-get('color-secondary');
|
|
}
|
|
transition: background-color 0.25s linear;
|
|
will-change: background-color;
|
|
@include knk-font-default;
|
|
@include theming($if: default) {
|
|
color: rgba(theme-get('color-black'), 0.9);
|
|
}
|
|
@include theming($if: night) {
|
|
color: rgba(theme-get('color-white'), 0.9);
|
|
}
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ng-dropdown-panel-items .ng-option.ng-option-selected {
|
|
@include theming {
|
|
background-color: rgba(theme-get('color-primary'), 0.5);
|
|
}
|
|
}
|
|
|
|
.ng-dropdown-panel-items .ng-option.ng-option-marked {
|
|
@include theming {
|
|
background-color: rgba(theme-get('color-primary'), 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ng-dropdown-panel.ng-select-bottom {
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
@mixin knk-ng-select-single() {
|
|
&.ng-select.ng-select-single {
|
|
max-width: 280px;
|
|
|
|
.ng-select-container {
|
|
height: 35px;
|
|
border-radius: 5px;
|
|
@include theming {
|
|
border-color: theme-get('color-spacer');
|
|
background-color: theme-get('color-secondary');
|
|
}
|
|
transition: border-color, box-shadow 0.25s linear;
|
|
will-change: border-color, box-shadow;
|
|
}
|
|
|
|
.ng-select-container .ng-value-container,
|
|
.ng-select-container .ng-value-container .ng-input {
|
|
padding-left: 20px;
|
|
|
|
& > input {
|
|
@include theming($if: default) {
|
|
color: #9b9b9b;
|
|
}
|
|
@include theming($if: night) {
|
|
color: rgba(theme-get('color-white'), 0.9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ng-select-container .ng-value-container,
|
|
.ng-select-container .ng-value-container .ng-placeholder,
|
|
.ng-select-container .ng-value-container .ng-value {
|
|
transition: color 0.25s linear;
|
|
will-change: color;
|
|
@include knk-font-default;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
@include theming($if: default) {
|
|
color: #9b9b9b;
|
|
}
|
|
@include theming($if: night) {
|
|
color: rgba(theme-get('color-white'), 0.9);
|
|
}
|
|
text-transform: initial;
|
|
}
|
|
|
|
.ng-arrow-wrapper {
|
|
padding-right: 10px;
|
|
width: auto;
|
|
}
|
|
|
|
.ng-arrow-wrapper .ng-arrow {
|
|
top: 0;
|
|
width: auto;
|
|
height: auto;
|
|
border: 0;
|
|
|
|
&:before {
|
|
content: 'keyboard_arrow_down';
|
|
font-family: 'Material Icons';
|
|
font-size: 28px;
|
|
@include theming {
|
|
color: theme-get('color-primary');
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ng-select-opened {
|
|
> .ng-select-container .ng-arrow {
|
|
top: 0;
|
|
border: 0;
|
|
|
|
&:before {
|
|
content: 'keyboard_arrow_up';
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ng-select-focused:not(.ng-select-opened) {
|
|
> .ng-select-container {
|
|
@include theming {
|
|
border-color: theme-get('color-primary');
|
|
box-shadow: inset 0 1px 1px rgba(theme-get('color-primary'), 0.075), 0 0 0 3px rgba(theme-get('color-primary'), 0.1);
|
|
}
|
|
}
|
|
|
|
.ng-select-container .ng-value-container,
|
|
.ng-select-container .ng-value-container .ng-placeholder,
|
|
.ng-select-container .ng-value-container .ng-value {
|
|
@include theming {
|
|
color: theme-get('color-primary');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin knk-ng-select() {
|
|
@include knk-ng-select-single;
|
|
@include knk-ng-select-dropdown;
|
|
}
|