Kalenderdag
CSS-classes for a simple calendar day.
<div class="calendar-day">
<!-- innehåll -->
</div>
10
11
12
<div class="example-wrapper" data-test="default">
<div class="example-day">
<div class="calendar-day">10</div>
</div>
<div class="example-day">
<div class="calendar-day">11</div>
</div>
<div class="example-day">
<div class="calendar-day">12</div>
</div>
</div>
Modifiers
calendar-day--highlight
Highlights the day, e.g. for use when highlighting today's day.
10
--highlight
11
--highlight, --selected
12
--highlight, --disabled<div data-test="highlight">
<div class="example-wrapper">
<div class="example-day">
<div class="calendar-day calendar-day--highlight">10</div>
</div>
<div><code>--highlight</code></div>
</div>
<div class="example-wrapper">
<div class="example-day">
<div
class="calendar-day calendar-day--highlight calendar-day--selected"
>
11
</div>
</div>
<div><code>--highlight</code>, <code>--selected</code></div>
</div>
<div class="example-wrapper">
<div class="example-day">
<div
class="calendar-day calendar-day--highlight calendar-day--disabled"
>
12
</div>
</div>
<div><code>--highlight</code>, <code>--disabled</code></div>
</div>
</div>
calendar-day--selected
Marks the day as selected.
10
--selected
11
--selected, --highlight
12
--selected, --disabled<div data-test="selected">
<div class="example-wrapper">
<div class="example-day">
<div class="calendar-day calendar-day--selected">10</div>
</div>
<div><code>--selected</code></div>
</div>
<div class="example-wrapper">
<div class="example-day">
<div
class="calendar-day calendar-day--selected calendar-day--highlight"
>
11
</div>
</div>
<div><code>--selected</code>, <code>--highlight</code></div>
</div>
<div class="example-wrapper">
<div class="example-day">
<div
class="calendar-day calendar-day--selected calendar-day--disabled"
>
12
</div>
</div>
<div><code>--selected</code>, <code>--disabled</code></div>
</div>
</div>
calendar-day--disabled
Marks the day as disabled.
10
--disabled
11
--disabled, --highlight
12
--disabled, --selected<div data-test="disabled">
<div class="example-wrapper">
<div class="example-day">
<div class="calendar-day calendar-day--disabled">10</div>
</div>
<div><code>--disabled</code></div>
</div>
<div class="example-wrapper">
<div class="example-day">
<div
class="calendar-day calendar-day--disabled calendar-day--highlight"
>
11
</div>
</div>
<div><code>--disabled</code>, <code>--highlight</code></div>
</div>
<div class="example-wrapper">
<div class="example-day">
<div
class="calendar-day calendar-day--disabled calendar-day--selected"
>
12
</div>
</div>
<div><code>--disabled</code>, <code>--selected</code></div>
</div>
</div>
Pseudoklasser
:hover (calendar-day--hover)
10
<div class="example-wrapper" data-test="hover">
<div class="example-day">
<div class="calendar-day calendar-day--hover">10</div>
</div>
</div>
:active (calendar-day--active)
10
<div class="example-wrapper" data-test="active">
<div class="example-day">
<div class="calendar-day calendar-day--active">10</div>
</div>
</div>
Övrigt
Länkar
Användargränsnitt, Förvaltningsdokumentation - Startpunkt för komponent
Designriktlinjer självbetjäning
Designriktlinjer interna system