runnel-react-carousel
Version:
A simple image carousel React component.
2 lines (1 loc) • 4.33 kB
CSS
.carousel-button{all:unset}.relative-carousel{position:relative}.absolute-carousel{position:absolute}.w-full-carousel{width:100%}.h-full-carousel{height:100%}.overflow-hidden-carousel{overflow:hidden}.flex-carousel{display:flex}.items-center-carousel{align-items:center}.justify-center-carousel{justify-content:center}.justify-between-carousel{justify-content:space-between}.gap-1\.5-carousel{gap:.375rem}.gap-3-carousel{gap:.75rem}.px-3-carousel{padding-left:.75rem;padding-right:.75rem}.py-2-carousel{padding-top:.5rem;padding-bottom:.5rem}.bottom-3-carousel{bottom:.75rem}.bottom-12-carousel{bottom:3rem}.left-1\/2-carousel{left:50%}.top-1\/2-carousel{top:50%}.top-0-carousel{top:0}.-translate-y-1\/2-carousel{transform:translateY(-50%)}.-translate-x-1\/2-carousel{transform:translate(-50%)}.rotate-180-carousel{transform:rotate(180deg)}.rounded-full-carousel{border-radius:9999px}.cursor-pointer-carousel{cursor:pointer}.transition-opacity-carousel{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors-carousel{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-carousel{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-75-carousel{transition-duration:75ms}.duration-100-carousel{transition-duration:.1s}.duration-150-carousel{transition-duration:.15s}.duration-200-carousel{transition-duration:.2s}.duration-300-carousel{transition-duration:.3s}.duration-500-carousel{transition-duration:.5s}.duration-700-carousel{transition-duration:.7s}.duration-1000-carousel{transition-duration:1s}.opacity-0-carousel{opacity:0}.opacity-100-carousel{opacity:1}.object-cover-carousel{object-fit:cover}.object-contain-carousel{object-fit:contain}.object-fill-carousel{object-fit:fill}.object-scale-down-carousel{object-fit:scale-down}.object-none-carousel{object-fit:none}.object-top-left-carousel{object-position:top left}.object-top-carousel{object-position:top}.object-top-right-carousel{object-position:top right}.object-left-carousel{object-position:left}.object-center-carousel{object-position:center}.object-right-carousel{object-position:right}.object-bottom-left-carousel{object-position:bottom left}.object-bottom-carousel{object-position:bottom}.object-bottom-right-carousel{object-position:bottom right}.h-6-carousel{height:1.5rem}.w-6-carousel{width:1.5rem}.h-12-carousel{height:3rem}.w-12-carousel{width:3rem}.h-8-carousel{height:2rem}.w-8-carousel{width:2rem}.h-2-carousel{height:.5rem}.w-2-carousel{width:.5rem}.h-14-carousel{height:3.5rem}.w-14-carousel{width:3.5rem}.pl-0\.5-carousel{padding-left:.125rem}.-mt-\[0\.05rem\]-carousel{margin-top:-.05rem}.-mt-\[0\.03rem\]-carousel{margin-top:-.03rem}.-mb-\[0\.05rem\]-carousel{margin-bottom:-.05rem}.-mb-\[0\.03rem\]-carousel{margin-bottom:-.03rem}.text-2xl-carousel{font-size:1.5rem;line-height:2rem}.text-xs-carousel{font-size:.75rem;line-height:1rem}.text-xl-carousel{font-size:1.25rem;line-height:1.75rem}.text-base-carousel{font-size:1rem;line-height:1.5rem}.bg-gray-600\/60-carousel{background-color:#4b556399}.text-white-carousel{color:#fff}.hover\:bg-gray-600-carousel:hover{background-color:#4b5563}.active\:bg-gray-700-carousel:active{background-color:#374151}.text-gray-100-carousel{color:#f3f4f6}.hover\:text-gray-200-carousel:hover{color:#e5e7eb}.active\:text-gray-300-carousel:active{color:#d1d5dc}.text-gray-900-carousel{color:#101828}.hover\:text-gray-800-carousel:hover{color:#1e2939}.active\:text-gray-700-carousel:active{color:#364153}.bg-gray-300\/60-carousel{background-color:#d1d5db99}.text-black-carousel{color:#000}.hover\:bg-gray-300-carousel:hover{background-color:#d1d5db}.active\:bg-\[\#c0c5cf\]-carousel:active{background-color:#c0c5cf}.bg-white-carousel{background-color:#fff}.bg-black-carousel{background-color:#000}.drop-shadow-sm-carousel{filter:drop-shadow(0 1px 1px rgb(0 0 0 / .05))}.hover\:drop-shadow-sm-carousel:hover{filter:drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06))}.active\:drop-shadow-sm-carousel:active{filter:none}