oui-kit/stylus/mixins/borders.styl

🎯 *UI toolkit with a French touch* 🇫🇷

border-radius(value) {
  if length(arguments) == 1 {
    if value is a "unit" {
      border-radius: rex(value);
    } else {
      border-radius: value;
    }
  } else {
    border-radius: rexArgs(arguments);
  }
}

divide-x(color = -gray-500, width = 1px) {
  & > * + * {
    border-left-color: color;
    border-left-width: width;
    border-left-style: solid;
  }
}

divide-y(color = -gray-500, width = 1px) {
  & > * + * {
    border-top-color: color;
    border-top-width: width;
    border-top-style: solid;
  }
}

ring(ringColor = red, value = 1, offset = 0) {
  box-shadow: 0 0 0 calc(rex(value) + rex(offset)) ringColor;
}

-box-shadow-xs = 0 0 0 1px rgba(0, 0, 0, 0.05);
-box-shadow-sm = 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-box-shadow-base = 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-box-shadow-md = 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-box-shadow-lg = 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-box-shadow-xl = 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-box-shadow-2xl = 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-box-shadow-3xl = 0 35px 60px -15px rgba(0, 0, 0, 0.3);
-box-shadow-inner = inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-box-shadow-outline = 0 0 0 3px rgba(66, 153, 225, 0.5);
-box-shadow-focus = 0 0 0 3px rgba(66, 153, 225, 0.5);

box-shadow(value = base) {
  if value is a "ident" {
    box-shadow: lookup("-box-shadow-" + value);
  } else {
    box-shadow: value;
  }
}