@fluido/ui-containers/esm/box/styled.js

A framework for create front-end easy and fast

import { styled } from '@fluido/ui';
export const Box_ = styled('div') `
  background: #or($background, $bg);
  background-color: #or($backgroundColor, $bgColor);
  stroke: $strokeColor;
  fill: $fillColor;

  #if($gradient && $gradientType == linear-gradient) {
    background-image: #or($gradientType, linear-gradient)
      (#or($gradientDirection, to right), $gradient);
  }

  color: $color;

  margin: #or(~$margin, ~$m);
  margin-top: #or(~$marginTop, ~$mt, ~$my);
  margin-right: #or(~$marginRight, ~$mr, ~$mx);
  margin-bottom: #or(~$marginBottom, ~$mb, ~$my);
  margin-left: #or(~$marginLeft, ~$ml, ~$mx);
  margin-inline: #or(~$marginInline, ~$mil);
  margin-inline-start: #or(~$marginInlineStart, ~$mis);
  margin-inline-end: #or(~$marginInlineEnd, ~$mie);
  margin-block: #or(~$marginBlock, ~$mbl);
  margin-block-start: #or(~$marginBlockStart, ~$mbs);
  margin-block-end: #or(~$marginBlockEnd, ~$mbe);
  margin-inline: #or(~$marginInline, ~$mil);
  margin-inline-start: #or(~$marginInlineStart, ~$mis);
  margin-inline-end: #or(~$marginInlineEnd, ~$mie);

  padding: #or(~$padding, ~$p);
  padding-top: #or(~$paddingTop, ~$pt, ~$py);
  padding-right: #or(~$paddingRight, ~$pr, ~$px);
  padding-bottom: #or(~$paddingBottom, ~$pb, ~$py);
  padding-left: #or(~$paddingLeft, ~$pl, ~$px);
  padding-inline: #or(~$paddingInline, ~$pil);
  padding-inline-start: #or(~$paddingInlineStart, ~$pis);
  padding-inline-end: #or(~$paddingInlineEnd, ~$pie);
  padding-block: #or(~$paddingBlock, ~$pbl);
  padding-block-start: #or(~$paddingBlockStart, ~$pbs);
  padding-block-end: #or(~$paddingBlockEnd, ~$pbe);
  padding-inline: #or(~$paddingInline, ~$pil);
  padding-inline-start: #or(~$paddingInlineStart, ~$pis);
  padding-inline-end: #or(~$paddingInlineEnd, ~$pie);

  #if($border) {
    border-color: #or($borderColor, currentColor);
    border-style: #or($borderStyle, solid);
    border-width: ~$border;
  }

  border-radius: #or(~$borderRadius, ~$radius);
  border-top-left-radius: #or(
    ~$borderTopLeftRadius,
    ~$radiusTL,
    ~$borderTopRadius,
    ~$radiusT,
    ~$borderLeftRadius,
    ~$radiusL
  );
  border-top-right-radius: #or(
    ~$borderTopRightRadius,
    ~$radiusTR,
    ~$borderTopRadius,
    ~$radiusT,
    ~$borderRightRadius,
    ~$radiusR
  );
  border-bottom-left-radius: #or(
    ~$borderBottomLeftRadius,
    ~$radiusBL,
    ~$borderBottomRadius,
    ~$radiusB,
    ~$borderLeftRadius,
    ~$radiusL
  );
  border-bottom-right-radius: #or(
    ~$borderBottomRightRadius,
    ~$radiusBR,
    ~$borderBottomRadius,
    ~$radiusB,
    ~$borderRightRadius,
    ~$radiusR
  );

  #if($boxShadow) {
    box-shadow: #or($boxShadow);
  }

  #if($shadow) {
    box-shadow: 0px calc(~$shadow / 8 * ($shadow / 2))
        calc(~$shadow / 8 * ($shadow)) calc(~$shadow / 8 * ($shadow * -0.25))
        rgb(0 0 0 / calc(0.12 + $shadow / 50)),
      0px calc(~$shadow / 6 * ($shadow / 2 + 1))
        calc(~$shadow / 6 * ($shadow * 1.25))
        calc(~$shadow / 6 * ($shadow * -0.25)) rgb(0 0 0 / 0.12),
      0px calc(~$shadow / 4 * ($shadow / 2))
        calc(~$shadow / 4 * ($shadow * 1.25))
        calc(~$shadow / 4 * ($shadow * -0.5))
        rgb(0 0 0 / calc(0.12 - $shadow / 50));
  }

  #if($textDecoration) {
    text-decoration-color: #or($textDecorationColor, currentColor);
    text-decoration-style: #or($textDecorationStyle, solid);
    text-decoration-thickness: #or($textDecorationThickness, from-font);
    text-decoration-skip-ink: #and($avoidSkipInk, none);
    text-decoration-line: $textDecoration;
  }

  width: #or(~$width, ~$w, ~$size);
  min-width: #or(~$minWidth, ~$minW);
  max-width: #or(~$maxWidth, ~$maxW);

  height: #or(~$height, ~$h, ~$size);
  min-height: #or(~$minHeight, ~$minH);
  max-height: #or(~$maxHeight, ~$maxH);

  opacity: $opacity;

  user-select: #and($preventSelection, none);

  font-family: $fontFamily, $theme.fontFamily.base;
  font-size: ~$fontSize;
  font-weight: $fontWeight;
  letter-spacing: $letterSpacing;
  line-height: ~$lineHeight;
  text-align: $textAlign;
  font-style: $fontStyle;
  text-decoration: $textDecoration;
  text-transform: $textTransform;

  overflow: $overflow;
  overflow-x: $overflowX;
  overflow-y: $overflowY;

  display: #or($display, $d);

  outline: 1px solid red;
`;