twindy/src/mixins/layout.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

// (C)opyright 2020-11-17 Dirk Holtwick, holtwick.it. All rights reserved.
@require "utils.styl";

// Media
// -sm = "(min-width: 640px)"
// -md = "(min-width: 768px)"
// -lg = "(min-width: 1024px)"
// -xl = "(min-width: 1280px)"
-dark = "(prefers-color-scheme: dark)";
// 
-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-dark = "(prefers-color-scheme: dark)";
-media-light = "(prefers-color-scheme: light)";
-media-landscape = "(orientation: landscape)";
-media-portrait = "(orientation: portrait)";
// https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width
-media-mobile = "screen and (max-width: 812px)";
-media-desktop = "screen and (min-width: 812.02px)";

// // $tablet-width: 768px;
// $tablet-width: 1024px;
// // $desktop-width: 1024px;
* {
  flex: none;
}

// Stacked Layout
$stack {
  display: flex;

  /* // flex-wrap nowrap
  > * {
    flex: none;
  } */
}

stack-x(space = 0) {
  @extend $stack;

  flex-direction: row;

  if space != 0 {
    space-x: space;
  }
}

stack-y(space = 0) {
  @extend $stack;

  flex-direction: column;

  if space != 0 {
    space-y: space;
  }
}

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);
}