modo-mobile/lib/style/mixins/hairline.less

A mobile UI toolkit, based on React

// 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 '../themes/default';

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

.hairline(@direction, @color: @border-color-base, @size: 1px) when (@direction = 'top') {
  &::before {
    .scale-hairline-common(@color, 0, auto, auto, 0);
    width: 100%;
    height: @size;
    transform-origin: 50% 50%;
    transform: scaleY(0.5);
  }
}

.hairline(@direction, @color: @border-color-base, @size: 1px) when (@direction = 'right') {
  &::after {
    .scale-hairline-common(@color, 0, 0, auto, auto);
    width: @size;
    height: 100%;
    background: @color;
    transform-origin: 100% 50%;
    transform: scaleX(0.5);
  }
}

.hairline(@direction, @color: @border-color-base, @size: 1px) when (@direction = 'bottom') {
  &::after {
    .scale-hairline-common(@color, auto, auto, 0, 0);
    width: 100%;
    height: @size;
    transform-origin: 50% 100%;
    transform: scaleY(0.5);
  }
}

.hairline(@direction, @color: @border-color-base, @size: 1px) when (@direction = 'left') {
  &::before {
    .scale-hairline-common(@color, 0, auto, auto, 0);
    width: @size;
    height: 100%;
    transform-origin: 100% 50%;
    transform: scaleX(0.5);

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

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

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

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

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

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

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