OddSite 4.0.0

Button Pattern

[data-btn]

scss
[data-btn] {
  @include tools.font-family('alt');
  @include tools.transition('colors');
  align-items: center;
  background: var(--btn-bg, var(--highlight));
  border: thin solid var(--btn-border, var(--btn-text, transparent));
  border-radius: var(--radius);
  color: var(--btn-text, var(--bg));
  cursor: pointer;
  display: inline-flex;
  font-size: inherit;
  padding: var(--quarter-shim) var(--btn-padding, var(--double-gutter));

  &:hover,
  &:focus {
    --btn-bg: var(--accent);
    --btn-text: var(--bg);
  }

  &:active,
  &[aria-pressed='true'] {
    --btn-bg: var(--active);
    --btn-text: var(--bg);
  }
}

The basic button accepts one CSS adjustment variable – --btn-padding – which allows an override of inline padding on the button.

[data-btn~='small']

scss
[data-btn~='small'] {
  --btn-padding: var(--gutter);
  font-size: var(--small);
}

“Small” buttons override both the font-size and the inline padding.

[data-btn~='xsmall']

scss
[data-btn~='xsmall'] {
  --btn-padding: var(--shim);
  font-size: var(--xsmall);
}

“xSmall” buttons override both the font-size and the inline padding.

[data-btn~='menu']

scss
[data-btn~='menu'] {
  @include tools.font-family('body');
  --btn-bg: transparent;
  --btn-border: var(--border-fade);
  --btn-text: var(--action);
  --marker: var(--btn-text);
  display: list-item;

  [open] & {
    --btn-bg: var(--active);
    --btn-border: var(--btn-bg);
    --btn-text: var(--bg);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}