dora-ui/lib/style/mixins/hairline.less

A React.js Mobile UI Library

// inspired by https://github.com/nolimits4web/Framework7/blob/v2/src/less/mixins.less#L76
// but more powerful, both support viewport scale and not scale usage.

@import '../vars.less';

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
  position: absolute;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
  z-index: 1;
  display: block;
  background-color: @color;
  content: '';
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'top') {
  border-top: 1px solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-top: none;

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0);

        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 50% 50%;

        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'right') {
  border-right: 1px solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-right: none;

      &::after {
        .scale-hairline-common(@color, 0, 0, auto, auto);

        width: 1px;
        height: 100%;
        background: @color;
        transform: scaleX(0.5);
        transform-origin: 100% 50%;

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'bottom') {
  border-bottom: 1px solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-bottom: none;

      &::after {
        .scale-hairline-common(@color, auto, auto, 0, 0);

        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 50% 100%;

        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'left') {
  border-left: 1px solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-left: none;

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0);

        width: 1px;
        height: 100%;
        transform: scaleX(0.5);
        transform-origin: 100% 50%;

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base, @radius: 0) when (@direction = 'all') {
  border: 1px solid @color;
  border-radius: @radius;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      position: relative;
      border: none;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        border: 1px solid @color;
        border-radius: @radius * 2;
        transform: scale(0.5);
        transform-origin: 0 0;
        content: '';
        pointer-events: none;

        // @media (min-resolution: 3dppx) {
        //   width: 300%;
        //   height: 300%;
        //   border-radius: @radius * 3;
        //   transform: scale(0.33);
        // }
      }
    }
  }
}

.hairline-remove(@position) when (@position = 'left') {
  border-left: 0;
  &::before {
    display: none !important;
  }
}

.hairline-remove(@position) when (@position = 'right') {
  border-right: 0;
  &::after {
    display: none !important;
  }
}

.hairline-remove(@position) when (@position = 'top') {
  border-top: 0;
  &::before {
    display: none !important;
  }
}

.hairline-remove(@position) when (@position = 'bottom') {
  border-bottom: 0;
  &::after {
    display: none !important;
  }
}

.hairline-remove(@position) when (@position = 'all') {
  border: 0;
  &::before {
    display: none !important;
  }
}