Skip to content

Commit

Permalink
chore: apply new spacing utilities
Browse files Browse the repository at this point in the history
  • Loading branch information
alizedebray committed Sep 25, 2024
1 parent f619ff9 commit 0206600
Show file tree
Hide file tree
Showing 216 changed files with 885 additions and 885 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<header class="bg-dark">
<nav class="container py-2">
<ul class="d-flex flex-wrap row-gap-1 column-gap-3 m-0 list-unstyled">
<nav class="container py-8">
<ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
<li *ngFor="let route of navigationRoutes">
<a [routerLink]="route.path">{{ route.title }}</a>
</li>
</ul>
</nav>
</header>

<main class="container my-3">
<main class="container my-16">
<h1>Hurray, it works!</h1>
<router-outlet></router-outlet>
</main>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ <h2>CardControl Forms</h2>

<h3>Form Builder Form</h3>
<form [formGroup]="formBuilderForm" (ngSubmit)="formBuilderFormOnSubmit($event)">
<fieldset class="mb-3">
<fieldset class="mb-16">
<div class="row">
<div class="col-8">
<legend>Post Card Control Checkbox</legend>
Expand Down Expand Up @@ -30,7 +30,7 @@ <h3>Form Builder Form</h3>
</div>
</fieldset>

<fieldset class="mb-3">
<fieldset class="mb-16">
<div class="row">
<div class="col-8">
<legend>Post Card Control Radio Group</legend>
Expand Down Expand Up @@ -61,7 +61,7 @@ <h3>Form Builder Form</h3>
</div>
</fieldset>

<div class="d-flex gap-3">
<div class="d-flex gap-16">
<button class="btn btn-secondary" type="reset">Reset</button>
<button class="btn btn-primary">Submit</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="my-4">
<div class="my-24">
<h2>Post Accordion</h2>
<post-accordion [headingLevel]="3">
<post-accordion-item>
Expand All @@ -18,37 +18,37 @@ <h2>Post Accordion</h2>
</post-accordion>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Alert</h2>
<post-alert><p>Contentus momentus vero siteos et accusam iretea et justo.</p></post-alert>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Card-Control</h2>
<post-card-control type="checkbox" label="label"></post-card-control>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Collapsible</h2>
<post-collapsible-trigger for="angular-collapsible">
<button class="btn btn-secondary mb-mini">Toggle</button>
<button class="btn btn-secondary mb-8">Toggle</button>
</post-collapsible-trigger>
<post-collapsible id="angular-collapsible">
<p>Contentus momentus vero siteos et accusam iretea et justo.</p>
</post-collapsible>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Icon</h2>
<post-icon name="1001"></post-icon>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Logo</h2>
<post-logo url="https://www.post.ch/en">Logo of the Post, To the homepage</post-logo>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Popover</h2>
<button class="btn btn-secondary btn-large" data-popover-target="popover-one">
Click here to see a popover
Expand All @@ -64,17 +64,17 @@ <h2 class="h6">Optional title</h2>
</post-popover>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Popovercontainer</h2>
<post-popovercontainer></post-popovercontainer>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Rating</h2>
<post-rating></post-rating>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Tabs</h2>
<post-tabs>
<post-tab-header panel="unua">Unua langeto</post-tab-header>
Expand All @@ -93,12 +93,12 @@ <h2>Post Tabs</h2>
</post-tabs>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Tag</h2>
<post-tag>Tag</post-tag>
</div>

<div class="my-4">
<div class="my-24">
<h2>Post Tooltip</h2>
<button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button>
<post-tooltip id="tooltip-one" placement="top">Hi there 👋</post-tooltip>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<post-card-control label="Group Member 3" type="radio" name="CardControlGroup" value="2">
</post-card-control>
</fieldset>
<div class="mt-3 d-flex gap-3 justify-content-end">
<div class="mt-16 d-flex gap-16 justify-content-end">
<button type="reset" class="btn btn-link"><post-icon name="2042"></post-icon>Reset</button>
<button type="submit" class="btn btn-primary btn-animated"><span>Submit</span></button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@
<script nomodule src="/build/post-components.js"></script>
</head>
<body>
<div class="p-5">Add your component here and start developing!</div>
<div class="p-48">Add your component here and start developing!</div>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="heading py-5">
<div class="heading py-48">
<h1 class="bold font-curve-large">Accordion</h1>
<app-dependency-link></app-dependency-link>
</div>

