@skyscanner/backpack-web 26.0.0 → 28.0.0

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

@@ -0,0 +1,566 @@
+/*
+ * 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 buttons
+////
+
+/// Standard button.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///   }
+
+@mixin bpk-button {
+  display: inline-block;
+  min-height: $bpk-button-height;
+  margin: 0;
+  padding: (6 * $bpk-one-pixel-rem) bpk-spacing-base();
+  border: 0;
+  border-radius: $bpk-button-border-radius;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  vertical-align: middle;
+  user-select: none;
+
+  @include bpk-label-1;
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-primary-text-color,
+    $bpk-text-on-dark-day
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-background-color,
+    $bpk-private-button-primary-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-primary-hover-text-color,
+      $bpk-text-on-dark-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-primary-hover-background-color,
+      $bpk-private-button-primary-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-primary-active-text-color,
+      $bpk-text-on-dark-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-primary-active-background-color,
+      $bpk-private-button-primary-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-disabled-background-day;
+    color: $bpk-text-disabled-day;
+    cursor: not-allowed;
+  }
+}
+
+/// Large button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--large();
+///   }
+
+@mixin bpk-button--large {
+  min-height: $bpk-button-large-height;
+  padding: (12 * $bpk-one-pixel-rem) bpk-spacing-base();
+}
+
+/// PrimaryOnDark button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--primary-on-dark();
+///   }
+
+@mixin bpk-button--primary-on-dark {
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-primary-on-dark-text-color,
+    $bpk-text-on-light-day
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-on-dark-background-color,
+    $bpk-private-button-primary-on-dark-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-primary-on-dark-hover-text-color,
+      $bpk-text-on-light-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-primary-on-dark-hover-background-color,
+      $bpk-private-button-primary-on-dark-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-primary-on-dark-active-text-color,
+      $bpk-text-on-light-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-primary-on-dark-active-background-color,
+      $bpk-private-button-primary-on-dark-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-primary-on-dark-disabled-background-day;
+    color: $bpk-private-button-primary-on-dark-disabled-foreground-day;
+  }
+}
+
+/// PrimaryOnLight button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--primary-on-light();
+///   }
+
+@mixin bpk-button--primary-on-light {
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-primary-on-light-text-color,
+    $bpk-text-on-dark-night
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-on-light-background-color,
+    $bpk-private-button-primary-on-light-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-primary-on-light-hover-text-color,
+      $bpk-text-on-dark-night
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-primary-on-light-hover-background-color,
+      $bpk-private-button-primary-on-light-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-primary-on-light-active-text-color,
+      $bpk-text-on-dark-night
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-primary-on-light-active-background-color,
+      $bpk-private-button-primary-on-light-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-primary-on-light-disabled-background-day;
+    color: $bpk-private-button-primary-on-light-disabled-foreground-day;
+  }
+}
+
+/// Secondary button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--secondary();
+///   }
+
+@mixin bpk-button--secondary {
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-secondary-text-color,
+    $bpk-text-primary-day
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-secondary-background-color,
+    $bpk-private-button-secondary-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-secondary-hover-text-color,
+      $bpk-text-primary-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-secondary-hover-background-color,
+      $bpk-private-button-secondary-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-secondary-active-text-color,
+      $bpk-text-primary-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-secondary-active-background-color,
+      $bpk-private-button-secondary-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-disabled-background-day;
+    color: $bpk-text-disabled-day;
+  }
+}
+
+/// Secondary on dark button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--secondary-on-dark();
+///   }
+
+@mixin bpk-button--secondary-on-dark {
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-secondary-on-dark-text-color,
+    $bpk-text-on-dark-day
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-secondary-on-dark-background-color,
+    $bpk-private-button-secondary-on-dark-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-secondary-on-dark-hover-text-color,
+      $bpk-text-on-dark-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-secondary-on-dark-hover-background-color,
+      $bpk-private-button-secondary-on-dark-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-secondary-on-dark-active-text-color,
+      $bpk-text-on-dark-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-secondary-on-dark-active-background-color,
+      $bpk-private-button-secondary-on-dark-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-secondary-on-dark-disabled-background-day;
+    color: $bpk-private-button-secondary-on-dark-disabled-foreground-day;
+  }
+}
+
+/// Destructive button. Modifies the bpk-button & bpk-button--secondary mixins.
+///
+/// @require {mixin} bpk-button
+/// @require {mixin} bpk-button--secondary
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--secondary();
+///     @include bpk-button--destructive();
+///   }
+
+@mixin bpk-button--destructive {
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-destructive-text-color,
+    $bpk-private-button-destructive-normal-foreground-day
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-destructive-background-color,
+    $bpk-private-button-destructive-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-destructive-hover-text-color,
+      $bpk-text-primary-inverse-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-destructive-hover-background-color,
+      $bpk-private-button-destructive-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-destructive-active-text-color,
+      $bpk-text-primary-inverse-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-destructive-active-background-color,
+      $bpk-private-button-destructive-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-disabled-background-day;
+    color: $bpk-text-disabled-day;
+  }
+}
+
+/// Link-style button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--link();
+///   }
+
+@mixin bpk-button--link {
+  $vertical-padding: $bpk-one-pixel-rem * 6;
+  $vertical-padding-large: $bpk-one-pixel-rem * 12;
+
+  border-radius: 0;
+  background: none; /* stylelint-disable-line order/order, order/properties-order */
+  box-shadow: none;
+
+  @include bpk-link;
+
+  padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */
+  color: $bpk-private-button-link-normal-foreground-day;
+
+  @include bpk-hover {
+    background: none;
+    color: $bpk-private-button-link-pressed-foreground-day;
+    text-decoration: none;
+  }
+
+  &:active {
+    background: none;
+    color: $bpk-private-button-link-pressed-foreground-day;
+    text-decoration: none;
+  }
+
+  &:disabled {
+    background: none;
+    color: $bpk-text-disabled-day;
+    text-decoration: none;
+  }
+
+  &-large {
+    padding: $vertical-padding-large 0;
+  }
+}
+
+/// Link on dark button. Modifies the bpk-button & bpk-button--link mixins.
+///
+/// @require {mixin} bpk-button
+
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--link-on-dark();
+///   }
+
+@mixin bpk-button--link-on-dark {
+  @include bpk-button--link;
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-link-on-dark-text-color,
+    $bpk-private-button-link-on-dark-normal-foreground-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-link-on-dark-hover-text-color,
+      $bpk-private-button-link-on-dark-pressed-foreground-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-link-on-dark-active-text-color,
+      $bpk-private-button-link-on-dark-pressed-foreground-day
+    );
+  }
+
+  &:visited {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-link-on-dark-text-color,
+      $bpk-private-button-link-on-dark-normal-foreground-day
+    );
+  }
+
+  &:disabled {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-link-on-dark-disabled-color,
+      $bpk-private-button-link-on-dark-disabled-foreground-day
+    );
+  }
+}
+
+/// Icon-only button. Modifies the bpk-button mixin.
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--icon-only();
+///   }
+
+@mixin bpk-button--icon-only {
+  $horizontal-padding: ($bpk-button-height - $bpk-icon-size-sm) / 2; // extra padding so that the width will be the same size as the size using sm icons
+
+  padding-right: $horizontal-padding;
+  padding-left: $horizontal-padding;
+  border-radius: $bpk-button-border-radius;
+}
+
+/// Large icon-only button. Modifies the bpk-button & bpk-button--large mixins.
+///
+/// @require {mixin} bpk-button
+/// @require {mixin} bpk-button--large
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--large();
+///     @include bpk-button--large-icon-only();
+///   }
+
+@mixin bpk-button--large-icon-only {
+  $horizontal-padding: ($bpk-button-large-height - $bpk-icon-size-lg) / 2; // extra padding so that the width will be the same size as the size using lg icons
+
+  padding-right: $horizontal-padding;
+  padding-left: $horizontal-padding;
+  border-radius: $bpk-button-border-radius;
+}
+
+/// Featured button. Modifies the bpk-button
+///
+/// @require {mixin} bpk-button
+/// @require {mixin} bpk-button--large
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--featured();
+///   }
+
+@mixin bpk-button--featured {
+  @include bpk-themeable-property(
+    color,
+    --bpk-button-featured-text-color,
+    $bpk-text-primary-inverse-day
+  );
+  @include bpk-themeable-property(
+    background-color,
+    --bpk-button-featured-background-color,
+    $bpk-private-button-featured-normal-background-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-featured-hover-text-color,
+      $bpk-text-primary-inverse-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-featured-hover-background-color,
+      $bpk-private-button-featured-pressed-background-day
+    );
+  }
+
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-button-featured-active-text-color,
+      $bpk-text-primary-inverse-day
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-button-featured-active-background-color,
+      $bpk-private-button-featured-pressed-background-day
+    );
+  }
+
+  &:disabled {
+    background-color: $bpk-private-button-disabled-background-day;
+    color: $bpk-text-disabled-day;
+  }
+}

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

