@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -1,260 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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 '~bpk-mixins/index';
-@import './custom-breakpoints.module';
-
-.bpk-card {
-  @include bpk-card;
-}
-
-.bpk-graphic-promo {
-  max-width: 65.5rem;
-  margin-right: auto;
-  margin-left: auto;
-  background-color: $bpk-color-sky-blue;
-  background-position: center;
-  background-size: cover;
-  color: $bpk-color-white;
-  box-shadow: none;
-
-  @include breakpoint-landscape {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-sm();
-
-      @include bpk-label-1;
-    }
-
-    &__sponsor-content {
-      margin-bottom: bpk-spacing-xl();
-    }
-
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-label-1;
-    }
-
-    &__subheading {
-      @include bpk-body-default;
-    }
-
-    &__headline {
-      @include breakpoint-landscape-desktop {
-        @include bpk-hero-5;
-      }
-
-      @include breakpoint-landscape-tablet {
-        @include bpk-heading-1;
-      }
-
-      &:not(:last-child) {
-        margin-bottom: bpk-spacing-md();
-      }
-    }
-  }
-
-  @include breakpoint-portrait-large {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-heading-4;
-    }
-
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-subheading;
-    }
-
-    &__headline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-hero-4;
-    }
-
-    &__subheading {
-      @include bpk-subheading;
-    }
-  }
-
-  @include breakpoint-portrait-medium {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-heading-3;
-    }
-
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-subheading;
-    }
-
-    &__headline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-hero-5;
-    }
-
-    &__subheading {
-      @include bpk-body-longform;
-    }
-  }
-
-  @include breakpoint-portrait-small {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-sm();
-
-      @include bpk-label-1;
-    }
-
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-label-1;
-    }
-
-    &__headline {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-heading-2;
-    }
-
-    &__subheading {
-      @include bpk-body-default;
-    }
-  }
-
-  &__container {
-    display: flex;
-    flex-direction: column;
-
-    @include breakpoint-landscape {
-      justify-content: center;
-
-      &--start {
-        align-items: start;
-      }
-
-      &--center {
-        align-items: center;
-      }
-
-      &--end {
-        align-items: end;
-      }
-    }
-
-    @include breakpoint-portrait {
-      justify-content: space-between;
-
-      &--inverted {
-        flex-direction: column-reverse;
-      }
-    }
-
-    @include breakpoint-landscape-desktop {
-      height: 25rem;
-
-      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
-      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
-
-      /* adjusting for 1.5rem different between margins */
-      &--center > * {
-        @include bpk-margin-trailing(bpk-spacing-lg());
-      }
-    }
-
-    @include breakpoint-landscape-tablet {
-      height: 25rem;
-
-      @include bpk-margin-leading(bpk-spacing-xxl(), false);
-      @include bpk-margin-trailing(bpk-spacing-xl(), false);
-
-      /* adjusting for 0.5rem different between margins */
-      &--center > * {
-        @include bpk-margin-trailing(bpk-spacing-md());
-      }
-    }
-
-    @include breakpoint-portrait-large {
-      height: 58.3125rem;
-      padding: bpk-spacing-xl();
-    }
-
-    @include breakpoint-portrait-medium {
-      height: 42.625rem;
-      padding: bpk-spacing-xl();
-    }
-
-    @include breakpoint-portrait-small {
-      height: 31.25rem;
-      padding: bpk-spacing-lg();
-    }
-  }
-
-  &__sponsor-content,
-  &__promo-content {
-    display: flex;
-    flex-direction: column;
-
-    @include breakpoint-landscape {
-      &--start {
-        align-items: start;
-        text-align: start;
-      }
-
-      &--center {
-        align-items: center;
-        text-align: center;
-      }
-
-      &--end {
-        align-items: start;
-        text-align: start;
-      }
-    }
-
-    @include breakpoint-landscape-desktop {
-      width: 22.5rem;
-    }
-
-    @include breakpoint-landscape-tablet {
-      width: 20rem;
-    }
-  }
-
-  &::after {
-    display: none;
-  }
-
-  &__sponsor-logo {
-    width: 9.25rem;
-  }
-
-  &__cta {
-    @include breakpoint-landscape {
-      margin-top: bpk-spacing-xl();
-    }
-
-    @include breakpoint-portrait {
-      display: none;
-    }
-  }
-}

