oui-kit/stylus/mixins/layout.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "./base.styl";

-media-sm = "(min-width: 640px)";
-media-md = "(min-width: 768px)";
-media-lg = "(min-width: 1024px)";
-media-xl = "(min-width: 1280px)";
-media-xl2 = "(min-width: 1536px)";
-media-landscape = "(orientation: landscape)"; // getbootstrap.com/docs/5.0/layout/breakpoints/#max-width *//* Orientation https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width */
-media-portrait = "(orientation: portrait)";
-media-mobile = "screen and (max-width: 888px)";
-media-desktop = "screen and (min-width: 888.02px)";
-media-pointer-touch = "(hover: none) and (pointer: coarse)";
-media-pointer-stylus = "(hover: none) and (pointer: fine)";
-media-pointer-pointer = "(hover) and (pointer: coarse)";
-media-pointer-mouse = "(hover) and (pointer: fine)";
-media-safariONLY = unquote("(-webkit-hyphens: none)");
-media-firefoxONLY = unquote("(-moz-appearance: none)");
-media-chromeONLY = unquote("(-webkit-tap-highlight-color: black)");
-desktop = -media-desktop;
-mobile = -media-mobile;
-dark = "(prefers-color-scheme: dark)";
-light = "(prefers-color-scheme: light)";
-media-dark = "(prefers-color-scheme: dark)";
-media-light = "(prefers-color-scheme: light)";
-media-print = print;
-media-screen = screen;
-media-fullscreen = "(display-mode: fullscreen)";
-media-standalone = "(display-mode: standalone)";
-fullscreen = -media-fullscreen;

stack-x(space = 0) {
  display: flex;
  flex-direction: row;

  if space != 0 {
    gap: space;
  }

  :where(& > *) {
    flex-shrink: 0;
    flex-grow: 0;
  }
}

stack-y(space = 0) {
  display: flex;
  flex-direction: column;

  if space != 0 {
    gap: space;
  }

  :where(& > *) {
    flex-shrink: 0;
    flex-grow: 0;
  }
}

center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

vscroll() {
  // https://css-tricks.com/popping-hidden-overflow/
  // -webkit-overflow-scrolling: touch !important;
  // !important is required to override -fix overflow:hidden
  position: static !important;   /* overflow: hidden;
  &:hover { */
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;   /* }
  // This should speed up rendering quite a bit:
  // https://twitter.com/simurai/status/1219504338764091393
  // https://developer.mozilla.org/en-US/docs/Web/CSS/contain
   */
  contain: content;
}

scrollable = vscroll;
scroll = vscroll;

grow() {
  flex: auto;
  overflow: hidden;
}

stack-item-center = center;
stack-item-scroll = vscroll;
stack-item-grow = grow;

container() {
  margin-x: 32;

  @media -lg {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
  }
}

-z-index-0 = 1;
-z-index-1 = 100;
-z-index-2 = 200;
-z-index-3 = 300;
-z-index-4 = 400;
-z-index-5 = 500;
-z-index-6 = 600;
-z-index-7 = 700;
-z-index-8 = 800;
-z-index-9 = 900; /* Content > Floating > Overlay > Modal > Popover > Tooltip */
-z-index-floating = -z-index-1; /* separator-handle, knobs */
-z-index-overlay = -z-index-2; /* modal backgrounds */
-z-index-modal = -z-index-3; /* modal, dialog, page (mobile) */
-z-index-popover = -z-index-4; /* menu, dropdown, popover */
-z-index-tooltip = -z-index-1;

grid-wrapped(size = 200, gap = 16) {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(px(size), 1fr)
  );
  gap: px(gap);
}