IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

wip: switch slider test

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-11-14 13:29:09 -08:00
parent 330a5c6496
commit bae4c8d2e6
2 changed files with 52 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/Switch/Switch.tsx
View File

@ -44,7 +44,7 @@ export class Switch extends PureComponent<Props, State> {
)} )}
<div className={switchClassName}> <div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} /> <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<label htmlFor={labelId} /> <span class="gf-form-switch__slider" />
</div> </div>
</div> </div>
); );

138
public/sass/components/_switch.scss
View File

@ -3,93 +3,6 @@
============================================================ */ ============================================================ */
.gf-form-switch { .gf-form-switch {
position: relative;
max-width: 4.5rem;
flex-grow: 1;
min-width: 4rem;
margin-right: $gf-form-margin;
input {
position: absolute;
margin-left: -9999px;
visibility: hidden;
display: none;
}
input + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
width: 100%;
height: 37px;
background: $input-bg;
border: 1px solid $input-border-color;
border-left: none;
border-radius: $input-border-radius;
}
input + label::before,
input + label::after {
@include buttonBackground($input-bg, $input-bg);
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #fff;
text-align: center;
font-size: 150%;
display: flex;
flex-direction: column;
justify-content: center;
}
&:hover {
input + label::before {
@include buttonBackground($input-bg, lighten($input-bg, 5%));
color: $text-color;
text-shadow: $text-shadow-faint;
}
input + label::after {
@include buttonBackground($input-bg, lighten($input-bg, 5%));
color: lighten($orange, 10%);
text-shadow: $text-shadow-strong;
}
}
input + label::before {
font-family: 'FontAwesome';
content: '\f096'; // square-o
color: $text-color-weak;
transition: transform 0.4s;
backface-visibility: hidden;
text-shadow: $text-shadow-faint;
}
input + label::after {
content: '\f046'; // check-square-o
color: $orange;
text-shadow: $text-shadow-strong;
font-family: 'FontAwesome';
transition: transform 0.4s;
transform: rotateY(180deg);
backface-visibility: hidden;
}
input:checked + label::before {
transform: rotateY(180deg);
}
input:checked + label::after {
transform: rotateY(0);
}
&--small { &--small {
max-width: 2rem; max-width: 2rem;
min-width: 1.5rem; min-width: 1.5rem;
@ -174,3 +87,54 @@ gf-form-switch[disabled] {
} }
} }
} }
.gf-form-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
border-radius: 34px;
input {
opacity: 0;
width: 0;
height: 0;
}
}
/* The slider */
.gf-form-switch__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $dark-3;
transition: 0.4s;
&::before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background: $dark-4;
transition: 0.4s;
border-radius: 50%;
}
}
input:checked + .gf-form-switch__slider {
background-color: $dark-5;
}
/* input:focus + .gf-form-switch__slider { */
/* box-shadow: 0 0 1px #2196f3; */
/* } */
input:checked + .gf-form-switch__slider:before {
transform: translateX(26px);
background: $blue;
}