Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OSOE-678: Prettier auto fix #98

Merged
merged 1 commit into from
Nov 20, 2023
Merged

OSOE-678: Prettier auto fix #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion Lombiq.BaseTheme.Samples/Assets/Styles/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@
object-fit: cover;
}

.name { display: none; }
.name {
display: none;
}
}

// NEXT STATION: Assets/Styles/general/_navigation.scss
2 changes: 1 addition & 1 deletion Lombiq.BaseTheme.Samples/Assets/Styles/abstracts/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ $grid-breakpoints: (
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px // #spell-check-ignore-line
xxl: 1400px,
);

// NEXT STATION: Assets/Styles/abstracts/_native-variables.scss
6 changes: 4 additions & 2 deletions Lombiq.BaseTheme.Samples/Assets/Styles/general/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
background: var(--color-background-menu);

.menuWidget {
&__dropdown, &__topLevel .nav-link {
&__dropdown,
&__topLevel .nav-link {
// Another mixin from Lombiq.BaseTheme, for styling all states (e.g. visited) of an anchor element.
@include on-event($self: true) {
color: var(--color-foreground-menu);
Expand All @@ -27,7 +28,8 @@
}
}

&__link_label:first-child, .dropdown-divider + &__link_label {
&__link_label:first-child,
.dropdown-divider + &__link_label {
// Make the first labels bold so they look like titles.
font-weight: bold;
}
Expand Down
3 changes: 2 additions & 1 deletion Lombiq.BaseTheme.Samples/Assets/Styles/pages/blog-post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
flex-direction: row;
}

.taxonomy-tag-term, .taxonomy-term {
.taxonomy-tag-term,
.taxonomy-term {
font-style: italic;
}

Expand Down
112 changes: 85 additions & 27 deletions Lombiq.BaseTheme/Assets/Styles/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@
$breakpoint-values: $breakpoint-values,
$horizontal: $horizontal,
$vertical: $vertical,
$negative: $negative);
$negative: $negative
);
}

/// Creates a horizontal or vertical (or both) padding based on a breakpoint-value dictionary
Expand All @@ -120,7 +121,8 @@
$breakpoint-values: $breakpoint-values,
$horizontal: $horizontal,
$vertical: $vertical,
$negative: $negative);
$negative: $negative
);
}

