CSS: keep space for foldable icon on cell title (#68363)

This commit is contained in:
Thomas Jund 2022-08-25 11:26:15 +02:00
parent ff478ef5dc
commit 482dc309ea
9 changed files with 10 additions and 11 deletions

View File

@ -349,7 +349,6 @@ $topmessage-alt :
> div > h2:first-child {
background-color: $orange;
padding-left: 1rem;
padding-right: 2rem;
padding-top: calc(1.25rem + 2px);
padding-bottom: 1.25rem;
&::after {

View File

@ -281,7 +281,9 @@ main {
> h2 {
flex-grow: 1;
padding: 0;
flex-basis: 50%;
padding-top: 0;
padding-bottom: 0;
padding-left: .33em;
}

View File

@ -746,11 +746,14 @@ div.familyinfoscell {
div.cell {
&.foldable {
> div > h2:first-child {
padding-right: 2em;
&::after {
font-family: FontAwesome;
content: $cell-close-foldable-icon;
position: absolute;
right: 1em;
width: 1em;
text-align: right;
}
cursor: pointer;
}

View File

@ -202,7 +202,6 @@ div.title label {
padding-bottom: 0;
}
div.cell.foldable > div > h2:first-child {
padding-right: 1.25rem;
&::after {
top: 0.5em;
}

View File

@ -230,9 +230,9 @@ main {
// foldable option
div.cell.foldable {
> div > h2:first-child {
padding-right: 3em;
&::after {
box-sizing: content-box;
width: 1em;
text-align: center;
padding: 0.3em;
border-radius: 50%;

View File

@ -433,11 +433,6 @@ div#content div.wcsformsofcategorycell {
}
}
&.foldable {
@media screen and ($max-mobile-viewport) {
h2 {
padding-right: 50px; // for folding arrow
}
}
h2::before {
// folding moved to ::before as ::after is used for
// underline dash.

View File

@ -248,7 +248,6 @@ div#receipt-intro {
div.section.foldable > h2:first-child,
div.cell.foldable > div > h2:first-child {
&::after {
width: 1em;
text-align: center;
color: $light-red;
}

View File

@ -229,11 +229,12 @@ div.backofficesubmissioncell div.links-list h4 {
div.cell {
&.foldable {
> div > h2:first-child {
padding-right: 1em;
&::after {
font-family: FontAwesome;
content: "\f106"; /* angle-up */
position: absolute;
right: 1em;
right: 0;
}
cursor: pointer;
}

View File

@ -544,6 +544,7 @@ div#services > ul > li,
right: auto;
left: auto;
transform: scaleY(1.3);
width: auto;
}
}