@skyscanner/backpack-web 38.22.0 → 40.0.0

package/unstable__bpk-mixins/_icons.scss

@@ -1,88 +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 'tokens.scss';
-@use 'utils.scss';
-
-////
-/// @group svgs
-////
-
-/// Button alignment utility.
-///
-/// @access private
-
-@mixin _bpk-svg--align-to-button() {
-  vertical-align: text-bottom;
-}
-
-/// Large button alignment utility.
-///
-/// @access private
-
-@mixin _bpk-svg--align-to-large-button() {
-  margin-top: (tokens.$bpk-private-button-line-height - tokens.$bpk-icon-size-lg) * 0.5;
-  vertical-align: top;
-}
-
-/// Align to button. Modifies the bpk-icon-sm mixin.
-///
-/// @require {mixin} bpk-icon-sm
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon-sm(flight-sky-gray-tint-02);
-///     @include bpk-icon-sm--align-to-button();
-///   }
-
-@mixin bpk-icon-sm--align-to-button() {
-  @include _bpk-svg--align-to-button;
-}
-
-/// Align to large button. Modifies the bpk-icon-lg mixin.
-///
-/// @require {mixin} bpk-icon-lg
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon-lg(flight-sky-gray-tint-02);
-///     @include bpk-icon-lg--align-to-large-button();
-///   }
-
-@mixin bpk-icon-lg--align-to-large-button() {
-  @include _bpk-svg--align-to-large-button;
-}
-
-/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.
-///
-/// @require {mixin} bpk-icon-sm
-/// @require {mixin} bpk-icon-lg
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon-sm(flight-sky-gray-tint-02);
-///     @include bpk-icon--rtl-support();
-///   }
-
-@mixin bpk-icon--rtl-support() {
-  @include utils.bpk-rtl {
-    transform: scaleX(-1);
-  }
-}

package/unstable__bpk-mixins/_index.scss

@@ -1,38 +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.
- */
-
-@forward 'tokens';
-@forward 'badges';
-@forward 'borders';
-@forward 'breakpoints';
-@forward 'buttons';
-@forward 'cards';
-@forward 'chips';
-@forward 'forms';
-@forward 'icons';
-@forward 'layers';
-@forward 'margins';
-@forward 'panels';
-@forward 'radii';
-@forward 'scroll-indicators';
-@forward 'shadows';
-@forward 'spinners';
-@forward 'typography';
-@forward 'utils';
-
-@warn "You're using blank import of all mixins. This might affect performance of your build tool and your bundle size. \nConsider switching to more granular imports, e.g. @use '@skyscanner/backpack-web/bpk-mixins/buttons'";

package/unstable__bpk-mixins/_layers.scss

