moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-72776 theme_boost: new editing progress effect

Browse source
This commit is contained in:
Ferran Recio 2021-11-03 09:47:02 +01:00
parent d135a1200a
commit 675f8e24ca
11 changed files with 139 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

55
theme/boost/scss/moodle/course.scss
View file

@ -1,7 +1,5 @@
/* course.less */
$course-editinprogress-bg: $gray-100 !default;
/* COURSE CONTENT */
.section_add_menus {
@ -189,24 +187,59 @@ body:not(.editing) .sitetopic ul.section {
}
}
}
// Remove old spinners if the reactive state is ready.
.course-content .stateready .section .spinner {
display: none;
}
// New editing in progress spinners.
.editinprogress {
opacity: .7;
animation: editinprogress-pulse 2s infinite linear;
position: relative;
& > * {
opacity: .4;
}
.corelightbox,
.lightbox {
display: none;
}
&:after {
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
color: $gray-600;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
left: calc(50% - 15px);
top: calc(50% - 15px);
animation: editinprogress-rotation 2s infinite linear;
}
// Prevent inner editingprogress.
.editinprogress {
&:after {
display: none;
}
}
}
}
@keyframes editinprogress-pulse {
@keyframes editinprogress-rotation {
0% {
background-color: $course-editinprogress-bg;
filter: grayscale(60%);
opacity: 0;
transform: rotate(0deg);
}
50% {
background-color: darken($course-editinprogress-bg, 5%);
filter: grayscale(40%);
opacity: 1;
}
100% {
background-color: $course-editinprogress-bg;
filter: grayscale(60%);
opacity: 0;
transform: rotate(359deg);
}
}

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

@ -13774,20 +13774,42 @@ body:not(.editing) .sitetopic ul.section {
*/
padding-left: 2rem; }
.editing .editinprogress {
opacity: .7;
animation: editinprogress-pulse 2s infinite linear; }
.editing .course-content .stateready .section .spinner {
display: none; }
@keyframes editinprogress-pulse {
.editing .editinprogress {
position: relative; }
.editing .editinprogress > * {
opacity: .4; }
.editing .editinprogress .corelightbox,
.editing .editinprogress .lightbox {
display: none; }
.editing .editinprogress:after {
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
color: #6a737b;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
left: calc(50% - 15px);
top: calc(50% - 15px);
animation: editinprogress-rotation 2s infinite linear; }
.editing .editinprogress .editinprogress:after {
display: none; }
@keyframes editinprogress-rotation {
0% {
background-color: #f8f9fa;
filter: grayscale(60%); }
opacity: 0;
transform: rotate(0deg); }
50% {
background-color: #e9ecef;
filter: grayscale(40%); }
opacity: 1; }
100% {
background-color: #f8f9fa;
filter: grayscale(60%); } }
opacity: 0;
transform: rotate(359deg); } }
.editing_show + .editing_assign,
.editing_hide + .editing_assign {

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

@ -13774,20 +13774,42 @@ body:not(.editing) .sitetopic ul.section {
*/
padding-left: 2rem; }
.editing .editinprogress {
opacity: .7;
animation: editinprogress-pulse 2s infinite linear; }
.editing .course-content .stateready .section .spinner {
display: none; }
@keyframes editinprogress-pulse {
.editing .editinprogress {
position: relative; }
.editing .editinprogress > * {
opacity: .4; }
.editing .editinprogress .corelightbox,
.editing .editinprogress .lightbox {
display: none; }
.editing .editinprogress:after {
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
color: #6a737b;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
left: calc(50% - 15px);
top: calc(50% - 15px);
animation: editinprogress-rotation 2s infinite linear; }
.editing .editinprogress .editinprogress:after {
display: none; }
@keyframes editinprogress-rotation {
0% {
background-color: #f8f9fa;
filter: grayscale(60%); }
opacity: 0;
transform: rotate(0deg); }
50% {
background-color: #e9ecef;
filter: grayscale(40%); }
opacity: 1; }
100% {
background-color: #f8f9fa;
filter: grayscale(60%); } }
opacity: 0;
transform: rotate(359deg); } }
.editing_show + .editing_assign,
.editing_hide + .editing_assign {