Initial version
This commit is contained in:
commit
ed5653a7fc
211 changed files with 11043 additions and 0 deletions
71
themes/zen/assets/sass/components/box/_box.scss
Normal file
71
themes/zen/assets/sass/components/box/_box.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
// Box
|
||||
//
|
||||
// A simple box style.
|
||||
//
|
||||
// A block is often styled as a box. However, this design component is
|
||||
// not applied to any blocks by default; it is used as an example of how to
|
||||
// build and document a CSS component.
|
||||
//
|
||||
// "box" is the name of our component, so we define a `.box` class that we can
|
||||
// apply to any HTML element that needs the box styling. We also provide a
|
||||
// `%box` placeholder selector so that we can easily extend the basic box
|
||||
// component with `@extend %box;`.
|
||||
//
|
||||
// Take a look at the source code for this component for more information about
|
||||
// building a good component.
|
||||
//
|
||||
// :hover - The hover/focus styling.
|
||||
// .box--highlight - The "highlight" box variant.
|
||||
|
||||
.box,
|
||||
%box {
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
@include padding(.5);
|
||||
border: 5px solid var(--color-border);
|
||||
|
||||
// Sass compiles this to the selector: .box__title, %box__title {}
|
||||
// The "__" (double underscore) is part of a BEM naming convention that
|
||||
// indicates the "title" is an _element_ of (a piece of) the "box" component.
|
||||
&__title,
|
||||
.title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Sass compiles this to the selector: .box--highlight, %box--highlight {}
|
||||
// The "--" (double dash) is part of a BEM naming convention that indicates
|
||||
// the "highlight" is a _modifier_, creating a new variation of the standard
|
||||
// "box" component.
|
||||
&--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
&--fit {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&--gutter {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
|
||||
&--inverted {
|
||||
@extend %link-inverted;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
|
||||
// Make sure headings etc. also gets inverted.
|
||||
* {
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
themes/zen/assets/sass/components/button/_button.scss
Normal file
98
themes/zen/assets/sass/components/button/_button.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
// Button
|
||||
//
|
||||
// In addition to the default styling of `<button>` and
|
||||
// `<input type="submit|image|reset|button">` elements, the `.button` class and
|
||||
// its variants can apply buttons styles to various elements (like an `<a>`
|
||||
// link).
|
||||
//
|
||||
// :hover - Hover styling.
|
||||
// :active - Depressed button styling.
|
||||
|
||||
.button,
|
||||
%button,
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
@extend %button--disabled;
|
||||
// Some styles don't apply to <a> links since they are inline elements by default.
|
||||
display: inline-block;
|
||||
font-family: var(--ff-headings);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: .2rem 1rem;
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
cursor: pointer;
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
border: 1px solid var(--color-button);
|
||||
border-radius: var(--radius-s);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
text-decoration: none;
|
||||
color: var(--color-button-text-hover);
|
||||
background-color: var(--color-button-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Add button variations here.
|
||||
.button,
|
||||
%button {
|
||||
&--small {
|
||||
font-size: var(--fs-xs);
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
padding: .2rem .75rem;
|
||||
}
|
||||
|
||||
&--alt {
|
||||
color: var(--color-button-text-hover);
|
||||
background-color: var(--color-button-hover);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
&--outline {
|
||||
color: var(--color-button);
|
||||
background-color: var(--color-button-text);
|
||||
border-color: var(--color-button);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
&--shadow {
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 5px 1px var(--color-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 2px 2px 5px 1px var(--color-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The disabled variation should always go last, so that it overrides any
|
||||
// other variations.
|
||||
%button--disabled[disabled] {
|
||||
@extend %disabled;
|
||||
background-color: var(--color-grey-extra-light);
|
||||
border: 1px solid var(--color-button-disabled);
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
45
themes/zen/assets/sass/components/cards/_cards.scss
Normal file
45
themes/zen/assets/sass/components/cards/_cards.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// Cards
|
||||
//
|
||||
// A simple cards style.
|
||||
|
||||
.cards,
|
||||
%cards {
|
||||
@extend %grid-group;
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
}
|
||||
|
||||
.card,
|
||||
%card {
|
||||
@include padding(.5);
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
&--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
&--featured {
|
||||
grid-row: span 2;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
&--gutter {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
|
||||
&--inverted {
|
||||
@extend %link-inverted;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
themes/zen/assets/sass/components/center/_center.scss
Normal file
12
themes/zen/assets/sass/components/center/_center.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.grid-center {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.margin-center {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// Clearfix
|
||||
//
|
||||
// Allows the bottom of an element to extend to the bottom of all floated child
|
||||
// elements. See http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
|
||||
.clearfix,
|
||||
%clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// Cookieconsent
|
||||
|
||||
.cookieconsent {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: var(--color-warning);
|
||||
background-color: var(--color-warning-bg);
|
||||
border-top: 4px solid var(--color-warning-border);
|
||||
font-size: var(--fs-s);
|
||||
text-align: center;
|
||||
transform: translateY(100vh);
|
||||
transition: all 130ms ease-out;
|
||||
z-index: 99;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&--accept {
|
||||
border-color: var(--color-status);
|
||||
}
|
||||
|
||||
&--decline {
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
}
|
||||
|
||||
.js-cookieconsent-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
14
themes/zen/assets/sass/components/disabled/_disabled.scss
Normal file
14
themes/zen/assets/sass/components/disabled/_disabled.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.disabled,
|
||||
%disabled {
|
||||
// Re-set default cursor for disabled elements.
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
color: var(--color-button-disabled);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
16
themes/zen/assets/sass/components/divider/_divider.scss
Normal file
16
themes/zen/assets/sass/components/divider/_divider.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// Divider
|
||||
//
|
||||
// Can be used as an `<hr>`, an empty `<div>` or as a container.
|
||||
|
||||
.divider,
|
||||
%divider {
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
|
||||
// If used as a container, add a top margin to the first child.
|
||||
> :first-child {
|
||||
@include margin-top(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.flex-group,
|
||||
%flex-group {
|
||||
$gap: 1;
|
||||
|
||||
@include gap($gap);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&--2 > * {
|
||||
@include flex(2, $gap);
|
||||
}
|
||||
|
||||
&--3 > * {
|
||||
@include flex(3, $gap);
|
||||
}
|
||||
|
||||
&--4 > * {
|
||||
@include flex(4, $gap);
|
||||
}
|
||||
|
||||
&--5 > * {
|
||||
@include flex(5, $gap);
|
||||
}
|
||||
|
||||
&--6 > * {
|
||||
@include flex(6, $gap);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
.flex-inline,
|
||||
%flex-inline {
|
||||
--gap: .5rem;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap);
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
|
||||
&__item,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&--inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
12
themes/zen/assets/sass/components/footer/_footer.scss
Normal file
12
themes/zen/assets/sass/components/footer/_footer.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// Branding footer
|
||||
|
||||
.footer,
|
||||
%footer {
|
||||
padding-block: var(--gutters);
|
||||
background-color: var(--color-footer-bg);
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.grid-group,
|
||||
%grid-group {
|
||||
--column-min: 200px;
|
||||
--gap: 1.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: var(--gap);
|
||||
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
||||
// stylelint-disable-next-line function-name-case
|
||||
grid-template-columns: repeat(auto-fit, minmax(Min(var(--column-min), 100%), 1fr));
|
||||
|
||||
&--fill {
|
||||
// stylelint-disable-next-line function-name-case
|
||||
grid-template-columns: repeat(auto-fill, minmax(Min(var(--column-min), 100%), 1fr));
|
||||
}
|
||||
|
||||
&--100 {
|
||||
--column-min: 100px;
|
||||
}
|
||||
|
||||
&--150 {
|
||||
--column-min: 150px;
|
||||
}
|
||||
|
||||
&--200 {
|
||||
--column-min: 200px;
|
||||
}
|
||||
|
||||
&--250 {
|
||||
--column-min: 250px;
|
||||
}
|
||||
|
||||
&--300 {
|
||||
--column-min: 300px;
|
||||
}
|
||||
|
||||
&--350 {
|
||||
--column-min: 350px;
|
||||
}
|
||||
|
||||
&--400 {
|
||||
--column-min: 400px;
|
||||
}
|
||||
|
||||
&--500 {
|
||||
--column-min: 500px;
|
||||
}
|
||||
|
||||
&--600 {
|
||||
--column-min: 600px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.grid-stack,
|
||||
%grid-stack {
|
||||
display: grid;
|
||||
|
||||
& > * {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
}
|
||||
51
themes/zen/assets/sass/components/header/_header.scss
Normal file
51
themes/zen/assets/sass/components/header/_header.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
// Branding header
|
||||
|
||||
.header,
|
||||
%header {
|
||||
padding-block: var(--gutters);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gutters);
|
||||
background-color: var(--color-header-bg);
|
||||
|
||||
@include respond-to(s) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
// Wrapping link for logo.
|
||||
&__logo {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
// Logo image.
|
||||
&__logo-image {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// The name of the website.
|
||||
&__site-name {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// The link around the name of the website.
|
||||
&__site-link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for any blocks placed in the header region.
|
||||
&__region {
|
||||
@include respond-to(s) {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
themes/zen/assets/sass/components/hidden/_hidden.scss
Normal file
29
themes/zen/assets/sass/components/hidden/_hidden.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// Hidden
|
||||
//
|
||||
// Hide elements from all users. Compare to the visually-hidden component.
|
||||
//
|
||||
// Used for elements which should not be immediately displayed to any user. An
|
||||
// example would be a collapsible fieldset that will be expanded with a click
|
||||
// from a user.
|
||||
//
|
||||
// For anything you want to hide on page load when JavaScript is enabled, use
|
||||
// the `.js-hidden` class.
|
||||
|
||||
.hidden,
|
||||
%hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js-hidden,
|
||||
%js-hidden {
|
||||
html.js & {
|
||||
@extend %hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.nojs-hidden,
|
||||
%nojs-hidden {
|
||||
html.nojs & {
|
||||
@extend %hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Highlight mark
|
||||
//
|
||||
// The "new" or "updated" marker. This is a very thin component. A front-end
|
||||
// developer may choose to delete this component and just style the `<mark>`
|
||||
// element directly.
|
||||
|
||||
.highlight-mark,
|
||||
%highlight-mark {
|
||||
color: var(--color-mark-highlight);
|
||||
background-color: var(--color-mark-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// Inline icons.
|
||||
|
||||
.icon-inline,
|
||||
%icon-inline {
|
||||
.icon-link {
|
||||
opacity: 0;
|
||||
transition: all 130ms ease-in;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
.icon-link {
|
||||
opacity: .3;
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// Language selector
|
||||
|
||||
.language-selector {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.language-icon {
|
||||
@include margin-inline-end(.5);
|
||||
fill: var(--color-text);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
// Lists with a straight left margin.
|
||||
|
||||
.ul-straight-left,
|
||||
%ul-straight-left {
|
||||
display: table;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
& > li {
|
||||
display: table-row;
|
||||
|
||||
&::before {
|
||||
@include padding-inline-end(.5);
|
||||
display: table-cell;
|
||||
content: '\2981';
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ol-straight-left,
|
||||
%ol-straight-left {
|
||||
display: table;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
& > li {
|
||||
display: table-row;
|
||||
counter-increment: table-ol;
|
||||
|
||||
&::before {
|
||||
@include padding-inline-end(.5);
|
||||
display: table-cell;
|
||||
content: counter(table-ol) '.';
|
||||
font-size: var(--fs-s);
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ul-straight-left--off,
|
||||
%ul-straight-left--off {
|
||||
display: block;
|
||||
list-style: inherit;
|
||||
|
||||
& > li {
|
||||
display: list-item;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline;
|
||||
padding: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
themes/zen/assets/sass/components/messages/_messages.scss
Normal file
37
themes/zen/assets/sass/components/messages/_messages.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// Messages
|
||||
|
||||
.message,
|
||||
%message {
|
||||
padding: .5rem;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
width: 95%;
|
||||
|
||||
&.status {
|
||||
background-color: var(--color-status-bg);
|
||||
color: var(--color-status);
|
||||
outline-color: var(--color-status);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
outline-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
outline-color: var(--color-error);
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
animation: 2s linear infinite outline-highlight;
|
||||
}
|
||||
|
||||
@keyframes outline-highlight {
|
||||
50% {
|
||||
outline-width: .3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
themes/zen/assets/sass/components/meta/_meta.scss
Normal file
8
themes/zen/assets/sass/components/meta/_meta.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// Style for meta content.
|
||||
|
||||
.meta,
|
||||
%meta {
|
||||
font-family: var(--ff-headings);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--color-text-meta);
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Do not print
|
||||
//
|
||||
// Removes an element from the print version of the web site.
|
||||
//
|
||||
// By importing these CSS rules in a file marked as media "all", we allow these
|
||||
// print rules to be aggregated with other stylesheets, for improved front-end
|
||||
// performance.
|
||||
|
||||
.print-none,
|
||||
%print-none {
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
// Responsive video
|
||||
//
|
||||
// Using a wrapper div, embedded videos can be made responsive so that their
|
||||
// intrinsic aspect ratio is preserved at any screen width. The
|
||||
// `responsive-video__embed` class is optional if the embed is an `iframe`.
|
||||
//
|
||||
// .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
|
||||
// default 16:9 one.
|
||||
|
||||
.responsive-video,
|
||||
%responsive-video {
|
||||
--aspect-ratio: 9 / 16; // 16:9 aspect ratio
|
||||
|
||||
position: relative;
|
||||
padding-bottom: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
|
||||
padding-top: 25px; // Height of video controls
|
||||
height: 0;
|
||||
|
||||
iframe {
|
||||
@extend %responsive-video__embed;
|
||||
}
|
||||
|
||||
&__embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--4-3 {
|
||||
--aspect-ratio: 3 / 4; // 4:3 aspect ratio
|
||||
}
|
||||
}
|
||||
13
themes/zen/assets/sass/components/spacing/_spacing.scss
Normal file
13
themes/zen/assets/sass/components/spacing/_spacing.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@each $name, $space in $spacing {
|
||||
.mt--#{$name} {
|
||||
@include margin-block-start($space);
|
||||
}
|
||||
|
||||
.mb--#{$name} {
|
||||
@include margin-block-end($space);
|
||||
}
|
||||
|
||||
.mtb--#{$name} {
|
||||
@include margin-block($space);
|
||||
}
|
||||
}
|
||||
61
themes/zen/assets/sass/components/tables/_tables.scss
Normal file
61
themes/zen/assets/sass/components/tables/_tables.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.zebra-table,
|
||||
%zebra-table {
|
||||
--cell-padding: .5rem;
|
||||
|
||||
@include respond-to-max(s) {
|
||||
--cell-padding: .3rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: var(--cell-padding);
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
background-color: var(--color-row-header);
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--color-row-odd);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: var(--color-row-even);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.responsive-table,
|
||||
%responsive-table {
|
||||
--gap: .5rem;
|
||||
|
||||
@include respond-to-max(s) {
|
||||
th {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td {
|
||||
display: grid;
|
||||
gap: var(--gap);
|
||||
grid-template-columns: 12ch auto;
|
||||
|
||||
&::before {
|
||||
content: attr(aria-label) ':';
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-block-start: var(--gap);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-block-end: var(--gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
themes/zen/assets/sass/components/tags/_tags.scss
Normal file
8
themes/zen/assets/sass/components/tags/_tags.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.tags,
|
||||
%tags {
|
||||
ul {
|
||||
@extend %flex-inline;
|
||||
@extend %flex-inline--inline;
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// Visually hidden
|
||||
//
|
||||
// Make an element visually hidden, but accessible to screen readers, etc.
|
||||
|
||||
.visually-hidden,
|
||||
%visually-hidden {
|
||||
&:not(:focus, :active) {
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue