Ghost/ghost/admin/app/styles/patterns/throbber.css
Kevin Ansfield 6bff262849 Switch to packaged version of Spirit (#985)
no issue
- remove the manually copied Spirit CSS files
- remove the manually copied Spirit helpers
- install `ember-cli-ghost-spirit` addon
- remove manual postcss configuration
- update all `color()` functions in CSS to `color-mod()`
- fixed invalid `color-mod()` usage in `power-calendar.css`
- bump sub-dependencies
2018-04-03 11:52:18 +01:00

71 lines
1.5 KiB
CSS

/* ------------------------------------------------------------
Throbber
Pulsing little circle which indicates a tour is available
------------------------------------------------------------ */
/* click-area for triggering the popover */
.throbber-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.throbber {
position: relative;
display: block;
width: 14px;
height: 14px;
background: color-mod(var(--blue) alpha(0.9));
border-radius: 100%;
box-shadow: color-mod(var(--blue) alpha(0.9)) 0 0 0 2px;
}
.throbber:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
margin: -13px 0 0 -13px;
width: 26px;
height: 26px;
border: rgba(255,255,255,0.1) 2px solid;
background: rgba(255,255,255,0.4);
border-radius: 100%;
box-shadow: color-mod(var(--blue) alpha(0.7)) 0 0 0 2px;
animation-name: throbber-pulse, throbber-fade;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 0.2s;
pointer-events: none;
}
@keyframes throbber-fade {
0%,
100% {
opacity: 0.5;
}
40%,
60% {
opacity: 0.8;
}
}
@keyframes throbber-pulse {
0% {
transform: scale3d(0.5, 0.5, 1);
}
50% {
transform: scale3d(1, 1, 1);
}
100% {
transform: scale3d(0.5, 0.5, 1);
}
}