From 57e54d60dcf95fca59c5936cde89a12b16fa4535 Mon Sep 17 00:00:00 2001 From: MateuszMichalowski <79852198+MateuszMichalowski@users.noreply.github.com> Date: Wed, 21 Aug 2024 09:10:17 +0200 Subject: [PATCH] fix(frontend): scss changes and fixes (#3358) --- frontend/src/App.vue | 4 - .../src/assets/scss/custom/_variables.scss | 25 ++-- .../scss/custom/gradido-custom/_alerts.scss | 12 +- .../scss/custom/gradido-custom/_badges.scss | 16 +-- .../scss/custom/gradido-custom/_body.scss | 4 +- .../custom/gradido-custom/_buttons-forms.scss | 32 ++--- .../scss/custom/gradido-custom/_buttons.scss | 44 +++--- .../scss/custom/gradido-custom/_cards.scss | 26 ++-- .../scss/custom/gradido-custom/_chart.scss | 12 +- .../scss/custom/gradido-custom/_close.scss | 14 +- .../scss/custom/gradido-custom/_color.scss | 136 +++++++++--------- .../custom/gradido-custom/_components.scss | 44 +++--- .../custom/gradido-custom/_custom-forms.scss | 54 +++---- .../custom/gradido-custom/_custom-toogle.scss | 6 +- .../custom/gradido-custom/_datepicker.scss | 34 ++--- .../scss/custom/gradido-custom/_dropdown.scss | 10 +- .../scss/custom/gradido-custom/_fonts.scss | 112 +++++++-------- .../scss/custom/gradido-custom/_footer.scss | 14 +- .../custom/gradido-custom/_form-groups.scss | 2 +- .../gradido-custom/_form-validation.scss | 8 +- .../scss/custom/gradido-custom/_global.scss | 14 +- .../scss/custom/gradido-custom/_icons.scss | 8 +- .../custom/gradido-custom/_input-groups.scss | 12 +- .../scss/custom/gradido-custom/_input.scss | 62 ++++---- .../scss/custom/gradido-custom/_links.scss | 8 +- .../custom/gradido-custom/_list-group.scss | 32 ++--- .../custom/gradido-custom/_main-content.scss | 4 +- .../scss/custom/gradido-custom/_map.scss | 2 +- .../scss/custom/gradido-custom/_modals.scss | 30 ++-- .../scss/custom/gradido-custom/_navbar.scss | 78 +++++----- .../scss/custom/gradido-custom/_navs.scss | 34 ++--- .../custom/gradido-custom/_nouislider.scss | 24 ++-- .../custom/gradido-custom/_pagination.scss | 44 +++--- .../scss/custom/gradido-custom/_popovers.scss | 36 ++--- .../scss/custom/gradido-custom/_spacing.scss | 4 +- .../scss/custom/gradido-custom/_tables.scss | 46 +++--- .../scss/custom/gradido-custom/_tooltips.scss | 2 +- .../gradido-custom/_vertical-navbar.scss | 18 +-- .../src/assets/scss/gradido-template.scss | 20 +-- frontend/src/assets/scss/gradido.scss | 24 ++-- frontend/src/components/Auth/AuthFooter.vue | 22 +-- frontend/src/components/Auth/AuthNavbar.vue | 21 ++- frontend/src/components/CommunitySwitch.vue | 10 +- frontend/src/components/ContentFooter.vue | 12 +- .../ContributionMessagesFormular.vue | 2 +- .../ContributionMessagesListItem.vue | 10 +- .../Contributions/ContributionListItem.vue | 16 +-- .../Contributions/OpenCreationsAmount.vue | 24 +++- .../DecayInformation-BeforeStartblock.vue | 2 +- .../DecayInformation-Decay.vue | 2 +- .../DecayInformation-DecayStartblock.vue | 2 +- .../DecayInformation-Long.vue | 14 +- .../GddSend/TransactionConfirmationLink.vue | 8 +- .../GddSend/TransactionConfirmationSend.vue | 6 +- .../components/GddSend/TransactionForm.vue | 65 ++++++--- .../src/components/GddTransactionList.spec.js | 4 +- .../src/components/GddTransactionList.vue | 8 +- .../src/components/Inputs/InputPassword.vue | 2 +- .../src/components/Inputs/InputUsername.vue | 2 +- frontend/src/components/LanguageSwitch2.vue | 4 +- frontend/src/components/Menu/Navbar.vue | 6 +- frontend/src/components/Menu/Sidebar.vue | 98 ++++++++----- .../ContentHeader/CommunityMember.vue | 12 +- .../Template/ContentHeader/GddAmount.spec.js | 6 +- .../Template/ContentHeader/GddAmount.vue | 26 ++-- .../Template/ContentHeader/GdtAmount.spec.js | 6 +- .../Template/ContentHeader/GdtAmount.vue | 22 +-- .../Template/ContentHeader/NavCommunity.vue | 6 +- .../Template/RightSide/LastTransactions.vue | 4 +- frontend/src/components/Transaction.vue | 4 +- .../TransactionLinks/TransactionLink.vue | 4 +- .../TransactionRows/DurationRow.vue | 2 +- .../Transactions/TransactionCreation.vue | 6 +- .../Transactions/TransactionLinkSummary.vue | 2 +- .../Transactions/TransactionReceive.vue | 11 +- .../Transactions/TransactionSend.vue | 11 +- .../src/components/UserSettings/UserCard.vue | 6 +- .../src/components/UserSettings/UserData.vue | 6 +- .../components/UserSettings/UserLanguage.vue | 6 +- .../components/UserSettings/UserPassword.vue | 2 +- frontend/src/layouts/AuthLayout.vue | 8 +- frontend/src/pages/TransactionLink.vue | 4 + 82 files changed, 848 insertions(+), 757 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index c11f8969d..7ea051fe2 100755 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -44,10 +44,6 @@ export default { margin-left: auto; } -.app-box-shadow { - box-shadow: 20pt 20pt 50pt 0 #3838384f; -} - @media screen and (width <= 500px) { #app { font-size: 0.85rem; diff --git a/frontend/src/assets/scss/custom/_variables.scss b/frontend/src/assets/scss/custom/_variables.scss index f129a02d0..37338aeda 100644 --- a/frontend/src/assets/scss/custom/_variables.scss +++ b/frontend/src/assets/scss/custom/_variables.scss @@ -593,7 +593,7 @@ // custom-control-label-disabled-color: $gray-600 !default; // custom-checkbox-indicator-border-radius: $border-radius-sm !default; -// //$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; +// $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; // Custom toggle @import "gradido-custom/custom-toogle"; @@ -853,20 +853,20 @@ $btn-border-radius-sm: $input-border-radius !default; // Pagination @import "gradido-custom/pagination"; -// // $pagination-padding-y: .5rem !default; -// // $pagination-padding-x: .75rem !default; -// // $pagination-padding-y-sm: .25rem !default; -// // $pagination-padding-x-sm: .5rem !default; -// // $pagination-padding-y-lg: .75rem !default; -// // $pagination-padding-x-lg: 1.5rem !default; -// // $pagination-line-height: 1.25 !default; +// $pagination-padding-y: .5rem !default; +// $pagination-padding-x: .75rem !default; +// $pagination-padding-y-sm: .25rem !default; +// $pagination-padding-x-sm: .5rem !default; +// $pagination-padding-y-lg: .75rem !default; +// $pagination-padding-x-lg: 1.5rem !default; +// $pagination-line-height: 1.25 !default; // $pagination-color: $gray-600 !default; // $pagination-bg: $white !default; // $pagination-border-width: $border-width !default; // $pagination-border-color: $gray-300 !default; -// //$pagination-focus-box-shadow: $btn-hover-box-shadow !default; +// $pagination-focus-box-shadow: $btn-hover-box-shadow !default; // $pagination-hover-color: $gray-600 !default; // $pagination-hover-bg: $gray-300 !default; @@ -895,8 +895,8 @@ $btn-border-radius-sm: $input-border-radius !default; // $card-img-overlay-padding: 1.25rem !default; -// //$card-group-margin: ($grid-gutter-width / 2); -// //$card-deck-margin: $card-group-margin !default; +// $card-group-margin: ($grid-gutter-width / 2); +// $card-deck-margin: $card-group-margin !default; // $card-columns-count: 3 !default; // $card-columns-gap: 1.25rem !default; @@ -924,6 +924,7 @@ $btn-border-radius-sm: $input-border-radius !default; // $modal-content-box-shadow-xs: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17); // $modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17); + // $modal-backdrop-bg: $black !default; // $modal-backdrop-opacity: .16 !default; // $modal-header-border-color: $gray-200 !default; @@ -978,5 +979,5 @@ $btn-border-radius-sm: $input-border-radius !default; // Import Bootstrap variable defaults -@import "bootstrap/scss/variables"; +// @import "bootstrap/scss/variables"; @import "gradido-custom/functions"; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_alerts.scss b/frontend/src/assets/scss/custom/gradido-custom/_alerts.scss index a5d3824cf..112dc5466 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_alerts.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_alerts.scss @@ -1,8 +1,8 @@ // Alerts -$alert-padding-y: 1rem !default; -$alert-padding-x: 1.5rem !default; -$alert-border-radius: $border-radius !default; -$alert-bg-level: -2 !default; -$alert-border-level: -2 !default; -$alert-color-level: 0 !default; +$alert-padding-y: 1rem ; +$alert-padding-x: 1.5rem ; +$alert-border-radius: $border-radius ; +$alert-bg-level: -2 ; +$alert-border-level: -2 ; +$alert-color-level: 0 ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_badges.scss b/frontend/src/assets/scss/custom/gradido-custom/_badges.scss index 3796a34be..c5b654672 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_badges.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_badges.scss @@ -1,11 +1,11 @@ // Badges -$badge-font-size: 66% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: 0.35rem !default; -$badge-padding-x: 0.375rem !default; -$badge-border-radius: $border-radius !default; +$badge-font-size: 66% ; +$badge-font-weight: $font-weight-bold ; +$badge-padding-y: 0.35rem ; +$badge-padding-x: 0.375rem ; +$badge-border-radius: $border-radius ; $badge-text-transfom: uppercase; -$badge-pill-padding-x: 0.875em !default; -$badge-pill-border-radius: 10rem !default; -$badge-circle-size: 2rem !default; +$badge-pill-padding-x: 0.875em ; +$badge-pill-border-radius: 10rem ; +$badge-circle-size: 2rem ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_body.scss b/frontend/src/assets/scss/custom/gradido-custom/_body.scss index b45b24b18..8361660a7 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_body.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_body.scss @@ -1,4 +1,4 @@ // Body -$body-bg: #fff !default; -$body-color: $gray-700 !default; +$body-bg: #fff; +$body-color: $gray-700; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss b/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss index 92992c070..9ffc392fe 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss @@ -1,18 +1,18 @@ // Buttons + Forms -$input-btn-padding-y: 0.625rem !default; -$input-btn-padding-x: 0.75rem !default; -$input-btn-line-height: $shape-height-base !default; -$input-btn-focus-width: 0 !default; -$input-btn-focus-color: rgba($component-active-bg, 1) !default; -$input-btn-focus-box-shadow: none !default; -$input-btn-padding-y-sm: 0.25rem !default; -$input-btn-padding-x-sm: 0.5rem !default; -$input-btn-line-height-sm: $shape-height-sm !default; -$input-btn-padding-y-lg: 0.875rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: $shape-height-lg !default; -$input-btn-border-width: 1px !default; -$input-btn-font-size-sm: 0.75rem !default; -$input-btn-font-size: 0.875rem !default; -$input-btn-font-size-lg: 0.875rem !default; +$input-btn-padding-y: 0.625rem ; +$input-btn-padding-x: 0.75rem ; +$input-btn-line-height: $shape-height-base ; +$input-btn-focus-width: 0 ; +$input-btn-focus-color: rgba($component-active-bg, 1) ; +$input-btn-focus-box-shadow: none ; +$input-btn-padding-y-sm: 0.25rem ; +$input-btn-padding-x-sm: 0.5rem ; +$input-btn-line-height-sm: $shape-height-sm ; +$input-btn-padding-y-lg: 0.875rem ; +$input-btn-padding-x-lg: 1rem ; +$input-btn-line-height-lg: $shape-height-lg ; +$input-btn-border-width: 1px ; +$input-btn-font-size-sm: 0.75rem ; +$input-btn-font-size: 0.875rem ; +$input-btn-font-size-lg: 0.875rem ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss b/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss index 3d16e762d..a9a650c30 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss @@ -1,25 +1,31 @@ // Buttons -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x + 0.5 !default; -$btn-line-height: $input-btn-line-height !default; -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-border-width: $input-btn-border-width !default; -$btn-font-weight: 600 !default; -$btn-text-transform: none !default; -$btn-letter-spacing: 0.025em !default; -$btn-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%) !default; -$btn-hover-box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%) !default; -$btn-focus-box-shadow: $btn-hover-box-shadow !default; -$btn-focus-width: $input-btn-focus-width !default; -$btn-active-box-shadow: none !default; -$btn-hover-translate-y: -1px !default; +$btn-padding-y: $input-btn-padding-y ; +$btn-padding-x: $input-btn-padding-x + 0.5 ; +$btn-line-height: $input-btn-line-height ; +$btn-padding-y-sm: $input-btn-padding-y-sm ; +$btn-padding-x-sm: $input-btn-padding-x-sm ; +$btn-line-height-sm: $input-btn-line-height-sm ; +$btn-padding-y-lg: $input-btn-padding-y-lg ; +$btn-padding-x-lg: $input-btn-padding-x-lg ; +$btn-line-height-lg: $input-btn-line-height-lg ; +$btn-border-width: $input-btn-border-width ; +$btn-font-weight: 600 ; +$btn-text-transform: none; +$btn-letter-spacing: 0.025em ; +$btn-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%) ; +$btn-hover-box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%) ; +$btn-focus-box-shadow: $btn-hover-box-shadow ; +$btn-focus-width: $input-btn-focus-width ; +$btn-active-box-shadow: none; +$btn-hover-translate-y: -1px ; + + .btn-outline-secondary { color: #4385b1 !important; } + +.btn-success { + color: #fff!important; +} diff --git a/frontend/src/assets/scss/custom/gradido-custom/_cards.scss b/frontend/src/assets/scss/custom/gradido-custom/_cards.scss index fe112f8b7..3dec98140 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_cards.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_cards.scss @@ -1,18 +1,18 @@ // Cards -$card-spacer-y: 1.25rem !default; -$card-spacer-x: 1.5rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, 0.05) !default; -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: $white !default; -$card-bg: $white !default; -$card-img-overlay-padding: 1.25rem !default; +$card-spacer-y: 1.25rem ; +$card-spacer-x: 1.5rem ; +$card-border-width: $border-width ; +$card-border-radius: $border-radius ; +$card-border-color: rgba($black, 0.05) ; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) ; +$card-cap-bg: $white ; +$card-bg: $white ; +$card-img-overlay-padding: 1.25rem ; // $card-group-margin: ($grid-gutter-width / 2); -// $card-deck-margin: $card-group-margin !default; +// $card-deck-margin: $card-group-margin ; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-columns-count: 3 ; +$card-columns-gap: 1.25rem ; +$card-columns-margin: $card-spacer-y ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_chart.scss b/frontend/src/assets/scss/custom/gradido-custom/_chart.scss index 95e884d49..cdeb5b10a 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_chart.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_chart.scss @@ -1,8 +1,8 @@ // Chart -$chart-height: 350px !default; -$chart-height-sm: 230px !default; -$chart-legend-margin-top: 2.5rem !default; -$chart-legend-font-size: $font-size-sm !default; -$chart-legend-color: $text-muted !default; -$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default; +$chart-height: 350px ; +$chart-height-sm: 230px ; +$chart-legend-margin-top: 2.5rem ; +$chart-legend-font-size: $font-size-sm ; +$chart-legend-color: $text-muted ; +$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_close.scss b/frontend/src/assets/scss/custom/gradido-custom/_close.scss index 346372aa7..530074850 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_close.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_close.scss @@ -1,9 +1,9 @@ // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-bg: transparent !default; -$close-hover-bg: transparent !default; -$close-color: rgb(0 0 0 / 60%) !default !default; -$close-hover-color: rgb(0 0 0 / 90%) !default; -$close-text-shadow: none !default; +$close-font-size: $font-size-base * 1.5 ; +$close-font-weight: $font-weight-bold ; +$close-bg: transparent ; +$close-hover-bg: transparent ; +$close-color: rgb(0 0 0 / 60%) ; +$close-hover-color: rgb(0 0 0 / 90%) ; +$close-text-shadow: none ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_color.scss b/frontend/src/assets/scss/custom/gradido-custom/_color.scss index 361f717af..fa77c1dd2 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_color.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_color.scss @@ -2,25 +2,25 @@ @use "sass:map"; @use "sass:color"; -$white: #fff !default; -$gray-100: #f6f9fc !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; -$gray-400: #ced4da !default; -$gray-500: #adb5bd !default; -$gray-600: #8898aa !default; // Line footer color -$gray-700: #525f7f !default; // Line p color -$gray-800: #32325d !default; // Line heading color -$gray-900: #212529 !default; -$gradido-f5: #f5f5f5 !default; -$gradido-248: rgb(248 248 248) !default; -$gradido-140: rgb(140 66 5) !default; -$gradido-205: rgb(205 86 86) !default; -$gradido-197: rgb(197 141 56) !default; -$gradido-209: rgb(209 209 209) !default; -$gradido-4: rgb(4 112 6) !default; -$black: #000 !default; -$grays: () !default; +$white: #fff ; +$gray-100: #f6f9fc ; +$gray-200: #e9ecef ; +$gray-300: #dee2e6 ; +$gray-400: #ced4da ; +$gray-500: #adb5bd ; +$gray-600: #8898aa ; // Line footer color +$gray-700: #525f7f; // Line p color +$gray-800: #32325d; // Line heading color +$gray-900: #212529; +$gradido-f5: #f5f5f5 ; +$gradido-248: rgb(248 248 248) ; +$gradido-140: rgb(140 66 5) ; +$gradido-205: rgb(205 86 86) ; +$gradido-197: rgb(197 141 56) ; +$gradido-209: rgb(209 209 209) ; +$gradido-4: rgb(4 112 6) ; +$black: #000 ; +$grays: () ; $grays: map.merge( ( "100": $gray-100, @@ -42,19 +42,19 @@ $grays: map.merge( ), $grays ); -$blue: #5e72e4 !default; -$indigo: #5603ad !default; -$purple: #8965e0 !default; -$pink: #f3a4b5 !default; -$red: #f5365c !default; +$blue: #5e72e4 ; +$indigo: #5603ad ; +$purple: #8965e0 ; +$pink: #f3a4b5 ; +$red: #f5365c ; -// $orange: #fb6340 !default; -$orange: #8c0505 !default; -$yellow: #ffd600 !default; -$green: #2dce89 !default; -$teal: #11cdef !default; -$cyan: #2bffc6 !default; -$colors: () !default; +// $orange: #fb6340 ; +$orange: #8c0505 ; +$yellow: #ffd600 ; +$green: #2dce89 ; +$teal: #11cdef ; +$cyan: #2bffc6 ; +$colors: () ; $colors: map.merge( ( "blue": $blue, @@ -82,27 +82,27 @@ $colors: map.merge( ), $colors ); -$f5f5f5: $gradido-f5 !default; -$default: #172b4d !default; -$primary: #5e72e4 !default; -$secondary: #f7fafc !default; -$success: $green !default; -$info: $teal !default; -$warning: $orange !default; -$danger: $red !default; -$light: $gray-500 !default; -$dark: $gray-900 !default; -$darker: color.adjust($gray-900, $lightness: -15%) !default; -$facebook: #3b5999 !default; -$twitter: #1da1f2 !default; -$google-plus: #dd4b39 !default; -$instagram: #e4405f !default; -$pinterest: #bd081c !default; -$youtube: #cd201f !default; -$slack: #3aaf85 !default; -$dribbble: #ea4c89 !default; -$github: #222 !default; -$theme-colors: () !default; +$f5f5f5: $gradido-f5 ; +$default: #172b4d ; +$primary: #5e72e4 ; +$secondary: #f7fafc ; +$success: $green ; +$info: $teal ; +$warning: $orange ; +$danger: $red ; +$light: $gray-500 ; +$dark: $gray-900 ; +$darker: color.adjust($gray-900, $lightness: -15%) ; +$facebook: #3b5999 ; +$twitter: #1da1f2 ; +$google-plus: #dd4b39 ; +$instagram: #e4405f ; +$pinterest: #bd081c ; +$youtube: #cd201f ; +$slack: #3aaf85 ; +$dribbble: #ea4c89 ; +$github: #222 ; +$theme-colors: () ; $theme-colors: map.merge( ( "default": $default, @@ -126,7 +126,7 @@ $theme-colors: map.merge( ), $theme-colors ); -$brand-colors: () !default; +$brand-colors: () ; $brand-colors: map.merge( ( "facebook": $facebook, @@ -141,7 +141,7 @@ $brand-colors: map.merge( ), $brand-colors ); -$shape-colors: () !default; +$shape-colors: () ; $shape-colors: map.merge( ( "default": #32325d, @@ -152,7 +152,7 @@ $shape-colors: map.merge( ), $shape-colors ); -$shapes-primary-colors: () !default; +$shapes-primary-colors: () ; $shapes-primary-colors: map.merge( ( "step-1-gradient-bg": #281483, @@ -166,7 +166,7 @@ $shapes-primary-colors: map.merge( ), $shapes-primary-colors ); -$shapes-default-colors: () !default; +$shapes-default-colors: () ; $shapes-default-colors: map.merge( ( "step-1-gradient-bg": #7795f8, @@ -180,7 +180,7 @@ $shapes-default-colors: map.merge( ), $shapes-default-colors ); -$shapes-light-colors: () !default; +$shapes-light-colors: () ; $shapes-light-colors: map.merge( ( "step-1-gradient-bg": #b2cbe1, @@ -194,7 +194,7 @@ $shapes-light-colors: map.merge( ), $shapes-light-colors ); -$shapes-dark-colors: () !default; +$shapes-dark-colors: () ; $shapes-dark-colors: map.merge( ( "step-1-gradient-bg": #32325d, @@ -210,23 +210,23 @@ $shapes-dark-colors: map.merge( ); // Translucent color variations -$translucent-color-opacity: 0.6 !default; +$translucent-color-opacity: 0.6 ; // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% ; // The yiq lightness value that determines when the lightness of color changes // from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 200 !default; +$yiq-contrasted-threshold: 200 ; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 ; +$yiq-text-light: $white ; // Action colors -$star-rating-color: $gray-400 !default; -$star-rating-color-active: $yellow !default; -$favorite-color: $yellow !default; -$like-color: $blue !default; -$love-color: $red !default; +$star-rating-color: $gray-400 ; +$star-rating-color-active: $yellow ; +$favorite-color: $yellow ; +$like-color: $blue ; +$love-color: $red ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_components.scss b/frontend/src/assets/scss/custom/gradido-custom/_components.scss index f6d8e45e1..dbf3f8bb6 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_components.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_components.scss @@ -1,24 +1,24 @@ // Components -$shape-height-xl: 1.5 !default; -$shape-height-lg: 1.5 !default; -$shape-height-sm: 1.5 !default; -$border-width: 1px !default; -$border-color: $gray-200 !default; -$border-radius: 0.375rem !default; -$border-radius-xl: 0.5rem !default; -$border-radius-lg: 0.4375rem !default; -$border-radius-sm: 0.25rem !default; -$box-shadow-sm: 0 0 0.5rem rgba($gray-600, 0.075) !default; -$box-shadow: 0 0 2rem 0 rgba($gray-600, 0.15) !default; -$box-shadow-lg: 0 0 3rem rgba($gray-600, 0.175) !default; -$component-active-color: $white !default; -$component-active-bg: $primary !default; -$component-active-border-color: $primary !default; -$component-hover-color: $gray-300 !default; -$component-hover-bg: $gray-300 !default; -$component-hover-border-color: $gray-300 !default; -$caret-width: 0.3em !default; -$transition-base: all 0.15s ease !default; -$transition-fade: opacity 0.15s linear !default; -$transition-collapse: height 0.35s ease !default; +$shape-height-xl: 1.5 ; +$shape-height-lg: 1.5 ; +$shape-height-sm: 1.5 ; +$border-width: 1px ; +$border-color: $gray-200 ; +$border-radius: 0.375rem ; +$border-radius-xl: 0.5rem ; +$border-radius-lg: 0.4375rem ; +$border-radius-sm: 0.25rem ; +$box-shadow-sm: 0 0 0.5rem rgba($gray-600, 0.075) ; +$box-shadow: 0 0 2rem 0 rgba($gray-600, 0.15) ; +$box-shadow-lg: 0 0 3rem rgba($gray-600, 0.175) ; +$component-active-color: $white ; +$component-active-bg: $primary ; +$component-active-border-color: $primary ; +$component-hover-color: $gray-300 ; +$component-hover-bg: $gray-300 ; +$component-hover-border-color: $gray-300 ; +$caret-width: 0.3em ; +$transition-base: all 0.15s ease ; +$transition-fade: opacity 0.15s linear ; +$transition-collapse: height 0.35s ease ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss b/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss index f942bec6f..01b2b6bd3 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss @@ -1,33 +1,33 @@ // Custom forms -$custom-control-gutter: 1.75rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-indicator-size: 1.25rem !default; -$custom-control-indicator-bg: $input-bg !default; -$custom-control-indicator-border-width: 1px !default; -$custom-control-indicator-border-color: $input-border-color !default; -$custom-control-indicator-box-shadow: none !default; -$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-hover-color: $component-hover-color !default; -$custom-control-indicator-hover-bg: $component-hover-bg !default; -$custom-control-indicator-hover-border-color: $component-hover-border-color !default; -$custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: $component-active-bg !default; -$custom-control-indicator-active-border-color: $component-active-border-color !default; -$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-gutter: 1.75rem ; +$custom-control-spacer-x: 1rem ; +$custom-control-indicator-size: 1.25rem ; +$custom-control-indicator-bg: $input-bg ; +$custom-control-indicator-border-width: 1px ; +$custom-control-indicator-border-color: $input-border-color ; +$custom-control-indicator-box-shadow: none ; +$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow ; +$custom-control-indicator-hover-color: $component-hover-color ; +$custom-control-indicator-hover-bg: $component-hover-bg ; +$custom-control-indicator-hover-border-color: $component-hover-border-color ; +$custom-control-indicator-active-color: $component-active-color ; +$custom-control-indicator-active-bg: $component-active-bg ; +$custom-control-indicator-active-border-color: $component-active-border-color ; +$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow ; +$custom-control-indicator-checked-color: $component-active-color ; -// $custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-bg: #047006 !default; -$custom-control-indicator-checked-border-color: $component-active-border-color !default; -$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default; +// $custom-control-indicator-checked-bg: $component-active-bg ; +$custom-control-indicator-checked-bg: #047006 ; +$custom-control-indicator-checked-border-color: $component-active-border-color ; +$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow ; -// $custom-control-indicator-checked-disabled-bg: rgb(theme-color("primary") 0.5) !default; -$custom-control-indicator-checked-disabled-bg: $primary !default; -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; +// $custom-control-indicator-checked-disabled-bg: rgb(theme-color("primary") 0.5) ; +$custom-control-indicator-checked-disabled-bg: $primary ; +$custom-control-indicator-disabled-bg: $gray-200 ; +$custom-control-label-disabled-color: $gray-600 ; -// $custom-checkbox-indicator-border-radius: $border-radius-sm !default; -$custom-checkbox-indicator-border-radius: 50px !default; +// $custom-checkbox-indicator-border-radius: $border-radius-sm ; +$custom-checkbox-indicator-border-radius: 50px ; -// $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; +// $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml ;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_custom-toogle.scss b/frontend/src/assets/scss/custom/gradido-custom/_custom-toogle.scss index 0356f8667..ec94422af 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_custom-toogle.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_custom-toogle.scss @@ -1,5 +1,5 @@ // Custom toggle -$custom-toggle-width: 50px !default; -$custom-toggle-slider-bg: $gray-200 !default; -$custom-toggle-checked-bg: $primary !default; +$custom-toggle-width: 50px ; +$custom-toggle-slider-bg: $gray-200 ; +$custom-toggle-checked-bg: $primary ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss b/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss index 81dec6bc4..1c863df4c 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss @@ -1,23 +1,23 @@ // Datepicker @use "sass:color"; -$datepicker-border-radius: $card-border-radius !default; -$datepicker-dropdown-padding: 20px 22px !default; -$datepicker-cell-transition: $transition-base !default; +$datepicker-border-radius: $card-border-radius ; +$datepicker-dropdown-padding: 20px 22px ; +$datepicker-cell-transition: $transition-base ; $datepicker-cell-hover-background: color.adjust($gray-400, $lightness: 55%); -$datepicker-cell-border-radius: 50% !default; -$datepicker-cell-width: 36px !default; -$datepicker-cell-height: 36px !default; -$datepicker-disabled-cell-color: $gray-300 !default; -$datepicker-disabled-old-new-color: $gray-500 !default; -$datepicker-header-cell-border-radius: $border-radius !default; -$datepicker-active-color: $white !default; -$datepicker-active-background: $primary !default; -$datepicker-active-box-shadow: none !default; -$datepicker-range-background: $primary !default; +$datepicker-cell-border-radius: 50% ; +$datepicker-cell-width: 36px ; +$datepicker-cell-height: 36px ; +$datepicker-disabled-cell-color: $gray-300 ; +$datepicker-disabled-old-new-color: $gray-500 ; +$datepicker-header-cell-border-radius: $border-radius ; +$datepicker-active-color: $white ; +$datepicker-active-background: $primary ; +$datepicker-active-box-shadow: none ; +$datepicker-range-background: $primary ; $datepicker-range-cell-focused-background: color.adjust($datepicker-range-background, $lightness: -5%); -$datepicker-range-color: $white !default; -$datepicker-range-highlighted-bg: $gray-200 !default; +$datepicker-range-color: $white ; +$datepicker-range-highlighted-bg: $gray-200 ; $datepicker-dropdown-border: color.adjust($gray-400, $lightness: 40%); -$datepicker-dropdown-bg: $white !default; -$datepicker-highlighted-bg: $datepicker-active-background !default; +$datepicker-dropdown-bg: $white ; +$datepicker-highlighted-bg: $datepicker-active-background ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_dropdown.scss b/frontend/src/assets/scss/custom/gradido-custom/_dropdown.scss index e699f20df..572fc3397 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_dropdown.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_dropdown.scss @@ -1,9 +1,9 @@ // Dropdown -$dropdown-bg: $white !default; -$dropdown-border-width: 0 !default; -$dropdown-border-color: rgba($black, 0.15) !default; -$dropdown-border-radius: $border-radius-lg !default; +$dropdown-bg: $white ; +$dropdown-border-width: 0 ; +$dropdown-border-color: rgba($black, 0.15) ; +$dropdown-border-radius: $border-radius-lg ; $dropdown-box-shadow: 0 50px 100px rgb(50 50 93 / 10%), 0 15px 35px rgb(50 50 93 / 15%), - 0 5px 15px rgb(0 0 0 / 10%) !default; + 0 5px 15px rgb(0 0 0 / 10%) ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_fonts.scss b/frontend/src/assets/scss/custom/gradido-custom/_fonts.scss index be6fbe74a..9e22c81d8 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_fonts.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_fonts.scss @@ -1,63 +1,63 @@ // Fonts -$font-family-sans-serif: open sans, sans-serif !default; -$font-family-base: $font-family-sans-serif !default; -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-family-sans-serif: open sans, sans-serif ; +$font-family-base: $font-family-sans-serif ; +$font-size-base: 1rem ; // Assumes the browser default, typically `16px` $font-size-xl: ($font-size-base * 1.5); $font-size-lg: ($font-size-base * 1.25); $font-size-sm: ($font-size-base * 0.875); $font-size-xs: ($font-size-base * 0.75); -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 600 !default; -$font-weight-extra-bold: 700 !default; -$font-weight-base: $font-weight-normal !default; -$line-height-base: 1.5 !default; -$shape-height-base: 1.5 !default; -$h1-font-size: $font-size-base * 1.625 !default; -$h2-font-size: $font-size-base * 1.25 !default; -$h3-font-size: $font-size-base * 1.0625 !default; -$h4-font-size: $font-size-base * 0.9375 !default; -$h5-font-size: $font-size-base * 0.8125 !default; -$h6-font-size: $font-size-base * 0.625 !default; +$font-weight-light: 300 ; +$font-weight-normal: 400 ; +$font-weight-bold: 600 ; +$font-weight-extra-bold: 700 ; +$font-weight-base: $font-weight-normal ; +$line-height-base: 1.5 ; +$shape-height-base: 1.5 ; +$h1-font-size: $font-size-base * 1.625 ; +$h2-font-size: $font-size-base * 1.25 ; +$h3-font-size: $font-size-base * 1.0625 ; +$h4-font-size: $font-size-base * 0.9375 ; +$h5-font-size: $font-size-base * 0.8125 ; +$h6-font-size: $font-size-base * 0.625 ; $headings-margin-bottom: ($spacer / 2); -$headings-font-family: inherit !default; -$headings-font-weight: $font-weight-bold !default; -$headings-line-height: 1.5 !default; -$headings-color: $gray-800 !default; -$heading-letter-spacing: 0.025em !default; -$heading-font-size: 0.95rem !default; -$heading-text-transform: uppercase !default; -$heading-font-weight: $headings-font-weight !default; -$heading-title-letter-spacing: 0.025em !default; -$heading-title-font-size: 1.375rem !default; -$heading-title-font-weight: $font-weight-bold !default; -$heading-title-text-transform: uppercase !default; -$heading-section-letter-spacing: 0.025em !default; -$heading-section-font-size: 1.375rem !default; -$heading-section-font-weight: $font-weight-bold !default; -$heading-section-text-transform: uppercase !default; -$display1-size: 3.3rem !default; -$display2-size: 2.75rem !default; -$display3-size: 2.1875rem !default; -$display4-size: 1.6275rem !default; -$display1-weight: $font-weight-bold !default; -$display2-weight: $font-weight-bold !default; -$display3-weight: $font-weight-bold !default; -$display4-weight: $font-weight-bold !default; -$display-line-height: $headings-line-height !default; -$paragraph-font-size: 1rem !default; -$paragraph-font-weight: 300 !default; -$paragraph-line-height: 1.7 !default; -$lead-font-size: ($paragraph-font-size * 1.25) !default; -$lead-font-weight: 300 !default; -$small-font-size: 80% !default; -$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$headings-font-family: inherit ; +$headings-font-weight: $font-weight-bold ; +$headings-line-height: 1.5 ; +$headings-color: $gray-800 ; +$heading-letter-spacing: 0.025em ; +$heading-font-size: 0.95rem ; +$heading-text-transform: uppercase ; +$heading-font-weight: $headings-font-weight ; +$heading-title-letter-spacing: 0.025em ; +$heading-title-font-size: 1.375rem ; +$heading-title-font-weight: $font-weight-bold ; +$heading-title-text-transform: uppercase ; +$heading-section-letter-spacing: 0.025em ; +$heading-section-font-size: 1.375rem ; +$heading-section-font-weight: $font-weight-bold ; +$heading-section-text-transform: uppercase ; +$display1-size: 3.3rem ; +$display2-size: 2.75rem ; +$display3-size: 2.1875rem ; +$display4-size: 1.6275rem ; +$display1-weight: $font-weight-bold ; +$display2-weight: $font-weight-bold ; +$display3-weight: $font-weight-bold ; +$display4-weight: $font-weight-bold ; +$display-line-height: $headings-line-height ; +$paragraph-font-size: 1rem ; +$paragraph-font-weight: 300 ; +$paragraph-line-height: 1.7 ; +$lead-font-size: ($paragraph-font-size * 1.25) ; +$lead-font-weight: 300 ; +$small-font-size: 80% ; +$text-muted: $gray-600 ; +$blockquote-small-color: $gray-600 ; +$blockquote-font-size: ($font-size-base * 1.25) ; $hr-border-color: rgba($black, 0.1); -$hr-border-width: $border-width !default; -$mark-padding: 0.2em !default; -$dt-font-weight: $font-weight-bold !default; -$list-inline-padding: 0.5rem !default; -$mark-bg: #fcf8e3 !default; -$hr-margin-y: $spacer * 2 !default; +$hr-border-width: $border-width ; +$mark-padding: 0.2em ; +$dt-font-weight: $font-weight-bold ; +$list-inline-padding: 0.5rem ; +$mark-bg: #fcf8e3 ; +$hr-margin-y: $spacer * 2 ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_footer.scss b/frontend/src/assets/scss/custom/gradido-custom/_footer.scss index dbb900109..a666a5f3e 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_footer.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_footer.scss @@ -2,10 +2,10 @@ $footer-padding-y: 2.5rem; $footer-padding-x: 0; -$footer-link-font-size: 0.85rem !default; -$footer-bg: $secondary !default; -$footer-color: $gray-600 !default; -$footer-link-color: $gray-600 !default; -$footer-link-hover-color: $gray-700 !default; -$footer-heading-color: $gray-600 !default; -$footer-heading-font-size: $font-size-sm !default; +$footer-link-font-size: 0.85rem ; +$footer-bg: $secondary ; +$footer-color: $gray-600 ; +$footer-link-color: $gray-600 ; +$footer-link-hover-color: $gray-700 ; +$footer-heading-color: $gray-600 ; +$footer-heading-font-size: $font-size-sm ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_form-groups.scss b/frontend/src/assets/scss/custom/gradido-custom/_form-groups.scss index e367b97a5..c6926931d 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_form-groups.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_form-groups.scss @@ -1,3 +1,3 @@ // Form group -$form-group-margin-bottom: 1.5rem !default; +$form-group-margin-bottom: 1.5rem ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_form-validation.scss b/frontend/src/assets/scss/custom/gradido-custom/_form-validation.scss index 44727ab9c..e69b281ed 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_form-validation.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_form-validation.scss @@ -1,7 +1,7 @@ // Form validation @use "sass:color"; -$form-feedback-valid-bg: color.adjust($success, $lightness: 15%) !default; -$form-feedback-valid-color: $success !default; -$form-feedback-invalid-bg: color.adjust($warning, $lightness: 15%) !default; -$form-feedback-invalid-color: $warning !default; +$form-feedback-valid-bg: color.adjust($success, $lightness: 15%) ; +$form-feedback-valid-color: $success ; +$form-feedback-invalid-bg: color.adjust($warning, $lightness: 15%) ; +$form-feedback-invalid-color: $warning ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_global.scss b/frontend/src/assets/scss/custom/gradido-custom/_global.scss index f4f787be6..06d3ea717 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_global.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_global.scss @@ -1,9 +1,9 @@ // Global settings -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: true !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-grid-classes: true !default; -$enable-print-styles: true !default; +$enable-caret: true ; +$enable-rounded: true ; +$enable-shadows: true ; +$enable-gradients: false ; +$enable-transitions: true ; +$enable-grid-classes: true ; +$enable-print-styles: true ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_icons.scss b/frontend/src/assets/scss/custom/gradido-custom/_icons.scss index f20490d59..06afd4515 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_icons.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_icons.scss @@ -1,6 +1,6 @@ // Icons -$icon-size: 3rem !default; -$icon-size-xl: 5rem !default; -$icon-size-lg: 4rem !default; -$icon-size-sm: 2rem !default; +$icon-size: 3rem ; +$icon-size-xl: 5rem ; +$icon-size-lg: 4rem ; +$icon-size-sm: 2rem ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_input-groups.scss b/frontend/src/assets/scss/custom/gradido-custom/_input-groups.scss index 66add56f5..4d79f45b7 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_input-groups.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_input-groups.scss @@ -1,8 +1,8 @@ // Input groups -$input-group-addon-color: $input-placeholder-color !default; -$input-group-addon-bg: $input-bg !default; -$input-group-addon-border-color: $input-border-color !default; -$input-group-addon-focus-color: $input-focus-color !default; -$input-group-addon-focus-bg: $input-focus-bg !default; -$input-group-addon-focus-border-color: $input-focus-border-color !default; +$input-group-addon-color: $input-placeholder-color ; +$input-group-addon-bg: $input-bg ; +$input-group-addon-border-color: $input-border-color ; +$input-group-addon-focus-color: $input-focus-color ; +$input-group-addon-focus-bg: $input-focus-bg ; +$input-group-addon-focus-border-color: $input-focus-border-color ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_input.scss b/frontend/src/assets/scss/custom/gradido-custom/_input.scss index 12ecf12e5..e044b3e20 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_input.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_input.scss @@ -1,37 +1,37 @@ // Input @use "sass:color"; -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; -$input-border-radius: $border-radius !default; -$input-border-radius-xl: $border-radius-xl !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; -$input-bg: $white !default; -$input-disabled-bg: $gray-200 !default; -$input-muted-bg: #f7fafe !default; -$input-focus-muted-bg: color.adjust($input-muted-bg, $lightness: 1%) !default; -$input-alternative-box-shadow: 0 1px 3px rgb(50 50 93 / 15%), 0 1px 0 rgb(0 0 0 / 2%) !default; -$input-focus-alternative-box-shadow: 0 4px 6px rgb(50 50 93 / 11%),0 1px 3px rgb(0 0 0 / 8%) !default; -$input-color: $gray-600 !default; -$input-border-color: #cad1d7 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default; +$input-padding-y: $input-btn-padding-y ; +$input-padding-x: $input-btn-padding-x ; +$input-line-height: $input-btn-line-height ; +$input-padding-y-sm: $input-btn-padding-y-sm ; +$input-padding-x-sm: $input-btn-padding-x-sm ; +$input-line-height-sm: $input-btn-line-height-sm ; +$input-padding-y-lg: $input-btn-padding-y-lg ; +$input-padding-x-lg: $input-btn-padding-x-lg ; +$input-line-height-lg: $input-btn-line-height-lg ; +$input-border-radius: $border-radius ; +$input-border-radius-xl: $border-radius-xl ; +$input-border-radius-lg: $border-radius-lg ; +$input-border-radius-sm: $border-radius-sm ; +$input-bg: $white ; +$input-disabled-bg: $gray-200 ; +$input-muted-bg: #f7fafe ; +$input-focus-muted-bg: color.adjust($input-muted-bg, $lightness: 1%) ; +$input-alternative-box-shadow: 0 1px 3px rgb(50 50 93 / 15%), 0 1px 0 rgb(0 0 0 / 2%) ; +$input-focus-alternative-box-shadow: 0 4px 6px rgb(50 50 93 / 11%),0 1px 3px rgb(0 0 0 / 8%) ; +$input-color: $gray-600 ; +$input-border-color: #cad1d7 ; +$input-border-width: $input-btn-border-width ; +$input-box-shadow: none ; // 0 1px 3px 0 $gray-400 ; -$input-focus-bg: $white !default; -$input-focus-border-color: rgb(50 151 211 / 25%) !default; -$input-focus-color: $input-color !default; -$input-focus-width: 0 !default; -$input-focus-box-shadow: none !default; // 0 1px 3px 0 $gray-500 !default; +$input-focus-bg: $white ; +$input-focus-border-color: rgb(50 151 211 / 25%) ; +$input-focus-color: $input-color ; +$input-focus-width: 0 ; +$input-focus-box-shadow: none ; // 0 1px 3px 0 $gray-500 ; -$input-placeholder-color: $gray-500 !default; -$input-focus-placeholder-color: $gray-500 !default; +$input-placeholder-color: $gray-500 ; +$input-focus-placeholder-color: $gray-500 ; $input-height-border: $input-border-width * 2 !default; -$input-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !default; +$input-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_links.scss b/frontend/src/assets/scss/custom/gradido-custom/_links.scss index bf06c470f..ae871f7bf 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_links.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_links.scss @@ -1,7 +1,7 @@ // Links @use "sass:color"; -$link-color: $primary !default; -$link-decoration: none !default; -$link-hover-color: color.adjust($link-color, $lightness: -15%) !default; -$link-hover-decoration: none !default; +$link-color: $primary ; +$link-decoration: none ; +$link-hover-color: color.adjust($link-color, $lightness: -15%) ; +$link-hover-decoration: none ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_list-group.scss b/frontend/src/assets/scss/custom/gradido-custom/_list-group.scss index 647570cb1..b93587b88 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_list-group.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_list-group.scss @@ -1,18 +1,18 @@ // List group -$list-group-bg: $white !default; -$list-group-border-color: $border-color !default; // rgba($black, .125); -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; -$list-group-item-padding-y: 1rem !default; -$list-group-item-padding-x: 1rem !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; -$list-group-action-active-color: $list-group-action-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-bg: $white ; +$list-group-border-color: $border-color ; // rgba($black, .125); +$list-group-border-width: $border-width ; +$list-group-border-radius: $border-radius ; +$list-group-item-padding-y: 1rem ; +$list-group-item-padding-x: 1rem ; +$list-group-hover-bg: $gray-100 ; +$list-group-active-color: $component-active-color ; +$list-group-active-bg: $component-active-bg ; +$list-group-active-border-color: $list-group-active-bg ; +$list-group-disabled-color: $gray-600 ; +$list-group-disabled-bg: $list-group-bg ; +$list-group-action-color: $gray-700 ; +$list-group-action-hover-color: $list-group-action-color ; +$list-group-action-active-color: $list-group-action-color ; +$list-group-action-active-bg: $gray-200 ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_main-content.scss b/frontend/src/assets/scss/custom/gradido-custom/_main-content.scss index d4787a666..83635acfa 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_main-content.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_main-content.scss @@ -1,4 +1,4 @@ // Main content -$main-content-padding-y: 40px !default; -$main-content-padding-x: 24px !default; // in px to combine with $grid-gutter-width +$main-content-padding-y: 40px ; +$main-content-padding-x: 24px ; // in px to combine with $grid-gutter-width diff --git a/frontend/src/assets/scss/custom/gradido-custom/_map.scss b/frontend/src/assets/scss/custom/gradido-custom/_map.scss index ded56e7cc..8de4e53cf 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_map.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_map.scss @@ -1,3 +1,3 @@ // Map -$map-height: 500px !default; +$map-height: 500px; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_modals.scss b/frontend/src/assets/scss/custom/gradido-custom/_modals.scss index a372d586d..7bbac85a4 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_modals.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_modals.scss @@ -1,20 +1,20 @@ // Modals -$modal-inner-padding: 1.5rem !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 380px !default; +$modal-inner-padding: 1.5rem ; +$modal-lg: 800px ; +$modal-md: 500px ; +$modal-sm: 380px ; $modal-title-line-height: 1.1; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, 0.2) !default; -$modal-content-border-width: 0 !default; -$modal-content-border-radius: $border-radius-lg !default; +$modal-content-bg: $white ; +$modal-content-border-color: rgba($black, 0.2) ; +$modal-content-border-width: 0 ; +$modal-content-border-radius: $border-radius-lg ; $modal-content-box-shadow-xs: 0 15px 35px rgb(50 50 93 / 20%), 0 5px 15px rgb(0 0 0 / 17%); $modal-content-box-shadow-sm-up: 0 15px 35px rgb(50 50 93 / 20%), 0 5px 15px rgb(0 0 0 / 17%); -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: 0.16 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1.25rem !default; +$modal-backdrop-bg: $black ; +$modal-backdrop-opacity: 0.16 ; +$modal-header-border-color: $gray-200 ; +$modal-footer-border-color: $modal-header-border-color ; +$modal-header-border-width: $modal-content-border-width ; +$modal-footer-border-width: $modal-header-border-width ; +$modal-header-padding: 1.25rem ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_navbar.scss b/frontend/src/assets/scss/custom/gradido-custom/_navbar.scss index 1f4abaf45..9dd386de0 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_navbar.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_navbar.scss @@ -1,41 +1,41 @@ // Navbar -$navbar-transition: all 0.15s linear !default; -$navbar-padding-y: 1rem !default; -$navbar-padding-x: 1rem !default; -$navbar-nav-link-padding-x: 1rem !default; -$navbar-nav-link-padding-y: 1rem !default; -$navbar-nav-link-font-size: 0.9rem !default; -$navbar-nav-link-font-weight: 400 !default; -$navbar-nav-link-text-transform: normal !default; -$navbar-nav-link-letter-spacing: 0 !default; -$navbar-nav-link-border-radius: $border-radius !default; -$navbar-search-width: 270px !default; -$navbar-search-bg: transparent !default; -$navbar-search-border-radius: 2rem !default; -$navbar-search-border-width: 2px !default; -$navbar-dark-bg: transparent !default; -$navbar-dark-hover-bg: rgb(255 255 255 / 10%) !default; -$navbar-dark-active-bg: rgb(255 255 255 / 10%) !default; -$navbar-dark-color: rgba($white, 0.95) !default; -$navbar-dark-hover-color: rgba($white, 0.65) !default; -$navbar-dark-active-color: rgba($white, 0.65) !default; -$navbar-dark-disabled-color: rgba($white, 0.25) !default; -$navbar-dark-toggler-border-color: transparent !default; -$navbar-search-dark-border-color: rgb(255 255 255 / 60%) !default; -$navbar-search-dark-color: rgb(255 255 255 / 60%) !default; -$navbar-search-dark-focus-border-color: rgb(255 255 255 / 90%) !default; -$navbar-search-dark-focus-color: rgb(255 255 255 / 90%) !default; -$navbar-light-bg: transparent !default; -$navbar-light-hover-bg: rgb(0 0 0 / 10%) !default; -$navbar-light-active-bg: rgb(0 0 0 / 10%) !default; -$navbar-light-border-color: $gray-100 !default; -$navbar-light-color: rgba($black, 0.5) !default; -$navbar-light-hover-color: rgba($black, 0.7) !default; -$navbar-light-active-color: rgba($black, 0.9) !default; -$navbar-light-disabled-color: rgba($black, 0.3) !default; -$navbar-light-toggler-border-color: transparent !default; -$navbar-search-light-border-color: rgb(0 0 0 / 60%) !default; -$navbar-search-light-color: rgb(0 0 0 / 60%) !default; -$navbar-search-light-focus-border-color: rgb(0 0 0 / 90%) !default; -$navbar-search-light-focus-color: rgb(0 0 0 / 90%) !default; +$navbar-transition: all 0.15s linear ; +$navbar-padding-y: 1rem ; +$navbar-padding-x: 1rem ; +$navbar-nav-link-padding-x: 1rem ; +$navbar-nav-link-padding-y: 1rem ; +$navbar-nav-link-font-size: 0.9rem ; +$navbar-nav-link-font-weight: 400 ; +$navbar-nav-link-text-transform: normal ; +$navbar-nav-link-letter-spacing: 0 ; +$navbar-nav-link-border-radius: $border-radius ; +$navbar-search-width: 270px ; +$navbar-search-bg: transparent ; +$navbar-search-border-radius: 2rem ; +$navbar-search-border-width: 2px ; +$navbar-dark-bg: transparent ; +$navbar-dark-hover-bg: rgb(255 255 255 / 10%) ; +$navbar-dark-active-bg: rgb(255 255 255 / 10%) ; +$navbar-dark-color: rgba($white, 0.95) ; +$navbar-dark-hover-color: rgba($white, 0.65) ; +$navbar-dark-active-color: rgba($white, 0.65) ; +$navbar-dark-disabled-color: rgba($white, 0.25) ; +$navbar-dark-toggler-border-color: transparent ; +$navbar-search-dark-border-color: rgb(255 255 255 / 60%) ; +$navbar-search-dark-color: rgb(255 255 255 / 60%) ; +$navbar-search-dark-focus-border-color: rgb(255 255 255 / 90%) ; +$navbar-search-dark-focus-color: rgb(255 255 255 / 90%) ; +$navbar-light-bg: transparent ; +$navbar-light-hover-bg: rgb(0 0 0 / 10%) ; +$navbar-light-active-bg: rgb(0 0 0 / 10%) ; +$navbar-light-border-color: $gray-100 ; +$navbar-light-color: rgba($black, 0.5) ; +$navbar-light-hover-color: rgba($black, 0.7) ; +$navbar-light-active-color: rgba($black, 0.9) ; +$navbar-light-disabled-color: rgba($black, 0.3) ; +$navbar-light-toggler-border-color: transparent ; +$navbar-search-light-border-color: rgb(0 0 0 / 60%) ; +$navbar-search-light-color: rgb(0 0 0 / 60%) ; +$navbar-search-light-focus-border-color: rgb(0 0 0 / 90%) ; +$navbar-search-light-focus-color: rgb(0 0 0 / 90%) ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_navs.scss b/frontend/src/assets/scss/custom/gradido-custom/_navs.scss index 52819a3e9..527be08fe 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_navs.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_navs.scss @@ -1,20 +1,20 @@ // Navs @use "sass:color"; -$nav-link-padding-y: 0.25rem !default; -$nav-link-padding-x: 0.75rem !default; -$nav-link-color: $gray-700 !default; -$nav-link-hover-color: $primary !default; -$nav-link-disabled-color: $gray-600 !default; -$nav-pills-padding-y: 0.75rem !default; -$nav-pills-padding-x: 1rem !default; -$nav-pills-space-x: 1rem !default; -$nav-pills-bg: $white !default; -$nav-pills-border-width: 1px !default; -$nav-pills-border-color: $primary !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-color: $primary !default; -$nav-pills-link-hover-color: color.adjust($primary, $lightness: -5%) !default; -$nav-pills-link-active-color: color-yiq($primary) !default; -$nav-pills-link-active-bg: $primary !default; -$nav-pills-box-shadow: $btn-box-shadow !default; +$nav-link-padding-y: 0.25rem ; +$nav-link-padding-x: 0.75rem ; +$nav-link-color: $gray-700 ; +$nav-link-hover-color: $primary ; +$nav-link-disabled-color: $gray-600 ; +$nav-pills-padding-y: 0.75rem ; +$nav-pills-padding-x: 1rem ; +$nav-pills-space-x: 1rem ; +$nav-pills-bg: $white ; +$nav-pills-border-width: 1px ; +$nav-pills-border-color: $primary ; +$nav-pills-border-radius: $border-radius ; +$nav-pills-link-color: $primary ; +$nav-pills-link-hover-color: color.adjust($primary, $lightness: -5%) ; +$nav-pills-link-active-color: color-yiq($primary) ; +$nav-pills-link-active-bg: $primary ; +$nav-pills-box-shadow: $btn-box-shadow ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_nouislider.scss b/frontend/src/assets/scss/custom/gradido-custom/_nouislider.scss index 4833b825d..10acdc57f 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_nouislider.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_nouislider.scss @@ -1,14 +1,14 @@ // No UI Slider -$noui-target-bg: #eceeef !default; -$noui-target-thickness: 5px !default; -$noui-target-border-radius: 5px !default; -$noui-target-border-color: 0 !default; -$noui-target-box-shadow: inset 0 1px 2px rgb(90 97 105 / 10%) !default; -$noui-slider-connect-bg: $primary !default; -$noui-slider-connect-disabled-bg: #b2b2b2 !default; -$noui-handle-width: 15px !default; -$noui-handle-bg: $primary !default; -$noui-handle-border: 0 !default; -$noui-handle-border-radius: 100% !default; -$noui-origin-border-radius: 2px !default; +$noui-target-bg: #eceeef ; +$noui-target-thickness: 5px ; +$noui-target-border-radius: 5px ; +$noui-target-border-color: 0 ; +$noui-target-box-shadow: inset 0 1px 2px rgb(90 97 105 / 10%) ; +$noui-slider-connect-bg: $primary ; +$noui-slider-connect-disabled-bg: #b2b2b2 ; +$noui-handle-width: 15px ; +$noui-handle-bg: $primary ; +$noui-handle-border: 0 ; +$noui-handle-border-radius: 100% ; +$noui-origin-border-radius: 2px ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_pagination.scss b/frontend/src/assets/scss/custom/gradido-custom/_pagination.scss index f98151d0b..9c806e7d2 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_pagination.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_pagination.scss @@ -1,27 +1,27 @@ // Pagination -// $pagination-padding-y: .5rem !default; -// $pagination-padding-x: .75rem !default; -// $pagination-padding-y-sm: .25rem !default; -// $pagination-padding-x-sm: .5rem !default; -// $pagination-padding-y-lg: .75rem !default; -// $pagination-padding-x-lg: 1.5rem !default; -// $pagination-line-height: 1.25 !default; +// $pagination-padding-y: .5rem ; +// $pagination-padding-x: .75rem ; +// $pagination-padding-y-sm: .25rem ; +// $pagination-padding-x-sm: .5rem ; +// $pagination-padding-y-lg: .75rem ; +// $pagination-padding-x-lg: 1.5rem ; +// $pagination-line-height: 1.25 ; -$pagination-color: $gray-600 !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-color: $gray-600 ; +$pagination-bg: $white ; +$pagination-border-width: $border-width ; +$pagination-border-color: $gray-300 ; -// $pagination-focus-box-shadow: $btn-hover-box-shadow !default; +// $pagination-focus-box-shadow: $btn-hover-box-shadow ; -$pagination-hover-color: $gray-600 !default; -$pagination-hover-bg: $gray-300 !default; -$pagination-hover-border-color: $gray-300 !default; -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; -$pagination-active-box-shadow: $btn-hover-box-shadow !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-hover-color: $gray-600 ; +$pagination-hover-bg: $gray-300 ; +$pagination-hover-border-color: $gray-300 ; +$pagination-active-color: $component-active-color ; +$pagination-active-bg: $component-active-bg ; +$pagination-active-border-color: $pagination-active-bg ; +$pagination-active-box-shadow: $btn-hover-box-shadow ; +$pagination-disabled-color: $gray-600 ; +$pagination-disabled-bg: $white ; +$pagination-disabled-border-color: $gray-300 ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_popovers.scss b/frontend/src/assets/scss/custom/gradido-custom/_popovers.scss index b5395f1d7..2e552e9e4 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_popovers.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_popovers.scss @@ -1,20 +1,20 @@ // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: 1px !default; -$popover-border-color: rgba($black, 0.05) !default; -$popover-border-radius: $border-radius-lg !default; -$popover-box-shadow: 0 0.5rem 2rem 0 rgba($black, 0.2) !default; -$popover-header-bg: $popover-bg !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: 0.5rem !default; -$popover-header-padding-x: 0.95rem !default; -$popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-width: 1.5rem !default; -$popover-arrow-height: 0.75rem !default; -$popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-color: transparent !default; +$popover-font-size: $font-size-sm ; +$popover-bg: $white ; +$popover-max-width: 276px ; +$popover-border-width: 1px ; +$popover-border-color: rgba($black, 0.05) ; +$popover-border-radius: $border-radius-lg ; +$popover-box-shadow: 0 0.5rem 2rem 0 rgba($black, 0.2) ; +$popover-header-bg: $popover-bg ; +$popover-header-color: $headings-color ; +$popover-header-padding-y: 0.5rem ; +$popover-header-padding-x: 0.95rem ; +$popover-body-color: $body-color ; +$popover-body-padding-y: $popover-header-padding-y ; +$popover-body-padding-x: $popover-header-padding-x ; +$popover-arrow-width: 1.5rem ; +$popover-arrow-height: 0.75rem ; +$popover-arrow-color: $popover-bg ; +$popover-arrow-outer-color: transparent ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_spacing.scss b/frontend/src/assets/scss/custom/gradido-custom/_spacing.scss index eaafdcb22..f08d5fdfd 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_spacing.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_spacing.scss @@ -1,8 +1,8 @@ // Spacing @use "sass:map"; -$spacer: 1rem !default; -$spacers: () !default; +$spacer: 1rem; +$spacers: (); $spacers: map.merge( ( -9: - ($spacer * 10), diff --git a/frontend/src/assets/scss/custom/gradido-custom/_tables.scss b/frontend/src/assets/scss/custom/gradido-custom/_tables.scss index 89460cee7..74de75777 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_tables.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_tables.scss @@ -1,26 +1,26 @@ // Tables @use "sass:color"; -$table-cell-padding: 1rem !default; -$table-cell-padding-sm: 0.5rem !default; -$table-bg: transparent !default; -$table-accent-bg: rgba($black, 0.05) !default; -$table-hover-bg: $gray-100 !default; -$table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-200 !default; -$table-head-bg: $gray-100 !default; -$table-head-color: $gray-600 !default; -$table-head-spacer-y: 0.75rem !default; -$table-head-font-size: 0.65rem !default; -$table-head-font-weight: $font-weight-bold !default; -$table-head-text-transform: uppercase !default; -$table-head-letter-spacing: 1px !default; -$table-body-font-size: 0.8125rem !default; -$table-dark-bg: $default !default; -$table-dark-accent-bg: rgba($white, 0.05) !default; -$table-dark-hover-bg: rgba($white, 0.075) !default; -$table-dark-border-color: color.adjust($default, $lightness: 7%) !default; -$table-dark-color: $body-bg !default; -$table-dark-head-bg: color.adjust($default, $lightness: 4%) !default; -$table-dark-head-color: color.adjust($default, $lightness: 35%) !default; +$table-cell-padding: 1rem ; +$table-cell-padding-sm: 0.5rem ; +$table-bg: transparent ; +$table-accent-bg: rgba($black, 0.05) ; +$table-hover-bg: $gray-100 ; +$table-active-bg: $table-hover-bg ; +$table-border-width: $border-width ; +$table-border-color: $gray-200 ; +$table-head-bg: $gray-100 ; +$table-head-color: $gray-600 ; +$table-head-spacer-y: 0.75rem ; +$table-head-font-size: 0.65rem ; +$table-head-font-weight: $font-weight-bold ; +$table-head-text-transform: uppercase ; +$table-head-letter-spacing: 1px ; +$table-body-font-size: 0.8125rem ; +$table-dark-bg: $default ; +$table-dark-accent-bg: rgba($white, 0.05) ; +$table-dark-hover-bg: rgba($white, 0.075) ; +$table-dark-border-color: color.adjust($default, $lightness: 7%) ; +$table-dark-color: $body-bg ; +$table-dark-head-bg: color.adjust($default, $lightness: 4%) ; +$table-dark-head-color: color.adjust($default, $lightness: 35%) ; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_tooltips.scss b/frontend/src/assets/scss/custom/gradido-custom/_tooltips.scss index 63f9ea078..b038d6f13 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_tooltips.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_tooltips.scss @@ -1,3 +1,3 @@ // Tooltips -$tooltip-font-size: $font-size-sm !default; +$tooltip-font-size: $font-size-sm; diff --git a/frontend/src/assets/scss/custom/gradido-custom/_vertical-navbar.scss b/frontend/src/assets/scss/custom/gradido-custom/_vertical-navbar.scss index 4b05084e8..6841d5f74 100644 --- a/frontend/src/assets/scss/custom/gradido-custom/_vertical-navbar.scss +++ b/frontend/src/assets/scss/custom/gradido-custom/_vertical-navbar.scss @@ -1,12 +1,12 @@ // Vertical navbar $navbar-vertical-box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%) !important; -$navbar-vertical-width: 250px !default; -$navbar-vertical-padding-x: 1.5rem !default; -$navbar-vertical-nav-link-padding-x: 1.5rem !default; -$navbar-vertical-nav-link-padding-y: 0.65rem !default; -$navbar-icon-min-width: 2.25rem !default; -$navbar-breadcrumb-padding-y: $nav-link-padding-y !default; -$navbar-breadcrumb-padding-x: 0 !default; -$navbar-light-bg: $white !default; -$navbar-light-border-color: $border-color !default; +$navbar-vertical-width: 250px ; +$navbar-vertical-padding-x: 1.5rem ; +$navbar-vertical-nav-link-padding-x: 1.5rem ; +$navbar-vertical-nav-link-padding-y: 0.65rem ; +$navbar-icon-min-width: 2.25rem ; +$navbar-breadcrumb-padding-y: $nav-link-padding-y ; +$navbar-breadcrumb-padding-x: 0 ; +$navbar-light-bg: $white ; +$navbar-light-border-color: $border-color ; diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index f9afa1f29..35b6b8581 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -1,18 +1,18 @@ -html, -body { +html > body { background-color: #f5f5f5; height: 100%; transition: background-color 0.5s ease, color 0.5s ease; + overflow-x: hidden; } .pointer { cursor: pointer; } -.bg-gradient { +.bg-gradido-gradient { background: rgb(4 112 6); background: linear-gradient(90deg, rgb(4 112 6 / 100%) 22%, rgb(197 141 56 / 100%) 98%) !important; - color: white; + color: white !important; } .hover-icon:hover { @@ -41,12 +41,16 @@ body { color: #0e79bc !important; } +.app-box-shadow { + box-shadow: 20pt 20pt 50pt 0 #3838384f; +} + /* Navbar */ a, .navbar-light, .navbar-nav, .nav-link { - color: #047006; + color: #047006 !important; } a:hover, @@ -116,12 +120,12 @@ a:hover, } .form-control, -.custom-select { +.form-select { border-radius: 17px; height: 50px; } -.input-group .rounded-right { +.input-group .rounded-end { border-top-right-radius: 17px !important; border-bottom-right-radius: 17px !important; } @@ -256,7 +260,7 @@ a:hover, .gradido-custom-background { background-color: #ebebeba3 !important; - border-radius: 25pt; + border-radius: 25pt !important; } .gradido-bg-f5 { diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss index 8f90c060c..ed81832e4 100644 --- a/frontend/src/assets/scss/gradido.scss +++ b/frontend/src/assets/scss/gradido.scss @@ -2,13 +2,19 @@ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/maps"; +@import "custom/variables"; +@import "gradido-template"; +@import "gradido-template-dark"; + // @import "~bootstrap/scss/variables"; wird am // ende der custom/variables angehangen // Bootstrap (4.5.3) mixins -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; +// @import "bootstrap/scss/maps"; +// @import "bootstrap/scss/mixins"; // Bootstrap (4.5.3) components @@ -20,20 +26,9 @@ @import "bootstrap/scss/card"; @import "bootstrap/scss/carousel"; @import "bootstrap/scss/close"; - -// @import "bootstrap/scss/code"; -// @import "bootstrap/scss/custom-forms"; - -// @import "~bootstrap/scss/dropdown"; @import "bootstrap/scss/forms"; - -// @import "~bootstrap/scss/functions"; @import "bootstrap/scss/grid"; - -// @import "bootstrap/scss/input-group"; @import "bootstrap/scss/list-group"; - -// @import "~bootstrap/scss/mixins"; @import "bootstrap/scss/modal"; @import "bootstrap/scss/nav"; @import "bootstrap/scss/navbar"; @@ -55,6 +50,3 @@ @import "bootstrap/scss/bootstrap"; // Bootstrap-vue (2.21.1) scss -@import "custom/variables"; -@import "gradido-template"; -@import "gradido-template-dark"; diff --git a/frontend/src/components/Auth/AuthFooter.vue b/frontend/src/components/Auth/AuthFooter.vue index 38a709044..232e66a3d 100644 --- a/frontend/src/components/Auth/AuthFooter.vue +++ b/frontend/src/components/Auth/AuthFooter.vue @@ -3,7 +3,7 @@
@@ -16,19 +16,19 @@
-
+
{{ $t('followUs') }} - - + + - - + + - - + + @@ -57,8 +57,8 @@ export default { } - diff --git a/frontend/src/components/Auth/AuthNavbar.vue b/frontend/src/components/Auth/AuthNavbar.vue index a9ced74ae..280163788 100644 --- a/frontend/src/components/Auth/AuthNavbar.vue +++ b/frontend/src/components/Auth/AuthNavbar.vue @@ -2,14 +2,14 @@
- - + + - - {{ $t('signup') }} - {{ $t('|') }} + + {{ $t('signup') }} + {{ $t('|') }} {{ $t('signin') }} @@ -37,8 +37,9 @@ const sheet = '/img/template/Blaetter.png' } } -.auth-navbar > :deep(.nav-link) { +.auth-navbar > :deep(a) { color: #0e79bc !important; + padding: 4px 16px; } .auth-navbar > :deep(.router-link-exact-active) { @@ -51,6 +52,14 @@ const sheet = '/img/template/Blaetter.png' z-index: 1; } +.auth-header > nav { + padding: 0 !important; +} + +.auth-header > nav > :deep(.navbar-brand) { + padding: 0 !important; +} + :deep(#nav-collapse) { justify-content: flex-end; } diff --git a/frontend/src/components/CommunitySwitch.vue b/frontend/src/components/CommunitySwitch.vue index ce91cecc3..e16b72a9c 100644 --- a/frontend/src/components/CommunitySwitch.vue +++ b/frontend/src/components/CommunitySwitch.vue @@ -15,7 +15,7 @@
- {{ modelValue.name }} + {{ modelValue.name }}
@@ -92,11 +92,3 @@ function setDefaultCommunity() { onMounted(setDefaultCommunity) onUpdated(setDefaultCommunity) - - diff --git a/frontend/src/components/ContentFooter.vue b/frontend/src/components/ContentFooter.vue index 0266c56db..e749d0cd9 100755 --- a/frontend/src/components/ContentFooter.vue +++ b/frontend/src/components/ContentFooter.vue @@ -4,11 +4,7 @@
{{ $t('footer.copyright.year', { year }) }} - + {{ $t('footer.copyright.link') }} {{ $t('|') }} @@ -67,3 +63,9 @@ export default { }, } + + diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue index b3241b513..eecafd3c6 100644 --- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue +++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue @@ -1,6 +1,6 @@