Center text on triggers on small screen sizes

This commit is contained in:
Justin Edmund 2023-06-30 22:23:12 -07:00
parent a3a205fb5d
commit f89cdcdddd
2 changed files with 35 additions and 14 deletions

View file

@ -43,15 +43,26 @@
cursor: pointer; cursor: pointer;
} }
&.small > .value { &.small {
font-size: $font-small; & > .value {
margin: 0; font-size: $font-small;
max-width: 200px; margin: 0;
max-width: 200px;
}
@include breakpoint(tablet) { @include breakpoint(tablet) {
width: 100%; &::before {
max-width: inherit; content: '';
text-align: center; display: block;
width: calc($unit-2x - 1px);
}
& > .value {
display: block;
width: 100%;
max-width: inherit;
text-align: center;
}
} }
} }

View file

@ -7,15 +7,25 @@
gap: $unit; gap: $unit;
padding: ($unit * 1.5) $unit-2x; padding: ($unit * 1.5) $unit-2x;
&.small > span:not(.icon) { &.small {
font-size: $font-small; & > span:not(.icon) {
margin: 0; font-size: $font-small;
max-width: 200px; margin: 0;
max-width: 200px;
}
@include breakpoint(tablet) { @include breakpoint(tablet) {
width: 100%; &::before {
max-width: inherit; content: '';
text-align: center; display: block;
width: calc($unit-2x - 1px);
}
& > span:not(.icon) {
width: 100%;
max-width: inherit;
text-align: center;
}
} }
} }