IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-09 07:33:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

created classes for new checkbox and variables

Browse Source
This commit is contained in:
ijin08 2018-11-16 16:35:04 +01:00
parent c505fc3783
commit ad8e9ae691
3 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/sass/_variables.dark.scss
View File

@ -363,3 +363,10 @@ $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;
//Checkbox
// -------------------------
$checkbox-bg: $dark-1;
$checkbox-border: 1px solid $gray-2;
$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
$checkbox-color: $dark-1;

7
public/sass/_variables.light.scss
View File

@ -372,3 +372,10 @@ $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;
//Checkbox
// -------------------------
$checkbox-bg: $gray-6;
$checkbox-border: 1px solid $gray-3;
$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red);
$checkbox-color: $gray-7;

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

@ -142,3 +142,29 @@ input:checked + .gf-form-switch__slider {
input:checked + .gf-form-switch__slider::before {
transform: translateX(14px);
}
/* The Checkbox */
.gf-form-switch__checkbox {
position: absolute;
left: 16px;
height: 16px;
width: 16px;
border-radius: 3px;
border: $checkbox-border;
background: $checkbox-bg;
top: 8px;
display: flex;
justify-content: center;
align-items: center;
}
input:checked + .gf-form-switch__checkbox::before {
font-family: 'FontAwesome';
content: '\f00c';
color: $checkbox-color;
}
input:checked + .gf-form-switch__checkbox {
background: $checkbox-checked-bg;
border: none;
}