@@ -1,199 +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 'tokens.scss';
-@use 'radii.scss';
-@use 'shadows.scss';
-@use 'utils.scss';
-
-////
-/// @group layers
-////
-
-/// Layer base styles.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-layer;
-///   }
-
-@mixin bpk-layer(
-  $background-color: tokens.$bpk-color-white,
-  $border-color: tokens.$bpk-surface-highlight-day
-) {
-  border: tokens.$bpk-one-pixel-rem solid $border-color;
-  background-color: $background-color;
-
-  @include radii.bpk-border-radius-sm;
-  @include shadows.bpk-box-shadow-lg;
-}
-
-/// Layer arrow base styles.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-layer-arrow(1rem);
-///   }
-
-@mixin bpk-layer-arrow($arrow-size) {
-  position: absolute;
-  pointer-events: none;
-
-  &::before,
-  &::after {
-    position: absolute;
-    content: '';
-    display: block;
-  }
-
-  &::before {
-    border: ($arrow-size + tokens.$bpk-one-pixel-rem) solid transparent;
-  }
-
-  &::after {
-    border: $arrow-size solid transparent;
-  }
-}
-
-/// Layer top arrow.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-layer-arrow(1rem);
-///     @include bpk-layer-arrow-top(1rem);
-///   }
-
-@mixin bpk-layer-arrow-top(
-  $arrow-size,
-  $arrow-color: tokens.$bpk-color-white,
-  $border-color: tokens.$bpk-color-sky-gray-tint-06
-) {
-  bottom: 100%;
-  width: ($arrow-size * 2);
-  height: $arrow-size;
-
-  &::before {
-    top: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
-    margin-left: -1 * tokens.$bpk-one-pixel-rem;
-    border-bottom-color: $border-color;
-
-    @include utils.bpk-rtl {
-      margin-right: -1 * tokens.$bpk-one-pixel-rem;
-      margin-left: 0;
-    }
-  }
-
-  &::after {
-    top: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
-    border-bottom-color: $arrow-color;
-  }
-}
-
-/// Layer right arrow.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-layer-arrow(1rem);
-///     @include bpk-layer-arrow-right(1rem);
-///   }
-
-@mixin bpk-layer-arrow-right(
-  $arrow-size,
-  $arrow-color: tokens.$bpk-color-white,
-  $border-color: tokens.$bpk-color-sky-gray-tint-06
-) {
-  left: 100%;
-  width: $arrow-size;
-  height: ($arrow-size * 2);
-
-  &::before {
-    right: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
-    margin-top: -1 * tokens.$bpk-one-pixel-rem;
-    border-left-color: $border-color;
-  }
-
-  &::after {
-    right: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
-    border-left-color: $arrow-color;
-  }
-}
-
-/// Layer bottom arrow.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-layer-arrow(1rem);
-///     @include bpk-layer-arrow-bottom(1rem);
-///   }
-
-@mixin bpk-layer-arrow-bottom(
-  $arrow-size,
-  $arrow-color: tokens.$bpk-color-white,
-  $border-color: tokens.$bpk-color-sky-gray-tint-06
-) {
-  top: 100%;
-  width: ($arrow-size * 2);
-  height: $arrow-size;
-
-  &::before {
-    bottom: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
-    margin-left: -1 * tokens.$bpk-one-pixel-rem;
-    border-top-color: $border-color;
-
-    @include utils.bpk-rtl {
-      margin-right: -1 * tokens.$bpk-one-pixel-rem;
-      margin-left: 0;
-    }
-  }
-
-  &::after {
-    bottom: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
-    border-top-color: $arrow-color;
-  }
-}
-
-/// Layer left arrow.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-layer-arrow(1rem);
-///     @include bpk-layer-arrow-left(1rem);
-///   }
-
-@mixin bpk-layer-arrow-left(
-  $arrow-size,
-  $arrow-color: tokens.$bpk-color-white,
-  $border-color: tokens.$bpk-color-sky-gray-tint-06
-) {
-  right: 100%;
-  width: $arrow-size;
-  height: ($arrow-size * 2);
-
-  &::before {
-    left: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
-    margin-top: -1 * tokens.$bpk-one-pixel-rem;
-    border-right-color: $border-color;
-  }
-
-  &::after {
-    left: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
-    border-right-color: $arrow-color;
-  }
-}

package/unstable__bpk-mixins/_margins.scss

@@ -1,75 +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 'utils.scss';
-
-/// RTL aware leading margin
-///
-/// @param {string} $margin The desired leading margin.
-/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-margin-leading(bpk-spacing-base());
-///   }
-@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) {
-  margin-left: $margin;
-
-  @if $resetOppositeMargin {
-    margin-right: 0;
-  }
-
-  @include utils.bpk-rtl {
-    @if $resetOppositeMargin {
-      margin-left: 0;
-    }
-
-    margin-right: $margin;
-  }
-}
-
-/// RTL aware trailing margin
-///
-/// @param {string} $margin The desired trailing margin.
-/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0.
-///
-/// @content
-///
-/// @example scss
-///   .selector {
-///     @include bpk-margin-trailing(bpk-spacing-base());
-///   }
-@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) {
-  @if $resetOppositeMargin {
-    margin-left: 0;
-  }
-
-  margin-right: $margin;
-
-  @include utils.bpk-rtl {
-    margin-left: $margin;
-
-    @if $resetOppositeMargin {
-      margin-right: 0;
-    }
-  }
-}

package/unstable__bpk-mixins/_panels.scss

