From 27f40d02ae09e4c6fcabb4fa598e94bc9324b65c Mon Sep 17 00:00:00 2001 From: Eric Arellano Date: Sun, 14 Jul 2024 16:06:29 -0400 Subject: [PATCH] Align borders --- src/css/_about.scss | 5 +++-- src/css/_controls.scss | 22 ++++++++++++++-------- src/css/_header.scss | 14 +++++++++++++- src/css/_scorecard.scss | 15 ++++++++------- src/css/theme/_borders.scss | 7 +++++++ src/css/theme/_colors.scss | 2 +- 6 files changed, 46 insertions(+), 19 deletions(-) create mode 100644 src/css/theme/_borders.scss diff --git a/src/css/_about.scss b/src/css/_about.scss index d94dd7b..4aaab2d 100644 --- a/src/css/_about.scss +++ b/src/css/_about.scss @@ -1,3 +1,4 @@ +@use "theme/borders"; @use "theme/breakpoints"; @use "theme/colors"; @use "theme/icons"; @@ -28,8 +29,8 @@ font-size: typography.$font-size-base; padding: spacing.$container-edge-spacing; - border: 1px solid colors.$gray-translucent; - border-radius: 10px; + border: borders.$component-border; + border-radius: borders.$border-radius; overflow-y: auto; diff --git a/src/css/_controls.scss b/src/css/_controls.scss index f822589..e44fba0 100644 --- a/src/css/_controls.scss +++ b/src/css/_controls.scss @@ -1,3 +1,4 @@ +@use "theme/borders"; @use "theme/colors"; @use "theme/spacing"; @use "theme/typography"; @@ -7,17 +8,15 @@ $label-font-size: typography.$font-size-md; $zoom-controls-top-offset: calc( 58px + spacing.$map-controls-margin-top - header.$header-height ); -$outer-border-thickness: 2px; -$option-divider: 1px solid colors.$gray-translucent; .leaflet-left .leaflet-control { margin-left: spacing.$map-controls-margin-x; } -.leaflet-control-zoom.leaflet-bar, +.leaflet-control-zoom.leaflet-bar.leaflet-control, .leaflet-control-layers.leaflet-control { - border: $outer-border-thickness solid colors.$gray-translucent; - border-radius: 4px; + border: borders.$component-border; + border-radius: borders.$border-radius; } .leaflet-control-zoom.leaflet-bar { @@ -34,7 +33,14 @@ $option-divider: 1px solid colors.$gray-translucent; justify-content: center; &:first-child { - border-bottom: $option-divider; + border-bottom: borders.$component-inner-divider; + border-top-left-radius: borders.$border-radius; + border-top-right-radius: borders.$border-radius; + } + + &:last-child { + border-bottom-left-radius: borders.$border-radius; + border-bottom-right-radius: borders.$border-radius; } } } @@ -46,7 +52,7 @@ $option-divider: 1px solid colors.$gray-translucent; #map > div.leaflet-control-container > div.leaflet-top.leaflet-right { $zoom-controls-height: calc( - (spacing.$min-touch-target * 2) + $outer-border-thickness + (spacing.$min-touch-target * 2) + borders.$border-thickness ); top: calc( $zoom-controls-top-offset + $zoom-controls-height + spacing.$element-gap @@ -68,7 +74,7 @@ $option-divider: 1px solid colors.$gray-translucent; line-height: 1; &:first-child { - border-bottom: $option-divider; + border-bottom: borders.$component-inner-divider; } display: flex; diff --git a/src/css/_header.scss b/src/css/_header.scss index 79ad565..95f44b4 100644 --- a/src/css/_header.scss +++ b/src/css/_header.scss @@ -1,3 +1,4 @@ +@use "theme/borders"; @use "theme/breakpoints"; @use "theme/colors"; @use "theme/spacing"; @@ -64,7 +65,6 @@ $header-height: calc( .choices[data-type*="select-one"] { .choices__inner { - border-radius: 10px; color: colors.$black; font-size: typography.$font-size-base; line-height: 1.2; // To vertically center the text. @@ -75,6 +75,18 @@ $header-height: calc( @include breakpoints.gt-xs { min-width: 300px; } + + border-top-left-radius: borders.$border-radius; + border-top-right-radius: borders.$border-radius; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(.is-open) { + .choices__inner { + border-bottom-left-radius: borders.$border-radius; + border-bottom-right-radius: borders.$border-radius; + } } .choices__input { diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss index dc6d228..86ecfa5 100644 --- a/src/css/_scorecard.scss +++ b/src/css/_scorecard.scss @@ -1,3 +1,4 @@ +@use "theme/borders"; @use "theme/breakpoints"; @use "theme/colors"; @use "theme/spacing"; @@ -5,8 +6,6 @@ @use "theme/typography"; @use "header"; -$border-radius: 10px; - .popup-fixed { position: fixed; transform: none !important; @@ -35,7 +34,9 @@ $border-radius: 10px; right: spacing.$map-controls-margin-x; top: calc(header.$header-height + spacing.$map-controls-margin-top); - border-radius: $border-radius; + border: borders.$component-border; + border-radius: borders.$border-radius; + box-shadow: none; color: colors.$black; p, @@ -85,10 +86,10 @@ $border-radius: 10px; background-color: colors.$white; border-left: 0; border-right: 0; - border-top: 1px solid colors.$gray-translucent; + border-top: borders.$component-inner-divider; border-bottom: 0; - border-bottom-left-radius: $border-radius; - border-bottom-right-radius: $border-radius; + border-bottom-left-radius: borders.$border-radius; + border-bottom-right-radius: borders.$border-radius; .scorecard-accordion-title { flex: 1; @@ -108,7 +109,7 @@ $border-radius: 10px; } .scorecard-accordion-content { - border-top: 1px solid colors.$gray-translucent; + border-top: borders.$component-inner-divider; padding-top: spacing.$element-gap; ul { diff --git a/src/css/theme/_borders.scss b/src/css/theme/_borders.scss new file mode 100644 index 0000000..1305342 --- /dev/null +++ b/src/css/theme/_borders.scss @@ -0,0 +1,7 @@ +@use "colors"; + +$border-radius: 5px; + +$border-thickness: 1px; +$component-border: $border-thickness solid colors.$black-translucent; +$component-inner-divider: $border-thickness solid colors.$black-translucent; diff --git a/src/css/theme/_colors.scss b/src/css/theme/_colors.scss index 3148b8d..99245a9 100644 --- a/src/css/theme/_colors.scss +++ b/src/css/theme/_colors.scss @@ -2,4 +2,4 @@ $teal: hsl(173, 72%, 46%); $white: hsl(0, 0%, 100%); $black: hsl(0, 0%, 0%); $gray: hsl(0, 0%, 25.88%); // Color comes from the logo -$gray-translucent: hsla(0, 0%, 70%, 0.7); +$black-translucent: hsla(0, 0%, 0%, 0.4);