Skip to content

Commit

Permalink
Merge pull request #153 from conedevelopment/fix-stylelint
Browse files Browse the repository at this point in the history 
Fix CS in SASS code
  • Loading branch information
@iamgergo
iamgergo authored Sep 25, 2023
2 parents 9999fa3 + ad43582 commit 03ff95c
Show file tree
Hide file tree
Showing 49 changed files with 1,973 additions and 1,970 deletions.
100 changes: 50 additions & 50 deletions resources/sass/component/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,61 @@
@use 'sprucecss/scss/spruce' as *;

.alert {
align-items: center;
border: 1px solid;
border-left: 0.4rem solid;
border-radius: config('border-radius-sm', $display);
display: flex;
gap: spacer('m');
justify-content: space-between;
line-height: config('line-height-md', $typography);
padding: 0.65em 1em;

@each $name, $value in map.get($colors, 'alert') {
@at-root .alert--#{$name} {
background-color: color.scale($value, $lightness: 95%);
color: color.scale($value, $lightness: -30%);
}

@at-root .alert--#{$name} .alert__close {
background-color: color.scale($value, $lightness: -30%);
color: color.scale($value, $lightness: 90%);
}
}

@each $name, $value in map.get($colors, 'alert') {
@at-root [data-theme-mode='dark'] .alert--#{$name} {
background-color: transparent;
border-color: color.scale($value, $lightness: -30%);
color: color('text');
}
}

&__caption {
@include layout-stack('xxs');
}

&__close {
--dimension: 1.5rem;
@include clear-btn;
@include transition;
align-items: center;
block-size: var(--dimension);
border: 1px solid;
border-left: 0.4rem solid;
border-radius: config('border-radius-sm', $display);
display: flex;
flex-shrink: 0;
inline-size: var(--dimension);
justify-content: center;
gap: spacer('m');
justify-content: space-between;
line-height: config('line-height-md', $typography);
padding: 0.65em 1em;

@each $name, $value in map.get($colors, 'alert') {
@at-root .alert--#{$name} {
background-color: color.scale($value, $lightness: 95%);
color: color.scale($value, $lightness: -30%);
}

@at-root .alert--#{$name} .alert__close {
background-color: color.scale($value, $lightness: -30%);
color: color.scale($value, $lightness: 90%);
}
}

@each $name, $value in map.get($colors, 'alert') {
@at-root [data-theme-mode='dark'] .alert--#{$name} {
background-color: transparent;
border-color: color.scale($value, $lightness: -30%);
color: color('text');
}
}

&:hover,
&:focus {
opacity: 0.75;
&__caption {
@include layout-stack('xxs');
}

svg {
--dimension: 0.85rem;
block-size: var(--dimension);
inline-size: var(--dimension);
&__close {
--dimension: 1.5rem;
@include clear-btn;
@include transition;
align-items: center;
block-size: var(--dimension);
border-radius: config('border-radius-sm', $display);
display: flex;
flex-shrink: 0;
inline-size: var(--dimension);
justify-content: center;

&:hover,
&:focus {
opacity: 0.75;
}

svg {
--dimension: 0.85rem;
block-size: var(--dimension);
inline-size: var(--dimension);
}
}
}
}
26 changes: 13 additions & 13 deletions resources/sass/component/_auth-form.scss
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
@use 'sprucecss/scss/spruce' as *;

.auth-form {
@include layout-stack('s');
margin-block: auto;
@include layout-stack('s');
margin-block: auto;

&__title {
font-weight: 700;
}
&__title {
font-weight: 700;
}

.or-separator {
margin-block-start: spacer('m');
}
.or-separator {
margin-block-start: spacer('m');
}
}

.form-group-stacked,
.social-logins {
@include layout-stack('s');
@include layout-stack('s');
}

.form-label {
&--space-between {
display: flex;
justify-content: space-between;
}
&--space-between {
display: flex;
justify-content: space-between;
}
}
167 changes: 84 additions & 83 deletions resources/sass/component/_block-navigation.scss
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,103 @@
@use 'sprucecss/scss/spruce' as *;

.block-navigation {
@include a11y-card-link('.block-navigation__toggle', true);
display: flex;
flex-direction: column;
gap: spacer('s');
position: relative;
z-index: 1;

&__title {
align-items: center;
color: color('heading');
@include a11y-card-link('.block-navigation__toggle', true);
display: flex;
font-size: config('font-size-base', $typography);
font-weight: 700;
justify-content: space-between;
margin-block: 0;
}

&__toggle {
&[aria-expanded='true'] {
svg {
rotate: 180deg;
}
flex-direction: column;
gap: spacer('s');
position: relative;
z-index: 1;

&__title {
align-items: center;
color: color('heading');
display: flex;
font-size: config('font-size-base', $typography);
font-weight: 700;
justify-content: space-between;
margin-block: 0;
}

svg {
pointer-events: none;
}
}

&__menu {
&:not(.is-open) {
display: none;
}
&__toggle {
&[aria-expanded='true'] {
svg {
rotate: 180deg;
}
}

&.is-open {
display: block;
svg {
pointer-events: none;
}
}

ul {
@include clear-list;
}
&__menu {
&:not(.is-open) {
display: none;
}

a {
align-items: center;
color: color('text');
display: flex;
gap: 0.75em;
padding-block: 0.35em;
padding-inline: 0.75em;
position: relative;
text-decoration: none;

&:hover:not([aria-current='page']) {
&::before {
background-color: color('primary-lightest');
&.is-open {
display: block;
}
}

&::before {
border-radius: config('border-radius-sm', $display);
content: '';
inset-block: 0;
inset-inline: 0;
position: absolute;
z-index: -1;
}

&[aria-current='page'] {
color: hsl(0deg 0% 100%);

&::before {
background-color: color('primary');

ul {
@include clear-list;
}

svg {
color: hsl(0deg 0% 100%);
a {
align-items: center;
color: color('text');
display: flex;
gap: 0.75em;
padding-block: 0.35em;
padding-inline: 0.75em;
position: relative;
text-decoration: none;

&:hover:not([aria-current='page']) {
&::before {
background-color: color('primary-lightest');
}
}

&::before {
border-radius: config('border-radius-sm', $display);
content: '';
inset-block: 0;
inset-inline: 0;
position: absolute;
z-index: -1;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
&[aria-current='page'] {
color: hsl(0deg 0% 100%);

&::before {
background-color: color('primary');
}

svg {
color: hsl(0deg 0% 100%);
}
}

svg {
--dimension: 1.15em;
block-size: var(--dimension);
color: color('primary');
inline-size: var(--dimension);
}
}
}

svg {
--dimension: 1.15em;
block-size: var(--dimension);
color: color('primary');
inline-size: var(--dimension);
}
}

&--breakout {
a {
padding-block: 0.35em;
padding-inline: 0;
&--breakout {
a {
padding-block: 0.35em;
padding-inline: 0;

&::before {
inset-inline: -0.75rem -0.35em;
&::before {
inset-inline: -0.75rem -0.35em;
}
}
}
}
}
}
}
Loading

0 comments on commit 03ff95c

Please sign in to comment.