package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss

@@ -1,70 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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.
- */
-
-// FIXME: Replace the custom breakpoints with on es from Backpack when ready. (ST-4102)
-
-$breakpoint-landscape-desktop-min: 50.01rem;
-$breakpoint-landscape-tablet-max: 50rem;
-$breakpoint-landscape-tablet-min: 43.76rem;
-$breakpoint-portrait-large-max: 43.75rem;
-$breakpoint-portrait-large-min: 32.01rem;
-$breakpoint-portrait-medium-max: 32rem;
-$breakpoint-portrait-medium-min: 26.51rem;
-$breakpoint-portrait-small-max: 26.5rem;
-
-@mixin breakpoint-landscape-desktop {
-  @media (min-width: $breakpoint-landscape-desktop-min) {
-    @content;
-  }
-}
-
-@mixin breakpoint-landscape-tablet {
-  @media (min-width: $breakpoint-landscape-tablet-min) and (max-width: $breakpoint-landscape-tablet-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait-large {
-  @media (min-width: $breakpoint-portrait-large-min) and (max-width: $breakpoint-portrait-large-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait-medium {
-  @media (min-width: $breakpoint-portrait-medium-min) and (max-width: $breakpoint-portrait-medium-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait-small {
-  @media (max-width: $breakpoint-portrait-small-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-landscape {
-  @media (min-width: $breakpoint-landscape-tablet-min) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait {
-  @media (max-width: $breakpoint-portrait-large-max) {
-    @content;
-  }
-}

package/bpk-component-grid/README.md

@@ -1,90 +0,0 @@
-# bpk-component-grid
-
-> Backpack grid components.
-
-## Installation
-
-```sh
-npm install bpk-component-grid --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import { BpkGridContainer, BpkGridRow, BpkGridColumn } from 'bpk-component-grid';
-
-export default () => (
-  <BpkGridContainer>
-    <BpkGridRow>
-      <BpkGridColumn width={8} tabletWidth={12}>
-        Search controls
-      </BpkGridColumn>
-      <BpkGridColumn width={4} tabletWidth={0}>
-        MPU
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={12}>
-        Provider logos
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-    </BpkGridRow>
-  </BpkGridContainer>
-);
-```
-
-## Props
-
-### BpkGridContainer
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| debug     | bool     | false    | false         |
-| fullWidth | bool     | false    | false         |
-
-### BpkGridRow
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| padded    | bool     | false    | true          |
-
-### BpkGridColumn
-
-| Property     | PropType | Required | Default Value |
-| ------------ | -------- | -------- | ------------- |
-| children     | node     | true     | -             |
-| width        | number   | true     | -             |
-| mobileWidth  | number   | false    | null          |
-| tabletWidth  | number   | false    | null          |
-| offset       | number   | false    | null          |
-| mobileOffset | number   | false    | null          |
-| tabletOffset | number   | false    | null          |
-| padded       | bool     | false    | true          |
-| debug        | bool     | false    | false         |

package/bpk-component-grid/index.js

@@ -1,25 +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.
- */
-
-import Container from './src/BpkGridContainer';
-import Row from './src/BpkGridRow';
-import Column from './src/BpkGridColumn';
-
-export const BpkGridContainer = Container;
-export const BpkGridRow = Row;
-export const BpkGridColumn = Column;

package/bpk-component-grid/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "bpk-component-grid",
-  "version": "3.1.12",
-  "description": "Backpack grid components.",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:Skyscanner/backpack.git"
-  },
-  "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-grid/src/BpkGridColumn.js

@@ -1,118 +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.
- */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkGridColumn.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-// IE11 doesn't support `Number.isNaN` so we must use the global.
-// When IE11 support drops we can migrate.
-// eslint-disable-next-line no-restricted-globals
-const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
-
-const BpkGridColumn = (props) => {
-  const {
-    children,
-    className,
-    debug,
-    mobileOffset,
-    mobileWidth,
-    offset,
-    padded,
-    tabletOffset,
-    tabletWidth,
-    width,
-    ...rest
-  } = props;
-
-  const classNames = ['bpk-grid__column', `bpk-grid__column--${width}`].map(
-    getClassName,
-  );
-
-  if (isNumeric(mobileWidth)) {
-    classNames.push(getClassName(`bpk-grid__column--mobile-${mobileWidth}`));
-  }
-  if (isNumeric(tabletWidth)) {
-    classNames.push(getClassName(`bpk-grid__column--tablet-${tabletWidth}`));
-  }
-  if (isNumeric(offset)) {
-    classNames.push(getClassName(`bpk-grid__column--offset-${offset}`));
-  }
-  if (isNumeric(mobileOffset)) {
-    classNames.push(
-      getClassName(`bpk-grid__column--offset-mobile-${mobileOffset}`),
-    );
-  }
-  if (isNumeric(tabletOffset)) {
-    classNames.push(
-      getClassName(`bpk-grid__column--offset-tablet-${tabletOffset}`),
-    );
-  }
-  if (padded) {
-    classNames.push(getClassName('bpk-grid__column--padded'));
-  }
-  if (debug) {
-    classNames.push(getClassName('bpk-grid__column--debug'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-
-  return (
-    <div className={classNames.join(' ')} {...rest}>
-      {debug ? (
-        <div className={getClassName('bpk-grid__column-debugger')}>
-          {children}
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-};
-
-BpkGridColumn.propTypes = {
-  children: PropTypes.node.isRequired,
-  width: PropTypes.number.isRequired,
-  mobileWidth: PropTypes.number,
-  tabletWidth: PropTypes.number,
-  offset: PropTypes.number,
-  mobileOffset: PropTypes.number,
-  tabletOffset: PropTypes.number,
-  padded: PropTypes.bool,
-  debug: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-BpkGridColumn.defaultProps = {
-  mobileWidth: null,
-  tabletWidth: null,
-  offset: null,
-  mobileOffset: null,
-  tabletOffset: null,
-  padded: true,
-  debug: false,
-  className: null,
-};
-
-export default BpkGridColumn;

package/bpk-component-grid/src/BpkGridColumn.module.css

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__column{float:left;padding-right:.75rem;padding-left:.75rem}html[dir='rtl'] .bpk-grid__column{float:right}.bpk-grid__column--padded{padding-top:.75rem;padding-bottom:.75rem}.bpk-grid__column--debug{padding:.75rem}.bpk-grid__column-debugger{background-color:#fff}.bpk-grid__column--0{display:none}.bpk-grid__column--1{display:block;width:8.33333%}.bpk-grid__column--2{display:block;width:16.66667%}.bpk-grid__column--3{display:block;width:25%}.bpk-grid__column--4{display:block;width:33.33333%}.bpk-grid__column--5{display:block;width:41.66667%}.bpk-grid__column--6{display:block;width:50%}.bpk-grid__column--7{display:block;width:58.33333%}.bpk-grid__column--8{display:block;width:66.66667%}.bpk-grid__column--9{display:block;width:75%}.bpk-grid__column--10{display:block;width:83.33333%}.bpk-grid__column--11{display:block;width:91.66667%}.bpk-grid__column--12{display:block;width:100%}.bpk-grid__column--offset-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-0{margin-right:0}.bpk-grid__column--offset-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-1{margin-right:8.33333%;margin-left:0}.bpk-grid__column--offset-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-2{margin-right:16.66667%;margin-left:0}.bpk-grid__column--offset-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-3{margin-right:25%;margin-left:0}.bpk-grid__column--offset-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-4{margin-right:33.33333%;margin-left:0}.bpk-grid__column--offset-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-5{margin-right:41.66667%;margin-left:0}.bpk-grid__column--offset-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-6{margin-right:50%;margin-left:0}.bpk-grid__column--offset-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-7{margin-right:58.33333%;margin-left:0}.bpk-grid__column--offset-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-8{margin-right:66.66667%;margin-left:0}.bpk-grid__column--offset-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-9{margin-right:75%;margin-left:0}.bpk-grid__column--offset-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-10{margin-right:83.33333%;margin-left:0}.bpk-grid__column--offset-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-11{margin-right:91.66667%;margin-left:0}.bpk-grid__column--offset-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-12{margin-right:100%;margin-left:0}@media (max-width: 50.25rem){.bpk-grid__column--tablet-0{display:none}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-1{display:block;width:8.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-2{display:block;width:16.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-3{display:block;width:25%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-4{display:block;width:33.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-5{display:block;width:41.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-6{display:block;width:50%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-7{display:block;width:58.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-8{display:block;width:66.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-9{display:block;width:75%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-10{display:block;width:83.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-11{display:block;width:91.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-12{display:block;width:100%}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-tablet-0{margin-right:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-1{margin-right:8.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-2{margin-right:16.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-tablet-3{margin-right:25%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-4{margin-right:33.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-5{margin-right:41.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-tablet-6{margin-right:50%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-7{margin-right:58.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-8{margin-right:66.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-tablet-9{margin-right:75%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-10{margin-right:83.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-11{margin-right:91.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-tablet-12{margin-right:100%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-0{display:none}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-1{display:block;width:8.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-2{display:block;width:16.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-3{display:block;width:25%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-4{display:block;width:33.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-5{display:block;width:41.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-6{display:block;width:50%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-7{display:block;width:58.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-8{display:block;width:66.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-9{display:block;width:75%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-10{display:block;width:83.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-11{display:block;width:91.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-12{display:block;width:100%}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-mobile-0{margin-right:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-1{margin-right:8.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-2{margin-right:16.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-mobile-3{margin-right:25%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-4{margin-right:33.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-5{margin-right:41.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-mobile-6{margin-right:50%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-7{margin-right:58.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-8{margin-right:66.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-mobile-9{margin-right:75%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-10{margin-right:83.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-11{margin-right:91.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-mobile-12{margin-right:100%;margin-left:0}}

package/bpk-component-grid/src/BpkGridColumn.module.scss

@@ -1,73 +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.
- */
-
-@import '~bpk-mixins';
-
-.bpk-grid {
-  &__column {
-    @include bpk-grid__column;
-
-    &--padded {
-      @include bpk-grid__column--padded;
-    }
-
-    &--debug {
-      @include bpk-grid__column--debug;
-    }
-
-    &-debugger {
-      @include bpk-grid__column-debugger;
-    }
-
-    @for $i from 0 through $bpk-grid-columns {
-      &--#{$i} {
-        @include bpk-grid__column--($i);
-      }
-    }
-
-    @for $i from 0 through $bpk-grid-columns {
-      &--offset-#{$i} {
-        @include bpk-grid__column--offset-($i);
-      }
-    }
-
-    @for $i from 0 through $bpk-grid-columns {
-      &--tablet-#{$i} {
-        @include bpk-grid__column--tablet-($i);
-      }
-    }
-
-    @for $i from 0 through $bpk-grid-columns {
-      &--offset-tablet-#{$i} {
-        @include bpk-grid__column--offset-tablet-($i);
-      }
-    }
-
-    @for $i from 0 through $bpk-grid-columns {
-      &--mobile-#{$i} {
-        @include bpk-grid__column--mobile-($i);
-      }
-    }
-
-    @for $i from 0 through $bpk-grid-columns {
-      &--offset-mobile-#{$i} {
-        @include bpk-grid__column--offset-mobile-($i);
-      }
-    }
-  }
-}