Skip to content

Commit

Permalink
Fix: Updates description list styling and documentation (#392)
Browse files Browse the repository at this point in the history 
Fix: Updates description list styling and documentation
  • Loading branch information
@HeleenSG
HeleenSG authored Oct 4, 2023
1 parent 53e0949 commit eb7c5af
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 59 deletions.
142 changes: 94 additions & 48 deletions docs/documentation/components/description-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,59 +38,105 @@
<article>
<div>
<h1>Description list</h1>
</div>
</article>

<article>
<div>
<h2>Voorbeeld</h2>
<h3>Visuele weergave:</h3>
<dl>
<div>
<dt>Naam</dt>
<dd>Jane Doe</dd>
</div>

<div>
<dt>Woonplaats</dt>
<dd>Amsterdam</dd>
</div>

<div>
<dt>Aanmelddatum</dt>
<dd>03-05-2021</dd>
</div>
</dl>

<h3>Html-voorbeeld:</h3>
<pre>
<section>
<h2>Voorbeeld</h2>
<h3>Visuele weergave:</h3>
<dl>
<div>
<dt>Naam</dt>
<dd>Jane Doe</dd>
</div>

<div>
<dt>Woonplaats</dt>
<dd>Amsterdam</dd>
</div>

<div>
<dt>Aanmelddatum</dt>
<dd>03-05-2021</dd>
</div>
</dl>

<h3>Html-voorbeeld:</h3>
<pre>
<code>
&lt;dl>
&lt;div>
&lt;dt>Naam&lt;/dt>
&lt;dd>Jane Doe&lt;/dd>
&lt;/div>

&lt;div>
&lt;dt>Woonplaats&lt;/dt>
&lt;dd>Amsterdam&lt;/dd>
&lt;/div>

&lt;div>
&lt;dt>Aanmelddatum&lt;/dt>
&lt;dd>03-05-2021&lt;/dd>
&lt;/div>
&lt;/dl>
&lt;dl>
&lt;div>
&lt;dt>Naam&lt;/dt>
&lt;dd>Jane Doe&lt;/dd>
&lt;/div>

&lt;div>
&lt;dt>Woonplaats&lt;/dt>
&lt;dd>Amsterdam&lt;/dd>
&lt;/div>

&lt;div>
&lt;dt>Aanmelddatum&lt;/dt>
&lt;dd>03-05-2021&lt;/dd>
&lt;/div>
&lt;/dl>
</code>
</pre>
</section>

<h3>Benodigde bestanden</h3>
<ul>
<li><code>description-list/description-list-base</code></li>
<li>
<code>description-list/description-list-base-variables</code>
</li>
</ul>
<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="../import-styling.html">Componenten gebruiken en styling toevoegen</a>
</p>

<h3>Importeer component via NPM</h3>

<h4>CSS-voorbeeld:</h4>
<pre>
<code>
@use "@minvws/manon/description-list";
</code>
</pre>
</section>

<section id="variables">
<h2>Instelbare variabelen</h2>
<h3>CSS</h3>
<p>Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.</p>
<pre>
<code>
:root {
/* Description-list */
--description-list-width: ;
--description-list-max-width: ;

/* Description list item */
--description-list-item-odd-background-color: ;
--description-list-item-gap: ;
--description-list-item-flex-direction: ;
--description-list-item-white-space: ;
--description-list-item-padding: ;
--description-list-border-width: ;
--description-list-border-style: ;
--description-list-border-color: ;

/* Description list item title (dt) */
--description-list-item-title-font-weight: ;
--description-list-item-title-background-color: ;
--description-list-item-title-text-color: ;
--description-list-item-title-padding: ;
--description-list-item-title-width: ;

/* Description list item title (dd) */
--description-list-item-data-background-color: ;
--description-list-item-data-text-color: ;
--description-list-item-data-padding: ;
--description-list-item-data-font-weight: ;
--description-list-item-data-width: ;
}
</code>
</pre>
</section>
</div>
</article>
</main>
Expand Down
11 changes: 7 additions & 4 deletions manon/description-list-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
--description-list-max-width: 100%;

/* Description list item */
--description-list-item-odd-background-color: var(
--application-base-tint-1-background-color,
#f0f0f0
);
--description-list-item-odd-background-color: transparent;
--description-list-item-gap: var(--application-base-gap);
--description-list-item-flex-direction: row;
--description-list-item-white-space: initial;
--description-list-item-padding: 0.25rem;
--description-list-border-width: 0 0 1px 0;
--description-list-border-style: solid;
--description-list-border-color: #d4d4d4;

/* Description list item title (dt) */
--description-list-item-title-font-weight: var(
Expand All @@ -25,6 +25,7 @@
--application-base-tint-1-text-color
);
--description-list-item-title-padding: 0;
--description-list-item-title-width: 15rem;

/* Description list item title (dd) */
--description-list-item-data-background-color: var(
Expand All @@ -34,4 +35,6 @@
--description-list-item-title-text-color
);
--description-list-item-data-padding: 0;
--description-list-item-data-font-weight: bold;
--description-list-item-data-width: auto;
}
31 changes: 24 additions & 7 deletions manon/description-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@

$breakpoint: 24rem !default;

main div dl,
main section dl,
main article dl,
dl {
%dl-styling {
width: var(--description-list-width, 100%);
max-width: var(--description-list-max-width);
margin: 0;
Expand All @@ -20,6 +17,9 @@ dl {
padding: var(--description-list-item-padding);
flex-wrap: wrap;
width: 100%;
border-width: var(--description-list-border-width);
border-style: var(--description-list-border-style);
border-color: var(--description-list-border-color);

&:nth-child(odd) {
background-color: var(--description-list-item-odd-background-color);
Expand All @@ -32,25 +32,42 @@ dl {
word-break: break-word;
box-sizing: border-box;
margin: 0;
width: calc(50% - (var(--description-list-item-gap) / 2));
}

dt {
font-weight: var(--description-list-item-title-font-weight, bolder);
font-weight: var(--description-list-item-title-font-weight);
background-color: var(--description-list-item-title-background-color);
color: var(--description-list-item-title-text-color);
padding: var(--description-list-item-title-padding);
width: var(--description-list-item-title-width);
}

dd {
background-color: var(--description-list-item-data-background-color);
color: var(--description-list-item-data-text-color);
padding: var(--description-list-item-data-padding);
font-weight: var(--description-list-item-data-font-weight);
width: var(--description-list-item-data-width);
}

@media (min-width: $breakpoint) {
div {
grid-template-columns: 1fr 2fr;
flex-direction: var(
--description-list-item-flex-direction-after-breakpoint
);
}
}
}

main div,
main section,
main article {
form dl,
dl {
@extend %dl-styling;
}
}

dl {
@extend %dl-styling;
}

0 comments on commit eb7c5af

Please sign in to comment.