74 lines
1.3 KiB
SCSS
74 lines
1.3 KiB
SCSS
@use 'button';
|
|
|
|
@mixin repButton{
|
|
opacity:0;
|
|
transition: {
|
|
property:opacity,background-color;
|
|
duration: var(--revealTime);
|
|
};
|
|
@extend %text-button;
|
|
font-family:pictos;
|
|
}
|
|
%fieldsetStyling{
|
|
.repitem{
|
|
> input:not([type='checkbox']){
|
|
width:100%;
|
|
}
|
|
.headed-textarea,
|
|
.description{
|
|
grid-column:1/-1;
|
|
}
|
|
}
|
|
.repcontainer{
|
|
display:grid;
|
|
gap:var(--grid-gap);
|
|
}
|
|
.repeating-container{
|
|
display:grid;
|
|
grid-template-areas:'header';
|
|
align-self:start;
|
|
> .header{
|
|
grid-area:header;
|
|
}
|
|
&:is(:hover,:focus-within,:focus){
|
|
.repcontrol_edit:after,
|
|
.repcontrol-button{
|
|
opacity:1;
|
|
}
|
|
}
|
|
}
|
|
.repcontrol_edit{
|
|
visibility:hidden;
|
|
text-transform:none;
|
|
&:after{
|
|
@include repButton;
|
|
visibility:visible;
|
|
content:'p';
|
|
}
|
|
}
|
|
.repcontrol-button{
|
|
grid-area:header;
|
|
align-self:start;
|
|
~ .repcontrol{
|
|
display:contents;
|
|
.repcontrol_edit{
|
|
grid-area:header;
|
|
align-self:start;
|
|
justify-self:end;
|
|
display:flex;
|
|
float:none;
|
|
}
|
|
.repcontrol_add{
|
|
display:none !important;
|
|
}
|
|
}
|
|
}
|
|
.repcontrol-button--add{
|
|
justify-self:start;
|
|
@include repButton;
|
|
&:before{
|
|
font-family:pictos;
|
|
content:'&';
|
|
}
|
|
}
|
|
} |