nitropage/src/features/editor/components/sidebar/header/button.module.css

A free and open source, extensible visual page builder based on SolidStart.

.button {
  --ring-shadow: 0 0 #0000;
  --ring-offset-shadow: 0 0 #0000;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  color: var(--np-slate-600);
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  height: 100%;
  padding: 0 0.5rem;
  transform: skew(calc(var(--np-skew-logo) * -1));
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow);
  background-color: var(--np-slate-100);
  user-select: none;
}

.button:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.button:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.button:hover {
  --ring-offset-width: 2px;
  --ring-offset-shadow: 0 0 0 var(--ring-offset-width) var(--np-slate-200);
  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width)) var(--np-accent-400);
  border-color: transparent;
  z-index: 1;
}

.button:hover,
.button:focus {
  outline: none;
  color: var(--np-slate-900);
  background-color: var(--np-slate-50);
}

.button:active {
  background-color: white !important;
}

.button svg {
  width: 1em;
  height: 1em;
}

.button svg,
.button l-ring {
  font-size: 1rem;
}

.button span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transform: skew(var(--np-skew-logo));
}