mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 23:33:31 +00:00
a4303fac59
* setup popover component template and basic story * add a11y features * add multiple positions for the popover * add stories for open right and left * prevent panel from hugging edges of screen * fix typo * add popover arrow depending on position * add buttons to stories * add figma preview * move toward directive approach * add all positions * add header input * add close functionality * make standalone component * add a11y import * add all stories * add story controls/args * add module of standalone components * gracefully handle text wrap and align close button to top for longer headings * update semantic html * add story for open state * use bitIconButton * adjust styles * add public close method * setup walkthrough mode * add walkthrough mode * revert to before walkthrough service added * add triggerRef to stories * change property name * add Escape key to close events * add initially open state * add docs * minor reformatting --------- Co-authored-by: William Martin <contact@willmartian.com>
50 lines
1.6 KiB
CSS
50 lines
1.6 KiB
CSS
.bit-popover-arrow {
|
|
@apply tw-absolute tw-z-10 tw-h-4 tw-w-4 tw-rotate-45 tw-border-solid tw-bg-background;
|
|
}
|
|
|
|
.bit-popover-right .bit-popover-arrow {
|
|
@apply tw-left-1 -tw-translate-x-1/2 tw-rounded-bl-sm tw-border-b tw-border-l tw-border-b-secondary-300 tw-border-l-secondary-300;
|
|
}
|
|
|
|
.bit-popover-left .bit-popover-arrow {
|
|
@apply tw-right-1 tw-translate-x-1/2 tw-rounded-tr-sm tw-border-r tw-border-t tw-border-r-secondary-300 tw-border-t-secondary-300;
|
|
}
|
|
|
|
.bit-popover-right-start .bit-popover-arrow,
|
|
.bit-popover-left-start .bit-popover-arrow {
|
|
@apply tw-top-6 -tw-translate-y-1/2;
|
|
}
|
|
|
|
.bit-popover-right-center .bit-popover-arrow,
|
|
.bit-popover-left-center .bit-popover-arrow {
|
|
@apply tw-top-1/2 -tw-translate-y-1/2;
|
|
}
|
|
|
|
.bit-popover-right-end .bit-popover-arrow,
|
|
.bit-popover-left-end .bit-popover-arrow {
|
|
@apply tw-bottom-6 tw-translate-y-1/2;
|
|
}
|
|
|
|
.bit-popover-below .bit-popover-arrow {
|
|
@apply tw-top-1 -tw-translate-y-1/2 tw-rounded-tl-sm tw-border-l tw-border-t tw-border-l-secondary-300 tw-border-t-secondary-300;
|
|
}
|
|
|
|
.bit-popover-above .bit-popover-arrow {
|
|
@apply tw-bottom-1 tw-translate-y-1/2 tw-rounded-br-sm tw-border-b tw-border-r tw-border-b-secondary-300 tw-border-r-secondary-300;
|
|
}
|
|
|
|
.bit-popover-below-start .bit-popover-arrow,
|
|
.bit-popover-above-start .bit-popover-arrow {
|
|
@apply tw-left-6 -tw-translate-x-1/2;
|
|
}
|
|
|
|
.bit-popover-below-center .bit-popover-arrow,
|
|
.bit-popover-above-center .bit-popover-arrow {
|
|
@apply tw-left-1/2 -tw-translate-x-1/2;
|
|
}
|
|
|
|
.bit-popover-below-end .bit-popover-arrow,
|
|
.bit-popover-above-end .bit-popover-arrow {
|
|
@apply tw-right-6 tw-translate-x-1/2;
|
|
}
|