@@ -0,0 +1,89 @@
+/*
+ * 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 cards
+////
+
+/// Basic card.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-card();
+///   }
+
+@mixin bpk-card {
+  position: relative;
+  display: block;
+  background-color: $bpk-card-background-color;
+  color: $bpk-text-primary-day;
+  text-decoration: none;
+  cursor: pointer;
+
+  @include bpk-box-shadow-sm;
+  @include bpk-border-radius-md;
+
+  @include bpk-hover {
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  // Keep transitions and animations to only transform and opacity.
+  // This pseudo element solution allows us to animate box-shadow in a performant manner.
+  // http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    transition: opacity $bpk-duration-sm ease-in-out;
+    opacity: 0;
+    pointer-events: none; // To prevent the pseudo element absorbing click events
+
+    @include bpk-box-shadow-lg;
+    @include bpk-border-radius-md;
+
+    // pointer-events doesn't work on ie
+    @media screen\0 {
+      z-index: -1;
+    }
+  }
+
+  &:active::after {
+    box-shadow: none;
+  }
+}
+
+/// Adds padding to cards. Modifies the bpk-card mixin.
+///
+/// @require {mixin} bpk-card
+///
+/// @example scss
+///   .selector {
+///     @include bpk-card();
+///     @include bpk-card--padded();
+///   }
+
+@mixin bpk-card--padded {
+  padding: $bpk-card-padding;
+}