public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved slider into label to make it clickable, styled slider in dark and light theme, created variables for slider

Browse Source
This commit is contained in:
ijin08
2018-11-16 13:02:29 +01:00
parent bdf598ccb2
commit c505fc3783
4 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/switch.ts
+11 -9
View File
@@ -1,16 +1,18 @@
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">
{{ctrl.label}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
{{ctrl.tooltip}}
</info-popover>
<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>
</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>
</label>
<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>
`;
export class SwitchCtrl {
public/sass/_variables.dark.scss
+8
View File
@@ -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;
public/sass/_variables.light.scss
+8
View File
@@ -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;
public/sass/components/_switch.scss
+18 -15
View File
@@ -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);
}