twindy/src/mixins/spaces.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

// (C)opyright 2020-11-19 Dirk Holtwick, holtwick.it. All rights reserved.

// Paddings
padding-left(value) {
  padding-left: rex(value);
}

padding-right(value) {
  padding-right: rex(value);
}

padding-top(value) {
  padding-top: rex(value);
}

padding-bottom(value) {
  padding-bottom: rex(value);
}

padding(args) {
  padding: rexArgs(arguments);
}

padding-x(value) {
  padding-left: value;
  padding-right: value;
}

padding-y(value) {
  padding-top: value;
  padding-bottom: value;
}

// Margins
margin-left(value) {
  margin-left: rex(value);
}

margin-right(value) {
  margin-right: rex(value);
}

margin-top(value) {
  margin-top: rex(value);
}

margin-bottom(value) {
  margin-bottom: rex(value);
}

margin(args) {
  margin: rexArgs(arguments);
}

margin-x(value) {
  margin-left: value;
  margin-right: value;
}

margin-y(value) {
  margin-top: value;
  margin-bottom: value;
}

// Spaces
space-x(value = 8) {
  // & > * + *
  > *:not(:last-child) {
    margin-right: rex(value);
  }
}

space-y(value = 8) {
  // & > * + *
  > *:not(:last-child) {
    margin-bottom: rex(value);
  }
}

space(value = 8) {
  space-x(value);
  space-y(value);
}

-safe-top = env(safe-area-inset-top, 0);
-safe-right = env(safe-area-inset-right, 0);
-safe-bottom = env(safe-area-inset-bottom, 0);
-safe-left = env(safe-area-inset-left, 0);
-safe = -safe-top -safe-right -safe-bottom -safe-left;

safe-padding() {
  padding: -safe-top -safe-right -safe-bottom -safe-left;
}

safe-margin() {
  margin: -safe-top -safe-right -safe-bottom -safe-left;
}