StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
StackGenVis/frontend/node_modules/vue-slider-component/lib/theme/material.scss

175 lines
3.7 KiB

$themeColor: #6200ee !default;
$bgColor: #bda1f3 !default;
$disabledColor: #666 !default;
$railBorderRadius: 15px !default;
$railColorDisabled: #ccc !default;
$dotBorderRadius: 50% !default;
$dotShadowColor: rgba($themeColor, 0.38) !default;
$tooltipFontSize: 12px !default;
$tooltipSize: 30px !default;
$tooltipColor: #fff !default;
$stepBorderRadius: 50% !default;
$labelFontSize: 14px !default;
/* component style */
.vue-slider-disabled {
.vue-slider-rail {
background-color: $railColorDisabled;
}
.vue-slider-dot-handle {
background-color: $disabledColor;
}
.vue-slider-process {
background-color: $disabledColor;
}
.vue-slider-mark-step {
background-color: $disabledColor;
&-active {
background-color: $railColorDisabled;
}
}
}
/* rail style */
.vue-slider-rail {
background-color: $bgColor;
border-radius: $railBorderRadius;
}
/* process style */
.vue-slider-process {
background-color: $themeColor;
border-radius: $railBorderRadius;
}
/* mark style */
.vue-slider-mark {
z-index: 4;
@at-root &-step {
width: 100%;
height: 100%;
border-radius: $stepBorderRadius;
background-color: $themeColor;
&-active {
background-color: $bgColor;
}
}
@at-root &-label {
font-size: $labelFontSize;
white-space: nowrap;
&-active {
}
}
}
/* dot style */
.vue-slider-dot {
@at-root &-handle {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
border-radius: $dotBorderRadius;
background-color: $themeColor;
box-sizing: border-box;
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 200%;
height: 200%;
background-color: $dotShadowColor;
border-radius: $dotBorderRadius;
transform: translate(-50%, -50%) scale(0);
z-index: -1;
transition: transform 0.2s;
}
@at-root &-focus::after {
transform: translate(-50%, -50%) scale(1);
}
@at-root &-disabled {
cursor: not-allowed;
background-color: $disabledColor !important;
}
}
@at-root &-tooltip {
visibility: visible;
@at-root &-show {
.vue-slider-dot-tooltip-inner {
opacity: 1;
&-top {
transform: rotateZ(-45deg);
}
&-bottom {
transform: rotateZ(135deg);
}
&-left {
transform: rotateZ(-135deg);
}
&-right {
transform: rotateZ(45deg);
}
}
}
@at-root &-inner {
border-radius: 50% 50% 50% 0px;
background-color: $themeColor;
opacity: 0;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s linear;
&-top {
transform: translate(0, 50%) scale(0.01) rotate(-45deg);
}
&-bottom {
transform: translate(0, -50%) scale(0.01) rotateZ(135deg);
}
&-left {
transform: translate(50%, 0) scale(0.01) rotateZ(-135deg);
}
&-right {
transform: translate(-50%, 0) scale(0.01) rotateZ(45deg);
}
@at-root .vue-slider-dot-tooltip-text {
font-size: $tooltipFontSize;
white-space: nowrap;
text-align: center;
color: $tooltipColor;
width: $tooltipSize;
height: $tooltipSize;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
}
&-top .vue-slider-dot-tooltip-text {
transform: rotateZ(45deg);
}
&-bottom .vue-slider-dot-tooltip-text {
transform: rotateZ(-135deg);
}
&-left .vue-slider-dot-tooltip-text {
transform: rotateZ(135deg);
}
&-right .vue-slider-dot-tooltip-text {
transform: rotateZ(-45deg);
}
}
}
}