helpers.less

/**
 * Debug an element with an outline with custom size and color.
 */
.debug (@size: 1px, @color: red) {
  outline: @size solid @color;
}

/**
 * Set bigger hitzone with :after.
 */
.hitZone (@horizontalSize: 10px, @verticalSize: 10px, @color: transparent) {
  &:after {
    content: "";
    background-color: @color;
    position: absolute;
    top: -@verticalSize;
    right: -@horizontalSize;
    bottom: -@verticalSize;
    left: -@horizontalSize;
  }
}

/**
 * Hide text only visually to preserve seo check
 * https://webaim.org/techniques/css/invisiblecontent/#techniques
 * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visuallyHidden() {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

// ----------------------------------------------------------------------------- POSITION AND SIZE

/**
 * Center with absolute and translate yx, y or x.
 * Use with caution, preferable to avoid and use flex most of time.
 */
.absoluteCenter (@axis:yx) {
  & when (@axis = yx) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  & when (@axis = y) {
    position: absolute;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }

  & when (@axis = x) {
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/**
 * Remove touch callout on safari mobile
 */
.disableTouchCallout () {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

// ----------------------------------------------------------------------------- SCROLLS

/**
 * Patch scrolling on iOS
 */
.hideScrollBar () {
  overflow-scrolling: touch;
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}

/**
 * Force scrollBar to be shown
 */
.showScrollBar () {
  -ms-overflow-style: scrollbar;
  &::-webkit-scrollbar {
    width: auto;
    height: auto;
  }
}

// ----------------------------------------------------------------------------- FONTS

/**
 * Smooth fonts
 */
.fontSmooth () {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}