WIP 02: style adjustments to match eh22 styleguide
This commit is contained in:
parent
9402a254c6
commit
a4e83ec21a
5 changed files with 86 additions and 69 deletions
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue