2020-08-05 01:26:37 +05:30
@ keyframes isloadingspin {
2020-08-26 01:18:53 +05:30
0 % { transform : translate ( -50 % , -50 % ) rotate ( 0 deg ) ; }
100 % { transform : translate ( -50 % , -50 % ) rotate ( 360 deg ) ; }
2020-08-05 01:26:37 +05:30
}
. is-loading {
2020-08-26 01:18:53 +05:30
pointer-events : none ! important ;
position : relative ! important ;
overflow : hidden ! important ;
2020-08-05 01:26:37 +05:30
}
2023-06-14 13:31:37 +05:30
. is-loading > * {
opacity : 0 . 3 ;
}
2020-11-10 23:58:07 +05:30
. is-loading :: after {
2020-08-26 01:18:53 +05:30
content : "" ;
position : absolute ;
display : block ;
left : 50 % ;
top : 50 % ;
2023-06-29 09:46:04 +05:30
height : min ( 4em , 66 . 6 % ) ;
aspect-ratio : 1 ;
2020-08-26 01:18:53 +05:30
transform : translate ( -50 % , -50 % ) ;
animation : isloadingspin 500ms infinite linear ;
border-width : 4px ;
border-style : solid ;
2022-10-12 21:56:27 +05:30
border-color : var ( --color-secondary ) var ( --color-secondary ) var ( --color-secondary-dark-8 ) var ( --color-secondary-dark-8 ) ;
2023-08-29 01:13:59 +05:30
border-radius : var ( --border-radius-circle ) ;
2020-08-05 01:26:37 +05:30
}
2023-06-14 13:31:37 +05:30
. is-loading . small-loading-icon :: after {
border-width : 2px ;
}
2023-06-29 09:46:04 +05:30
/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
form . single-button-form . is-loading > * {
opacity : 1 ;
}
form . single-button-form . is-loading . button {
color : transparent ;
}
2021-05-07 14:13:41 +05:30
. markup pre . is-loading ,
2023-05-29 17:40:00 +05:30
. editor-loading . is-loading ,
. pdf-content . is-loading {
2022-02-16 08:58:29 +05:30
height : var ( --height-loading ) ;
2020-08-05 01:26:37 +05:30
}
2021-11-16 13:46:05 +05:30
2023-06-19 13:30:18 +05:30
. markup . is-loading > * {
visibility : hidden ;
}
. markup . is-loading {
color : transparent ;
background : transparent ;
}
2023-06-14 13:31:37 +05:30
/* TODO: not needed, use "is-loading small-loading-icon" instead */
2022-09-13 22:03:37 +05:30
code . language-math . is-loading :: after {
padding : 0 ;
border-width : 2px ;
width : 1 . 25rem ;
height : 1 . 25rem ;
}
2021-11-16 13:46:05 +05:30
@ keyframes fadein {
0 % {
opacity : 0 ;
}
100 % {
opacity : 1 ;
}
}
@ keyframes fadeout {
0 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
2022-05-07 11:05:12 +05:30
@ keyframes pulse {
0 % {
transform : scale ( 1 ) ;
}
50 % {
transform : scale ( 1 . 8 ) ;
}
100 % {
transform : scale ( 1 ) ;
}
}
. pulse {
animation : pulse 2s linear ;
}
2023-08-17 03:42:40 +05:30
. ui . modal {
animation-name : fadein ;
animation-duration : 300ms ;
animation-timing-function : ease-in-out ;
}