<div class="alert alert-warning mb-big">
<div class="alert alert-warning mb-32">
<p class="alert-heading">Bootstrap accordions are deprecated and will soon be removed.</p>
<p>
For a similar behavior, check out our new
Expand All @@ -20,21 +20,21 @@ <h1 class="bold font-curve-large">Accordion</h1>

<section>
<h3>Using JavaScript</h3>
<div class="alert alert-info my-large">
<div class="alert alert-info my-24">
<p>
For the JavaScript accordion to work properly, you need to import collapse.js from Bootstrap
into your component.
</p>
</div>
<code
class="block my-big p-3"
class="block my-32 p-16"
highlight="import 'bootstrap/js/dist/collapse';"
[languages]="['javascript']"
></code>

<app-accordion-demo></app-accordion-demo>
<code
class="block mt-big"
class="block mt-32"
[highlight]="codeTemplate"
[languages]="['html', 'scss', 'css']"
></code>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<button class="btn btn-secondary" (click)="toggleEx1()" #ex1btn>Toggle Ex. 1</button>

<button class="btn btn-secondary ms-3" (click)="toggleEx2()" #ex2btn>Toggle Ex. 2</button>
<button class="btn btn-secondary ms-16" (click)="toggleEx2()" #ex2btn>Toggle Ex. 2</button>

<button class="btn btn-secondary ms-3" (click)="toggleEx3()" #ex3btn>Toggle Ex. 3</button>
<button class="btn btn-secondary ms-16" (click)="toggleEx3()" #ex3btn>Toggle Ex. 3</button>

<div class="alert alert-info alert-action pi-1001 alert-fixed-bottom" role="alert" #ex1>
<div class="alert-content">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="heading py-5">
<div class="heading py-48">
<h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
<app-dependency-link></app-dependency-link>
</div>

<div class="alert alert-warning mb-bigger-big">
<div class="alert alert-warning mb-40">
<p>
The following two color variants are deprecated and will be removed in the next major version of
the styles package:
Expand All @@ -30,7 +30,7 @@ <h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
<section class="continous-text">
<h3>Usage</h3>

<div class="alert alert-warning mb-bigger-big">
<div class="alert alert-warning mb-40">
<h5>Dismissible alerts are deprecated</h5>
<p>
There already exists a
Expand All @@ -44,7 +44,7 @@ <h5>Dismissible alerts are deprecated</h5>
</p>
</div>

<div class="alert-container mt-5">
<div class="alert-container mt-48">
<div class="alert alert-info">
<p class="alert-heading">
The markup for alerts differs from the basic bootstrap implementation, to secure
Expand All @@ -65,7 +65,7 @@ <h5>Dismissible alerts are deprecated</h5>
or "alert-dark" available.)
</li>
</ul>
<p class="bold pt-3">For Toasts, the bootstrap classes are not yet available!</p>
<p class="bold pt-16">For Toasts, the bootstrap classes are not yet available!</p>
</div>
</div>
</section>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@
</div>
</div>

<div class="heading my-3">
<div class="heading my-16">
<h4>Examples of ngx-toastr</h4>
<a
href="https://www.npmjs.com/package/ngx-toastr"
target="_blank"
rel="noopener"
class="btn btn-sm btn-primary me-2"
class="btn btn-sm btn-primary me-8"
>
ngx-toastr Documentation
</a>
Expand All @@ -84,12 +84,12 @@ <h4>Examples of ngx-toastr</h4>
ngx-toastr Demo
</a>
</div>
<p class="mb-3 mt-5">
<p class="mb-16 mt-48">
Screen reader output is a little better if the close button is disabled (alert messages can still
be closed by clicking on them). Pass the following option to disable the close button:
</p>
<code
class="d-block mt-3 mb-5"
class="d-block mt-16 mb-48"
[highlight]="JSON.stringify(toastOptions, null, 2)"
[languages]="['typescript']"
></code>
Expand All @@ -98,15 +98,15 @@ <h4>Examples of ngx-toastr</h4>
<span>Show Danger Toast</span>
</button>

