v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Account & States / notification-settings

Built with: CSS

Notification SettingsBLK

Controls notification topics and delivery channels - a matrix of topics by channel, or a list of switches with a digest frequency. Part of the Account & States blocks.

On this page (3)
Component Skill — components/notification-settings/component-skill.md

Native basis

A <table>: topics as row headers (with a description), channels as column headers, a Checkbox per cell with an aria-label naming both. Or a list of Switches and a frequency Select.

Built from

Checkbox, Switch, Select.

Web Platform APIs

<table>:has()<fieldset>

Classes

.mk-notification-settings.mk-notification-settings-digest

Data attributes

data-variant="list".

§Matrix

A real <table>: topics as row headers, channels as column headers, and a Checkbox in every cell labelled with both ("Mentions by Email").

§List

data-variant='list': a Switch per topic and how often digests come.

§CSS view file

/* -- Notification Settings (website · Account & States) -------------------
   Controls notification topics and delivery channels - a matrix of topics by channel, or a list of switches with a digest frequency. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(
    .mk-notification-settings,
    .mk-notification-settings *,
    .mk-notification-settings ::before,
    .mk-notification-settings ::after
  ) {
    box-sizing: border-box;
  }
  .mk-notification-settings {
    width: 100%;
    max-width: 44rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & table {
      width: 100%;
      border-collapse: collapse;
    }
    & th,
    & td {
      padding: 0.875rem 1rem;
      border-block-end: 1px solid var(--border);
    }
    & tr:last-child > * {
      border-block-end: 0;
    }
    & thead th {
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      font-weight: 600;
      text-align: center;
    }
    & thead th:first-child {
      text-align: start;
    }
    & tbody th {
      text-align: start;
      font-weight: 600;
      font-size: 0.9375rem;
    }
    & tbody th small {
      display: block;
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      font-weight: 400;
    }
    & td {
      width: 5.5rem;
      text-align: center;
    }
  }
  .mk-notification-settings tbody tr:has(:checked) th {
    color: var(--foreground);
  }
  .mk-notification-settings[data-variant="list"] {
    padding: 0.5rem 1.25rem;
    overflow: visible;
    & ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    & li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-block: 0.875rem;
      border-block-end: 1px solid var(--border);
    }
    & li label {
      display: grid;
      font-weight: 600;
      font-size: 0.9375rem;
    }
    & li small {
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      font-weight: 400;
    }
  }
  .mk-notification-settings-digest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    font-size: 0.9375rem;
    & .select {
      width: auto;
    }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-notification-settings {
      border-color: CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub