Convert to css style comments, part 2.
This commit is contained in:
Fredrik Jonsson
parent
2eee4d3c24
commit
9f8b1eaf18
16 changed files with 234 additions and 201 deletions
|
|
@ -1,4 +1,4 @@
|
|||
// Anchor
|
||||
/* Anchor */
|
||||
|
||||
.anchor,
|
||||
%anchor {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Box
|
||||
/* Box */
|
||||
|
||||
.box {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
padding: var(--spacing-xs);
|
||||
border: 5px solid var(--color-border);
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
|
||||
// Make sure headings etc. also gets inverted.
|
||||
/* Make sure headings etc. also gets inverted. */
|
||||
* {
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
// Button
|
||||
/* Button */
|
||||
|
||||
.button,
|
||||
%button,
|
||||
[type='button'],
|
||||
[type='submit'] {
|
||||
@extend %button--disabled;
|
||||
// Some styles don't apply to <a> links since they are inline elements by default.
|
||||
|
||||
/* 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;
|
||||
padding: .2rem 1rem;
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
|
||||
/* Improve usability and consistency of cursor style between image-type `input` and others. */
|
||||
cursor: pointer;
|
||||
color: var(--color-button-text);
|
||||
text-shadow: var(--color-button) 0 1px 0;
|
||||
|
|
@ -23,7 +25,7 @@
|
|||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
/* Override any link underlines and color changes. */
|
||||
text-decoration: none;
|
||||
color: var(--color-button-text-hover);
|
||||
text-shadow: var(--color-button-hover) 0 1px 0;
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Add button variations here.
|
||||
/* Add button variations here. */
|
||||
.button,
|
||||
%button {
|
||||
&--small {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ A simple cards style. */
|
|||
.cards,
|
||||
%cards {
|
||||
@extend %grid-group;
|
||||
// Add vertical rhythm margins.
|
||||
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Cookieconsent
|
||||
/* Cookieconsent */
|
||||
|
||||
.cookieconsent {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.disabled,
|
||||
%disabled {
|
||||
// Re-set default cursor for disabled elements.
|
||||
/* Re-set default cursor for disabled elements. */
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
/* Override any link underlines and color changes. */
|
||||
color: var(--color-button-disabled);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Branding footer
|
||||
/* Branding footer */
|
||||
|
||||
.footer,
|
||||
%footer {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@
|
|||
|
||||
display: grid;
|
||||
gap: var(--grid-group-gap);
|
||||
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
||||
// stylelint-disable-next-line function-name-case
|
||||
|
||||
/* 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(--grid-group-column-min), 100%), 1fr));
|
||||
|
||||
&--fill {
|
||||
// stylelint-disable-next-line function-name-case
|
||||
/* stylelint-disable-next-line function-name-case */
|
||||
grid-template-columns: repeat(auto-fill, minmax(Min(var(--grid-group-column-min), 100%), 1fr));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
// Branding header
|
||||
/* Branding header */
|
||||
|
||||
.header,
|
||||
%header {
|
||||
--header-gap: var(--spacing-s);
|
||||
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
||||
// stylelint-disable-next-line function-name-case
|
||||
|
||||
/* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
|
||||
/* stylelint-disable-next-line function-name-case */
|
||||
padding-block: Min(var(--gutters), var(--spacing-m));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -16,23 +17,23 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
// Wrapping link for logo.
|
||||
/* Wrapping link for logo. */
|
||||
&__logo {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
// Logo image.
|
||||
/* Logo image. */
|
||||
&__logo-image {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// The name of the website.
|
||||
/* The name of the website. */
|
||||
&__site-name {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// The link around the name of the website.
|
||||
/* The link around the name of the website. */
|
||||
&__site-link {
|
||||
&:link,
|
||||
&:visited {
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Wrapper for any blocks placed in the header region.
|
||||
/* Wrapper for any blocks placed in the header region. */
|
||||
&__region {
|
||||
@media (min-width: 666px) {
|
||||
margin-inline-start: auto;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Inline icons.
|
||||
/* Inline icons. */
|
||||
|
||||
.icon-inline,
|
||||
%icon-inline {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Language selector
|
||||
/* Language selector */
|
||||
|
||||
.language-selector {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Lists with a straight left margin.
|
||||
/* Lists with a straight left margin. */
|
||||
|
||||
.ul-straight-left,
|
||||
%ul-straight-left {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Messages
|
||||
/* Messages */
|
||||
|
||||
.message,
|
||||
%message {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Style for meta content.
|
||||
/* Style for meta content. */
|
||||
|
||||
.meta,
|
||||
%meta {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ is available. */
|
|||
%pager {
|
||||
@extend %flex-inline;
|
||||
@extend %link-nav;
|
||||
// Add vertical rhythm margins.
|
||||
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
justify-content: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ default 16:9 one. */
|
|||
|
||||
.responsive-video,
|
||||
%responsive-video {
|
||||
--aspect-ratio: 9 / 16; // 16:9 aspect ratio
|
||||
--aspect-ratio: 9 / 16; /* 16:9 aspect ratio */
|
||||
|
||||
position: relative;
|
||||
padding-block-end: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
|
||||
padding-block-start: 25px; // Height of video controls
|
||||
padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */
|
||||
padding-block-start: 25px; /* Height of video controls */
|
||||
height: 0;
|
||||
|
||||
iframe {
|
||||
|
|
@ -29,6 +29,6 @@ default 16:9 one. */
|
|||
}
|
||||
|
||||
&--4-3 {
|
||||
--aspect-ratio: 3 / 4; // 4:3 aspect ratio
|
||||
--aspect-ratio: 3 / 4; /* 4:3 aspect ratio */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue