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

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

.header {
  top: -1px;
  position: sticky;
  z-index: 50;
  height: var(--np-header-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-right: 0.875rem;
  box-shadow: 0 0 0 #0000;
  transition: box-shadow 0.3s var(--np-ease-in-out-cubic);
}

.header.-sticky {
  padding-top: 1px;
  height: calc(1px + var(--np-header-height));
  box-shadow: 0 0.5rem 1rem #0002;
  background-color: var(--np-slate-200);
}

.tabs {
  height: 100%;
  display: flex;
  padding-left: 4px;
}

.buttons {
  padding: 0.5rem 0;
  height: 100%;
  display: flex;
  justify-content: center;
}

.exitButton {
  font-size: 2rem;
  filter: drop-shadow(0px 1px 2px rgb(0 0 0 / 0.3));
  transition: all 75ms var(--np-ease-out-expo);
  color: var(--np-slate-700);
}

.exitButton:hover,
.exitButton:focus {
  outline: none;
  color: var(--np-accent-800);
}

.exitButton:hover,
.exitButton:active {
  transform: scale(1.15);
  filter: drop-shadow(0px 2px 3px rgb(0 0 0 / 0.3));
}

.modificationBadge {
  position: absolute;
  transform: scale(0);
  top: -8px;
  left: -5px;
  width: 7px;
  height: 7px;
  background-color: var(--np-accent-400);
  border-radius: 9999px;
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition:
    all 100ms var(--np-ease-in-out-expo),
    transform 250ms var(--np-ease-in-out-expo);
}

.modificationBadge.-open {
  transform: scale(1);
}

button:hover .modificationBadge {
  top: -6px;
  left: -6px;
  background-color: var(--np-accent-500);
}