react-svg-seatmap/dist/index.css

React components that render a highly-customizable seatmap based on a provided SVG

.seatmap{background-color:#eceae6;width:100%;height:100%;position:relative}.seatmap__svg{width:100%;height:100%}.seatmap__svg svg{min-height:65vh;width:100%;height:100%}.seatmap__actions{display:flex;flex-direction:column;gap:1rem;position:absolute}.seatmap__actions--left{align-items:flex-start;top:15px;left:15px}.seatmap__actions--right{align-items:flex-end;top:15px;right:15px}.seatmap__action-group:not(.seatmap__action-group--unstyled){display:flex;flex-direction:column;align-items:flex-start;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px #0003;border:1px solid rgba(0,0,0,.2);border-radius:5px;overflow:hidden}.seatmap__action{display:block;background:none;border:0;color:inherit;font-size:inherit;font-weight:inherit;line-height:normal;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;width:30px;height:30px;cursor:pointer;text-align:center;background-color:#fff;border-top:1px solid rgba(0,0,0,.15)}.seatmap__action:first-of-type{border-top:0}.seatmap__action:active{background-color:#0a1e4d;color:#d0d0d0}.seatmap__action--selected{background-color:#4876e1;color:#fff}@media (hover: hover){.seatmap__action:hover{background-color:#eceae6;color:#000}.seatmap__action--selected:hover{background-color:#3960b9;color:#fff}}.seatmap__icon{display:inline-block;vertical-align:middle;width:16px;height:16px;fill:currentColor;pointer-events:none}.seatmap__error{color:#ff0800}.seat--unavailable{fill:#bfbfbf!important;stroke:none!important}.seat--available{stroke:#976bbd!important;stroke-width:3!important;fill:#fff!important;cursor:pointer}.seat--selected{fill:#976bbd!important;stroke-width:3!important;stroke:#976bbd!important;cursor:pointer}.seat:hover,.seat--hover{opacity:.6}