@skyscanner/backpack-web 26.0.0 → 28.0.0

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

@@ -0,0 +1,236 @@
+/*
+ * 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 'typography.scss';
+
+////
+/// @group badges
+////
+
+/// Standard badge.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///   }
+
+@mixin bpk-badge {
+  display: inline-flex;
+  padding: bpk-spacing-sm() bpk-spacing-md();
+  align-items: center;
+
+  @include bpk-border-radius-xs;
+  @include bpk-text;
+  @include bpk-caption;
+}
+
+/// Centered badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--centered();
+///   }
+
+@mixin bpk-badge--centered {
+  vertical-align: text-bottom;
+}
+
+/// Right-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-right();
+///   }
+
+@mixin bpk-badge--docked-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  @include bpk-rtl {
+    right: inherit;
+    left: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: $bpk-border-radius-xs;
+  }
+}
+
+/// Left-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-left();
+///   }
+
+@mixin bpk-badge--docked-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+
+  @include bpk-rtl {
+    right: 0;
+    left: inherit;
+    border-bottom-left-radius: $bpk-border-radius-xs;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/// Normal badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--normal();
+///   }
+
+@mixin bpk-badge--normal {
+  background-color: $bpk-surface-highlight-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Warning badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--warning();
+///   }
+
+@mixin bpk-badge--warning {
+  background-color: $bpk-status-warning-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-day;
+}
+
+/// Success badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--success();
+///   }
+
+@mixin bpk-badge--success {
+  background-color: $bpk-status-success-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-day;
+}
+
+/// Critical badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--critical();
+///   }
+
+@mixin bpk-badge--critical {
+  background-color: $bpk-status-danger-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-day;
+}
+
+/// Inverse badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--inverse();
+///   }
+
+@mixin bpk-badge--inverse {
+  background-color: $bpk-surface-default-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Outline badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--outline();
+///   }
+
+@mixin bpk-badge--outline {
+  background-color: transparent;
+  color: $bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Strong badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--strong();
+///   }
+
+@mixin bpk-badge--strong {
+  background-color: $bpk-core-primary-day;
+  color: $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Brand badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--brand();
+///   }
+
+@mixin bpk-badge--brand {
+  background-color: $bpk-core-accent-day;
+  color: $bpk-text-primary-inverse-day;
+  fill: $bpk-text-primary-inverse-day;
+}

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

@@ -0,0 +1,266 @@
+/*
+ * 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 borders
+////
+
+/// Full border utility.
+///
+/// @access private
+
+@mixin _bpk-border($size, $color, $inset) {
+  box-shadow: 0 0 0 $size $color #{$inset};
+}
+
+/// Top border utility.
+///
+/// @access private
+
+@mixin _bpk-border-top($size, $color, $inset) {
+  $offset-y: if($inset == inset, $size, -#{$size});
+
+  box-shadow: 0 $offset-y 0 0 $color #{$inset};
+}
+
+/// Right border utility.
+///
+/// @access private
+
+@mixin _bpk-border-right($size, $color, $inset) {
+  $offset-x: if($inset == inset, -#{$size}, $size);
+
+  box-shadow: $offset-x 0 0 0 $color #{$inset};
+}
+
+/// Bottom border utility.
+///
+/// @access private
+
+@mixin _bpk-border-bottom($size, $color, $inset) {
+  $offset-y: if($inset == inset, -#{$size}, $size);
+
+  box-shadow: 0 $offset-y 0 0 $color #{$inset};
+}
+
+/// Left border utility.
+///
+/// @access private
+
+@mixin _bpk-border-left($size, $color, $inset) {
+  $offset-x: if($inset == inset, $size, -#{$size});
+
+  box-shadow: $offset-x 0 0 0 $color #{$inset};
+}
+
+/// Small "1px" border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-sm($color, $inset: inset) {
+  @include _bpk-border($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" top border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-top-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-top-sm($color, $inset: inset) {
+  @include _bpk-border-top($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" right border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-right-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-right-sm($color, $inset: inset) {
+  @include _bpk-border-right($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" bottom border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-bottom-sm($color, $inset: inset) {
+  @include _bpk-border-bottom($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" left border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-left-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-left-sm($color, $inset: inset) {
+  @include _bpk-border-left($bpk-border-size-sm, $color, $inset);
+}
+
+/// Large "2px" border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-lg($color, $inset: inset) {
+  @include _bpk-border($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" top border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-top-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-top-lg($color, $inset: inset) {
+  @include _bpk-border-top($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" right border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-right-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-right-lg($color, $inset: inset) {
+  @include _bpk-border-right($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" bottom border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-bottom-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-bottom-lg($color, $inset: inset) {
+  @include _bpk-border-bottom($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" left border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-left-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-left-lg($color, $inset: inset) {
+  @include _bpk-border-left($bpk-border-size-lg, $color, $inset);
+}
+
+/// Extra large "3px" border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-xl($color, $inset: inset) {
+  @include _bpk-border($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" top border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-top-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-top-xl($color, $inset: inset) {
+  @include _bpk-border-top($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" right border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-right-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-right-xl($color, $inset: inset) {
+  @include _bpk-border-right($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" bottom border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-bottom-xl($color, $inset: inset) {
+  @include _bpk-border-bottom($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" left border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-left-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-left-xl($color, $inset: inset) {
+  @include _bpk-border-left($bpk-border-size-xl, $color, $inset);
+}