Skip to content

Commit

Permalink
chore(styles): finished accordion styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@schaertim
schaertim committed Nov 14, 2024
1 parent 831d0da commit a2fc185
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 116 deletions.
28 changes: 7 additions & 21 deletions packages/components/src/components/post-accordion-item/post-accordion-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,11 @@
@use '@swisspost/design-system-styles/mixins/utilities' as utility-mx;

@use '@swisspost/design-system-styles/tokens/components';
@use '@swisspost/design-system-styles/tokens/helpers';
@use '@swisspost/design-system-styles/functions/tokens';

@use '@swisspost/design-system-styles/variables/components/accordion';

@use 'sass:map';

$local-accordion: (
post-accordion-icon-size: 24px,
post-accordion-border-radius: 3px,
);

$merged-accordion: map.merge(components.$post-accordion, $local-accordion);

tokens.$default-map: $merged-accordion;

.accordion-item {
@include utility-mx.focus-style($offset: 2px, $width: 2px, $color: red, $style: solid) {
border-radius: tokens.get('post-accordion-border-radius');
width: fit-content;
}
}
tokens.$default-map: components.$post-accordion;

.accordion-header {
color: tokens.get('accordion-enabled-fg');
Expand All @@ -51,14 +35,16 @@ tokens.$default-map: $merged-accordion;

.accordion-button {
@include button-mx.reset-button;
@include focus-mx.focus-ring;
@include utility-mx.focus-style() {
border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
}
display: flex;
align-items: center;
width: 100%;
position: relative;
gap: tokens.get('accordion-header-content-gap-inline');
padding-block: tokens.get('accordion-header-padding-block-open');
padding-inline: tokens.get('accordion-header-padding-inline');
padding: tokens.get('accordion-header-padding-block-open')
tokens.get('accordion-header-padding-inline');
text-align: start;
transition: accordion.$accordion-button-transition;
cursor: pointer;
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/components/post-accordion/post-accordion.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
@use '@swisspost/design-system-styles/tokens/components';
@use '@swisspost/design-system-styles/functions/tokens';

@use '@swisspost/design-system-styles/mixins/utilities' as utility-mx;

tokens.$default-map: components.$post-accordion;

:host {
display: block;
}

// Separator styles (no top border for accordions with single item)
::slotted(post-accordion-item) {
display: block;
border-bottom: tokens.get('accordion-border-bottom-width')
Expand Down
93 changes: 1 addition & 92 deletions packages/components/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,98 +13,7 @@
<script type="module" src="/build/post-components.esm.js"></script>
<script nomodule src="/build/post-components.js"></script>
</head>
<body style="min-height: 200vh">
<post-header>
<post-logo>Homepage</post-logo>
<ul slot="audience-navigation">
<li><a href="">Privatkunden</a></li>
<li><a href="">Geschäftskunden</a></li>
<li><a href="">Behörden</a></li>
</ul>
<ul slot="meta-navigation">
<li><a href="">Über uns</a></li>
<li><a href="">Jobs</a></li>
</ul>

<button slot="post-togglebutton">= Menu</button>

<ul slot="post-language-switch">
<li>
<a href="#">DE</a>
</li>
<li>
<a href="#">FR</a>
</li>
<li>
<a href="#">IT</a>
</li>
<li>
<a href="#">EN</a>
</li>
</ul>

<h1 slot="title">Application title</h1>
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">Login</a></li>
</ul>

<post-mainnavigation caption="Hauptnavigation">
<button slot="back-button"><- Back</button>
<post-list>
<h2><a href="/privatkunden">Privatkunden</a></h2>
<!-- Link only level 1 -->
<post-list-item><a href="/briefe">Briefe</a></post-list-item>

<!-- Level 1 with megadropdown -->
<post-list-item>
<post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
<post-megadropdown>
<button slot="back-button"><- Zurück</button>
<h2><a href="">Briefe title</a></h2>
<post-list>
<h3>Briefe senden</h3>
<post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-closebutton>Schliessen</post-closebutton>
</post-megadropdown>
</post-list-item>
<post-list-item>
<post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
<post-megadropdown>
<button slot="back-button"><- Zurück</button>
<h2><a href="">Pakete title</a></h2>
<post-list>
<h3>Pakete senden</h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-closebutton>Schliessen</post-closebutton>
</post-megadropdown>
</post-list-item>
</post-list>
</post-mainnavigation>
</post-header>

<body>
<h1>Components package playground</h1>
<p class="mb-4">
Use this playground for quickly developing Stencil web-components. Run
Expand Down

0 comments on commit a2fc185

Please sign in to comment.