L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-63303 theme_boost: add switch styling for checkbox

Browse Source
This commit is contained in:
Ryan Wyllie
2018-11-15 14:40:11 +08:00
parent 7b91dcf264
commit a69193fa70
2 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/boost/scss/moodle/core.scss
+96
View File
@@ -2149,3 +2149,99 @@ div.editor_atto_toolbar button .icon {
display: none;
}
}
$switch-height: ($input-height-inner * .8) !default;
$switch-height-half: ($switch-height / 2) !default;
$switch-border-radius: $switch-height !default;
$switch-bg: $custom-control-indicator-bg !default;
$switch-checked-bg: map-get($theme-colors, 'primary') !default;
$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
$switch-disabled-color: $custom-control-label-disabled-color !default;
$switch-thumb-bg: $white !default;
$switch-thumb-border-radius: 50% !default;
$switch-thumb-padding: 2px !default;
$switch-thumb-padding-double: ($switch-thumb-padding * 2) !default;
$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
$switch-transition: .2s all !default;
.switch {
position: relative;
input {
position: absolute;
height: 1px;
width: 1px;
background: none;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
padding: 0;
+ label {
position: relative;
min-height: $switch-height;
min-width: $switch-height * 2;
line-height: $switch-height;
border-radius: $switch-border-radius;
display: inline-block;
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
padding-left: (($switch-height * 2) + .5rem);
}
+ label::before,
+ label::after {
content: '';
position: absolute;
top: calc(50% - #{$switch-height-half});
left: 0;
width: ($switch-height * 2);
height: $switch-height;
bottom: 0;
display: block;
}
+ label::before {
right: 0;
background-color: $switch-bg;
border-radius: $switch-border-radius;
transition: $switch-transition;
}
+ label::after {
margin-top: $switch-thumb-padding;
left: $switch-thumb-padding;
width: calc(#{$switch-height} - #{$switch-thumb-padding-double});
height: calc(#{$switch-height} - #{$switch-thumb-padding-double});
border-radius: $switch-thumb-border-radius;
background-color: $switch-thumb-bg;
transition: $switch-transition;
}
&:checked + label::before {
background-color: $switch-checked-bg;
}
&:checked + label::after {
margin-left: $switch-height;
}
&:focus + label::before {
outline: none;
box-shadow: $switch-focus-box-shadow;
}
&:disabled + label {
color: $switch-disabled-color;
cursor: not-allowed;
}
&:disabled + label::before {
background-color: $switch-disabled-bg;
}
}
}
theme/boost/style/moodle.css
+60
View File
@@ -10468,6 +10468,66 @@ div.editor_atto_toolbar button .icon {
.dir-ltr .dir-ltr-hide {
display: none; }
.switch {
position: relative; }
.switch input {
position: absolute;
height: 1px;
width: 1px;
background: none;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
padding: 0; }
.switch input + label {
position: relative;
min-height: 1.725rem;
min-width: 3.45rem;
line-height: 1.725rem;
border-radius: 1.725rem;
display: inline-block;
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
padding-left: 3.95rem; }
.switch input + label::before,
.switch input + label::after {
content: '';
position: absolute;
top: calc(50% - 0.8625rem);
left: 0;
width: 3.45rem;
height: 1.725rem;
bottom: 0;
display: block; }
.switch input + label::before {
right: 0;
background-color: #dee2e6;
border-radius: 1.725rem;
transition: 0.2s all; }
.switch input + label::after {
margin-top: 2px;
left: 2px;
width: calc(1.725rem - 4px);
height: calc(1.725rem - 4px);
border-radius: 50%;
background-color: #fff;
transition: 0.2s all; }
.switch input:checked + label::before {
background-color: #1177d1; }
.switch input:checked + label::after {
margin-left: 1.725rem; }
.switch input:focus + label::before {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
.switch input:disabled + label {
color: #868e96;
cursor: not-allowed; }
.switch input:disabled + label::before {
background-color: #e9ecef; }
.icon {
font-size: 16px;
width: 16px;