@skyscanner/backpack-web 4.1.0 → 6.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -64
- package/bpk-component-accordion/src/BpkAccordion.js +0 -1
- package/bpk-component-accordion/src/BpkAccordionItem.js +0 -1
- package/bpk-component-accordion/src/withAccordionItemState.js +0 -1
- package/bpk-component-accordion/src/withSingleItemAccordionState.js +0 -1
- package/bpk-component-aria-live/src/BpkAriaLive.js +0 -1
- package/bpk-component-autosuggest/src/BpkAutosuggest.js +1 -2
- package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js +0 -1
- package/bpk-component-badge/src/BpkBadge.js +0 -1
- package/bpk-component-banner-alert/src/AnimateAndFade.js +2 -3
- package/bpk-component-banner-alert/src/BpkBannerAlertInner.js +1 -2
- package/bpk-component-banner-alert/src/withBannerAlertState.js +0 -1
- package/bpk-component-barchart/src/BpkBarchart.js +0 -1
- package/bpk-component-barchart/src/BpkBarchartBar.js +1 -2
- package/bpk-component-barchart/src/BpkChartAxis.js +1 -2
- package/bpk-component-barchart/src/BpkChartDataTable.js +0 -1
- package/bpk-component-barchart/src/BpkChartGridLines.js +0 -1
- package/bpk-component-blockquote/src/BpkBlockquote.js +0 -1
- package/bpk-component-breadcrumb/src/BpkBreadcrumb.js +0 -1
- package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js +0 -1
- package/bpk-component-button/src/BpkButtonBase.module.css +1 -1
- package/bpk-component-button/src/BpkButtonDestructive.module.css +1 -1
- package/bpk-component-button/src/BpkButtonFeatured.module.css +1 -1
- package/bpk-component-button/src/BpkButtonLink.module.css +1 -1
- package/bpk-component-button/src/BpkButtonLinkOnDark.module.css +18 -0
- package/bpk-component-button/src/BpkButtonPrimaryOnDark.module.css +18 -0
- package/bpk-component-button/src/BpkButtonPrimaryOnLight.module.css +18 -0
- package/bpk-component-button/src/BpkButtonSecondary.module.css +1 -1
- package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css +18 -0
- package/bpk-component-calendar/src/BpkCalendarContainer.js +0 -1
- package/bpk-component-calendar/src/BpkCalendarDate.js +0 -1
- package/bpk-component-calendar/src/BpkCalendarGrid.js +0 -1
- package/bpk-component-calendar/src/BpkCalendarGridHeader.js +0 -1
- package/bpk-component-calendar/src/BpkCalendarGridTransition.js +0 -1
- package/bpk-component-calendar/src/BpkCalendarNav.js +0 -1
- package/bpk-component-calendar/src/Week.js +0 -1
- package/bpk-component-calendar/src/composeCalendar.js +0 -1
- package/bpk-component-card/src/BpkCard.js +0 -1
- package/bpk-component-checkbox/src/BpkCheckbox.js +0 -1
- package/bpk-component-chip/src/BpkDismissibleChip.js +0 -1
- package/bpk-component-chip/src/BpkSelectableChip.js +0 -1
- package/bpk-component-close-button/src/BpkCloseButton.js +0 -1
- package/bpk-component-code/src/BpkCode.js +0 -1
- package/bpk-component-code/src/BpkCodeBlock.js +0 -1
- package/bpk-component-content-container/src/BpkContentContainer.js +0 -1
- package/bpk-component-content-container/src/BpkContentContainer.module.css +1 -1
- package/bpk-component-datatable/src/BpkDataTable.js +1 -2
- package/bpk-component-datatable/src/BpkDataTableColumn.js +0 -1
- package/bpk-component-datatable/src/bpkHeaderRenderer.js +0 -1
- package/bpk-component-datepicker/src/BpkDatepicker.js +16 -15
- package/bpk-component-description-list/src/ComponentFactory.js +0 -1
- package/bpk-component-dialog/src/BpkDialog.js +0 -1
- package/bpk-component-dialog/src/BpkDialogInner.js +0 -1
- package/bpk-component-dialog/src/BpkDialogInner.module.css +1 -1
- package/bpk-component-drawer/src/BpkDrawer.js +2 -11
- package/bpk-component-drawer/src/BpkDrawerContent.js +0 -1
- package/bpk-component-drawer/src/BpkDrawerContent.module.css +1 -1
- package/bpk-component-fieldset/src/BpkFieldset.js +0 -1
- package/bpk-component-flare/src/BpkContentBubble.js +0 -1
- package/bpk-component-flare/src/BpkFlareBar.js +0 -1
- package/bpk-component-flare/src/bpk-flare-bar.module.css +1 -1
- package/bpk-component-floating-notification/README.md +5 -0
- package/bpk-component-floating-notification/src/BpkFloatingNotification.js +6 -2
- package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css +1 -1
- package/bpk-component-form-validation/src/BpkFormValidation.js +4 -5
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +0 -1
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css +18 -0
- package/bpk-component-graphic-promotion/src/custom-breakpoints.module.css +17 -0
- package/bpk-component-grid/src/BpkGridColumn.js +0 -1
- package/bpk-component-grid/src/BpkGridColumn.module.css +1 -1
- package/bpk-component-grid/src/BpkGridContainer.js +0 -1
- package/bpk-component-grid/src/BpkGridContainer.module.css +1 -1
- package/bpk-component-grid/src/BpkGridRow.js +0 -1
- package/bpk-component-grid/src/BpkGridRow.module.css +1 -1
- package/bpk-component-grid-toggle/src/BpkGridToggle.js +0 -1
- package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +1 -2
- package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +0 -1
- package/bpk-component-icon/src/BpkIcon.module.css +1 -1
- package/bpk-component-icon/src/classNameModifierHOCFactory.js +0 -1
- package/bpk-component-icon/src/withAlignment.js +0 -1
- package/bpk-component-icon/src/withDescription.js +0 -1
- package/bpk-component-image/src/BpkBackgroundImage.js +2 -3
- package/bpk-component-image/src/BpkImage.js +2 -3
- package/bpk-component-image/src/withLazyLoading.js +1 -2
- package/bpk-component-image/src/withLoadingBehavior.js +0 -1
- package/bpk-component-infinite-scroll/src/withInfiniteScroll.js +1 -2
- package/bpk-component-input/src/BpkClearButton.js +0 -1
- package/bpk-component-input/src/BpkInput.js +0 -1
- package/bpk-component-input/src/withOpenEvents.js +0 -1
- package/bpk-component-label/src/BpkLabel.js +0 -1
- package/bpk-component-link/src/BpkButtonLink.js +0 -1
- package/bpk-component-link/src/BpkLink.js +0 -1
- package/bpk-component-list/src/BpkList.js +0 -1
- package/bpk-component-list/src/BpkList.module.css +1 -1
- package/bpk-component-list/src/BpkListItem.js +0 -1
- package/bpk-component-loading-button/src/BpkLoadingButton.js +0 -1
- package/bpk-component-loading-button/src/BpkLoadingButton.module.css +18 -0
- package/bpk-component-map/src/BpkIconMarker.js +0 -1
- package/bpk-component-map/src/BpkIconMarkerBackground.js +0 -1
- package/bpk-component-map/src/BpkMap.js +1 -2
- package/bpk-component-map/src/BpkMap.module.css +18 -0
- package/bpk-component-map/src/BpkPriceMarker.js +0 -1
- package/bpk-component-map/src/DefaultLoadingElement.js +0 -1
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +0 -1
- package/bpk-component-modal/src/BpkModal.js +4 -10
- package/bpk-component-modal/src/BpkModal.module.css +1 -1
- package/bpk-component-modal/src/BpkModalInner.js +1 -2
- package/bpk-component-modal/src/BpkModalInner.module.css +1 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBar.js +0 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css +1 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js +0 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js +0 -1
- package/bpk-component-navigation-stack/README.md +1 -0
- package/bpk-component-navigation-stack/package.json +1 -0
- package/bpk-component-navigation-stack/src/BpkNavigationStack.js +1 -2
- package/bpk-component-nudger/src/BpkConfigurableNudger.js +0 -1
- package/bpk-component-nudger/src/BpkNudger.js +0 -1
- package/bpk-component-nudger/src/BpkNudger.module.css +1 -1
- package/bpk-component-overlay/src/BpkOverlay.js +0 -1
- package/bpk-component-pagination/src/BpkPagination.js +0 -1
- package/bpk-component-pagination/src/BpkPaginationList.js +0 -1
- package/bpk-component-pagination/src/BpkPaginationNudger.js +0 -1
- package/bpk-component-pagination/src/BpkPaginationPage.js +1 -2
- package/bpk-component-pagination/src/BpkPaginationPage.module.css +1 -1
- package/bpk-component-panel/src/BpkPanel.js +0 -1
- package/bpk-component-phone-input/src/BpkPhoneInput.js +0 -1
- package/bpk-component-phone-input/src/BpkPhoneInput.module.css +1 -1
- package/bpk-component-popover/src/BpkPopover.js +0 -1
- package/bpk-component-popover/src/BpkPopover.module.css +1 -1
- package/bpk-component-popover/src/BpkPopoverPortal.js +25 -15
- package/bpk-component-price/README.md +4 -2
- package/bpk-component-price/index.js +3 -2
- package/bpk-component-price/package.json +1 -1
- package/bpk-component-price/src/BpkPrice.js +16 -13
- package/bpk-component-price/src/BpkPrice.module.css +18 -0
- package/bpk-component-price/src/BpkPrice.module.scss +16 -10
- package/bpk-component-price/src/common-types.js +29 -0
- package/bpk-component-progress/src/BpkProgress.js +0 -1
- package/bpk-component-radio/src/BpkRadio.js +0 -1
- package/bpk-component-rating/src/BpkRating.js +0 -1
- package/bpk-component-rating/src/BpkRating.module.css +1 -1
- package/bpk-component-rtl-toggle/src/BpkRtlToggle.js +0 -1
- package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js +0 -1
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js +0 -1
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js +0 -1
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +2 -6
- package/bpk-component-section-list/src/BpkSectionListItem.js +0 -1
- package/bpk-component-section-list/src/BpkSectionListSection.js +0 -1
- package/bpk-component-select/src/BpkSelect.js +0 -1
- package/bpk-component-skip-link/src/BpkSkipLink.js +0 -1
- package/bpk-component-slider/src/BpkSlider.js +0 -1
- package/bpk-component-spinner/src/BpkExtraLargeSpinner.js +1 -2
- package/bpk-component-spinner/src/BpkLargeSpinner.js +1 -2
- package/bpk-component-spinner/src/BpkSpinner.js +1 -2
- package/bpk-component-spinner/src/BpkSpinner.module.css +1 -1
- package/bpk-component-split-input/src/BpkInputField.js +2 -3
- package/bpk-component-split-input/src/BpkInputField.module.css +18 -0
- package/bpk-component-split-input/src/BpkInputField.module.scss +3 -3
- package/bpk-component-split-input/src/BpkSplitInput.js +4 -3
- package/bpk-component-split-input/src/BpkSplitInput.module.css +1 -1
- package/bpk-component-split-input/src/BpkSplitInput.module.scss +2 -2
- package/bpk-component-star-rating/src/BpkInteractiveStar.js +0 -1
- package/bpk-component-star-rating/src/BpkInteractiveStarRating.js +0 -1
- package/bpk-component-star-rating/src/BpkStar.js +0 -1
- package/bpk-component-star-rating/src/BpkStarRating.js +0 -1
- package/bpk-component-star-rating/src/withInteractiveStarRatingState.js +0 -1
- package/bpk-component-switch/src/BpkSwitch.js +0 -1
- package/bpk-component-table/src/BpkTable.js +0 -1
- package/bpk-component-table/src/BpkTableCell.js +0 -1
- package/bpk-component-table/src/BpkTableHeadCell.js +0 -1
- package/bpk-component-text/src/BpkText.js +0 -1
- package/bpk-component-text/src/BpkText.module.css +1 -1
- package/bpk-component-textarea/src/BpkTextarea.js +0 -1
- package/bpk-component-theme-toggle/src/BpkThemeToggle.js +0 -1
- package/bpk-component-theme-toggle/src/updateOnThemeChange.js +0 -1
- package/bpk-component-ticket/README.md +0 -1
- package/bpk-component-ticket/package.json +1 -1
- package/bpk-component-ticket/src/BpkTicket.js +0 -41
- package/bpk-component-ticket/src/BpkTicket.module.css +1 -1
- package/bpk-component-ticket/src/BpkTicket.module.scss +13 -165
- package/bpk-component-tooltip/src/BpkTooltip.js +0 -1
- package/bpk-component-tooltip/src/BpkTooltip.module.css +1 -1
- package/bpk-component-tooltip/src/BpkTooltipPortal.js +0 -1
- package/bpk-react-utils/src/Portal.js +1 -1
- package/bpk-scrim-utils/src/BpkScrim.js +0 -1
- package/bpk-scrim-utils/src/bpk-scrim.module.css +1 -1
- package/bpk-scrim-utils/src/withScrim.js +0 -1
- package/package.json +1 -1
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
|
|
19
19
|
import PropTypes from 'prop-types';
|
|
20
20
|
import React from 'react';
|
|
21
|
-
|
|
22
21
|
import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
|
|
23
22
|
import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
|
|
24
23
|
import BpkSelect from '../../bpk-component-select';
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-container>h1:not(:first-child),.bpk-content-container>h2:not(:first-child),.bpk-content-container>h3:not(:first-child),.bpk-content-container>h4:not(:first-child){margin-top:1.875rem}.bpk-content-container>.bpk-content-container{margin-bottom:.75rem}.bpk-content-container>*:last-child{margin-bottom:0}.bpk-content-container--bare-html h1{margin-top:0;margin-bottom:.75rem;font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-container>h1:not(:first-child),.bpk-content-container>h2:not(:first-child),.bpk-content-container>h3:not(:first-child),.bpk-content-container>h4:not(:first-child){margin-top:1.875rem}.bpk-content-container>.bpk-content-container{margin-bottom:.75rem}.bpk-content-container>*:last-child{margin-bottom:0}.bpk-content-container--bare-html h1{margin-top:0;margin-bottom:.75rem;font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-content-container--bare-html h2{margin-top:0;margin-bottom:.75rem;font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-content-container--bare-html h3{margin-top:0;margin-bottom:.75rem;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-content-container--bare-html h4{margin-top:0;margin-bottom:.375rem;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-container--bare-html h5{margin-top:0;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-content-container--bare-html h6{margin-top:0;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-content-container--bare-html a{padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-link-color, #0770e3)}.bpk-no-touch-support .bpk-content-container--bare-html a:hover:not(:active):not(:disabled){text-decoration:underline;color:#084eb2;color:var(--bpk-link-hover-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-content-container--bare-html a:hover:not(:active):not(:disabled){text-decoration:underline;color:#084eb2;color:var(--bpk-link-hover-color, #084eb2)}.bpk-content-container--bare-html a:visited{color:#0770e3;color:var(--bpk-link-visited-color, #0770e3)}.bpk-content-container--bare-html a:active{text-decoration:underline;color:#042759;color:var(--bpk-link-active-color, #042759)}.bpk-content-container--bare-html p{margin-top:0;margin-bottom:.375rem;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-container--bare-html ul,.bpk-content-container--bare-html ol{margin-top:1rem;margin-bottom:1rem;padding-left:1.5rem}.bpk-content-container--bare-html ul ul,.bpk-content-container--bare-html ul ol,.bpk-content-container--bare-html ol ul,.bpk-content-container--bare-html ol ol{margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-bottom:0.25rem}.bpk-content-container--bare-html ul li,.bpk-content-container--bare-html ol li{margin-top:0;margin-bottom:.25rem}.bpk-content-container--bare-html table{width:100%;margin-bottom:0.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #dddde5 }.bpk-content-container--bare-html table td{padding:1rem}.bpk-content-container--bare-html table th{padding:1rem;background-color:#f1f2f8;font-weight:normal;text-align:left}html[dir='rtl'] .bpk-content-container--bare-html table th{text-align:right}.bpk-content-container--bare-html code{display:inline;padding:0 .375rem;background-color:#f1f2f8;color:#444560;text-align:left;text-shadow:0 .0625rem #fff;white-space:nowrap;vertical-align:bottom;border-radius:.25rem}html[dir='rtl'] .bpk-content-container--bare-html code{direction:ltr}.bpk-content-container--bare-html pre{margin:0 0 .75rem;padding:1.5rem;background-color:#f1f2f8;border-radius:.25rem}.bpk-content-container--bare-html pre>code{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-content-container--bare-html pre>code::-webkit-scrollbar{display:none}.bpk-content-container--bare-html blockquote{margin:0 0 1rem 0;padding:1.5rem;background-color:#f1f2f8;color:#68697f;box-shadow:2px 0 0 0 #0770e3 inset;box-shadow:2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}html[dir='rtl'] .bpk-content-container--bare-html blockquote{padding:1.5rem;border-left:0;box-shadow:-2px 0 0 0 #0770e3 inset;box-shadow:-2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}.bpk-content-container--bare-html blockquote>*:last-child{margin-bottom:0}.bpk-content-container--bare-html-alternate code{background-color:#cddff8;text-shadow:none}.bpk-content-container--bare-html-alternate pre{background-color:transparent;box-shadow:0 0 0 1px #b2b2bf inset}.bpk-content-container--bare-html-alternate pre>code{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-content-container--bare-html-alternate pre>code::-webkit-scrollbar{display:none}.bpk-content-container--bare-html-alternate table{box-shadow:0 0 0 1px #b2b2bf }.bpk-content-container--bare-html-alternate table th{background-color:#fff;text-align:left;font-weight:700}html[dir='rtl'] .bpk-content-container--bare-html-alternate table th{text-align:right}
|
|
@@ -20,9 +20,8 @@
|
|
|
20
20
|
import PropTypes from 'prop-types';
|
|
21
21
|
import React, { Component } from 'react';
|
|
22
22
|
import { Table, AutoSizer } from 'react-virtualized';
|
|
23
|
-
import _omit from 'lodash/omit';
|
|
24
|
-
|
|
25
23
|
import { cssModules } from '../../bpk-react-utils';
|
|
24
|
+
import _omit from 'lodash/omit';
|
|
26
25
|
|
|
27
26
|
import STYLES from './BpkDataTable.module.scss';
|
|
28
27
|
import BpkDataTableColumn from './BpkDataTableColumn';
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
|
|
20
20
|
import React from 'react';
|
|
21
21
|
import { SortDirection } from 'react-virtualized';
|
|
22
|
-
|
|
23
22
|
import { cssModules } from '../../bpk-react-utils';
|
|
24
23
|
import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
|
|
25
24
|
import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
|
|
@@ -16,13 +16,12 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import PropTypes from 'prop-types';
|
|
20
|
-
import React, { Component } from 'react';
|
|
21
|
-
|
|
22
19
|
import BpkInput, { withOpenEvents } from '../../bpk-component-input';
|
|
23
20
|
import BpkModal from '../../bpk-component-modal';
|
|
24
21
|
import BpkPopover from '../../bpk-component-popover';
|
|
25
22
|
import { cssModules, deprecated } from '../../bpk-react-utils';
|
|
23
|
+
import PropTypes from 'prop-types';
|
|
24
|
+
import React, { Component } from 'react';
|
|
26
25
|
import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
|
|
27
26
|
import {
|
|
28
27
|
composeCalendar,
|
|
@@ -262,18 +261,20 @@ class BpkDatepicker extends Component {
|
|
|
262
261
|
<BpkBreakpoint query={BREAKPOINTS.MOBILE}>
|
|
263
262
|
{(isMobile) =>
|
|
264
263
|
isMobile ? (
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
264
|
+
<>
|
|
265
|
+
{input}
|
|
266
|
+
<BpkModal
|
|
267
|
+
id={`${id}-modal`}
|
|
268
|
+
renderTarget={renderTarget}
|
|
269
|
+
onClose={this.props.onClose || this.onClose}
|
|
270
|
+
isOpen={this.state.isOpen}
|
|
271
|
+
title={title}
|
|
272
|
+
closeLabel={closeButtonText}
|
|
273
|
+
getApplicationElement={getApplicationElement}
|
|
274
|
+
>
|
|
275
|
+
<Calendar {...calendarProps} fixedWidth={false} />
|
|
276
|
+
</BpkModal>
|
|
277
|
+
</>
|
|
277
278
|
) : (
|
|
278
279
|
<BpkPopover
|
|
279
280
|
id={`${id}-popover`}
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#0770e3}
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
22
|
import React, { Component } from 'react';
|
|
23
|
-
|
|
24
23
|
import { Portal, cssModules } from '../../bpk-react-utils';
|
|
25
24
|
import { withScrim } from '../../bpk-scrim-utils';
|
|
26
25
|
|
|
@@ -35,7 +34,6 @@ type Props = {
|
|
|
35
34
|
isOpen: boolean,
|
|
36
35
|
onClose: () => mixed,
|
|
37
36
|
renderTarget: ?() => mixed,
|
|
38
|
-
target: ?any,
|
|
39
37
|
};
|
|
40
38
|
|
|
41
39
|
type State = {
|
|
@@ -45,7 +43,6 @@ type State = {
|
|
|
45
43
|
class BpkDrawer extends Component<Props, State> {
|
|
46
44
|
static defaultProps = {
|
|
47
45
|
renderTarget: null,
|
|
48
|
-
target: null,
|
|
49
46
|
};
|
|
50
47
|
|
|
51
48
|
constructor() {
|
|
@@ -71,17 +68,12 @@ class BpkDrawer extends Component<Props, State> {
|
|
|
71
68
|
};
|
|
72
69
|
|
|
73
70
|
render() {
|
|
74
|
-
const { isOpen, onClose, renderTarget,
|
|
71
|
+
const { isOpen, onClose, renderTarget, ...rest } = this.props;
|
|
75
72
|
|
|
76
73
|
const { isDrawerShown } = this.state;
|
|
77
74
|
|
|
78
75
|
return (
|
|
79
|
-
<Portal
|
|
80
|
-
isOpen={isOpen}
|
|
81
|
-
onClose={this.hide}
|
|
82
|
-
target={target}
|
|
83
|
-
renderTarget={renderTarget}
|
|
84
|
-
>
|
|
76
|
+
<Portal isOpen={isOpen} onClose={this.hide} renderTarget={renderTarget}>
|
|
85
77
|
{/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */}
|
|
86
78
|
<BpkScrimDrawerContent
|
|
87
79
|
isDrawerShown={isDrawerShown}
|
|
@@ -99,7 +91,6 @@ BpkDrawer.propTypes = {
|
|
|
99
91
|
isOpen: PropTypes.bool.isRequired,
|
|
100
92
|
onClose: PropTypes.func.isRequired,
|
|
101
93
|
renderTarget: PropTypes.func,
|
|
102
|
-
target: PropTypes.element,
|
|
103
94
|
};
|
|
104
95
|
|
|
105
96
|
export default BpkDrawer;
|
|
@@ -22,7 +22,6 @@ import PropTypes from 'prop-types';
|
|
|
22
22
|
import React, { type Node } from 'react';
|
|
23
23
|
import Transition from 'react-transition-group/Transition';
|
|
24
24
|
import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
25
|
-
|
|
26
25
|
import { cssModules } from '../../bpk-react-utils';
|
|
27
26
|
import { BpkButtonLink } from '../../bpk-component-link';
|
|
28
27
|
import BpkCloseButton from '../../bpk-component-close-button';
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}html[dir='rtl'] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media (max-width:
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}html[dir='rtl'] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media (max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir='rtl'] .bpk-drawer--entering,html[dir='rtl'] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir='rtl'] .bpk-drawer--exiting,html[dir='rtl'] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir='rtl'] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;padding:1rem;flex:1 1 100%;overflow-y:auto}
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
|
|
20
20
|
import PropTypes from 'prop-types';
|
|
21
21
|
import React, { cloneElement, type Element } from 'react';
|
|
22
|
-
|
|
23
22
|
import BpkLabel from '../../bpk-component-label';
|
|
24
23
|
import BpkFormValidation from '../../bpk-component-form-validation';
|
|
25
24
|
import { cssModules } from '../../bpk-react-utils';
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width:
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width: 32rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir='rtl'] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media (max-width: 32rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)}
|
|
@@ -35,6 +35,7 @@ export default () => (
|
|
|
35
35
|
| hideAfter | number | false | 4000 |
|
|
36
36
|
| icon | ReactElement | false | null |
|
|
37
37
|
| onClick | func | false | null |
|
|
38
|
+
| onExit | func | false | null |
|
|
38
39
|
| text | string | true | - |
|
|
39
40
|
| type | oneOf(TYPE) | false | TYPE.light |
|
|
40
41
|
|
|
@@ -46,6 +47,10 @@ This prop controls the amount of time that the notification stays visible before
|
|
|
46
47
|
|
|
47
48
|
The default value is 4 seconds (4000 milliseconds).
|
|
48
49
|
|
|
50
|
+
#### onExit
|
|
51
|
+
|
|
52
|
+
Execute a function after the component has finished the exit animation.
|
|
53
|
+
|
|
49
54
|
#### type
|
|
50
55
|
|
|
51
56
|
By default the component is rendered in the light theme (`TYPE.light`) which uses a dark background and white text for the notification. This contrasts against a white page.
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
import PropTypes from 'prop-types';
|
|
21
21
|
import React, { useEffect, useState, ReactElement } from 'react';
|
|
22
22
|
import { CSSTransition } from 'react-transition-group';
|
|
23
|
-
|
|
24
23
|
import BpkButton from '../../bpk-component-button';
|
|
25
24
|
import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
|
|
26
25
|
import { cssModules } from '../../bpk-react-utils';
|
|
@@ -34,7 +33,7 @@ export const TYPE = {
|
|
|
34
33
|
dark: 'dark',
|
|
35
34
|
};
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
type Props = {
|
|
38
37
|
animateOnEnter: ?boolean,
|
|
39
38
|
animateOnExit: ?boolean,
|
|
40
39
|
className: ?string,
|
|
@@ -42,6 +41,7 @@ export type Props = {
|
|
|
42
41
|
hideAfter: ?number,
|
|
43
42
|
icon: ?() => ReactElement,
|
|
44
43
|
onClick: ?() => void,
|
|
44
|
+
onExit: ?() => void,
|
|
45
45
|
text: string,
|
|
46
46
|
type: ?TYPE,
|
|
47
47
|
};
|
|
@@ -57,6 +57,7 @@ const BpkFloatingNotification = (props: Props) => {
|
|
|
57
57
|
hideAfter,
|
|
58
58
|
icon: Icon,
|
|
59
59
|
onClick,
|
|
60
|
+
onExit,
|
|
60
61
|
text,
|
|
61
62
|
type,
|
|
62
63
|
...rest
|
|
@@ -100,6 +101,7 @@ const BpkFloatingNotification = (props: Props) => {
|
|
|
100
101
|
appear={animateOnEnter}
|
|
101
102
|
exit={animateOnExit}
|
|
102
103
|
unmountOnExit
|
|
104
|
+
onExited={onExit}
|
|
103
105
|
>
|
|
104
106
|
<div className={classNames} {...rest}>
|
|
105
107
|
{Icon && (
|
|
@@ -132,6 +134,7 @@ BpkFloatingNotification.propTypes = {
|
|
|
132
134
|
hideAfter: PropTypes.number,
|
|
133
135
|
icon: PropTypes.ReactElement,
|
|
134
136
|
onClick: PropTypes.func,
|
|
137
|
+
onExit: PropTypes.func,
|
|
135
138
|
text: PropTypes.string.isRequired,
|
|
136
139
|
type: PropTypes.oneOf(Object.values(TYPE)),
|
|
137
140
|
};
|
|
@@ -144,6 +147,7 @@ BpkFloatingNotification.defaultProps = {
|
|
|
144
147
|
hideAfter: 4000,
|
|
145
148
|
icon: null,
|
|
146
149
|
onClick: null,
|
|
150
|
+
onExit: null,
|
|
147
151
|
type: TYPE.light,
|
|
148
152
|
};
|
|
149
153
|
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{display:flex}
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#02122c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;margin:0 0 auto auto;padding:0;color:#6d9feb}.bpk-floating-notification__button--dark{color:#0770e3}.bpk-floating-notification__icon{margin:0.25rem 0.5rem 0 0.25rem;flex-shrink:0;text-align:bottom;fill:#fff}.bpk-floating-notification__icon--dark{fill:#111236}.bpk-floating-notification__text{margin-right:0.5rem}.bpk-floating-notification--dark{background:#fff;color:#111236}
|
|
@@ -18,15 +18,14 @@
|
|
|
18
18
|
|
|
19
19
|
import PropTypes from 'prop-types';
|
|
20
20
|
import React from 'react';
|
|
21
|
-
import {
|
|
22
|
-
lineHeightSm,
|
|
23
|
-
iconSizeSm,
|
|
24
|
-
} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
25
|
-
|
|
26
21
|
import AnimateHeight from '../../bpk-animate-height';
|
|
27
22
|
import { cssModules } from '../../bpk-react-utils';
|
|
28
23
|
import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
|
|
29
24
|
import { withAlignment } from '../../bpk-component-icon';
|
|
25
|
+
import {
|
|
26
|
+
lineHeightSm,
|
|
27
|
+
iconSizeSm,
|
|
28
|
+
} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
30
29
|
|
|
31
30
|
import STYLES from './BpkFormValidation.module.scss';
|
|
32
31
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Backpack - Skyscanner's Design System
|
|
3
|
+
*
|
|
4
|
+
* Copyright 2016 Skyscanner Ltd
|
|
5
|
+
*
|
|
6
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
7
|
+
* you may not use this file except in compliance with the License.
|
|
8
|
+
* You may obtain a copy of the License at
|
|
9
|
+
*
|
|
10
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
+
*
|
|
12
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
13
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
14
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
|
+
* See the License for the specific language governing permissions and
|
|
16
|
+
* limitations under the License.
|
|
17
|
+
*/
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card{position:relative;display:block;background-color:#fff;color:#111236;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:65.5rem;margin-right:auto;margin-left:auto;background-color:#0770e3;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media (min-width: 43.76rem){.bpk-graphic-promo__sponsor-label{margin-bottom:0.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-graphic-promo__sponsor-content{margin-bottom:2rem}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.5rem;font-weight:400}}@media (min-width: 43.76rem) and (min-width: 50.01rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}}@media (min-width: 43.76rem) and (min-width: 43.76rem) and (max-width: 50rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}}@media (min-width: 43.76rem){.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media (min-width: 32.01rem) and (max-width: 43.75rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-graphic-promo__headline{margin-bottom:.5rem;font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:2rem;font-weight:400}}@media (min-width: 26.51rem) and (max-width: 32rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-graphic-promo__headline{margin-bottom:.5rem;font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-graphic-promo__subheading{font-size:1.25rem;line-height:1.75rem;font-weight:400}}@media (max-width: 26.5rem){.bpk-graphic-promo__sponsor-label{margin-bottom:0.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-graphic-promo__headline{margin-bottom:.5rem;font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.5rem;font-weight:400}}.bpk-graphic-promo__container{display:flex;flex-direction:column}@media (min-width: 43.76rem){.bpk-graphic-promo__container{justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}}@media (max-width: 43.75rem){.bpk-graphic-promo__container{justify-content:space-between}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}}@media (min-width: 50.01rem){.bpk-graphic-promo__container{height:25rem;margin-left:4rem;margin-right:2.5rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-right:4rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir='rtl'] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media (min-width: 43.76rem) and (max-width: 50rem){.bpk-graphic-promo__container{height:25rem;margin-left:2.5rem;margin-right:2rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir='rtl'] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media (min-width: 32.01rem) and (max-width: 43.75rem){.bpk-graphic-promo__container{height:58.3125rem;padding:2rem}}@media (min-width: 26.51rem) and (max-width: 32rem){.bpk-graphic-promo__container{height:42.625rem;padding:2rem}}@media (max-width: 26.5rem){.bpk-graphic-promo__container{height:31.25rem;padding:1.5rem}}.bpk-graphic-promo__sponsor-content,.bpk-graphic-promo__promo-content{display:flex;flex-direction:column}@media (min-width: 43.76rem){.bpk-graphic-promo__sponsor-content--start,.bpk-graphic-promo__promo-content--start{align-items:start;text-align:start}.bpk-graphic-promo__sponsor-content--center,.bpk-graphic-promo__promo-content--center{align-items:center;text-align:center}.bpk-graphic-promo__sponsor-content--end,.bpk-graphic-promo__promo-content--end{align-items:start;text-align:start}}@media (min-width: 50.01rem){.bpk-graphic-promo__sponsor-content,.bpk-graphic-promo__promo-content{width:22.5rem}}@media (min-width: 43.76rem) and (max-width: 50rem){.bpk-graphic-promo__sponsor-content,.bpk-graphic-promo__promo-content{width:20rem}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__sponsor-logo{width:9.25rem}@media (min-width: 43.76rem){.bpk-graphic-promo__cta{margin-top:2rem}}@media (max-width: 43.75rem){.bpk-graphic-promo__cta{display:none}}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Backpack - Skyscanner's Design System
|
|
3
|
+
*
|
|
4
|
+
* Copyright 2016 Skyscanner Ltd
|
|
5
|
+
*
|
|
6
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
7
|
+
* you may not use this file except in compliance with the License.
|
|
8
|
+
* You may obtain a copy of the License at
|
|
9
|
+
*
|
|
10
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
+
*
|
|
12
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
13
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
14
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
|
+
* See the License for the specific language governing permissions and
|
|
16
|
+
* limitations under the License.
|
|
17
|
+
*/
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@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:
|
|
18
|
+
@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: 64rem){.bpk-grid__column--tablet-0{display:none}}@media (max-width: 64rem){.bpk-grid__column--tablet-1{display:block;width:8.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-2{display:block;width:16.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-3{display:block;width:25%}}@media (max-width: 64rem){.bpk-grid__column--tablet-4{display:block;width:33.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-5{display:block;width:41.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-6{display:block;width:50%}}@media (max-width: 64rem){.bpk-grid__column--tablet-7{display:block;width:58.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-8{display:block;width:66.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-9{display:block;width:75%}}@media (max-width: 64rem){.bpk-grid__column--tablet-10{display:block;width:83.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-11{display:block;width:91.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-12{display:block;width:100%}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-tablet-0{margin-right:0}}@media (max-width: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 64rem){.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: 32rem){.bpk-grid__column--mobile-0{display:none}}@media (max-width: 32rem){.bpk-grid__column--mobile-1{display:block;width:8.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-2{display:block;width:16.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-3{display:block;width:25%}}@media (max-width: 32rem){.bpk-grid__column--mobile-4{display:block;width:33.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-5{display:block;width:41.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-6{display:block;width:50%}}@media (max-width: 32rem){.bpk-grid__column--mobile-7{display:block;width:58.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-8{display:block;width:66.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-9{display:block;width:75%}}@media (max-width: 32rem){.bpk-grid__column--mobile-10{display:block;width:83.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-11{display:block;width:91.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-12{display:block;width:100%}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-mobile-0{margin-right:0}}@media (max-width: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.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: 32rem){.bpk-grid__column--offset-mobile-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-mobile-12{margin-right:100%;margin-left:0}}
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__container{max-width:
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__container{max-width:80rem;margin:0 auto;padding-right:.75rem;padding-left:.75rem}@media (min-width: 64.0625rem){.bpk-grid__container{padding-right:1.5rem;padding-left:1.5rem}}.bpk-grid__container--debug{background-color:#f1f2f8}.bpk-grid__container--full-width{max-width:100%}
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__row{margin-right:-.75rem;margin-left:-.75rem}.bpk-grid__row::before,.bpk-grid__row::after{content:'';display:table}.bpk-grid__row::after{clear:both}@media (min-width:
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__row{margin-right:-.75rem;margin-left:-.75rem}.bpk-grid__row::before,.bpk-grid__row::after{content:'';display:table}.bpk-grid__row::after{clear:both}@media (min-width: 64.0625rem){.bpk-grid__row--padded:first-child{padding-top:.75rem}.bpk-grid__row--padded:last-child{padding-bottom:.75rem}}
|