oui-kit/stylus/ui/form.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../mixins";

oui-input-reset() {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
  font-size: 16;
  font-family: inherit;
  outline: none;
  border: none;
  width: auto;
  min-width: 0;
  color: inherit;
  text-transform: none;
  vertical-align: baseline;

  &::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  &:disabled {
    cursor: not-allowed;
  }
}

// A simple button template
oui-button() {
  oui-input-reset();
  stack-x(8);
  stack-item-center();   /*
    // https://ishadeed.com/article/button-label-alignment/
    // &:before {
    // content: "";
    // display: inline-block;
    // height: 20;
    // vertical-align: middle;
    // }
  */
  display: inline-flex;
  height: var(--input-height, px(32));
  min-width: var(--input-height, px(32));
  // padding: calc(((var(--button-height, var(--input-height, px(32))) - 16) / 2));
  max-width: 100%;
  pointer-events: initial;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;

  // // Fixes alignment issues
  > * {
    display: inline-flex;
    flex: none;
  }

  &:focus-visible {
    box-shadow: var(--input-shadow-focus); /* Workaround for :focus that otherwise stays after mouse click */
  }

  &[disabled] {
    background-color: var(--t3-bg);
    color: var(--s2-fg);
    // opacity: 0.6;
    cursor: not-allowed;
  }

  // icon
  svg, img {
    size: 1em;
  }

  border-radius: var(--button-radius, var(--input-radius));

  &:hover:not([disabled]) {
    background: var(--button-bg-hover);
  }

  &:active:not([disabled]) {
    background: var(--button-bg-active);
  }

  svg {
    size: 1em;
  }

  // Add space if multiple buttons
  & + & {
    margin-left: 8;
  }

  &._button_mode_danger {
    --button-bg: -red-700;
    --button-bg-hover: -red-800;
    --button-bg-active: -red-900;

    .dark & {
      --button-bg: -red-700;
      --button-bg-hover: -red-800;
      --button-bg-active: -red-900;
    }
  }

  &._button_mode_success {
    --button-bg: -green-700;
    --button-bg-hover: -green-800;
    --button-bg-active: -green-900;

    .dark & {
      --button-bg: -green-700;
      --button-bg-hover: -green-800;
      --button-bg-active: -green-900;
    }
  }

  &._button_mode_neutral {
    --button-bg: var(--n0-700);
    --button-bg-hover: var(--n0-900);
    --button-bg-active: var(--fg);

    .dark & {
      --button-bg: var(--n0-700);
      --button-bg-hover: var(--n0-800);
      --button-bg-active: var(--n0-900);
    }
  }

  &._button_mode_ghost {
    --button-fg: var(--fg);
    --button-bg: transparent;
    --button-bg-hover: var(--s2-bg);
    --button-bg-active: var(--t3-bg);
    font-weight: inherit;

    &, &:hover, &:active {
      font-weight: inherit;
    }
  }

  &._button_mode_outline {
    --button-border: var(--input-border);
    --button-fg: var(--fg);
    --button-bg: transparent;
    --button-bg-hover: var(--s2-bg);
    --button-bg-active: var(--t3-bg);
    font-weight: inherit;

    &, &:hover, &:active {
      font-weight: inherit;
    }
  }

  // Colors
  &, &:hover, &:active {
    color: var(--button-fg);
    text-decoration: none;
    font-weight: 600;
  }

  background: var(--button-bg);
  border: 1px solid var(--button-border, transparent);
  padding: 7px;

  &._button_size_small {
    padding: 4;
    font-size: 13; // height=20px
    --input-height: px(20);
  }

  &._button_size_large {
    padding: 12;
    font-size: 20; // height=44px
    --input-height: px(44);
  }

  &._button_dropdown::after {
    display: inline-block;
    margin-left: 0; // 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }
}

oui-input-default() {
  oui-input-reset();
  padding-x: 8;
  // min-height: var(--button-height, var(--input-height, px(32)));
  min-height: var(--input-height, px(32));
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  color: var(--input-fg);
  background: var(--input-bg, var(--input-bg-default, var(--t3-bg)));
  max-width: 100%;

  &:hover {
    border-color: var(--input-border-hover);
  }

  &:focus, &:focus-within {
    box-shadow: var(--input-shadow-focus);
    border-color: var(--input-border-focus) !important; /* Workaround for :focus that otherwise stays after mouse click */
  }

  &[disabled] {
    background-color: var(--t3-bg);
    color: var(--s2-fg);
    cursor: not-allowed;
  }
}

oui-input-text() {
  oui-input-default();
  display: inline-flex;
}

oui-input-textarea() {
  oui-input-default();
  padding-y: 6;
  line-height: 1.2;
}

oui-input-textarea-grow() {
  overflow: hidden !important;
  height: var(--input-height, px(32));
  resize: none;
}

oui-input-number() {
  oui-input-default();
  width: 12ch;
}

oui-select-icon() {
  padding-right: px(20 + 8);
  background: right no-repeat;
  background-color: var(--input-bg);
  background-position: right px(4) top 50%;
  background-size: px(20) px(20);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='rgba(0,0,0,0.5)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  .dark & {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='rgba(255,255,255,0.5)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

oui-select() {
  oui-input-default();
  oui-select-icon();
  padding-y: 0;
  line-height: px(30);
}

control-boolean-height = px(16);
control-boolean-width = px(32);
control-boolean-margin = px(1);

oui-boolean-default() {
  oui-input-reset();
  --active: var(--button-bg);
  --active-inner: var(--button-fg);
  --border: var(--input-border);
  --border-hover: var(--button-bg-hover);
  --background: var(--input-bg);
  --disabled: -gray-100;
  --disabled-inner: -gray-100;
  height: control-boolean-height;
  width: control-boolean-height;
  outline: none;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  margin: 0;
  margin-bottom: px(-2); // Align better
  // cursor: pointer;
  border: 1px solid var(--bc, var(--border));
  background: var(--b, var(--background));
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;

  &:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  &:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }

  &._checkbox_intermediate {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }

  &:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;

    &:checked {
      --b: var(--disabled-inner);
      --bc: var(--border);
    }

    & + label {
      cursor: not-allowed;
    }
  }

  &:hover {
    &:not(:checked) {
      &:not(:disabled) {
        border-color: var(--input-border-hover); /* --bc: var(--border-hover); */
      }
    }
  }

  & + label {
    line-height: control-boolean-height;
    display: inline-block;
    vertical-align: top;
    // cursor: pointer;
  }

  &:focus-visible {
    box-shadow: var(--input-shadow-focus);
    border-color: var(--input-border-focus); /* Workaround for :focus that otherwise stays after mouse click */
  }
}

