diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue index 40156faed..a50a81082 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue +++ b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue @@ -1,20 +1,15 @@ diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss index 86a997e78..f88657686 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss @@ -4,7 +4,7 @@ &-wrapper { font-size: 14px; font-family: fonts.$ui; - border-bottom: 1px solid var( --main-border-bottom ); + box-shadow: var( --main-box-shadow ); background-color: var( --main-background ); color: var( --main-color ); } diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss index dfc8cd95e..997f000f9 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss @@ -11,9 +11,9 @@ $breakpoint: 800px; display: flex; flex-direction: column; background: var( --fallback-background ); + box-shadow: var( --main-box-shadow ); @media ( min-width: $breakpoint ) { - border-bottom: 1px solid var( --main-border-bottom ); height: auto; min-height: 250px; padding: 4px; @@ -70,6 +70,7 @@ $breakpoint: 800px; flex: 1 1 auto; display: flex; flex-direction: column; + background: var( --fallback-message-background ); border: 4px solid var( --fallback-message-border ); border-radius: 4px; padding: 8px 0; diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss index bd970253d..518b8c959 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss @@ -28,6 +28,7 @@ $form-width: 300px !default; overflow-y: hidden; margin-right: 30px; padding: 0 0 10px; + background: var( --message-background ); border: 5px solid var( --message-border ); border-radius: 9px; } diff --git a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss index 2f1ef94e0..62276dc5d 100644 --- a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss +++ b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss @@ -1,4 +1,5 @@ @use '../../../../components/DonationForm/SubComponents/SelectCustomAmount'; +@use 'radio-input'; $height: 23px !default; @@ -12,23 +13,16 @@ $height: 23px !default; to keep the styles in sync */ &-select-custom-amount { + position: relative; width: 50%; + height: $height; padding: 0 4px; cursor: pointer; &-radio { - /* Unclear if we need this or what it does. Probably browser fixes for text in focused elements? */ - &:checked + .wmde-banner-select-custom-amount-input-container { - border: 0 none; - outline: 0 none; - } + z-index: 2; - /* This style must be in sync with the "radio button shape" style of SelectGroup */ - &:checked + .wmde-banner-select-custom-amount-input-container::before { - border: 1px solid var( --select-group-bubble-radio-border-checked ); - box-shadow: 0 0 0 1px var( --select-group-bubble-radio-background-checked ); - background-color: var( --select-group-bubble-radio-background-checked ); - } + @include radio-input.styles( $left: 11px ); } &.value-entered, @@ -48,18 +42,6 @@ $height: 23px !default; background-color: var( --select-group-bubble-background ); border-radius: 8px; border: 1px solid var( --select-group-bubble-border ); - - /* This style must be in sync with the "radio button shape" style of SelectGroup */ - &::before { - height: 10px; - width: 10px; - top: 50%; - left: 0; - margin: -5px 0 0 4px; - background: var( --select-group-bubble-radio-background ); - border-radius: 50%; - border: 2px solid #848282; - } } &-euro-symbol { diff --git a/src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles.scss b/src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles.scss index caa8f3700..fe3b06a7c 100644 --- a/src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles.scss +++ b/src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles.scss @@ -1,4 +1,5 @@ @use '../../variables/breakpoints'; +@use 'radio-input'; $height: 23px !default; @@ -6,6 +7,7 @@ $margin-left: -6px; $border-radius: 8px; $font-size: 1.01em; $padding: 0 0 0 3px; +$check-size: 10px; .wmde-banner { &-select-group { @@ -27,6 +29,7 @@ $padding: 0 0 0 3px; } &.active label { + background: var( --select-group-bubble-background-active ); border: 2px solid var( --select-group-bubble-border-active ); } } @@ -37,34 +40,10 @@ $padding: 0 0 0 3px; font-size: $font-size; margin-left: $margin-left; padding: $padding; - - /* This creates the "radio button" shape */ - &::before { - height: 10px; - width: 10px; - margin: -5px 0 0 8px; - background: var( --select-group-bubble-radio-background ); - border-radius: 50%; - border: 2px solid var( --select-group-bubble-radio-border ); - } } &-input { - display: none; - - /* Unclear if we need this or what it does. Probably browser fixes for text in focused elements? */ - &:checked + .wmde-banner-select-group-label { - border: 0 none; - outline: 0 none; - border-radius: 0; - } - - /* This creates the "selected radio button" shape */ - &:checked + .wmde-banner-select-group-label::before { - border: 1px solid var( --select-group-bubble-radio-border-checked ); - box-shadow: 0 0 0 1px var( --select-group-bubble-radio-background-checked ); - background-color: var( --select-group-bubble-radio-background-checked ); - } + @include radio-input.styles; } } } diff --git a/src/themes/Treedip/DonationForm/BubbleForm/radio-input.scss b/src/themes/Treedip/DonationForm/BubbleForm/radio-input.scss new file mode 100644 index 000000000..f64e1d8d7 --- /dev/null +++ b/src/themes/Treedip/DonationForm/BubbleForm/radio-input.scss @@ -0,0 +1,46 @@ +@use 'sass:math'; + +$size: 10px; + +@mixin styles( $left: 6px ) { + appearance: none; + position: absolute; + top: 50%; + margin-top: -( math.div( $size, 2 ) ); + width: $size; + height: $size; + border-radius: 50%; + display: block; + box-sizing: border-box; + cursor: pointer; + transition: background 150ms ease-out; + margin-right: 10px; + left: $left; + background: var( --select-group-bubble-radio-background ); + border: 2px solid var( --select-group-bubble-radio-border ); + + &::before { + position: absolute; + top: 50%; + margin-top: -( math.div( $size, 2 ) ); + width: $size; + height: $size; + border-radius: 50%; + content: ''; + display: flex; + left: 50%; + margin-left: -( math.div( $size, 2 ) ); + background-color: var( --select-group-bubble-radio-checkmark ); + transform: scale( 0 ); + transition: transform 150ms ease-out; + } + + &:checked { + border-color: var( --select-group-bubble-radio-border-checked ); + background-color: var( --select-group-bubble-radio-background-checked ); + + &::before { + transform: scale( 0.5 ); + } + } +} diff --git a/src/themes/Treedip/FallbackBanner/LargeFooter.scss b/src/themes/Treedip/FallbackBanner/LargeFooter.scss index 535a2fe3e..5c91acc6e 100644 --- a/src/themes/Treedip/FallbackBanner/LargeFooter.scss +++ b/src/themes/Treedip/FallbackBanner/LargeFooter.scss @@ -25,7 +25,7 @@ height: 0; border-style: solid; border-width: 6px 6px 0; - border-color: var( --fallback-footer-border ) transparent transparent transparent; + border-color: var( --fallback-message-border ) transparent transparent transparent; } } diff --git a/src/themes/Treedip/swatches/dark.scss b/src/themes/Treedip/swatches/dark.scss index 80114f597..d086d9652 100644 --- a/src/themes/Treedip/swatches/dark.scss +++ b/src/themes/Treedip/swatches/dark.scss @@ -6,14 +6,17 @@ $grey150: #dddddd; $grey200: #bbbbbb; $grey300: #b7b7b7; $grey500: #808080; -$grey600: #747474; -$grey700: #202122; +$grey600: #777777; +$grey650: #383838; +$grey700: #292929; +$grey800: #1f1f1f; $red100: #ff8888; $red600: #990a00; $blue600: #4465a7; $blue700: #2a4b8d; +$blue800: #20303f; @mixin swatch( $slider: false, @@ -26,10 +29,13 @@ $blue700: #2a4b8d; $soft-close: false, $fallback-banner: false, ) { - --main-background: #{$grey700}; - --main-color: #{$grey100}; + --main-background: #{$grey800}; + --main-color: #{$white}; --main-title-line-background: #{$grey100}; --main-border-bottom: #{$grey600}; + --main-box-shadow: none; + + --message-background: #{$grey700}; --message-border: #{$red600}; --color-error: #{$red100}; @@ -42,19 +48,19 @@ $blue700: #2a4b8d; --input-selection-selected-background: #{$red600}; --input-selection-selected-color: #{$white}; - --animated-highlight-color: #{$grey700}; + --animated-highlight-color: #{$white}; /* stylelint-disable */ --animated-highlight-gradient: linear-gradient( 270deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0 ) 50%, - rgba( 255, 222, 103 ) 50%, - rgba( 255, 222, 103 ) 100% + rgba( 42, 75, 141 ) 50%, + rgba( 42, 75, 141 ) 100% ); /* stylelint-enable */ @if $slider { - --slider-pagination-background: #{$grey700}; + --slider-pagination-background: #{$grey800}; --slider-pagination-border: #{$white}; --slider-pagination-background-active: #{$red600}; --slider-pagination-border-active: #{$red600}; @@ -85,12 +91,15 @@ $blue700: #2a4b8d; @if $select-group-bubble { --select-group-bubble-color: #{$grey150}; --select-group-bubble-background: #{$grey700}; - --select-group-bubble-border: #{$grey300}; + --select-group-bubble-background-active: #{$blue800}; + --select-group-bubble-border: #{$grey650}; --select-group-bubble-border-active: #{$blue700}; + --select-group-bubble-radio-background: #{$white}; - --select-group-bubble-radio-border: #{$grey500}; + --select-group-bubble-radio-border: #{$grey600}; --select-group-bubble-radio-background-checked: #{$blue700}; --select-group-bubble-radio-border-checked: #{$white}; + --select-group-bubble-radio-checkmark: #{$blue700}; } @if $select-group-button { @@ -120,13 +129,13 @@ $blue700: #2a4b8d; } @if $fallback-banner { - --fallback-background: #{$grey700}; - --fallback-border: #{$grey100}; + --fallback-background: #{$grey800}; + --fallback-border: #{$red600}; --fallback-button-background: #{$blue700}; --fallback-button-color: #{$white}; --fallback-button-background-hover: #{$blue600}; + --fallback-message-background: #{$grey700}; --fallback-message-border: #{$red600}; --fallback-uof-link: #{$grey200}; - --fallback-footer-border: #{$grey500}; } } diff --git a/src/themes/Treedip/swatches/light.scss b/src/themes/Treedip/swatches/light.scss index bcb8f7267..674a3781a 100644 --- a/src/themes/Treedip/swatches/light.scss +++ b/src/themes/Treedip/swatches/light.scss @@ -29,6 +29,9 @@ $blue700: #2a4b8d; --main-color: #{$grey700}; --main-title-line-background: #{$red600}; --main-border-bottom: #{$grey200}; + --main-box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% ); + + --message-background: #{$white}; --message-border: #{$red600}; --color-error: #{$red600}; @@ -84,12 +87,15 @@ $blue700: #2a4b8d; @if $select-group-bubble { --select-group-bubble-color: #{$black}; --select-group-bubble-background: #{$white}; + --select-group-bubble-background-active: #{$white}; --select-group-bubble-border: #{$grey300}; --select-group-bubble-border-active: #{$blue700}; + --select-group-bubble-radio-background: #{$white}; --select-group-bubble-radio-border: #{$grey500}; - --select-group-bubble-radio-background-checked: #{$blue700}; - --select-group-bubble-radio-border-checked: #{$white}; + --select-group-bubble-radio-background-checked: #{$white}; + --select-group-bubble-radio-border-checked: #{$blue700}; + --select-group-bubble-radio-checkmark: #{$blue700}; } @if $select-group-button { @@ -124,8 +130,8 @@ $blue700: #2a4b8d; --fallback-button-background: #{$blue700}; --fallback-button-color: #{$white}; --fallback-button-background-hover: #{$blue600}; + --fallback-message-background: #{$white}; --fallback-message-border: #{$red600}; --fallback-uof-link: #{$grey500}; - --fallback-footer-border: #{$grey500}; } }