ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update sass reset and componets to use modern css and internal mixins to replace typey.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-01-25 10:05:44 +01:00
commit 3fdb351a8a
9 changed files with 285 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

45
assets/sass/components/box/_box.scss
View file

@ -19,32 +19,17 @@
.box,
%box {
@include margin-bottom(1);
// Add vertical rhythm margins.
@include margin-block(1);
@include padding(.5);
border: 5px solid var(--color-border);
padding: 1em;
// 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 {
margin: 0;
}
// Sass compiles this nested ruleset's selector into:
// .box:focus, .box:hover, .box.is-focus, .box--is-focus,
// %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
//
// The ".box--is-focus" class is a stray class we don't actually want, but we
// deal with it because we often want a placeholder selector like
// %box--is-focus in case we need to use @extends later.
//
// The ".is-" part of the class name is a Drupal 8 BEM naming convention that
// indicates the "focus" is a _state_ of the "box" component.
&:focus,
&:hover,
&.is-focus,
&--is-focus {
border-color: var(--color-text);
&__title,
.title {
margin-top: 0;
}
// Sass compiles this to the selector: .box--highlight, %box--highlight {}
@ -52,6 +37,22 @@
// the "highlight" is a _modifier_, creating a new variation of the standard
// "box" component.
&--highlight {
border-color: var(--color-link);
border-color: var(--color-highlight);
}
&--inverted {
@extend %link-inverted;
background: var(--color-border);
color: var(--color-text-bg);
}
> * {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}

17
assets/sass/components/button/_button.scss
View file

@ -15,12 +15,12 @@ button,
[type='reset'],
[type='submit'] {
@extend %button--disabled;
@include typeface(headings);
@include margin-right(.75);
@include margin-bottom(.75);
@include padding(.2 1);
// 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;
// Improve usability and consistency of cursor style between image-type `input` and others.
@ -28,7 +28,7 @@ button,
color: var(--color-button-text);
background-color: var(--color-button);
border: 0;
border-radius: $m-radius;
border-radius: var(--radius-m);
&:hover,
&:focus,
@ -44,10 +44,10 @@ button,
.button,
%button {
&--small {
@include font-size(xs);
@include margin-right(.3);
@include margin-bottom(.3);
@include padding(.1 .5);
font-size: var(--fs-xs);
}
&--alt {
@ -79,18 +79,9 @@ button,
// The disabled variation should always go last, so that it overrides any
// other variations.
%button--disabled[disabled] {
// Re-set default cursor for disabled elements.
cursor: default;
color: var(--color-button-disabled);
@extend %disabled;
background-color: var(--color-grey-extra-light);
border: 1px solid var(--color-button-disabled);
background-image: none;
text-shadow: none;
&:hover,
&:focus,
&:active {
// Override any link underlines and color changes.
color: var(--color-button-disabled);
}
}

2
assets/sass/components/cookieconsent/_cookieconsent.scss
View file

@ -1,13 +1,13 @@
// Cookieconsent
.cookieconsent {
@include font-size(s);
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;

3
assets/sass/components/divider/_divider.scss
View file

@ -4,7 +4,8 @@
.divider,
%divider {
@include margin(1 0);
// Add vertical rhythm margins.
@include margin-block(1);
border: 0;
border-top: 1px solid var(--color-border);

4
assets/sass/components/header/_header.scss
View file

@ -9,10 +9,10 @@
// Wrapping link for logo.
&__logo {
@include respond-to(s) {
margin: 0 $zen-gutters 0 0;
margin: 0 var(--gutters) 0 0;
@include rtl() {
margin: 0 0 0 $zen-gutters;
margin: 0 0 0 var(--gutters);
}
}
}

3
assets/sass/components/highlight-mark/_highlight-mark.scss
View file

@ -7,6 +7,5 @@
.highlight-mark,
%highlight-mark {
color: var(--color-mark-highlight);
// Remove background highlighting from <mark> in normalize.
background-color: transparent;
background-color: var(--color-mark-bg);
}

20
assets/sass/components/inline-links/_inline-links.scss
View file

@ -1,20 +0,0 @@
// Inline links
//
// A list of links that are inline with each other.
.inline-links,
%inline-links {
padding: 0;
&__item {
display: inline;
list-style-type: none;
padding: 0 1em 0 0;
@include rtl() {
// Bug in Safari causes display: inline to fail.
display: inline-block;
padding: 0 0 0 1em;
}
}
}

4
assets/sass/components/list-straight-left/_list-straight-left.scss
View file

@ -9,10 +9,10 @@
display: table-row;
&::before {
@include font-size(s);
@include padding-right(.5);
display: table-cell;
content: '\2022';
font-size: var(--fs-s);
}
}
}
@ -27,10 +27,10 @@
counter-increment: table-ol;
&::before {
@include font-size(s);
@include padding-right(.5);
display: table-cell;
content: counter(table-ol) '.';
font-size: var(--fs-s);
text-align: right;
}
}

4
assets/sass/components/responsive-video/_responsive-video.scss
View file

@ -10,7 +10,7 @@
.responsive-video,
%responsive-video {
position: relative;
padding-bottom: (9 / 16) * 100%; // 16:9 aspect ratio
padding-bottom: calc(9 / 16 * 100%); // 16:9 aspect ratio
padding-top: 25px; // Height of video controls
height: 0;
@ -27,6 +27,6 @@
}
&--4-3 {
padding-bottom: (3 / 4) * 100%; // 4:3 aspect ratio
padding-bottom: calc(3 / 4 * 100%); // 4:3 aspect ratio
}
}