soneta-ui-style
This commit is contained in:
Marcin Wojas
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,782 @@
|
||||
@import "PredefinedFonts";
|
||||
|
||||
$font_size_body: 10pt;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
font-size: $font_size_body;
|
||||
font-family: var(--defaultFont);
|
||||
background: var(--theme_body_bg);
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: pink;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overscroll-behavior: none;
|
||||
@extend .unselectable;
|
||||
|
||||
.dx-overlay-wrapper.dx-toast-wrapper {
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.stop-scrolling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//będzie potrzebne by nie tworzył mechanizmu zazaczania na nie potrzebnych elementach
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
@extend .unselectable;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: var(--theme_bg);
|
||||
|
||||
[contenteditable="true"] {
|
||||
-webkit-user-select: text;
|
||||
-webkit-user-modify: read-write;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[type=text]::-ms-clear,
|
||||
input[role=textbox]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Animation
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation text from left to right
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@keyframes backAndForth {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateX(calc(-100%));
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: translateX(calc(-100%));
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* slide in from top
|
||||
* ----------------------------------------
|
||||
*/
|
||||
.animationLightSpeedIn :global {
|
||||
animation-duration: 0.8s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: lightSpeedIn;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes lightSpeedIn {
|
||||
0% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translateY(20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightSpeedIn {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* slide left and right
|
||||
* ----------------------------------------
|
||||
*/
|
||||
.animationLightSpeedRollLeft :global {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: RollXLeft;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-name: RollXLeft;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes RollXLeft {
|
||||
0% {
|
||||
-webkit-transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes RollXLeft {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animationLightSpeedRollRight :global {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: RollXRight;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-name: RollXRight;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes RollXRight {
|
||||
0% {
|
||||
-webkit-transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes RollXRight {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim-open {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes anim-close {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-open {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-close {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* BounceIn
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes bounceIn {
|
||||
0%, 20%, 40%, 60%, 80%, 100% {
|
||||
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(.9, .9, .9);
|
||||
transform: scale3d(.9, .9, .9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: scale3d(.97, .97, .97);
|
||||
transform: scale3d(.97, .97, .97);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0%, 20%, 40%, 60%, 80%, 100% {
|
||||
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(.9, .9, .9);
|
||||
transform: scale3d(.9, .9, .9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: scale3d(.97, .97, .97);
|
||||
transform: scale3d(.97, .97, .97);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* FadeInUp
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* FadeOutDown
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
@-webkit-keyframes fadeOutDown {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* LightSpeedIn
|
||||
* ----------------------------------------
|
||||
*/
|
||||
.lightSpeedIn :global {
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
animation-name: lightSpeedIn;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes lightSpeedIn {
|
||||
0% {
|
||||
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: skewX(-5deg);
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightSpeedIn {
|
||||
0% {
|
||||
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: skewX(-5deg);
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation shadow-drop-center
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes shadow-drop-center {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(50px);
|
||||
transform: translateZ(50px);
|
||||
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-drop-center {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateZ(50px);
|
||||
transform: translateZ(50px);
|
||||
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation shadow-inset-center
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes shadow-inset-center {
|
||||
0% {
|
||||
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-inset-center {
|
||||
0% {
|
||||
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.1), 0 0 1px 1px rgba(175, 175, 175, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation swing-in-top-fwd
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
-webkit-transform: rotateX(-100deg);
|
||||
transform: rotateX(-100deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
-webkit-transform: rotateX(-100deg);
|
||||
transform: rotateX(-100deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation flip-in-hor-bottom
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes flip-in-hor-bottom {
|
||||
0% {
|
||||
-webkit-transform: rotateX(80deg);
|
||||
transform: rotateX(80deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0);
|
||||
transform: rotateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flip-in-hor-bottom {
|
||||
0% {
|
||||
-webkit-transform: rotateX(80deg);
|
||||
transform: rotateX(80deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateX(0);
|
||||
transform: rotateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animations for spinner
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
@keyframes loaderEnter {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes loaderEnter {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes color {
|
||||
100%, 0% { stroke: var(--loader_color1); }
|
||||
40% { stroke: var(--loader_color2); }
|
||||
66% { stroke: var(--loader_color3); }
|
||||
80%, 90% { stroke: var(--loader_color4); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes color {
|
||||
100%, 0% { stroke: var(--loader_color1); }
|
||||
40% { stroke: var(--loader_color2); }
|
||||
66% { stroke: var(--loader_color3); }
|
||||
80%, 90% { stroke: var(--loader_color4); }
|
||||
}
|
||||
|
||||
@keyframes wait-color {
|
||||
100%, 0% { stroke: var(--spinner_wait_color); }
|
||||
40% { stroke: var(--spinner_wait_color); }
|
||||
66% { stroke: var(--spinner_wait_color); }
|
||||
80%, 90% { stroke: var(--spinner_wait_color); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes wait-color {
|
||||
100%, 0% { stroke: var(--spinner_wait_color); }
|
||||
40% { stroke: var(--spinner_wait_color); }
|
||||
66% { stroke: var(--spinner_wait_color); }
|
||||
80%, 90% { stroke: var(--spinner_wait_color); }
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* PREDEFINED COLORS */
|
||||
$white: rgb(255, 255, 255);
|
||||
|
||||
$lightGray: rgb(208, 208, 208);
|
||||
$lightGray2: rgb(213, 213, 213);
|
||||
$lightGray3: rgb(187, 187, 187);
|
||||
$lightGray4: rgb(172, 172, 172);
|
||||
|
||||
$verylightGray: rgb(242, 242, 242);
|
||||
$verylightGray2: rgb(224, 224, 224);
|
||||
$verylightGray4: rgb(234, 234, 234);
|
||||
$verylightGray5: rgb(229, 229, 229);
|
||||
$verylightGray6: rgb(193, 193, 193);
|
||||
$verylightGray7: rgb(245, 245, 245);
|
||||
|
||||
$darkGray: rgb(140, 140, 140);
|
||||
$darkGray2: rgb(128, 128, 128);
|
||||
$verydarkGray: rgb(70, 70, 70);
|
||||
$verydarkGray2: rgb(95, 95, 95);
|
||||
|
||||
$darkGreen: rgb(27, 94, 32);
|
||||
$darkGreen3: rgb(100, 146, 0);
|
||||
|
||||
$pureBlack: rgb(0, 0, 0);
|
||||
$mostlyBlack: rgb(45, 45, 45);
|
||||
$strongYellow: rgb(200, 200, 50);
|
||||
$strongOrange: rgb(255, 152, 0);
|
||||
$strongRed: rgb(220, 20, 0);
|
||||
$strongGreen: rgb(60, 130, 50);
|
||||
$strongBlue: rgb(0, 178, 238);
|
||||
|
||||
$mostlydesaturateddarkBlue: rgb(94, 134, 152);
|
||||
$lightdesaturateddarkBlue: rgba(120, 170, 195, 0.85);
|
||||
$verypaleYellow: rgb(255, 250, 208);
|
||||
|
||||
$vividBlue: rgb(34, 34, 255);
|
||||
$vividLimeGreen: rgb(34, 255, 34);
|
||||
$vividOrange: rgb(255, 165, 34);
|
||||
$vividRed: rgb(255, 34, 34);
|
||||
|
||||
$palette_premium_blue: rgb(59, 134, 255);
|
||||
$palette_premium_green: rgb(61, 207, 120);
|
||||
$palette_premium_gray: rgb(66, 82, 109);
|
||||
$palette_premium_orange: rgb(255, 157, 0);
|
||||
$palette_premium_red: rgb(214, 36, 77);
|
||||
$palette_premium_turquise: rgb(66, 210, 212);
|
||||
|
||||
$palette_premium_darkgreen: rgb(43, 157, 31);
|
||||
$palette_premium_lightgray: rgb(229, 233, 243);
|
||||
@@ -0,0 +1,106 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Light.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Medium.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ROBOTO";
|
||||
src: url("/assets/fonts/Roboto-Bold.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansLight";
|
||||
src: url("/assets/fonts/FiraSans-Light.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansLightItalic";
|
||||
src: url("/assets/fonts/FiraSans-LightItalic.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansMedium";
|
||||
src: url("/assets/fonts/FiraSans-Medium.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSans";
|
||||
src: url("/assets/fonts/SourceSansPro-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSans";
|
||||
src: url("/assets/fonts/FiraSans-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansItalic";
|
||||
src: url("/assets/fonts/FiraSans-Italic.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "FiraSansMedium";
|
||||
src: url("/assets/fonts/FiraSans-Medium.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSans";
|
||||
src: url("/assets/fonts/SourceSansPro-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSansLight";
|
||||
src: url("/assets/fonts/SourceSansPro-Light.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SourceSansSemiBold";
|
||||
src: url("/assets/fonts/SourceSansPro-SemiBold.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Lato";
|
||||
src: url("/assets/fonts/Lato-Regular.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LatoItalic";
|
||||
src: url("/assets/fonts/Lato-Italic.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LatoBold";
|
||||
src: url("/assets/fonts/Lato-Bold.ttf") format('truetype');
|
||||
font-display: fallback;
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
@mixin focus(
|
||||
$outline: $focus_outline,
|
||||
$outline-offset: null,
|
||||
$outline-width: null,
|
||||
$box-shadow: $focus_box_shadow,
|
||||
$border-radius: null,
|
||||
$border: null
|
||||
) {
|
||||
@if $outline != null {
|
||||
outline: $outline;
|
||||
}
|
||||
|
||||
@if $outline-width != null {
|
||||
outline-width: $outline-width;
|
||||
}
|
||||
|
||||
@if $outline-offset != null {
|
||||
outline-offset: $outline-offset;
|
||||
}
|
||||
|
||||
@if $box-shadow != null {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
@if $border-radius != null {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@if $border != null {
|
||||
border: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gradientBorder($color, $height) {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color), to(transparent));
|
||||
background-image: -webkit-linear-gradient(180deg, $color, transparent), -webkit-linear-gradient(180deg, $color, transparent);
|
||||
background-image: -moz-linear-gradient(180deg, $color, transparent), -moz-linear-gradient(180deg, $color, transparent);
|
||||
background-image: -o-linear-gradient(180deg, $color, transparent), -o-linear-gradient(180deg, $color, transparent);
|
||||
background-image: linear-gradient(20deg, $color, transparent), linear-gradient(90deg, $color, transparent);
|
||||
-moz-background-size: 100% $height;
|
||||
background-size: 100% $height;
|
||||
background-position: 0 100%, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin gradientBg($color1, $color2, $height) {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color1), to($color2));
|
||||
background-image: -webkit-linear-gradient(180deg, $color1, $color2), -webkit-linear-gradient(180deg, $color1, $color2);
|
||||
background-image: -moz-linear-gradient(180deg, $color1, $color2), -moz-linear-gradient(180deg, $color1, $color2);
|
||||
background-image: -o-linear-gradient(180deg, $color1, $color2), -o-linear-gradient(180deg, $color1, $color2);
|
||||
background-image: linear-gradient(20deg, $color1, $color2), linear-gradient(90deg, $color1, $color2);
|
||||
-moz-background-size: 100% $height;
|
||||
background-size: 100% $height;
|
||||
background-position: 0 100%, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@mixin flexDisplay() {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flexKeepSizeDisplay() {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
-webkit-flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
}
|
||||
|
||||
@mixin flexWrap($wrapMode) {
|
||||
-webkit-flex-wrap: $wrapMode;
|
||||
-ms-flex-wrap: $wrapMode;
|
||||
flex-wrap: $wrapMode;
|
||||
}
|
||||
|
||||
@mixin flexDirection($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flexJustifyContent($justify, $msjustify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-ms-flex-pack: $msjustify;
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
||||
@mixin flexAlignItems($align, $msalign) {
|
||||
-webkit-align-items: $align;
|
||||
-ms-flex-align: $msalign;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin flexAlignContent($align, $msalign) {
|
||||
-webkit-align-content: $align;
|
||||
-ms-flex-line-pack: $msalign;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin flexAlignSelf($align) {
|
||||
-webkit-align-self: $align;
|
||||
-ms-flex-item-align: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
|
||||
@mixin flexSelf($grow, $shrink, $basis) {
|
||||
-webkit-flex: $grow $shrink $basis;
|
||||
-ms-flex: $grow $shrink $basis;
|
||||
flex: $grow $shrink $basis;
|
||||
}
|
||||
|
||||
@mixin flexOrder($order) {
|
||||
-webkit-order: $order;
|
||||
-ms-flex-order: $order;
|
||||
order: $order;
|
||||
}
|
||||
|
||||
@mixin positionAbsolute($margin) {
|
||||
position: absolute;
|
||||
top: $margin;
|
||||
left: $margin;
|
||||
right: $margin;
|
||||
bottom: $margin;
|
||||
}
|
||||
|
||||
@mixin boxShadow($shadow_color: null) {
|
||||
@if ($shadow_color) {
|
||||
box-shadow: 2px 3px 3px -1px $shadow_color;
|
||||
-webkit-box-shadow: 2px 3px 3px -1px $shadow_color;
|
||||
-moz-box-shadow: 2px 3px 3px -1px $shadow_color;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: 2px 3px 3px -1px none;
|
||||
-moz-box-shadow: 2px 3px 3px -1px none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flexSelf($grow, $shrink, $basis) {
|
||||
-webkit-flex: $grow $shrink $basis;
|
||||
-ms-flex: $grow $shrink $basis;
|
||||
flex: $grow $shrink $basis;
|
||||
}
|
||||
|
||||
// .fadeInUp :global {
|
||||
// -webkit-animation-name: fadeInUp;
|
||||
// animation-name: fadeInUp;
|
||||
// -webkit-animation-duration: 0.6s;
|
||||
// animation-duration: 0.6s;
|
||||
// -webkit-animation-fill-mode: both;
|
||||
// animation-fill-mode: both;
|
||||
// }
|
||||
|
||||
// .fadeOutDown :global {
|
||||
// -webkit-animation-name: fadeOutDown;
|
||||
// animation-name: fadeOutDown;
|
||||
// -webkit-animation-duration: 0.6s;
|
||||
// animation-duration: 0.6s;
|
||||
// -webkit-animation-fill-mode: both;
|
||||
// animation-fill-mode: both;
|
||||
// }
|
||||
|
||||
@mixin animateFadeInUpFadeOutDown($delay) {
|
||||
-webkit-animation: fadeInUp 0.6s both, fadeOutDown 0.6s $delay forwards;
|
||||
animation: fadeInUp 0.6s both, fadeOutDown 0.6s $delay forwards;
|
||||
}
|
||||
|
||||
@mixin multilineEllipsis($lines) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
}
|
||||
|
||||
@mixin fullScreenButton() {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: $field_image_full_screen_bg;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: $field_image_full_screen_shadow;
|
||||
}
|
||||
|
||||
@mixin transition($property, $duration, $function, $delay) {
|
||||
-webkit-transition: $property $duration $function $delay;
|
||||
-moz-transition: $property $duration $function $delay;
|
||||
-o-transition: $property $duration $function $delay;
|
||||
-ms-transition: $property $duration $function $delay;
|
||||
transition: $property $duration $function $delay;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* MOON THEME COLORS */
|
||||
$moon_desaturated-gray: rgb(127, 133, 163);
|
||||
$moon_dark-blue: rgb(62, 104, 215);
|
||||
$moon_blue: rgb(130, 170, 255);
|
||||
$moon_sky-blue: rgb(101, 188, 255);
|
||||
$moon_cyan: rgb(134, 225, 252);
|
||||
$moon_red: rgb(255, 117, 127);
|
||||
$moon_dark-red: rgb(255, 83, 112);
|
||||
$moon_light-red: rgb(255, 152, 164);
|
||||
$moon_yellow: rgb(255, 199, 119);
|
||||
$moon_orange: rgb(255, 150, 108);
|
||||
$moon_dark-orange: rgb(252, 123, 123);
|
||||
$moon_teal: rgb(79, 214, 190);
|
||||
$moon_green: rgb(195, 232, 141);
|
||||
$moon_purple: rgb(192, 153, 255);
|
||||
$moon_pink: rgb(252, 167, 234);
|
||||
$moon_indigo: rgb(122, 136, 207);
|
||||
$moon_indigo_light: rgb(162, 177, 255);
|
||||
$moon_bright-cyan: rgb(180, 249, 248);
|
||||
|
||||
$moon_gray-10-alt: rgb(188, 196, 214);
|
||||
$moon_gray-10: rgb(200, 211, 245);
|
||||
$moon_gray-9: rgb(180, 194, 240);
|
||||
$moon_gray-8: rgb(169, 184, 232);
|
||||
$moon_gray-7: rgb(130, 139, 184);
|
||||
$moon_gray-6: rgb(68, 74, 115);
|
||||
$moon_gray-5: rgb(47, 51, 77);
|
||||
$moon_gray-4: rgb(34, 36, 54);
|
||||
$moon_gray-3: rgb(30, 32, 48);
|
||||
$moon_gray-2: rgb(25, 26, 42);
|
||||
$moon_gray-1: rgb(6, 6, 7);
|
||||
@@ -0,0 +1,76 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.splash-screen {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $splash_screen_bg;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: calc(50% - 50px);
|
||||
top: calc(50% - 50px);
|
||||
|
||||
path {
|
||||
fill: $splash_logo !important;
|
||||
}
|
||||
}
|
||||
|
||||
.splash-spinner,
|
||||
.splash-spinner:after {
|
||||
border-radius: 50%;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
.splash-spinner {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 6px;
|
||||
position: absolute;
|
||||
left: calc(50% - 65px);
|
||||
top: calc(50% - 65px);
|
||||
text-indent: -9999em;
|
||||
border-top: $splash_spinner_track;
|
||||
border-right: $splash_spinner_track;
|
||||
border-bottom: $splash_spinner_track;
|
||||
border-left: $splash_spinner_fill;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: splashSpinner 1.1s infinite linear;
|
||||
animation: splashSpinner 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes splashSpinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes splashSpinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.splash-screen {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $splash_screen_bg;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.svg-section {
|
||||
-webkit-animation: svgSection 1.5s infinite ease-in-out;
|
||||
animation: svgSection 1.5s infinite ease-in-out;
|
||||
|
||||
&.first {
|
||||
fill: $splash_logo_first_section !important;
|
||||
}
|
||||
|
||||
&.second {
|
||||
fill: $splash_logo_second_section !important;
|
||||
}
|
||||
|
||||
&.third {
|
||||
fill: $splash_logo_third_section !important;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
-webkit-animation-delay: .2s;
|
||||
animation-delay: .2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
-webkit-animation-delay: .4s;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes svgSection {
|
||||
0% { opacity: .4; }
|
||||
20% { opacity: 1; }
|
||||
100% { opacity: .4; }
|
||||
}
|
||||
|
||||
@keyframes svgSection {
|
||||
0% { opacity: .4; }
|
||||
20% { opacity: 1; }
|
||||
100% { opacity: .4; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
@import "./BasePage.module.scss";
|
||||
|
||||
.pageSpecial {
|
||||
@extend .baseContentStyles;
|
||||
|
||||
.p-content {
|
||||
@include partial-row-start-top;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $page_content_bg;
|
||||
font-family: $secondaryFont;
|
||||
|
||||
.adm-server,
|
||||
.adm-counters {
|
||||
@include partial-column-center-start;
|
||||
}
|
||||
|
||||
.adm-server {
|
||||
color: $page_adm_fg;
|
||||
margin: 15px;
|
||||
.adm-info {
|
||||
@include partial-row-center-start;
|
||||
height: 32px;
|
||||
|
||||
.adm-icon {
|
||||
@include partial-column-center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
path {
|
||||
fill: $page_adm_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-title {
|
||||
@include partial-row-center-start;
|
||||
height: inherit;
|
||||
font-size: 10pt;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.adm-value {
|
||||
font-size: 10pt;
|
||||
width: 250px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.locked {
|
||||
color: $page_adm_locked_fg;
|
||||
}
|
||||
|
||||
.adm-counters,
|
||||
.adm-domains {
|
||||
padding-left: 32px;
|
||||
.adm-info {
|
||||
@include partial-row-center-start;
|
||||
height: 24px;
|
||||
|
||||
.adm-icon {
|
||||
@include partial-column-center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
path {
|
||||
fill: $page_adm_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-counters {
|
||||
margin-top: 20px;
|
||||
.adm-info {
|
||||
.adm-title {
|
||||
width: 126px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-domains {
|
||||
@include partial-row-start-top;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
.adm-domain {
|
||||
border: $page_adm_domain_border;
|
||||
margin: 4px;
|
||||
.adm-info {
|
||||
.adm-icon {
|
||||
path {
|
||||
fill: $page_adm_icon;
|
||||
}
|
||||
}
|
||||
.adm-title {
|
||||
color: $page_adm_domain_title_fg;
|
||||
width: 126px;
|
||||
}
|
||||
&:first-child {
|
||||
background-color: $page_adm_domain_bg;
|
||||
|
||||
.adm-title {
|
||||
font-weight: bold;
|
||||
color: $page_adm_domain_title_fg;
|
||||
}
|
||||
.adm-value {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-counters {
|
||||
padding-left: 24px;
|
||||
.adm-info {
|
||||
.adm-icon {
|
||||
path {
|
||||
fill: $page_adm_icon;
|
||||
}
|
||||
}
|
||||
.adm-title {
|
||||
width: 102px;
|
||||
}
|
||||
&:first-child {
|
||||
background-color: transparent;
|
||||
.adm-title {
|
||||
font-weight: normal;
|
||||
color: $page_adm_domain_title_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-rq-infos {
|
||||
border: $page_adm_domain_border;
|
||||
margin: 0 24px;
|
||||
.adm-rq {
|
||||
height: 24px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.adm-rq:nth-child(even) {
|
||||
background-color: $page_adm_domain_even_bg;
|
||||
}
|
||||
.adm-rq:nth-child(odd) {
|
||||
background-color: $page_adm_domain_odd_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-actions {
|
||||
@include partial-row-center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
@import "./BasePage.module.scss";
|
||||
|
||||
$error_title_font_size: 13pt;
|
||||
|
||||
.errorContent {
|
||||
@include partial-box-shadow;
|
||||
font-family: $tertiaryFont;
|
||||
width: 400px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
border: $page_error_border;
|
||||
overflow: auto;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 1;
|
||||
|
||||
.error-bar,
|
||||
.warning-bar {
|
||||
@include partial-row-center;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
background: $error_bar_bg;
|
||||
color: $error_bar_fg;
|
||||
border-bottom: $error_bar_border;
|
||||
cursor: move;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
float: left;
|
||||
height: inherit;
|
||||
width: 48px;
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include partial-row-center-start;
|
||||
float: right;
|
||||
text-align: left;
|
||||
width: calc(100% - 48px);
|
||||
height: inherit;
|
||||
padding: 0 12px 0 0;
|
||||
line-height: calc(#{$error_title_font_size} + 4px);
|
||||
font-weight: lighter;
|
||||
font-size: $error_title_font_size;
|
||||
color: $error_title_fg;
|
||||
|
||||
span {
|
||||
@include partial-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-bar {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $error_bar_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-bar {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $warning_bar_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.errorMsg,
|
||||
.cookieMsg,
|
||||
.browserMsg {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
color: $page_error_fg;
|
||||
|
||||
span {
|
||||
font-size: $font_size_body;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
font-size: $font_size_title;
|
||||
}
|
||||
|
||||
.cookieMsg,
|
||||
.browserMsg {
|
||||
font-size: $font_size_label;
|
||||
}
|
||||
|
||||
.errorCommands {
|
||||
@include partial-column-center;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,356 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
$pagePanelWidth: 460px;
|
||||
$pageFooterHeight: 40px;
|
||||
$loginPanelWidth: 620px;
|
||||
$loginFooterHeight: 100px;
|
||||
|
||||
:global {
|
||||
#container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.baseContentStyles {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.regularPageContent {
|
||||
.p-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - #{$loginPanelWidth});
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transition-delay: 1s;
|
||||
transition: opacity 1s linear;
|
||||
|
||||
.i-bg {
|
||||
@include partial-column-center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: $page_image_filter;
|
||||
background-image: url("/assets/images/loginBg.jpg");
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
background: $page_image_bg_before;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.i-content {
|
||||
@include partial-column-start;
|
||||
align-items: flex-start;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.i-header {
|
||||
@include flexDisplay;
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
@include flexAlignItems(flex-end, end);
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
.c-logo {
|
||||
width: 458px;
|
||||
background: $page_header_logo_bg;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
line-height: 0;
|
||||
|
||||
svg {
|
||||
path {
|
||||
&:first-child {
|
||||
fill: $logo_color_1;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
fill: $logo_color_2;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
fill: $logo_color_3;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
fill: $logo_color_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-logo {
|
||||
@include partial-column-center-start;
|
||||
height: 70px;
|
||||
padding: 0 5px;
|
||||
background-position: 100% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.premium {
|
||||
height: 230px;
|
||||
|
||||
.c-logo {
|
||||
width: 366px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-content {
|
||||
@include partial-column-center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: $loginPanelWidth;
|
||||
background-color: $page_content_bg;
|
||||
box-shadow: $page_content_shadow;
|
||||
-webkit-box-shadow: $page_content_shadow;
|
||||
-moz-box-shadow: $page_content_shadow;
|
||||
}
|
||||
|
||||
.p-header {
|
||||
@include flexDisplay;
|
||||
@include flexAlignItems(flex-end, end);
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
padding: 10px 40px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-text {
|
||||
margin: 0;
|
||||
font-family: $tertiaryFont;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 35px;
|
||||
color: $page_header_text_fg;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center-end;
|
||||
padding-right: 40px;
|
||||
height: inherit;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 200px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
&:first-child {
|
||||
fill: $logo_color_1;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
fill: $logo_color_2;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
fill: $logo_color_3;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
fill: $logo_color_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-footer {
|
||||
@include flexDisplay;
|
||||
@include flexAlignItems(flex-start, start);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
width: 100%;
|
||||
height: $loginFooterHeight;
|
||||
text-align: center;
|
||||
font-size: $font_size_label;
|
||||
color: $page_footer_fg;
|
||||
background-color: transparent;
|
||||
padding: 10px 72px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.f-text {
|
||||
@include flexDisplay;
|
||||
@include flexAlignItems(flex-end, end);
|
||||
font-family: $tertiaryFont;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.p-content-premium {
|
||||
.p-header {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
&:nth-of-type(1) {
|
||||
fill: $logo_color_1 !important;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
fill: $logo_color_2 !important;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
fill: $logo_color_3;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
fill: $logo_color_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageContent {
|
||||
@extend .baseContentStyles;
|
||||
@extend .regularPageContent;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 100px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 2800px) {
|
||||
.t-prime {
|
||||
font-size: 4.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px) {
|
||||
.t-prime {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.t-prime {
|
||||
font-size: 3.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.t-prime {
|
||||
font-size: 2.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.t-prime {
|
||||
font-size: 2.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.t-prime {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.t-prime {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.t-prime {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.t-prime {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
.regularPageContent {
|
||||
.p-header {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.p-footer {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.p-info {
|
||||
.i-content {
|
||||
.i-header {
|
||||
height: 150px;
|
||||
|
||||
&.premium {
|
||||
height: 186px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 650px) {
|
||||
.regularPageContent {
|
||||
.p-header {
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.p-footer {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.p-info {
|
||||
.i-content {
|
||||
.i-header {
|
||||
height: 110px;
|
||||
|
||||
&.premium {
|
||||
height: 146px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
$size: 16px;
|
||||
$track_size: 16px;
|
||||
$track_hover_size: 16px;
|
||||
|
||||
$thumb_size: 6px;
|
||||
$thumb_hover_size: 16px;
|
||||
@@ -0,0 +1,171 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
$bookmark_font_size: 14px;
|
||||
|
||||
.hb-bookmark {
|
||||
@include partial-row-center;
|
||||
cursor: pointer;
|
||||
height: 34px;
|
||||
min-width: 100px;
|
||||
max-width: 250px;
|
||||
margin-top: 5px;
|
||||
margin-right: 4px;
|
||||
font-family: $bookmark_font;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_secondary,
|
||||
$outline-offset: 2px,
|
||||
$box-shadow: none,
|
||||
$border-radius: inherit,
|
||||
);
|
||||
}
|
||||
overflow: hidden;
|
||||
|
||||
box-shadow: $bookmark_shadow;
|
||||
background-color: $bookmark_bg;
|
||||
color: $bookmark_fg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_icon;
|
||||
}
|
||||
|
||||
.b-txt {
|
||||
@include partial-row-center;
|
||||
@include partial-ellipsis;
|
||||
height: 100%;
|
||||
width: calc(100% - 51px);
|
||||
padding-left: 16px;
|
||||
border-top-left-radius: 12px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
|
||||
div {
|
||||
@include partial-ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.b-close {
|
||||
@include partial-row-center;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
margin: 7px 12px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
.icon {
|
||||
@include flexDisplay();
|
||||
@include flexWrap(nowrap);
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(stretch, stretch);
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
|
||||
svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow: none;
|
||||
color: $bookmark_selected_fg;
|
||||
background-color: $bookmark_selected_bg;
|
||||
z-index: 1;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_selected_icon;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $bookmark_shadow;
|
||||
color: $bookmark_selected_hover_fg;
|
||||
background-color: $bookmark_selected_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_selected_hover_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused, &:focus {
|
||||
box-shadow: $bookmark_shadow;
|
||||
color: $bookmark_selected_focused_fg;
|
||||
background-color: $bookmark_selected_focused_bg;
|
||||
border: 1px solid $bookmark_selected_focused_border_color;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_selected_focused_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:target {
|
||||
box-shadow: $bookmark_shadow;
|
||||
color: $bookmark_selected_pressed_fg;
|
||||
background-color: $bookmark_selected_pressed_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_selected_pressed_icon;
|
||||
}
|
||||
}
|
||||
|
||||
.b-close:hover {
|
||||
color: $bookmark_close_hover_icon;
|
||||
background-color: $bookmark_close_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
box-shadow: $bookmark_shadow;
|
||||
background-color: $bookmark_bg;
|
||||
color: $bookmark_fg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_icon;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $bookmark_hover_fg;
|
||||
background-color: $bookmark_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_hover_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused, &:focus {
|
||||
color: $bookmark_focused_fg;
|
||||
background-color: $bookmark_focused_bg;
|
||||
border: 1px solid $bookmark_focused_border_color;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_focused_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:target {
|
||||
color: $bookmark_pressed_fg;
|
||||
background-color: $bookmark_pressed_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_pressed_icon;
|
||||
}
|
||||
}
|
||||
|
||||
.b-close:hover {
|
||||
color: $bookmark_close_selected_hover_icon;
|
||||
background-color: $bookmark_close_selected_hover_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
|
||||
.hb-bookmarks {
|
||||
@include flexDisplay;
|
||||
@include flexAlignSelf(auto);
|
||||
@include flexOrder(0);
|
||||
@include flexSelf(1, 1, auto);
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.b-new,
|
||||
.b-nav {
|
||||
@include partial-row-center;
|
||||
height: 34px;
|
||||
width: 36px;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
|
||||
box-shadow: $bookmark_shadow;
|
||||
background-color: $bookmark_bg;
|
||||
color: $bookmark_fg;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_secondary,
|
||||
$outline-offset: 0px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
path {
|
||||
fill: $bookmark_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $bookmark_hover_fg;
|
||||
background-color: $bookmark_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_hover_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused, &:focus {
|
||||
color: $bookmark_focused_fg;
|
||||
background-color: $bookmark_focused_bg;
|
||||
border: 1px solid $bookmark_focused_border_color;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_focused_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:target {
|
||||
color: $bookmark_pressed_fg;
|
||||
background-color: $bookmark_pressed_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_pressed_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: unset;
|
||||
background-color: $bookmark_disabled_bg;
|
||||
|
||||
svg path {
|
||||
fill: $bookmark_disabled_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.button {
|
||||
@include partial-transition;
|
||||
text-align: center;
|
||||
width: 170px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
|
||||
.title {
|
||||
@include partial-column-center-start;
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.waiting {
|
||||
@include partial-column-center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.sign-in {
|
||||
box-shadow: $signIn_btn_shadow;
|
||||
border: $signIn_btn_border;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_quaternary,
|
||||
$outline_offset: 2px
|
||||
);
|
||||
}
|
||||
|
||||
&:hover:not(.waiting),
|
||||
&:focus:not(.waiting) {
|
||||
box-shadow: $signIn_btn_hover_shadow;
|
||||
background-color: $signIn_btn_hover_bg;
|
||||
}
|
||||
|
||||
&:active:not(.waiting) {
|
||||
box-shadow: $signIn_btn_active_shadow;
|
||||
background-color: $signIn_btn_active_bg;
|
||||
color: $signIn_btn_active_color;
|
||||
}
|
||||
}
|
||||
|
||||
&.sign-in-dark {
|
||||
|
||||
&:hover:not(.waiting),
|
||||
&:focus:not(.waiting) {
|
||||
background-color: $signIn_btn_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.action {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 12pt;
|
||||
background-color: $signIn_btn_action_bg;
|
||||
color: $signIn_btn_action_fg;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: unset;
|
||||
left: unset;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
rect {
|
||||
fill: $signIn_btn_action_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 1px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.waiting {
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.versions {
|
||||
@include partial-row-center-start;
|
||||
height: 32px;
|
||||
font-size: 10pt;
|
||||
background-color: $signIn_btn_version_bg;
|
||||
color: $signIn_btn_version_fg;
|
||||
box-shadow: $signIn_btn_version_box_shadow;
|
||||
border: $signIn_btn_version_border;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: 2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
&:hover:not(.waiting),
|
||||
&:focus:not(.waiting) {
|
||||
box-shadow: var(--picker_button_hover_shadow);
|
||||
background-color: $signIn_btn_version_hover;
|
||||
}
|
||||
|
||||
.icon+.title {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
line-height: normal;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
fill: $signIn_btn_version_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include partial-column-center-start;
|
||||
padding: 0 4px;
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.recovery {
|
||||
box-shadow: $recovery_btn_shadow;
|
||||
background-color: $recovery_btn_login_bg;
|
||||
color: $recovery_btn_fg;
|
||||
border: none;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_quinary,
|
||||
$outline_offset: 2px
|
||||
);
|
||||
}
|
||||
|
||||
&:hover:not(.waiting),
|
||||
&:focus:not(.waiting) {
|
||||
box-shadow: $recovery_btn_hover_shadow;
|
||||
background-color: $recovery_btn_hover_bg;
|
||||
}
|
||||
|
||||
&:active:not(.waiting) {
|
||||
box-shadow: $recovery_btn_active_shadow;
|
||||
background-color: $recovery_btn_active_bg;
|
||||
color: $recovery_btn_active_fg;
|
||||
border: $recovery_btn_active_border;
|
||||
}
|
||||
}
|
||||
|
||||
&.btnSend {
|
||||
background-color: $signIn_btn_send_bg;
|
||||
}
|
||||
|
||||
&.btnGoLogin {
|
||||
background: $recovery_btn_go_login_bg;
|
||||
border: $recovery_btn_go_login_border;
|
||||
color: $recovery_btn_go_login_color;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline_offset: 2px
|
||||
);
|
||||
}
|
||||
|
||||
&:hover:not(.waiting),
|
||||
&:focus:not(.waiting) {
|
||||
background-color: $recovery_btn_go_login_hover;
|
||||
}
|
||||
|
||||
&:active:not(.waiting) {
|
||||
background-color: $recovery_btn_active_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 12pt;
|
||||
width: 250px;
|
||||
background-color: $error_command_bg;
|
||||
color: $error_command_fg;
|
||||
box-shadow: $error_command_shadow;
|
||||
border: $error_command_border;
|
||||
|
||||
.title {
|
||||
@include partial-column-center;
|
||||
}
|
||||
|
||||
&:hover:not(.waiting),
|
||||
&:focus:not(.waiting) {
|
||||
box-shadow: $recovery_btn_hover_shadow;
|
||||
background-color: $error_command_hover;
|
||||
}
|
||||
|
||||
&:active:not(.waiting) {
|
||||
box-shadow: $recovery_btn_active_shadow;
|
||||
background-color: $error_command_active;
|
||||
color: $recovery_btn_active_fg;
|
||||
border: $error_command_active_border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adm-action {
|
||||
@include partial-column-center;
|
||||
@include boxShadow($page_adm_action_shadow_target_color);
|
||||
cursor: pointer;
|
||||
font-size: 8pt;
|
||||
width: 60px;
|
||||
border: $page_adm_action_border;
|
||||
border-radius: 2px;
|
||||
margin: 2px 4px;
|
||||
padding: 2px;
|
||||
background-color: $page_adm_action_bg;
|
||||
color: $page_adm_action_fg;
|
||||
|
||||
&:hover {
|
||||
background-color: $page_adm_action_hover_bg;
|
||||
color: $page_adm_action_hover_fg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include boxShadow();
|
||||
background-color: $recovery_btn_active_bg;
|
||||
color: $recovery_btn_active_fg;
|
||||
border: $error_command_active_border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
.cards {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: $grid_border;
|
||||
|
||||
.cards-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $grid_focused_border;
|
||||
}
|
||||
}
|
||||
|
||||
.cards-premium {
|
||||
.cards-main {
|
||||
background-color: $grid_main_bg;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $grid_filterbar_input_focused_border;
|
||||
box-shadow: $grid_focused_shadow;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "../mobilebrowser/Carousel.module.scss";
|
||||
|
||||
.carousel {
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
$border-radius: 12px,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.chart {
|
||||
position: absolute;
|
||||
background-color: $chart_bg;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
img {
|
||||
border: $chart_border;
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.chips {
|
||||
@include partial-row-center;
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
font-family: Roboto;
|
||||
color: $chips_fg;
|
||||
|
||||
&.outlined {
|
||||
border: $chips_border;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: 16px;
|
||||
padding: 4px 12px;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
|
||||
.text {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-row-center;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
shape-rendering: geometricprecision;
|
||||
|
||||
path {
|
||||
fill: $chips_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
.circular-indicator {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.ci-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.ci-title, .ci-desc {
|
||||
width: inherit;
|
||||
height: auto;
|
||||
padding: 0 0 5px 5px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.ci-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ci-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
svg {
|
||||
background: $circular_indicator_bg;
|
||||
.ci-area {
|
||||
fill: none;
|
||||
stroke-linecap: butt;
|
||||
}
|
||||
|
||||
.ci-no-area {
|
||||
fill: none;
|
||||
stroke: #e6e6e6;
|
||||
stroke-linecap: butt;
|
||||
}
|
||||
|
||||
.ci-value {
|
||||
fill: $circular_indicator_fg;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: central;
|
||||
}
|
||||
}
|
||||
|
||||
.ci-legend-vertical, .ci-legend-horizontal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9pt;
|
||||
color: #222;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.li-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
padding-top: 5px;
|
||||
|
||||
.li-color {
|
||||
padding-top: 2px;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
fill: none;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: none;
|
||||
path {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.li-text {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.li-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
.li-text {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ci-legend-vertical {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.ci-legend-horizontal {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.cp-overlay {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
z-index: 200001;
|
||||
background-color: $cp_overlay_bg;
|
||||
}
|
||||
|
||||
.cp-box {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
height: auto;
|
||||
background-color: $cp_box_bg;
|
||||
border: $cp_box_border;
|
||||
overflow: hidden;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
|
||||
.active {
|
||||
outline: $cp_active;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.cp-color {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
margin: 0 0 10px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
path {
|
||||
fill: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:focus-visible {
|
||||
@include focus($box-shadow: none,
|
||||
$outline_offset: 3px,
|
||||
$outline_width: 2px,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.cp-color-frame {
|
||||
border: $cp_button_border;
|
||||
}
|
||||
|
||||
.cp-color-current {
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
border: $cp_button_border;
|
||||
}
|
||||
|
||||
.cp-color-sel-l, .cp-color-sel-d {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
}
|
||||
|
||||
.cp-color-sel-d {
|
||||
&::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
border-left: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-color-sel-l {
|
||||
&::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
border-left: 2px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-color-empty {
|
||||
background: $cp_empty_bg;
|
||||
}
|
||||
|
||||
.cp-settings-container {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(space-between, space-between);
|
||||
color: $cp_box_fc;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
|
||||
.cp-prev-box {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
margin: 0px;
|
||||
background: transparent;
|
||||
border: $cp_button_border;
|
||||
box-shadow: $cp_button_box_shadow;
|
||||
}
|
||||
|
||||
.cp-default-button {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
width: auto;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: $cp_button_border;
|
||||
box-shadow: $cp_button_box_shadow;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$box-shadow: none,
|
||||
$outline_offset: 2px,
|
||||
$outline_width: 2px,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.cp-theme-button {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
border: $cp_button_border;
|
||||
box-shadow: $cp_button_box_shadow;
|
||||
border-radius: 8px;
|
||||
width: 108px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus, &:focus-visible {
|
||||
@include focus(
|
||||
$box-shadow: none,
|
||||
$outline_offset: 2px,
|
||||
$outline_width: 2px,
|
||||
);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cp-prev-box-svg {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.cp-theme-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-theme-text {
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-theme-button-container {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(row-reverse);
|
||||
@include flexAlignItems(flex-end, end);
|
||||
}
|
||||
|
||||
.cp-input {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-colors-container {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(flex-start, start);
|
||||
@include flexJustifyContent(space-between, space-between);
|
||||
.cp-column {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(flex-start, start);
|
||||
}
|
||||
}
|
||||
|
||||
.cp-buttons-container {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(flex-end, flex-end);
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: $cp_button_color;
|
||||
|
||||
.cp-button {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: $cp_button_border;
|
||||
box-shadow: $cp_button_box_shadow;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$box-shadow: none,
|
||||
$outline_offset: 2px,
|
||||
$outline_width: 2px,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.cp-button-save {
|
||||
background-color: $cp_button_save_bg;
|
||||
color: $cp_button_save_color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.cp-overlay {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
background-color: $cp_overlay_bg;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
z-index: 200002;
|
||||
}
|
||||
|
||||
.cp-box {
|
||||
width: 100%;
|
||||
max-width: 316px;
|
||||
padding: 16px;
|
||||
height: 180px;
|
||||
background-color: var(--cp_box_bg);
|
||||
border: var(--cp_box_border);
|
||||
overflow: hidden;
|
||||
color: $cp_box_fc;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
|
||||
.cp-title {
|
||||
@include flexDisplay();
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cp-title-icon {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&>path {
|
||||
fill: RGBA(249, 115, 22);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-title-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cp-info-text {
|
||||
color: inherit;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cp-container-button {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(flex-end, flex-end);
|
||||
width: 100%;
|
||||
|
||||
.cp-button {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
border-radius: 6px;
|
||||
background-color: $cp_button_understand_bg;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: $cp_box_fg;
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$box-shadow: none,
|
||||
$outline_offset: 3px,
|
||||
$outline_width: 2px,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,587 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./Popup.module.scss";
|
||||
|
||||
.command {
|
||||
@include partial-row-center-start;
|
||||
@include partial-transition;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
height: 38px;
|
||||
font-family: $command_font;
|
||||
color: $command_form_fg;
|
||||
box-shadow: $command_form_shadow;
|
||||
border: $command_border;
|
||||
border-radius: 8px;
|
||||
|
||||
&:not(.search-more) {
|
||||
&:focus, &:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: 2px,
|
||||
$outline-width: 2px,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
float: left;
|
||||
|
||||
svg {
|
||||
@include partial-column-center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
path {
|
||||
fill: $command_form_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include partial-ellipsis;
|
||||
float: left;
|
||||
height: inherit;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.icon + .title {
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
padding: 6px 10px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
padding: 8px 12px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
padding: 12px 16px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
&.icon-right {
|
||||
.content {
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
@include flexDirection(row-reverse);
|
||||
}
|
||||
}
|
||||
|
||||
&.center {
|
||||
@include flexJustifyContent(center, center);
|
||||
|
||||
.content {
|
||||
@include flexJustifyContent(center, center);
|
||||
|
||||
.title {
|
||||
@include flexAlignItems(center, center);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.hover:not(.disabled) {
|
||||
box-shadow: $command_shadow;
|
||||
background-color: $command_hover_bg;
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
background-color: $command_form_active_bg;
|
||||
color: $command_form_active_fg;
|
||||
|
||||
.content {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $command_form_active_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: $command_primary_fg;
|
||||
background-color: $command_primary_bg;
|
||||
border-color: $command_primary_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_primary_fg;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.hover:not(.disabled) {
|
||||
color: $command_primary_hover_fg;
|
||||
background-color: $command_primary_hover_bg;
|
||||
border-color: $command_primary_hover_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_primary_hover_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled),
|
||||
&.focused:not(.disabled) {
|
||||
color: $command_primary_focused_fg;
|
||||
background-color: $command_primary_focused_bg;
|
||||
border-color: $command_primary_focused_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_primary_focused_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
color: $command_primary_pressed_fg;
|
||||
background-color: $command_primary_pressed_bg;
|
||||
border-color: $command_primary_pressed_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_primary_pressed_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:not(.disabled) {
|
||||
color: $command_primary_selected_fg;
|
||||
background-color: $command_primary_selected_bg;
|
||||
border-color: $command_primary_selected_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_primary_selected_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $command_primary_disabled_fg;
|
||||
background-color: $command_primary_disabled_bg;
|
||||
border-color: $command_primary_disabled_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_primary_disabled_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $command_secondary_fg;
|
||||
background-color: $command_secondary_bg;
|
||||
border-color: $command_secondary_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_secondary_fg;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.hover:not(.disabled) {
|
||||
color: $command_secondary_hover_fg;
|
||||
background-color: $command_secondary_hover_bg;
|
||||
border-color: $command_secondary_hover_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_secondary_hover_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled),
|
||||
&.focused:not(.disabled) {
|
||||
color: $command_secondary_focused_fg;
|
||||
background-color: $command_secondary_focused_bg;
|
||||
border-color: $command_secondary_focused_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_secondary_focused_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
color: $command_secondary_pressed_fg;
|
||||
background-color: $command_secondary_pressed_bg;
|
||||
border-color: $command_secondary_pressed_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_secondary_pressed_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:not(.disabled) {
|
||||
color: $command_secondary_selected_fg;
|
||||
background-color: $command_secondary_selected_bg;
|
||||
border-color: $command_secondary_selected_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_secondary_selected_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $command_secondary_disabled_fg;
|
||||
background-color: $command_secondary_disabled_bg;
|
||||
border-color: $command_secondary_disabled_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_secondary_disabled_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tertiary {
|
||||
color: $command_tertiary_fg;
|
||||
background-color: $command_tertiary_bg;
|
||||
border-color: $command_tertiary_border_color;
|
||||
box-shadow: none;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_tertiary_icon;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.hover:not(.disabled) {
|
||||
color: $command_tertiary_hover_fg;
|
||||
background-color: $command_tertiary_hover_bg;
|
||||
border-color: $command_tertiary_hover_border_color;
|
||||
box-shadow: $command_form_shadow;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_tertiary_hover_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled),
|
||||
&.focused:not(.disabled) {
|
||||
color: $command_tertiary_focused_fg;
|
||||
background-color: $command_tertiary_focused_bg;
|
||||
border-color: $command_tertiary_focused_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_tertiary_focused_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
color: $command_tertiary_pressed_fg;
|
||||
background-color: $command_tertiary_pressed_bg;
|
||||
border-color: $command_tertiary_pressed_border_color;
|
||||
box-shadow: $command_form_shadow;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_tertiary_pressed_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:not(.disabled) {
|
||||
color: $command_tertiary_selected_fg;
|
||||
background-color: $command_tertiary_selected_bg;
|
||||
border-color: $command_tertiary_selected_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_tertiary_selected_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $command_tertiary_disabled_fg;
|
||||
background-color: $command_tertiary_disabled_bg;
|
||||
border-color: $command_tertiary_disabled_border_color;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $command_tertiary_disabled_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: $wb_close_color;
|
||||
border-color: $wb_close_color;
|
||||
|
||||
.content {
|
||||
.icon svg path {
|
||||
fill: $wb_close_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.hover:not(.disabled),
|
||||
&:focus:not(.disabled),
|
||||
&.focused:not(.disabled),
|
||||
&:active:not(.disabled) {
|
||||
color: $wb_close_color;
|
||||
|
||||
.content {
|
||||
.icon svg path {
|
||||
fill: $wb_close_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.command-modal,
|
||||
&.gridbar-command,
|
||||
&.simple-command,
|
||||
&.command-profile,
|
||||
&.command-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.command-modal {
|
||||
.content {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&.gridbar-command {
|
||||
&.commandlist .content {
|
||||
padding-right: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.command-short {
|
||||
width: 38px;
|
||||
|
||||
&.small {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ganttcommand,
|
||||
&.schedulercommand,
|
||||
&.kanbancommand,
|
||||
&.panelwinitem {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.skiptabindex {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.ganttcommand,
|
||||
&.schedulercommand,
|
||||
&.kanbancommand {
|
||||
.content {
|
||||
@include flexJustifyContent(center, center);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.loc-command {
|
||||
&:not(.search-more) {
|
||||
box-shadow: none;
|
||||
border-color: $grid_loc_command_border_color;
|
||||
}
|
||||
|
||||
&.search-more {
|
||||
border: $command_border;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
border: $command_border;
|
||||
border-color: var(--grid_loc_command_border_color);
|
||||
width: 36px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
.content {
|
||||
.title {
|
||||
@include multilineEllipsis(2);
|
||||
white-space: normal;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.command, .splitcommand {
|
||||
@include partial-row-center-start;
|
||||
}
|
||||
|
||||
.window-bar {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
|
||||
.content {
|
||||
.title {
|
||||
font-family: $wb_command_font_family;
|
||||
font-size: $wb_command_font_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commandlist {
|
||||
.content {
|
||||
.title {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.splitcommand {
|
||||
.content {
|
||||
.title {
|
||||
padding-right: 30px;
|
||||
|
||||
}
|
||||
.s-icon {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
right: 2px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 26px;
|
||||
width: 1px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
.content .s-icon {
|
||||
width: 30px;
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.medium {
|
||||
.content .s-icon {
|
||||
width: 30px;
|
||||
right: 2px;
|
||||
|
||||
&::before {
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
.content .s-icon {
|
||||
width: 30px;
|
||||
right: 6px;
|
||||
|
||||
&::before {
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
.content .s-icon::before {
|
||||
background-color: $command_primary_fg;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.content .s-icon::before {
|
||||
background-color: $command_primary_disabled_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
.content .s-icon::before {
|
||||
background-color: $command_secondary_fg;
|
||||
}
|
||||
&.disabled {
|
||||
.content .s-icon::before {
|
||||
background-color: $command_secondary_disabled_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tertiary {
|
||||
.content .s-icon::before {
|
||||
background-color: $command_tertiary_fg;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.content .s-icon::before {
|
||||
background-color: $command_tertiary_disabled_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
&.small {
|
||||
.content .s-icon {
|
||||
&::before {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.medium {
|
||||
.content .s-icon {
|
||||
&::before {
|
||||
height: 62px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
.content .s-icon {
|
||||
&::before {
|
||||
height: 88%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.only-child {
|
||||
border-radius: 12px;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.command-cube {
|
||||
@include partial-command;
|
||||
@include partial-column-center;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin: 8px;
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 12px;
|
||||
color: $command_cube_fg;
|
||||
background-color: $command_cube_bg;
|
||||
box-shadow: $command_cube_boxshadow;
|
||||
|
||||
.content {
|
||||
@include partial-column-center;
|
||||
height: 100%;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px);
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
path {
|
||||
fill: $command_cube_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
|
||||
&:not(.center) {
|
||||
@include multilineEllipsis(2);
|
||||
}
|
||||
|
||||
&.center {
|
||||
@include partial-column-center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.flip-in-hor-bottom :global {
|
||||
-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: flip-in-hor-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
.command-dashboard {
|
||||
@include partial-transition;
|
||||
border: $command_dashboard_border;
|
||||
padding: 0;
|
||||
font-family: $command_font;
|
||||
color: $command_form_fg;
|
||||
box-shadow: $command_form_shadow;
|
||||
border: $command_border;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus($outline-offset: 2px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
border: $command_dashboard_hover_border;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 8px 12px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
float: left;
|
||||
|
||||
svg {
|
||||
@include partial-column-center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
path {
|
||||
fill: $command_form_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include multilineEllipsis(2);
|
||||
white-space: normal;
|
||||
font-family: $tertiaryFont;
|
||||
float: left;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.icon + .title {
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&.small {
|
||||
.content {
|
||||
.title {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon+.title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&:only-child {
|
||||
width: 100% !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.medium,
|
||||
&.large {
|
||||
@include partial-column-start;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
justify-content: flex-start;
|
||||
|
||||
.title {
|
||||
@include partial-column-center-start;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
transition: color 0.2s ease-in 0s;
|
||||
}
|
||||
|
||||
.icon+.title {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
align-items: flex-start;
|
||||
|
||||
svg {
|
||||
path,
|
||||
tspan {
|
||||
transition: fill 0.2s ease-in 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon:only-child {
|
||||
margin: 0 14px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
@include partial-column-center-start;
|
||||
@include flexWrap(wrap);
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
line-height: 13px;
|
||||
transition: color 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0 10px;
|
||||
background-color: $command_dashboard_desc_bg;
|
||||
@include transition(background-color, .5s, linear, 0s);
|
||||
|
||||
&:not(.empty) {
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
align-content: flex-start;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
&.flip-in-hor-bottom {
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignContent(center, center);
|
||||
height: inherit;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include partial-column-center-start;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.medium {
|
||||
.content {
|
||||
.title {
|
||||
@include multilineEllipsis(3);
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
justify-content: space-between;
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
|
||||
.title {
|
||||
@include multilineEllipsis(5);
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
&.flip-in-hor-bottom {
|
||||
line-height: 12pt;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
padding: 6px 10px;
|
||||
font-size: 9pt;
|
||||
line-height: 12pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.small,
|
||||
&.medium,
|
||||
&.large {
|
||||
position: absolute;
|
||||
|
||||
&:hover:not(.disabled),
|
||||
&.hover:not(.disabled) {
|
||||
box-shadow: $command_dashboard_hover_shadow;
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
box-shadow: $command_dashboard_active_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.only-child {
|
||||
&.small,
|
||||
&.medium,
|
||||
&.large {
|
||||
border-radius: 12px;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.groupitem {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: inherit;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
display: flex;
|
||||
float: left;
|
||||
width: 22px;
|
||||
height: inherit;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
fill: $dashboard_item_icon_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.content {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $dashboard_item_icon_hover_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupitem-p {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 15px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import './CommandTopBar.module.scss';
|
||||
|
||||
.command {
|
||||
.bell-con {
|
||||
height: inherit;
|
||||
position: relative;
|
||||
|
||||
.notification {
|
||||
@include partial-row-center;
|
||||
position: absolute;
|
||||
padding: 0 4px;
|
||||
top: 3px;
|
||||
left: 12px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
background-color: $headerbar_command_bell_bg;
|
||||
color: $headerbar_command_bell_fg;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
font-family: $tertiaryFont;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
@import "./Variables.scss";
|
||||
@import "./FieldBase.module.scss";
|
||||
@import "./CommandTopBar.module.scss";
|
||||
|
||||
.command {
|
||||
width: unset;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: unset;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
padding: 0px 7px;
|
||||
|
||||
.content {
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
color: $headerbar_icon;
|
||||
width: unset;
|
||||
height: unset;
|
||||
|
||||
.time {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
line-height: 10pt;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
&.time-with-desc {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.timeDesc {
|
||||
font-size: 7pt;
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
border-left: 1px dotted $headerbar_bg;
|
||||
width: 20px;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
|
||||
path {
|
||||
fill: $command_timewatch_svg_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $command_timewatch_svg_hover_bg;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $headerbar_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_secondary,
|
||||
$outline-offset: -2px,
|
||||
$box-shadow: none
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.content {
|
||||
.time {
|
||||
color: $headerbar_icon_hover;
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $headerbar_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.command-p {
|
||||
margin-right: 0;
|
||||
background-color: unset;
|
||||
|
||||
.content {
|
||||
.time {
|
||||
font-size: 15px;
|
||||
color: $headerbar_icon;
|
||||
|
||||
.timeDesc {
|
||||
font-size: 8pt;
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $headerbar_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $palette_premium_lightgray;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_secondary,
|
||||
$outline-offset: -3px,
|
||||
$box-shadow: none
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.content {
|
||||
.time {
|
||||
color: $headerbar_icon_hover;
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $headerbar_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.command {
|
||||
@include partial-column-center;
|
||||
height: inherit;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 1px;
|
||||
border-radius: 8px;
|
||||
background-color: $headerbar_command_bg;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_secondary,
|
||||
$outline-offset: -2px,
|
||||
$box-shadow: none
|
||||
);
|
||||
}
|
||||
|
||||
&.split-command {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.timeContent {
|
||||
width: 55px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
|
||||
.time {
|
||||
width: 39px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
border-left: 1px dotted $headerbar_bg;
|
||||
width: 16px;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
|
||||
path {
|
||||
fill: $headerbar_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $bookmark_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
.icon {
|
||||
@include flexDisplay;
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
path {
|
||||
fill: $headerbar_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.split-command {
|
||||
width: 55px;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background-color: $headerbar_command_hover_bg;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $headerbar_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.command-p {
|
||||
margin-right: 0;
|
||||
background-color: unset;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_secondary,
|
||||
$outline-offset: -3px,
|
||||
$box-shadow: none
|
||||
);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $headerbar_icon_focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.special {
|
||||
background-color: $headerbar_command_special_bg;
|
||||
margin: 0 16px 0 8px;
|
||||
|
||||
.content {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.icon {
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content .icon svg path {
|
||||
stroke: $headerbar_command_special_icon;
|
||||
stroke-width: 3px;
|
||||
fill: $headerbar_command_special_fill;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $headerbar_command_special_hover_bg;
|
||||
|
||||
.content .icon svg path {
|
||||
fill: $headerbar_command_special_fill;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,685 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./Dialog.module.scss";
|
||||
@import "./Command.module.scss";
|
||||
|
||||
$icon_size: 32px;
|
||||
$date_max_size: 115px;
|
||||
|
||||
.order-n-s {
|
||||
@include partial-column-center-start;
|
||||
max-width: calc(100% - $icon_size);
|
||||
}
|
||||
|
||||
.order-w-e {
|
||||
@include partial-row-start-top;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.comment-base {
|
||||
position: relative;
|
||||
min-height: 25px;
|
||||
min-width: 500px;
|
||||
font-size: 12px;
|
||||
font-family: 'Arial';
|
||||
|
||||
&:focus-visible {
|
||||
@include focus($outline-offset: -2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
.c-he-con {
|
||||
@include partial-row-center-start;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
|
||||
.c-d {
|
||||
@include partial-row-start-top;
|
||||
margin: 4px 0;
|
||||
height: 100%;
|
||||
max-width: calc(100% - 180px);
|
||||
|
||||
.icon {
|
||||
height: $icon_size;
|
||||
width: $icon_size;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.c-b {
|
||||
@include partial-row-center-end;
|
||||
min-width: 180px;
|
||||
margin: 4px 0px 0 0px;
|
||||
}
|
||||
|
||||
.c-h-chips {
|
||||
@include partial-row-center;
|
||||
height: 24px;
|
||||
min-width: 120px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid;
|
||||
border-color: $th_chips_default_color;
|
||||
border-radius: 24px;
|
||||
margin-left: 10px;
|
||||
color: $th_chips_default_color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.c-h-author {
|
||||
@include partial-ellipsis;
|
||||
margin: 0 10px 0 5px;
|
||||
color: $comment_c_h_author_color;
|
||||
font-weight: 600;
|
||||
max-width: calc(100% - $date_max_size);
|
||||
}
|
||||
|
||||
.c-h-status {
|
||||
color: $comment_c_h_status_color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.c-h-con {
|
||||
@include partial-row-center-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.c-h-con-l {
|
||||
@include partial-row-center-start;
|
||||
}
|
||||
}
|
||||
|
||||
.c-h-date {
|
||||
@include partial-ellipsis;
|
||||
margin-right: 5px;
|
||||
color: $comment_c_h_date_color;
|
||||
max-width: $date_max_size;
|
||||
}
|
||||
|
||||
.c-h-source {
|
||||
@include partial-row-start-top;
|
||||
margin: 0 10px 0 5px;
|
||||
color: $comment_c_h_source_color;
|
||||
font-style: italic;
|
||||
|
||||
.c-h-source-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.c-h-source-val {
|
||||
color: $comment_c_h_source_val_color;
|
||||
}
|
||||
}
|
||||
|
||||
.c-h-draft {
|
||||
color: $comment_c_h_draft_color;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
.status-ball {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
border: $comment_ball_border;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-footer {
|
||||
@include partial-row-center-space-between;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
|
||||
.f-l {
|
||||
@include partial-row-center-start;
|
||||
}
|
||||
|
||||
.c-h-date {
|
||||
margin-right: 0;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
.c-h-nocomments {
|
||||
color: $comment_c_h_nocomments_color;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.c-btn {
|
||||
@include partial-row-center-start;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
padding-left: 20px;
|
||||
color: $comment_c_btn_fg;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $comment_c_btn_hover_shadow;
|
||||
background-color: $comment_c_btn_hover_bg;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:not(:first) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $comment_c_btn_icon_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-btn-green {
|
||||
color: $comment_c_btn_green_color;
|
||||
}
|
||||
|
||||
.c-like {
|
||||
@include partial-row-start-top;
|
||||
width: 120px;
|
||||
height: 24px;
|
||||
|
||||
.l-icon {
|
||||
@include partial-column-start;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $comment_c_like_icon_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-icon-ac {
|
||||
svg {
|
||||
path {
|
||||
stroke: $comment_c_like_icon_ac_color;
|
||||
fill: $comment_c_like_icon_ac_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-like-green {
|
||||
margin-right: 5px;
|
||||
font-weight: 600;
|
||||
color: $comment_c_like_green_color;
|
||||
}
|
||||
|
||||
.c-like-blue {
|
||||
margin-right: 5px;
|
||||
color: $comment_c_like_blue_color;
|
||||
}
|
||||
}
|
||||
|
||||
.c-fav {
|
||||
@include partial-row-start-top;
|
||||
width: 120px;
|
||||
height: 24px;
|
||||
|
||||
.l-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $comment_fav_icon_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-icon-ac {
|
||||
svg {
|
||||
path {
|
||||
fill: $comment_fav_icon_ac_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-fav-txt {
|
||||
margin-right: 5px;
|
||||
font-weight: 400;
|
||||
color: $comment_c_like_blue_color;
|
||||
}
|
||||
|
||||
.c-fav-txt-ac {
|
||||
font-weight: 600;
|
||||
color: $comment_c_like_green_color;
|
||||
}
|
||||
}
|
||||
|
||||
.c-img {
|
||||
width: 32px;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.base-text {
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
margin-top: 15px;
|
||||
color: $comment_base_text_color;
|
||||
background-color: $comment_base_text_bg;
|
||||
user-select: text;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $comment_base_link_color;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-text-trimed {
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-con {
|
||||
@include partial-row-start-top;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 2px 0 2px 6px;
|
||||
color: $comment_text_con_color;
|
||||
background-color: $comment_text_con_bg;
|
||||
border-top: $comment_text_con_border;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
@include partial-row-center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 2px 4px;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $comment_btn_more_icon_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $comment_btn_more_hover_bg;
|
||||
border: $comment_btn_more_hover_border;
|
||||
}
|
||||
}
|
||||
|
||||
.more-con {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
min-height: 32px;
|
||||
max-height: 96px;
|
||||
line-height: 32px;
|
||||
border-radius: 2px;
|
||||
border: $comment_btn_more_con_border;
|
||||
background-color: $comment_btn_more_con_bg;
|
||||
}
|
||||
|
||||
.base-show-more-con {
|
||||
@include partial-row-center-start;
|
||||
}
|
||||
|
||||
.base-show-more {
|
||||
display: none;
|
||||
height: 20px;
|
||||
width: 90px;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
color: $comment_base_show_more_color;
|
||||
box-shadow: $comment_base_show_more_shadow;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
@include partial-row-start-top;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-left: 35px;
|
||||
padding: 5px 0 5px 5px;
|
||||
color: $comment_color;
|
||||
|
||||
.comment-header {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.c-av {
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.comment-con {
|
||||
@include partial-column-center-start;
|
||||
height: 100%;
|
||||
width: calc(100% - 32px);
|
||||
margin-left: 8px;
|
||||
|
||||
.comment-val {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $comment_val_bg;
|
||||
border: $comment_val_border;
|
||||
border-radius: 4px;
|
||||
|
||||
.c-h-author {
|
||||
margin-right: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 0 2px 6px;
|
||||
color: $comment_val_c_h_author_color;
|
||||
}
|
||||
|
||||
.text-con {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.base-text {
|
||||
border: unset;
|
||||
padding: 0 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-zerom {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.comment-standard {
|
||||
border: $comment_text_con_border;
|
||||
}
|
||||
|
||||
.comment-raw {
|
||||
width: 100%;
|
||||
min-height: 26px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.comment-file {
|
||||
@include partial-row-center;
|
||||
height: 26px;
|
||||
width: 400px;
|
||||
min-height: unset;
|
||||
padding: 0 2px;
|
||||
border: $comment_file_border;
|
||||
background-color: $comment_file_bg;
|
||||
|
||||
.c-file-txt {
|
||||
width: calc(100% - 16px);
|
||||
height: 26px;
|
||||
padding: 0 5px;
|
||||
line-height: 26px;
|
||||
color: $comment_file_color;
|
||||
}
|
||||
|
||||
.c-file-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
fill: $comment_file_icon_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.th-full-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $thread_bg;
|
||||
z-index: 300000;
|
||||
padding: 0 10px;
|
||||
|
||||
.th-full-screen-header {
|
||||
@include partial-column-center-end;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.thread {
|
||||
padding: 2px;
|
||||
margin-bottom: 20px;
|
||||
background-color: $thread_bg;
|
||||
border: $thread_border;
|
||||
border-radius: 4px;
|
||||
|
||||
.thread-upper-part {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.th-title {
|
||||
@include partial-column-center-start;
|
||||
height: 42px;
|
||||
margin-left: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
color: $thread_title_color;
|
||||
}
|
||||
|
||||
.thread-footer {
|
||||
@include partial-column-center;
|
||||
height: 75px;
|
||||
padding: 0 8px;
|
||||
|
||||
.thread-footer-i {
|
||||
@include partial-row-center-space-between;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
color: $thread_footer_color;
|
||||
background-color: $thread_footer_bg;
|
||||
border: $thread_footer_border;
|
||||
|
||||
&:hover {
|
||||
color: $thread_footer_hover_color;
|
||||
background-color: $thread_footer_hover_bg;
|
||||
}
|
||||
|
||||
.th-btn-text {
|
||||
@include partial-row-center-start;
|
||||
}
|
||||
|
||||
.th-btn-icon {
|
||||
height: 16px;
|
||||
width: 24px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
stroke: $thread_footer_btn_icon_color;
|
||||
stroke-width: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thread-editor-con {
|
||||
@include partial-column-center-end;
|
||||
min-height: 200px;
|
||||
width: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background-color: $thread_editor_bg;
|
||||
|
||||
.thread-field {
|
||||
@include partial-column-center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.thread-btns-con {
|
||||
@include partial-row-center-space-between;
|
||||
height: 48px;
|
||||
max-width: 320px;
|
||||
gap: 8px;
|
||||
|
||||
.btn-c,
|
||||
.btn-s,
|
||||
.btn-s-r {
|
||||
@include partial-column-center;
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: $primaryFont;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background: $th_btn_active_bg;
|
||||
border: $th_btn_active_border;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
color: $th_btn_cancel_fg;
|
||||
background-color: $th_btn_cancel_bg;
|
||||
border: $th_btn_cancel_border;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
background: $th_btn_cancel_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-s {
|
||||
color: $th_btn_save_fg;
|
||||
background-color: $th_btn_save_bg;
|
||||
font-size: $th_btn_save_fs;
|
||||
|
||||
&:hover {
|
||||
background: $th_btn_save_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-s-r {
|
||||
max-width: 136px;
|
||||
width: 100%;
|
||||
color: $th_btn_draft_fg;
|
||||
background-color: $th_btn_draft_bg;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
background: $th_btn_cancel_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.th-modal-overlay {
|
||||
@extend .modal-overlay;
|
||||
@include partial-column-center;
|
||||
}
|
||||
|
||||
.th-modal {
|
||||
@extend .modal;
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
background-color: $thread_modal_bg;
|
||||
|
||||
.th-header {
|
||||
@extend .modal-bar;
|
||||
|
||||
.h-icon {
|
||||
@include partial-column-center;
|
||||
float: left;
|
||||
height: inherit;
|
||||
width: 48px;
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
path {
|
||||
fill: $thread_modal_header_icon_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h-title {
|
||||
@extend .title;
|
||||
|
||||
span {
|
||||
@include partial-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.th-txt {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
margin: 10px 0 5px 10px;
|
||||
|
||||
font-size: $font_size_body;
|
||||
line-height: calc(#{$font_size_body} + 4px);
|
||||
color: $thread_modal_text_color;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.th-btns {
|
||||
@include partial-row-center-end;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
|
||||
.cmd {
|
||||
@extend .command-modal;
|
||||
|
||||
.title {
|
||||
color: $thread_modal_bts_color;
|
||||
font-size: $thread_modal_bts_fs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
@import '../common/PredefinedMixins.scss';
|
||||
@import './partial.scss';
|
||||
@import './Variables.scss';
|
||||
|
||||
.bounceIn :global {
|
||||
animation-name: bounceIn;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: bounceIn;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.cookieBox {
|
||||
@include partial-transition;
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
min-width: 170px;
|
||||
width: calc(100% - 30px);
|
||||
max-width: 532px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
border-radius: 12px;
|
||||
background-color: $cookie_bg;
|
||||
box-shadow: $cookie_shadow;
|
||||
margin: 5px 0 5px 5px;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
z-index: 10;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.cookie-icon {
|
||||
@include partial-column-center;
|
||||
height: inherit;
|
||||
width: 84px;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 72px;
|
||||
height: 100%;
|
||||
|
||||
:global(.st0) {
|
||||
stroke: $cookie_path1_color;
|
||||
}
|
||||
|
||||
:global(.st1) {
|
||||
fill: $cookie_path2_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include partial-column-center-start;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
height: inherit;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
fill: $cookie_action_icon_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
color: $cookie_link_fg;
|
||||
font-weight: bold;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-column-center-start;
|
||||
font-size: 13px;
|
||||
font-family: $tertiaryFont;
|
||||
text-align: left;
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
color: $cookie_text_fg;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: $cookie_link_fg;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
@include flexDisplay;
|
||||
@extend .bounceIn;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.dashboard {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
background-color: $dashboard_bg;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
.dashboard-cell {
|
||||
@include partial-row-center-start;
|
||||
flex-wrap: wrap;
|
||||
font-size: 9pt;
|
||||
padding: 5px 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: $dashboard_cell_grid_padding;
|
||||
bottom: $dashboard_cell_grid_padding;
|
||||
background-color: $dashboard_cell_grid_bg;
|
||||
z-index: -10;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
margin: 0 20px 20px 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.design-item {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
.design-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
cursor: move;
|
||||
|
||||
.icon-settings,
|
||||
.icon-close,
|
||||
.icon-resize {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
fill: $dashboard_design_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-settings,
|
||||
.icon-close {
|
||||
@include partial-column-center;
|
||||
background-color: $dashboard_design_icon_bg;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: $dashboard_design_icon_border;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-settings {
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.icon-resize {
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: nw-resize;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
content: " ";
|
||||
transform: rotate(45deg);
|
||||
background-color: $dashboard_design_icon_bg;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 0px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: "";
|
||||
background-color: $dashboard_design_overlay_bg;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.focus {
|
||||
.design-content {
|
||||
-webkit-box-shadow: $dashboard_design_focus_shadow;
|
||||
-moz-box-shadow: $dashboard_design_focus_shadow;
|
||||
box-shadow: $dashboard_design_focus_shadow;
|
||||
border-radius: 8px 8px 0 8px;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.design-item-p {
|
||||
.design-content {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
|
||||
&::before {
|
||||
background-color: $dashboard_design_overlay_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DataScopePicker.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.date-scope-picker.horizontal-view {
|
||||
@include flexJustifyContent(flex-start, start);
|
||||
margin: 16px 8px 6px 8px;
|
||||
gap: 9px;
|
||||
font-size: 16px;
|
||||
|
||||
.content:has(> .icon) {
|
||||
@include flexJustifyContent(space-between, space-between);
|
||||
width: 165px;
|
||||
}
|
||||
|
||||
.content:not(:has(> .icon)) {
|
||||
@include flexJustifyContent(space-between, space-between);
|
||||
width: 135px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include flexJustifyContent(space-between, space-between);
|
||||
gap: 8px;
|
||||
|
||||
.caption {
|
||||
font-size: 16px;
|
||||
font-family: $dsp_font;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-scope-picker {
|
||||
.content {
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.date-navigator {
|
||||
@include flexDisplay;
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import './partial.scss';
|
||||
@import './Variables.scss';
|
||||
|
||||
.editor-date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: inherit;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
}
|
||||
|
||||
.vertical {
|
||||
@include flexDisplay();
|
||||
@include flexWrap(nowrap);
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(flex-end, flex-end);
|
||||
@include flexAlignItems(flex-start, flex-start);
|
||||
@include flexAlignContent(stretch, stretch);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerButtons.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@@ -0,0 +1,14 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerCalendar.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.container {
|
||||
&:focus-visible {
|
||||
@include focus($outline-offset: -2px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
$border-radius: 5px,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerCalendarMonth.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.container {
|
||||
.month-button {
|
||||
.label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.month-section {
|
||||
|
||||
.week-numbers {
|
||||
.week-number {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
.wrapper-day {
|
||||
.day:not(.day-off) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerContent.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.overlay {
|
||||
.container {
|
||||
font-family: $dp_font;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerHeader.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.container {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerNavigation.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.navigation {
|
||||
.container {
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: 4px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
$border-radius: 5px,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/DatePickerYearMonthContent.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.tp-overlay-screen {
|
||||
background-color: $theme_overlay_bg;
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./DiagramGlobal.scss";
|
||||
|
||||
.diagram-palette {
|
||||
height: inherit;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: none,
|
||||
$border: $focus_border,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.diagram-svg-element {
|
||||
*:not(path):not(g):not([fill]) {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.e-acrdn-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: 8px !important;
|
||||
background-color: $diagram_header_bg !important;
|
||||
|
||||
.e-acrdn-header-icon,
|
||||
.e-toggle-icon {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.e-acrdn-header-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.e-diagram {
|
||||
.e-grid-layer {
|
||||
opacity: $diagram_grid_opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.e-accordion .e-acrdn-item.e-select.e-acrdn-item>.e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
|
||||
color: var(--diagram_icon_expand_hover);
|
||||
}
|
||||
}
|
||||
|
||||
.diagram-main {
|
||||
position: absolute;
|
||||
border: $diagram_border;
|
||||
|
||||
.diagram-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
.diagram-editor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.diagram-zoom-content {
|
||||
@include partial-row-center;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background-color: $group_bg;
|
||||
border-top: $diagram_border;
|
||||
}
|
||||
}
|
||||
|
||||
.diagram-content-dark {
|
||||
text {
|
||||
fill: $diagram_content_fill_dark;
|
||||
}
|
||||
|
||||
path {
|
||||
stroke: $diagram_content_path_dark;
|
||||
}
|
||||
|
||||
pattern[id*="diagram"][id*="pattern"]>path {
|
||||
stroke: RGBA(var(--neutral_700));
|
||||
}
|
||||
|
||||
g[id*="taskTypeService"]>path {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
g[id*="dataobj"]>path {
|
||||
stroke: $diagram_palette_accrdn_sel_bg;
|
||||
}
|
||||
|
||||
g[id*="tarDec"]>path {
|
||||
fill: $diagram_content_fill_dark;
|
||||
}
|
||||
|
||||
g[id*="node"][id*="path"]>path {
|
||||
stroke: $diagram_palette_accrdn_sel_bg;
|
||||
stroke-width: 2px;
|
||||
fill: RGBA(var(--neutral_800));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #323233;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #131111;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
}
|
||||
|
||||
.diagram-content-custom-dark {
|
||||
g[id*="native_element"]>g>g>path {
|
||||
fill: RGBA(var(--neutral_300));
|
||||
}
|
||||
|
||||
g[id*="node"][id*="content"]>rect,
|
||||
path {
|
||||
fill: RGBA(var(--neutral_700));
|
||||
}
|
||||
}
|
||||
|
||||
.task-send-icon {
|
||||
path {
|
||||
fill: $diagram_group_icon;
|
||||
stroke: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-btn {
|
||||
@include partial-row-center;
|
||||
font-size: 9pt;
|
||||
line-height: 26px;
|
||||
font-weight: 300;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
margin-left: 15px;
|
||||
color: $tree_diagram_btn_fg;
|
||||
background-color: $tree_diagram_btn_bg;
|
||||
}
|
||||
|
||||
.print-icon {
|
||||
@include partial-column-center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
path {
|
||||
fill: $tree_diagram_btn_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
:global {
|
||||
.e-diagram {
|
||||
div::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
div::-webkit-scrollbar-track {
|
||||
background: #D4D4D4;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div::-webkit-scrollbar-thumb {
|
||||
background: #A3A3A3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
div::-webkit-scrollbar-thumb:hover {
|
||||
background: #737373;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.diagram-palette {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
border-right: $diagram_border;
|
||||
}
|
||||
|
||||
:global {
|
||||
.diagram-palette-dark-scrollbar {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #323233;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #131111;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
}
|
||||
|
||||
.e-accordion {
|
||||
background: $diagram_palette_bg;
|
||||
|
||||
.e-symbol-draggable>svg>g>g>g>g>g>path {
|
||||
fill: $diagram_content_fill_dark;
|
||||
}
|
||||
|
||||
.e-acrdn-item,
|
||||
.e-acrdn-item.e-select {
|
||||
background-color: transparent;
|
||||
border-top: $diagram_border !important;
|
||||
border-bottom: $diagram_border !important;
|
||||
|
||||
.e-expand-icon {
|
||||
color: $diagram_palette_accrdn_fg !important;
|
||||
|
||||
&:hover {
|
||||
color: $diagram_icon_expand_hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.e-acrdn-header,
|
||||
.e-acrdn-header:hover {
|
||||
background: $diagram_palette_accrdn_sel_bg;
|
||||
|
||||
.e-acrdn-header-content {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: $diagram_palette_accrdn_fg !important;
|
||||
|
||||
&:hover {
|
||||
color: $diagram_palette_accrdn_sel_fg;
|
||||
}
|
||||
}
|
||||
|
||||
.e-toggle-icon {
|
||||
color: $diagram_palette_accrdn_fg !important;
|
||||
|
||||
.e-accordion .e-tgl-collapse-icon::before {
|
||||
color: $diagram_palette_accrdn_sel_fg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.e-select.e-selected.e-expand-state,
|
||||
&.e-select.e-expand-state,
|
||||
&.e-item-focus.e-select.e-expand-state {
|
||||
|
||||
.e-acrdn-header,
|
||||
.e-acrdn-header:focus {
|
||||
background: $diagram_palette_accrdn_sel_bg;
|
||||
|
||||
.e-acrdn-header-content {
|
||||
color: $diagram_palette_accrdn_sel_fg;
|
||||
}
|
||||
|
||||
.e-toggle-icon {
|
||||
color: $diagram_palette_accrdn_sel_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.e-acrdn-item.e-selected.e-select.e-active {
|
||||
background-color: $diagram_palette_active_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.e-symbolpalette .e-acrdn-content {
|
||||
background-color: $diagram_palette_bg !important;
|
||||
}
|
||||
|
||||
.e-symbolpalette .e-symbol-hover:hover {
|
||||
background: $diagram_palette_item_bg_hover;
|
||||
}
|
||||
|
||||
.e-symbolpalette .e-symbol-selected {
|
||||
background-color: $diagram_palette_item_bg_selected;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./Label.module.scss";
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $modal_overlay_bg;
|
||||
|
||||
.modal {
|
||||
@include partial-box-shadow;
|
||||
@include partial-column-start;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
background: $modal_bg;
|
||||
border-radius: $modal_border_radius;
|
||||
font-family: $tertiaryFont;
|
||||
box-shadow: $modal_shadow;
|
||||
color: $modal_bar_fg;
|
||||
max-height: calc(100vh - 10px);
|
||||
max-width: calc(100vw - 10px);
|
||||
|
||||
.modal-bar {
|
||||
@include partial-row-center-end;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: $modal_bar_bg;
|
||||
border-bottom: $modal_bar_border;
|
||||
cursor: move;
|
||||
gap: 16px;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
float: left;
|
||||
height: inherit;
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
path {
|
||||
fill: $modal_bar_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include partial-row-center-start;
|
||||
float: right;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
margin: 0;
|
||||
font-weight: lighter;
|
||||
color: $modal_bar_title_fg;
|
||||
|
||||
span {
|
||||
@include partial-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-sections {
|
||||
@include partial-column-start;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
color: $modal_section_fg;
|
||||
align-items: flex-start;
|
||||
overflow-x: hidden;
|
||||
background: $modal_bg;
|
||||
|
||||
-webkit-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-o-user-select: text;
|
||||
user-select: text;
|
||||
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&.text-content {
|
||||
padding: 16px;
|
||||
|
||||
.section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
z-index: 200000;
|
||||
|
||||
.modal-bar {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $modal_command_error_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
.modal-bar {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $modal_command_info_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.question {
|
||||
.modal-bar {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $modal_command_question_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.modal-bar {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $modal_command_warning_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.premium {
|
||||
&.modal-overlay {
|
||||
.scroll-content {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.modal {
|
||||
padding: 0 10px;
|
||||
font-family: unset;
|
||||
|
||||
.modal-bar {
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 15px;
|
||||
float: unset;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
padding: 0 0 0 10px;
|
||||
font-weight: unset;
|
||||
border-left: $modal_bar_title_border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.modal-buttons {
|
||||
@include partial-row-center-end;
|
||||
width: 100%;
|
||||
background-color: $modal_bar_bg;
|
||||
border-top: $modal_bar_border;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.docx-designer-main {
|
||||
.docx-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
visibility: hidden;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,705 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
:global {
|
||||
|
||||
.dx-header-filter:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: 2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
.dx-popup-normal, .dx-popup-draggable, .dx-resizable {
|
||||
max-height: calc(100vh - 40px) !important;
|
||||
max-width: calc(100vw - 40px) !important;
|
||||
z-index: 10001 !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid .dx-area-column-cell, .dx-pivotgrid .dx-area-description-cell, .dx-pivotgrid .dx-bottom-border {
|
||||
border-bottom: $pivot_border_bottom !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-contained.dx-state-hover {
|
||||
background-color: $pivot_btn_bg_hover !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-outlined.dx-state-active {
|
||||
background-color: $pivot_btn_outlined_bg_active !important;
|
||||
border-color: $pivot_border_outlined_color_active !important;
|
||||
color: $pivot_outlined_icon_color_active !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-outlined.dx-state-focused {
|
||||
background-color: $pivot_btn_outlined_bg_focused !important;
|
||||
border-color: $pivot_border_outlined_color_focused !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-outlined.dx-state-hover {
|
||||
background-color: $pivot_btn_outlined_bg_hover !important;
|
||||
border-color: $pivot_border_outlined_color_hover !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-outlined .dx-icon {
|
||||
color: $pivot_outlined_icon_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar-navigator .dx-button .dx-button-text {
|
||||
color: $pivot_calendar_navigator_color !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-outlined {
|
||||
background-color: $pivot_btn_outlined_bg !important;
|
||||
border-color: $pivot_border_outlined_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell.dx-calendar-selected-date span {
|
||||
background-color: $pivot_calendar_selected_bg !important;
|
||||
color: $pivot_calendar_selected_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell.dx-calendar-contoured-date span {
|
||||
box-shadow: $pivot_calendar_contoured_date_shadow !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell.dx-state-active span {
|
||||
background-color: $pivot_calendar_active_bg !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell.dx-state-hover span {
|
||||
background-color: $pivot_calendar_hover_bg !important;
|
||||
color: $pivot_calendar_hover_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell.dx-calendar-today span {
|
||||
border-color: $pivot_calendar_today_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell.dx-calendar-empty-cell,
|
||||
.dx-calendar-cell.dx-calendar-empty-cell.dx-state-active span,
|
||||
.dx-calendar-cell.dx-calendar-empty-cell.dx-state-hover span,
|
||||
.dx-calendar-cell.dx-calendar-other-view,
|
||||
.dx-calendar-cell.dx-calendar-other-view.dx-state-active span,
|
||||
.dx-calendar-cell.dx-calendar-other-view.dx-state-hover span {
|
||||
color: $pivot_calendar_empty_cell_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar-cell {
|
||||
color: $pivot_calendar_cell_color !important;
|
||||
}
|
||||
.dx-calendar-body thead th {
|
||||
color: $pivot_calendar_color !important;
|
||||
}
|
||||
|
||||
.dx-calendar {
|
||||
background-color: $pivot_calendar_bg !important;
|
||||
}
|
||||
|
||||
.dx-state-active.dx-numberbox-spin-button .dx-numberbox-spin-down-icon,
|
||||
.dx-state-active.dx-numberbox-spin-button .dx-numberbox-spin-up-icon {
|
||||
background-color: $pivot_numberbox_spin_icon_bg_active !important;
|
||||
color: $pivot_numberbox_spin_icon_color_active !important;
|
||||
}
|
||||
|
||||
.dx-state-hover.dx-numberbox-spin-button .dx-numberbox-spin-down-icon, .dx-state-hover.dx-numberbox-spin-button .dx-numberbox-spin-up-icon {
|
||||
background-color: $pivot_numberbox_spin_icon_bg_hover !important;
|
||||
box-shadow: $pivot_numberbox_spin_icon_shadow_hover !important;
|
||||
}
|
||||
|
||||
.dx-numberbox-spin-up-icon {
|
||||
background-color: $pivot_numberbox_spin_icon_bg !important;
|
||||
color: $pivot_numberbox_spin_icon_color !important;
|
||||
}
|
||||
|
||||
.dx-numberbox-spin-down-icon {
|
||||
background-color: $pivot_numberbox_spin_icon_bg !important;
|
||||
color: $pivot_numberbox_spin_icon_color !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder-overlay.dx-filterbuilder-operations .dx-treeview-item .dx-icon {
|
||||
color: $pivot_filter_icon_color !important;
|
||||
}
|
||||
|
||||
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected {
|
||||
background-color: $pivot_list_focused_bg !important;
|
||||
color: $pivot_list_focused_color !important;
|
||||
}
|
||||
|
||||
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active .dx-icon {
|
||||
color: $pivot_list_icon_color_active !important;
|
||||
}
|
||||
|
||||
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active{
|
||||
background-color: $pivot_list_active_bg !important;
|
||||
color: $pivot_list_active_color !important;
|
||||
}
|
||||
|
||||
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
|
||||
background-color: $pivot_list_selected_bg !important;
|
||||
color: $pivot_list_selected_color !important;
|
||||
}
|
||||
|
||||
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected .dx-icon {
|
||||
color: $pivot_list_selected_icon_color !important;
|
||||
}
|
||||
|
||||
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon,
|
||||
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
|
||||
color: $pivot_dropdown_icon_color_active !important;
|
||||
background-color: $pivot_dropdown_icon_bg_active !important;
|
||||
}
|
||||
|
||||
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
|
||||
background-color: $pivot_list_hover_bg !important;
|
||||
}
|
||||
|
||||
.dx-dropdowneditor-icon {
|
||||
color: $pivot_dropdown_icon_color !important;
|
||||
background-color: $pivot_dropdown_icon_bg !important;
|
||||
}
|
||||
|
||||
.dx-selectbox-popup-wrapper .dx-list {
|
||||
background-color: $pivot_selectbox_bg !important;
|
||||
}
|
||||
|
||||
.dx-treeview-item-without-checkbox {
|
||||
background-color: $pivot_treeview_item_without_checkbox_bg !important;
|
||||
}
|
||||
|
||||
.dx-treeview-item-without-checkbox.dx-state-selected {
|
||||
color: $pivot_treeview_item_selected_color !important;
|
||||
background-color: $pivot_treeview_item_selected_bg !important;
|
||||
&:hover {
|
||||
background-color: $pivot_treeview_item_selected_bg_hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation.dx-state-active,
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation:focus {
|
||||
background-color: $pivot_filter_value_bg_active !important;
|
||||
color: $pivot_filter_value_color_active !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder-item-value-text {
|
||||
background-color: $pivot_filter_value_bg !important;
|
||||
color: $pivot_filter_value_color !important;
|
||||
&:hover {
|
||||
background-color: $pivot_filter_value_bg_hover !important;
|
||||
color: $pivot_filter_value_color_hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation.dx-state-active,
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation:focus {
|
||||
background-color: $pivot_filter_operation_bg_active !important;
|
||||
color: $pivot_filter_color_active !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder-text.dx-filterbuilder-item-operation {
|
||||
background-color: $pivot_filter_operation_bg !important;
|
||||
color: $pivot_filter_color !important;
|
||||
&:hover {
|
||||
background-color: $pivot_filter_operation_bg_hover !important;
|
||||
color: $pivot_filter_color_hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-filterbuilder-item-field {
|
||||
background-color: $pivot_filter_field_bg !important;
|
||||
color: $pivot_filter_color !important;
|
||||
&:hover {
|
||||
background-color: $pivot_filter_field_bg_hover !important;
|
||||
color: $pivot_filter_color_hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-field.dx-state-active, .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-field:focus {
|
||||
background-color: $pivot_filter_field_bg_active !important;
|
||||
color: $pivot_filter_color_active !important;
|
||||
}
|
||||
|
||||
.dx-icon-remove {
|
||||
color: $pivot_icon_remove_color !important;
|
||||
&:hover {
|
||||
color: $pivot_icon_remove_color_hover !important;
|
||||
background-color: $pivot_icon_remove_bg_hover !important;
|
||||
}
|
||||
&:focus {
|
||||
color: $pivot_icon_remove_color_focus !important;
|
||||
background-color: $pivot_icon_remove_bg_focus !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-icon-plus.dx-state-active,
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-icon-plus:focus {
|
||||
color: $pivot_icon_plus_color_active !important;
|
||||
background-color: $pivot_icon_plus_bg_active !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-icon-plus:hover {
|
||||
color: $pivot_icon_plus_color_hover !important;
|
||||
background-color: $pivot_icon_plus_bg_hover !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-icon-plus {
|
||||
color: $pivot_icon_plus_color !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation:hover {
|
||||
background-color: $pivot_filter_group_hover_bg !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation.dx-state-active,
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation:focus {
|
||||
background-color: $pivot_filter_group_active_bg !important;
|
||||
color: $pivot_filter_group_active_color !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation {
|
||||
background-color: $pivot_filter_group_bg !important;
|
||||
color: $pivot_filter_group_color !important;
|
||||
border: $pivot_filter_group_border !important;
|
||||
}
|
||||
|
||||
.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
|
||||
color: $pivot_treeview_item_selected_color !important;
|
||||
background-color: $pivot_treeview_item_selected_bg !important;
|
||||
}
|
||||
.dx-overlay-shader {
|
||||
background-color: $pivot_overlay_bg !important;
|
||||
}
|
||||
|
||||
.dx-filterbuilder {
|
||||
background-color: $pivot_filter_bg !important;
|
||||
}
|
||||
|
||||
.dx-loadindicator-icon .dx-loadindicator-segment {
|
||||
background-color: $pivot_loadindicator_bg !important;
|
||||
}
|
||||
|
||||
.dx-overlay-wrapper {
|
||||
color: $pivot_overlay_color !important;
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.dx-loadpanel-content {
|
||||
background-color: $pivot_loadpanel_bg !important;
|
||||
border: $pivot_loadpanel_border !important;
|
||||
}
|
||||
|
||||
.dx-list .dx-empty-message, .dx-list-item {
|
||||
border-top: $pivot_list_border !important;
|
||||
}
|
||||
|
||||
.dx-list-select-all {
|
||||
border-bottom: $pivot_list_border !important;
|
||||
}
|
||||
|
||||
.dx-list .dx-empty-message,
|
||||
.dx-list-item {
|
||||
color: $pivot_list_color !important;
|
||||
}
|
||||
|
||||
.dx-checkbox-indeterminate .dx-checkbox-icon::before {
|
||||
background-color: $pivot_checkbox_bg_indeterminate !important;
|
||||
}
|
||||
|
||||
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-checkbox-icon,
|
||||
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-radiobutton-icon,
|
||||
.dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-hover .dx-checkbox-icon,
|
||||
.dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-hover .dx-radiobutton-icon {
|
||||
border-color: $pivot_list_hover_border_color !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-contained {
|
||||
background-color: $pivot_btn_bg !important;
|
||||
border-color: $pivot_border_color !important;
|
||||
color: $pivot_color2 !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid-fields-container .dx-header-filter-empty {
|
||||
color: $pivot_color11 !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid-fields-container .dx-sort {
|
||||
color: $pivot_color10 !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid .dx-grandtotal {
|
||||
background-color: $pivot_color5 !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid-fields-container .dx-area-field.dx-area-box {
|
||||
background: $pivot_bg !important;
|
||||
border-color: $pivot_color9 !important;
|
||||
}
|
||||
|
||||
.dx-checkbox-checked .dx-checkbox-icon {
|
||||
color: $pivot_checkbox_icon_color_checked !important;
|
||||
background-color: $pivot_checkbox_bg_checked !important;
|
||||
}
|
||||
|
||||
.dx-checkbox.dx-state-active .dx-checkbox-icon {
|
||||
background-color: $pivot_checkbox_bg_active !important;
|
||||
}
|
||||
|
||||
.dx-checkbox.dx-state-hover .dx-checkbox-icon {
|
||||
border-color: $pivot_checkbox_border_color_hover !important;
|
||||
}
|
||||
|
||||
.dx-checkbox-icon {
|
||||
background-color: $pivot_checkbox_bg !important;
|
||||
border-color: $pivot_checkbox_border_color !important;
|
||||
}
|
||||
|
||||
.dx-treeview-item.dx-state-hover {
|
||||
background-color: $pivot_treeview_item_hover_bg !important;
|
||||
color: $pivot_treeview_item_hover_color !important;
|
||||
}
|
||||
|
||||
.dx-treeview-item-with-checkbox .dx-treeview-item {
|
||||
color: $pivot_treeview_item_color !important;
|
||||
}
|
||||
|
||||
.dx-widget {
|
||||
color: $pivot_dx_widget_color !important;
|
||||
}
|
||||
|
||||
.dx-texteditor.dx-editor-outlined {
|
||||
border: $pivot_texteditor_border !important;
|
||||
}
|
||||
|
||||
.dx-texteditor-input {
|
||||
color: $pivot_texteditor_color !important;
|
||||
}
|
||||
|
||||
.dx-show-clear-button .dx-icon-clear {
|
||||
color: $pivot_clear_button_color !important;
|
||||
background-color: $pivot_clear_button_bg !important;
|
||||
}
|
||||
|
||||
.dx-texteditor.dx-state-hover {
|
||||
border-color: $pivot_texteditor_border_hover !important;
|
||||
}
|
||||
|
||||
.dx-texteditor.dx-state-active.dx-editor-filled,
|
||||
.dx-texteditor.dx-state-active.dx-editor-outlined,
|
||||
.dx-texteditor.dx-state-active.dx-editor-underlined,
|
||||
.dx-texteditor.dx-state-focused.dx-editor-filled,
|
||||
.dx-texteditor.dx-state-focused.dx-editor-outlined,
|
||||
.dx-texteditor.dx-state-focused.dx-editor-underlined {
|
||||
border-color: $pivot_texteditor_border_active !important;
|
||||
}
|
||||
|
||||
.dx-searchbox .dx-icon-search::before {
|
||||
color: $pivot_searchbox_color !important;
|
||||
}
|
||||
|
||||
.dx-placeholder {
|
||||
color: $pivot_placeholder_color !important;
|
||||
}
|
||||
|
||||
.dx-texteditor-input {
|
||||
background-color: $pivot_texteditor_bg !important;
|
||||
}
|
||||
|
||||
.dx-pivotgridfieldchooser .dx-col {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dx-pivotgridfieldchooser .dx-area-fields[group] {
|
||||
background-color: $pivot_group_bg !important;
|
||||
}
|
||||
|
||||
.dx-pivotgridfieldchooser .dx-area .dx-area-fields {
|
||||
border: $pivot_area_fields_border !important;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.dx-pivotgridfieldchooser .dx-area-fields.dx-drag-target {
|
||||
border-color: $pivot_drag_border !important;
|
||||
}
|
||||
|
||||
.dx-pivotgridfieldchooser {
|
||||
background: $pivot_color13 !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-text .dx-icon {
|
||||
color: $pivot_close_popup_color !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-text.dx-state-active {
|
||||
background-color: $pivot_close_popup_color_active_bg !important;
|
||||
border-color: $pivot_close_popup_color_border_active !important;
|
||||
color: $pivot_close_popup_color_font_active !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-text.dx-state-focused {
|
||||
background-color: $pivot_close_popup_color_focused_bg !important;
|
||||
border-color: $pivot_close_popup_color_border_focused !important;
|
||||
}
|
||||
|
||||
.dx-button-mode-text.dx-state-hover {
|
||||
background-color: $pivot_close_button_hover_bg !important;
|
||||
}
|
||||
|
||||
.dx-overlay-content {
|
||||
background: $pivot_overlay_content_bg !important;
|
||||
border: $pivot_overlay_content_border !important;
|
||||
box-shadow: $pivot_box_shadow !important;
|
||||
}
|
||||
|
||||
.dx-popup-title {
|
||||
color: $pivot_popup_title_color !important;
|
||||
border-bottom: $pivot_border_bottom !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid-fields-container .dx-treeview-item-with-checkbox .dx-checkbox {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.dx-header-filter-menu .dx-treeview-item-with-checkbox {
|
||||
.dx-treeview-item {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.dx-treeview-node .dx-treeview-item {
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.dx-treeview-item-with-checkbox {
|
||||
margin-left: 14px;
|
||||
|
||||
.dx-treeview-expander-icon-stub {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dx-pivotgrid-fields-container .dx-treeview-node-container .dx-treeview-item-with-checkbox .dx-treeview-expander-icon-stub,
|
||||
.dx-filterbuilder-overlay .dx-treeview-node-container .dx-treeview-item-without-checkbox .dx-treeview-expander-icon-stub {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-filterbuilder-overlay.dx-filterbuilder-operations .dx-treeview-item .dx-icon.dx-icon-inrange {
|
||||
background-image: $pivot_filter_inrange_icon_bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-pivot-main :global {
|
||||
position: absolute;
|
||||
line-height: normal;
|
||||
overflow: auto;
|
||||
|
||||
.dx-pivot-container {
|
||||
.dx-widget {
|
||||
color: $pivot_color7 !important;
|
||||
}
|
||||
|
||||
.dx-scrollable-scroll-content {
|
||||
background-color: $pivot_scroll_content !important;
|
||||
}
|
||||
|
||||
.dx-scrollbar-hoverable {
|
||||
background-color: $pivot_scrollbar !important;
|
||||
}
|
||||
|
||||
.dx-pivotgrid .dx-area-description-cell,
|
||||
.dx-pivotgrid .dx-area-row-cell {
|
||||
background-color: $pivot_color12;
|
||||
}
|
||||
|
||||
.dx-pivotgrid.dx-row-lines .dx-pivotgrid-area td {
|
||||
border-color: $pivot_color8;
|
||||
}
|
||||
|
||||
.dx-pivotgrid .dx-pivotgrid-area td {
|
||||
color: $pivot_color6;
|
||||
}
|
||||
|
||||
.dx-pivotgrid,
|
||||
.dx-area-description-cell,
|
||||
.dx-pivotgrid,
|
||||
.dx-area-row-cell {
|
||||
border-right: $pivot_area_description_border
|
||||
}
|
||||
|
||||
.dx-pivotgrid {
|
||||
background-color: $pivot_pivotgrid_bg;
|
||||
border-left: $pivot_border;
|
||||
border-right: $pivot_border;
|
||||
|
||||
.dx-pivotgrid,
|
||||
.dx-area-description-cell.dx-pivotgrid-background,
|
||||
.dx-pivotgrid,
|
||||
.dx-column-header,
|
||||
.dx-pivotgrid,
|
||||
.dx-data-header {
|
||||
background-color: $pivot_color4;
|
||||
}
|
||||
|
||||
.dx-bottom-border {
|
||||
border-bottom: $pivot_border_bottom;
|
||||
}
|
||||
|
||||
.dx-empty-area-text {
|
||||
color: $pivot_color1;
|
||||
}
|
||||
|
||||
.dx-icon {
|
||||
color: $pivot_color3;
|
||||
}
|
||||
|
||||
.dx-state-hover {
|
||||
background-color: $pivot_hover_bg;
|
||||
}
|
||||
|
||||
.dx-state-focused {
|
||||
background-color: $pivot_focused_bg;
|
||||
border-color: $pivot_focused_border_color;
|
||||
}
|
||||
|
||||
.dx-state-active {
|
||||
background-color: $pivot_active_bg;
|
||||
border-color: $pivot_active_border_color;
|
||||
color: $pivot_active_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dx-filterbuilder {
|
||||
font-style: italic;
|
||||
|
||||
.dx-filterbuilder-group .dx-filterbuilder-group-item .dx-filterbuilder-text .dx-filterbuilder-item-value-text {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.dx-word-wrap, .dx-popup-content {
|
||||
font-family: $primaryFont;
|
||||
font-size: $font_size_label;
|
||||
.dx-filter-header {
|
||||
.dx-pivotgrid-fields-area-head td {
|
||||
display: inline-block;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
}
|
||||
.dx-row-total {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.dx-pivot-container {
|
||||
@include partial-column-start-start;
|
||||
.dx-pivot-filter-panel {
|
||||
@include partial-row-center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border-bottom: var(--grid_border);
|
||||
font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
|
||||
.dx-pivot-filter-panel-left {
|
||||
@include partial-row-center;
|
||||
@include partial-ellipsis;
|
||||
justify-content: space-between;
|
||||
height: auto;
|
||||
.dx-pivot-filter-panel-icon {
|
||||
@include partial-row-center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $pivot_filter_btn_fg;
|
||||
font-family: DXIcons;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
@include partial-row-center;
|
||||
width: auto;
|
||||
height: auto;
|
||||
content: "\f050";
|
||||
}
|
||||
}
|
||||
.dx-pivot-filter-panel-text {
|
||||
@include partial-ellipsis;
|
||||
color: $pivot_filter_btn_fg;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-bottom: var(--nav_bar_border);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dx-pivot-filter-panel-clear {
|
||||
@include partial-row-center;
|
||||
padding-left: 10px;
|
||||
width: 90px;
|
||||
height: 24px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border-bottom: var(--nav_bar_border);
|
||||
}
|
||||
}
|
||||
.flt-field, .flt-exp, .flt-value, .flt-group-operator, .flt-cmd {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.flt-cmd {
|
||||
border-radius: unset;
|
||||
color: $pivot_filter_btn_fg;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
.flt-group-operator {
|
||||
border-radius: unset;
|
||||
font-style: italic;
|
||||
}
|
||||
.flt-group {
|
||||
position:relative;
|
||||
padding: 0 10px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 5px;
|
||||
border: 1px solid #838282;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 2px;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 1px;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
.flt-field {
|
||||
color: $pivot_filter_color;
|
||||
background-color: $pivot_filter_field_bg;
|
||||
}
|
||||
.flt-exp {
|
||||
color: $pivot_filter_color;
|
||||
background-color: $pivot_filter_exp_bg;
|
||||
}
|
||||
.flt-value {
|
||||
color: $pivot_filter_color;
|
||||
background-color: $pivot_filter_value_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.checkbox {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(center, center);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
transition: background .12s ease, border-color .12s ease;
|
||||
|
||||
svg {
|
||||
@include flexDisplay();
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background: $checkbox_bg;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $checkbox_fill_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.unchecked {
|
||||
border: $checkbox_border;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $checkbox_border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.text {
|
||||
color: $checkbox_disabled_fg;
|
||||
}
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $checkbox_disabled_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled:not(.checked) {
|
||||
border: $checkbox_border_disabled;
|
||||
}
|
||||
|
||||
&.disabled:not(.unchecked) {
|
||||
background: $checkbox_disabled_color;
|
||||
border: $checkbox_border_disabled;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled):not(.unchecked) {
|
||||
background: $checkbox_bg_hover;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled):not(.checked) {
|
||||
border: $checkbox_border_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-checkbox {
|
||||
@include partial-row-center-start;
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(center, center);
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: $font_size_label;
|
||||
|
||||
.ch-content {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(center, center);
|
||||
@include flexJustifyContent(flex-start, start);
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.ch-content {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
}
|
||||
}
|
||||
|
||||
.ch-right {
|
||||
.text {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.ch-left {
|
||||
.text {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.multiline-label {
|
||||
.ch-content {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.grid {
|
||||
.ch-content {
|
||||
@include partial-column-center;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
position: unset;
|
||||
right: unset;
|
||||
width: 20px;
|
||||
left: 0;
|
||||
|
||||
svg path {
|
||||
fill: $grid_row_focused_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-check {
|
||||
@include partial-row-center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
cursor: default;
|
||||
|
||||
.ch-content {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
position: unset;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
position: unset;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
path {
|
||||
fill: $signIn_check_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
@import './EditorCheckBox.module.scss';
|
||||
|
||||
.editor-checkbox {
|
||||
font-size: 10pt;
|
||||
|
||||
.ch-content {
|
||||
border: unset;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
width: 24px;
|
||||
|
||||
.ch-pipe-on, .ch-pipe-off {
|
||||
height: 14px;
|
||||
width: 24px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ch-c {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ch-pipe-on {
|
||||
background-color: $checkbox_pipe_on_bg;
|
||||
|
||||
.ch-c {
|
||||
margin-top: 2px;
|
||||
margin-left: 12px;
|
||||
background-color: $checkbox_pipe_on_checked_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.ch-pipe-off {
|
||||
background-color: $checkbox_pipe_off_bg;
|
||||
|
||||
.ch-c {
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
background-color: $checkbox_pipe_off_checked_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: unset;
|
||||
|
||||
.icon {
|
||||
.ch-pipe-on, .ch-pipe-off {
|
||||
background-color: $checkbox_pipe_disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-radiochips {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chips {
|
||||
@include partial-ellipsis;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
color: $radiobutton_chips_fg;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
$border-radius: 8px,
|
||||
);
|
||||
}
|
||||
|
||||
&:not(.checked) {
|
||||
border: 1px solid $radiobutton_chips_border;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border: 1px solid $radiobutton_chips_checked_bg;
|
||||
background-color: $radiobutton_chips_checked_bg;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: auto;
|
||||
border: 1px solid $radiobutton_chips_disabled_bg;
|
||||
background-color: $radiobutton_chips_disabled_bg;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-code {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
line-height: 8pt;
|
||||
font-size: 14pt;
|
||||
font-family: $primaryFont;
|
||||
border-radius: 2px;
|
||||
background-color: $field_code_add_btn_bg;
|
||||
box-shadow: $field_code_add_btn_shadow;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
svg path {
|
||||
fill: $field_code_add_btn_icon_bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $field_code_add_btn_active_shadow;
|
||||
svg path {
|
||||
fill: $field_code_add_btn_active_icon_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-html {
|
||||
.content {
|
||||
@include partial-sellect-text;
|
||||
color: $html_fg;
|
||||
height: inherit;
|
||||
outline: none;
|
||||
|
||||
.html-scroll-content {
|
||||
padding: 0 20px 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$box-shadow: $focus_box_shadow_inset
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.html-content {
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.label {
|
||||
@include partial-label;
|
||||
@include flexDisplay();
|
||||
@include flexWrap(nowrap);
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(flex-start, start);
|
||||
@include flexAlignContent(stretch, stretch);
|
||||
|
||||
&.multiline {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.multiline) {
|
||||
span {
|
||||
@include partial-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(center, center);
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tooltip-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(50% - 9px);
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
path {
|
||||
fill: $tooltip_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-label {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding: 0 5px;
|
||||
border-radius: 12px;
|
||||
max-width: calc(100% - 16px);
|
||||
background-color: $input_text_editor_bg;
|
||||
font-size: $font_size_vertical_label;
|
||||
line-height: $font_size_vertical_label_height;
|
||||
|
||||
&.has-tooltip-icon {
|
||||
padding-right: 19px;
|
||||
.tooltip-icon {
|
||||
right: 0;
|
||||
top: calc(50% - 11px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special Class
|
||||
&.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.center {
|
||||
@include flexJustifyContent(center, center);
|
||||
}
|
||||
|
||||
&.center + .icon {
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
&.right-label {
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
position: relative !important;
|
||||
width: unset !important;
|
||||
|
||||
&.multiline {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-label) {
|
||||
&.multiline {
|
||||
text-overflow: unset;
|
||||
white-space: normal;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.warninglabel {
|
||||
color: $field_warning_label_fg !important;
|
||||
}
|
||||
|
||||
&.radio.v-label,
|
||||
&.checkbox.v-label {
|
||||
@include partial-ellipsis;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
max-width: calc(100% - 32px);
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.radio.v-label,
|
||||
&.checkbox.v-label,
|
||||
&.richedit.v-label,
|
||||
&.memotext.v-label {
|
||||
background-color: transparent;
|
||||
|
||||
&.disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
}
|
||||
|
||||
// ColorPicker
|
||||
.cp-label {
|
||||
position: relative !important;
|
||||
width: 75px;
|
||||
color: $cp_box_fg;
|
||||
}
|
||||
|
||||
.clickable:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-memo {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(row);
|
||||
@include flexAlignItems(flex-start, start);
|
||||
@include flexAlignContent(center, center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.tooltipHolder {
|
||||
color: $input_tooltip_fg;
|
||||
line-height: 26px;
|
||||
font-size: $font_size_label;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
background-color: $input_bg;
|
||||
border: $emt_border;
|
||||
border-radius: 8px;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
padding: 4px;
|
||||
margin-bottom: $input_margin_bottom;
|
||||
line-height: $memo_line_height;
|
||||
font-family: $defaultFont;
|
||||
font-size: $font_size_input;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: $input_fg;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
resize: none;
|
||||
border-radius: 8px;
|
||||
|
||||
&.clearable {
|
||||
@include partial-clearable-memo;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: $input_border_disabled;
|
||||
|
||||
textarea {
|
||||
color: $input_disabled_fg;
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(space-between, space-between);
|
||||
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(column);
|
||||
@include flexAlignItems(flex-end, end);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
margin-top: 4px;
|
||||
|
||||
textarea {
|
||||
padding: 0 4px 0 4px;
|
||||
margin-bottom: 0;
|
||||
background-color: $emt_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
|
||||
textarea {
|
||||
background-color: $input_disabled_bg;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused .content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
textarea:valid {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-date .input-textRight input {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.editor-memo:not(.warning):not(.error) {
|
||||
&.focused {
|
||||
&:not(.vertical) {
|
||||
.content {
|
||||
@include partial-editor-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-border {
|
||||
border: $input_vertical_focused_border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-memo.error {
|
||||
.content {
|
||||
box-shadow: $input_error_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-memo.warning {
|
||||
.content {
|
||||
box-shadow: $input_warning_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-memo-premium {
|
||||
&:not(.warning):not(.error) {
|
||||
&.focused .content {
|
||||
border: $input_focused_border;
|
||||
border-radius: 4px;
|
||||
box-shadow: none !important;
|
||||
|
||||
.icon svg path {
|
||||
fill: $input_icon_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.focused) .content {
|
||||
box-shadow: $input_shadow;
|
||||
border: $emt_border;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.content.disabled {
|
||||
border: $input_border_disabled;
|
||||
}
|
||||
|
||||
.content textarea {
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-otp {
|
||||
@include partial-row-center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.asterisk-content {
|
||||
@include partial-row-center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
input {
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.asterisk-front,
|
||||
.asterisk-back {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.asterisk-front {
|
||||
position: absolute;
|
||||
background-color: $input_bg;
|
||||
color: $input_text_editor_fg;
|
||||
border: $input_text_asteriks_border;
|
||||
font-size: 18pt;
|
||||
text-align: center;
|
||||
|
||||
&:disabled {
|
||||
color: $input_disabled_fg;
|
||||
text-shadow: $input_shadow_disabled;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $input_focused_fg;
|
||||
background-color: $input_text_asteriks_focus_bg;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.asterisk-back {
|
||||
background-color: $input_text_asteriks_bg;
|
||||
color: $input_text_asteriks_color;
|
||||
transform: rotateY(180deg);
|
||||
|
||||
&::before {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 50px;
|
||||
font-size: 30pt;
|
||||
font-family: monospace;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asterisk-visible {
|
||||
transform: rotateY(180deg);
|
||||
transition: transform 0.5s;
|
||||
transition-delay: 500ms;
|
||||
|
||||
.asterisk-back {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.asterisk-hidden {
|
||||
transform: none;
|
||||
transition: none;
|
||||
transition-delay: 250ms;
|
||||
|
||||
.asterisk-back {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-radiobutton {
|
||||
@include partial-row-center-start;
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(center, center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
font-size: $font_size_label;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(center, center);
|
||||
@include flexJustifyContent(flex-start, start);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: inherit;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.radio-checked {
|
||||
path {
|
||||
fill: $radiobutton_check;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: $radiobutton_hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-unchecked {
|
||||
path {
|
||||
fill: $radiobutton_unchecked;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: $radiobutton_hover_unchecked;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-readonly-checked {
|
||||
path {
|
||||
fill: $radiobutton_disabled;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-readonly-unchecked {
|
||||
path {
|
||||
fill: $radiobutton_disabled;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right {
|
||||
@include flexDirection(row-reverse);
|
||||
.content {
|
||||
@include flexJustifyContent(center, center);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexJustifyContent(center, center);
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.icon {
|
||||
svg {
|
||||
.radio-circle {
|
||||
fill: $radiobutton_focused_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-radio-split-btn {
|
||||
@include partial-column-center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&.horizontal {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:not(.horizontal) {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.split {
|
||||
@include partial-ellipsis;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus($outline-offset: -2px,
|
||||
$box-shadow: none,
|
||||
$outline-width: 2px,
|
||||
$border-radius: inherit,
|
||||
);
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:not(.checked) {
|
||||
border: 1px solid $radio_split_button_border;
|
||||
color: $radio_split_button_fg;
|
||||
background-color: $radio_split_button_bg;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border: 1px solid $radio_split_button_checked_bg;
|
||||
color: $radio_split_button_checked_fg;
|
||||
background-color: $radio_split_button_checked_bg;
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus($outline: 2px solid #000,
|
||||
$outline-offset: -2px,
|
||||
$box-shadow: none,
|
||||
$outline-width: 2px,
|
||||
$border-radius: inherit,
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $radio_split_button_disabled_bg;
|
||||
background-color: $radio_split_button_disabled_bg;
|
||||
color: $radio_split_button_disabled_fg;
|
||||
cursor: auto;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus($outline-offset: -2px,
|
||||
$box-shadow: none,
|
||||
$outline-width: 2px,
|
||||
$border-radius: inherit,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-radio-tab-btn {
|
||||
@include partial-column-center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@include partial-ellipsis;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
|
||||
color: $radio_tab_fg;
|
||||
background-color: $radio_tab_bg;
|
||||
border-bottom: 5px solid $radio_tab_border_color;
|
||||
|
||||
&.checked {
|
||||
border-bottom-color: $radio_tab_border_color_checked;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "../mobilebrowser/EditorRangeSlider.module.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.slider-wrapper {
|
||||
font-family: $tertiaryFont;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-rating {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
height: inherit;
|
||||
cursor: pointer;
|
||||
background-color: $rating_bg;
|
||||
|
||||
&:not(:checked) {
|
||||
input {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
label {
|
||||
float: right;
|
||||
width: 1em;
|
||||
height: inherit;
|
||||
padding: 0 0.1em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-size: 200%;
|
||||
color: $rating_fg;
|
||||
-webkit-transition: text-shadow 0.3s ease-in 0s;
|
||||
-moz-transition: text-shadow 0.3s ease-in 0s;
|
||||
-o-transition: text-shadow 0.3s ease-in 0s;
|
||||
-ms-transition: text-shadow 0.3s ease-in 0s;
|
||||
transition: all 0.2s ease-in 0s;
|
||||
text-shadow: $rating_star_shadow;
|
||||
-webkit-text-stroke: 1px $rating_fg;
|
||||
|
||||
&:before {
|
||||
content: "\2605";
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:hover ~ label {
|
||||
color: $rating_hover_fg;
|
||||
text-shadow: $rating_hover_shadow;
|
||||
-webkit-text-stroke: 1px $rating_hover_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ label {
|
||||
color: $rating_checked_fg;
|
||||
text-shadow: $rating_hover_shadow;
|
||||
-webkit-text-stroke: 1px $rating_checked_fg;
|
||||
}
|
||||
|
||||
input:checked + label:hover,
|
||||
input:checked + label:hover ~ label,
|
||||
input:checked ~ label:hover,
|
||||
input:checked ~ label:hover ~ label,
|
||||
label:hover ~ input:checked ~ label {
|
||||
color: $rating_checked_hover_fg;
|
||||
-webkit-text-stroke: 1px $rating_checked_hover_fg;
|
||||
text-shadow: $rating_hover_shadow;
|
||||
}
|
||||
|
||||
label:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-rating-p {
|
||||
.content {
|
||||
border-radius: 4px;
|
||||
|
||||
&.disabled {
|
||||
border: $input_border_disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
@include partial-editor-shadow-premium;
|
||||
box-shadow: none;
|
||||
border: $input_focused_border;
|
||||
|
||||
.icon svg path {
|
||||
fill: $input_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,729 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-rte {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(row);
|
||||
@include flexAlignItems(flex-start, start);
|
||||
@include flexAlignContent(center, center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
border: $rte_border;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(column);
|
||||
@include flexAlignItems(flex-end, end);
|
||||
@include flexJustifyContent(flex-start, start);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-rte-p {
|
||||
&.focused {
|
||||
.content {
|
||||
@include partial-editor-shadow-premium;
|
||||
border: $rte_focused_border;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.jodit {
|
||||
.jodit_toolbar :global {
|
||||
background-color: $rte_toolbar_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-rte-comment {
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-rte :global {
|
||||
|
||||
.jodit {
|
||||
|
||||
&.jodit-container {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $rte_bg;
|
||||
color: $rte_fg;
|
||||
|
||||
.jodit-toolbar__box {
|
||||
.jodit_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
fill: $rte_icon;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__button:hover {
|
||||
background-color: $rte_toolbar_item_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-toolbar__box {
|
||||
background-color: $rte_toolbar_bg;
|
||||
display: inline-table;
|
||||
width: 100% !important;
|
||||
border-top: unset;
|
||||
|
||||
li {
|
||||
.jodit_dropdownlist h4,
|
||||
.jodit_dropdownlist blockquote,
|
||||
.jodit_dropdownlist pre {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.jodit_dropdownlist h5,
|
||||
.jodit_dropdownlist h6 {
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
.jodit_dropdownlist h6 {
|
||||
font-size: 0.7em;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.jodit_tabs {
|
||||
color: $rte_tabs_fg;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-fontsize {
|
||||
.jodit_dropdownlist {
|
||||
li {
|
||||
a {
|
||||
padding: 0 12px;
|
||||
font-size: 9pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-workplace {
|
||||
background-color: $rte_editor_bg;
|
||||
color: $rte_editor_fg;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit_theme_dark-standard-fullbrowser {
|
||||
.jodit-toolbar-button__button:hover {
|
||||
background-color: $rte_toolbar_color2;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__trigger:hover:not([disabled]) {
|
||||
background-color: $rte_toolbar_color1;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button_with-trigger_true:hover:not([disabled]) {
|
||||
background-color: $rte_toolbar_color2;
|
||||
border-color: $rte_toolbar_color3;
|
||||
}
|
||||
|
||||
.jodit-ui-separator {
|
||||
border-right: $rte_toolbar_border_right;
|
||||
}
|
||||
|
||||
.jodit-wysiwyg {
|
||||
background-color: $rte_content_bg;
|
||||
color: $rte_content_fc;
|
||||
}
|
||||
|
||||
.jodit-status-bar {
|
||||
background-color: $rte_status_bg;
|
||||
border-color: $rte_border_color;
|
||||
color: $rte_status_fc;
|
||||
|
||||
.jodit-xpath__item a {
|
||||
color: $rte_status_button_fc;
|
||||
}
|
||||
|
||||
.jodit-xpath__item a:hover {
|
||||
background-color: $rte_status_button_hover;;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__icon svg {
|
||||
fill: $rte_status_fc;
|
||||
stroke: $rte_status_fc;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__button:hover:not([disabled]) {
|
||||
background-color: $rte_status_button_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit_theme_dark .jodit-wysiwyg {
|
||||
background-color: $rte_content_bg !important;
|
||||
color: $rte_content_fc !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* :global {
|
||||
.not-mobile-device {
|
||||
.jodit {
|
||||
|
||||
hr {
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: $rte_hr;
|
||||
}
|
||||
|
||||
.jodit-dialog__panel {
|
||||
@include partial-box-shadow;
|
||||
text-rendering: optimizeLegibility;
|
||||
background: $rte_dialog_bg;
|
||||
font-family: $rte_dialog_font;
|
||||
border-radius: $rte_dialog_border_radius;
|
||||
|
||||
.jodit-dialog__header {
|
||||
height: 50px;
|
||||
background: $rte_dialog_header_bg;
|
||||
border-bottom: $rte_dialog_header_border;
|
||||
cursor: move;
|
||||
box-shadow: unset;
|
||||
border-top-left-radius: $rte_dialog_border_radius;
|
||||
border-top-right-radius: $rte_dialog_border_radius;
|
||||
|
||||
.jodit-dialog__header-toolbar {
|
||||
padding: 0;
|
||||
|
||||
.jodit-toolbar-button {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
.jodit-toolbar-button__button {
|
||||
border-radius: 0;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background: $rte_dialog_button_bg;
|
||||
|
||||
.jodit_icon {
|
||||
fill: $rte_dialog_button_fg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $rte_dialog_button_hover_bg;
|
||||
|
||||
.jodit_icon {
|
||||
fill: $rte_dialog_button_hover_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-toolbar-button_fullsize {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-dialog__header-title {
|
||||
padding: 0 0 0 20px;
|
||||
text-align: left;
|
||||
font-weight: lighter;
|
||||
font-size: $rte_dialog_header_fontsize;
|
||||
color: $rte_dialog_header_fg;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-dialog__content {
|
||||
font-family: $defaultFont;
|
||||
color: $rte_dialog_content_fg;
|
||||
|
||||
.jodit-dialog_prompt {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.jodit-tabs {
|
||||
color: $rte_dialog_content_fg;
|
||||
|
||||
.jodit-tabs__buttons {
|
||||
margin-bottom: 0;
|
||||
|
||||
button {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
.jodit-ui-button__text {
|
||||
@include partial-ellipsis;
|
||||
color: $rte_dialog_content_fg;
|
||||
font-family: $defaultFont;
|
||||
font-size: $rte_dialog_content_fontsize;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&[aria-pressed='true'] {
|
||||
background: $rte_dialog_content_tabs_wrapper_bg;
|
||||
|
||||
.jodit-ui-button__text {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
|
||||
&[aria-pressed='false'] {
|
||||
background: $rte_dialog_content_tabs_hover_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-tabs__wrapper {
|
||||
padding: 5px 0;
|
||||
background: $rte_dialog_content_tabs_wrapper_bg;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@include partial-ellipsis;
|
||||
font-family: $defaultFont;
|
||||
font-size: $font_size_label;
|
||||
font-weight: 300;
|
||||
max-height: 100%;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.jodit-properties__lock {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-dialog__footer {
|
||||
@include partial-row-center-end;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: $rte_dialog_footer_bg;
|
||||
border-top: $rte_dialog_footer_border;
|
||||
border-bottom-left-radius: $rte_dialog_border_radius;
|
||||
border-bottom-right-radius: $rte_dialog_border_radius;
|
||||
|
||||
.jodit-ui-button {
|
||||
@include partial-transition;
|
||||
@include partial-column-center;
|
||||
@include partial-ellipsis;
|
||||
position: relative;
|
||||
margin: 0 8px 0 0;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
min-width: 120px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
background-color: $rte_dialog_footer_button_bg;
|
||||
box-shadow: $rte_dialog_footer_button_shadow;
|
||||
text-shadow: $rte_dialog_footer_button_text_shadow;
|
||||
color: $rte_dialog_footer_button_fg;
|
||||
font-size: $font_size_body;
|
||||
font-weight: $rte_dialog_footer_button_font_weight;
|
||||
text-align: center;
|
||||
text-transform: $rte_dialog_footer_button_text_transform;
|
||||
outline: none;
|
||||
|
||||
.jodit-ui-button__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jodit-ui-button__text {
|
||||
font-family: var(--secondaryFont);
|
||||
font-size: $font_size_body;
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
box-shadow: $rte_dialog_footer_button_hover_shadow;
|
||||
color: $rte_dialog_footer_button_hover_fg;
|
||||
background-color: $rte_dialog_footer_button_hover_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-dialog__resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jodit_icon {
|
||||
fill: $rte_dialog_button_fg;
|
||||
}
|
||||
|
||||
.jodit-properties .jodit-properties_view_box {
|
||||
.jodit-properties_image_view{
|
||||
background-color: $rte_dialog_image_preview_bg;
|
||||
}
|
||||
|
||||
.jodit-properties_image_sizes.jodit-form__group {
|
||||
justify-content: space-between;
|
||||
|
||||
.jodit-input {
|
||||
width: calc(50% - 13px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-dialog__panel .jodit-dialog__content,
|
||||
|
||||
&.jodit-popup-container {
|
||||
padding: 0;
|
||||
font-family: $primaryFont;
|
||||
|
||||
a {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 30% center;
|
||||
}
|
||||
|
||||
.jodit-image-popup {
|
||||
width: 190px;
|
||||
color: #444444;
|
||||
|
||||
.jodit-tabs__buttons {
|
||||
button, button:hover {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-popup__content {
|
||||
font-size: 9pt;
|
||||
color: $rte_dialog_content_fg;
|
||||
|
||||
select.jodit-select {
|
||||
background: none;
|
||||
appearance: auto;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.jodit-ui-input__wrapper {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input.jodit-input,
|
||||
input.jodit-ui-input__input,
|
||||
select.jodit-select {
|
||||
font-family: $defaultFont;
|
||||
height: $input_height;
|
||||
border: $input_border;
|
||||
border-radius: $rte_dialog_input_border_radius;
|
||||
background-color: $input_bg;
|
||||
line-height: $font_size_input;
|
||||
font-size: $font_size_input;
|
||||
font-family: $defaultFont;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
color: $input_text_editor_fg;
|
||||
outline: none;
|
||||
|
||||
option {
|
||||
background-color: $input_bg;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $input_text_editor_fg;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: $input_disabled_bg;
|
||||
color: $input_disabled_fg;
|
||||
text-shadow: $input_shadow_disabled;
|
||||
|
||||
&::placeholder {
|
||||
color: $input_disabled_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include partial-editor-shadow;
|
||||
border: $rte_dialog_input_focused_border;
|
||||
color: $input_focused_fg;
|
||||
background-color: $input_focused_bg;
|
||||
outline: none;
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-internal-autofill-selected,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill,
|
||||
select:-webkit-autofill:hover,
|
||||
select:-webkit-autofill:focus {
|
||||
color: var(--input_text_editor_fg) !important;
|
||||
-webkit-text-fill-color: var(--input_text_editor_fg) !important;
|
||||
background-color: var(--input_bg) !important;
|
||||
border: $rte_dialog_input_focused_border !important;
|
||||
box-shadow: $rte_dialog_input_focused_shadow !important;
|
||||
-webkit-box-shadow: $rte_dialog_input_focused_shadow !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-ui-button_variant_primary,
|
||||
.jodit-ui-button_variant_default {
|
||||
box-shadow: $theme_shadow_btn;
|
||||
font-family: $primaryFont;
|
||||
font-size: 8pt;
|
||||
|
||||
.jodit-ui-button__text {
|
||||
font-family: $primaryFont;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $theme_shadow_hover_btn;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-ui-button_variant_primary {
|
||||
background-color: $theme_command_important_bg;
|
||||
color: $theme_command_important_fg;
|
||||
|
||||
.jodit-ui-button__text {
|
||||
color: $theme_command_important_fg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $theme_command_important_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-ui-button_variant_default {
|
||||
background-color: $theme_command_bg;
|
||||
color: $theme_command_fg;
|
||||
|
||||
.jodit-ui-button__text {
|
||||
color: $theme_command_fg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $theme_command_bg_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-ui-input__label {
|
||||
font-size: $font_size_label;
|
||||
}
|
||||
|
||||
.jodit_interline {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.text {
|
||||
@include partial-row-center-start;
|
||||
padding: 0 6px 0 0;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.i6,
|
||||
.i7 {
|
||||
background-size: 16px 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPScjMDAwMDAwJyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNOSAxNi4yTDQuOCAxMmwtMS40IDEuNEw5IDE5IDIxIDdsLTEuNC0xLjRMOSAxNi4yeicvPjwvc3ZnPg==);
|
||||
}
|
||||
|
||||
.i6 {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPScjMDAwMDAwJyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMTYwIDE2MCcgd2lkdGg9JzI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J004MC4wODcgNTBhNC45ODUgNC45ODcgMCAwIDAgNC45MDktNS4wNTdWMTcuMDg4bDYuNDQ1IDYuNDQ4YTQuOTg1IDQuOTg3IDAgMCAwIDMuNTc3IDEuNTExIDQuOTg1IDQuOTg3IDAgMCAwIDMuNDcyLTguNTYzTDgzLjk3MiAxLjk2MWE0Ljk4NSA0Ljk4NyAwIDAgMC03LjkzOS4wMThsLTE0LjUgMTQuNTA1YTQuOTg1IDQuOTg3IDAgMSAwIDcuMDQ4IDcuMDUybDYuNDQ1LTYuNDQ4djI3Ljg1NWE0Ljk4NSA0Ljk4NyAwIDAgMCA1LjA2MSA1LjA1NnpNNS4wNjcgNjBhNC45OTYgNSAwIDEgMCAwIDEwaDE0OS44NjZhNC45OTYgNSAwIDEgMCAwLTEwSDUuMDY3em0wIDI5Ljk5OGE0Ljk5NiA1IDAgMSAwIDAgMTBoOTkuOTFhNC45OTYgNSAwIDEgMCAwLTEwSDUuMDY4em0wIDMwYTQuOTk2IDUgMCAxIDAgMCAxMGgxNDkuODY2YTQuOTk2IDUgMCAxIDAgMC0xMEg1LjA2N3ptMCAzMGE0Ljk5NiA1IDAgMSAwIDAgMTBsMTQ5Ljg2Ni4wMDJhNC45OTYgNSAwIDEgMCAwLTEwbC0xNDkuODY2LS4wMDJ6Jy8+PC9zdmc+);
|
||||
}
|
||||
|
||||
.i7 {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPScjMDAwMDAwJyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMTYwIDE2MCcgd2lkdGg9JzI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J001LjA2NyAwYTQuOTk2IDUgMCAxIDAgMCAxMEgxNTQuOTRhNC45OTYgNSAwIDEgMCAwLTEwSDUuMDY3em0wIDI5Ljk5OWE0Ljk5NiA1IDAgMSAwIDAgMTBoOTkuOTE2YTQuOTk2IDUgMCAxIDAgMC0xMEg1LjA2N3ptMCAzMGE0Ljk5NiA1IDAgMSAwIDAgMTBIMTU0Ljk0YTQuOTk2IDUgMCAxIDAgMC0xMEg1LjA2N3ptMCAzMGE0Ljk5NiA1IDAgMSAwIDAgMTBMMTU0Ljk0IDEwMGE0Ljk5NiA1IDAgMSAwIDAtMTBMNS4wNjcgODkuOTk5ek03OS45MTYgMTEwYTQuOTg1IDQuOTg3IDAgMCAwLTQuOTA5IDUuMDU2djI3Ljg1NmwtNi40NDUtNi40NDhhNC45ODUgNC45ODcgMCAwIDAtMy41NzctMS41MTEgNC45ODUgNC45ODcgMCAwIDAtMy40NzMgOC41NjJsMTQuNTIgMTQuNTI0YTQuOTg1IDQuOTg3IDAgMCAwIDcuOTM4LS4wMThsMTQuNTAxLTE0LjUwNmE0Ljk4NSA0Ljk4NyAwIDEgMC03LjA1LTcuMDVsLTYuNDQzIDYuNDQ3di0yNy44NTZhNC45ODUgNC45ODcgMCAwIDAtNS4wNjItNS4wNTZ6Jy8+PC9zdmc+);
|
||||
}
|
||||
}
|
||||
|
||||
.jodit_paste {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.text {
|
||||
@include partial-row-center-start;
|
||||
padding: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-i6 {
|
||||
border-top: $rte_dropdown_toolbar_border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit_theme_dark-standard-fullbrowser {
|
||||
.jodit-ui-form {
|
||||
.jodit-ui-input__label {
|
||||
color: $rte_toolbar_color4;
|
||||
}
|
||||
|
||||
.jodit-ui-button_variant_primary {
|
||||
background-color: $rte_toolbar_color5 !important;
|
||||
|
||||
.jodit-ui-button__text {
|
||||
color: $rte_content_fc !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $rte_status_button_hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-toolbar-editor-collection::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__icon {
|
||||
.jodit_icon {
|
||||
fill: $rte_toolbar_color4;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-toolbar-button {
|
||||
.icon > svg {
|
||||
fill: $rte_toolbar_color4;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__text {
|
||||
color: $rte_content_fc;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__button:hover:not([disabled]) {
|
||||
background-color: $rte_toolbar_color2;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button__trigger:hover:not([disabled]) {
|
||||
background-color: $rte_toolbar_color1;
|
||||
}
|
||||
|
||||
.jodit-toolbar-button_with-trigger_true:hover:not([disabled]) {
|
||||
border-color: $rte_toolbar_color1;
|
||||
}
|
||||
|
||||
.jodit-popup__content {
|
||||
background-color: $rte_toolbar_color3;
|
||||
}
|
||||
|
||||
.jodit-popup__content_custom {
|
||||
background-image: none;
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-tabs__button_columns_2 {
|
||||
color: $rte_content_fc;
|
||||
}
|
||||
|
||||
.jodit-ui-button[aria-pressed='true']:hover:not([disabled]) {
|
||||
background-color: $rte_status_button_hover;
|
||||
}
|
||||
|
||||
.jodit-ui-button[aria-pressed='true']:not([disabled]){
|
||||
background-color: $rte_toolbar_color1;
|
||||
}
|
||||
|
||||
.jodit-ui-button:hover:not([disabled]) {
|
||||
background-color: $rte_status_button_hover;
|
||||
}
|
||||
|
||||
.jodit-color-picker__native svg{
|
||||
fill: $rte_toolbar_color4;
|
||||
}
|
||||
|
||||
.jodit-drag-and-drop__file-box {
|
||||
color: $rte_toolbar_color4;
|
||||
border-color: $rte_toolbar_color1;
|
||||
}
|
||||
|
||||
.jodit-drag-and-drop__file-box:hover {
|
||||
background-color: $rte_toolbar_color2;
|
||||
}
|
||||
|
||||
.jodit-ui-button__icon svg {
|
||||
fill: $rte_status_button_fc;
|
||||
}
|
||||
|
||||
.jodit-form__inserter {
|
||||
.jodit-form__center {
|
||||
color: $rte_toolbar_color7;
|
||||
}
|
||||
}
|
||||
|
||||
.jodit-form__table-creator-box {
|
||||
.jodit-form__container > div > span {
|
||||
border: $rte_table_creator_border;
|
||||
}
|
||||
|
||||
.jodit_hovered {
|
||||
border-color: $rte_toolbar_color6 !important;
|
||||
background: $rte_toolbar_color6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-html {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(row);
|
||||
@include flexAlignItems(flex-start, start);
|
||||
@include flexAlignContent(center, center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.btn-fullsize {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 22px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
line-height: 8pt;
|
||||
font-size: 14pt;
|
||||
font-family: $primaryFont;
|
||||
border-radius: 2px;
|
||||
background-color: $ehtml_fullsize_btn_bg;
|
||||
box-shadow: $ehtml_fullsize_btn_shadow;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline_tertiary,
|
||||
$outline-offset: 2px,
|
||||
$outline-width: 2px,
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $ehtml_fullsize_btn_active_bg;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
svg path {
|
||||
fill: $ehtml_fullsize_btn_fg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $ehtml_fullsize_btn_active_shadow;
|
||||
|
||||
svg path {
|
||||
fill: $ehtml_fullsize_btn_active_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content,
|
||||
.editor-fullsize {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
td {
|
||||
border: $ehtml_content_line_color;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: $ehtml_content_line_color;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-sellect-text;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
color: $ehtml_fg;
|
||||
padding: 0 10px;
|
||||
border: $ehtml_border;
|
||||
border-radius: 8px;
|
||||
background-color: $ehtml_bg;
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.html-scroll-content {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-fullsize {
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
color: $ehtml_fg;
|
||||
background-color: $ehtml_bg;
|
||||
}
|
||||
|
||||
.html-scroll-content {
|
||||
@include partial-sellect-text;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(column);
|
||||
@include flexAlignItems(flex-end, end);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.btn-fullsize {
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-html-p {
|
||||
.content {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
//CHECK: NG => nie mam pojęcia z czym są związane te style
|
||||
.modal-overlay .modal .modal-buttons {
|
||||
border-top: 0;
|
||||
border-bottom: $ehtml_modal_border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-signature {
|
||||
@include partial-row-center-start;
|
||||
@include flexAlignItems(flex-start, start);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-left: 5px;
|
||||
height: inherit;
|
||||
cursor: crosshair;
|
||||
border: $signature_content_border;
|
||||
border-radius: 8px;
|
||||
background-color: $signature_content_bg;
|
||||
|
||||
.signature {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
cursor: $signature_cursor;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-transition;
|
||||
@include partial-column-center;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
background-color: $signature_icon_bg;
|
||||
border-radius: 2px;
|
||||
box-shadow: $signature_icon_shadow;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $signature_icon_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $signature_icon_hover_shadow;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $signature_icon_active_shadow;
|
||||
background-color: $signature_icon_active_bg;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $signature_icon_active_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.icon {
|
||||
box-shadow: $signature_icon_active_shadow;
|
||||
background-color: $signature_icon_active_bg;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $signature_icon_active_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexDirection(column);
|
||||
@include flexAlignItems(flex-end, end);
|
||||
@include flexJustifyContent(flex-end, end);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.stopwatch {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border: none;
|
||||
text-align: right;
|
||||
padding-right: 7px;
|
||||
color: $input_text_editor_fg;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,561 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-text,
|
||||
.date-text {
|
||||
@include partial-row-center-start;
|
||||
@include flexAlignItems(center, center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
|
||||
&:focus-within .content {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
border: $theme_editor_common_border;
|
||||
background-color: $input_bg;
|
||||
border-radius: 8px;
|
||||
|
||||
input {
|
||||
background-color: $input_text_editor_bg;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
color: $input_text_editor_fg;
|
||||
font-family: $defaultFont;
|
||||
font-size: $font_size_input;
|
||||
font-weight: 500;
|
||||
line-height: $font_size_input;
|
||||
outline: none;
|
||||
padding: 0 2px 0 4px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
|
||||
::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $input_disabled_fg;
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $input_focused_fg;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.clearable {
|
||||
@include partial-clearable-text;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
height: $input_height;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
path {
|
||||
fill: $input_icon_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
svg {
|
||||
path {
|
||||
fill: $input_icon_fg_disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: $input_disabled_bg;
|
||||
border: $input_border_disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
top: unset;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexWrap(nowrap);
|
||||
@include flexDirection(row);
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(stretch, stretch);
|
||||
|
||||
right: 0;
|
||||
height: calc(100% - 8px);
|
||||
width: calc(100% - 4px);
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
background-color: unset;
|
||||
font-family: $tertiaryFont;
|
||||
font-size: $font_size_vertical_input;
|
||||
height: inherit;
|
||||
line-height: $font_size_vertical_line_height;
|
||||
padding: 0 4px 0 14px;
|
||||
|
||||
&:disabled {
|
||||
color: $input_disabled_fg;
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: $input_disabled_bg;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
border: $input_vertical_border;
|
||||
border-radius: 12px;
|
||||
|
||||
&.active {
|
||||
border: $input_vertical_focused_border;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.locator {
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
width: 100%;
|
||||
border-color: $grid_loc_command_border_color;
|
||||
|
||||
input {
|
||||
padding-left: 16px !important;
|
||||
font-family: $tertiaryFont;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.premium {
|
||||
&:not(.vertical),
|
||||
&.vertical {
|
||||
.content {
|
||||
border-left: none;
|
||||
border-color: $grid_loc_command_border_color;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.lookup {
|
||||
.icon {
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
|
||||
path {
|
||||
fill: $lookup_editor_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.multiline-label {
|
||||
.content {
|
||||
bottom: 0;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&.empty-bg {
|
||||
.content {
|
||||
background: $cp_empty_bg;
|
||||
|
||||
.icon {
|
||||
svg path {
|
||||
fill: $cp_empty_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
&:not(.grid) {
|
||||
&:not(.premium) {
|
||||
background-color: $input_focused_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.vertical) {
|
||||
.content {
|
||||
@include partial-editor-shadow;
|
||||
border: none;
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: $input_autofill_focused_shadow !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-border {
|
||||
border: $input_vertical_focused_border;
|
||||
}
|
||||
|
||||
.content {
|
||||
.icon {
|
||||
color: $input_focused_fg;
|
||||
background-color: transparent;
|
||||
|
||||
svg path {
|
||||
fill: $input_focused_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-picker {
|
||||
.content {
|
||||
input {
|
||||
background-color: inherit;
|
||||
&:disabled {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-picker {
|
||||
.content {
|
||||
input {
|
||||
background-color: inherit;
|
||||
&:disabled {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-picker-d {
|
||||
.content {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.grid:not(.color-picker) {
|
||||
.content {
|
||||
border: none;
|
||||
|
||||
input {
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
.content {
|
||||
top: unset;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.content {
|
||||
box-shadow: $input_warning_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.content {
|
||||
box-shadow: $input_error_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-textRight {
|
||||
.content {
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editor-date {
|
||||
&.input-textRight {
|
||||
.content {
|
||||
input {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipHolder {
|
||||
color: $input_tooltip_fg;
|
||||
line-height: 26px;
|
||||
font-size: $font_size_label;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
input:valid {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.premium {
|
||||
&:not(.vertical) {
|
||||
.content {
|
||||
box-shadow: $input_shadow;
|
||||
border: $input_border;
|
||||
border-radius: 4px;
|
||||
|
||||
&.disabled {
|
||||
border: $input_border_disabled;
|
||||
}
|
||||
|
||||
input {
|
||||
&:disabled {
|
||||
text-shadow: $input_disabled_text_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.con-adv input {
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
@include partial-editor-shadow-premium;
|
||||
box-shadow: none;
|
||||
border: $input_focused_border;
|
||||
background-color: $input_focused_bg;
|
||||
|
||||
.icon svg path {
|
||||
fill: $input_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.grid.focused {
|
||||
background-color: $grid_eip_bg;
|
||||
|
||||
.content {
|
||||
background-color: $grid_eip_content_bg;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-editor {
|
||||
@include partial-row-center-start;
|
||||
height: 26px;
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
height: inherit;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
input {
|
||||
width: 65px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: 20px;
|
||||
font-size: 9pt;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
position: relative;
|
||||
height: inherit;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: inherit;
|
||||
height: calc(100% - 2px);
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: inherit;
|
||||
font-size: 12pt;
|
||||
background-color: transparent;
|
||||
color: $signIn_text_fg;
|
||||
|
||||
&.clearable {
|
||||
@include partial-clearable-text;
|
||||
}
|
||||
|
||||
&.clearable-dark {
|
||||
@include partial-clearable-text;
|
||||
$color: "rgb(163, 163, 163, 1)";
|
||||
$style: "style='fill: #{$color};'";
|
||||
$path: "<path d='M 6.8496094,0 A 6.8518967,6.8518967 0 0 0 2.0761719,11.765625 L 70.310547,80 2.0761719,148.23438 a 6.8518967,6.8518967 0 1 0 9.6894531,9.68945 L 80,89.689453 148.23438,157.92383 a 6.8518967,6.8518967 0 1 0 9.68945,-9.68945 L 89.689453,80 157.92383,11.765625 A 6.8518967,6.8518967 0 1 0 148.23438,2.0761719 L 80,70.310547 11.765625,2.0761719 A 6.8518967,6.8518967 0 0 0 6.8496094,0 Z' #{$style} />";
|
||||
$data-url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'>#{$path}</svg>";
|
||||
background-image: url($data-url);
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: $signIn_text_shadow;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
path {
|
||||
fill: $signIn_field_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
margin-top: 3px;
|
||||
input {
|
||||
font-size: 18px;
|
||||
&.clearable {
|
||||
padding: 0 18px 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: $signIn_field_focused_shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-readonly {
|
||||
.content {
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.fn-con-overlay {
|
||||
@include partial-column-center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
z-index: 200001;
|
||||
background-color: $dp_overlay_bg;
|
||||
}
|
||||
|
||||
.fn-con {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.fb-anim-open :global {
|
||||
-webkit-animation-name: anim-open;
|
||||
animation-name: anim-open;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
|
||||
animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
|
||||
}
|
||||
|
||||
.fb-anim-close :global {
|
||||
-webkit-animation-name: anim-close;
|
||||
animation-name: anim-close;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
position: relative;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -3px,
|
||||
$outline-width: 2px,
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
.feature {
|
||||
@include partial-row-center-start;
|
||||
|
||||
.text {
|
||||
height: inherit;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.coll,
|
||||
.exp {
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
height: 10px;
|
||||
line-height: normal;
|
||||
width: 10px;
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
fill: $featurebar_item_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupcoll {
|
||||
padding-left: 10px;
|
||||
background-color: $featurebar_group_bg;
|
||||
}
|
||||
|
||||
&.header {
|
||||
&:only-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature {
|
||||
height: 24px;
|
||||
color: $featurebar_features_fg;
|
||||
font-size: $font_size_button;
|
||||
line-height: 24px;
|
||||
padding-left: 5px;
|
||||
cursor: default;
|
||||
|
||||
&.groupexp:first-child {
|
||||
.text {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.exp:first-child {
|
||||
&:not(.selected) {
|
||||
.text {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.groupexp {
|
||||
&:hover {
|
||||
.text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.feature {
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.feature {
|
||||
&.selected {
|
||||
.text {
|
||||
color: $featurebar_text_hover_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
.text {
|
||||
text-decoration: underline;
|
||||
color: $featurebar_text_hover_fg;
|
||||
}
|
||||
|
||||
&.exp {
|
||||
.icon {
|
||||
path {
|
||||
fill: $featurebar_text_hover_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item {
|
||||
width: 100%;
|
||||
border-bottom: $featurebar_features_border;
|
||||
|
||||
.feature {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
color: $featurebar_features_fg;
|
||||
font-size: $font_size_button;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
.check-open,
|
||||
.check-close {
|
||||
@include partial-column-center;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
// RS=>RS TID: 47112 powoduje to problemy na Edge
|
||||
/*animation-duration: 0.4s;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;*/
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.anim-open {
|
||||
@extend .fb-anim-open;
|
||||
}
|
||||
|
||||
&.anim-close {
|
||||
@extend .fb-anim-close;
|
||||
}
|
||||
}
|
||||
|
||||
.check-open {
|
||||
svg {
|
||||
path {
|
||||
fill: $featurebar_item_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-close {
|
||||
svg {
|
||||
path {
|
||||
fill: $featurebar_item_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $featurebar_item_hover_bg;
|
||||
|
||||
.text {
|
||||
color: $featurebar_text_hover_fg;
|
||||
}
|
||||
|
||||
&.coll,
|
||||
&.exp,
|
||||
&.check-close {
|
||||
svg {
|
||||
path {
|
||||
fill: $featurebar_item_hover_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.features-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
|
||||
.features-container {
|
||||
@include partial-column-start-start-wrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: $featurebar_bg;
|
||||
|
||||
.features-header:first-of-type {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.features-header,
|
||||
.features-items {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.features-header {
|
||||
@include partial-row-center-start;
|
||||
min-height: 33px;
|
||||
overflow: hidden;
|
||||
background-color: $featurebar_features_header_bg;
|
||||
border-bottom: $featurebar_features_border;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:hover {
|
||||
background-color: $featurebar_item_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.features-items {
|
||||
padding: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: $featurebar_item_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.field {
|
||||
position: absolute;
|
||||
min-height: 26px;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Special Class
|
||||
&.largefont {
|
||||
input {
|
||||
font-size: 12pt !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixedwidthfont {
|
||||
input,
|
||||
textarea {
|
||||
font-family: $monospaceFont !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.boldfont {
|
||||
input {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.warningfont {
|
||||
input {
|
||||
color: $field_warning_label_fg !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.field-v {
|
||||
@include flexDisplay();
|
||||
@include flexWrap(nowrap);
|
||||
@include flexDirection(column);
|
||||
@include flexJustifyContent(flex-end, flex-end);
|
||||
@include flexAlignItems(flex-start, flex-start);
|
||||
@include flexAlignContent(stretch, stretch);
|
||||
}
|
||||
|
||||
&.rangeslider {
|
||||
@include flexDisplay;
|
||||
@include flexAlignItems(flex-end, end);
|
||||
width: 100%;
|
||||
padding: 6px 0 10px 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./FieldBase.module.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.field-image,
|
||||
.field-image-full-screen {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
|
||||
.imgContainer {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
|
||||
img {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.fullScreenButton {
|
||||
cursor: pointer;
|
||||
@include fullScreenButton();
|
||||
|
||||
.fullScreenIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $field_image_full_screen_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.circle {
|
||||
.imgContainer {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(center, center);
|
||||
background-color: $field_image_circle_bg;
|
||||
border: $field_image_circle_border;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-image {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.imgContainer {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(center, center);
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
border-radius: 12px;
|
||||
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
fill: $grid_emptycontent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-image-full-screen {
|
||||
@include partial-column-center;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
background-color: $full-screen-field-bg;
|
||||
.imgContainer {
|
||||
@include partial-column-center;
|
||||
margin: 20px;
|
||||
img {
|
||||
height: 97%;
|
||||
}
|
||||
.fullScreenButton {
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./FieldBase.module.scss";
|
||||
|
||||
.field-locator {
|
||||
@include flexSelf(1, 1, auto);
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./FieldBase.module.scss";
|
||||
|
||||
.field-phone {
|
||||
display: inline-flex;
|
||||
height: inherit;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import "./Variables.scss";
|
||||
@import "./FieldBase.module.scss";
|
||||
|
||||
.field-stopwatch {
|
||||
border: $stop_watch_border;
|
||||
background-color: $stop_watch_bg;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "./Loader.module.scss";
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.drag-container {
|
||||
@include partial-column-center;
|
||||
color: $drop_zone_text_fg;
|
||||
position: fixed;
|
||||
background-color: $drop_zone_bg;
|
||||
visibility: hidden;
|
||||
z-index: 200002;
|
||||
opacity: 0.9;
|
||||
font-size: 24pt;
|
||||
outline: 2px dashed $drop_zone_outline_fg;
|
||||
outline-offset: -10px;
|
||||
&.show {
|
||||
visibility: initial;
|
||||
}
|
||||
.information {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 200000;
|
||||
background-color: $modal_overlay_bg;
|
||||
}
|
||||
|
||||
.file-popup {
|
||||
position: absolute;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
width: 240px;
|
||||
line-height: 14px !important;
|
||||
-webkit-box-shadow: $pickfile_shadow;
|
||||
-moz-box-shadow: $pickfile_shadow;
|
||||
box-shadow: $pickfile_shadow;
|
||||
border: $pickfile_border;
|
||||
background-color: $pickfile_bg;
|
||||
|
||||
.file-popup-label {
|
||||
outline: 0;
|
||||
border: 1px solid $pickfile_label_bg;
|
||||
color: $pickfile_label_fg;
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 4px;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
background-color: $pickfile_label_bg;
|
||||
}
|
||||
|
||||
.file-popup-btn {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
border: $pickfile_btn_border;
|
||||
padding: 25px 40px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: $pickfile_fg;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $pickfile_btn_hover_bg;
|
||||
color: $pickfile_btn_hover_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
@import "./Group.module.scss";
|
||||
|
||||
.filter-group {
|
||||
@include flexDisplay;
|
||||
@include flexJustifyContent(space-between, justify);
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
background-color: $group_bg;
|
||||
box-shadow: $group_shadow;
|
||||
overflow: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
.column {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.folder-tab-bar {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
top: $window_top_margin;
|
||||
width: 100%;
|
||||
z-index: 399;
|
||||
padding: 0 16px 8px 8px;
|
||||
font-family: $tertiaryFont;
|
||||
|
||||
.tabs-container {
|
||||
@include partial-row-center-start;
|
||||
border-radius: 8px;
|
||||
background-color: $folder_tab_item_bg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.ftab {
|
||||
@include partial-row-center;
|
||||
min-width: 116px;
|
||||
height: 100%;
|
||||
padding: 5px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $folder_tab_item_fg;
|
||||
cursor: pointer;
|
||||
|
||||
&.ftab-ac {
|
||||
border-radius: 8px;
|
||||
background: $folder_tab_item_ac_bg;
|
||||
color: $folder_tab_item_ac_fg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gantt-main:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.gantt-main :global {
|
||||
position: absolute;
|
||||
line-height: normal;
|
||||
|
||||
.holiday {
|
||||
background: $gantt_holiday_bg !important;
|
||||
|
||||
.e-span {
|
||||
color: $gantt_holiday_fg !important;
|
||||
}
|
||||
}
|
||||
|
||||
.e-gantt .e-gantt-chart .e-weekend-header-cell,
|
||||
.e-gantt .e-gantt-chart .e-weekend {
|
||||
background: var(--gantt_not_working_days_bg) !important;
|
||||
}
|
||||
|
||||
.holiday-connector {
|
||||
background: $gantt_holiday_connector_bg !important;
|
||||
|
||||
.e-span {
|
||||
color: $gantt_holiday_connector_fg !important;
|
||||
}
|
||||
}
|
||||
|
||||
.workingArea {
|
||||
margin-left: -1px !important;
|
||||
border-left: 0 !important;
|
||||
background: $gantt_working_area_bg;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.e-gantt-dependency-view-container {
|
||||
.e-connector-line-container {
|
||||
.e-connector-line {
|
||||
stroke: $gantt_connector_bg;
|
||||
}
|
||||
|
||||
.e-connector-line-arrow {
|
||||
fill: $gantt_connector_bg;
|
||||
}
|
||||
|
||||
&:hover .e-connector-line {
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
.e-connector-line {
|
||||
stroke-width: 3;
|
||||
stroke: $gantt_connector_hover_bg;
|
||||
}
|
||||
|
||||
.e-connector-line-arrow {
|
||||
fill: $gantt_connector_hover_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.e-splitter .e-split-bar.e-split-bar-horizontal {
|
||||
background-color: $gantt_border !important;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: $gantt_connector_hover_bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
.e-gantt-tree-grid {
|
||||
&.e-control {
|
||||
height: 100%;
|
||||
}
|
||||
.e-grid {
|
||||
height: 100%;
|
||||
|
||||
.e-content {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.e-gantt-chart .e-chart-root-container,
|
||||
.e-gantt-chart .e-timeline-header-container,
|
||||
.e-grid,
|
||||
.e-grid .e-content,
|
||||
.e-grid .e-detailcel,
|
||||
.e-grid .e-gridcontent,
|
||||
.e-grid .e-table,
|
||||
.e-grid .e-gridheader,
|
||||
.e-grid .e-headercell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.e-gantt-chart .e-timeline-top-header-cell,
|
||||
.e-gantt-chart .e-timeline-single-header-cell,
|
||||
.e-gantt-chart .e-line-container-cell,
|
||||
.e-gantt-chart .e-timeline-header-container,
|
||||
.e-gantt-splitter,
|
||||
.e-grid .e-rowcell,
|
||||
.e-grid .e-gridheader,
|
||||
.e-grid .e-headercell {
|
||||
border-color: $gantt_border !important;
|
||||
}
|
||||
|
||||
.e-gantt-chart .e-line-container-cell:nth-of-type(-n+5),
|
||||
.e-gantt-chart .e-line-container-cell:nth-last-child(-n+5) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.e-gantt-chart .e-chart-row-cell.e-lastrow {
|
||||
border-bottom: 1px solid $gantt_border;
|
||||
}
|
||||
|
||||
.e-grid .e-gridheader,
|
||||
.e-gantt-chart .e-timeline-top-header-cell,
|
||||
.e-gantt-chart .e-timeline-single-header-cell,
|
||||
.e-grid .e-gridcontent .e-content .e-row .e-treecolumn-container .e-icons {
|
||||
color: $gantt_header_fg !important;
|
||||
}
|
||||
|
||||
.e-treegrid .e-treegridexpand:hover::before,
|
||||
.e-treegrid .e-treegridcollapse:hover::before {
|
||||
color: $gantt_icon_hover_fg !important;
|
||||
}
|
||||
|
||||
.e-grid .e-rowcell:not(.e-editedbatchcell),
|
||||
.e-grid .e-detailrowcollapse:not(.e-editedbatchcell),
|
||||
.e-grid .e-detailrowexpand:not(.e-editedbatchcell),
|
||||
.e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell),
|
||||
.e-grid .e-emptyrow:not(.e-editedbatchcell),
|
||||
.e-gantt-chart .e-label {
|
||||
color: $gantt_fg !important;
|
||||
}
|
||||
|
||||
.e-gantt-chart .e-active,
|
||||
.e-gantt-tree-grid-pane .e-grid td.e-active {
|
||||
background: $gantt_focused_row_bg !important;
|
||||
}
|
||||
|
||||
.e-gantt-chart .e-progress-resize-gripper.no-edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.e-gantt .e-grid .e-focused:not(.e-menu-item) {
|
||||
box-shadow: $focus_box_shadow_inset !important;
|
||||
}
|
||||
|
||||
.e-gantt .e-gantt-chart .e-active-container {
|
||||
box-shadow: $focus_box_shadow_inset !important;
|
||||
}
|
||||
|
||||
@mixin notWorkinDays($from, $to, $step) {
|
||||
$i: $from;
|
||||
|
||||
@while $i <= $to {
|
||||
.notWorkingDays#{$i} {
|
||||
border-left: 0 !important;
|
||||
background: $gantt_not_working_days_bg;
|
||||
z-index: 0 !important;
|
||||
width: $i + px !important;
|
||||
}
|
||||
$i: $i + $step;
|
||||
}
|
||||
}
|
||||
|
||||
@include notWorkinDays(8, 104, 4);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@import "../../Themes/common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: $grid_border;
|
||||
border-radius: 12px;
|
||||
|
||||
&.grid-no-grid-lines {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.grid-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline: $focus_outline,
|
||||
$outline_offset: -1px,
|
||||
$box-shadow: none
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.grid-premium {
|
||||
.grid-main {
|
||||
background-color: $grid_main_bg;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $grid_filterbar_input_focused_border;
|
||||
box-shadow: $grid_focused_shadow;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gb-cmd {
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
background: $grid_cards_cmd_bg;
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-column-start-start;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
path {
|
||||
fill: $grid_cards_cmd_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-radius: 4px;
|
||||
background-color: $grid_cards_cmd_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $grid_cards_cmd_hover_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gb-cmd,
|
||||
.special,
|
||||
.split {
|
||||
cursor: pointer;
|
||||
background-color: $grid_command_bg;
|
||||
border-bottom: $grid_bar_command_border_bottom;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
.content {
|
||||
@include partial-column-start-start;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$box-shadow: $focus_box_shadow_inset,
|
||||
);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
fill: $grid_command_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $grid_command_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $grid_command_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gb-cmd {
|
||||
border: none;
|
||||
padding: 0;
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$outline-offset: -2px,
|
||||
$box-shadow: $focus_box_shadow_inset,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.special {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.split {
|
||||
height: 60px;
|
||||
|
||||
.ic-split {
|
||||
@include partial-column-center;
|
||||
width: inherit;
|
||||
height: 40px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
fill: $grid_command_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $grid_command_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $grid_command_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
@include partial-column-center;
|
||||
border-top: $grid_bar_special_icon_border;
|
||||
background-color: inherit;
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
fill: $grid_bar_special_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $grid_bar_special_icon_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $grid_bar_special_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gb {
|
||||
position: absolute;
|
||||
background: $grid_bar_gradient;
|
||||
box-shadow: $group_shadow;
|
||||
overflow: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
border: $grid_bar_border;
|
||||
border-top: $grid_bar_border_top;
|
||||
border-radius: $grid_bar_border_radius;
|
||||
|
||||
.content {
|
||||
@include partial-column-start-start;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.gb-p {
|
||||
box-shadow: unset;
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gb-cmd,
|
||||
.special,
|
||||
.split {
|
||||
cursor: pointer;
|
||||
width: 125px;
|
||||
height: 30px;
|
||||
margin-left: 5px;
|
||||
border-radius: 2px;
|
||||
background-color: $grid_bar_bg;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
width: 32px;
|
||||
height: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $grid_command_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
||||
.con-left {
|
||||
@include partial-row-center-start;
|
||||
height: inherit;
|
||||
width: calc(100% - 24px);
|
||||
|
||||
&:hover {
|
||||
background-color: $grid_bar_special_icon_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.con-left-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gb-cmd-cap {
|
||||
@include partial-row-center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
font-family: $primaryFont;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0px;
|
||||
color: $grid_bar_color;
|
||||
}
|
||||
|
||||
.gb-cmd-cap-short {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
&.gb-cmd-ic {
|
||||
width: 70px;
|
||||
|
||||
.icon {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.special {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.split {
|
||||
.s-icon {
|
||||
@include partial-column-center;
|
||||
border-top: $grid_bar_special_icon_border;
|
||||
background-color: inherit;
|
||||
width: 24px;
|
||||
height: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: inherit;
|
||||
|
||||
path {
|
||||
fill: $grid_bar_special_icon;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $grid_bar_special_icon_hover_bg;
|
||||
|
||||
svg path {
|
||||
fill: $grid_bar_special_icon_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
@keyframes color {
|
||||
100%, 0% { stroke: var(--loader_color1); }
|
||||
40% { stroke: var(--loader_color2); }
|
||||
66% { stroke: var(--loader_color3); }
|
||||
80%, 90% { stroke: var(--loader_color4); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes color {
|
||||
100%, 0% { stroke: var(--loader_color1); }
|
||||
40% { stroke: var(--loader_color2); }
|
||||
66% { stroke: var(--loader_color3); }
|
||||
80%, 90% { stroke: var(--loader_color4); }
|
||||
}
|
||||
|
||||
.grid-canvas {
|
||||
@include partial-box-sizing;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
transition: color 100ms ease;
|
||||
|
||||
.grid-canvas-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-canvas-cards {
|
||||
@include partial-row-start-wrap;
|
||||
background-color: $grid_cards_bg;
|
||||
padding-top: 5px;
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gc-text, .gc-check, .gc-select, .gc-image, .gc-color, .gc-icon, .gc-command, .gc-color-status {
|
||||
@include partial-unselectable;
|
||||
@include partial-ellipsis;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: inherit;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0;
|
||||
|
||||
&.gc-so {
|
||||
cursor: pointer;
|
||||
|
||||
&.right {
|
||||
.text {
|
||||
left: unset;
|
||||
right: 16px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
@include partial-ellipsis;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:not(.gc-sel) {
|
||||
color: $grid_column_smartopen_fg;
|
||||
}
|
||||
}
|
||||
&.cp-empty-bcg {
|
||||
background: $cp_empty_bg;
|
||||
|
||||
.icon {
|
||||
svg path {
|
||||
fill: $cp_empty_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
@include partial-column-center;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
svg {
|
||||
fill: $grid_emptycontent;
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gc-cell-highlight {
|
||||
background: $grid_cell_highlight_bg !important;
|
||||
}
|
||||
|
||||
.gc-text, .gc-check, .gc-select, .gc-color, .gc-color-status {
|
||||
min-height: $grid_headercolumn_height;
|
||||
}
|
||||
|
||||
.gc-check, .gc-select, .gc-color-status {
|
||||
@include partial-row-center-start;
|
||||
}
|
||||
|
||||
.gc-image, .gc-icon, .gc-command {
|
||||
@include partial-row-center;
|
||||
}
|
||||
|
||||
.gc-color-status {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.gc-text {
|
||||
@include partial-row-center-start;
|
||||
line-height: $grid_headercolumn_height;
|
||||
text-decoration: inherit;
|
||||
font-size: 9pt;
|
||||
padding: 0 5px;
|
||||
|
||||
&.right {
|
||||
@include partial-row-center-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tree-state {
|
||||
@include partial-row-center-end;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
padding-right: 10px;
|
||||
|
||||
.tree-lev-bar {
|
||||
@include flexKeepSizeDisplay();
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
opacity: 1;
|
||||
|
||||
span {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
margin-left: 10px;
|
||||
//border-left: 1px solid $nav_tree_graph;
|
||||
}
|
||||
|
||||
&.tree-lev-bar-short {
|
||||
span {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
fill: $grid_tree_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-state-noicon {
|
||||
.icon {
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 10px;
|
||||
width: 44px;
|
||||
height: calc(100% - 32px);
|
||||
//border-bottom: 1px solid $nav_tree_graph;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-state-zero {
|
||||
.tree-lev-bar {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
flex: 1;
|
||||
|
||||
&, & > * {
|
||||
@include partial-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.gc-rounded {
|
||||
border: 1px solid $grid_odd_bg;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.gc-color {
|
||||
line-height: $grid_headercolumn_height;
|
||||
font-size: 10pt;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.gc-select {
|
||||
background-color: $grid_headercolumn_bg;
|
||||
}
|
||||
|
||||
.gc-check {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.gc-command {
|
||||
&>* {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.gr-foc:hover {
|
||||
cursor: pointer;
|
||||
background-color: $grid_column_command_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.gc-command-tooltip {
|
||||
@include partial-column-start-start;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 4px 6px 4px 6px;
|
||||
min-width: 50px;
|
||||
min-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 9pt;
|
||||
z-index: 250000;
|
||||
opacity: 0.95;
|
||||
border: $tooltip_border;
|
||||
color: $tooltip_fg;
|
||||
background-color: $tooltip_bg;
|
||||
border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
}
|
||||
|
||||
// FROZEN
|
||||
.gc-text, .gc-check, .gc-image, .gc-icon {
|
||||
&.frozen {
|
||||
z-index: 100;
|
||||
|
||||
&.gc-odd {
|
||||
&:not(.gr-foc) {
|
||||
&:not(.gc-sel) {
|
||||
background-color: $grid_row_frozen_odd_bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.gc-even {
|
||||
&:not(.gr-foc) {
|
||||
&:not(.gc-sel) {
|
||||
background-color: $grid_row_frozen_even_bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FROZEN
|
||||
.gc-text, .gc-check, .gc-image, .gc-icon {
|
||||
&.gc-cell-sel {
|
||||
border: $grid_cell_border;
|
||||
box-shadow: $grid_cell_boxshadow;
|
||||
background: $grid_cell_highlight_bg;
|
||||
}
|
||||
}
|
||||
|
||||
// FOCUSED
|
||||
.gr-foc {
|
||||
&.gc-command {
|
||||
&>* {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.gc-eip) {
|
||||
svg path {
|
||||
fill: $grid_row_focused_fg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-sum {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: $grid_gfsum_bg;
|
||||
border-top: $grid_gfsum_border;
|
||||
|
||||
.text {
|
||||
@include partial-ellipsis;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
line-height: $grid_headercolumn_height;
|
||||
color: $grid_gfsum_color;
|
||||
font-size: 9pt;
|
||||
padding: 0 4px;
|
||||
font-weight: $grid_gfsum_text_fw;
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
background-color: $grid_gfsum_before_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
float: left;
|
||||
height: inherit;
|
||||
width: $grid_headercolumn_height;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
|
||||
path {
|
||||
fill: $grid_row_sum_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-all {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
background-color: $grid_headercolumn_bg;
|
||||
border-right: $grid_border;
|
||||
}
|
||||
|
||||
.gf-sum-empty {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.frozen {
|
||||
z-index: 100;
|
||||
border-right-color: $grid_column_frozen_border_color;
|
||||
border-left-color: $grid_column_frozen_border_color;
|
||||
}
|
||||
|
||||
.gc-foc:not(.gc-sel) {
|
||||
border: $grid_column_focused_border;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
color: $grid_column_focus_fc !important;
|
||||
|
||||
&:not(.gc-eip) {
|
||||
background-color: $grid_column_focused_bg;
|
||||
svg path {
|
||||
fill: $grid_column_focus_fc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-sum-all {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: $grid_sum_color_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,294 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.grid-anim-open :global {
|
||||
-webkit-animation-name: anim-open;
|
||||
animation-name: anim-open;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
|
||||
animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
|
||||
}
|
||||
|
||||
.grid-anim-close :global {
|
||||
-webkit-animation-name: anim-close;
|
||||
animation-name: anim-close;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
transition: background .12s ease, border-color .12s ease;
|
||||
|
||||
svg {
|
||||
@include flexDisplay();
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background: $checkbox_bg;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $checkbox_fill_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.unchecked {
|
||||
border: $checkbox_grid_border;
|
||||
background: $grid_headercolumn_bg;
|
||||
}
|
||||
|
||||
&.select-all {
|
||||
&.unchecked {
|
||||
border-color: $grid_headercolumn_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.text {
|
||||
color: $checkbox_disabled_fg;
|
||||
}
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $checkbox_disabled_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled:not(.checked) {
|
||||
border: $checkbox_border_disabled;
|
||||
}
|
||||
|
||||
&.disabled:not(.unchecked) {
|
||||
background: $checkbox_disabled_color;
|
||||
border: $checkbox_border_disabled;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled):not(.unchecked) {
|
||||
background: $checkbox_bg_hover;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled):not(.checked) {
|
||||
border: $checkbox_border_hover;
|
||||
}
|
||||
}
|
||||
|
||||
.gc-select {
|
||||
@include partial-unselectable;
|
||||
@include partial-row-center-start;
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
min-height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.gc-select-cards) {
|
||||
background-color: $grid_headercolumn_bg;
|
||||
}
|
||||
|
||||
&:not(.premium) {
|
||||
&:not(.gc-select-cards) {
|
||||
border-right: $grid_border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gc-no-grid-lines {
|
||||
border-right: unset !important;
|
||||
}
|
||||
|
||||
.gc-foc:not(.gc-sel) {
|
||||
background-color: $grid_column_focused_bg;
|
||||
border: $grid_column_focused_border;
|
||||
}
|
||||
|
||||
.gc-select,
|
||||
.gc-check {
|
||||
@include flexDisplay();
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
position: absolute;
|
||||
|
||||
.check,
|
||||
.check-open,
|
||||
.check-close {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.check-open,
|
||||
.check-close {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.anim-open {
|
||||
@extend .grid-anim-open;
|
||||
}
|
||||
|
||||
&.anim-close {
|
||||
@extend .grid-anim-close;
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
fill: $grid_row_check;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-open {
|
||||
svg {
|
||||
path {
|
||||
fill: $grid_row_check_checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-close {
|
||||
svg {
|
||||
path {
|
||||
fill: $grid_row_check_unchecked;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gc-check:not(.gc-foc) {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.frozen {
|
||||
z-index: 100;
|
||||
border-right-color: $grid_column_frozen_border_color;
|
||||
border-left-color: $grid_column_frozen_border_color;
|
||||
}
|
||||
|
||||
.gr-foc .check,
|
||||
.gr-foc .check-open,
|
||||
.gr-foc .check-close {
|
||||
svg {
|
||||
path {
|
||||
fill: $grid_row_focused_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gc-select {
|
||||
.cell-sel {
|
||||
@include partial-column-center;
|
||||
width: 100%;
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
path {
|
||||
fill: $grid_cell_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-sel-all {
|
||||
svg {
|
||||
path {
|
||||
fill: $grid_cell_ac_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-sel-ac {
|
||||
svg {
|
||||
path {
|
||||
&:nth-child(1) {
|
||||
fill: $grid_cell_ac_fg;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
fill: $grid_cell_ac_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gc-select-cards {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-height: unset;
|
||||
border-radius: 4px;
|
||||
|
||||
.check-open-cards, .check-close-cards {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
rect {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.check-open-cards {
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
rect {
|
||||
fill: $grid_cards_column_select_open_rect;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
path {
|
||||
fill: $grid_cards_column_select_open_path;
|
||||
}
|
||||
}
|
||||
.check-close-cards {
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
rect {
|
||||
fill: $grid_cards_column_select_close_rect;
|
||||
stroke: $grid_cards_column_select_open_path;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gc-select-panel-cards {
|
||||
@extend .gc-select-cards;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
.check-close-cards {
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
.grid-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $grid_headercolumn_bg;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
.grid-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $grid_headercolumn_bg;
|
||||
border-bottom: $grid_border;
|
||||
}
|
||||
|
||||
.grid-header-premium {
|
||||
border-bottom: $grid_header_line_color;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gh-column {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: $grid_headercolumn_bg;
|
||||
border-right: $grid_border;
|
||||
cursor: pointer;
|
||||
|
||||
&.gh-no-grid-lines {
|
||||
border-right: unset;
|
||||
}
|
||||
|
||||
.ghc-title {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
color: $grid_headercolumn_fg;
|
||||
padding: 0 0 0 4px;
|
||||
|
||||
span {
|
||||
@include partial-ellipsis;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ghc-sort {
|
||||
@include partial-row-center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus($outline-offset: -2px,
|
||||
$box-shadow: $focus_box_shadow_inset,
|
||||
);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $grid_header_sort;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.frozen {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gh-column {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: $grid_headercolumn_bg;
|
||||
cursor: pointer;
|
||||
|
||||
.ghc-title {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
color: $grid_headercolumn_fg;
|
||||
padding: 0 0 0 4px;
|
||||
|
||||
span {
|
||||
@include partial-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.ghc-sort {
|
||||
@include partial-row-center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: inherit;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: $grid_header_sort;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.frozen {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gh-resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 8px;
|
||||
margin: 2px;
|
||||
cursor: col-resize;
|
||||
z-index: 1;
|
||||
|
||||
&.resizerOver {
|
||||
background-color: $grid_row_focused_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $grid_header_pulse_bg;
|
||||
animation: pulsate 1.2s ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
opacity: 0;
|
||||
box-shadow: $grid_header_pulse_shadow;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(0.1, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.1, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
$grid_headercolumn_height: 32px;
|
||||
|
||||
.gh-columns {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: $grid_headercolumn_height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
.gh-cells {
|
||||
height: 100%;
|
||||
background-color: $grid_headercolumn_bg;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gh-filter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: inherit;
|
||||
border-top: $grid_border;
|
||||
border-right: $grid_border;
|
||||
|
||||
input {
|
||||
color: $grid_row_content_fg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
background-color: $grid_filter_bg;
|
||||
|
||||
&:focus {
|
||||
background-color: $grid_filter_focused_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.frozen {
|
||||
z-index: 100;
|
||||
border-right-color: $grid_column_frozen_border_color;
|
||||
border-left-color: $grid_column_frozen_border_color;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gh-filter {
|
||||
@include partial-column-center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: $grid_filterbar_bg;
|
||||
border-top: $grid_cell_border;
|
||||
|
||||
input {
|
||||
@include partial-row-center-start;
|
||||
align-items: flex-end;
|
||||
min-height: inherit;
|
||||
height: calc(100% - 5px);
|
||||
width: calc(100% - 5px);
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
border: $grid_filterbar_input_border;
|
||||
color: $grid_filterbar_input_fg;
|
||||
background-color: $grid_filterbar_input_bg;
|
||||
font-size: 9pt;
|
||||
font-family: "SourceSans", Arial;
|
||||
|
||||
&:focus {
|
||||
border: $grid_filterbar_input_focused_border;
|
||||
color: $grid_filterbar_input_focused_fg;
|
||||
background-color: $grid_filter_focused_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.frozen {
|
||||
z-index: 100;
|
||||
border-right-color: $grid_column_frozen_border_color;
|
||||
border-left-color: $grid_column_frozen_border_color;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.gh-filters {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
font-size: 9pt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus(
|
||||
$box-shadow: none,
|
||||
);
|
||||
}
|
||||
|
||||
.gh-cells {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
font-size: 9pt;
|
||||
background-color: $grid_header_filter_bg;
|
||||
border-top: $grid_border;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
.gh-filter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
background-color: inherit;
|
||||
border-top: $grid_border;
|
||||
border-right: $grid_border;
|
||||
|
||||
input {
|
||||
color: $grid_row_content_fg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
background-color: $grid_filter_focused_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user