mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-22 08:55:15 +02:00
Code Issues Projects Releases Wiki Activity

MDL-72910 theme: define $drawer-transition and use the transition mixin

Browse Source
This commit is contained in:
Shamim Rezaie 2021-11-29 16:46:41 +11:00
parent f4516e8cbd
commit 7c8a3636d7
4 changed files with 75 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
theme/boost/scss/moodle/drawer.scss
View File

@ -10,6 +10,7 @@ $drawer-offscreen-gutter: 20px !default;
$drawer-bg-color: $gray-100 !default;
$drawer-scroll-bg-track: $gray-100 !default;
$drawer-shadow-color: rgba(0, 0, 0, .25) !default;
$drawer-transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease !default;
:target {
scroll-margin-top: $fixed-header-y + 10px;
@ -40,9 +41,7 @@ $drawer-bg: darken($body-bg, 5%) !default;
-webkit-overflow-scrolling: touch;
z-index: $zindex-dropdown - 1;
background-color: $drawer-bg;
-webkit-transition: right 0.5s ease, left 0.5s ease;
-moz-transition: right 0.5s ease, left 0.5s ease;
transition: right 0.5s ease, left 0.5s ease;
@include transition(right 0.5s ease, left 0.5s ease);
}
@include media-breakpoint-up(sm) {
@ -50,7 +49,7 @@ $drawer-bg: darken($body-bg, 5%) !default;
padding: $drawer-padding-x $drawer-padding-y;
}
.jsenabled .btn-footer-popover {
transition: 0.2s;
@include transition($drawer-transition);
}
}
#nav-drawer {
@ -91,9 +90,7 @@ $drawer-bg: darken($body-bg, 5%) !default;
margin-top: 0;
}
body.drawer-ease {
-webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
transition: margin-left 0.5s ease, margin-right 0.5s ease;
@include transition(margin-left 0.5s ease, margin-right 0.5s ease);
}
body:not(.uses-drawers).drawer-open-left {
@ -168,7 +165,7 @@ $right-drawer-width: 320px;
}
@mixin drawer() {
transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease;
@include transition($drawer-transition);
background-color: $drawer-bg-color;
z-index: $zindex-modal;
position: fixed;

4
theme/boost/scss/moodle/layout.scss
View File

@ -5,7 +5,7 @@
top: 0;
left: 0;
z-index: $zindex-modal-backdrop;
transition: 0.5s;
@include transition(0.5s);
width: 100vw;
margin: 0;
opacity: 1;
@ -151,7 +151,7 @@
#page.drawers {
position: relative;
overflow-y: auto;
transition: 0.2s;
@include transition(0.2s);
height: calc(100vh - #{$navbar-height});
margin-top: $navbar-height;
left: 0;

42
theme/boost/style/moodle.css
View File

@ -14660,15 +14660,19 @@ span.editinstructions {
-webkit-overflow-scrolling: touch;
z-index: 999;
background-color: #f2f2f2;
-webkit-transition: right 0.5s ease, left 0.5s ease;
-moz-transition: right 0.5s ease, left 0.5s ease;
transition: right 0.5s ease, left 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
[data-region="drawer"] {
transition: none; } }
@media (min-width: 576px) {
[data-region="drawer"] {
padding: 20px 20px; }
.jsenabled .btn-footer-popover {
transition: 0.2s; } }
transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; } }
@media (min-width: 576px) and (prefers-reduced-motion: reduce) {
.jsenabled .btn-footer-popover {
transition: none; } }
#nav-drawer {
right: auto;
@ -14697,9 +14701,10 @@ span.editinstructions {
margin-top: 0; }
body.drawer-ease {
-webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
transition: margin-left 0.5s ease, margin-right 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
body.drawer-ease {
transition: none; } }
@media (min-width: 768px) {
body:not(.uses-drawers).drawer-open-left {
@ -14761,6 +14766,9 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
@media (prefers-reduced-motion: reduce) {
.drawer {
transition: none; } }
.drawer.drawer-right {
width: 315px;
max-width: 315px;
@ -14809,7 +14817,12 @@ body.drawer-ease {
z-index: 1050;
position: fixed;
height: 100vh;
top: 0; }
top: 0; } }
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
.drawer-md {
transition: none; } }
@media (max-width: 991.98px) {
.drawer-md.drawer-right {
width: 315px;
max-width: 315px;
@ -14841,7 +14854,12 @@ body.drawer-ease {
z-index: 1050;
position: fixed;
height: 100vh;
top: 0; }
top: 0; } }
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
.drawer-sm {
transition: none; } }
@media (max-width: 767.98px) {
.drawer-sm.drawer-right {
width: 315px;
max-width: 315px;
@ -20026,6 +20044,9 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
margin: 0;
opacity: 1;
background-color: #fff; }
@media (prefers-reduced-motion: reduce) {
.layout.fullscreen {
transition: none; } }
.layout.fullscreen > div {
height: 100%;
width: 100%; }
@ -20127,7 +20148,12 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
height: calc(100vh - 60px);
margin-top: 60px;
left: 0;
right: 0; }
right: 0; } }
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
#page.drawers {
transition: none; } }
@media (min-width: 992px) {
#page.drawers.show-drawer-left {
margin-left: 285px;
margin-right: 0;

42
theme/classic/style/moodle.css
View File

@ -14660,15 +14660,19 @@ span.editinstructions {
-webkit-overflow-scrolling: touch;
z-index: 999;
background-color: #f2f2f2;
-webkit-transition: right 0.5s ease, left 0.5s ease;
-moz-transition: right 0.5s ease, left 0.5s ease;
transition: right 0.5s ease, left 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
[data-region="drawer"] {
transition: none; } }
@media (min-width: 576px) {
[data-region="drawer"] {
padding: 20px 20px; }
.jsenabled .btn-footer-popover {
transition: 0.2s; } }
transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; } }
@media (min-width: 576px) and (prefers-reduced-motion: reduce) {
.jsenabled .btn-footer-popover {
transition: none; } }
#nav-drawer {
right: auto;
@ -14697,9 +14701,10 @@ span.editinstructions {
margin-top: 0; }
body.drawer-ease {
-webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
transition: margin-left 0.5s ease, margin-right 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
body.drawer-ease {
transition: none; } }
@media (min-width: 768px) {
body:not(.uses-drawers).drawer-open-left {
@ -14761,6 +14766,9 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
@media (prefers-reduced-motion: reduce) {
.drawer {
transition: none; } }
.drawer.drawer-right {
width: 315px;
max-width: 315px;
@ -14809,7 +14817,12 @@ body.drawer-ease {
z-index: 1050;
position: fixed;
height: 100vh;
top: 0; }
top: 0; } }
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
.drawer-md {
transition: none; } }
@media (max-width: 991.98px) {
.drawer-md.drawer-right {
width: 315px;
max-width: 315px;
@ -14841,7 +14854,12 @@ body.drawer-ease {
z-index: 1050;
position: fixed;
height: 100vh;
top: 0; }
top: 0; } }
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
.drawer-sm {
transition: none; } }
@media (max-width: 767.98px) {
.drawer-sm.drawer-right {
width: 315px;
max-width: 315px;
@ -19972,6 +19990,9 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
margin: 0;
opacity: 1;
background-color: #fff; }
@media (prefers-reduced-motion: reduce) {
.layout.fullscreen {
transition: none; } }
.layout.fullscreen > div {
height: 100%;
width: 100%; }
@ -20073,7 +20094,12 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
height: calc(100vh - 50px);
margin-top: 50px;
left: 0;
right: 0; }
right: 0; } }
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
#page.drawers {
transition: none; } }
@media (min-width: 992px) {
#page.drawers.show-drawer-left {
margin-left: 285px;
margin-right: 0;