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.
175 lines
3.7 KiB
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|