@dialpad/dialtone-css/lib/build/less/utilities/interactivity.less

Dialpad's design system

//
//  DIALTONE
//  UTILITIES: INTERACTIVITY
//
//  These are interactivity utility classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/utilities/interactivity
//
//  TABLE OF CONTENTS
//  • CURSOR
//  • OUTLINE
//  • POINTER EVENTS
//
//  ============================================================================
//  $   CURSOR
//      Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.
//  ----------------------------------------------------------------------------
.d-c-menu { cursor: context-menu !important; }
.d-c-help { cursor: help !important; }
.d-c-pointer { cursor: pointer !important; }
.d-c-progress { cursor: progress !important; }
.d-c-wait { cursor: wait !important; }
.d-c-crosshair { cursor: crosshair !important; }
.d-c-text { cursor: text !important; }
.d-c-move { cursor: move !important; }
.d-c-copy { cursor: copy !important; }
.d-c-not-allowed { cursor: not-allowed !important; }
.d-c-grab { cursor: grab !important; }
.d-c-grabbing { cursor: grabbing !important; }
.d-c-all-scroll { cursor: all-scroll !important; }
.d-c-col-resize { cursor: col-resize !important; }
.d-c-row-resize { cursor: row-resize !important; }
.d-c-zoom-in { cursor: zoom-in !important; }
.d-c-zoom-out { cursor: zoom-out !important; }
.d-c-auto { cursor: auto !important; }
.d-c-default { cursor: default !important; }
.d-c-none { cursor: none !important; }


//============================================================================
//  $   OUTLINE
//      Sets the style, width, color, and other characteristics
//      elements' outlines. These shouldn't be confused with borders.
//  ----------------------------------------------------------------------------
.d-ol-focusring {
  outline: none !important;
  box-shadow: var(--dt-shadow-focus) !important;
}

.d-ol-focusring-inset {
  outline: none !important;
  box-shadow: var(--dt-shadow-focus-inset) !important;
 }

.d-ol-none {
  outline: none !important;
  box-shadow: none !important;
}

//============================================================================
//  $   POINTER EVENTS
//      The pointer-events CSS property enables or disables all
//      mouse events on an element.
//  ----------------------------------------------------------------------------
.d-pe-auto { pointer-events: auto !important; }
.d-pe-inherit { pointer-events: inherit !important; }
.d-pe-none { pointer-events: none !important; }

.d-us-auto { user-select: auto !important; }
.d-us-none { user-select: none !important; }

//============================================================================
//  $   RESIZE
//      The resize CSS property sets whether an element is resizable,
//      and if so, in which directions.
//  ----------------------------------------------------------------------------
.d-r-both { resize: both !important; }
.d-r-horizontal { resize: horizontal !important; }
.d-r-vertical { resize: vertical !important; }
.d-r-none { resize: none !important; }