@skyscanner/backpack-web 25.8.4 → 26.0.0-beta.1

package/bpk-mixins/src/mixins/_layers.scss

@@ -0,0 +1,196 @@
+/*
+ * 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.
+ */
+
+@import '../bonds.scss';
+@import 'radii.scss';
+@import 'shadows.scss';
+
+////
+/// @group layers
+////
+
+/// Layer base styles.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer;
+///   }
+
+@mixin bpk-layer(
+  $background-color: $bpk-color-white,
+  $border-color: $bpk-surface-highlight-day
+) {
+  border: $bpk-one-pixel-rem solid $border-color;
+  background-color: $background-color;
+
+  @include bpk-border-radius-sm;
+  @include 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 + $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: $bpk-color-white,
+  $border-color: $bpk-color-sky-gray-tint-06
+) {
+  bottom: 100%;
+  width: ($arrow-size * 2);
+  height: $arrow-size;
+
+  &::before {
+    top: -($arrow-size + $bpk-one-pixel-rem);
+    margin-left: -$bpk-one-pixel-rem;
+    border-bottom-color: $border-color;
+
+    @include bpk-rtl {
+      margin-right: -$bpk-one-pixel-rem;
+      margin-left: 0;
+    }
+  }
+
+  &::after {
+    top: -$arrow-size + $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: $bpk-color-white,
+  $border-color: $bpk-color-sky-gray-tint-06
+) {
+  left: 100%;
+  width: $arrow-size;
+  height: ($arrow-size * 2);
+
+  &::before {
+    right: -($arrow-size + $bpk-one-pixel-rem);
+    margin-top: -$bpk-one-pixel-rem;
+    border-left-color: $border-color;
+  }
+
+  &::after {
+    right: -$arrow-size + $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: $bpk-color-white,
+  $border-color: $bpk-color-sky-gray-tint-06
+) {
+  top: 100%;
+  width: ($arrow-size * 2);
+  height: $arrow-size;
+
+  &::before {
+    bottom: -($arrow-size + $bpk-one-pixel-rem);
+    margin-left: -$bpk-one-pixel-rem;
+    border-top-color: $border-color;
+
+    @include bpk-rtl {
+      margin-right: -$bpk-one-pixel-rem;
+      margin-left: 0;
+    }
+  }
+
+  &::after {
+    bottom: -$arrow-size + $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: $bpk-color-white,
+  $border-color: $bpk-color-sky-gray-tint-06
+) {
+  right: 100%;
+  width: $arrow-size;
+  height: ($arrow-size * 2);
+
+  &::before {
+    left: -($arrow-size + $bpk-one-pixel-rem);
+    margin-top: -$bpk-one-pixel-rem;
+    border-right-color: $border-color;
+  }
+
+  &::after {
+    left: -$arrow-size + $bpk-one-pixel-rem;
+    border-right-color: $arrow-color;
+  }
+}

package/bpk-mixins/src/mixins/_margins.scss

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+/// 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-sm);
+///   }
+@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) {
+  margin-left: $margin;
+
+  @if $resetOppositeMargin {
+    margin-right: 0;
+  }
+
+  @include 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-sm);
+///   }
+@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) {
+  @if $resetOppositeMargin {
+    margin-left: 0;
+  }
+
+  margin-right: $margin;
+
+  @include bpk-rtl {
+    margin-left: $margin;
+
+    @if $resetOppositeMargin {
+      margin-right: 0;
+    }
+  }
+}

package/bpk-mixins/src/mixins/_panels.scss

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+@import '../bonds.scss';
+
+////
+/// @group panels
+////
+
+/// Basic panel.
+///
+/// @example scss
+///   .selector {
+///     @include @bpk-panel()
+///   }
+@mixin bpk-panel {
+  display: block;
+  background-color: $bpk-card-background-color;
+
+  @include bpk-border-sm($bpk-panel-border-color);
+  @include 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: $bpk-card-padding;
+}
+
+/// Makes panel full width by removing left and right border.
+/// 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;
+  box-shadow:
+    $bpk-panel-border-color 0 #{-$bpk-one-pixel-rem} 0 0 inset,
+    $bpk-panel-border-color 0 $bpk-one-pixel-rem 0 0 inset;
+}

package/bpk-mixins/src/mixins/_radii.scss

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

package/bpk-mixins/src/mixins/_scroll-indicators.scss

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+@import '../bonds.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: $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');
+  }
+}

package/bpk-mixins/src/mixins/_shadows.scss

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+@import '../bonds.scss';
+
+////
+/// @group box-shadows
+////
+
+/// Small box shadow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-box-shadow-sm();
+///   }
+
+@mixin bpk-box-shadow-sm {
+  box-shadow: $bpk-box-shadow-sm;
+}
+
+/// Large box shadow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-box-shadow-lg();
+///   }
+
+@mixin bpk-box-shadow-lg {
+  box-shadow: $bpk-box-shadow-lg;
+}
+
+/// Extra large box shadow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-box-shadow-xl();
+///   }
+
+@mixin bpk-box-shadow-xl {
+  box-shadow: $bpk-box-shadow-xl;
+}