@@ -1,96 +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 'tokens.scss';
-@use 'borders.scss';
-@use 'radii.scss';
-
-////
-/// @group panels
-////
-
-/// Basic panel.
-///
-/// @example scss
-///   .selector {
-///     @include @bpk-panel()
-///   }
-@mixin bpk-panel {
-  display: block;
-  background-color: tokens.$bpk-card-background-color;
-
-  @include radii.bpk-border-radius-md;
-}
-
-/// Adds padding to panels. Modifies the bpk-panel mixin.
-///
-/// @require {mixin} bpk-panel
-///
-/// @example scss
-///   .selector {
-///     @include bpk-panel();
-///     @include bpk-panel--padded();
-///   }
-@mixin bpk-panel--padded {
-  padding: tokens.$bpk-card-padding;
-}
-
-/// Controls if we have a keyline or not on the panel
-/// Modifies the bpk-panel mixin.
-///
-/// @require {mixin} bpk-panel
-///
-/// @example scss
-///   .selector {
-///     @include bpk-panel();
-///     @include bpk-panel--keyline();
-///   }
-@mixin bpk-panel--keyline {
-  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
-}
-
-/// Makes panel full width by removing the border radius
-/// Modifies the bpk-panel mixin.
-///
-/// @require {mixin} bpk-panel
-///
-/// @example scss
-///   .selector {
-///     @include bpk-panel();
-///     @include bpk-panel--full-width();
-///   }
-@mixin bpk-panel--full-width {
-  border-radius: 0;
-}
-
-/// Sets the keyline to only show on the top and bottom when full
-///
-/// @require {mixin} bpk-panel
-///
-/// @example scss
-///   .selector {
-///     @include bpk-panel();
-///     @include bpk-panel--full-width-keyline();
-///   }
-@mixin bpk-panel--full-width-keyline {
-  box-shadow:
-    tokens.$bpk-panel-border-color 0 -1 * tokens.$bpk-one-pixel-rem 0 0 inset,
-    tokens.$bpk-panel-border-color 0 tokens.$bpk-one-pixel-rem 0 0 inset;
-}

package/unstable__bpk-mixins/_radii.scss

@@ -1,80 +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 'tokens.scss';
-
-////
-/// @group radii
-////
-
-/// Extra small border radius.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-border-radius-xs();
-///   }
-
-@mixin bpk-border-radius-xs {
-  border-radius: tokens.$bpk-border-radius-xs;
-}
-
-/// Small border radius.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-border-radius-sm();
-///   }
-
-@mixin bpk-border-radius-sm {
-  border-radius: tokens.$bpk-border-radius-sm;
-}
-
-/// Medium border radius.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-border-radius-md();
-///   }
-
-@mixin bpk-border-radius-md {
-  border-radius: tokens.$bpk-border-radius-md;
-}
-
-/// Large border radius.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-border-radius-lg();
-///   }
-
-@mixin bpk-border-radius-lg {
-  border-radius: tokens.$bpk-border-radius-lg;
-}
-
-/// Extra large border radius.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-border-radius-xl();
-///   }
-
-@mixin bpk-border-radius-xl {
-  border-radius: tokens.$bpk-border-radius-xl;
-}

package/unstable__bpk-mixins/_scroll-indicators.scss

@@ -1,79 +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 'tokens.scss';
-
-////
-/// @group scroll-indicator
-////
-
-/// Scroll indicator utility.
-///
-/// @access private
-
-@mixin _bpk-scroll-indicator($gradient-color, $direction: 'left') {
-  $gradient-direction: if($direction == 'left', 90deg, 270deg);
-
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  content: ' ';
-  display: block;
-  z-index: 1;
-  width: tokens.bpk-spacing-xl();
-  background-image: linear-gradient(
-    $gradient-direction,
-    rgba($gradient-color, 1),
-    rgba($gradient-color, 0)
-  );
-  pointer-events: none;
-
-  @if $direction == 'left' {
-    left: 0;
-  } @else {
-    right: 0;
-  }
-}
-
-/// Left-sided scroll indicator.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-scroll-indicator-left($bpk-color-grey-100);
-///   }
-
-@mixin bpk-scroll-indicator-left($gradient-color) {
-  &::before {
-    @include _bpk-scroll-indicator($gradient-color, 'left');
-  }
-}
-
-/// Right-sided scroll indicator.
-///
-/// @example scss
-///   .selector {
-///     @include bpk-scroll-indicator-right($bpk-color-grey-100);
-///   }
-
-@mixin bpk-scroll-indicator-right($gradient-color) {
-  &::after {
-    @include _bpk-scroll-indicator($gradient-color, 'right');
-  }
-}