mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-01-23 22:58:46 -05:00
Remove fomantic loader module (#26670)
Replace Fomantic `loader` CSS module with our existing `is-loading` spinner. Only three places in the UI used this module, which are pictured here: imagediff: <img width="1237" alt="Screenshot 2023-08-22 at 22 18 01" src="https://github.com/go-gitea/gitea/assets/115237/b0d82531-f05e-43c6-9e5b-1bfc268c056d"> webauthn: <img width="894" alt="Screenshot 2023-08-22 at 22 05 05" src="https://github.com/go-gitea/gitea/assets/115237/7b583425-d944-474a-a57a-22a65bbd8b29"> heatmap (I removed the previous loading text, it was unreadable because it was tiny and on fast machines only visible for a fraction of a second): <img width="764" alt="Screenshot 2023-08-22 at 22 18 44" src="https://github.com/go-gitea/gitea/assets/115237/1c7472d6-3e17-4224-a992-d8c0b380cc73"> Also, heatmap container does not resize any more after loading now and previous duplicate id `user-heatmap` is gone. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
GitHub
parent
f626366f53
commit
8b5c081d76
9 changed files with 25 additions and 993 deletions
|
|
@ -598,7 +598,6 @@ overview = Overview
|
|||
following = Following
|
||||
follow = Follow
|
||||
unfollow = Unfollow
|
||||
heatmap.loading = Loading Heatmap…
|
||||
user_bio = Biography
|
||||
disabled_public_activity = This user has disabled the public visibility of the activity.
|
||||
email_visibility.limited = Your email address is visible to all authenticated users
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
{{template "base/alert" .}}
|
||||
<p>{{.locale.Tr "webauthn_sign_in"}}</p>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<div class="ui active indeterminate inline loader"></div>
|
||||
<div class="ui attached segment gt-df gt-ac gt-jc gt-gap-2 gt-py-3">
|
||||
<div class="is-loading" style="width: 40px; height: 40px"></div>
|
||||
{{.locale.Tr "webauthn_press_button"}}
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
{{if .HeatmapData}}
|
||||
<div id="user-heatmap"
|
||||
<div id="user-heatmap" class="is-loading"
|
||||
data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
|
||||
data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}"
|
||||
data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
|
||||
data-locale-more="{{.locale.Tr "heatmap.more"}}"
|
||||
data-locale-less="{{.locale.Tr "heatmap.less"}}"
|
||||
>
|
||||
<div slot="loading">
|
||||
<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
></div>
|
||||
<div class="divider"></div>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,15 @@
|
|||
width: 100%;
|
||||
font-size: 9px;
|
||||
position: relative;
|
||||
min-height: 125px;
|
||||
}
|
||||
|
||||
/* before the Vue component is mounted, show a loading indicator with dummy size */
|
||||
/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */
|
||||
#user-heatmap.is-loading {
|
||||
aspect-ratio: 5.415; /* the size is about 790 x 145 */
|
||||
}
|
||||
.user.profile #user-heatmap.is-loading {
|
||||
aspect-ratio: 5.645; /* the size is about 953 x 169 */
|
||||
}
|
||||
|
||||
#user-heatmap text {
|
||||
|
|
@ -32,37 +40,15 @@
|
|||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#user-heatmap {
|
||||
min-height: 105px;
|
||||
}
|
||||
#user-heatmap .total-contributions {
|
||||
left: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
#user-heatmap {
|
||||
min-height: 80px;
|
||||
}
|
||||
#user-heatmap .total-contributions {
|
||||
font-size: 10px;
|
||||
left: 17px;
|
||||
bottom: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.user.profile #user-heatmap {
|
||||
min-height: 135px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.user.profile #user-heatmap {
|
||||
min-height: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.user.profile #user-heatmap {
|
||||
min-height: 90px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,10 +58,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.user.profile #loading-heatmap {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.user.profile .ui.secondary.stackable.pointing.menu {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
|
|||
942
web_src/fomantic/build/semantic.css
generated
942
web_src/fomantic/build/semantic.css
generated
|
|
@ -13544,948 +13544,6 @@ ol.ui.suffixed.list li:before,
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI - Loader
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Loader
|
||||
*******************************/
|
||||
|
||||
/* Standard Size */
|
||||
|
||||
.ui.loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
|
||||
.ui.loader:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
|
||||
.ui.loader:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-animation: loader 0.6s infinite linear;
|
||||
animation: loader 0.6s infinite linear;
|
||||
border: 0.2em solid #767676;
|
||||
border-radius: 500rem;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
/* Speeds */
|
||||
|
||||
.ui.fast.loading.loading:after,
|
||||
.ui.fast.loading.loading .input > i.icon:after,
|
||||
.ui.fast.loading.loading > i.icon:after,
|
||||
.ui.fast.loader:after {
|
||||
-webkit-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
.ui.slow.loading.loading:after,
|
||||
.ui.slow.loading.loading .input > i.icon:after,
|
||||
.ui.slow.loading.loading > i.icon:after,
|
||||
.ui.slow.loader:after {
|
||||
-webkit-animation-duration: 0.9s;
|
||||
animation-duration: 0.9s;
|
||||
}
|
||||
|
||||
/* Active Animation */
|
||||
|
||||
@-webkit-keyframes loader {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Coupling
|
||||
--------------------*/
|
||||
|
||||
/* Show inside active dimmer */
|
||||
|
||||
.ui.dimmer > .loader {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Black Dimmer */
|
||||
|
||||
.ui.dimmer > .ui.loader {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.ui.dimmer > .ui.loader:not(.elastic):before {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* White Dimmer (Inverted) */
|
||||
|
||||
.ui.inverted.dimmer > .ui.loader {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Text
|
||||
--------------------*/
|
||||
|
||||
.ui.ui.ui.ui.text.loader {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.indeterminate.loader:after {
|
||||
animation-direction: reverse;
|
||||
-webkit-animation-duration: 1.2s;
|
||||
animation-duration: 1.2s;
|
||||
}
|
||||
|
||||
.ui.loader.active,
|
||||
.ui.loader.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.loader.disabled,
|
||||
.ui.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.loader {
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.loader:before,
|
||||
.ui.loader:after {
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
margin: 0 0 0 -1.14285714rem;
|
||||
}
|
||||
|
||||
.ui.text.loader {
|
||||
min-width: 2.28571429rem;
|
||||
padding-top: 3.07142857rem;
|
||||
}
|
||||
|
||||
.ui.mini.loader {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
|
||||
.ui.mini.loader:before,
|
||||
.ui.mini.loader:after {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0 0 0 -0.5rem;
|
||||
}
|
||||
|
||||
.ui.mini.text.loader {
|
||||
min-width: 1rem;
|
||||
padding-top: 1.78571429rem;
|
||||
}
|
||||
|
||||
.ui.tiny.loader {
|
||||
width: 1.14285714rem;
|
||||
height: 1.14285714rem;
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.tiny.loader:before,
|
||||
.ui.tiny.loader:after {
|
||||
width: 1.14285714rem;
|
||||
height: 1.14285714rem;
|
||||
margin: 0 0 0 -0.57142857rem;
|
||||
}
|
||||
|
||||
.ui.tiny.text.loader {
|
||||
min-width: 1.14285714rem;
|
||||
padding-top: 1.92857143rem;
|
||||
}
|
||||
|
||||
.ui.small.loader {
|
||||
width: 1.71428571rem;
|
||||
height: 1.71428571rem;
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
|
||||
.ui.small.loader:before,
|
||||
.ui.small.loader:after {
|
||||
width: 1.71428571rem;
|
||||
height: 1.71428571rem;
|
||||
margin: 0 0 0 -0.85714286rem;
|
||||
}
|
||||
|
||||
.ui.small.text.loader {
|
||||
min-width: 1.71428571rem;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.ui.large.loader {
|
||||
width: 3.42857143rem;
|
||||
height: 3.42857143rem;
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
|
||||
.ui.large.loader:before,
|
||||
.ui.large.loader:after {
|
||||
width: 3.42857143rem;
|
||||
height: 3.42857143rem;
|
||||
margin: 0 0 0 -1.71428571rem;
|
||||
}
|
||||
|
||||
.ui.large.text.loader {
|
||||
min-width: 3.42857143rem;
|
||||
padding-top: 4.21428571rem;
|
||||
}
|
||||
|
||||
.ui.big.loader {
|
||||
width: 3.71428571rem;
|
||||
height: 3.71428571rem;
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
.ui.big.loader:before,
|
||||
.ui.big.loader:after {
|
||||
width: 3.71428571rem;
|
||||
height: 3.71428571rem;
|
||||
margin: 0 0 0 -1.85714286rem;
|
||||
}
|
||||
|
||||
.ui.big.text.loader {
|
||||
min-width: 3.71428571rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
|
||||
.ui.huge.loader {
|
||||
width: 4.14285714rem;
|
||||
height: 4.14285714rem;
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
|
||||
.ui.huge.loader:before,
|
||||
.ui.huge.loader:after {
|
||||
width: 4.14285714rem;
|
||||
height: 4.14285714rem;
|
||||
margin: 0 0 0 -2.07142857rem;
|
||||
}
|
||||
|
||||
.ui.huge.text.loader {
|
||||
min-width: 4.14285714rem;
|
||||
padding-top: 4.92857143rem;
|
||||
}
|
||||
|
||||
.ui.massive.loader {
|
||||
width: 4.57142857rem;
|
||||
height: 4.57142857rem;
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
|
||||
.ui.massive.loader:before,
|
||||
.ui.massive.loader:after {
|
||||
width: 4.57142857rem;
|
||||
height: 4.57142857rem;
|
||||
margin: 0 0 0 -2.28571429rem;
|
||||
}
|
||||
|
||||
.ui.massive.text.loader {
|
||||
min-width: 4.57142857rem;
|
||||
padding-top: 5.35714286rem;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
.ui.primary.elastic.loader.loader:before,
|
||||
.ui.primary.basic.elastic.loading.button:before,
|
||||
.ui.primary.basic.elastic.loading.button:after,
|
||||
.ui.primary.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.primary.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.primary.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.primary.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.primary.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.primary.loader.loader.loader:after {
|
||||
color: #2185D0;
|
||||
}
|
||||
|
||||
.ui.inverted.primary.elastic.loader:before,
|
||||
.ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.primary.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.primary.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.primary.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.primary.loader.loader.loader:after {
|
||||
color: #54C8FF;
|
||||
}
|
||||
|
||||
.ui.secondary.elastic.loader.loader:before,
|
||||
.ui.secondary.basic.elastic.loading.button:before,
|
||||
.ui.secondary.basic.elastic.loading.button:after,
|
||||
.ui.secondary.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.secondary.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.secondary.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.secondary.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.secondary.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.secondary.loader.loader.loader:after {
|
||||
color: #1B1C1D;
|
||||
}
|
||||
|
||||
.ui.inverted.secondary.elastic.loader:before,
|
||||
.ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.secondary.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.secondary.loader.loader.loader:after {
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
.ui.red.elastic.loader.loader:before,
|
||||
.ui.red.basic.elastic.loading.button:before,
|
||||
.ui.red.basic.elastic.loading.button:after,
|
||||
.ui.red.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.red.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.red.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.red.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.red.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.red.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.red.loader.loader.loader:after {
|
||||
color: #DB2828;
|
||||
}
|
||||
|
||||
.ui.inverted.red.elastic.loader:before,
|
||||
.ui.inverted.red.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.red.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.red.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.red.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.red.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.red.loader.loader.loader:after {
|
||||
color: #FF695E;
|
||||
}
|
||||
|
||||
.ui.orange.elastic.loader.loader:before,
|
||||
.ui.orange.basic.elastic.loading.button:before,
|
||||
.ui.orange.basic.elastic.loading.button:after,
|
||||
.ui.orange.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.orange.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.orange.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.orange.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.orange.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.orange.loader.loader.loader:after {
|
||||
color: #F2711C;
|
||||
}
|
||||
|
||||
.ui.inverted.orange.elastic.loader:before,
|
||||
.ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.orange.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.orange.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.orange.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.orange.loader.loader.loader:after {
|
||||
color: #FF851B;
|
||||
}
|
||||
|
||||
.ui.yellow.elastic.loader.loader:before,
|
||||
.ui.yellow.basic.elastic.loading.button:before,
|
||||
.ui.yellow.basic.elastic.loading.button:after,
|
||||
.ui.yellow.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.yellow.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.yellow.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.yellow.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.yellow.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.yellow.loader.loader.loader:after {
|
||||
color: #FBBD08;
|
||||
}
|
||||
|
||||
.ui.inverted.yellow.elastic.loader:before,
|
||||
.ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.yellow.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.yellow.loader.loader.loader:after {
|
||||
color: #FFE21F;
|
||||
}
|
||||
|
||||
.ui.olive.elastic.loader.loader:before,
|
||||
.ui.olive.basic.elastic.loading.button:before,
|
||||
.ui.olive.basic.elastic.loading.button:after,
|
||||
.ui.olive.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.olive.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.olive.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.olive.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.olive.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.olive.loader.loader.loader:after {
|
||||
color: #B5CC18;
|
||||
}
|
||||
|
||||
.ui.inverted.olive.elastic.loader:before,
|
||||
.ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.olive.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.olive.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.olive.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.olive.loader.loader.loader:after {
|
||||
color: #D9E778;
|
||||
}
|
||||
|
||||
.ui.green.elastic.loader.loader:before,
|
||||
.ui.green.basic.elastic.loading.button:before,
|
||||
.ui.green.basic.elastic.loading.button:after,
|
||||
.ui.green.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.green.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.green.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.green.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.green.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.green.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.green.loader.loader.loader:after {
|
||||
color: #21BA45;
|
||||
}
|
||||
|
||||
.ui.inverted.green.elastic.loader:before,
|
||||
.ui.inverted.green.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.green.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.green.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.green.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.green.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.green.loader.loader.loader:after {
|
||||
color: #2ECC40;
|
||||
}
|
||||
|
||||
.ui.teal.elastic.loader.loader:before,
|
||||
.ui.teal.basic.elastic.loading.button:before,
|
||||
.ui.teal.basic.elastic.loading.button:after,
|
||||
.ui.teal.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.teal.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.teal.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.teal.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.teal.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.teal.loader.loader.loader:after {
|
||||
color: #00B5AD;
|
||||
}
|
||||
|
||||
.ui.inverted.teal.elastic.loader:before,
|
||||
.ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.teal.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.teal.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.teal.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.teal.loader.loader.loader:after {
|
||||
color: #6DFFFF;
|
||||
}
|
||||
|
||||
.ui.blue.elastic.loader.loader:before,
|
||||
.ui.blue.basic.elastic.loading.button:before,
|
||||
.ui.blue.basic.elastic.loading.button:after,
|
||||
.ui.blue.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.blue.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.blue.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.blue.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.blue.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.blue.loader.loader.loader:after {
|
||||
color: #2185D0;
|
||||
}
|
||||
|
||||
.ui.inverted.blue.elastic.loader:before,
|
||||
.ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.blue.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.blue.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.blue.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.blue.loader.loader.loader:after {
|
||||
color: #54C8FF;
|
||||
}
|
||||
|
||||
.ui.violet.elastic.loader.loader:before,
|
||||
.ui.violet.basic.elastic.loading.button:before,
|
||||
.ui.violet.basic.elastic.loading.button:after,
|
||||
.ui.violet.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.violet.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.violet.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.violet.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.violet.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.violet.loader.loader.loader:after {
|
||||
color: #6435C9;
|
||||
}
|
||||
|
||||
.ui.inverted.violet.elastic.loader:before,
|
||||
.ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.violet.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.violet.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.violet.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.violet.loader.loader.loader:after {
|
||||
color: #A291FB;
|
||||
}
|
||||
|
||||
.ui.purple.elastic.loader.loader:before,
|
||||
.ui.purple.basic.elastic.loading.button:before,
|
||||
.ui.purple.basic.elastic.loading.button:after,
|
||||
.ui.purple.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.purple.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.purple.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.purple.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.purple.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.purple.loader.loader.loader:after {
|
||||
color: #A333C8;
|
||||
}
|
||||
|
||||
.ui.inverted.purple.elastic.loader:before,
|
||||
.ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.purple.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.purple.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.purple.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.purple.loader.loader.loader:after {
|
||||
color: #DC73FF;
|
||||
}
|
||||
|
||||
.ui.pink.elastic.loader.loader:before,
|
||||
.ui.pink.basic.elastic.loading.button:before,
|
||||
.ui.pink.basic.elastic.loading.button:after,
|
||||
.ui.pink.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.pink.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.pink.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.pink.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.pink.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.pink.loader.loader.loader:after {
|
||||
color: #E03997;
|
||||
}
|
||||
|
||||
.ui.inverted.pink.elastic.loader:before,
|
||||
.ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.pink.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.pink.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.pink.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.pink.loader.loader.loader:after {
|
||||
color: #FF8EDF;
|
||||
}
|
||||
|
||||
.ui.brown.elastic.loader.loader:before,
|
||||
.ui.brown.basic.elastic.loading.button:before,
|
||||
.ui.brown.basic.elastic.loading.button:after,
|
||||
.ui.brown.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.brown.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.brown.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.brown.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.brown.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.brown.loader.loader.loader:after {
|
||||
color: #A5673F;
|
||||
}
|
||||
|
||||
.ui.inverted.brown.elastic.loader:before,
|
||||
.ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.brown.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.brown.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.brown.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.brown.loader.loader.loader:after {
|
||||
color: #D67C1C;
|
||||
}
|
||||
|
||||
.ui.grey.elastic.loader.loader:before,
|
||||
.ui.grey.basic.elastic.loading.button:before,
|
||||
.ui.grey.basic.elastic.loading.button:after,
|
||||
.ui.grey.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.grey.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.grey.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.grey.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.grey.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.grey.loader.loader.loader:after {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.ui.inverted.grey.elastic.loader:before,
|
||||
.ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.grey.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.grey.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.grey.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.grey.loader.loader.loader:after {
|
||||
color: #DCDDDE;
|
||||
}
|
||||
|
||||
.ui.black.elastic.loader.loader:before,
|
||||
.ui.black.basic.elastic.loading.button:before,
|
||||
.ui.black.basic.elastic.loading.button:after,
|
||||
.ui.black.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.black.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.black.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.black.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.black.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.black.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.black.loader.loader.loader:after {
|
||||
color: #1B1C1D;
|
||||
}
|
||||
|
||||
.ui.inverted.black.elastic.loader:before,
|
||||
.ui.inverted.black.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.black.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.black.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.black.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.black.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.black.loader.loader.loader:after {
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
.ui.elastic.loader.loader:before,
|
||||
.ui.elastic.loading.loading.loading:before,
|
||||
.ui.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.loader.loader.loader:after {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.ui.elastic.basic.loading.button:before,
|
||||
.ui.elastic.basic.loading.button:after {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.ui.double.loading.loading.loading.loading.button:after {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Inline
|
||||
--------------------*/
|
||||
|
||||
.ui.inline.loader {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.inline.loader.active,
|
||||
.ui.inline.loader.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Centered Inline */
|
||||
|
||||
.ui.centered.inline.loader.active,
|
||||
.ui.centered.inline.loader.visible {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.loading.loading.loading.loading.loading.loading:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.loader.loader.loader.loader.loader:after {
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
|
||||
.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.ui.loading.loading.loading.loading.loading.loading.segment:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.form:after {
|
||||
border-left-color: rgba(0, 0, 0, 0.1);
|
||||
border-right-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Elastic
|
||||
--------------------*/
|
||||
|
||||
.ui.dimmer > .ui.elastic.loader {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.ui.inverted.dimmer > .ui.elastic.loader {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.ui.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.elastic.loading.loading > i.icon:after,
|
||||
.ui.elastic.loader.loader:after {
|
||||
-webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
-webkit-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.elastic.loader.loader:before {
|
||||
-webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
-moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ui.elastic.inline.loader:empty {
|
||||
-webkit-animation: loader 8s infinite linear;
|
||||
animation: loader 8s infinite linear;
|
||||
}
|
||||
|
||||
.ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.slow.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.slow.elastic.loading.loading > i.icon:after,
|
||||
.ui.slow.elastic.loader.loader:after {
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
-webkit-animation-delay: 0.45s;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.slow.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.slow.elastic.loader.loader:before {
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
.ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.fast.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.fast.elastic.loading.loading > i.icon:after,
|
||||
.ui.fast.elastic.loader.loader:after {
|
||||
-webkit-animation-duration: 0.66s;
|
||||
animation-duration: 0.66s;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.fast.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.fast.elastic.loader.loader:before {
|
||||
-webkit-animation-duration: 0.66s;
|
||||
animation-duration: 0.66s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
1.1%, 50% {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
|
||||
10%, 35.1% {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
10.1%, 35% {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
50.1% {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
1.1%, 50% {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
|
||||
10%, 35.1% {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
10.1%, 35% {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
50.1% {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes currentcolor-elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
1.1%, 50% {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
10%, 35.1% {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
10.1%, 35% {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
50.1% {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes currentcolor-elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
1.1%, 50% {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
10%, 35.1% {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
10.1%, 35% {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
50.1% {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*
|
||||
* # Fomantic - Menu
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@
|
|||
"item",
|
||||
"label",
|
||||
"list",
|
||||
"loader",
|
||||
"menu",
|
||||
"message",
|
||||
"modal",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<div id="user-heatmap">
|
||||
<div class="total-contributions">
|
||||
{{ locale.contributions_in_the_last_12_months }}
|
||||
</div>
|
||||
|
|
@ -12,7 +11,6 @@
|
|||
:range-color="colorRange"
|
||||
@day-click="handleDayClick($event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {CalendarHeatmap} from 'vue3-calendar-heatmap';
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export function initHeatmap() {
|
|||
};
|
||||
|
||||
const View = createApp(ActivityHeatmap, {values, locale});
|
||||
|
||||
View.mount(el);
|
||||
el.classList.remove('is-loading');
|
||||
} catch (err) {
|
||||
console.error('Heatmap failed to load', err);
|
||||
el.textContent = 'Heatmap failed to load';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue