53 lines
1011 B
SCSS
53 lines
1011 B
SCSS
|
|
|
|
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|