added mobile styling for View Details toggle for card
This commit is contained in:
parent
360d9e4b6f
commit
2ec819e113
|
@ -23,7 +23,8 @@
|
|||
margin-bottom: calc(12rem / 16);
|
||||
}
|
||||
|
||||
.details {
|
||||
.details,
|
||||
.mobileOpenCardToggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
@ -33,10 +34,22 @@
|
|||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.mobileOpenCardToggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card[open] .shortDescription {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.longDescription {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card[open] .longDescription {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.card[open] .dropDownIcon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
@ -48,3 +61,19 @@
|
|||
.dropDownIcon {
|
||||
fill: var(--blue-2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.mobileOpenCardToggle {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.details .dropDownIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,11 +32,10 @@ export const MiniEventCard: React.FC<Props> = ({
|
|||
</div>
|
||||
<p className={styles.shortDescription}>{short}</p>
|
||||
</div>
|
||||
|
||||
<p className={styles.details}>View details {dropDownIcon}</p>
|
||||
<div className={styles.longDescription}>{description}</div>
|
||||
<p className={styles.mobileOpenCardToggle}>View details</p>
|
||||
</summary>
|
||||
|
||||
<div>{description}</div>
|
||||
</details>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue