Commit c505fc37 by ijin08

moved slider into label to make it clickable, styled slider in dark and light…

moved slider into label to make it clickable, styled slider in dark and light theme, created variables for slider
parent bdf598cc
import coreModule from 'app/core/core_module';
const template = `
<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
<div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
{{ctrl.label}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
{{ctrl.tooltip}}
</info-popover>
</label>
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
</div>
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<span class="gf-form-switch__slider"></span>
</div>
</div>
</label>
`;
export class SwitchCtrl {
......
......@@ -355,3 +355,11 @@ $diff-json-icon: $gray-7;
//Submenu
$variable-option-bg: $blue-dark;
//Switch Slider
// -------------------------
$switch-bg: $black;
$switch-slider-color: $dark-2;
$switch-slider-off-bg: $gray-1;
$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
$switch-slider-shadow: 0 0 3px black;
......@@ -364,3 +364,11 @@ $diff-json-icon: $gray-4;
//Submenu
$variable-option-bg: $blue-light;
//Switch Slider
// -------------------------
$switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
$switch-slider-shadow: 0 0 3px $dark-5;
......@@ -88,12 +88,16 @@ gf-form-switch[disabled] {
}
}
.gf-form-switch-container {
display: flex;
}
.gf-form-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
background: black;
background: $switch-bg;
input {
opacity: 0;
......@@ -105,37 +109,36 @@ gf-form-switch[disabled] {
/* The slider */
.gf-form-switch__slider {
position: absolute;
cursor: pointer;
top: 8px;
left: 14px;
right: 10px;
left: 16px;
right: 14px;
bottom: 10px;
background: #1d1d1d;
transition: 0.4s;
border-radius: 34px;
background: $switch-slider-off-bg;
border-radius: 8px;
height: 16px;
&::before {
position: absolute;
content: '';
height: 16px;
width: 16px;
height: 12px;
width: 12px;
left: 2px;
bottom: 0px;
background: #333333;
bottom: 2px;
background: $switch-slider-color;
transition: 0.4s;
border-radius: 50%;
box-shadow: $switch-slider-shadow;
}
}
input:checked + .gf-form-switch__slider {
background: linear-gradient(90deg, $orange, $red);
background: $switch-slider-on-bg;
}
/* input:focus + .gf-form-switch__slider { */
/* box-shadow: 0 0 1px #2196f3; */
/* } */
input:checked + .gf-form-switch__slider:before {
transform: translateX(20px);
box-shadow: 0 0 5px black;
input:checked + .gf-form-switch__slider::before {
transform: translateX(14px);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment