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

MDL-66770 theme: change switch styling from iOS to Material Design

Browse Source
This commit is contained in:
Ryan Wyllie
2019-11-01 13:17:24 +08:00
parent 9aa3a11d0e
commit 1dced2a410
4 changed files with 93 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mod/forum/templates/discussion_list.mustache
+2 -2
View File
@@ -290,7 +290,7 @@
{{#forum.capabilities.subscribe}}
<td class="text-center align-middle fit-content px-2">
{{#discussion}}
<span class="switch">
<span class="switch sr-only-label">
<input
type="checkbox"
id="subscription-toggle-{{id}}"
@@ -301,7 +301,7 @@
{{#userstate.subscribed}}data-targetstate="0" checked{{/userstate.subscribed}}
{{^userstate.subscribed}}data-targetstate="1"{{/userstate.subscribed}}
>
<label for="subscription-toggle-{{id}}" class="sr-only">
<label for="subscription-toggle-{{id}}">
{{#userstate.subscribed}}
{{#str}}unsubscribediscussion, forum{{/str}}
{{/userstate.subscribed}}
theme/boost/scss/moodle/core.scss
+41 -14
View File
@@ -2160,20 +2160,26 @@ div.editor_atto_toolbar button .icon {
$switch-height: 1.25rem !default;
$switch-height-half: ($switch-height / 2) !default;
$switch-width: ($switch-height * 2) !default;
$switch-border-radius: $switch-height !default;
$switch-bg: $gray-300 !default;
$switch-checked-bg: map-get($theme-colors, 'primary') !default;
$switch-bg-height: 1rem !default;
$switch-bg-height-half: ($switch-bg-height / 2) !default;
$switch-checked-bg: rgba(map-get($theme-colors, 'primary'), .4) !default;
$switch-checked-thumb-bg: map-get($theme-colors, 'primary') !default;
$switch-disabled-bg: $gray-200 !default;
$switch-disabled-color: $gray-600 !default;
$switch-disabled-thumb-bg: $gray-600 !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-thumb-size: $switch-height !default;
$switch-thumb-size-half: $switch-height-half !default;
$switch-focus-box-shadow: 0 0 0 ($input-btn-focus-width * 2) rgba(map-get($theme-colors, 'primary'), .25);
$switch-transition: .2s all !default;
.switch {
position: relative;
display: inline-block;
input {
float: left;
@@ -2182,48 +2188,52 @@ $switch-transition: .2s all !default;
padding: 0;
margin: 0;
opacity: 0;
line-height: $switch-height;
+ label {
position: relative;
min-height: $switch-height;
min-width: $switch-height * 2;
min-width: $switch-width;
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);
padding-left: ($switch-width + .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;
height: $switch-bg-height;
width: $switch-width;
top: calc(50% - #{$switch-bg-height-half});
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});
left: 0;
width: $switch-thumb-size;
height: $switch-thumb-size;
top: calc(50% - #{$switch-thumb-size-half});
border-radius: $switch-thumb-border-radius;
background-color: $switch-thumb-bg;
transition: $switch-transition;
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
&:checked + label::before {
@@ -2232,10 +2242,15 @@ $switch-transition: .2s all !default;
&:checked + label::after {
margin-left: $switch-height;
background-color: $switch-checked-thumb-bg;
}
&:focus + label::before {
outline: none;
}
&:focus + label::after {
outline: none;
box-shadow: $switch-focus-box-shadow;
}
@@ -2247,6 +2262,18 @@ $switch-transition: .2s all !default;
&:disabled + label::before {
background-color: $switch-disabled-bg;
}
&:disabled + label::after {
background-color: $switch-disabled-thumb-bg;
}
}
&.sr-only-label {
input + label {
text-indent: -9999px;
margin-bottom: 0;
padding-left: 0;
}
}
}
theme/boost/style/moodle.css
+25 -14
View File
@@ -11405,14 +11405,16 @@ div.editor_atto_toolbar button .icon {
display: none; }
.switch {
position: relative; }
position: relative;
display: inline-block; }
.switch input {
float: left;
width: 1px;
transform: translateX(1px);
padding: 0;
margin: 0;
opacity: 0; }
opacity: 0;
line-height: 1.25rem; }
.switch input + label {
position: relative;
min-height: 1.25rem;
@@ -11423,43 +11425,52 @@ div.editor_atto_toolbar button .icon {
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
padding-left: 3rem; }
.switch input + label::before,
.switch input + label::after {
content: '';
position: absolute;
top: calc(50% - 0.625rem);
left: 0;
width: 2.5rem;
height: 1.25rem;
bottom: 0;
display: block; }
.switch input + label::before {
right: 0;
height: 1rem;
width: 2.5rem;
top: calc(50% - 0.5rem);
background-color: #dee2e6;
border-radius: 1.25rem;
transition: 0.2s all; }
.switch input + label::after {
margin-top: 2px;
left: 2px;
width: calc(1.25rem - 4px);
height: calc(1.25rem - 4px);
left: 0;
width: 1.25rem;
height: 1.25rem;
top: calc(50% - 0.625rem);
border-radius: 50%;
background-color: #fff;
transition: 0.2s all; }
transition: 0.2s all;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
.switch input:checked + label::before {
background-color: #1177d1; }
background-color: rgba(17, 119, 209, 0.4); }
.switch input:checked + label::after {
margin-left: 1.25rem; }
margin-left: 1.25rem;
background-color: #1177d1; }
.switch input:focus + label::before {
outline: none; }
.switch input:focus + label::after {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
box-shadow: 0 0 0 0.4rem rgba(17, 119, 209, 0.25); }
.switch input:disabled + label {
color: #868e96;
cursor: not-allowed; }
.switch input:disabled + label::before {
background-color: #e9ecef; }
.switch input:disabled + label::after {
background-color: #868e96; }
.switch.sr-only-label input + label {
text-indent: -9999px;
margin-bottom: 0;
padding-left: 0; }
.paged-content-page-container {
min-height: 3.125rem; }
theme/classic/style/moodle.css
+25 -14
View File
@@ -11660,14 +11660,16 @@ div.editor_atto_toolbar button .icon {
display: none; }
.switch {
position: relative; }
position: relative;
display: inline-block; }
.switch input {
float: left;
width: 1px;
transform: translateX(1px);
padding: 0;
margin: 0;
opacity: 0; }
opacity: 0;
line-height: 1.25rem; }
.switch input + label {
position: relative;
min-height: 1.25rem;
@@ -11678,43 +11680,52 @@ div.editor_atto_toolbar button .icon {
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
padding-left: 3rem; }
.switch input + label::before,
.switch input + label::after {
content: '';
position: absolute;
top: calc(50% - 0.625rem);
left: 0;
width: 2.5rem;
height: 1.25rem;
bottom: 0;
display: block; }
.switch input + label::before {
right: 0;
height: 1rem;
width: 2.5rem;
top: calc(50% - 0.5rem);
background-color: #dee2e6;
border-radius: 1.25rem;
transition: 0.2s all; }
.switch input + label::after {
margin-top: 2px;
left: 2px;
width: calc(1.25rem - 4px);
height: calc(1.25rem - 4px);
left: 0;
width: 1.25rem;
height: 1.25rem;
top: calc(50% - 0.625rem);
border-radius: 50%;
background-color: #fff;
transition: 0.2s all; }
transition: 0.2s all;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
.switch input:checked + label::before {
background-color: #1177d1; }
background-color: rgba(17, 119, 209, 0.4); }
.switch input:checked + label::after {
margin-left: 1.25rem; }
margin-left: 1.25rem;
background-color: #1177d1; }
.switch input:focus + label::before {
outline: none; }
.switch input:focus + label::after {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
box-shadow: 0 0 0 0.4rem rgba(17, 119, 209, 0.25); }
.switch input:disabled + label {
color: #868e96;
cursor: not-allowed; }
.switch input:disabled + label::before {
background-color: #e9ecef; }
.switch input:disabled + label::after {
background-color: #868e96; }
.switch.sr-only-label input + label {
text-indent: -9999px;
margin-bottom: 0;
padding-left: 0; }
.paged-content-page-container {
min-height: 3.125rem; }