IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 09:56:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): scss changes and fixes (#3358)

Browse Source
This commit is contained in:
MateuszMichalowski 2024-08-21 09:10:17 +02:00 committed by GitHub
parent f2cf1c622d
commit 57e54d60dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
82 changed files with 848 additions and 757 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.vue
View File

@ -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;

25
frontend/src/assets/scss/custom/_variables.scss
View File

@ -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";

12
frontend/src/assets/scss/custom/gradido-custom/_alerts.scss
View File

@ -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 ;

16
frontend/src/assets/scss/custom/gradido-custom/_badges.scss
View File

@ -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 ;

4
frontend/src/assets/scss/custom/gradido-custom/_body.scss
View File

@ -1,4 +1,4 @@
// Body
$body-bg: #fff !default;
$body-color: $gray-700 !default;
$body-bg: #fff;
$body-color: $gray-700;

32
frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss
View File

@ -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 ;

44
frontend/src/assets/scss/custom/gradido-custom/_buttons.scss
View File

@ -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;
}

26
frontend/src/assets/scss/custom/gradido-custom/_cards.scss
View File

@ -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 ;

12
frontend/src/assets/scss/custom/gradido-custom/_chart.scss
View File

@ -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 ;

14
frontend/src/assets/scss/custom/gradido-custom/_close.scss
View File

@ -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 ;

136
frontend/src/assets/scss/custom/gradido-custom/_color.scss
View File

@ -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 ;

44
frontend/src/assets/scss/custom/gradido-custom/_components.scss
View File

@ -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 ;

54
frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss
View File

@ -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") ;

6
frontend/src/assets/scss/custom/gradido-custom/_custom-toogle.scss
View File

@ -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 ;

34
frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss
View File

@ -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 ;

10
frontend/src/assets/scss/custom/gradido-custom/_dropdown.scss
View File

@ -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%) ;

112
frontend/src/assets/scss/custom/gradido-custom/_fonts.scss
View File

@ -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 ;

14
frontend/src/assets/scss/custom/gradido-custom/_footer.scss
View File

@ -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 ;

2
frontend/src/assets/scss/custom/gradido-custom/_form-groups.scss
View File

@ -1,3 +1,3 @@
// Form group
$form-group-margin-bottom: 1.5rem !default;
$form-group-margin-bottom: 1.5rem ;

8
frontend/src/assets/scss/custom/gradido-custom/_form-validation.scss
View File

@ -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 ;

14
frontend/src/assets/scss/custom/gradido-custom/_global.scss
View File

@ -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 ;

8
frontend/src/assets/scss/custom/gradido-custom/_icons.scss
View File

@ -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 ;

12
frontend/src/assets/scss/custom/gradido-custom/_input-groups.scss
View File

@ -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 ;

62
frontend/src/assets/scss/custom/gradido-custom/_input.scss
View File

@ -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) ;

8
frontend/src/assets/scss/custom/gradido-custom/_links.scss
View File

@ -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 ;

32
frontend/src/assets/scss/custom/gradido-custom/_list-group.scss
View File

@ -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 ;

4
frontend/src/assets/scss/custom/gradido-custom/_main-content.scss
View File

@ -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

2
frontend/src/assets/scss/custom/gradido-custom/_map.scss
View File

@ -1,3 +1,3 @@
// Map
$map-height: 500px !default;
$map-height: 500px;

30
frontend/src/assets/scss/custom/gradido-custom/_modals.scss
View File

@ -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 ;

78
frontend/src/assets/scss/custom/gradido-custom/_navbar.scss
View File

@ -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%) ;

34
frontend/src/assets/scss/custom/gradido-custom/_navs.scss
View File

@ -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 ;

24
frontend/src/assets/scss/custom/gradido-custom/_nouislider.scss
View File

@ -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 ;

44
frontend/src/assets/scss/custom/gradido-custom/_pagination.scss
View File

@ -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 ;

36
frontend/src/assets/scss/custom/gradido-custom/_popovers.scss
View File

@ -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 ;

4
frontend/src/assets/scss/custom/gradido-custom/_spacing.scss
View File

