vue-cesium/theme-default/vc-fab.css

Vue 3.x components for CesiumJS.

.z-fab{z-index:990}.vc-fab{position:relative;vertical-align:middle}.vc-fab>.vc-btn{width:100%}.vc-fab--form-rounded{border-radius:28px}.vc-fab--form-square{border-radius:4px}.vc-fab--opened .vc-fab__actions{opacity:1;transform:scale(1) translate(0,0);pointer-events:all}.vc-fab--opened .vc-fab__icon{transform:rotate(180deg);opacity:0}.vc-fab--opened .vc-fab__active-icon{transform:rotate(0);opacity:1}.vc-fab__active-icon,.vc-fab__icon{transition:opacity .4s,transform .4s}.vc-fab__icon{opacity:1;transform:rotate(0)}.vc-fab__active-icon{opacity:0;transform:rotate(-180deg)}.vc-fab__label--external{position:absolute;padding:0 8px;transition:opacity .18s cubic-bezier(.65,.815,.735,.395)}.vc-fab__label--external-hidden{opacity:0;pointer-events:none}.vc-fab__label--external-left{top:50%;left:-12px;transform:translate(-100%,-50%)}.vc-fab__label--external-right{top:50%;right:-12px;transform:translate(100%,-50%)}.vc-fab__label--external-bottom{bottom:-12px;left:50%;transform:translate(-50%,100%)}.vc-fab__label--external-top{top:-12px;left:50%;transform:translate(-50%,-100%)}.vc-fab__label--internal{padding:0;transition:font-size .12s cubic-bezier(.65,.815,.735,.395),max-height .12s cubic-bezier(.65,.815,.735,.395),opacity 70ms cubic-bezier(.65,.815,.735,.395);max-height:30px}.vc-fab__label--internal-hidden{font-size:0;opacity:0}.vc-fab__label--internal-top{padding-bottom:.12em}.vc-fab__label--internal-bottom{padding-top:.12em}.vc-fab__label--internal-bottom.vc-fab__label--internal-hidden,.vc-fab__label--internal-top.vc-fab__label--internal-hidden{max-height:0}.vc-fab__label--internal-left{padding-left:.285em;padding-right:.571em}.vc-fab__label--internal-right{padding-right:.285em;padding-left:.571em}.vc-fab__icon-holder{min-width:24px;min-height:24px;position:relative}.vc-fab__actions{position:absolute;opacity:0;transition:transform .18s ease-in,opacity .18s ease-in;pointer-events:none;align-items:center;justify-content:center;align-self:center;padding:3px}.vc-fab__actions .vc-btn{margin:5px}.vc-fab__actions--right{transform-origin:0 50%;transform:scale(.4) translateX(-62px);height:56px;left:100%;margin-left:9px}.vc-fab__actions--left{transform-origin:100% 50%;transform:scale(.4) translateX(62px);height:56px;right:100%;margin-right:9px;flex-direction:row-reverse}.vc-fab__actions--up{transform-origin:50% 100%;transform:scale(.4) translateY(62px);width:56px;bottom:100%;margin-bottom:9px;flex-direction:column-reverse}.vc-fab__actions--down{transform-origin:50% 0;transform:scale(.4) translateY(-62px);width:56px;top:100%;margin-top:9px;flex-direction:column}.vc-fab__actions--down,.vc-fab__actions--up{left:50%;margin-left:-28px}.vc-fab--align-left>.vc-fab__actions--down,.vc-fab--align-left>.vc-fab__actions--up{align-items:flex-start;left:28px}.vc-fab--align-right>.vc-fab__actions--down,.vc-fab--align-right>.vc-fab__actions--up{align-items:flex-end;left:auto;right:0}