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/antd.scss

166 lines
3.7 KiB

@import '../styles/triangle.scss';
$disabledColor: #a7a7a7 !default;
$themeColor: #69c0ff !default;
$themeColorSilent: lighten($themeColor, 10%) !default;
$themeColorActive: darken($themeColor, 10%) !default;
$bgColor: #e1e1e1 !default;
$bgColorSilent: lighten($bgColor, 8%) !default;
$railBorderRadius: 15px !default;
$dotColorFocus: $themeColorActive !default;
$dotColorHover: $dotColorFocus !default;
$dotColorDisabled: #ddd !default;
$dotShadowFocus: 0 0 0 5px rgba($themeColorActive, 0.2) !default;
$tooltipBgColor: rgba(0, 0, 0, 0.75) !default;
$tooltipColor: #fff !default;
$tooltipShadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
$tooltipBorderRadius: 5px !default;
$tooltipPadding: 6px 8px !default;
$tooltipArrow: 10px !default;
$tooltipFontSize: 14px !default;
$stepColor: #e8e8e8 !default;
$stepBgColor: #fff !default;
$labelFontSize: 12px !default;
/* component style */
.vue-slider-disabled {
.vue-slider-process {
background-color: $disabledColor;
}
.vue-slider-dot-handle {
border-color: $disabledColor;
}
.vue-slider-mark-step {
&-active {
box-shadow: 0 0 0 2px $disabledColor;
}
}
}
/* rail style */
.vue-slider-rail {
background-color: $bgColorSilent;
border-radius: $railBorderRadius;
transition: background-color 0.3s;
@at-root .vue-slider:hover & {
background-color: $bgColor;
}
}
/* process style */
.vue-slider-process {
background-color: $themeColorSilent;
border-radius: $railBorderRadius;
transition: background-color 0.3s;
@at-root .vue-slider:hover & {
background-color: $themeColor;
}
}
/* mark style */
.vue-slider-mark {
@at-root &-step {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 0 2px $stepColor;
background-color: $stepBgColor;
&-active {
box-shadow: 0 0 0 2px $themeColorSilent;
@at-root .vue-slider:hover & {
box-shadow: 0 0 0 2px $themeColor;
}
}
}
@at-root &-label {
font-size: $labelFontSize;
white-space: nowrap;
&-active {
}
}
}
/* dot style */
.vue-slider-dot {
@at-root &-handle {
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
border: 2px solid $themeColorSilent;
box-sizing: border-box;
transition: box-shadow 0.3s, border-color 0.3s;
@at-root .vue-slider:hover & {
border-color: $themeColor;
}
@at-root &-focus {
border-color: $dotColorFocus;
box-shadow: $dotShadowFocus;
@at-root .vue-slider:hover & {
border-color: $dotColorFocus;
}
}
@at-root &:hover {
border-color: $dotColorHover;
@at-root .vue-slider:hover & {
border-color: $dotColorHover;
}
}
@at-root &-disabled {
cursor: not-allowed;
border-color: $dotColorDisabled !important;
}
}
@at-root &-tooltip {
opacity: 0;
visibility: hidden;
transition: all 0.3s;
@at-root &-inner {
font-size: $tooltipFontSize;
white-space: nowrap;
padding: $tooltipPadding;
color: $tooltipColor;
border-radius: $tooltipBorderRadius;
border-color: $tooltipBgColor;
background-color: $tooltipBgColor;
box-shadow: $tooltipShadow;
@include arrow($tooltipArrow, inherit);
transform: scale(0.9);
transition: transform 0.3s;
&-top {
transform-origin: 50% 100%;
}
&-bottom {
transform-origin: 50% 0;
}
&-left {
transform-origin: 100% 50%;
}
&-right {
transform-origin: 0% 50%;
}
}
@at-root .vue-slider-dot:hover &,
&-show {
opacity: 1;
visibility: visible;
.vue-slider-dot-tooltip-inner {
transform: scale(1);
}
}
}
}