cronapp-framework-js/css/themes/custom/theme-general/slider.css

Javascript library for CronApp's projects

.k-slider .k-slider-selection {
    background: var(--colorDefault40, #3b448e);
    margin-top: -1px;
}

.k-slider .k-draghandle,
.k-slider .k-draghandle.k-state-focused,
.k-slider .k-draghandle.k-state-focused:link {
    background: var(--colorPrimary40, #5665be);
    border-color: var(--colorPrimary40, #5665be);
    box-shadow: none;
}

.k-slider-horizontal .k-label {
    color: var(--textColor40, #393939);
    font-family: var(--fontFamily, Arial, sans-serif);
}

div[data-component^='crn-slider'] .form-control {
    box-shadow: none;
}

.k-grid .k-slider .k-button,
.k-slider .k-button {
    width: calc(var(--textNormalSize, 14px) * 2.5);
    height: calc(var(--textNormalSize, 14px) * 2.5);
    border-radius: var(--borderRadiusFull, 99999px);
    line-height: calc(var(--textNormalSize, 14px) * 2.5);
    background: var(--colorNeutral00, #ffffff);
    color: var(--colorPrimary40, #5665be);
    border-color: transparent;
}

.k-slider .k-button span {
    font-size: var(--textBigSize, 18px);
}

.k-draghandle.k-state-focused,
.k-draghandle.k-state-focused:link,
.k-slider-buttons .k-button:active,
.k-slider-buttons .k-button:focus,
.k-grid .k-slider .k-button:hover,
.k-slider .k-button:hover {
    background: var(--colorNeutral00, #ffffff);
    border-color: transparent;
    color: var(--colorPrimary40, #5665be);
    box-shadow: 0 0 7px 0 var(--colorPrimary20, #b4b7da);
}

.k-slider-track {
    background: var(--colorNeutral30, #D5D5D5);
    border: 0;
}

.k-slider-horizontal .k-slider-selection,
.k-slider-horizontal .k-slider-track {
    height: 2px;
}

.k-slider-buttons .k-slider-items {
    margin-left: calc(var(--textBigSize, 18px) * 3);
}

.k-slider-horizontal .k-slider-buttons .k-slider-track {
    left: calc(var(--textBigSize, 18px) * 3);
}

.k-slider-horizontal .k-draghandle {
    top: -6px;
    border-radius: 100%;
}