oui-kit/stylus/preset/layout.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../mixins/base.styl";

oui-layout() {
  if __oui_once("layout") {
    .stack-x {
      use: stack-x;
    }

    .stack-y {
      use: stack-y;
    }

    .button-group {
      use: stack-x;
      gap: 8;
    }

    .center, .centered {
      use: stack-item-center;
    }

    .scroll, .scollable {
      use: stack-item-scroll;
      contain: content;
    }

    .space, .grow {
      flex: auto !important;
      overflow: hidden !important;
    }

    .fixed-space {
      width: 24;
    }
  }
}

oui-preset-layout() {
  if __oui_once("layoutpreset") {
    ._stack_x {
      use: stack-x;
    }

    ._stack_y {
      use: stack-y;
    }

    ._center {
      use: stack-item-center;
    }

    ._scroll {
      use: stack-item-scroll;
      contain: content;
    }

    ._space, ._grow {
      flex: auto !important;
      overflow: hidden !important;
    }
  }
}

oui-preset-layout-attrs() {
  if __oui_once("layoutattrs") {
    .ox {
      use: stack-x;
    }

    .oy {
      use: stack-y;
    }

    .oc {
      use: stack-item-center;
    }

    .oscroll {
      use: stack-item-scroll;
      contain: content;
    }

    .ospace, .ogrow {
      flex: auto;
    }

    .ofix {
      flex: 0;
    }

    .ogap {
      gap: var(--space-s, px(8));
    }

    .odots {
      use: ellipsis;
    }
  }
}

oui-preset-layout-attrs2() {
  if __oui_once("layoutattrs2") {
    .-x {
      use: stack-x;
    }

    .-y {
      use: stack-y;
    }

    .-center {
      use: stack-item-center;
    }

    .-scroll {
      use: stack-item-scroll;
      contain: content;
    }

    .-grow {
      flex: auto;
    }

    .-fix {
      flex: 0;
    }

    .-gap {
      flex: 0;
      gap: var(--space-s, px(8));
    }

    .-sep {
      width: var(--space-s, px(8));
    }

    .-dots {
      use: ellipsis;
    }
  }
}