mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 16:53:34 +00:00
[CL-703] Use logical css properties in CL components (#14951)
* update usage of margin-right with margin-inline-end * update usage of margin-left with margin-inline-start * update usage of paddiing-right with padding-inline-end * update usage of paddiing-left with padding-inline-start * update usage of radius to use logical properties
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div
|
||||
class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-background tw-pb-4 tw-pt-2 tw-text-main"
|
||||
>
|
||||
<div class="tw-mb-1 tw-mr-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-pl-4">
|
||||
<div class="tw-mb-1 tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
|
||||
<h2 bitTypography="h5" class="tw-mt-1 tw-font-semibold">
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
@@ -62,7 +62,7 @@ type Story = StoryObj<PopoverTriggerForDirective>;
|
||||
const popoverContent = `
|
||||
<bit-popover [title]="'Example Title'" #myPopover>
|
||||
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
|
||||
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
|
||||
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
|
||||
<li>Dolor sit amet consectetur</li>
|
||||
<li>Esse labore veniam tempora</li>
|
||||
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
|
||||
@@ -96,7 +96,7 @@ export const Open: Story = {
|
||||
template: `
|
||||
<bit-popover [title]="'Example Title'" #myPopover="popoverComponent">
|
||||
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
|
||||
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
|
||||
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
|
||||
<li>Dolor sit amet consectetur</li>
|
||||
<li>Esse labore veniam tempora</li>
|
||||
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
|
||||
@@ -118,7 +118,7 @@ export const OpenLongTitle: Story = {
|
||||
template: `
|
||||
<bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover="popoverComponent">
|
||||
<div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
|
||||
<ul class="tw-mt-2 tw-mb-0 tw-pl-4">
|
||||
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
|
||||
<li>Dolor sit amet consectetur</li>
|
||||
<li>Esse labore veniam tempora</li>
|
||||
<li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
|
||||
|
||||
Reference in New Issue
Block a user