oui-kit/stylus/mixins/spaces.styl

> *...c'est un "kit" pour Vue.js :)*

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

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

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

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

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

gap(value) {
  gap: rex(value);
}

gap-x(value) {
  column-gap: rex(value);
}

gap-y(value) {
  row-gap: rex(value);
}