WIP 02: style adjustments to match eh22 styleguide

This commit is contained in:
kritzl 2025-02-15 13:00:05 +01:00
commit a4e83ec21a
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
5 changed files with 86 additions and 69 deletions

View file

@ -8,52 +8,44 @@
top: 0;
bottom: -1px;
width: 2rem;
left: -(@margin-default);
left: -(@margin-default + 0.25rem);
@media @screen_max-md {
display: none;
}
a {
.fontello-double();
.icon-right-bold();
.icon-left-bold();
.display-flex();
.flex-direction();
.justify-content();
position: absolute;
inset: 0;
width: @margin-default;
height: 100%;
background-color: @ini_button_background;
border: solid 1px @ini_button_background;
border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_button_color;
background-color: transparent;
border: solid 1px var(--color-shade-4);
border-right-style: none;
border-radius: 0.5rem 0 0 0.5rem;
color: var(--color-shade-4);
text-decoration: none;
transition: @transition color, @transition background-color, @transition border-color;
&::before,
&::after {
width: 100%;
opacity: .6;
font-size: 1rem;
line-height: 1;
text-align: center;
margin: 0;
transition: @transition opacity;
}
&::before {
opacity: 1;
font-size: 1.25rem;
content: '';
display: block;
position: absolute;
inset: 0.3rem;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
mask-image: url('img/arrow_left.svg');
}
&:hover,
&:focus,
&:active {
background-color: @ini_button_color;
border-color: @ini_button_background;
color: @ini_button_background;
border-color: var(--color-white);
color: var(--color-white);
text-decoration: none;
* {
@ -61,43 +53,25 @@
text-decoration: none;
}
&::after {
opacity: 0;
}
--local-primary: var(--color-primary);
filter: @dropshadow;
transition: @neonflicker;
}
}
/* + + + toggle out + + + */
.wide-content & {
left: 0;
a {
background-color: @ini_button_background;
border-color: @ini_button_background;
border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius
border-radius: 0 0.5rem 0.5rem 0;
border-style: solid;
border-left-style: none;
&::before {
opacity: .6;
font-size: 1rem;
}
&::after {
opacity: 1;
font-size: 1.25rem;
}
&:hover,
&:focus,
&:active {
background-color: @ini_button_color;
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
mask-image: url('img/arrow_right.svg');
}
}
}