@skyscanner/backpack-web 36.18.0 → 37.1.0
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/bpk-component-button/src/BpkButtonBase.module.css +1 -1
- package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css +1 -1
- package/bpk-component-carousel/src/BpkCarousel.js +0 -2
- package/bpk-component-checkbox/src/BpkCheckbox.module.css +1 -1
- package/bpk-component-icon/all.d.ts +2 -1
- package/bpk-component-icon/all.js +2 -1
- package/bpk-component-icon/lg/award.js +1 -1
- package/bpk-component-icon/lg/baggage-personal-item.js +14 -0
- package/bpk-component-icon/lg/bus.js +8 -5
- package/bpk-component-icon/sm/award.js +1 -1
- package/bpk-component-icon/sm/baggage-personal-item.js +14 -0
- package/bpk-component-icon/sm/bus.js +3 -2
- package/bpk-component-icon/sm/check.js +18 -0
- package/bpk-component-icon/xl/star-half.js +14 -0
- package/bpk-component-icon/xl/star-outline.js +14 -0
- package/bpk-component-icon/xl/star.js +14 -0
- package/bpk-component-inset-banner/src/BpkInsetBanner.d.ts +3 -0
- package/bpk-component-inset-banner/src/BpkInsetBanner.js +8 -0
- package/bpk-component-inset-banner/src/BpkInsetBanner.module.css +1 -1
- package/bpk-component-link/src/BpkLink.js +11 -5
- package/bpk-component-link/src/BpkLink.module.css +1 -1
- package/bpk-component-overlay/src/BpkOverlay.d.ts +2 -2
- package/bpk-component-overlay/src/BpkOverlay.js +4 -4
- package/bpk-component-overlay/src/BpkOverlay.module.css +1 -1
- package/bpk-component-page-indicator/index.d.ts +6 -0
- package/bpk-component-page-indicator/index.js +3 -1
- package/bpk-component-page-indicator/src/BpkPageIndicator.d.ts +21 -0
- package/bpk-component-page-indicator/src/BpkPageIndicator.js +49 -68
- package/bpk-component-page-indicator/src/NavButton.d.ts +15 -0
- package/bpk-component-page-indicator/src/NavButton.js +22 -35
- package/bpk-component-price/src/BpkPrice.js +6 -2
- package/bpk-component-tooltip/index.d.ts +4 -4
- package/bpk-component-tooltip/index.js +2 -2
- package/bpk-component-tooltip/src/BpkTooltip.d.ts +17 -4
- package/bpk-component-tooltip/src/BpkTooltip.js +100 -23
- package/bpk-component-tooltip/src/BpkTooltip.module.css +1 -1
- package/bpk-mixins/_buttons.scss +5 -1
- package/bpk-mixins/_forms.scss +5 -26
- package/bpk-mixins/_typography.scss +101 -8
- package/package.json +3 -3
- package/unstable__bpk-mixins/_buttons.scss +5 -1
- package/unstable__bpk-mixins/_forms.scss +5 -28
- package/unstable__bpk-mixins/_typography.scss +101 -8
- package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts +0 -54
- package/bpk-component-tooltip/src/BpkTooltipPortal.js +0 -154
|
@@ -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
|
-
.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}.bpk-button--featured{composes:bpk-button;color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive{composes:bpk-button;color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--linkOnDark{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--linkOnDark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--linkOnDark:disabled{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primaryOnDark{composes:bpk-button;color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primaryOnLight{composes:bpk-button;color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{composes:bpk-button;color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondaryOnDark{composes:bpk-button;color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}
|
|
18
|
+
.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}.bpk-button--featured{composes:bpk-button;color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive{composes:bpk-button;color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{composes:bpk-button;background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled)::after{width:100%}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled)::after{width:100%}.bpk-button--link::after{width:0;transition:width .2s ease 0s,left .2s ease 0s}.bpk-button--link:active{text-decoration:underline;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link:active::after{width:100%}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--linkOnDark{composes:bpk-button;background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled)::after{width:100%}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled)::after{width:100%}.bpk-button--linkOnDark::after{width:0;transition:width .2s ease 0s,left .2s ease 0s}.bpk-button--linkOnDark:active{text-decoration:underline;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--linkOnDark:active::after{width:100%}.bpk-button--linkOnDark::after{bottom:auto}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--linkOnDark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--linkOnDark:disabled{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primaryOnDark{composes:bpk-button;color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primaryOnLight{composes:bpk-button;color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{composes:bpk-button;color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondaryOnDark{composes:bpk-button;color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}
|
|
@@ -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
|
-
.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
|
|
18
|
+
.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled)::after{width:100%}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled)::after{width:100%}.bpk-button--link::after{width:0;transition:width .2s ease 0s,left .2s ease 0s}.bpk-button--link:active{text-decoration:underline;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link:active::after{width:100%}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled)::after{width:100%}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled)::after{width:100%}.bpk-button--link-on-dark::after{width:0;transition:width .2s ease 0s,left .2s ease 0s}.bpk-button--link-on-dark:active{text-decoration:underline;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active::after{width:100%}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
|
|
@@ -17,8 +17,6 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { useRef, useState } from 'react';
|
|
20
|
-
|
|
21
|
-
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
22
20
|
import BpkPageIndicator, { VARIANT } from "../../bpk-component-page-indicator";
|
|
23
21
|
import { cssModules } from "../../bpk-react-utils";
|
|
24
22
|
import BpkCarouselContainer from "./BpkCarouselContainer";
|
|
@@ -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
|
-
.bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir=rtl] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:hsla(0,0%,100%,.5)}.bpk-checkbox--invalid input[type=checkbox]{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #626971;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir=rtl] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227))}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate)
|
|
18
|
+
.bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir=rtl] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:hsla(0,0%,100%,.5)}.bpk-checkbox--invalid input[type=checkbox]{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #626971;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir=rtl] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227))}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate){background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox__input:checked:not(:indeterminate):disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox__input:disabled{border-color:rgba(0,0,0,.2)}.bpk-checkbox__input-indeterminate::before{position:absolute;top:.3125rem;left:.125rem;content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox__input:disabled{cursor:inherit}.bpk-checkbox__input-white{background-color:#fff}.bpk-checkbox__asterisk{color:#e70866}
|
|
@@ -28,5 +28,6 @@ function requireAll(requireContext) {
|
|
|
28
28
|
}
|
|
29
29
|
const sm = requireAll(require.context('./sm', false, /\.jsx$/));
|
|
30
30
|
const lg = requireAll(require.context('./lg', false, /\.jsx$/));
|
|
31
|
+
const xl = requireAll(require.context('./xl', false, /\.jsx$/));
|
|
31
32
|
export default sm;
|
|
32
|
-
export { sm, lg };
|
|
33
|
+
export { sm, lg, xl };
|
|
@@ -8,7 +8,7 @@ const AwardIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
|
8
8
|
height: "1.5rem",
|
|
9
9
|
...props,
|
|
10
10
|
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
-
d: "m15.431 9.576-.034.033a6.75 6.75 0 0 1 3.353 5.823 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75A6.75 6.75 0 0 1 8.603 9.61a27 27 0 0 1-.793-.
|
|
11
|
+
d: "m15.431 9.576-.034.033a6.75 6.75 0 0 1 3.353 5.823 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75A6.75 6.75 0 0 1 8.603 9.61a27 27 0 0 1-.793-.76C5.37 6.42 3.827 4.022 3.125 2.81l1.298-.753c.665 1.15 2.128 3.421 4.447 5.731.296.296.59.582.885.848q.11.1.22.192l.148.126A6.7 6.7 0 0 1 12 8.683c.3 0 .594.026.884.064a25 25 0 0 1-1.381-1.106 24 24 0 0 1-1.288-1.22 28 28 0 0 1-3-3.557L8.44 2a26.8 26.8 0 0 0 3.547 4.053l.166-.151c.186-.17.372-.339.558-.529A27 27 0 0 0 15.56 2l1.227.864a28 28 0 0 1-3.005 3.562c-.153.156-.306.296-.46.436l-.196.18c.584.477 1.116.874 1.553 1.179l.128-.122q.16-.149.323-.31c2.32-2.312 3.783-4.584 4.448-5.733l1.298.752c-.702 1.213-2.245 3.61-4.686 6.042-.254.254-.508.492-.758.726m-1.484 6.52.86-.318a.297.297 0 0 0 0-.556l-.86-.318a2.3 2.3 0 0 1-1.351-1.351l-.318-.86a.296.296 0 0 0-.556 0l-.318.86a2.3 2.3 0 0 1-1.351 1.351l-.86.318a.297.297 0 0 0 0 .556l.86.318c.626.232 1.12.725 1.35 1.351l.319.86c.095.258.46.258.556 0l.318-.86a2.3 2.3 0 0 1 1.351-1.351"
|
|
12
12
|
})
|
|
13
13
|
});
|
|
14
14
|
export default AwardIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const BaggagePersonalItemIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1.5rem",
|
|
8
|
+
height: "1.5rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M12 2a3 3 0 0 1 3 3v.803A6 6 0 0 1 18 11v2h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-1.17A3 3 0 0 1 15 21H9a3 3 0 0 1-2.83-2H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h1v-2c0-2.22 1.207-4.16 3-5.197V5a3 3 0 0 1 3-3m0 3c.699 0 1.37.12 1.994.34a2 2 0 0 0-3.988 0A6 6 0 0 1 12 5M8 15.5a.5.5 0 0 0 .5.5h1l.75 1.299a.5.5 0 1 0 .866-.5L10.655 16H15.5a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default BaggagePersonalItemIcon;
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
const BusIcon = props => /*#__PURE__*/
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
const BusIcon = props => /*#__PURE__*/_jsxs("svg", {
|
|
4
4
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5
5
|
viewBox: "0 0 24 24",
|
|
6
6
|
"aria-hidden": "true",
|
|
7
7
|
width: "1.5rem",
|
|
8
8
|
height: "1.5rem",
|
|
9
9
|
...props,
|
|
10
|
-
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
-
d: "
|
|
12
|
-
|
|
10
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M19.386 5c.448 0 .878.13 1.246.375 1.071.711 2.868 2.617 2.868 7.375v2.5c0 1.24-1.01 2.25-2.25 2.25H20a2.5 2.5 0 0 0-5 0H8a2.5 2.5 0 0 0-5 0h-.75C1.01 17.5 0 16.49 0 15.25v-8C0 6.01 1.01 5 2.25 5zm2.593 6.94c-.183-3.592-1.561-4.907-2.178-5.317a.73.73 0 0 0-.415-.123H16.5v3.521c2.611.152 4.385 1.082 5.479 1.918M15 6.5H2.25a.75.75 0 0 0-.75.75V10H15z",
|
|
12
|
+
clipRule: "evenodd"
|
|
13
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
14
|
+
d: "M19 17.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-12 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"
|
|
15
|
+
})]
|
|
13
16
|
});
|
|
14
17
|
export default BusIcon;
|
|
@@ -8,7 +8,7 @@ const AwardIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
|
8
8
|
height: "1rem",
|
|
9
9
|
...props,
|
|
10
10
|
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
-
d: "m15.431 9.828-.034.032a6.75 6.75 0 0 1 3.353 5.824 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75 6.75 6.75 0 0 1 3.353-5.823 27 27 0 0 1-.793-.76C5.212 6.593 3.35 3.465 2.648 2.25l1.298-.751.014.
|
|
11
|
+
d: "m15.431 9.828-.034.032a6.75 6.75 0 0 1 3.353 5.824 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75 6.75 6.75 0 0 1 3.353-5.823 27 27 0 0 1-.793-.76C5.212 6.593 3.35 3.465 2.648 2.25l1.298-.751.014.024c.674 1.164 2.24 3.87 4.91 6.517.296.295.59.582.885.848q.11.1.22.192l.148.126A6.7 6.7 0 0 1 12 8.935c.3 0 .594.026.884.064a25 25 0 0 1-1.381-1.106 24 24 0 0 1-1.288-1.22c-1.283-1.233-2.687-3.078-3.549-4.3l1.227-.864c.801 1.137 2.14 2.894 3.39 4.112.238.242.472.467.705.684l.166-.151c.186-.17.372-.339.558-.529 1.228-1.188 2.592-2.983 3.393-4.12l1.227.864c-.861 1.222-2.285 3.1-3.551 4.309-.153.156-.306.296-.46.436l-.196.18c.584.477 1.116.874 1.553 1.179l.128-.122c.107-.101.214-.202.323-.311 2.682-2.665 4.12-5.156 4.823-6.374l.093-.161 1.298.752-.03.052c-.718 1.24-2.333 4.031-5.124 6.793-.254.254-.508.492-.758.726m-.625 6.134a.297.297 0 0 0 0-.556l-.859-.318a2.3 2.3 0 0 1-1.351-1.351l-.318-.86a.296.296 0 0 0-.556 0l-.318.86a2.3 2.3 0 0 1-1.351 1.351l-.86.318a.297.297 0 0 0 0 .556l.86.318c.626.232 1.12.725 1.35 1.351l.319.86c.095.258.46.258.556 0l.318-.86a2.3 2.3 0 0 1 1.351-1.35z"
|
|
12
12
|
})
|
|
13
13
|
});
|
|
14
14
|
export default AwardIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const BaggagePersonalItemIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1rem",
|
|
8
|
+
height: "1rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M12.25 3q.772.002 1.5.15V3a1.5 1.5 0 0 0-3 0v.15q.728-.149 1.5-.15m-7.5 7.5a7.5 7.5 0 0 1 4.5-6.876V3a3 3 0 1 1 6 0v.624a7.5 7.5 0 0 1 4.5 6.876v3h1.5a1.5 1.5 0 0 1 1.5 1.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-1.901a3 3 0 0 1-2.599 1.5h-9A3 3 0 0 1 5.151 21H3.25a1.5 1.5 0 0 1-1.5-1.5V15a1.5 1.5 0 0 1 1.5-1.5h1.5zm3 5.25c0 .414.336.75.75.75H10l1.125 1.949a.75.75 0 0 0 1.299-.75l-.692-1.199H16a.75.75 0 0 0 0-1.5H8.5a.75.75 0 0 0-.75.75"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default BaggagePersonalItemIcon;
|
|
@@ -8,9 +8,10 @@ const BusIcon = props => /*#__PURE__*/_jsxs("svg", {
|
|
|
8
8
|
height: "1rem",
|
|
9
9
|
...props,
|
|
10
10
|
children: [/*#__PURE__*/_jsx("path", {
|
|
11
|
-
d: "
|
|
11
|
+
d: "M19.799 4.5c.456 0 .896.132 1.272.382C22.165 5.61 24 7.556 24 12.415v4.787a2.3 2.3 0 0 1-2.298 2.298H21a3 3 0 1 0-6 0H9a3 3 0 1 0-6 0h-.702A2.3 2.3 0 0 1 0 17.202V6.798A2.3 2.3 0 0 1 2.298 4.5zm2.7 7.5c0-3.75-1.67-5.439-2.277-5.842a.75.75 0 0 0-.423-.126H16.85V10.5c2.667.155 4.532.646 5.649 1.5m-7.18-5.968H2.298a.767.767 0 0 0-.766.766v3.68h13.787z",
|
|
12
|
+
clipRule: "evenodd"
|
|
12
13
|
}), /*#__PURE__*/_jsx("path", {
|
|
13
|
-
d: "
|
|
14
|
+
d: "M7.5 19.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M18 21a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
|
|
14
15
|
})]
|
|
15
16
|
});
|
|
16
17
|
export default BusIcon;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const CheckIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1rem",
|
|
8
|
+
height: "1rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
stroke: "#fff",
|
|
12
|
+
strokeLinecap: "round",
|
|
13
|
+
strokeLinejoin: "round",
|
|
14
|
+
strokeWidth: 3,
|
|
15
|
+
d: "M2.354 3.646 5.5 7.5l6-6"
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
export default CheckIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const StarHalfIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "2rem",
|
|
8
|
+
height: "2rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M21.773 10.386a.795.795 0 0 0-.416-1.338l-5.476-.83a1 1 0 0 1-.755-.563l-2.454-5.217a.734.734 0 0 0-1.344 0L8.875 7.655a1 1 0 0 1-.755.563l-5.477.829a.795.795 0 0 0-.416 1.339l3.993 4.07a1 1 0 0 1 .273.863l-.948 5.761a.757.757 0 0 0 1.087.828l4.885-2.695a1 1 0 0 1 .966 0l4.885 2.695a.757.757 0 0 0 1.087-.827l-.943-5.763a1 1 0 0 1 .272-.862zm-5.417 2.671a3 3 0 0 0-.818 2.584l.535 3.268-2.623-1.447a3 3 0 0 0-1.45-.374V5.71l1.316 2.796a3 3 0 0 0 2.266 1.69l3.115.471z"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default StarHalfIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const StarOutlineIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "2rem",
|
|
8
|
+
height: "2rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M21.773 10.386a.795.795 0 0 0-.416-1.34l-5.476-.828a1 1 0 0 1-.755-.563l-2.454-5.217a.735.735 0 0 0-1.344 0L8.875 7.655a1 1 0 0 1-.756.563l-5.476.83a.795.795 0 0 0-.416 1.338l3.993 4.07a1 1 0 0 1 .273.863l-.948 5.76a.757.757 0 0 0 1.087.829l4.885-2.695a1 1 0 0 1 .966 0l4.885 2.695a.757.757 0 0 0 1.087-.827l-.943-5.763a1 1 0 0 1 .272-.862zm-5.417 2.672a3 3 0 0 0-.818 2.584l.535 3.268-2.624-1.447a3 3 0 0 0-2.898 0l-2.622 1.446.537-3.265a3 3 0 0 0-.818-2.588l-2.343-2.388 3.114-.471a3 3 0 0 0 2.265-1.69L12 5.71l1.316 2.797a3 3 0 0 0 2.266 1.69l3.115.47z"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default StarOutlineIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const StarIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "2rem",
|
|
8
|
+
height: "2rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M8.12 8.218a1 1 0 0 0 .755-.563l2.453-5.217a.735.735 0 0 1 1.344 0l2.454 5.217a1 1 0 0 0 .755.563l5.476.83a.795.795 0 0 1 .416 1.338l-3.989 4.07a1 1 0 0 0-.272.862l.943 5.763a.757.757 0 0 1-1.087.827l-4.885-2.695a1 1 0 0 0-.966 0l-4.885 2.695a.757.757 0 0 1-1.087-.828l.948-5.761a1 1 0 0 0-.273-.863l-3.993-4.07a.795.795 0 0 1 .416-1.34z"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default StarIcon;
|
|
@@ -19,6 +19,9 @@ export type Props = {
|
|
|
19
19
|
buttonA11yLabel?: string;
|
|
20
20
|
popverLabel?: string;
|
|
21
21
|
popoverId?: string;
|
|
22
|
+
popoverWidth?: string;
|
|
23
|
+
popoverMarginStart?: string;
|
|
24
|
+
popoverMarginEnd?: string;
|
|
22
25
|
labelTitle?: boolean;
|
|
23
26
|
closeBtnIcon?: boolean;
|
|
24
27
|
zIndexCustom?: number;
|
|
@@ -38,6 +38,9 @@ const BpkInsetBanner = ({
|
|
|
38
38
|
variant = VARIANT.onLight
|
|
39
39
|
}) => {
|
|
40
40
|
const classNames = getClassName('bpk-inset-banner', `bpk-inset-banner--${variant}`, body && 'bpk-inset-banner--with-body');
|
|
41
|
+
const popoverWidth = callToAction?.popoverWidth || 'auto';
|
|
42
|
+
const popoverMarginStart = callToAction?.popoverMarginStart || 'auto';
|
|
43
|
+
const popoverMarginEnd = callToAction?.popoverMarginEnd || 'auto';
|
|
41
44
|
return /*#__PURE__*/_jsxs("div", {
|
|
42
45
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
43
46
|
"aria-label": accessibilityLabel,
|
|
@@ -71,6 +74,11 @@ const BpkInsetBanner = ({
|
|
|
71
74
|
e.preventDefault();
|
|
72
75
|
},
|
|
73
76
|
children: /*#__PURE__*/_jsx(BpkPopover, {
|
|
77
|
+
style: {
|
|
78
|
+
width: popoverWidth,
|
|
79
|
+
marginInlineEnd: popoverMarginEnd,
|
|
80
|
+
marginInlineStart: popoverMarginStart
|
|
81
|
+
},
|
|
74
82
|
id: callToAction?.popoverId || '',
|
|
75
83
|
label: callToAction?.popverLabel || '',
|
|
76
84
|
placement: callToAction?.popoverPlacement || 'bottom',
|
|
@@ -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
|
-
.bpk-inset-banner{display:flex;padding:.5rem 1rem;justify-content:space-between;border-radius:.5rem}.bpk-inset-banner--with-body{border-radius:.5rem .5rem 0 0}.bpk-inset-banner--on-light{color:#161616;fill:#161616}.bpk-inset-banner--on-dark{color:#fff;fill:#fff}.bpk-inset-banner--content-container{display:flex;align-items:center}.bpk-inset-banner--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}@media(max-width: 32rem){.bpk-inset-banner--image{max-height:1.5rem}}.bpk-inset-banner--text-container{display:flex;flex-direction:column}.bpk-inset-banner--cta-text{display:flex;align-items:center}.bpk-inset-banner--cta-button{all:unset}.bpk-inset-banner--cta-button:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-inset-banner--cta-container{display:flex;align-items:center;cursor:pointer}.bpk-inset-banner--cta-content{display:flex;align-items:center}.bpk-inset-banner--cta-info-icon{display:flex;align-items:center;margin-inline-start:.5rem}.bpk-inset-banner-body-container{display:flex;padding:1rem;flex-direction:column;border-radius:0 0 .5rem .5rem;background-color:#eff3f8;color:#161616}.bpk-inset-banner-body-container--link-text{color:#0062e3;text-decoration:none}.bpk-no-touch-support .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}:global(.bpk-no-touch-support) .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}
|
|
18
|
+
.bpk-inset-banner{display:flex;padding:.5rem 1rem;justify-content:space-between;border-radius:.5rem}.bpk-inset-banner--with-body{border-radius:.5rem .5rem 0 0}.bpk-inset-banner--on-light{color:#161616;fill:#161616}.bpk-inset-banner--on-dark{color:#fff;fill:#fff}.bpk-inset-banner--content-container{display:flex;align-items:center}.bpk-inset-banner--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}@media(max-width: 32rem){.bpk-inset-banner--image{max-width:7.5rem;max-height:1.5rem}}.bpk-inset-banner--text-container{display:flex;flex-direction:column}.bpk-inset-banner--cta-text{display:flex;align-items:center}.bpk-inset-banner--cta-button{all:unset}.bpk-inset-banner--cta-button:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-inset-banner--cta-container{display:flex;align-items:center;cursor:pointer}.bpk-inset-banner--cta-content{display:flex;align-items:center}.bpk-inset-banner--cta-info-icon{display:flex;align-items:center;margin-inline-start:.5rem}.bpk-inset-banner-body-container{display:flex;padding:1rem;flex-direction:column;border-radius:0 0 .5rem .5rem;background-color:#eff3f8;color:#161616}.bpk-inset-banner-body-container--link-text{color:#0062e3;text-decoration:none}.bpk-no-touch-support .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}:global(.bpk-no-touch-support) .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}
|
|
@@ -28,6 +28,7 @@ const BpkLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
28
28
|
children,
|
|
29
29
|
className,
|
|
30
30
|
href,
|
|
31
|
+
implicit,
|
|
31
32
|
onClick,
|
|
32
33
|
rel: propRel,
|
|
33
34
|
...rest
|
|
@@ -35,12 +36,15 @@ const BpkLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
35
36
|
const classNames = [getClassName('bpk-link')];
|
|
36
37
|
const target = blank ? '_blank' : null;
|
|
37
38
|
const rel = blank ? propRel || 'noopener noreferrer' : propRel;
|
|
38
|
-
if (alternate) {
|
|
39
|
-
classNames.push(getClassName('bpk-link--alternate'));
|
|
40
|
-
}
|
|
41
39
|
if (className) {
|
|
42
40
|
classNames.push(className);
|
|
43
41
|
}
|
|
42
|
+
if (implicit) {
|
|
43
|
+
classNames.push(getClassName('bpk-link--implicit'));
|
|
44
|
+
}
|
|
45
|
+
if (alternate) {
|
|
46
|
+
classNames.push(getClassName('bpk-link--alternate'));
|
|
47
|
+
}
|
|
44
48
|
return (
|
|
45
49
|
/*#__PURE__*/
|
|
46
50
|
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
|
|
@@ -63,14 +67,16 @@ BpkLink.propTypes = {
|
|
|
63
67
|
onClick: PropTypes.func,
|
|
64
68
|
blank: PropTypes.bool,
|
|
65
69
|
rel: PropTypes.string,
|
|
66
|
-
alternate: PropTypes.bool
|
|
70
|
+
alternate: PropTypes.bool,
|
|
71
|
+
implicit: PropTypes.bool
|
|
67
72
|
};
|
|
68
73
|
BpkLink.defaultProps = {
|
|
69
74
|
className: null,
|
|
70
75
|
onClick: null,
|
|
71
76
|
blank: false,
|
|
72
77
|
rel: null,
|
|
73
|
-
alternate: false
|
|
78
|
+
alternate: false,
|
|
79
|
+
implicit: false
|
|
74
80
|
};
|
|
75
81
|
export default BpkLink;
|
|
76
82
|
export { themeAttributes, linkAlternateThemeAttributes };
|
|
@@ -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
|
-
.bpk-link{padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#
|
|
18
|
+
.bpk-link{position:relative;display:inline-block;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-link:hover:not(:active):not(:disabled)::after{width:0%}:global(.bpk-no-touch-support) .bpk-link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-link:hover:not(:active):not(:disabled)::after{width:0%}.bpk-link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-link:active::after{width:0%}.bpk-link::after{position:absolute;bottom:0;content:"";display:block;width:100%;height:1px;transition:width .2s ease 0s,left .2s ease 0s;background:#161616;background:var(--bpk-link-color, rgb(22, 22, 22))}@media(prefers-reduced-motion){.bpk-link::after{transition:width 0s ease 0s,left 0s ease 0s}}.bpk-link--active{color:#161616}.bpk-link--active:visited{color:#161616}.bpk-link--active:active{color:#161616}.bpk-link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-link--implicit:hover:not(:active):not(:disabled)::after{width:100%}:global(.bpk-no-touch-support) .bpk-link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-link--implicit:hover:not(:active):not(:disabled)::after{width:100%}.bpk-link--implicit::after{width:0;transition:width .2s ease 0s,left .2s ease 0s}.bpk-link--implicit:active{text-decoration:underline;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-link--implicit:active::after{width:100%}.bpk-link--alternate{color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-link--alternate::after{background:#fff;background:var(--bpk-link-alternate-color, rgb(255, 255, 255))}.bpk-link--alternate:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-link--alternate:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}
|
|
@@ -16,8 +16,8 @@ export declare const OVERLAY_TYPES: {
|
|
|
16
16
|
readonly rightMedium: "rightMedium";
|
|
17
17
|
readonly rightHigh: "rightHigh";
|
|
18
18
|
readonly vignette: "vignette";
|
|
19
|
-
readonly
|
|
20
|
-
readonly
|
|
19
|
+
readonly heavyTop: "heavyTop";
|
|
20
|
+
readonly heavyBottom: "heavyBottom";
|
|
21
21
|
readonly off: "off";
|
|
22
22
|
};
|
|
23
23
|
export type OverlayType = (typeof OVERLAY_TYPES)[keyof typeof OVERLAY_TYPES];
|
|
@@ -37,8 +37,8 @@ export const OVERLAY_TYPES = {
|
|
|
37
37
|
rightMedium: 'rightMedium',
|
|
38
38
|
rightHigh: 'rightHigh',
|
|
39
39
|
vignette: 'vignette',
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
heavyTop: 'heavyTop',
|
|
41
|
+
heavyBottom: 'heavyBottom',
|
|
42
42
|
off: 'off'
|
|
43
43
|
};
|
|
44
44
|
const overlayTypeClassSuffixes = {
|
|
@@ -58,8 +58,8 @@ const overlayTypeClassSuffixes = {
|
|
|
58
58
|
[OVERLAY_TYPES.rightMedium]: 'right-medium',
|
|
59
59
|
[OVERLAY_TYPES.rightHigh]: 'right-high',
|
|
60
60
|
[OVERLAY_TYPES.vignette]: 'vignette',
|
|
61
|
-
[OVERLAY_TYPES.
|
|
62
|
-
[OVERLAY_TYPES.
|
|
61
|
+
[OVERLAY_TYPES.heavyTop]: 'heavy-top',
|
|
62
|
+
[OVERLAY_TYPES.heavyBottom]: 'heavy-bottom',
|
|
63
63
|
[OVERLAY_TYPES.off]: 'off'
|
|
64
64
|
};
|
|
65
65
|
const BpkOverlay = props => {
|
|
@@ -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
|
-
.bpk-overlay__wrapper{position:relative;width:100%;height:100%;border-radius:inherit}.bpk-overlay__overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.bpk-overlay__overlay--tint{background:rgba(2,18,44,.56)}.bpk-overlay__overlay--solid-low{background:rgba(22,22,22,.15)}.bpk-overlay__overlay--solid-medium{background:rgba(22,22,22,.3)}.bpk-overlay__overlay--solid-high{background:rgba(22,22,22,.4)}.bpk-overlay__overlay--top-low{background:linear-gradient(180deg, rgba(22, 22, 22, 0.15) 0%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--top-medium{background:linear-gradient(180deg, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--top-high{background:linear-gradient(180deg, rgba(22, 22, 22, 0.4) 0%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--bottom-low{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.15) 100%)}.bpk-overlay__overlay--bottom-medium{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.3) 100%)}.bpk-overlay__overlay--bottom-high{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.4) 100%)}.bpk-overlay__overlay--left-low{background:linear-gradient(90deg, rgba(22, 22, 22, 0.15) 0%, rgba(22, 22, 22, 0) 98.5%)}.bpk-overlay__overlay--left-medium{background:linear-gradient(90deg, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0) 98.5%)}.bpk-overlay__overlay--left-high{background:linear-gradient(90deg, rgba(22, 22, 22, 0.4) 0%, rgba(22, 22, 22, 0) 98.5%)}.bpk-overlay__overlay--right-low{background:linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.15) 98.5%)}.bpk-overlay__overlay--right-medium{background:linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.3) 98.5%)}.bpk-overlay__overlay--right-high{background:linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.4) 98.5%)}.bpk-overlay__overlay--vignette{box-shadow:inset 0 0 50px rgba(22,22,22,.12)}.bpk-overlay__overlay--
|
|
18
|
+
.bpk-overlay__wrapper{position:relative;width:100%;height:100%;border-radius:inherit}.bpk-overlay__overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.bpk-overlay__overlay--tint{background:rgba(2,18,44,.56)}.bpk-overlay__overlay--solid-low{background:rgba(22,22,22,.15)}.bpk-overlay__overlay--solid-medium{background:rgba(22,22,22,.3)}.bpk-overlay__overlay--solid-high{background:rgba(22,22,22,.4)}.bpk-overlay__overlay--top-low{background:linear-gradient(180deg, rgba(22, 22, 22, 0.15) 0%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--top-medium{background:linear-gradient(180deg, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--top-high{background:linear-gradient(180deg, rgba(22, 22, 22, 0.4) 0%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--bottom-low{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.15) 100%)}.bpk-overlay__overlay--bottom-medium{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.3) 100%)}.bpk-overlay__overlay--bottom-high{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.4) 100%)}.bpk-overlay__overlay--left-low{background:linear-gradient(90deg, rgba(22, 22, 22, 0.15) 0%, rgba(22, 22, 22, 0) 98.5%)}.bpk-overlay__overlay--left-medium{background:linear-gradient(90deg, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0) 98.5%)}.bpk-overlay__overlay--left-high{background:linear-gradient(90deg, rgba(22, 22, 22, 0.4) 0%, rgba(22, 22, 22, 0) 98.5%)}.bpk-overlay__overlay--right-low{background:linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.15) 98.5%)}.bpk-overlay__overlay--right-medium{background:linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.3) 98.5%)}.bpk-overlay__overlay--right-high{background:linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.4) 98.5%)}.bpk-overlay__overlay--vignette{box-shadow:inset 0 0 50px rgba(22,22,22,.12)}.bpk-overlay__overlay--heavy-top{background:linear-gradient(180deg, rgba(22, 22, 22, 0.45) 0%, rgba(22, 22, 22, 0.15) 60%, rgba(22, 22, 22, 0.05) 80%, rgba(22, 22, 22, 0) 100%)}.bpk-overlay__overlay--heavy-bottom{background:linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.9) 100%)}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import BpkPageIndicator, { VARIANT } from './src/BpkPageIndicator';
|
|
2
|
+
import { DIRECTIONS } from './src/NavButton';
|
|
3
|
+
import type { Props as BpkPageIndicatorProps } from './src/BpkPageIndicator';
|
|
4
|
+
export type { BpkPageIndicatorProps };
|
|
5
|
+
export { DIRECTIONS, VARIANT };
|
|
6
|
+
export default BpkPageIndicator;
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import BpkPageIndicator, { VARIANT } from "./src/BpkPageIndicator";
|
|
18
20
|
import { DIRECTIONS } from "./src/NavButton";
|
|
19
21
|
export { DIRECTIONS, VARIANT };
|
|
20
22
|
export default BpkPageIndicator;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { MouseEvent } from 'react';
|
|
2
|
+
import { DIRECTIONS } from './NavButton';
|
|
3
|
+
export declare const VARIANT: {
|
|
4
|
+
readonly default: "default";
|
|
5
|
+
readonly overImage: "overImage";
|
|
6
|
+
};
|
|
7
|
+
type Variant = (typeof VARIANT)[keyof typeof VARIANT];
|
|
8
|
+
type Direction = (typeof DIRECTIONS)[keyof typeof DIRECTIONS];
|
|
9
|
+
export type Props = {
|
|
10
|
+
indicatorLabel?: string;
|
|
11
|
+
prevNavLabel?: string;
|
|
12
|
+
nextNavLabel?: string;
|
|
13
|
+
currentIndex: number;
|
|
14
|
+
totalIndicators: number;
|
|
15
|
+
variant?: Variant;
|
|
16
|
+
onClick?: (event: MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
|
|
17
|
+
className?: string;
|
|
18
|
+
showNav?: boolean;
|
|
19
|
+
};
|
|
20
|
+
declare const BpkPageIndicator: ({ className, currentIndex, indicatorLabel, nextNavLabel, onClick, prevNavLabel, showNav, totalIndicators, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export default BpkPageIndicator;
|