Utilities & helpers

Cartzilla utilities

Custom Cartzilla utility classes.

Dotted background

.bg-dotted
Primary
Success
Danger
Warning
Info
Dark
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Ratio from 'react-bootstrap/Ratio'

export default function UtilitiesDottedBgDemo() {
  return (
    <Row xs={1} sm={2} md={3} className="g-3 g-md-4">
      {['default', 'primary', 'success', 'danger', 'warning', 'info', 'dark'].map((color) => (
        <Col key={color}>
          <Ratio
            aspectRatio="16x9"
            className="bg-dotted rounded"
            style={
              color === 'default'
                ? undefined
                : ({
                    '--cz-bg-color': `var(--cz-${color}-bg-subtle)`,
                    '--cz-dot-color': `var(--cz-${color})`,
                  } as React.CSSProperties)
            }
          >
            <div className="h5 d-flex align-items-center justify-content-center position-absolute w-100 h-100 mb-0">
              {color.charAt(0).toUpperCase() + color.slice(1).toLowerCase()}
            </div>
          </Ratio>
        </Col>
      ))}
    </Row>
  )
}

Borders

.border-dashed
.border-dotted
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Ratio from 'react-bootstrap/Ratio'

export default function UtilitiesBordersDemo() {
  return (
    <Row xs={1} sm={2} md={3} className="g-4 g-sm-3 g-md-4">
      <Col>
        <Ratio aspectRatio="16x9" className="border border-dashed border-2 rounded">
          <div className="h5 d-flex align-items-center justify-content-center position-absolute w-100 h-100 mb-0">
            .border-dashed
          </div>
        </Ratio>
      </Col>
      <Col>
        <Ratio aspectRatio="16x9" className="border border-dotted border-2 rounded">
          <div className="h5 d-flex align-items-center justify-content-center position-absolute w-100 h-100 mb-0">
            .border-dotted
          </div>
        </Ratio>
      </Col>
    </Row>
  )
}

Cursors

.cursor-pointer
.cursor-default
.cursor-help
.cursor-wait
.cursor-crosshair
.cursor-not-allowed
.cursor-zoom-in
.cursor-zoom-out
.cursor-grab
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Ratio from 'react-bootstrap/Ratio'

export default function UtilitiesCursorsDemo() {
  return (
    <Row xs={1} sm={2} md={3} className="g-3 g-md-4">
      {['pointer', 'default', 'help', 'wait', 'crosshair', 'not-allowed', 'zoom-in', 'zoom-out', 'grab'].map(
        (cursor) => (
          <Col key={cursor}>
            <Ratio aspectRatio="16x9" className={`cursor-${cursor} bg-body rounded shadow`}>
              <div className="h5 d-flex align-items-center justify-content-center position-absolute w-100 h-100 mb-0">
                .cursor-{cursor}
              </div>
            </Ratio>
          </Col>
        )
      )}
    </Row>
  )
}
Top