@ -1,8 +1,8 @@
// Spacing
@use "sass:map";
$spacer: 1rem !default;
$spacers: () !default;
$spacer: 1rem;
$spacers: ();
$spacers: map.merge(
(
-9: - ($spacer * 10),

46
frontend/src/assets/scss/custom/gradido-custom/_tables.scss
View File

@ -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%) ;

2
frontend/src/assets/scss/custom/gradido-custom/_tooltips.scss
View File

@ -1,3 +1,3 @@
// Tooltips
$tooltip-font-size: $font-size-sm !default;
$tooltip-font-size: $font-size-sm;

18
frontend/src/assets/scss/custom/gradido-custom/_vertical-navbar.scss
View File

@ -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 ;

20
frontend/src/assets/scss/gradido-template.scss
View File

@ -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 {

24
frontend/src/assets/scss/gradido.scss
View File

@ -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";

22
frontend/src/components/Auth/AuthFooter.vue
View File

@ -3,7 +3,7 @@
<BRow class="mt-lg-7 mt-md-6 mt-4">
<BCol class="col-12 col-md-12 col-lg-6">
<div
class="d-flex justify-content-center justify-content-md-center justify-content-lg-start ml-3"
class="d-flex justify-content-center justify-content-md-center justify-content-lg-start ms-3"
>
<BNav class="nav-footer">
<BNavItem :href="`https://gradido.net/${$i18n.locale}/impressum/`" target="_blank">
@ -16,19 +16,19 @@
</div>
</BCol>
<BCol class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
<div class="d-flex align-items-center ml-3 ml-lg-0 text-lg-right pt-1">
<div class="d-flex align-items-center ms-3 ms-lg-0 text-lg-right pt-1">
{{ $t('followUs') }}
<BLink href="https://www.facebook.com/groups/Gradido/" target="_blank">
<!-- <b-icon-facebook class="ml-3 mr-3 c-grey" font-scale="1"></b-icon-facebook>-->
<IBiFacebook class="ml-3 mr-3 c-grey" />
<!-- <b-icon-facebook class="ml-3 me-3 c-grey" font-scale="1"></b-icon-facebook>-->
<IBiFacebook class="ms-3 me-3 c-grey" />
</BLink>
<BLink href="https://twitter.com/gradido" target="_blank">
<!-- <b-icon-twitter class="mr-3 c-grey" font-scale="1"></b-icon-twitter>-->
<IBiTwitterX class="mr-3 c-grey" font-scale="1" />
<!-- <b-icon-twitter class="me-3 c-grey" font-scale="1"></b-icon-twitter>-->
<IBiTwitterX class="me-3 c-grey" font-scale="1" />
</BLink>
<BLink href="https://www.youtube.com/c/GradidoNet" target="_blank">
<!-- <b-icon-youtube class="mr-3 c-grey" font-scale="1"></b-icon-youtube>-->
<IBiYoutube class="mr-3 c-grey" font-scale="1" />
<!-- <b-icon-youtube class="me-3 c-grey" font-scale="1"></b-icon-youtube>-->
<IBiYoutube class="me-3 c-grey" font-scale="1" />
</BLink>
<BLink href="https://t.me/Gradido" target="_blank">
@ -57,8 +57,8 @@ export default {
}
</script>
<style>
.bi-telegram {
margin-top: -5px;
<style scoped>
:deep(.nav-link) {
color: #383838 !important;
}
</style>

21
frontend/src/components/Auth/AuthNavbar.vue
View File

@ -2,14 +2,14 @@
<div class="auth-header position-sticky">
<BNavbar :toggleable="false" :container="false" class="d-flex">
<BNavbarBrand class="d-none d-lg-block">
<BImg class="position-absolute ml--3 mt-lg--2 p-2" :src="logo" width="200" alt="Logo" />
<BImg class="mt--3 ml--3" :src="backgroundHeader" width="230" alt="Background Image"></BImg>
<BImg class="position-absolute p-2" :src="logo" width="200" alt="Logo" />
<BImg :src="backgroundHeader" width="230" alt="Background Image"></BImg>
</BNavbarBrand>
<BImg class="sheet-img position-absolute d-block d-lg-none zindex1000" :src="sheet"></BImg>
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav class="ml-auto d-none d-lg-flex" right>
<BNavItem :to="register()" class="auth-navbar ml-lg-5">{{ $t('signup') }}</BNavItem>
<span class="d-none d-lg-block">{{ $t('|') }}</span>
<BNavbarNav class="ms-auto me-4 d-none d-lg-flex" right>
<BNavItem :to="register()" class="auth-navbar ms-lg-5">{{ $t('signup') }}</BNavItem>
<span class="d-none d-lg-block py-1">{{ $t('|') }}</span>
<BNavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</BNavItem>
</BNavbarNav>
</BCollapse>
@ -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;
}

10
frontend/src/components/CommunitySwitch.vue
View File

@ -15,7 +15,7 @@
</div>
<div v-else class="mb-4 mt-2">
<BRow>
<BCol class="font-weight-bold" :title="modelValue.description">{{ modelValue.name }}</BCol>
<BCol class="fw-bold" :title="modelValue.description">{{ modelValue.name }}</BCol>
</BRow>
</div>
</div>
@ -92,11 +92,3 @@ function setDefaultCommunity() {
onMounted(setDefaultCommunity)
onUpdated(setDefaultCommunity)
</script>
<style scoped lang="scss">
.community-switch {
:deep(button) {
background-color: $secondary;
}
}
</style>

12
frontend/src/components/ContentFooter.vue
View File

@ -4,11 +4,7 @@
<BCol>
<div class="copyright text-center text-lg-center text-muted">
{{ $t('footer.copyright.year', { year }) }}
<a
:href="`https://gradido.net/${$i18n.locale}`"
class="font-weight-bold ml-1"
target="_blank"
>
<a :href="`https://gradido.net/${$i18n.locale}`" class="fw-bold ms-1" target="_blank">
{{ $t('footer.copyright.link') }}
</a>
{{ $t('|') }}
@ -67,3 +63,9 @@ export default {
},
}
</script>
<style scoped>
:deep(a.nav-link) {
color: #383838 !important;
}
</style>

2
frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="contribution-messages-formular">
<small class="pl-2 pt-3">{{ $t('form.reply') }}</small>
<small class="ps-2 pt-3">{{ $t('form.reply') }}</small>
<div>
<BForm @submit.prevent="onSubmit" @reset="onReset">
<BFormTextarea

10
frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
View File

@ -4,10 +4,10 @@
<BRow class="mb-3 border border-197 p-1">
<BCol cols="10">
<small>{{ $d(new Date(message.createdAt), 'short') }}</small>
<div v-if="isNotModerator" class="font-weight-bold" data-test="username">
<div v-if="isNotModerator" class="fw-bold" data-test="username">
{{ storeName.username }} {{ $t('contribution.isEdited') }}
</div>
<div v-else class="font-weight-bold" data-test="moderator-name">
<div v-else class="fw-bold" data-test="moderator-name">
{{ $t('community.moderator') }} {{ $t('contribution.isEdited') }}
</div>
<div class="small">
@ -20,10 +20,10 @@
</BCol>
</BRow>
</div>
<div v-else-if="isNotModerator" class="text-right pr-4 pr-lg-0 is-not-moderator">
<div v-else-if="isNotModerator" class="text-right pe-4 pe-lg-0 is-not-moderator">
<BRow class="mb-3">
<BCol cols="10">
<div class="font-weight-bold" data-test="username">{{ storeName.username }}</div>
<div class="fw-bold" data-test="username">{{ storeName.username }}</div>
<div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
<parse-message v-bind="message" data-test="message"></parse-message>
</BCol>
@ -40,7 +40,7 @@
<BCol cols="10">
<div class="font-weight-bold">
<span data-test="username">{{ moderationName.username }}</span>
<span class="ml-2 text-success small" data-test="moderator">
<span class="ms-2 text-success small" data-test="moderator">
{{ $t('community.moderator') }}
</span>
</div>

16
frontend/src/components/Contributions/ContributionListItem.vue
View File

@ -11,7 +11,7 @@
:username="username.username"
:initials="username.initials"
color="#fff"
class="font-weight-bold"
class="fw-bold"
></avatar>
<BAvatar v-else rounded="lg" :variant="variant" size="4em">
<IBiTrash v-if="deletedAt" />
@ -22,7 +22,7 @@
</BAvatar>
</BCol>
<BCol>
<div v-if="firstName" class="mr-3 font-weight-bold">
<div v-if="firstName" class="me-3 fw-bold">
{{ firstName }} {{ lastName }}
<IBiTrash v-if="deletedAt" />
<IBiXCircle v-else-if="deniedAt" />
@ -33,7 +33,7 @@
<div class="small">
{{ $d(new Date(contributionDate), 'short') }}
</div>
<div class="mt-3 font-weight-bold">{{ $t('contributionText') }}</div>
<div class="mt-3 fw-bold">{{ $t('contributionText') }}</div>
<div class="mb-3 text-break word-break">{{ memo }}</div>
<div v-if="updatedBy > 0" class="mt-2 mb-2 small">
{{ $t('moderatorChangedMemo') }}
@ -50,7 +50,7 @@
<div class="small">
{{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
</div>
<div v-if="status === 'DENIED' && allContribution" class="font-weight-bold">
<div v-if="status === 'DENIED' && allContribution" class="fw-bold">
<!-- <b-icon icon="x-circle" variant="danger"></b-icon>-->
<IBiXCircle />
{{ $t('contribution.alert.denied') }}
@ -58,7 +58,7 @@
<div v-if="status === 'DELETED'" class="small">
{{ $t('contribution.deleted') }}
</div>
<div v-else class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
<div v-else class="fw-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right align-items-center">
<div v-if="messagesCount > 0 && !moderatorId" @click="visible = !visible">
@ -70,10 +70,10 @@
v-if="(!['CONFIRMED', 'DELETED'].includes(status) && !allContribution) || messagesCount > 0"
class="p-2"
>
<BCol cols="3" class="mr-auto text-center">
<BCol cols="3" class="me-auto text-center">
<div
v-if="!['CONFIRMED', 'DELETED'].includes(status) && !allContribution && !moderatorId"
class="test-delete-contribution pointer mr-3"
class="test-delete-contribution pointer me-3"
@click="deleteContribution({ id })"
>
<IBiTrash />
@ -84,7 +84,7 @@
<BCol cols="3" class="text-center">
<div
v-if="!['CONFIRMED', 'DELETED'].includes(status) && !allContribution && !moderatorId"
class="test-edit-contribution pointer mr-3"
class="test-edit-contribution pointer me-3"
@click="
$emit('update-contribution-form', {
id: id,

24
frontend/src/components/Contributions/OpenCreationsAmount.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="bg-white app-box-shadow gradido-border-radius p-3">
<div class="pl-3">
<div class="ps-3">
<BRow class="small">
<BCol>{{ $t('time.months') }}</BCol>
<BCol class="d-none d-md-inline">{{ $t('status') }}</BCol>
@ -8,26 +8,26 @@
<BCol class="text-center">{{ $t('openHours') }}</BCol>
</BRow>
<BRow class="font-weight-bold pt-3">
<BRow class="fw-bold pt-3">
<BCol>{{ $d(new Date(minimalDate), 'monthAndYear') }}</BCol>
<BCol class="d-none d-md-inline">
{{ maxGddLastMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
</BCol>
<BCol class="d-none d-md-inline text-197 text-center">
<BCol class="d-none d-md-inline text-gold text-center">
{{ hoursSubmittedLastMonth }} {{ $t('h') }}
</BCol>
<BCol class="text-4 text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</BCol>
<BCol class="text-green text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</BCol>
</BRow>
<BRow class="font-weight-bold">
<BRow class="fw-bold">
<BCol>{{ $d(new Date(), 'monthAndYear') }}</BCol>
<BCol class="d-none d-md-inline">
{{ maxGddThisMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
</BCol>
<BCol class="d-none d-md-inline text-197 text-center">
<BCol class="d-none d-md-inline text-gold text-center">
{{ hoursSubmittedThisMonth }} {{ $t('h') }}
</BCol>
<BCol class="text-4 text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</BCol>
<BCol class="text-green text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</BCol>
</BRow>
</div>
</div>
@ -56,3 +56,13 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.text-gold {
color: #c58d38 !important;
}
.text-green {
color: #047006 !important;
}
</style>

2
frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="decayinformation-startblock">
<div class="my-4">
<div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
<div class="fw-bold pb-2">{{ $t('form.memo') }}</div>
<div>{{ memo }}</div>
</div>
<div class="mt-3 mb-3 text-center">

2
frontend/src/components/DecayInformations/DecayInformation-Decay.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="decayinformation-decay">
<div class="mb-3">
<IBiDropletHalf class="mr-2" />
<IBiDropletHalf class="me-2" />
<b>{{ $t('decay.calculation_decay') }}</b>
</div>
<BRow>

2
frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
View File

@ -3,7 +3,7 @@
<BRow>
<BCol cols="12">
<div class="text-center pb-3">
<IBiDropletHalf class="mr-2" />
<IBiDropletHalf class="me-2" />
<b>{{ $t('decay.Starting_block_decay') }}</b>
</div>
</BCol>

14
frontend/src/components/DecayInformations/DecayInformation-Long.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="decayinformation-long px-1">
<div class="word-break mb-5 mt-lg-3">
<div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
<div class="fw-bold pb-2">{{ $t('form.memo') }}</div>
<div class="">{{ memo }}</div>
</div>
<div class="mb-3">
<IBiDropletHalf class="mr-2" />
<IBiDropletHalf class="me-2" />
<b>{{ $t('decay.calculation_decay') }}</b>
</div>
<BRow>
@ -14,7 +14,7 @@
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.last_transaction') }}</div>
</BCol>
<BCol offset="0" class="text-right mr-0">
<BCol offset="0" class="text-right me-0">
<div>
<span>
{{ $d(new Date(decay.start), 'long') }}
@ -29,7 +29,7 @@
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.old_balance') }}</div>
</BCol>
<BCol offset="0" class="text-right mr-0">
<BCol offset="0" class="text-right me-0">
{{ $filters.GDD(previousBalance) }}
</BCol>
</BRow>
@ -39,7 +39,7 @@
<BCol cols="6" lg="3" md="6" sm="6">
<div>{{ $t('decay.decay') }}</div>
</BCol>
<BCol offset="0" class="text-right mr-0">
<BCol offset="0" class="text-right me-0">
{{ $filters.GDD(decay.decay) }}
</BCol>
</BRow>
@ -54,7 +54,7 @@
{{ $t(`decay.types.${typeId.toLowerCase()}`) }}
</BCol>
<!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
<BCol offset="0" class="text-right mr-0">
<BCol offset="0" class="text-right me-0">
{{ $filters.GDD(amount) }}
</BCol>
</BRow>
@ -63,7 +63,7 @@
<BCol cols="6" lg="3" md="6" sm="6">
<div>{{ $t('decay.new_balance') }}</div>
</BCol>
<BCol offset="0" class="text-right mr-0">
<BCol offset="0" class="text-right me-0">
<b>{{ $filters.GDD(balance) }}</b>
</BCol>
</BRow>

8
frontend/src/components/GddSend/TransactionConfirmationLink.vue
View File

@ -13,17 +13,17 @@
</BCol>
</BRow>
<BRow class="mt-5 pr-3 text-color-gdd-yellow h3">
<BRow class="mt-5 pe-3 text-color-gdd-yellow h3">
<BCol cols="2" class="text-right">
<b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
</BCol>
<BCol>{{ $t('advanced-calculation') }}</BCol>
</BRow>
<BRow class="pr-3" offset="2">
<BRow class="pe-3" offset="2">
<BCol offset="2">{{ $t('form.current_balance') }}</BCol>
<BCol>{{ $filters.GDD(balance) }}</BCol>
</BRow>
<BRow class="pr-3">
<BRow class="pe-3">
<BCol offset="2">
<strong>{{ $t('form.your_amount') }}</strong>
</BCol>
@ -31,7 +31,7 @@
<strong>{{ $filters.GDD(amount * -1) }}</strong>
</BCol>
</BRow>
<BRow class="pr-3">
<BRow class="pe-3">
<BCol offset="2">{{ $t('form.new_balance') }}</BCol>
<BCol>{{ $filters.GDD(balance - amount) }}</BCol>
</BRow>

6
frontend/src/components/GddSend/TransactionConfirmationSend.vue
View File

@ -29,11 +29,11 @@
</BCol>
<BCol>{{ $t('advanced-calculation') }}</BCol>
</BRow>
<BRow class="pr-3" offset="2">
<BRow class="pe-3" offset="2">
<BCol offset="2">{{ $t('form.current_balance') }}</BCol>
<BCol>{{ $filters.GDD(balance) }}</BCol>
</BRow>
<BRow class="pr-3">
<BRow class="pe-3">
<BCol offset="2">
<strong>{{ $t('form.your_amount') }}</strong>
</BCol>
@ -41,7 +41,7 @@
<strong>{{ $filters.GDD(amount * -1) }}</strong>
</BCol>
</BRow>
<BRow class="pr-3">
<BRow class="pe-3">
<BCol offset="2">{{ $t('form.new_balance') }}</BCol>
<BCol>{{ $filters.GDD(balance - amount) }}</BCol>
</BRow>

65
frontend/src/components/GddSend/TransactionForm.vue
View File

@ -10,27 +10,27 @@
@update:model-value="radioSelected = $event"
>
<BRow class="mb-4">
<BCol cols="12" lg="6">
<BRow class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
<BCol>
<BRow class="bg-248 gradido-border-radius position-relative">
<BFormRadio
name="shipping"
size="sm"
size="md"
reverse
:value="SEND_TYPES.send"
class="custom-radio-button pointer"
class="transaction-form-radio"
>
{{ $t('send_gdd') }}
</BFormRadio>
</BRow>
</BCol>
<BCol>
<BRow class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
<BRow class="bg-248 gradido-border-radius position-relative">
<BFormRadio
name="shipping"
:value="SEND_TYPES.link"
size="sm"
size="md"
reverse
class="custom-radio-button"
class="transaction-form-radio"
>
{{ $t('send_per_link') }}
</BFormRadio>
@ -44,7 +44,7 @@
{{ $t('gdd_per_link.choose-amount') }}
</div>
</div>
<BRow>
<BRow class="mb-4">
<BCol>
<BRow>
<BCol v-if="radioSelected === SEND_TYPES.send" class="mb-4" cols="12">
@ -52,7 +52,7 @@
<BCol>{{ $t('form.recipientCommunity') }}</BCol>
</BRow>
<BRow>
<BCol class="font-weight-bold">
<BCol class="fw-bold">
<community-switch
:disabled="isBalanceDisabled"
:model-value="targetCommunity"
@ -71,11 +71,11 @@
/>
</div>
<div v-else class="mb-4">
<BRow>
<BRow class="mb-4">
<BCol>{{ $t('form.recipient') }}</BCol>
</BRow>
<BRow>
<BCol class="font-weight-bold">{{ userName }}</BCol>
<BRow class="mb-4">
<BCol class="fw-bold">{{ userName }}</BCol>
</BRow>
</div>
</BCol>
@ -247,18 +247,49 @@ span.errors {
label {
display: block;
margin-bottom: 10px;
text-align: start;
padding: 8px 15px;
}
.custom-control-input:checked ~ .custom-control-label::before {
.form-check-input:checked {
display: none;
}
.form-check-input:checked ~ .form-check-label::before {
content: '';
color: #678000;
border-color: #678000;
background-color: #f1f2ec;
background-color: transparent;
border: 1px #678000 solid;
width: 14px;
height: 14px;
border-radius: 100%;
right: 12px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
.form-check .form-check-input:checked ~ .form-check-label::after {
content: '\2714';
margin-left: 5px;
color: #678000;
right: 10px;
position: absolute;
top: 50%;
transform: translateY(-60%);
}
.transaction-form-radio {
background-color: #f8f8f8;
margin-right: 0;
margin-bottom: 0;
position: relative;
> input {
position: absolute;
right: 35px;
top: 50%;
transform: translateY(-70%);
}
}
</style>

4
frontend/src/components/GddTransactionList.spec.js
View File

@ -241,7 +241,7 @@ describe('GddTransactionList', () => {
it('has a bi-droplet-half icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-droplet-half',
'mr-2',
'me-2',
'b-icon',
'bi',
])
@ -250,7 +250,7 @@ describe('GddTransactionList', () => {
it.skip('has text-danger color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-droplet-half',
'mr-2',
'me-2',
'b-icon',
'bi',
])

8
frontend/src/components/GddTransactionList.vue
View File

@ -2,15 +2,15 @@
<div class="gdd-transaction-list">
<div class="list-group">
<div v-if="!transactions" class="test-no-transactionlist text-right">
<!-- <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="mr-2" />
<!-- <b-icon icon="exclamation-triangle" class="me-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="me-2" />
<small>
{{ $t('error.no-transactionlist') }}
</small>
</div>
<div v-if="transactionCount < 0" class="test-empty-transactionlist text-right">
<!-- <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="mr-2" />
<!-- <b-icon icon="exclamation-triangle" class="me-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="me-2" />
<small>{{ $t('error.empty-transactionlist') }}</small>
</div>

2
frontend/src/components/Inputs/InputPassword.vue
View File

@ -16,7 +16,7 @@
<template #append>
<BButton
variant="outline-light"
class="border-left-0 rounded-right"
class="border-start-0 rounded-end"
tabindex="-1"
@click="toggleShowPassword"
>

2
frontend/src/components/Inputs/InputUsername.vue
View File

@ -15,7 +15,7 @@
data-test="username"
@update:modelValue="updateValue"
/>
<BButton size="lg" text="Button" variant="secondary" append @click="emitSetIsEdit">
<BButton size="md" text="Button" variant="secondary" append @click="emitSetIsEdit">
<IBiXCircle style="height: 17px; width: 17px" />
</BButton>
</BInputGroup>

4
frontend/src/components/LanguageSwitch2.vue
View File

@ -7,7 +7,7 @@
class="pointer"
:class="store.state.language === lang.code ? 'c-grey' : 'c-blau'"
>
<span v-if="lang.code === store.state.language" class="locales mr-1">
<span v-if="lang.code === store.state.language" class="locales me-1">
{{ lang.name }}
</span>
</span>
@ -30,7 +30,7 @@
(indexOfSelectedLocale !== indexOfLastLocale ||
(indexOfSelectedLocale === indexOfLastLocale && index !== indexOfSecondLastLocale))
"
class="ml-3 mr-3"
class="ms-3 me-3"
>
{{ locales.length - 1 > index ? $t('|') : '' }}
</span>

6
frontend/src/components/Menu/Navbar.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="navbar-component">
<div class="navbar-element">
<BNavbar toggleable="lg" class="pr-4">
<BNavbar toggleable="lg" class="pe-4">
<BNavbarBrand>
<BImg
class="mt-lg--2 mt-3 mb-3 d-none d-lg-block zindex10"
@ -16,10 +16,10 @@
<BImg class="sheet-img position-absolute zindex-1" :src="sheet"></BImg>
<BNavbarNav class="ml-auto" right>
<BNavbarNav class="ms-auto" right>
<router-link to="/settings">
<div class="d-flex align-items-center">
<div class="mr-3">
<div class="me-3">
<avatar
:username="username.username"
:initials="username.initials"

98
frontend/src/components/Menu/Sidebar.vue
View File

@ -9,32 +9,46 @@
<div class="mb-3 mt-3">
<BNav vertical class="w-200">
<BNavItem to="/overview" class="mb-3" active-class="active-route">
<BImg src="/img/svg/home.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('navigation.overview') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/svg/home.svg" height="20" class="svg-icon" />
<span class="ms-2">{{ $t('navigation.overview') }}</span>
</div>
</BNavItem>
<BNavItem to="/send" class="mb-3" active-class="active-route">
<IBiCash />
<span class="ml-2">{{ $t('navigation.send') }}</span>
<div class="sidebar-menu-item-wrapper">
<IBiCash />
<span class="ms-2">{{ $t('navigation.send') }}</span>
</div>
</BNavItem>
<BNavItem to="/transactions" :class="transactionClass" active-class="active-route">
<BImg src="/img/svg/transaction.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('navigation.transactions') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/svg/transaction.svg" height="20" class="svg-icon" />
<span class="ms-2">{{ $t('navigation.transactions') }}</span>
</div>
</BNavItem>
<BNavItem to="/community" class="mb-3" active-class="active-route">
<BImg src="/img/svg/community.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('creation') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/svg/community.svg" height="20" class="svg-icon" />
<span class="ms-2">{{ $t('creation') }}</span>
</div>
</BNavItem>
<BNavItem to="/information" class="mb-3" active-class="active-route">
<BImg src="/img/svg/info.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('navigation.info') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/svg/info.svg" height="20" class="svg-icon" />
<span class="ms-2">{{ $t('navigation.info') }}</span>
</div>
</BNavItem>
<BNavItem v-if="isHumhub" to="/circles" class="mb-3" active-class="active-route">
<BImg src="/img/svg/circles.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('navigation.circles') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/svg/circles.svg" height="20" class="svg-icon" />
<span class="ms-2">{{ $t('navigation.circles') }}</span>
</div>
</BNavItem>
<BNavItem v-if="isGMS" to="/usersearch" active-class="active-route">
<BImg src="/img/loupe.png" height="20" />
<span class="ml-2">{{ $t('navigation.usersearch') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/loupe.png" height="20" />
<span class="ms-2">{{ $t('navigation.usersearch') }}</span>
</div>
</BNavItem>
</BNav>
<hr class="m-3" />
@ -45,13 +59,15 @@
active-class="active-route"
data-test="settings-menu"
>
<div>
<BImg src="/img/svg/settings.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('navigation.settings') }}</span>
<div class="sidebar-menu-item-wrapper">
<div>
<BImg src="/img/svg/settings.svg" height="20" class="svg-icon" />
<span class="ms-2">{{ $t('navigation.settings') }}</span>
</div>
<BBadge v-if="!$store.state.username" variant="warning">
{{ $t('settings.newSettings') }}
</BBadge>
</div>
<BBadge v-if="!$store.state.username" variant="warning">
{{ $t('settings.newSettings') }}
</BBadge>
</BNavItem>
<BNavItem
v-if="$store.state.roles && $store.state.roles.length > 0"
@ -59,19 +75,23 @@
active-class="active-route"
@click="$emit('admin')"
>
<IBiShieldCheck />
<span class="ml-2">
{{ $t('navigation.admin_area') }}
</span>
<div class="sidebar-menu-item-wrapper">
<IBiShieldCheck />
<span class="ms-2">
{{ $t('navigation.admin_area') }}
</span>
</div>
</BNavItem>
<BNavItem
class="font-weight-bold"
class="fw-bold"
active-class="active-route"
data-test="logout-menu"
@click="$emit('logout')"
>
<BImg src="/img/svg/logout.svg" height="20" class="svg-icon" />
<span class="ml-2 text-205">{{ $t('navigation.logout') }}</span>
<div class="sidebar-menu-item-wrapper">
<BImg src="/img/svg/logout.svg" height="20" class="svg-icon" />
<span class="ms-2 logout-text">{{ $t('navigation.logout') }}</span>
</div>
</BNavItem>
</BNav>
</div>
@ -102,16 +122,30 @@ export default {
},
}
</script>
<style>
.nav-link {
color: rgb(56 56 56);
<style scoped>
:deep(.nav-item > a) {
color: rgb(56 56 56) !important;
border-left: 4px transparent solid;
display: block;
}
.active-route {
:deep(.active-route) {
display: block;
font-weight: bold;
color: rgb(2 2 1);
border-left: 4px rgb(219 129 19) solid;
border-left-color: rgb(219 129 19) !important;
}
:deep(.nav-link) {
padding: 0;
}
.logout-text {
color: #cd5556;
}
.sidebar-menu-item-wrapper {
padding: 4px 12px;
}
.svg-icon {

12
frontend/src/components/Template/ContentHeader/CommunityMember.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="community-member mt-3 mt-lg-0 position-relative">
<div class="text-center bg-gradient">
<BBadge class="position-absolute mt--2 ml--5 px-3 bg-gradient">
<div class="text-center bg-gradido-gradient">
<BBadge class="position-absolute mt--2 ms--5 px-3 bg-gradido-gradient">
{{ $t('member') }}
</BBadge>
</div>
@ -13,7 +13,7 @@
<div class="h4">{{ $t('community.communityMember') }}</div>
<div>{{ CONFIG.COMMUNITY_NAME }}</div>
</BCol>
<BCol cols="3" align-self="end" class="border-left border-light">
<BCol cols="3" align-self="end" class="border-start border-dark">
<IBiPeople />
{{ totalUsers }}
</BCol>
@ -36,3 +36,9 @@ export default {
},
}
</script>
<style lang="scss" scoped>
span.bg-gradido-gradient.text-bg-secondary {
color: $white !important;
}
</style>

6
frontend/src/components/Template/ContentHeader/GddAmount.spec.js
View File

@ -56,7 +56,7 @@ describe('GddAmount', () => {
message: 'Ouch',
})
jest.clearAllMocks()
await wrapper.find('div.border-left svg').trigger('click')
await wrapper.find('div.border-start svg').trigger('click')
await flushPromises()
})
@ -75,7 +75,7 @@ describe('GddAmount', () => {
},
})
jest.clearAllMocks()
await wrapper.find('div.border-left svg').trigger('click')
await wrapper.find('div.border-start svg').trigger('click')
await flushPromises()
})
@ -111,7 +111,7 @@ describe('GddAmount', () => {
})
jest.clearAllMocks()
wrapper.vm.$store.state.hideAmountGDD = true
await wrapper.find('div.border-left svg').trigger('click')
await wrapper.find('div.border-start svg').trigger('click')
await flushPromises()
})

26
frontend/src/components/Template/ContentHeader/GddAmount.vue
View File

@ -3,15 +3,15 @@
<div class="text-center">
<BBadge
v-if="badgeShow"
class="position-absolute mt--2 ml--4 px-3 zindex1"
:class="showStatus ? 'bg-gradient' : ''"
class="position-absolute mt--2 px-3 zindex1"
:class="showStatus ? 'bg-gradido-gradient' : ''"
:variant="showStatus ? '' : 'light'"
>
{{ $t('GDD') }}
</BBadge>
</div>
<div
class="wallet-amount bg-white app-box-shadow gradido-border-radius p-4 border"
class="wallet-amount bg-white app-box-shadow gradido-border-radius p-4"
:class="
showStatus || path === '/overview'
? 'gradido-global-border-color-accent'
@ -26,20 +26,20 @@
<BCol cols="9">
<!-- <b-icon-->
<!-- icon="layers"-->
<!-- class="mr-3 gradido-global-border-color-accent d-none d-lg-inline"-->
<!-- class="me-3 gradido-global-border-color-accent d-none d-lg-inline"-->
<!-- ></b-icon>-->
<IBiLayers class="mr-3 gradido-global-border-color-accent" />
<span v-if="hideAmount" class="font-weight-bold gradido-global-color-accent">
<IBiLayers class="me-3 gradido-global-border-color-accent" />
<span v-if="hideAmount" class="fw-bold gradido-global-color-accent">
{{ $t('asterisks') }}
</span>
<span v-else class="font-weight-bold gradido-global-color-accent">
<span v-else class="fw-bold gradido-global-color-accent">
{{ $filters.GDD(balance) }}
</span>
</BCol>
<BCol cols="3" class="border-left border-light">
<BCol cols="3" class="border-start border-dark">
<button class="transparent-button" @click="updateHideAmountGDD">
<IBiEyeSlash v-if="hideAmount" class="mr-3 gradido-global-border-color-accent" />
<IBiEye v-else class="mr-3 gradido-global-border-color-accent" />
<IBiEyeSlash v-if="hideAmount" class="me-3 gradido-global-border-color-accent" />
<IBiEye v-else class="me-3 gradido-global-border-color-accent" />
</button>
</BCol>
</BRow>
@ -87,3 +87,9 @@ const updateHideAmountGDD = async () => {
}
}
</script>
<style lang="scss" scoped>
.wallet-amount {
border: 1px solid;
}
</style>

6
frontend/src/components/Template/ContentHeader/GdtAmount.spec.js
View File

@ -57,7 +57,7 @@ describe('GdtAmount', () => {
message: 'Ouch',
})
jest.clearAllMocks()
await wrapper.find('div.border-left svg').trigger('click')
await wrapper.find('div.border-start svg').trigger('click')
await flushPromises()
})
@ -76,7 +76,7 @@ describe('GdtAmount', () => {
},
})
jest.clearAllMocks()
await wrapper.find('div.border-left svg').trigger('click')
await wrapper.find('div.border-start svg').trigger('click')
await flushPromises()
})
@ -112,7 +112,7 @@ describe('GdtAmount', () => {
})
jest.clearAllMocks()
wrapper.vm.$store.state.hideAmountGDT = true
await wrapper.find('div.border-left svg').trigger('click')
await wrapper.find('div.border-start svg').trigger('click')
await flushPromises()
})

22
frontend/src/components/Template/ContentHeader/GdtAmount.vue
View File

@ -3,15 +3,15 @@
<div class="text-center">
<BBadge
v-if="badgeShow"
class="position-absolute mt--2 ml--4 px-3 zindex1"
:class="showStatus ? 'bg-gradient' : ''"
class="position-absolute mt--2 px-3 zindex1"
:class="showStatus ? 'bg-gradido-gradient' : ''"
:variant="showStatus ? '' : 'light'"
>
{{ $t('GDT') }}
</BBadge>
</div>
<div
class="wallet-amount bg-white app-box-shadow gradido-border-radius p-4 border"
class="wallet-amount bg-white app-box-shadow gradido-border-radius p-4"
:class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'"
>
<BRow>
@ -21,20 +21,20 @@
<BCol cols="9">
<!-- <b-icon-->
<!-- icon="layers"-->
<!-- class="mr-3 gradido-global-border-color-accent d-none d-lg-inline"-->
<!-- class="me-3 gradido-global-border-color-accent d-none d-lg-inline"-->
<!-- ></b-icon>-->
<IBiLayers />
<span v-if="hideAmount" class="font-weight-bold gradido-global-color-accent">
<span v-if="hideAmount" class="fw-bold gradido-global-color-accent">
{{ t('asterisks') }}
</span>
<span v-else class="font-weight-bold gradido-global-color-accent">
<span v-else class="fw-bold gradido-global-color-accent">
{{ n(gdtBalance, 'decimal') }} {{ t('GDT') }}
</span>
</BCol>
<BCol cols="3" class="border-left border-light">
<BCol cols="3" class="border-start border-dark">
<!-- <b-icon-->
<!-- :icon="hideAmount ? 'eye-slash' : 'eye'"-->
<!-- class="mr-3 gradido-global-border-color-accent pointer hover-icon"-->
<!-- class="me-3 gradido-global-border-color-accent pointer hover-icon"-->
<!-- @click="updateHideAmountGDT"-->
<!-- ></b-icon>-->
<button class="transparent-button" @click="updateHideAmountGDT">
@ -86,3 +86,9 @@ const updateHideAmountGDT = async () => {
}
}
</script>
<style lang="scss" scoped>
.wallet-amount {
border: 1px solid;
}
</style>

6
frontend/src/components/Template/ContentHeader/NavCommunity.vue
View File

@ -43,6 +43,8 @@ export default {
</script>
<style scoped lang="scss">
.nav-community-btn-wrapper {
background-color: #d1d1d1;
> :deep(*) {
width: calc(100% / 3);
display: flex;
@ -51,7 +53,7 @@ export default {
text-decoration: none;
font-size: 14px;
text-wrap: nowrap;
color: black;
color: black !important;
}
}
@ -61,7 +63,7 @@ export default {
:deep(.router-link-active) {
background-color: rgb(23 141 129);
color: white;
color: white !important;
font-weight: bold;
padding: 0.625rem 1.25rem;
border-radius: 25px;

4
frontend/src/components/Template/RightSide/LastTransactions.vue
View File

@ -31,14 +31,14 @@
<BCol class="p-1">
<BRow>
<BCol>
<div class="font-weight-bold">
<div class="fw-bold">
<name :linked-user="transaction.linkedUser" font-color="text-dark" />
</div>
<div class="d-flex mt-3">
<div class="small">
{{ $filters.GDD(transaction.amount) }}
</div>
<div class="small ml-3 text-right">
<div class="small ms-3 text-right">
{{ $d(new Date(transaction.balanceDate), 'short') }}
</div>
</div>

4
frontend/src/components/Transaction.vue
View File

@ -13,7 +13,7 @@
<BCol>
<div>
<span class="small">{{ $d(new Date(date), 'short') }}</span>
<span class="small ml-3">{{ $d(new Date(date), 'time') }}</span>
<span class="small ms-3">{{ $d(new Date(date), 'time') }}</span>
</div>
<div>
{{ getLinesByType.description }}
@ -24,7 +24,7 @@
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">{{ $t('gdt.credit') }}</div>
<div class="font-weight-bold">{{ getLinesByType.credittext }}</div>
<div class="fw-bold">{{ getLinesByType.credittext }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />

4
frontend/src/components/TransactionLinks/TransactionLink.vue
View File

@ -2,7 +2,7 @@
<div class="transaction-link gradido-custom-background">
<BRow :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
<BCol cols="1">
<type-icon color="text-danger" icon="link45deg" class="pt-4 pl-2" />
<type-icon color="text-danger" icon="link45deg" class="pt-4 ps-2" />
</BCol>
<BCol cols="11">
<BRow>
@ -12,7 +12,7 @@
<date-row :date="validUntil" :diff-now="true" :valid-link="validLink" />
<decay-row :decay="decay" />
</BCol>
<BCol cols="12" lg="1" md="1" class="text-center text-md-right pr-5 pr-lg-4">
<BCol cols="12" lg="1" md="1" class="text-center text-md-right pe-5 pe-lg-4">
<BDropdown no-caret right aria-expanded="false" size="sm">
<template #button-content>
<IBiThreeDotsVertical class="link-menu-opener" />

2
frontend/src/components/TransactionRows/DurationRow.vue
View File

@ -4,7 +4,7 @@
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.past_time') }}</div>
</BCol>
<BCol offset="0" class="text-right mr-0">
<BCol offset="0" class="text-right me-0">
<span v-if="duration">{{ duration }}</span>
</BCol>
</BRow>

6
frontend/src/components/Transactions/TransactionCreation.vue
View File

@ -5,13 +5,13 @@
<b-avatar icon="gift" variant="success" :size="42"></b-avatar>
</BCol>
<BCol>
<div class="font-weight-bold">{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
<div class="fw-bold">{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
<span class="small">{{ $d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
<span class="ms-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">{{ $t('decay.types.receive') }}</div>
<div class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
<div class="fw-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />

2
frontend/src/components/Transactions/TransactionLinkSummary.vue
View File

@ -10,7 +10,7 @@
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">{{ $t('send_per_link') }}</div>
<div class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
<div class="fw-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />

11
frontend/src/components/Transactions/TransactionReceive.vue
View File

@ -12,21 +12,16 @@
</BCol>
<BCol>
<div>
<name
class="font-weight-bold"
:amount="amount"
:linked-user="linkedUser"
:link-id="linkId"
/>
<name class="fw-bold" :amount="amount" :linked-user="linkedUser" :link-id="linkId" />
</div>
<span class="small">{{ $d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
<span class="ms-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">
{{ $t('decay.types.receive') }}
</div>
<div class="font-weight-bold gradido-global-color-accent" data-test="transaction-amount">
<div class="fw-bold gradido-global-color-accent" data-test="transaction-amount">
{{ $filters.GDD(amount) }}
</div>
<div v-if="linkId" class="small">

11
frontend/src/components/Transactions/TransactionSend.vue
View File

@ -11,21 +11,16 @@
</BCol>
<BCol>
<div>
<name
class="font-weight-bold"
:amount="amount"
:linked-user="linkedUser"
:link-id="linkId"
/>
<name class="fw-bold" :amount="amount" :linked-user="linkedUser" :link-id="linkId" />
</div>
<span class="small">{{ $d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
<span class="ms-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">
{{ $t('decay.types.send') }}
</div>
<div class="font-weight-bold text-140" data-test="transaction-amount">
<div class="fw-bold text-140" data-test="transaction-amount">
{{ $filters.GDD(amount) }}
</div>
<div v-if="linkId" class="small">

6
frontend/src/components/UserSettings/UserCard.vue
View File

@ -12,17 +12,17 @@
<div class="justify-content-center mt-5 mb-5">
<BRow align-v="stretch">
<BCol cols="4">
<div class="text-center font-weight-bold">
<div class="text-center fw-bold">
{{ $n(balance, 'decimal') }}
</div>
</BCol>
<BCol cols="4">
<div class="text-center font-weight-bold">
<div class="text-center fw-bold">
{{ transactionCount }}
</div>
</BCol>
<BCol cols="4">
<div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
<div class="text-center fw-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
</BCol>
</BRow>
<BRow>

6
frontend/src/components/UserSettings/UserData.vue
View File

@ -7,9 +7,9 @@
class="cursor-pointer"
@click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
>
<span class="pointer mr-3">{{ $t('settings.name.change-name') }}</span>
<b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
<span class="pointer me-3">{{ $t('settings.name.change-name') }}</span>
<b-icon v-if="showUserData" class="pointer ms-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ms-3" variant="danger"></b-icon>
</a>
</BCol>
</BRow>

6
frontend/src/components/UserSettings/UserLanguage.vue
View File

@ -7,9 +7,9 @@
class="cursor-pointer"
@click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()"
>
<span class="pointer mr-3">{{ $t('settings.language.changeLanguage') }}</span>
<b-icon v-if="showLanguage" class="pointer ml-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
<span class="pointer me-3">{{ $t('settings.language.changeLanguage') }}</span>
<b-icon v-if="showLanguage" class="pointer ms-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ms-3" variant="danger"></b-icon>
</a>
</BCol>
</BRow>

2
frontend/src/components/UserSettings/UserPassword.vue
View File

@ -8,7 +8,7 @@
data-test="open-password-change-form"
@click="toggleShowPassword"
>
<span class="pointer mr-3">{{ $t('settings.password.change-password') }}</span>
<span class="pointer me-3">{{ $t('settings.password.change-password') }}</span>
<IBiPencil v-if="showPassword" />
<IBiXCircle v-else class="color-danger" />
<!-- <b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>

8
frontend/src/layouts/AuthLayout.vue
View File

@ -17,13 +17,13 @@
</div>
<BRow class="justify-content-md-center justify-content-lg-end">
<BCol sm="12" md="8" lg="6" class="zindex1000">
<div class="ml-3 ml-sm-4 mr-3 mr-sm-4">
<div class="ms-3 ms-sm-4 me-3 me-sm-4">
<BRow class="d-none d-md-block d-lg-none">
<BCol class="mb--4">
<auth-navbar-small />
</BCol>
</BRow>
<BRow class="mt-0 mt-md-5 pl-2 pl-md-0 pl-lg-0">
<BRow class="mt-0 mt-md-5 ps-2 ps-md-0 ps-lg-0">
<BCol lg="9" md="9" sm="12">
<div class="mb--2">{{ $t('welcome') }}</div>
<div class="h1 mb-0">{{ communityName }}</div>
@ -40,7 +40,7 @@
<BCard ref="pageFontSize" no-body class="border-0 mt-4 gradido-custom-background">
<BRow class="p-4">
<BCol cols="10">
<language-switch-2 class="ml-3" />
<language-switch-2 class="ms-3" />
</BCol>
<BCol cols="2" class="text-right">
<div id="popover-target-1" class="pointer">
@ -82,7 +82,7 @@
</BCardBody>
</BCard>
</div>
<auth-footer v-if="!$route.meta.hideFooter" class="pr-5 mb-5"></auth-footer>
<auth-footer v-if="!$route.meta.hideFooter" class="pe-5 mb-5"></auth-footer>
</BCol>
</BRow>
</div>

4
frontend/src/pages/TransactionLink.vue
View File

@ -82,6 +82,10 @@ const tokenExpiresInSeconds = computed(() => {
return remainingSecs <= 0 ? 0 : remainingSecs
})
const validLink = computed(() => {
return new Date(linkData.value.validUntil) > new Date()
})
const itemType = computed(() => {
if (linkData.value.deletedAt) return 'TEXT_DELETED'
if (new Date(linkData.value.validUntil) < new Date()) return 'TEXT_EXPIRED'