@skyscanner/backpack-web 42.21.0 → 42.22.0-dev-v26625998804.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/bpk-component-badge/src/BpkBadge.module.css +1 -1
- package/bpk-component-banner-alert/src/BpkBannerAlert.module.css +1 -1
- package/bpk-component-barchart/src/BpkBarchartBar.module.css +1 -1
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +1 -1
- package/bpk-component-button/src/BpkButton.module.css +1 -1
- package/bpk-component-calendar/src/BpkCalendarDate.module.css +1 -1
- package/bpk-component-calendar/src/BpkCalendarNav.module.css +1 -1
- package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.module.css +1 -1
- package/bpk-component-chatbot-input/src/BpkChatbotInput.module.css +1 -1
- package/bpk-component-checkbox/src/BpkCheckbox.module.css +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
- package/bpk-component-chip/src/BpkSelectableChip.module.css +1 -1
- package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css +1 -1
- package/bpk-component-form-validation/src/BpkFormValidation.module.css +1 -1
- package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css +1 -1
- package/bpk-component-input/src/BpkInput.module.css +1 -1
- package/bpk-component-label/src/BpkLabel.module.css +1 -1
- package/bpk-component-layout/index.d.ts +2 -2
- package/bpk-component-layout/index.js +1 -1
- package/bpk-component-layout/src/BpkStack.js +45 -3
- package/bpk-component-layout/src/commonProps.d.ts +17 -10
- package/bpk-component-layout/src/tokenUtils.js +11 -3
- package/bpk-component-layout/src/tokens.d.ts +15 -0
- package/bpk-component-layout/src/tokens.js +18 -0
- package/bpk-component-layout/src/types.d.ts +27 -37
- package/bpk-component-link/src/BpkLink.module.css +1 -1
- package/bpk-component-map/src/BpkIconMarker.module.css +1 -1
- package/bpk-component-map/src/BpkIconMarkerBackground.module.css +1 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css +1 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css +1 -1
- package/bpk-component-pagination/src/BpkPaginationPage.module.css +1 -1
- package/bpk-component-progress/src/BpkProgress.module.css +1 -1
- package/bpk-component-radio/src/BpkRadio.module.css +1 -1
- package/bpk-component-select/src/BpkSelect.module.css +1 -1
- package/bpk-component-skip-link/src/BpkSkipLink.module.css +1 -1
- package/bpk-component-spinner/src/BpkSpinner.module.css +1 -1
- package/bpk-component-star-rating/src/BpkStar.module.css +1 -1
- package/bpk-component-switch/src/BpkSwitch.module.css +1 -1
- package/bpk-component-textarea/src/BpkTextarea.module.css +1 -1
- package/bpk-mixins/_utils.scss +0 -1
- package/bpk-stylesheets/base.css +2 -2
- package/bpk-stylesheets/index.js +3 -0
- package/bpk-stylesheets/primitives.css +40 -0
- package/bpk-stylesheets/theme-backpack-dark.css +189 -0
- package/bpk-stylesheets/theme-backpack-light.css +189 -0
- package/package.json +1 -1
|
@@ -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-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius
|
|
18
|
+
.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:var(--bpk-badge-border-radius, 0.25rem);margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400;font-size:var(--bpk-badge-font-size, 0.875rem);font-weight:var(--bpk-badge-font-weight, 400);line-height:var(--bpk-badge-line-height, 1.25rem)}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir=rtl] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir=rtl] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:var(--bpk-badge-warning-background-color, rgb(239, 243, 248));color:var(--bpk-badge-warning-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-warning-icon-color, rgb(245, 93, 66))}.bpk-badge--success{background-color:var(--bpk-badge-success-background-color, rgb(239, 243, 248));color:var(--bpk-badge-success-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-success-icon-color, rgb(12, 131, 138))}.bpk-badge--critical{background-color:var(--bpk-badge-critical-background-color, rgb(239, 243, 248));color:var(--bpk-badge-critical-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-critical-icon-color, rgb(231, 8, 102))}.bpk-badge--normal{background-color:var(--bpk-badge-normal-background-color, rgb(239, 243, 248));color:var(--bpk-badge-normal-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-normal-icon-color, rgb(22, 22, 22))}.bpk-badge--inverse{background-color:var(--bpk-badge-inverse-background-color, rgb(255, 255, 255));color:var(--bpk-badge-inverse-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-inverse-icon-color, rgb(22, 22, 22))}.bpk-badge--outline{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--bpk-badge-outline-text-color, rgb(255, 255, 255));background-color:var(--bpk-badge-outline-background-color, transparent);color:var(--bpk-badge-outline-text-color, rgb(255, 255, 255));fill:var(--bpk-badge-outline-icon-color, rgb(255, 255, 255))}.bpk-badge--strong{background-color:var(--bpk-badge-strong-background-color, rgb(5, 32, 60));color:var(--bpk-badge-strong-text-color, rgb(255, 255, 255));fill:var(--bpk-badge-strong-icon-color, rgb(255, 255, 255))}.bpk-badge--brand{background-color:var(--bpk-badge-brand-background-color, rgb(0, 98, 227));color:var(--bpk-badge-brand-text-color, rgb(255, 255, 255));fill:var(--bpk-badge-brand-icon-color, rgb(255, 255, 255))}
|
|
@@ -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-banner-alert{background-color:#fff;overflow:hidden;border-radius:.5rem}.bpk-banner-alert--primary{box-shadow:0 0 0 1px var(--bpk-banner-alert-primary-color, rgb(0, 98, 227))}.bpk-banner-alert--success{box-shadow:0 0 0 1px var(--bpk-banner-alert-success-color, rgb(12, 131, 138))}.bpk-banner-alert--warn{box-shadow:0 0 0 1px var(--bpk-banner-alert-warn-color, rgb(245, 93, 66))}.bpk-banner-alert--error{box-shadow:0 0 0 1px var(--bpk-banner-alert-error-color, rgb(231, 8, 102))}.bpk-banner-alert--neutral{box-shadow:0 0 0 1px #c1c7cf}.bpk-banner-alert__header{display:flex;padding:.5rem;flex-direction:row;align-items:center}.bpk-banner-alert__header--expandable{cursor:pointer}.bpk-no-touch-support .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-banner-alert__header--expandable:active{background-color:#eff3f8}.bpk-banner-alert__icon,.bpk-banner-alert__message,.bpk-banner-alert__toggle{display:inline-block}.bpk-banner-alert__message{padding:0 .5rem;flex-grow:1}.bpk-banner-alert__primary-icon{fill
|
|
18
|
+
.bpk-banner-alert{background-color:#fff;overflow:hidden;border-radius:.5rem}.bpk-banner-alert--primary{box-shadow:0 0 0 1px var(--bpk-banner-alert-primary-color, rgb(0, 98, 227))}.bpk-banner-alert--success{box-shadow:0 0 0 1px var(--bpk-banner-alert-success-color, rgb(12, 131, 138))}.bpk-banner-alert--warn{box-shadow:0 0 0 1px var(--bpk-banner-alert-warn-color, rgb(245, 93, 66))}.bpk-banner-alert--error{box-shadow:0 0 0 1px var(--bpk-banner-alert-error-color, rgb(231, 8, 102))}.bpk-banner-alert--neutral{box-shadow:0 0 0 1px #c1c7cf}.bpk-banner-alert__header{display:flex;padding:.5rem;flex-direction:row;align-items:center}.bpk-banner-alert__header--expandable{cursor:pointer}.bpk-no-touch-support .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-banner-alert__header--expandable:active{background-color:#eff3f8}.bpk-banner-alert__icon,.bpk-banner-alert__message,.bpk-banner-alert__toggle{display:inline-block}.bpk-banner-alert__message{padding:0 .5rem;flex-grow:1}.bpk-banner-alert__primary-icon{fill:var(--bpk-banner-alert-primary-color, rgb(0, 98, 227))}.bpk-banner-alert__success-icon{fill:var(--bpk-banner-alert-success-color, rgb(12, 131, 138))}.bpk-banner-alert__warn-icon{fill:var(--bpk-banner-alert-warn-color, rgb(245, 93, 66))}.bpk-banner-alert__error-icon{fill:var(--bpk-banner-alert-error-color, rgb(231, 8, 102))}.bpk-banner-alert__neutral-icon{fill:#626971}.bpk-banner-alert__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none}.bpk-banner-alert__expand-icon{fill:#626971}.bpk-banner-alert__expand-icon--flipped{transform:scaleY(-1)}.bpk-banner-alert__children-container{padding:0 2.5rem .5rem 2rem;color:#626971;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}
|
|
@@ -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-barchart-bar{fill
|
|
18
|
+
.bpk-barchart-bar{fill:var(--bpk-barchart-bar-background-color, rgb(193, 199, 207))}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected){cursor:pointer}.bpk-no-touch-support .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:var(--bpk-barchart-bar-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):hover:not(:active):not(:disabled){fill:var(--bpk-barchart-bar-hover-background-color, rgb(5, 32, 60))}.bpk-barchart-bar--interactive:not(.bpk-barchart-bar--selected):active{fill:var(--bpk-barchart-bar-active-background-color, rgb(0, 98, 227))}.bpk-barchart-bar--selected{fill:var(--bpk-barchart-bar-selected-background-color, rgb(0, 98, 227))}.bpk-barchart-bar__rect{fill:inherit;shape-rendering:auto}.bpk-barchart-bar__rect--outlier{mask:url(#bpk-barchart__def-mask)}.bpk-barchart-bar__tappable-area{fill:rgba(0,0,0,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
|
-
.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:0;flex:1;overflow-y:auto}.bpk-bottom-sheet--padding-base-top{padding-top:1rem}.bpk-bottom-sheet--padding-base-bottom{padding-bottom:1rem}.bpk-bottom-sheet--padding-base-start{padding-inline-start:1rem}.bpk-bottom-sheet--padding-base-end{padding-inline-end:1rem}.bpk-bottom-sheet--padding-lg-top{padding-top:1.5rem}.bpk-bottom-sheet--padding-lg-bottom{padding-bottom:1.5rem}.bpk-bottom-sheet--padding-lg-start{padding-inline-start:1.5rem}.bpk-bottom-sheet--padding-lg-end{padding-inline-end:1.5rem}.bpk-bottom-sheet--padding-xxl-top{padding-top:2.5rem}.bpk-bottom-sheet--padding-xxl-bottom{padding-bottom:2.5rem}.bpk-bottom-sheet--padding-xxl-start{padding-inline-start:2.5rem}.bpk-bottom-sheet--padding-xxl-end{padding-inline-end:2.5rem}.bpk-bottom-sheet--padding-xxxl-top{padding-top:4rem}.bpk-bottom-sheet--padding-xxxl-bottom{padding-bottom:4rem}.bpk-bottom-sheet--padding-xxxl-start{padding-inline-start:4rem}.bpk-bottom-sheet--padding-xxxl-end{padding-inline-end:4rem}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header-wrapper{position:sticky;top:0;z-index:899;background-color
|
|
18
|
+
.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:0;flex:1;overflow-y:auto}.bpk-bottom-sheet--padding-base-top{padding-top:1rem}.bpk-bottom-sheet--padding-base-bottom{padding-bottom:1rem}.bpk-bottom-sheet--padding-base-start{padding-inline-start:1rem}.bpk-bottom-sheet--padding-base-end{padding-inline-end:1rem}.bpk-bottom-sheet--padding-lg-top{padding-top:1.5rem}.bpk-bottom-sheet--padding-lg-bottom{padding-bottom:1.5rem}.bpk-bottom-sheet--padding-lg-start{padding-inline-start:1.5rem}.bpk-bottom-sheet--padding-lg-end{padding-inline-end:1.5rem}.bpk-bottom-sheet--padding-xxl-top{padding-top:2.5rem}.bpk-bottom-sheet--padding-xxl-bottom{padding-bottom:2.5rem}.bpk-bottom-sheet--padding-xxl-start{padding-inline-start:2.5rem}.bpk-bottom-sheet--padding-xxl-end{padding-inline-end:2.5rem}.bpk-bottom-sheet--padding-xxxl-top{padding-top:4rem}.bpk-bottom-sheet--padding-xxxl-bottom{padding-bottom:4rem}.bpk-bottom-sheet--padding-xxxl-start{padding-inline-start:4rem}.bpk-bottom-sheet--padding-xxxl-end{padding-inline-end:4rem}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header-wrapper{position:sticky;top:0;z-index:899;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-bottom-sheet--header{min-height:fit-content;padding:1.5rem}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}@keyframes slide-down{0%{transform:translateY(0%)}100%{transform:translateY(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
|
-
.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);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){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.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.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}@media(hover: hover){.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined{background-size:0 1px}.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit--alternate{background-size:100% 1px}}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.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){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.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--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.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){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.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--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;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-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.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){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.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,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--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-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--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-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.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));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.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){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.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,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.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,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit: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--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.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){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.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-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.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){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.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--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.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){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button--has-icon{display:inline-flex;align-items:center;gap:.5rem}.bpk-button--full-width.bpk-button--has-icon{display:flex;justify-content:center}.bpk-button__leading-icon,.bpk-button__trailing-icon{display:inline-flex;flex-shrink:0;text-decoration:none}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}
|
|
18
|
+
.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button:active{color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));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.bpk-button--loading:disabled{background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}@media(hover: hover){.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined{background-size:0 1px}.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit--alternate{background-size:100% 1px}}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.bpk-button--destructive{color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--destructive:active{color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));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-button--destructive.bpk-button--loading:disabled{background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--destructive:active{color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));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--destructive.bpk-button--loading:disabled{background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured{color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured:active{color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));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--featured.bpk-button--loading:disabled{background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.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,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){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){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.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,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){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:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));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){background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-dark:active{color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));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-dark.bpk-button--loading:disabled{background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-light{color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));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){background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--primary-on-light:active{color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));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--primary-on-light.bpk-button--loading:disabled{background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary{color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary:active{color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));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.bpk-button--loading:disabled{background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary-on-dark{color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));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){background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button--has-icon{display:inline-flex;align-items:center;gap:.5rem}.bpk-button--full-width.bpk-button--has-icon{display:flex;justify-content:center}.bpk-button__leading-icon,.bpk-button__trailing-icon{display:inline-flex;flex-shrink:0;text-decoration:none}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}
|
|
@@ -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-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.5rem;background-color:rgba(0,0,0,0);text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;font-size:1rem;line-height:1.5rem;font-weight:700;color
|
|
18
|
+
.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.5rem;background-color:rgba(0,0,0,0);text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;font-size:1rem;line-height:1.5rem;font-weight:700;color:var(--bpk-calendar-date-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#eff3f8;color:var(--bpk-calendar-date-text-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#eff3f8;color:var(--bpk-calendar-date-text-hover-color, rgb(22, 22, 22))}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#eff3f8;color:var(--bpk-calendar-date-text-active-color, rgb(22, 22, 22))}.bpk-calendar-date--outside{background-color:rgba(0,0,0,0);color:rgba(0,0,0,.2)}.bpk-calendar-date--selected{cursor:default;color:var(--bpk-calendar-date-text-selected-color, rgb(255, 255, 255))}.bpk-calendar-date--middle{background-color:#e3f0ff;color:#161616}.bpk-calendar-date--single{background-color:#0062e3}.bpk-calendar-date--start{background-color:#0062e3}.bpk-calendar-date--end{background-color:#0062e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected){box-shadow:0 0 0 2px #0062e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, rgb(0, 98, 227)) inset;color:var(--bpk-calendar-date-text-focus-color, rgb(0, 98, 227))}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:rgba(0,0,0,.2)}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:rgba(0,0,0,.2)}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:rgba(0,0,0,.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-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;padding:0 .5rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:.375rem 0;border:none;background:none;cursor:pointer;appearance:none;color
|
|
18
|
+
.bpk-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;padding:0 .5rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:.375rem 0;border:none;background:none;cursor:pointer;appearance:none;color:var(--bpk-calendar-nudger-icon-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:var(--bpk-calendar-nudger-icon-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:var(--bpk-calendar-nudger-icon-hover-color, rgb(22, 22, 22))}.bpk-calendar-nav__button:active{color:var(--bpk-calendar-nudger-icon-active-color, rgb(22, 22, 22))}html[dir=rtl] .bpk-calendar-nav__button .bpk-calendar-nav__icon{transform:scaleX(-1)}.bpk-calendar-nav__button:disabled{cursor:not-allowed}.bpk-calendar-nav__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 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
|
-
.bpk-card-list-grid-stack{display:grid;gap:1.5rem}.bpk-card-list-grid-stack__grid{display:grid;grid-template-columns:repeat(var(--initially-shown-cards, 3),
|
|
18
|
+
.bpk-card-list-grid-stack{display:grid;gap:1.5rem}.bpk-card-list-grid-stack__grid{display:grid;grid-template-columns:repeat(var(--initially-shown-cards, 3), minmax(0, 1fr));gap:1.5rem}.bpk-card-list-grid-stack__stack{display:grid;grid-template-columns:1;gap:1.5rem}.bpk-card-list-grid-stack__accessory__button{width:auto}
|
|
@@ -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-chatbot-input--cars{transition:border-color 200ms ease,box-shadow 200ms ease;border:.09375rem solid #c1c7cf;background:#fff;box-shadow:none;box-sizing:border-box;touch-action:manipulation;border-radius
|
|
18
|
+
.bpk-chatbot-input--cars{transition:border-color 200ms ease,box-shadow 200ms ease;border:.09375rem solid #c1c7cf;background:#fff;box-shadow:none;box-sizing:border-box;touch-action:manipulation;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-no-touch-support .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:active{border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:focus-within{box-shadow:0 0 0 .03125rem #0062e3;box-shadow:0 0 0 .03125rem var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227));border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--composer{position:relative;transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);border:none;background:#fff;box-sizing:border-box;will-change:transform,box-shadow;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-chatbot-input--composer--with-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chatbot-input--composer--with-shadow:focus-within{box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-chatbot-input--composer--overLimit{transform:translateY(-0.25rem)}
|
|
@@ -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
|
|
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:var(--bpk-checkbox-checked-color, rgb(0, 98, 227));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}
|
|
@@ -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-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;border-radius
|
|
18
|
+
.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));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-v2__control[data-state=checked]: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-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{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-v2:has(.bpk-checkbox-v2__hidden-input:focus-visible) .bpk-checkbox-v2__control{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.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-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;cursor:pointer;border-radius
|
|
18
|
+
.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;cursor:pointer;border-radius:var(--bpk-chip-border-radius, 0.5rem)}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:var(--bpk-chip-on-dark-background-color, transparent);color:var(--bpk-chip-on-dark-text-color, rgb(255, 255, 255));box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-border-color, rgba(255, 255, 255, 0.5)) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-active-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark-selected{color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){background-color:var(--bpk-chip-on-dark-selected-active-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:var(--bpk-chip-default-background-color, transparent);color:var(--bpk-chip-default-text-color, rgb(22, 22, 22));box-shadow:0 0 0 1px #c1c7cf inset;box-shadow:0 0 0 1px var(--bpk-chip-default-border-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-active-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default-selected{color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){background-color:var(--bpk-chip-default-selected-active-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:var(--bpk-chip-on-image-background-color, rgb(255, 255, 255));color:var(--bpk-chip-on-image-text-color, rgb(22, 22, 22));box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}.bpk-chip--on-image:active:not(:disabled){background-color:var(--bpk-chip-on-image-active-background-color, rgb(239, 243, 248))}.bpk-chip--on-image-selected{color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right: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
|
-
.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;box-shadow:none;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-cell{padding:0}.bpk-comparison-table__remove-cell-inner{padding:0 1rem calc(1rem*var(--bpk-image-opacity, 1));opacity:var(--bpk-image-opacity, 1);overflow:clip;max-block-size:calc(3.5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}
|
|
18
|
+
.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overflow-anchor:none;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;box-shadow:none;block-size:.0625rem;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container thead{block-size:100%}.bpk-comparison-table__scroll-container thead tr{block-size:100%}.bpk-comparison-table__scroll-container thead th{block-size:100%}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column;block-size:100%}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{display:flex;flex-direction:column;flex:1;margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1));min-block-size:0}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-cell{padding:0}.bpk-comparison-table__remove-cell-inner{padding:0 1rem calc(1rem*var(--bpk-image-opacity, 1));opacity:var(--bpk-image-opacity, 1);overflow:clip;max-block-size:calc(3.5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}
|
|
@@ -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-form-validation{position:relative;transform:translateY(-1rem);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:0;color
|
|
18
|
+
.bpk-form-validation{position:relative;transform:translateY(-1rem);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:0;color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}.bpk-form-validation__container{margin-top:.5rem;font-size:.75rem}.bpk-form-validation__icon{fill:var(--bpk-form-validation-icon-fill, rgb(231, 8, 102));margin-left:0;margin-right:.25rem}html[dir=rtl] .bpk-form-validation__icon{margin-left:.25rem;margin-right:0}.bpk-form-validation--appear{transform:translateY(0);opacity:1}.bpk-form-validation--is-checkbox{display:inline-block}
|
|
@@ -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-horizontal-nav__item{display:inline-block;display:flex}.bpk-horizontal-nav__item--space-around{margin-right:auto;margin-left:auto}.bpk-horizontal-nav__link{display:inline-block;display:flex;padding:.875rem 1.5rem;border:0;border-radius:0;background:none;text-decoration:none;cursor:pointer;fill:currentcolor}.bpk-horizontal-nav__link:focus-visible{outline-offset:-0.125rem}.bpk-horizontal-nav__link--default{color
|
|
18
|
+
.bpk-horizontal-nav__item{display:inline-block;display:flex}.bpk-horizontal-nav__item--space-around{margin-right:auto;margin-left:auto}.bpk-horizontal-nav__link{display:inline-block;display:flex;padding:.875rem 1.5rem;border:0;border-radius:0;background:none;text-decoration:none;cursor:pointer;fill:currentcolor}.bpk-horizontal-nav__link:focus-visible{outline-offset:-0.125rem}.bpk-horizontal-nav__link--default{color:var(--bpk-horizontal-nav-link-color, rgb(98, 105, 113))}.bpk-no-touch-support .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e4e9 inset;color:var(--bpk-horizontal-nav-link-hover-color, rgb(98, 105, 113))}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e4e9 inset;color:var(--bpk-horizontal-nav-link-hover-color, rgb(98, 105, 113))}.bpk-horizontal-nav__link--default:active{box-shadow:0 -3px 0 0 #c1c7cf inset;color:var(--bpk-horizontal-nav-link-active-color, rgb(98, 105, 113))}.bpk-horizontal-nav__link--default-disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-horizontal-nav__link--default-disabled:active{color:rgba(0,0,0,.2);box-shadow:unset}.bpk-horizontal-nav__link--default-selected{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset;color:var(--bpk-horizontal-nav-link-selected-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}.bpk-horizontal-nav__link--default-selected:active{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}.bpk-horizontal-nav__link--light{color:#fff}.bpk-no-touch-support .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light:active{box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-horizontal-nav__link--light-disabled:active{color:rgba(0,0,0,.2);box-shadow:unset}.bpk-horizontal-nav__link--light-selected{color:#fff;box-shadow:0 -3px 0 0 #fff inset}.bpk-no-touch-support .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-selected:active{box-shadow:0 -3px 0 0 #fff inset}
|
|
@@ -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-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.5rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:#626971}.bpk-input:disabled{border-color:#eff3f8;background:#fff;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-input[type=number]{-moz-appearance:textfield}.bpk-input[type=number]::-webkit-inner-spin-button,.bpk-input[type=number]::-webkit-outer-spin-button{appearance:none}html[dir=rtl] .bpk-input[type=number],html[dir=rtl] .bpk-input[type=tel],html[dir=rtl] .bpk-input[type=email]{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input[data-openable]{cursor:pointer}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:.5rem;height:2.25rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}html[dir=rtl] .bpk-input__clear-button{right:inherit;left:.5rem}.bpk-no-touch-support .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-input__clear-button:active{color:#161616}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir=rtl] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1rem 1rem}html[dir=rtl] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right .5rem center;background-size:1rem 1rem;border-color
|
|
18
|
+
.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.5rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:#626971}.bpk-input:disabled{border-color:#eff3f8;background:#fff;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-input[type=number]{-moz-appearance:textfield}.bpk-input[type=number]::-webkit-inner-spin-button,.bpk-input[type=number]::-webkit-outer-spin-button{appearance:none}html[dir=rtl] .bpk-input[type=number],html[dir=rtl] .bpk-input[type=tel],html[dir=rtl] .bpk-input[type=email]{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input[data-openable]{cursor:pointer}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:.5rem;height:2.25rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}html[dir=rtl] .bpk-input__clear-button{right:inherit;left:.5rem}.bpk-no-touch-support .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-input__clear-button:active{color:#161616}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir=rtl] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1rem 1rem}html[dir=rtl] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right .5rem center;background-size:1rem 1rem;border-color:var(--bpk-input-invalid-border-color, rgb(231, 8, 102))}html[dir=rtl] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--clearable{padding-right:2rem}html[dir=rtl] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem;border-radius:.75rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir=rtl] .bpk-input--large.bpk-input--valid,html[dir=rtl] .bpk-input--large.bpk-input--invalid,html[dir=rtl] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.5rem 0 0 .5rem}html[dir=rtl] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .5rem .5rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .5rem .5rem 0}html[dir=rtl] .bpk-input--docked:last-child{border-radius:.5rem 0 0 .5rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir=rtl] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.5rem 0 0 .5rem}html[dir=rtl] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .5rem .5rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir=rtl] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .5rem .5rem 0}html[dir=rtl] .bpk-input--docked-last{border-radius:.5rem 0 0 .5rem}.bpk-input--docked-last:focus{position:relative}
|
|
@@ -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-label{display:block;color:#161616;font-size:.75rem;font-weight:700;line-height:1rem}.bpk-label--white{color:#fff}.bpk-label--invalid{color
|
|
18
|
+
.bpk-label{display:block;color:#161616;font-size:.75rem;font-weight:700;line-height:1rem}.bpk-label--white{color:#fff}.bpk-label--invalid{color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}.bpk-label--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-label--disabled--white{color:hsla(0,0%,100%,.5)}.bpk-label__asterisk{color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}
|
|
@@ -14,7 +14,7 @@ export { BpkStack, BpkHStack, BpkVStack } from './src/BpkStack';
|
|
|
14
14
|
export type { BpkStackProps } from './src/BpkStack';
|
|
15
15
|
export type { BpkCommonLayoutProps, BpkBoxSpecificProps, BpkFlexSpecificProps, BpkGridSpecificProps, BpkGridItemSpecificProps, } from './src/types';
|
|
16
16
|
export type { BpkStackSpecificProps } from './src/types';
|
|
17
|
-
export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkBreakpointValue, } from './src/tokens';
|
|
18
|
-
export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage, } from './src/tokens';
|
|
17
|
+
export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkMarginValue, BpkBreakpointValue, } from './src/tokens';
|
|
18
|
+
export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isValidMarginValue, isPercentage, } from './src/tokens';
|
|
19
19
|
export { BACKGROUND_COLORS } from './src/backgroundColors';
|
|
20
20
|
export type { BpkLayoutBackgroundColor } from './src/backgroundColors';
|
|
@@ -26,7 +26,7 @@ export { BpkStack, BpkHStack, BpkVStack } from "./src/BpkStack";
|
|
|
26
26
|
|
|
27
27
|
// Export token types and utilities
|
|
28
28
|
|
|
29
|
-
export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";
|
|
29
|
+
export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isValidMarginValue, isPercentage } from "./src/tokens";
|
|
30
30
|
|
|
31
31
|
// Export color constants and types
|
|
32
32
|
export { BACKGROUND_COLORS } from "./src/backgroundColors";
|
|
@@ -24,12 +24,26 @@ import STYLES from "./BpkLayout.module.css";
|
|
|
24
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
25
|
const getClassName = cssModules(STYLES);
|
|
26
26
|
export const BpkStack = /*#__PURE__*/forwardRef(({
|
|
27
|
+
align,
|
|
28
|
+
alignItems,
|
|
27
29
|
backgroundColor,
|
|
28
30
|
children,
|
|
29
31
|
color,
|
|
32
|
+
justify,
|
|
33
|
+
justifyContent,
|
|
30
34
|
...props
|
|
31
35
|
}, ref) => {
|
|
32
|
-
const
|
|
36
|
+
const resolvedAlign = align ?? alignItems;
|
|
37
|
+
const resolvedJustify = justify ?? justifyContent;
|
|
38
|
+
const processedProps = processBpkComponentProps({
|
|
39
|
+
...props,
|
|
40
|
+
...(resolvedAlign !== undefined && {
|
|
41
|
+
align: resolvedAlign
|
|
42
|
+
}),
|
|
43
|
+
...(resolvedJustify !== undefined && {
|
|
44
|
+
justify: resolvedJustify
|
|
45
|
+
})
|
|
46
|
+
}, {
|
|
33
47
|
component: 'BpkStack'
|
|
34
48
|
});
|
|
35
49
|
const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
|
|
@@ -47,12 +61,26 @@ export const BpkStack = /*#__PURE__*/forwardRef(({
|
|
|
47
61
|
});
|
|
48
62
|
BpkStack.displayName = 'BpkStack';
|
|
49
63
|
export const BpkHStack = /*#__PURE__*/forwardRef(({
|
|
64
|
+
align,
|
|
65
|
+
alignItems,
|
|
50
66
|
backgroundColor,
|
|
51
67
|
children,
|
|
52
68
|
color,
|
|
69
|
+
justify,
|
|
70
|
+
justifyContent,
|
|
53
71
|
...props
|
|
54
72
|
}, ref) => {
|
|
55
|
-
const
|
|
73
|
+
const resolvedAlign = align ?? alignItems;
|
|
74
|
+
const resolvedJustify = justify ?? justifyContent;
|
|
75
|
+
const processedProps = processBpkComponentProps({
|
|
76
|
+
...props,
|
|
77
|
+
...(resolvedAlign !== undefined && {
|
|
78
|
+
align: resolvedAlign
|
|
79
|
+
}),
|
|
80
|
+
...(resolvedJustify !== undefined && {
|
|
81
|
+
justify: resolvedJustify
|
|
82
|
+
})
|
|
83
|
+
}, {
|
|
56
84
|
component: 'BpkStack'
|
|
57
85
|
});
|
|
58
86
|
const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
|
|
@@ -70,12 +98,26 @@ export const BpkHStack = /*#__PURE__*/forwardRef(({
|
|
|
70
98
|
});
|
|
71
99
|
BpkHStack.displayName = 'BpkHStack';
|
|
72
100
|
export const BpkVStack = /*#__PURE__*/forwardRef(({
|
|
101
|
+
align,
|
|
102
|
+
alignItems,
|
|
73
103
|
backgroundColor,
|
|
74
104
|
children,
|
|
75
105
|
color,
|
|
106
|
+
justify,
|
|
107
|
+
justifyContent,
|
|
76
108
|
...props
|
|
77
109
|
}, ref) => {
|
|
78
|
-
const
|
|
110
|
+
const resolvedAlign = align ?? alignItems;
|
|
111
|
+
const resolvedJustify = justify ?? justifyContent;
|
|
112
|
+
const processedProps = processBpkComponentProps({
|
|
113
|
+
...props,
|
|
114
|
+
...(resolvedAlign !== undefined && {
|
|
115
|
+
align: resolvedAlign
|
|
116
|
+
}),
|
|
117
|
+
...(resolvedJustify !== undefined && {
|
|
118
|
+
justify: resolvedJustify
|
|
119
|
+
})
|
|
120
|
+
}, {
|
|
79
121
|
component: 'BpkStack'
|
|
80
122
|
});
|
|
81
123
|
const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { AriaAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
1
|
+
import type { AriaAttributes, AriaRole, ElementType, KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
2
2
|
import type { BpkLayoutBackgroundColor } from './backgroundColors';
|
|
3
|
-
import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkPositionKeyword, BpkOverflowValue, BpkZIndexValue, BpkResponsiveValue } from './tokens';
|
|
3
|
+
import type { BpkSpacingValue, BpkMarginValue, BpkSizeValue, BpkPositionValue, BpkPositionKeyword, BpkOverflowValue, BpkZIndexValue, BpkResponsiveValue } from './tokens';
|
|
4
4
|
import type { TextColor, TextStyle } from '../../bpk-component-text';
|
|
5
5
|
/**
|
|
6
6
|
* Common spacing-related props shared by all Backpack layout components
|
|
@@ -12,17 +12,21 @@ export interface BpkSpacingProps {
|
|
|
12
12
|
paddingRight?: BpkResponsiveValue<BpkSpacingValue>;
|
|
13
13
|
paddingBottom?: BpkResponsiveValue<BpkSpacingValue>;
|
|
14
14
|
paddingLeft?: BpkResponsiveValue<BpkSpacingValue>;
|
|
15
|
-
margin?: BpkResponsiveValue<
|
|
16
|
-
marginTop?: BpkResponsiveValue<
|
|
17
|
-
marginRight?: BpkResponsiveValue<
|
|
18
|
-
marginBottom?: BpkResponsiveValue<
|
|
19
|
-
marginLeft?: BpkResponsiveValue<
|
|
20
|
-
marginStart?: BpkResponsiveValue<
|
|
21
|
-
marginEnd?: BpkResponsiveValue<
|
|
15
|
+
margin?: BpkResponsiveValue<BpkMarginValue>;
|
|
16
|
+
marginTop?: BpkResponsiveValue<BpkMarginValue>;
|
|
17
|
+
marginRight?: BpkResponsiveValue<BpkMarginValue>;
|
|
18
|
+
marginBottom?: BpkResponsiveValue<BpkMarginValue>;
|
|
19
|
+
marginLeft?: BpkResponsiveValue<BpkMarginValue>;
|
|
20
|
+
marginStart?: BpkResponsiveValue<BpkMarginValue>;
|
|
21
|
+
marginEnd?: BpkResponsiveValue<BpkMarginValue>;
|
|
22
22
|
paddingStart?: BpkResponsiveValue<BpkSpacingValue>;
|
|
23
23
|
paddingEnd?: BpkResponsiveValue<BpkSpacingValue>;
|
|
24
|
-
marginInline?: BpkResponsiveValue<
|
|
24
|
+
marginInline?: BpkResponsiveValue<BpkMarginValue>;
|
|
25
25
|
paddingInline?: BpkResponsiveValue<BpkSpacingValue>;
|
|
26
|
+
marginBlockStart?: BpkResponsiveValue<BpkMarginValue>;
|
|
27
|
+
marginBlockEnd?: BpkResponsiveValue<BpkMarginValue>;
|
|
28
|
+
marginBlock?: BpkResponsiveValue<BpkMarginValue>;
|
|
29
|
+
paddingBlock?: BpkResponsiveValue<BpkSpacingValue>;
|
|
26
30
|
gap?: BpkResponsiveValue<BpkSpacingValue>;
|
|
27
31
|
width?: BpkResponsiveValue<BpkSizeValue>;
|
|
28
32
|
height?: BpkResponsiveValue<BpkSizeValue>;
|
|
@@ -60,6 +64,9 @@ export interface BpkCommonLayoutProps extends BpkSpacingProps, AriaAttributes {
|
|
|
60
64
|
overflowX?: BpkResponsiveValue<BpkOverflowValue>;
|
|
61
65
|
overflowY?: BpkResponsiveValue<BpkOverflowValue>;
|
|
62
66
|
zIndex?: BpkZIndexValue;
|
|
67
|
+
as?: ElementType;
|
|
68
|
+
opacity?: number;
|
|
69
|
+
dir?: 'ltr' | 'rtl' | 'auto';
|
|
63
70
|
'data-testid'?: string;
|
|
64
71
|
'data-cy'?: string;
|
|
65
72
|
color?: TextColor;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
import StackOptionKeys from "./BpkStack.constant";
|
|
20
20
|
import { getSpacingValue } from "./theme";
|
|
21
|
-
import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
|
|
21
|
+
import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidMarginValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
24
|
* Allowlisted, component-scoped prop groups that are eligible for Backpack responsive value
|
|
@@ -154,6 +154,9 @@ export function processBpkComponentProps(props, options) {
|
|
|
154
154
|
* @returns {string} The actual spacing value in rem or the percentage string
|
|
155
155
|
*/
|
|
156
156
|
export function convertBpkSpacingToChakra(value) {
|
|
157
|
+
if (value === 'auto') {
|
|
158
|
+
return value; // 'auto' passes through (only reaches here for margin props; padding/gap reject it at validation)
|
|
159
|
+
}
|
|
157
160
|
if (isPercentage(value)) {
|
|
158
161
|
return value; // Percentages pass through
|
|
159
162
|
}
|
|
@@ -241,9 +244,9 @@ export function processResponsiveValue(value, converter, validator, propName) {
|
|
|
241
244
|
export function processSpacingProps(props) {
|
|
242
245
|
const spacingKeys = [
|
|
243
246
|
// Padding props
|
|
244
|
-
'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingStart', 'paddingEnd', 'paddingInline',
|
|
247
|
+
'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingStart', 'paddingEnd', 'paddingInline', 'paddingBlock',
|
|
245
248
|
// Margin props
|
|
246
|
-
'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd', 'marginInline',
|
|
249
|
+
'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd', 'marginInline', 'marginBlockStart', 'marginBlockEnd', 'marginBlock',
|
|
247
250
|
// Gap and spacing
|
|
248
251
|
'gap', 'spacing', 'rowGap', 'columnGap',
|
|
249
252
|
// Size props
|
|
@@ -255,10 +258,13 @@ export function processSpacingProps(props) {
|
|
|
255
258
|
};
|
|
256
259
|
const sizeKeys = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'];
|
|
257
260
|
const positionKeys = ['top', 'right', 'bottom', 'left'];
|
|
261
|
+
// Margin keys accept 'auto' (e.g. marginTop: 'auto' to bottom-anchor a flex child); padding/gap don't.
|
|
262
|
+
const marginKeys = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd', 'marginInline', 'marginBlockStart', 'marginBlockEnd', 'marginBlock'];
|
|
258
263
|
spacingKeys.forEach(key => {
|
|
259
264
|
if (key in processed && processed[key] !== undefined) {
|
|
260
265
|
const isSizeProp = sizeKeys.includes(key);
|
|
261
266
|
const isPositionProp = positionKeys.includes(key);
|
|
267
|
+
const isMarginProp = marginKeys.includes(key);
|
|
262
268
|
let converter;
|
|
263
269
|
if (isSizeProp || isPositionProp) {
|
|
264
270
|
converter = v => v;
|
|
@@ -270,6 +276,8 @@ export function processSpacingProps(props) {
|
|
|
270
276
|
validator = isValidSizeValue;
|
|
271
277
|
} else if (isPositionProp) {
|
|
272
278
|
validator = isValidPositionValue;
|
|
279
|
+
} else if (isMarginProp) {
|
|
280
|
+
validator = isValidMarginValue;
|
|
273
281
|
} else {
|
|
274
282
|
validator = isValidSpacingValue;
|
|
275
283
|
}
|