@cbpds/web-components
Version:
Web components for the CBP Design System.
58 lines (57 loc) • 2.29 kB
CSS
/*
* Caution: "global styles" get injected into every component and can cause file size bloat.
* These should only include SASS variables and mixins that are not written out to CSS directly
*/
/*
* @prop --cbp-form-field-wrapper-padding-start: inherit;
* @prop --cbp-form-field-wrapper-padding-end: inherit;
*/
:root {
--cbp-form-field-wrapper-padding-start: var(--cbp-form-field-padding-inline);
--cbp-form-field-wrapper-padding-end: var(--cbp-form-field-padding-inline);
--cbp-form-field-overlay-start-width: 0;
--cbp-form-field-overlay-end-width: 0;
--cbp-form-field-attached-button-width: 0;
}
cbp-form-field-wrapper {
position: relative;
display: flex;
gap: var(--cbp-space-4x);
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap {
position: relative;
display: block;
flex-basis: 100%;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap input:not(#fakeId) {
padding-inline-start: calc(var(--cbp-form-field-overlay-start-width) + var(--cbp-form-field-wrapper-padding-start));
padding-inline-end: calc(var(--cbp-form-field-overlay-end-width) + var(--cbp-form-field-wrapper-padding-end));
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot] {
position: absolute;
inset-block-start: 0;
display: inline-flex;
align-items: center;
height: 100%;
color: var(--cbp-form-field-color);
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-overlay-start] {
inset-inline-start: var(--cbp-space-2x);
font-weight: var(--cbp-font-weight-bold);
font-style: italic;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-overlay-end] {
inset-inline-end: calc(var(--cbp-form-field-attached-button-width) + var(--cbp-space-2x));
font-style: italic;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-attached-button] {
--cbp-button-border-radius: 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0;
inset-inline-end: 0;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-attached-button] cbp-segmented-button-group cbp-button:first-child {
--cbp-button-border-radius: 0;
}
cbp-form-field-wrapper [slot=cbp-form-field-unattached-buttons] {
display: flex;
gap: var(--cbp-space-4x);
}