Misc. Utilities

The Opportunity Standard includes a few CSS extra utilities that extend the Tailwindcss utility library. On this page; Animate, Cell, Direction, Material, Screen Readers, Scroll, and Status.

Animate

The Animate.css library is included as a dependency. The animations, fadeIn and fadeInUp are included.

Animated element 
<div class="animated fadeInUp">
  Animated element
</div>

Cell

cell-padding adds the same amount of padding that Table cells use, 0.8rem 1rem.

Element with table cell padding 
<div class="cell-padding">
  Element with table cell padding
</div>

Direction

rtl:flip and ltr:flip flip the horizontal direction of elements visually using CSS transformations, based on the reading direction of the document (rtl for right-to-left and ltr for left-to-right). 

<svg class="icon-ui ltr:flip">
  <use href="#lucide-external-link"></use>
</svg>

<svg class="icon-ui rtl:flip">
  <use href="#lucide-external-link"></use>
</svg>

Material

material adds the Opportunity Standard “material” styling to an element. These styles may be borders or drop shadows depending on the configuration of the theme in the tokens configuration. “Material” styles are used in several components, such as cards, Accordions, and global elements to differentiate them from others in the user interface.

Material Element 
<div class="material">
  Material Element
</div>

Below is a description of the material values for Opportunity Standard.

Material Property Theme Value
Shadow Up Light none
Border Light 4px solid var(--nyco-scale-2)
Border Radius Light 0px
Shadow Up Dark none
Border Dark 4px solid var(--nyco-scale-3)
Border Radius Dark 0px

Screen Readers

sr-only hides an element visually for screen readers.

This text is only visible to screen readers. 
<div class="sr-only">
  This text is only visible to screen readers.
</div>

Scroll

The classes scroll, scroll-x, scroll-x-snap-start, and scroll-peek create a horizontally scrolling region that snaps elements in view to the beginning side. scroll-x-snap-start can be swapped out with scroll-x-snap-end to snap elements in the view to the end side. scroll-peek will reveal 88% of the next element to make it visually clear that the window will scroll.

Element
Element
Element
Element 
<div class="scroll scroll-x scroll-x-snap-start scroll-peek">
  <div class="mie-3">
    Element
  </div>

  <div class="mie-3">
    Element
  </div>

  <div class="mie-3">
    Element
  </div>

  <div>
    Element
  </div>
</div>

Status

status-primary, status-secondary, and status-tertiary modify the background and text color of an element to match their Alert color assignment.

Primary Status
Secondary Status
Tertiary Status 
<div class="status-primary">
  Primary Status
</div>

<div class="status-secondary">
  Secondary Status
</div>

<div class="status-tertiary">
  Tertiary Status
</div>