mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 21:01:16 -07:00
ce6f7974fb* Add script to un-nest the translated es.json file * Update unit tests * Update i18n IDs to conformity * Update READMEs * Make ordinal values in sidepanel i18n compliant * remove redudant IDs in en.json * Add oridinal i18n to IndicatorValue sub-text * Update plurals in sidepanel - Disadvantaged in 1 category - Disadvantaged in 5 categories - At or above 1 threshold - At or above 10 thresholds * Add en.json link to GHA * Enable FormatJS linter rules to catch i18n issues * Testing if commit hash will render in PR message * Testing if commit hash will render in PR message * Enable allow repeats * Try to add run command * remove attempts to link to en.json * Define COMMIT HASH env variable * Move commit hash to deploy job
111 lines
No EOL
2.2 KiB
SCSS
111 lines
No EOL
2.2 KiB
SCSS
@use '../../styles/design-system.scss' as *;
|
|
@import "../utils.scss";
|
|
|
|
@mixin indicator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@include u-padding-top(1.5);
|
|
@include u-padding-bottom(1.5);
|
|
|
|
.indicatorRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
@media screen and (max-width: $mobileBreakpoint) {
|
|
flex: 1 0 40%;
|
|
align-self: inherit;
|
|
padding-left: 3rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.indicatorName {
|
|
// flex: 0 1 77%;
|
|
flex-basis: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
@include typeset('sans', '2xs', 2);
|
|
@include u-text('medium');
|
|
|
|
.indicatorDesc {
|
|
@include typeset('sans', '3xs', 2);
|
|
@include u-text('thin');
|
|
max-width: 12rem;
|
|
@include u-margin-top(0);
|
|
@media screen and (max-width: 1024px) {
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicatorValueCol {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.indicatorValueRow {
|
|
display: flex;
|
|
align-self: end;
|
|
|
|
.indicatorValue {
|
|
margin-left: 2.2rem;
|
|
}
|
|
|
|
.indicatorArrow {
|
|
margin-bottom: -.375rem;
|
|
|
|
img {
|
|
max-width: none;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
|
|
}
|
|
.unavailable {
|
|
opacity: .2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicatorValueSubText{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: flex-end;
|
|
text-align: right;
|
|
@include u-width(8);
|
|
@include typeset('sans', '3xs', 2);
|
|
@include u-text('thin');
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
//Indicator box styles
|
|
.indicatorBoxMain {
|
|
@include indicator;
|
|
}
|
|
|
|
.disadvantagedIndicator {
|
|
@include indicator;
|
|
@include u-bg('blue-warm-10');
|
|
|
|
// A darker bg color:
|
|
// background-color: #D2DAE3;
|
|
|
|
// Add a border
|
|
// border: 1px solid #1A4480;
|
|
|
|
margin: 0 -20px 1px -20px;
|
|
@include u-padding-left(2.5);
|
|
@include u-padding-right(2.5);
|
|
|
|
|
|
// Overwrite indicator mixin with bolder fonts for disadv. indicator
|
|
.indicatorRow {
|
|
.indicatorName {
|
|
@include u-text('bold');
|
|
|
|
.indicatorDesc {
|
|
@include u-text('normal');
|
|
}
|
|
}
|
|
}
|
|
} |