<button class="btn btn-secondary btn-animated ms-3" (click)="showSuccess()">
<button class="btn btn-secondary btn-animated ms-16" (click)="showSuccess()">
<span>Show Success Toast</span>
</button>

<button class="btn btn-secondary btn-animated ms-3" (click)="showInfo()">
<button class="btn btn-secondary btn-animated ms-16" (click)="showInfo()">
<span>Show Info Toast</span>
</button>

<button class="btn btn-secondary btn-animated ms-3" (click)="showWarning()">
<button class="btn btn-secondary btn-animated ms-16" (click)="showWarning()">
<span>Show Warning Toast</span>
</button>
</section>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="heading py-5">
<div class="heading py-48">
<h1 class="bold font-curve-large">Background</h1>
<h2 class="font-curve-medium">Custom Post Backgrounds</h2>
</div>
Expand All @@ -10,8 +10,8 @@ <h2 class="bold">Infos</h2>
be checked individually.
</p>

<h2 class="bold mt-huge">Default backgrounds</h2>
<div class="d-flex my-4">
<h2 class="bold mt-56">Default backgrounds</h2>
<div class="d-flex my-24">
<p class="form-check form-switch">
<input
id="bg-opacity-1"
Expand All @@ -27,7 +27,7 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="p-3 bg-gray">
<div class="p-16 bg-gray">
<app-background-demo
[dropOpacity]="dropOpacity1"
[colorArray]="[
Expand All @@ -44,7 +44,7 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="p-3 bg-dark">
<div class="p-16 bg-dark">
<app-background-demo
[dropOpacity]="dropOpacity1"
[colorArray]="[
Expand All @@ -62,13 +62,13 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
</div>
</div>
<code
class="block mt-huge"
class="block mt-56"
[highlight]="codeTemplate"
[languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
></code>

<h2 class="bold mt-huge">Thematic backgrounds</h2>
<div class="d-flex my-4">
<h2 class="bold mt-56">Thematic backgrounds</h2>
<div class="d-flex my-24">
<p class="form-check form-switch">
<input
id="bg-opacity-2"
Expand All @@ -84,7 +84,7 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="p-3 bg-gray">
<div class="p-16 bg-gray">
<app-background-demo
[dropOpacity]="dropOpacity2"
[colorArray]="[
Expand All @@ -105,7 +105,7 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="p-3 bg-dark">
<div class="p-16 bg-dark">
<app-background-demo
[dropOpacity]="dropOpacity2"
[colorArray]="[
Expand All @@ -127,8 +127,8 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
</div>
</div>

<h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
<div class="d-flex my-4">
<h2 class="bold mt-56">Contextual backgrounds (Intranet only)</h2>
<div class="d-flex my-24">
<p class="form-check form-switch">
<input
id="bg-opacity-3"
Expand All @@ -144,15 +144,15 @@ <h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="p-3 bg-gray">
<div class="p-16 bg-gray">
<app-background-demo
[dropOpacity]="dropOpacity3"
[colorArray]="['success', 'warning', 'error', 'info']"
></app-background-demo>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="p-3 bg-dark">
<div class="p-16 bg-dark">
<app-background-demo
[dropOpacity]="dropOpacity3"
[colorArray]="['success', 'warning', 'error', 'info']"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div
*ngFor="let color of colorArray"
class="p-2 my-1"
class="p-8 my-4"
[class]="'bg-' + color"
[style]="'--post-bg-opacity:' + (dropOpacity ? 0.8 : 1) + ';'"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="heading py-5">
<div class="heading py-48">
<h1 class="bold font-curve-large">Badge</h1>
<app-dependency-link></app-dependency-link>
</div>
Expand Down
Loading

0 comments on commit 0206600

Please sign in to comment.