@zohodesk/components/es/RippleEffect/RippleEffect.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.effect {
  position: relative;
  border-radius: 4px;
}

.border {
  border: solid 1px var(--zdt_rippleeffect_default_border);
}

.default.defaultHover {
  border-color: var(--zdt_rippleeffect_hover_border);
}

.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover

/* .hoverEffect:focus.primary.borderHover  */
  {
  border-color: var(--zdt_rippleeffect_primary_border);
}

.primary.defaultHover, .hoverEffect:hover.primary.active.border

/* .hoverEffect:focus.primary.active.border  */
  {
  border-color: var(--zdt_rippleeffect_primary_active_border);
}

.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover

/* .hoverEffect:focus.primaryLight.borderHover  */
  {
  border-color: var(--zdt_rippleeffect_primary_light_border);
}

.green.defaultHover, .hoverEffect:hover.green.borderHover

/* .hoverEffect:focus.green.borderHover  */
  {
  border-color: var(--zdt_rippleeffect_green_border);
}

.hoverEffect:hover.default.defaultHover

/* .hoverEffect:focus.default.defaultHover */
  {
  border-color: var(--zdt_rippleeffect_slate_border);
}

.hoverEffect:hover.default.borderHover

/* .hoverEffect:focus.default.borderHover */
  {
  border-color: var(--zdt_rippleeffect_navy_border);
}

.hoverEffect:hover.default.bgHover

/* .hoverEffect:focus.default.bgHover */
  {
  background-color: var(--zdt_rippleeffect_hover_bg);
}

.hoverEffect:hover.primaryLight.bgHover

/* .hoverEffect:focus.primaryLight.bgHover  */
  {
  background-color: var(--zdt_rippleeffect_primary_light_bg);
}

.primaryFilled {
  background-color: var(--zdt_rippleeffect_primary_bg);
}

.hoverEffect:hover.primaryFilled, .primaryFilled.active {
  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
}

.hoverEffect:hover.green.bgHover

/* .hoverEffect:focus.green.bgHover */
  {
  background-color: var(--zdt_rippleeffect_green_bg);
}

.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
  background-color: var(--zdt_rippleeffect_primary_light_bg);
}

.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
  border-color: var(--zdt_rippleeffect_primary_light_border);
}

.green.active {
  background-color: var(--zdt_rippleeffect_green_bg);
}

.green.active.border {
  border-color: var(--zdt_rippleeffect_green_border);
}

.primary.active {
  background-color: var(--zdt_rippleeffect_primary_bg);
}

.danger.defaultHover, .hoverEffect:hover.danger.borderHover

/* .hoverEffect:focus.danger.borderHover */
  {
  border-color: var(--zdt_rippleeffect_danger_border);
}

.hoverEffect:hover.danger.bgHover, .danger.active {
  background-color: var(--zdt_rippleeffect_danger_bg);
}

.hoverEffect:hover.primaryDark.bgHover

/* .hoverEffect:focus.primaryDark.bgHover */
  {
  background-color: var(--zdt_rippleeffect_primary_dark_bg);
}

.notAllowed {
  cursor: not-allowed;
}

.secondary.defaultHover, .hoverEffect:hover.secondary.borderHover

/* .hoverEffect:focus.secondary.borderHover  */
  {
  border-color: var(--zdt_rippleeffect_secondary_border);
}

.hoverEffect:hover.secondary.bgHover

/* .hoverEffect:focus.secondary.bgHover */
  {
  background-color: var(--zdt_rippleeffect_secondary_bg);
}

.secondary.active, .hoverEffect:hover.secondary.active.bgHover {
  background-color: var(--zdt_rippleeffect_secondary_active_bg);
}

.secondary.active.border .hoverEffect:hover.secondary.active.border {
  border-color: var(--zdt_rippleeffect_secondary_active_border);
}