1
0
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:
Bryan Cunningham
2025-06-02 12:05:30 -04:00
committed by GitHub
parent 37e13050a5
commit c215fac818
33 changed files with 67 additions and 67 deletions

View File

@@ -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>

View File

@@ -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>