event-services
Version:
Collection of hooks, components, generics (buttons, containers, styles, tools) for creating web applications for guest management for any type of events: weddings, parties, graduations that require guest confirmation and display useful information to gues
2 lines (1 loc) • 2.54 kB
CSS
.btn{cursor:pointer;background-color:var(--bg-tertiary);color:var(--txt-primary);font-size:1em;font-weight:400;border:none;border:1px solid var(--txt-secondary-rgba);padding:.85rem 1.5rem;width:auto;min-width:12rem;align-self:center;transition:all ease .3s;text-decoration:none}.round{border-radius:2rem}.btn:disabled{cursor:not-allowed;opacity:.5}.btn:not(:disabled):hover,.btn:not(:disabled):not(.disabled):active:focus,.btn:not(:disabled):not(.disabled).active:focus{box-shadow:0 0 0 .2rem var(--txt-secondary-rgba)}.figure-container{position:relative;display:flex;justify-content:center;align-items:center}.figure-container:after{content:attr(data-footer);position:absolute;font-size:1.2em;bottom:-2rem;color:var(--txt-primary)}.figure-container img{display:block;background-color:var(--bg-tertiary);width:18em;max-width:400px;aspect-ratio:1 / 1}.root-container{background-color:var(--bg-primary);padding:1em;display:flex;flex-direction:column;gap:1em}.root-container.fluid{padding:1em 0}.root-container.no-gap{gap:initial}.root-container.padding-0{padding:0}.root-container:not(.padding-0) section div{scroll-margin:1em;scroll-padding-top:1em}section{position:relative;min-height:200px;background-color:var(--bg-secondary);overflow:hidden}.btn-switch{position:absolute;top:1em;right:1.8em;display:block;width:60px;height:34px;z-index:2}.btn-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-primary);border:1px solid rgba(24,25,26,.2);-webkit-transition:.4s;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:2px;bottom:2px;background-color:#fff;border:1px solid rgba(24,25,26,.2);-webkit-transition:.4s;transition:.4s;border-radius:50%}input:checked+.slider{border:1px solid rgba(240,242,245,.2);background-color:var(--bg-primary)}input:focus+.slider{box-shadow:0 0 1px var(--bg-primary)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px);border-radius:50%}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-italic{font-style:italic}h1.title{font-weight:400;letter-spacing:.125rem;text-transform:uppercase;color:var(--txt-primary);font-size:2.35em}h5.subtitle{font-weight:400;letter-spacing:.125rem;text-transform:uppercase;color:var(--txt-primary);font-size:1.65em}