oui-checkbox() {
  oui-boolean-default();
  border-radius: 4px;
  width: control-boolean-height;

  &:after {
    opacity: var(--_checkbox-opacity, 0);
    width: rex(5);
    height: rex(9);
    border: rex(2) solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: rex(5);
    top: rex(2);
    transform: rotate(var(--_checkbox-rotation, 20deg));
  }

  &:checked {
    --_checkbox-opacity: 1;
    --_checkbox-rotation: 43deg;
  }

  &._checkbox_intermediate {
    --_checkbox-opacity: 1;
    --_checkbox-rotation: 90deg;

    &:after {
      top: 1;
      left: 4;
      width: 6;
      border-bottom: 0;
    }
  }
}

oui-switch() {
  oui-boolean-default();
  height: control-boolean-height; // + px(2)
  width: control-boolean-width;
  border-radius: 999px;

  &:after { // knob
    left: control-boolean-margin;
    top: control-boolean-margin;
    border-radius: 50%;
    width: control-boolean-height - control-boolean-margin * 2 - px(2);
    height: control-boolean-height - control-boolean-margin * 2 - px(2); // height -margin - border
    background: var(--_checkbox-switch-active-bg, var(--border));
    transform: translateX(var(--_checkbox-switch-x, 0));
  }

  &:checked {
    --_checkbox-switch-active-bg: var(--active-inner);
    --_checkbox-switch-x: control-boolean-width - control-boolean-height - control-boolean-margin;
  }

  &:disabled {
    cursor: not-allowed;

    &:not(:checked) {
      &:after {
        opacity: 0.6;
      }
    }
  }

  &:focus-visible {
    box-shadow: var(--input-shadow-focus);
    border-color: var(--input-border-focus); /* Workaround for :focus that otherwise stays after mouse click */
  }
}

oui-radio() {
  oui-boolean-default();
  border-radius: 50%;

  &:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  &:checked {
    --s: 0.5;
  }
}