@mixin text-size($text-size-level: 1) {
Expand All @@ -147,22 +149,42 @@
/// @param {Map} $spacing-directions - The dictionary where the breakpoints are keys and the values are padding/margin
/// directions.
@mixin generate-spacing(
$spacing-sizes: (xs: $spacing-xs, sm: $spacing-sm, md: $spacing-md, lg: $spacing-lg, xl: $spacing-xl),
$spacing-directions: (top: top, bottom: bottom, left: left, right: right, hor: left right, ver: top bottom, all: top bottom left right)) {
$spacing-sizes: (
xs: $spacing-xs,
sm: $spacing-sm,
md: $spacing-md,
lg: $spacing-lg,
xl: $spacing-xl,
),
$spacing-directions: (
top: top,
bottom: bottom,
left: left,
right: right,
hor: left right,
ver: top bottom,
all: top bottom left right,
)
) {
// Mapping size maps to size names, analogous to Bootstrap size names.
@each $spacing-size, $spacing-values in $spacing-sizes {
@each $breakpoint, $size in $spacing-values { // Mapping spacing values to breakpoints.
@include media-breakpoint-up($breakpoint) { // Applying breakpoint.
@each $breakpoint, $size in $spacing-values {
// Mapping spacing values to breakpoints.
@include media-breakpoint-up($breakpoint) {
// Applying breakpoint.
// Mapping directions to sides, e.g. top = top, hor(izontal) = left + right. #spell-check-ignore-line
@each $spacing-direction, $spacing-sides in $spacing-directions {
.u-pd-#{$spacing-direction}-#{$spacing-size} { // Padding utility class name with direction & size.
@each $spacing-side in $spacing-sides { // Iterating through each side in the direction map.
.u-pd-#{$spacing-direction}-#{$spacing-size} {
// Padding utility class name with direction & size.
@each $spacing-side in $spacing-sides {
// Iterating through each side in the direction map.
padding-#{$spacing-side}: $size; // Applying spacing value to the current side.
word-break: break-word;
}
}

.u-mg-#{$spacing-direction}-#{$spacing-size} { // Margin utility class name with direction and size.
.u-mg-#{$spacing-direction}-#{$spacing-size} {
// Margin utility class name with direction and size.
@each $spacing-side in $spacing-sides {
margin-#{$spacing-side}: $size;
}
Expand All @@ -189,45 +211,81 @@
}

@mixin padding-gutter($vertical-multiplier: $default-vertical-multiplier) {
@include media-breakpoint-only(xs) { padding: calc(var(--gutter-x-small) * #{$vertical-multiplier}) var(--gutter-x-small); }
@include media-breakpoint-only(xs) {
padding: calc(var(--gutter-x-small) * #{$vertical-multiplier}) var(--gutter-x-small);
}

@include media-breakpoint-only(sm) { padding: calc(var(--gutter-small) * #{$vertical-multiplier}) var(--gutter-small); }
@include media-breakpoint-only(sm) {
padding: calc(var(--gutter-small) * #{$vertical-multiplier}) var(--gutter-small);
}

@include media-breakpoint-only(md) { padding: calc(var(--gutter-medium) * #{$vertical-multiplier}) var(--gutter-medium); }
@include media-breakpoint-only(md) {
padding: calc(var(--gutter-medium) * #{$vertical-multiplier}) var(--gutter-medium);
}

@include media-breakpoint-only(lg) { padding: calc(var(--gutter-large) * #{$vertical-multiplier}) var(--gutter-large); }
@include media-breakpoint-only(lg) {
padding: calc(var(--gutter-large) * #{$vertical-multiplier}) var(--gutter-large);
}

@include media-breakpoint-only(xl) { padding: calc(var(--gutter-x-large) * #{$vertical-multiplier}) var(--gutter-x-large); }
@include media-breakpoint-only(xl) {
padding: calc(var(--gutter-x-large) * #{$vertical-multiplier}) var(--gutter-x-large);
}

@include media-breakpoint-up(xxl) { padding: calc(var(--gutter-xx-large) * #{$vertical-multiplier}) var(--gutter-xx-large); }
@include media-breakpoint-up(xxl) {
padding: calc(var(--gutter-xx-large) * #{$vertical-multiplier}) var(--gutter-xx-large);
}
}

@mixin margin-gutter($vertical-multiplier: $default-vertical-multiplier) {
@include media-breakpoint-only(xs) { margin: calc(var(--gutter-x-small) * #{$vertical-multiplier}) var(--gutter-x-small); }
@include media-breakpoint-only(xs) {
margin: calc(var(--gutter-x-small) * #{$vertical-multiplier}) var(--gutter-x-small);
}

@include media-breakpoint-only(sm) { margin: calc(var(--gutter-small) * #{$vertical-multiplier}) var(--gutter-small); }
@include media-breakpoint-only(sm) {
margin: calc(var(--gutter-small) * #{$vertical-multiplier}) var(--gutter-small);
}

@include media-breakpoint-only(md) { margin: calc(var(--gutter-medium) * #{$vertical-multiplier}) var(--gutter-medium); }
@include media-breakpoint-only(md) {
margin: calc(var(--gutter-medium) * #{$vertical-multiplier}) var(--gutter-medium);
}

@include media-breakpoint-only(lg) { margin: calc(var(--gutter-large) * #{$vertical-multiplier}) var(--gutter-large); }
@include media-breakpoint-only(lg) {
margin: calc(var(--gutter-large) * #{$vertical-multiplier}) var(--gutter-large);
}

@include media-breakpoint-only(xl) { margin: calc(var(--gutter-x-large) * #{$vertical-multiplier}) var(--gutter-x-large); }
@include media-breakpoint-only(xl) {
margin: calc(var(--gutter-x-large) * #{$vertical-multiplier}) var(--gutter-x-large);
}

@include media-breakpoint-up(xxl) { margin: calc(var(--gutter-xx-large) * #{$vertical-multiplier}) var(--gutter-xx-large); }
@include media-breakpoint-up(xxl) {
margin: calc(var(--gutter-xx-large) * #{$vertical-multiplier}) var(--gutter-xx-large);
}
}

@mixin apply-gutter($property, $multiplier: 1) {
@include media-breakpoint-only(xs) { #{$property}: calc(#{$multiplier} * var(--gutter-x-small)); }
@include media-breakpoint-only(xs) {
#{$property}: calc(#{$multiplier} * var(--gutter-x-small));
}

@include media-breakpoint-only(sm) { #{$property}: calc(#{$multiplier} * var(--gutter-small)); }
@include media-breakpoint-only(sm) {
#{$property}: calc(#{$multiplier} * var(--gutter-small));
}

@include media-breakpoint-only(md) { #{$property}: calc(#{$multiplier} * var(--gutter-medium)); }
@include media-breakpoint-only(md) {
#{$property}: calc(#{$multiplier} * var(--gutter-medium));
}

@include media-breakpoint-only(lg) { #{$property}: calc(#{$multiplier} * var(--gutter-large)); }
@include media-breakpoint-only(lg) {
#{$property}: calc(#{$multiplier} * var(--gutter-large));
}

@include media-breakpoint-only(xl) { #{$property}: calc(#{$multiplier} * var(--gutter-x-large)); }
@include media-breakpoint-only(xl) {
#{$property}: calc(#{$multiplier} * var(--gutter-x-large));
}

@include media-breakpoint-up(xxl) { #{$property}: calc(#{$multiplier} * var(--gutter-xx-large)); }
@include media-breakpoint-up(xxl) {
#{$property}: calc(#{$multiplier} * var(--gutter-xx-large));
}
}

@mixin padding-top-gutter($multiplier: 1) {
Expand Down
24 changes: 18 additions & 6 deletions Lombiq.BaseTheme/Assets/Styles/general/_general.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,29 @@ body {
}

body > .layoutElement {
@include media-breakpoint-only(xs) { padding: 0 calc(var(--page-margin-x-small) - var(--gutter-x-small)); }
@include media-breakpoint-only(xs) {
padding: 0 calc(var(--page-margin-x-small) - var(--gutter-x-small));
}

@include media-breakpoint-only(sm) { padding: 0 calc(var(--page-margin-small) - var(--gutter-small)); }
@include media-breakpoint-only(sm) {
padding: 0 calc(var(--page-margin-small) - var(--gutter-small));
}

@include media-breakpoint-only(md) { padding: 0 calc(var(--page-margin-medium) - var(--gutter-medium)); }
@include media-breakpoint-only(md) {
padding: 0 calc(var(--page-margin-medium) - var(--gutter-medium));
}

@include media-breakpoint-only(lg) { padding: 0 calc(var(--page-margin-large) - var(--gutter-large)); }
@include media-breakpoint-only(lg) {
padding: 0 calc(var(--page-margin-large) - var(--gutter-large));
}

@include media-breakpoint-only(xl) { padding: 0 calc(var(--page-margin-x-large) - var(--gutter-x-large)); }
@include media-breakpoint-only(xl) {
padding: 0 calc(var(--page-margin-x-large) - var(--gutter-x-large));
}

@include media-breakpoint-up(xxl) { padding: 0 calc(var(--page-margin-xx-large) - var(--gutter-xx-large)); }
@include media-breakpoint-up(xxl) {
padding: 0 calc(var(--page-margin-xx-large) - var(--gutter-xx-large));
}
}

.menuWidget {
Expand Down