what2watch/scss/plugins/stack/_plugin.scss

53 lines
1,011 B
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
// Stacking elements one of top of another
.stack,
.stack .toggle {
//@extend %stack;
margin-top: 0;
margin-bottom: 0;
display: block;
width: 100%;
text-align: left;
border-radius: 0;
}
// This is in this way to allow for individual stack items
// Because if it was border-radius: $picnic-radius $picnic-radius 0 0;
// then they would all behave as last-child
.stack:first-child,
.stack:first-child .toggle {
border-top-left-radius: $picnic-radius;
border-top-right-radius: $picnic-radius;
}
.stack:last-child,
.stack:last-child .toggle {
border-bottom-left-radius: $picnic-radius;
border-bottom-right-radius: $picnic-radius;
}
// To avoid the double border of input and textarea
input,
textarea,
select {
&.stack {
transition: border-bottom 0 ease 0;
border-bottom-width: 0;
&:last-child {
border-bottom-width: 1px;
}
&:focus + input,
&:focus + textarea,
&:focus + select {
border-top-color: $picnic-primary;
}
}
}