mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-30 14:41:40 -07:00
8a0e3a1293* Remove un-needed state and useEffect vars * Add initial Accordion UI to side panel - abstract out Indicators to separate component - add snapshot test - define new indicators in EXPLORE copy - intl copy to AreaDetail component * Make side panel indicators styling match design * Rename export IndicatorCategory -> CategoryCard * Add disadvangted dots to category and indicators - add new Category component - add new DisadvantageDot component - make copy corrections - comment out send feedback link in side panel * Integrate MapLegend's dot into component - change color to 'blue-warm-70v' - update map stroke to 'blue-warm-70v' * Add new indicator names from BE - add abbreviations and use key in json file to decode
59 lines
No EOL
1.2 KiB
SCSS
59 lines
No EOL
1.2 KiB
SCSS
@use '../../styles/design-system.scss' as *;
|
|
@import "../utils.scss";
|
|
|
|
@mixin indicator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@include u-padding-bottom(3);
|
|
&:last-child {
|
|
border-bottom: none;
|
|
@include u-padding-bottom(0);
|
|
}
|
|
|
|
.indicatorRow {
|
|
display: flex;
|
|
|
|
@media screen and (max-width: $mobileBreakpoint) {
|
|
flex: 1 0 40%;
|
|
align-self: inherit;
|
|
padding-left: 3rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.indicatorName {
|
|
flex: 0 1 77%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
@include typeset('sans', '2xs', 2);
|
|
@include u-text('bold');
|
|
|
|
.indicatorDesc {
|
|
@include typeset('sans', '3xs', 2);
|
|
@include u-text('normal');
|
|
max-width: 12rem;
|
|
@include u-margin-top(0);
|
|
@media screen and (max-width: 1024px) {
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicatorValue {
|
|
margin-left: 2.2rem;
|
|
|
|
.indicatorSuperscript {
|
|
top: -0.2em
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Indicator box styles
|
|
.indicatorBoxMain {
|
|
@include indicator;
|
|
}
|
|
|
|
.disadvantagedIndicator {
|
|
@include indicator;
|
|
@include u-text('blue-warm-70v');
|
|
} |