ticket-selector
Version:
A professional stadium seat selection widget with multi-language support
2 lines • 7.26 kB
CSS
.ticket-select{display:flex;flex-direction:column;flex-grow:1;height:100%;position:relative;width:100%}.ticket-select:not(.is-loaded) .ticket-select__stadium{display:none}.ticket-select:not(.is-loaded) .ticket-select__loading{display:flex}.ticket-select.is-loaded .ticket-select__loading{display:none}.ticket-select__container{background:transparent;height:100%;overflow:hidden;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100%}.ticket-select__wrapper{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.ticket-select__viewport{background-color:#fff;cursor:grab;flex-grow:1;overflow:hidden;position:relative;width:100%}.ticket-select__viewport:active{cursor:grabbing}.ticket-select__viewport--seats-view{background-color:#f1f1f1}.ticket-select__content{flex-direction:column;left:0;position:absolute;top:0;transform-origin:0 0}.ticket-select__content,.ticket-select__stadium{display:flex;height:100%;justify-content:center;width:100%}.ticket-select__stadium{align-items:center;max-height:100%;max-width:100%;position:relative}.ticket-select__stadium-image{display:block;height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;width:auto}.ticket-select__stadium-overlay,.ticket-select__stadium-svg{height:100%;left:0;position:absolute;top:0;width:100%}.ticket-select__sector{cursor:pointer;transition:fill-opacity .3s ease,stroke .3s ease;fill-opacity:.6;stroke-width:2;stroke:#fff}.ticket-select__sector:hover:not(.ticket-select__sector--disabled){stroke-width:3;filter:brightness(1.1)}.ticket-select__sector[data-sector-color=yellow]{fill:#f8ad02}.ticket-select__sector[data-sector-color=yellow]:hover{fill:#c58a02}.ticket-select__sector[data-sector-color=red]{fill:#bb2932}.ticket-select__sector[data-sector-color=red]:hover{fill:#912027}.ticket-select__sector[data-sector-color=blue]{fill:#2175bf}.ticket-select__sector[data-sector-color=blue]:hover{fill:#195a94}.ticket-select__sector[data-sector-color=dark-blue]{fill:#274180}.ticket-select__sector[data-sector-color=dark-blue]:hover{fill:#1b2d59}.ticket-select__sector[data-sector-color=green]{fill:#0c8d4b}.ticket-select__sector[data-sector-color=green]:hover{fill:#085e32}.ticket-select__sector-green.ticket-select__seat--selected path{fill:#0a2e88}.ticket-select__sector[data-sector-color=purple]{fill:#77169e}.ticket-select__sector[data-sector-color=purple]:hover{fill:#551071}.ticket-select__sector--disabled{fill:#494b4a;fill-opacity:1;cursor:not-allowed}.ticket-select__seats-header{left:50%;position:absolute;top:20px;transform:translateX(-50%);z-index:100}.ticket-select__seats-title,.ticket-select__sector-title{background:hsla(0,0%,100%,.9);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.1);color:#333;font-size:16px;font-weight:600;margin:0;padding:10px 20px;text-align:center}.ticket-select__seats-svg{background:#f1f1f1}.ticket-select__seats-background{fill:#f1f1f1}.ticket-select__seats-step{fill:#e5e6e6}.ticket-select__seats-row-label{font-family:Roboto-Regular,Roboto,sans-serif;font-size:12px;fill:#666;text-anchor:middle;pointer-events:none}.ticket-select__seat{cursor:pointer;transition:all .2s ease}.ticket-select__seat:hover{filter:brightness(1.2)}.ticket-select__seat--selected path{fill:#0a8837}.ticket-select__seat--unavailable{cursor:not-allowed}.ticket-select__seat--unavailable:hover{filter:none}.ticket-select__seat--unavailable path{fill:#999}.ticket-select__seat--available path{fill:#b3bc31}.ticket-select__seat path{transition:fill .2s ease;stroke:#000;stroke-miterlimit:10;stroke-width:.25px}.ticket-select__seat circle{fill:#fff;pointer-events:none}.ticket-select__seat text{font-family:Roboto-Regular,Roboto,sans-serif;pointer-events:none;fill:#000;font-weight:500}.ticket-select__seat--color-yellow path{fill:#f8ad02}.ticket-select__seat--color-yellow path:hover{fill:#c58a02}.ticket-select__seat--color-red path{fill:#bb2932}.ticket-select__seat--color-red path:hover{fill:#912027}.ticket-select__seat--color-blue path{fill:#2175bf}.ticket-select__seat--color-blue path:hover{fill:#195a94}.ticket-select__seat--color-dark-blue path{fill:#274180}.ticket-select__seat--color-dark-blue path:hover{fill:#1b2d59}.ticket-select__seat--color-green path{fill:#0c8d4b}.ticket-select__seat--color-green path:hover{fill:#085e32}.ticket-select__seat--color-green.ticket-select__seat--selected path{fill:#0a2e88}.ticket-select__seat--color-purple path{fill:#77169e}.ticket-select__seat--color-purple path:hover{fill:#551071}.ticket-select__controls{display:flex;flex-direction:column;gap:10px;position:absolute;right:20px;top:20px;z-index:100}.ticket-select__control-btn{align-items:center;background:hsla(0,0%,100%,.9);border:none;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;display:flex;font-size:20px;height:40px;justify-content:center;transition:all .2s ease;width:40px}.ticket-select__control-btn svg{display:inline-flex;height:1em;vertical-align:-.015em;width:1em;fill:currentColor;stroke:none}.ticket-select__control-btn:hover{background:#fff;transform:scale(1.05)}.ticket-select__control-btn:active{transform:scale(.95)}.ticket-select__control-btn--back{background:#999;color:#fff}.ticket-select__control-btn--back:hover{background:grey}.ticket-select__info{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;flex-shrink:0;height:60px;justify-content:space-between;padding:0 20px;z-index:99}.ticket-select__info-btn{align-items:center;background-color:#f8ad02;border:0;border-radius:10px;color:#000;cursor:pointer;display:flex;font-size:16px;font-weight:700;justify-content:center;min-height:40px;min-width:120px;outline:none;padding:8px 20px;text-decoration:none;transition:all .2s}@media (max-width:768px){.ticket-select__info-btn{min-height:40px}}.ticket-select__info-btn [data-ticket-selector-count]{margin-left:4px}.ticket-select__info-btn--active{display:inline-flex}.ticket-select__info-btn[disabled]{cursor:not-allowed;opacity:.6;pointer-events:none}.ticket-select__info-btn:hover:not([disabled]){background-color:#fdbb26}.ticket-select__selected-count{color:#666;font-size:16px;font-weight:500}.ticket-select__loading{align-items:center;color:#333;display:flex;flex-direction:column;font-size:18px;gap:20px;height:100%;justify-content:center}.ticket-select__loader{height:40px;width:40px}.ticket-select__loader svg{animation:ticket-select-spin 1s linear infinite;height:100%;width:100%}.ticket-select__loading-text{color:#666;font-size:16px}@keyframes ticket-select-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.ticket-select__controls{right:10px;top:10px}.ticket-select__control-btn{font-size:18px;height:35px;width:35px}.ticket-select__info{padding:0 15px}.ticket-select__selected-count{font-size:14px}}@media (max-width:480px){.ticket-select__control-btn{font-size:16px;height:30px;width:30px}}:-moz-full-screen .ticket-select__stadium-image,:-ms-fullscreen .ticket-select__stadium-image,:-webkit-full-screen .ticket-select__stadium-image,:fullscreen .ticket-select__stadium-image{background:transparent}
/*# sourceMappingURL=ticket-selector.min.css.map */