@skyscanner/backpack-web 38.22.0 → 39.0.0

package/unstable__bpk-mixins/_utils.scss

@@ -1,267 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* stylelint-disable at-rule-disallowed-list */
-
-@use "sass:string";
-@use 'tokens.scss';
-
-////
-/// @group utils
-////
-
-/// Standard focus indicator for elements.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-focus-indicator();
-///   }
-
-@mixin bpk-focus-indicator {
-  outline: (tokens.$bpk-one-pixel-rem * 2) solid tokens.$bpk-text-link-day;
-  outline-offset: (tokens.$bpk-one-pixel-rem * 2);
-}
-
-/// Hide visually and from screen readers.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-hidden();
-///   }
-
-@mixin bpk-hidden {
-  display: none !important; /* stylelint-disable-line declaration-no-important */
-}
-
-/// Hide only visually, but have it available for screen readers:
-///
-/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-///
-/// @example scss
-///   .selector {
-///     @include bpk-visually-hidden();
-///   }
-
-@mixin bpk-visually-hidden {
-  position: absolute;
-  width: 1px; /* stylelint-disable-line unit-disallowed-list */
-  height: 1px; /* stylelint-disable-line unit-disallowed-list */
-  margin: -1px; /* stylelint-disable-line unit-disallowed-list */
-  padding: 0;
-  border: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
-/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard:
-///
-/// https://www.drupal.org/node/897638
-///
-/// @require {mixin} bpk-visually-hidden
-///
-/// @example scss
-///   .selector {
-///     @include bpk-visually-hidden();
-///     @include bpk-visually-hidden--focusable();
-///   }
-
-@mixin bpk-visually-hidden--focusable {
-  &:active,
-  &:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-  }
-}
-
-/// Hide visually and from screen readers, but maintain layout.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-invisible();
-///   }
-
-@mixin bpk-invisible {
-  visibility: hidden;
-}
-
-/// Clearfix: contain floats.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-clearfix();
-///   }
-
-@mixin bpk-clearfix {
-  &::before,
-  &::after {
-    content: '';
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
-}
-
-/// Target RTL specific styles.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-rtl() {
-///       /* RTL scss goes here */
-///     }
-///   }
-
-@mixin bpk-rtl {
-  html[dir='rtl'] & {
-    @content;
-  }
-}
-
-/// :hover pseudo selector wrapper which prevents styles displaying on touch devices
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-hover() {
-///       /* Non-touch specific hover scss goes here */
-///     }
-///   }
-
-@mixin bpk-hover {
-  .bpk-no-touch-support &:hover:not(:active):not(:disabled) {
-    @content;
-  }
-
-  // Duplicating the above rule with `:global(...)` pseudo selector around the
-  // global `.bpk-no-touch-support` class to provide support for CSS modules.
-  // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped
-  //   leaving a duplicate rule which in turn will be 'uglified' out - so no worries there
-  // - when processed through node-sass only, the `:global(...)` pseudo selector will be left
-  //   intact and ignored by all browsers
-  // stylelint-disable-next-line selector-pseudo-class-no-unknown
-  :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) {
-    @content;
-  }
-}
-
-/// Target locale specific styles.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-locale('ja-JP') {
-///       /* ja-JP scss goes here */
-///     }
-///   }
-
-@mixin bpk-locale($locale) {
-  html[lang='#{$locale}'] &,
-  html[lang='#{string.to_lower_case($locale)}'] & {
-    @content;
-  }
-}
-
-/// Create a Backpack themeable property with
-/// fallback support for old browsers and when
-/// the CSS variable is not defined.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color);
-///   }
-
-@mixin bpk-themeable-property($property, $variableName, $fallback) {
-  #{$property}: $fallback;
-  #{$property}: var($variableName, $fallback);
-}
-
-/// Create a property that uses the Backpack primary color blue-500.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-apply-primary-color-to(color);
-///   }
-@mixin bpk-apply-primary-color-to($property) {
-  @include bpk-themeable-property(
-    $property,
-    --bpk-primary-color,
-    tokens.$bpk-color-sky-blue
-  );
-}
-
-/// Replace part of a string with another string.
-///
-/// @param {string} $string - The string inside which the replacement should take place.
-/// @param {string} $search - The substring to be replaced.
-/// @param {string} $replace [''] - The string to replace $search.
-
-@function str-replace($string, $search, $replace: '') {
-  /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */
-  /* stylelint-disable-next-line scss/no-global-function-names */
-  $index: string.index($string, $search);
-
-  @if $index {
-    @return string.slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        string.slice($string, $index + string.length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}
-
-/// Increases the tappable area of the element to the
-/// minimum required for touch devices.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-touch-area;
-///   }
-
-@mixin bpk-touch-tappable {
-  position: relative;
-
-  &::before {
-    position: absolute;
-    /* stylelint-disable-next-line function-calc-no-invalid */
-    top: calc((-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%);
-    /* stylelint-disable-next-line function-calc-no-invalid */
-    left: calc((-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%);
-    content: '';
-    width: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm();
-    height: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm();
-  }
-}