+ Define the positioning method of an element, as well as its position relative to top, bottom,
+ start and end easily with utility classes.
+
++
Note that these utility classes are not responsive.
+
+
+
+
+
+## Properties
+
+### Positioning method of elements
+
+Here are the different positioning methods available for elements.
+
+- `position-static` (default) positions the element according to the flow of the page.
+- `position-relative` positions the element according to the flow of the page, but you can offset it relatively to itself by settings values for `top`, `bottom`, `start` and `end`.
+- `position-absolute` removes the element from the flow of the page and positions it relatively to its closest positioned element.
+- `position-fixed` removes the element from the flow of the page and positions it relatively to the viewport.
+- `position-sticky` positions the element according to the flow of the page but "sticks" it in place in the case of a scrolling container.
+
+### Arrangement of elements
+
+Some utility classes are here to define the position from the edges of the container more easily.
+
+- `top-{0|50|100}` to set the position of the element from the top of the container by 0, 50% or 100%.
+- `bottom-{0|50|100}` to set the position of the element from the bottom of the container by 0, 50% or 100%.
+- `start-{0|50|100}` to set the position of the element from the start of the container (left in LTR) by 0, 50% or 100%.
+- `end-{0|50|100}` to set the position of the element from the end of the container (right in LTR) by 0, 50% or 100%.
+
+### Translate-middle
+
+The class `.translate-middle` is there to center an element horizontally and vertically on their x and y position. You can also use `.translate-middle-x` to only center the element horizontally and `.translate-middle-y` to center it vertically.
+
+
+
+On the example above, the black dot is the center of the container. Both squares are positioned 50% from the top and 50% from the start. The blue square has the `translate-middle` class and the yellow one doesn't.
diff --git a/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts b/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
new file mode 100644
index 0000000000..9b4d17e3d2
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
@@ -0,0 +1,82 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './position.stories';
+import { bombArgs } from '@/utils';
+import './position.styles.scss';
+import { schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+ ...metaWithoutId,
+ title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Position: Story = {
+ render: () => {
+ return schemes(
+ () => html`
+
+
+ `,
+ );
+ },
+};
diff --git a/packages/documentation/src/stories/utilities/position/position.stories.ts b/packages/documentation/src/stories/utilities/position/position.stories.ts
new file mode 100644
index 0000000000..7c4532915a
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/position/position.stories.ts
@@ -0,0 +1,156 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+import './position.styles.scss';
+import { bombArgs } from '@/utils';
+
+const meta: MetaExtended = {
+ id: '803a58e8-c734-4ad7-80a8-62da1bb29d4b',
+ title: 'Utilities/Position',
+ args: {
+ position: 'absolute',
+ start: '50',
+ top: '0',
+ translateMiddle: 'both',
+ },
+ argTypes: {
+ position: {
+ name: 'Position',
+ description: 'Sets the position. ',
+ control: {
+ type: 'select',
+ },
+ options: ['relative', 'static', 'absolute', 'fixed', 'sticky'],
+ table: {
+ category: 'General',
+ },
+ },
+ top: {
+ name: 'Top',
+ description: 'Sets the distance from top. ',
+ control: {
+ type: 'select',
+ },
+ options: ['', '0', '50', '100'],
+ table: {
+ category: 'General',
+ },
+ if: {
+ arg: 'bottom',
+ truthy: false,
+ },
+ },
+ bottom: {
+ name: 'Bottom',
+ description: 'Sets the distance from bottom. ',
+ control: {
+ type: 'select',
+ },
+ options: ['', '0', '50', '100'],
+ table: {
+ category: 'General',
+ },
+ if: {
+ arg: 'top',
+ truthy: false,
+ },
+ },
+ start: {
+ name: 'Start',
+ description: 'Sets the distance from start (left in LTR). ',
+ control: {
+ type: 'select',
+ },
+ options: ['', '0', '50', '100'],
+ table: {
+ category: 'General',
+ },
+ if: {
+ arg: 'end',
+ truthy: false,
+ },
+ },
+ end: {
+ name: 'End',
+ description: 'Sets the distance from end (right in LTR). ',
+ control: {
+ type: 'select',
+ },
+ options: ['', '0', '50', '100'],
+ table: {
+ category: 'General',
+ },
+ if: {
+ arg: 'start',
+ truthy: false,
+ },
+ },
+ translateMiddle: {
+ name: 'Translate middle',
+ description: 'Set to true to center align an element based on its x and y position.',
+ control: {
+ type: 'select',
+ },
+ options: ['', 'both', 'x', 'y'],
+ table: {
+ category: 'General',
+ },
+ },
+ },
+ render: (args: Args) => {
+ let translateMiddleValue = '';
+ if (args.translateMiddle === 'both') {
+ translateMiddleValue = ' translate-middle';
+ } else if (args.translateMiddle === 'x') {
+ translateMiddleValue = ' translate-middle-x';
+ } else if (args.translateMiddle === 'y') {
+ translateMiddleValue = ' translate-middle-y';
+ }
+ return html`
+
+ `;
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ decorators: [
+ (story, context) =>
+ html`
+ Position
+Position methods
+
+ ${(meta.argTypes?.position?.options ?? []).map((position: string) => {
+ return html`
+
+ Position ${position}
+
+
+ `;
+ })}
+
+
+
+ I'm ${position}
+
+
+
+ Position arrangement with position absolute
+ ${bombArgs({ + x: ['start-0', 'start-50', 'start-100', 'end-0', 'end-50', 'end-100'], + y: ['top-0', 'top-50', 'top-100', 'bottom-0', 'bottom-50', 'bottom-100'], + }).map(args => { + const xArgName = (args.x as string).split('-')[0]; + const xArgValue = (args.x as string).split('-')[1]; + const yArgName = (args.y as string).split('-')[0]; + const yArgValue = (args.y as string).split('-')[1]; + return html` +${xArgName}: ${xArgValue}% / ${yArgName}: ${yArgValue}%
+
+
+
+ `;
+ })}
+ Translate middle with position absolute
+Start: 50% / Top: 50%
+ ${bombArgs({ + translateMiddle: ['', 'both', 'x', 'y'], + }).map(args => { + let translateMiddleValue = ''; + if (args.translateMiddle === 'both') { + translateMiddleValue = ' translate-middle'; + } else if (args.translateMiddle === 'x') { + translateMiddleValue = ' translate-middle-x'; + } else if (args.translateMiddle === 'y') { + translateMiddleValue = ' translate-middle-y'; + } + return html` ++ Translate middle: ${args.translateMiddle ? args.translateMiddle : 'none'} +
+
+
+
+ `;
+ })}
+
+ ${context.args.position === 'fixed'
+ ? html`
`
+ : ''}
+
+ `,
+ ],
+};
+
+export const TranslateMiddle: Story = {
+ decorators: [
+ story =>
+ html` `
+ : ''}
+
+ ${story()}
+ ${bombArgs({
+ start: ['0', '50', '100'],
+ top: ['0', '50', '100'],
+ }).map(
+ args => html` `,
+ )}
+
+ ${story()}
`,
+ ],
+ render: () => {
+ return html`
+ `;
+ },
+};
diff --git a/packages/documentation/src/stories/utilities/position/position.styles.scss b/packages/documentation/src/stories/utilities/position/position.styles.scss
new file mode 100644
index 0000000000..3f4769a3e7
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/position/position.styles.scss
@@ -0,0 +1,135 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+@mixin square {
+ width: 2rem;
+ height: 2rem;
+ opacity: 0.8;
+ border-radius: post.$border-radius;
+}
+
+@mixin centered-dot {
+ &::after {
+ content: '';
+ background-color: post.$dark;
+ width: 0.5rem;
+ height: 0.5rem;
+ border-radius: 100%;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+// Docs styling
+.translate-middle-container {
+ height: 20rem;
+ flex: 0 0 50%;
+ @include centered-dot();
+
+ > * {
+ @include square;
+ }
+}
+
+.position-outer-container {
+ margin: 2rem;
+
+ img {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ .position-container {
+ height: 12rem;
+ background-color: post.$gray;
+
+ .pos-element {
+ width: 0.5rem;
+ height: 0.5rem;
+ border-radius: 100%;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ background-color: post.$dark;
+ }
+
+ .bg-yellow {
+ width: 2rem;
+ height: 2rem;
+ border-radius: post.$border-radius;
+ }
+ }
+
+ &-sticky {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: 12rem;
+
+ .position-container {
+ height: 40rem;
+ }
+
+ .pos-element {
+ display: none;
+ }
+ }
+
+ &-fixed {
+ .position-container {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+ overflow: hidden;
+ }
+
+ .pos-element {
+ display: none;
+ }
+
+ .position-fixed {
+ position: absolute !important;
+ }
+ }
+}
+
+// Snapshots styling
+.snapshot-outer-container {
+ position: relative;
+ max-height: 8rem;
+ overflow-y: scroll;
+}
+
+.snapshot-container {
+ height: 16rem;
+ margin: 2rem;
+
+ .bg-dark {
+ width: 2rem;
+ height: 2rem;
+ border-radius: post.$border-radius;
+ }
+
+ .bg-yellow {
+ padding: 1rem;
+ display: inline-block;
+ border-radius: post.$border-radius;
+ }
+}
+
+.snapshot-arrange-container,
+.snapshot-translate-middle-container {
+ height: 5rem;
+ border-radius: post.$border-radius;
+ position: relative;
+ background-color: post.$gray;
+ margin: 2rem;
+
+ > * {
+ @include square;
+ position: absolute;
+ }
+}
+
+.snapshot-translate-middle-container {
+ @include centered-dot();
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index faed868339..0696634c6c 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -45,6 +45,13 @@ $utilities: map.remove($utilities, 'float');
$utilities: map.remove($utilities, 'opacity');
+$utilities: map.remove($utilities, 'position');
+$utilities: map.remove($utilities, 'top');
+$utilities: map.remove($utilities, 'bottom');
+$utilities: map.remove($utilities, 'start');
+$utilities: map.remove($utilities, 'end');
+$utilities: map.remove($utilities, 'translate-middle');
+
$utilities: map.remove($utilities, 'overflow');
$utilities: map.remove($utilities, 'overflow-x');
$utilities: map.remove($utilities, 'overflow-y');
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index e1df53d7fa..d09cf091b1 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -21,6 +21,12 @@
Our API is based on bootstrap utility API, more information is available here: https://getbootstrap.com/docs/5.3/utilities/api/
*/
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%,
+);
+
$utilities: (
'align': (
property: vertical-align,
@@ -254,6 +260,37 @@ $utilities: (
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
none,
),
+ 'position': (
+ property: position,
+ values: static relative absolute fixed sticky,
+ ),
+ 'top': (
+ property: top,
+ values: $position-values,
+ ),
+ 'bottom': (
+ property: bottom,
+ values: $position-values,
+ ),
+ 'start': (
+ property: left,
+ class: start,
+ values: $position-values,
+ ),
+ 'end': (
+ property: right,
+ class: end,
+ values: $position-values,
+ ),
+ 'translate-middle': (
+ property: transform,
+ class: translate-middle,
+ values: (
+ null: translate(-50%, -50%),
+ x: translateX(-50%),
+ y: translateY(-50%),
+ ),
+ ),
'overflow': (
property: overflow,
values: auto hidden visible scroll,
From 5cef591c5b4a7895db8455ddc6ab892aa6a7813a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
<33580481+alizedebray@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:45:43 +0100
Subject: [PATCH 03/21] fix(components): update generated files (#4180)
---
packages/components/src/components/post-icon/readme.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index b59e3eab25..8b1c4de7d4 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -22,8 +22,8 @@ some content
### Used by
- - [post-back-to-top](../post-back-to-top)
- [post-accordion-item](../post-accordion-item)
+ - [post-back-to-top](../post-back-to-top)
- [post-banner](../post-banner)
- [post-breadcrumb-item](../post-breadcrumb-item)
- [post-card-control](../post-card-control)
@@ -34,8 +34,8 @@ some content
### Graph
```mermaid
graph TD;
- post-back-to-top --> post-icon
post-accordion-item --> post-icon
+ post-back-to-top --> post-icon
post-banner --> post-icon
post-breadcrumb-item --> post-icon
post-card-control --> post-icon
From 82de51424b36c06f3a4c352ea083e3492c39bf75 Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:50:17 +0100
Subject: [PATCH 04/21] =?UTF-8?q?chore(changesets):=20=F0=9F=A6=8B?=
=?UTF-8?q?=F0=9F=93=A6=20publish=20packages=20(main)=20(next)=20(#4138)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.
⚠️⚠️⚠️⚠️⚠️⚠️
`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.
⚠️⚠️⚠️⚠️⚠️⚠️
# Releases
## @swisspost/design-system-styles@9.0.0-next.8
### Major Changes
- Removed size variants for textarea form control. The sizing classes
`.form-control-sm`, `.form-control-rg` and `.form-control-lg` for
textarea no longer have any effect and can be removed safely. (by
[@leagrdv](https://github.com/leagrdv) with
[#4062](https://github.com/swisspost/design-system/pull/4062))
### Minor Changes
- Internalized bootstrap position utilities into the design system. (by
[@leagrdv](https://github.com/leagrdv) with
[#3988](https://github.com/swisspost/design-system/pull/3988))
- Implemented simple check list component. (by
[@myrta2302](https://github.com/myrta2302) with
[#4171](https://github.com/swisspost/design-system/pull/4171))
- Created the `search-input` component. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4099](https://github.com/swisspost/design-system/pull/4099))
- Added list mixins `list-bullet`, `list-revert` and `list-unstyled`.
(by [@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Updated `.form-control` textarea to new Post design. (by
[@leagrdv](https://github.com/leagrdv) with
[#4062](https://github.com/swisspost/design-system/pull/4062))
### Patch Changes
- Fixed ´switch´ alignment for long labels. (by
[@schaertim](https://github.com/schaertim) with
[#4140](https://github.com/swisspost/design-system/pull/4140))
- Updated the ´post-accordion´ styles to match the new Post design. (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Reverted `ol` lists to use standard display (not grid). (by
[@leagrdv](https://github.com/leagrdv) with
[#4110](https://github.com/swisspost/design-system/pull/4110))
- Updated fieldset-legend styles with Design Tokens. (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
## @swisspost/design-system-components@9.0.0-next.8
### Minor Changes
- Ιmplemented the back-to-top button component. (by
[@myrta2302](https://github.com/myrta2302) with
[#3991](https://github.com/swisspost/design-system/pull/3991))
- Added the capability to use a slotted img as a logo inside
´accordion-items´. (by [@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-icons@9.0.0-next.8
- @swisspost/design-system-styles@9.0.0-next.8
## @swisspost/design-system-icons@9.0.0-next.8
### Minor Changes
- Added icon number 2633. (by [@leagrdv](https://github.com/leagrdv)
with [#4166](https://github.com/swisspost/design-system/pull/4166))
### Patch Changes
- Removed `fill` and `stroke` attributes on the icons output files. (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
## @swisspost/design-system-components-angular@9.0.0-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-components@9.0.0-next.8
## @swisspost/design-system-components-react@9.0.0-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-components@9.0.0-next.8
## @swisspost/design-system-intranet-header@9.0.0-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
## @swisspost/design-system-styles-primeng@9.0.0-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
## @swisspost/design-system-migrations@9.0.0-next.8
## @swisspost/design-system-tokens@9.0.0-next.8
## @swisspost/design-system-documentation@6.0.0-next.9
### Major Changes
- Removed size variants for textarea form control. The sizing classes
`.form-control-sm`, `.form-control-rg` and `.form-control-lg` for
textarea no longer have any effect and can be removed safely. (by
[@leagrdv](https://github.com/leagrdv) with
[#4062](https://github.com/swisspost/design-system/pull/4062))
### Minor Changes
- Internalized bootstrap position utilities into the design system. (by
[@leagrdv](https://github.com/leagrdv) with
[#3988](https://github.com/swisspost/design-system/pull/3988))
- Implemented simple check list component. (by
[@myrta2302](https://github.com/myrta2302) with
[#4171](https://github.com/swisspost/design-system/pull/4171))
- Ιmplemented the back-to-top button component. (by
[@myrta2302](https://github.com/myrta2302) with
[#3991](https://github.com/swisspost/design-system/pull/3991))
- Created the `search-input` component. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4099](https://github.com/swisspost/design-system/pull/4099))
- Updated documentation to display the currently selected theme and
channel SCSS file. (by [@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Added a ´post-accordion´ example showing logo usage. (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Added list mixins `list-bullet`, `list-revert` and `list-unstyled`.
(by [@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Updated `.form-control` textarea to new Post design. (by
[@leagrdv](https://github.com/leagrdv) with
[#4062](https://github.com/swisspost/design-system/pull/4062))
- Added tokens package icon to the home page (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
### Patch Changes
- Reverted `ol` lists to use standard display (not grid). (by
[@leagrdv](https://github.com/leagrdv) with
[#4110](https://github.com/swisspost/design-system/pull/4110))
- Added ´btn-link´ class to remove inline padding. (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Added classes to fix banner sizing in controls. (by
[@leagrdv](https://github.com/leagrdv) with
[#4166](https://github.com/swisspost/design-system/pull/4166))
- Updated dependencies:
- @swisspost/design-system-icons@9.0.0-next.8
- @swisspost/design-system-styles@9.0.0-next.8
- @swisspost/design-system-components@9.0.0-next.8
- @swisspost/internet-header@2.0.0-next.8
- @swisspost/design-system-components-react@9.0.0-next.8
- @swisspost/design-system-tokens@9.0.0-next.8
## @swisspost/design-system-components-angular-workspace@1.1.10-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
- @swisspost/design-system-components@9.0.0-next.8
## @swisspost/internet-header@2.0.0-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
## @swisspost/design-system-intranet-header-workspace@3.0.22-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
## @swisspost/design-system-intranet-header-showcase@1.0.10-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-intranet-header@9.0.0-next.8
## @swisspost/design-system-nextjs-integration@0.1.14-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
- @swisspost/internet-header@2.0.0-next.8
- @swisspost/design-system-components-react@9.0.0-next.8
## @swisspost/design-system-styles-primeng-workspace@1.0.6-next.8
### Patch Changes
- Updated dependencies:
- @swisspost/design-system-styles@9.0.0-next.8
---------
Co-authored-by: github-actions[bot]
+
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index df9a46e239..7496c6c553 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -1,60 +1,87 @@
+@use '@swisspost/design-system-styles/mixins/button';
+@use '@swisspost/design-system-styles/mixins/icons';
@use '@swisspost/design-system-styles/mixins/media';
@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/elements';
+@use '@swisspost/design-system-styles/variables/animation';
-*,
-::before,
-::after {
- box-sizing: border-box;
-}
+post-mainnavigation {
+ // reset links and buttons
+ post-list-item {
+ a {
+ text-decoration: none;
+ border-radius: 0;
+ }
-slot[name='back-button'],
-[slot='back-button'] {
- @include media.min(lg) {
- display: none;
- }
-}
+ button {
+ @include button.reset-button;
+ text-align: start;
+ }
-h2 {
- @include media.min(lg) {
- @include utilities.visuallyhidden();
+ a,
+ button {
+ &:hover {
+ color: tokens.get('post-link-hover-fg', elements.$post-link);
+ }
+ }
}
-}
-post-mainnavigation {
- height: 100%;
-}
+ // desktop styles
+ @include media.min(lg) {
+ post-list > [role="list"] {
+ flex-direction: row;
+ }
-:host {
- height: 100%;
- display: block;
-}
+ post-list-item {
+ a,
+ button {
+ padding-inline: var(--post-core-dimension-12);
+ height: var(--post-core-dimension-56);
+ border-block: var(--post-core-dimension-4) solid transparent;
+ display: flex;
+ align-items: center;
+ gap: var(--post-core-dimension-4);
+ font-size: var(--post-core-font-size-16);
+ }
-.main-navigation {
- margin-block: 0;
- list-style: none;
- display: flex;
- padding-left: 0;
- gap: 1rem;
+ // styles specific to for the mega-dropdown buttons
+ button {
+ padding-inline-end: var(--post-core-dimension-12);
+ transition: border-block-end-color animation.$transition-base-timing;
- @include media.max(lg) {
- flex-direction: column;
- }
+ &::after {
+ content: '';
+ @include icons.icon(2113);
+ height: var(--post-core-dimension-24);
+ width: var(--post-core-dimension-24);
+ transition: transform animation.$transition-base-timing;
+ }
- > post-list {
- display: flex;
- align-items: stretch;
- gap: 1rem;
- height: 100%;
+ &.selected {
+ border-block-end-color: currentColor;
+ font-weight: var(--post-core-font-weight-700);
- @include media.max(lg) {
- flex-direction: column;
+ &::after {
+ transform: rotate(180deg);
+ }
+ }
+ }
}
}
- a,
- post-megadropdown-toggle {
- height: 100%;
- display: flex;
- align-items: center;
+ // tablet/mobile styles
+ @include media.max(lg) {
+ post-list-item {
+ a,
+ button {
+ display: block;
+ width: 100%;
+ padding-block: var(--post-core-dimension-12);
+ padding-inline-end: var(--post-core-dimension-12);
+ border-bottom: var(--post-core-dimension-1) solid currentColor;
+ font-weight: var(--post-core-font-weight-700);
+ }
+ }
}
}
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx b/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
index c78965cd44..dc82772c1b 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
@@ -36,7 +36,7 @@ export class PostMainnavigation {
`;
},
};
@@ -239,11 +239,11 @@ export const Select: Story = {
+ ${feedbackTemplate}
this.handleBackButtonClick()} class="back-button">
- Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
- ${feedbackTemplate} `; }, }; @@ -301,11 +301,11 @@ export const TextArea: Story = { > + ${feedbackTemplate}Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
- ${feedbackTemplate} `; }, }; diff --git a/packages/styles/src/components/form-hint.scss b/packages/styles/src/components/form-hint.scss index d3afda686f..0a52c325c3 100644 --- a/packages/styles/src/components/form-hint.scss +++ b/packages/styles/src/components/form-hint.scss @@ -6,9 +6,8 @@ tokens.$default-map: components.$post-assist; .form-hint { color: tokens.get('assist-enabled-fg'); padding-inline: tokens.get('assist-padding-inline'); - padding-block: tokens.get('assist-padding-block'); + margin-block: tokens.get('post-assist-padding-block') !important; font-size: tokens.get('assist-font-size'); - margin-block-start: 0; } .form-control:disabled .form-hint { diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index e0f6f9de9b..46385f00a0 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -12,11 +12,9 @@ Default feedback message classes .valid-feedback, .invalid-feedback { display: none; - align-items: center; + align-items: flex-start; width: 100%; margin: 0; - padding: tokens.get('post-validation-input-padding-block') - tokens.get('post-validation-input-padding-inline'); font-size: tokens.get('post-validation-font-size'); } @@ -56,24 +54,59 @@ Default feedback message classes } } +input[type='text'], +select, +textarea { + ~ .invalid-feedback, + ~ .valid-feedback { + margin-block: tokens.get('assist-padding-block', components.$post-assist) !important; + padding-inline: tokens.get('validation-input-padding-inline'); + } +} + /* Checkbox and Radio box specific classes */ input[type='checkbox'], input[type='radio'], -input[type='range'], :has(input[type='checkbox']), :has(input[type='radio']) { ~ .invalid-feedback, ~ .valid-feedback { + padding-inline-start: tokens.get('validation-group-padding-inline-start'); + &::before { - height: tokens.get('post-validation-group-icon-size'); - width: tokens.get('post-validation-group-icon-size'); - display: inline-block; - margin-inline-end: tokens.get('post-validation-group-gap-inline'); - background-color: currentColor; - color: currentColor; + height: tokens.get('validation-group-icon-size'); + width: tokens.get('validation-group-icon-size'); + margin-block-start: tokens.get('validation-group-icon-block-start'); + margin-block-end: tokens.get('validation-group-icon-block-end'); + margin-inline-end: tokens.get('validation-group-gap-inline'); content: ''; + flex-shrink: 0; + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + } + } + + input[type='radio'], + :has(input[type='radio']) { + ~ .invalid-feedback, + ~ .valid-feedback { + margin-block-start: tokens.get('radio-button-gap-block-group', components.$post-radio-button); + margin-block-end: tokens.get( + 'radio-button-padding-block-group', + components.$post-radio-button + ); + } + } + + input[type='checkbox'], + :has(input[type='checkbox']) { + ~ .invalid-feedback, + ~ .valid-feedback { + margin-block-start: tokens.get('checkbox-gap-block-group', components.$post-checkbox); + margin-block-end: tokens.get('checkbox-padding-block-group', components.$post-checkbox); } } From 6c79d1c866b4a3e8a79cdf084a3dd3ec7417ad72 Mon Sep 17 00:00:00 2001 From: Lea