@pinuts/bsr-uikit-relaunch 0.0.6 → 0.0.7

package/dist/styles/bootstrap-customized.scss

@@ -0,0 +1,815 @@
+$white-color-background-colors: (
+    'primary',
+    'warning',
+    'danger',
+    'blue',
+    'dark',
+    'text-color',
+    'rot',
+    'orange',
+    'pink',
+    'lila',
+    'tuerkis',
+    'blau',
+    'sand',
+    'schwarz',
+);
+
+// Farben der Buttons festlegen
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+
+        @if index($white-color-background-colors, $color) {
+            @include button-variant(
+                $value,
+                $value,
+                $color: white,
+                $hover-background: shade-color($value, 10%),
+                $hover-border: shade-color($value, 10%),
+                $hover-color: white,
+                $active-background: shade-color($value, 10%),
+                $active-border: shade-color($value, 10%),
+                $active-color: white,
+                $disabled-color: white,
+            );
+        } @else {
+            @include button-variant(
+                $value,
+                $value,
+                $hover-background: shade-color($value, 10%),
+                $hover-border: shade-color($value, 10%),
+                $active-background: shade-color($value, 10%),
+                $active-border: shade-color($value, 10%)
+            );
+        }
+    }
+}
+
+@import './_colors.scss';
+@import './variables.scss';
+@import "~bootstrap/scss/root";
+
+// Grid
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+$grid-breakpoints: (
+    xs: 0,
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+);
+
+$container-min-widths: (
+  md: 541px,
+  lg: 721px,
+  xl: 961px,
+);
+
+$body-color: $hbs-schwarz;
+
+$lead-font-size:              16px;
+$lead-font-weight:            400;
+$small-font-size:             14px;
+
+$headings-font-family:        $font-simplebold !important;
+$headings-color:              $primary;
+
+$screen-xs-max: 767px;
+$screen-sm-min: 768px;
+$screen-sm-max: 991px;
+$screen-md-min: 992px;
+$screen-md-max: 1179px;
+$screen-lg-min: 1180px;
+$screen-lg-max: 1599px;
+$screen-xl-min: 1600px;
+
+$h1-font-size: 44px;
+$h2-font-size: 32px;
+$h3-font-size: 18px;
+$h4-font-size: 18px;
+
+
+//background-colors
+
+.bg-success-lightest {
+    background-color: $hbs-success-lightest;
+}
+
+.bg-danger-lightest {
+    background-color: $hbs-danger-lightest;
+}
+
+.bg-warning-lightest {
+    background-color: $hbs-warning-lightest;
+}
+
+.bg-info-lightest {
+    background-color: $hbs-info-lightest;
+}
+
+// Ouline Styles
+.outline-tuerkis {
+    background-color: $hbs-white;
+    border: 1px solid $hbs-tuerkis !important;
+    color: $hbs-tuerkis !important;
+}
+
+.outline-primary {
+    background-color: $hbs-white;
+    border: 1px solid $primary !important;
+    color: $primary !important;
+}
+
+.outline-orange {
+    background-color: $hbs-white;
+    border: 1px solid $hbs-orange !important;
+    color: $hbs-orange !important;
+}
+
+.outline-blau, .outline-blue {
+    background-color: $hbs-white;
+    border: 1px solid $hbs-blau !important;
+    color: $hbs-blau !important;
+}
+
+.outline-success {
+    background-color: $hbs-white;
+    border: 1px solid $success !important;
+    color: $success !important;
+}
+
+.outline-lila {
+    background-color: $hbs-white;
+    border: 1px solid $hbs-lila !important;
+    color: $hbs-lila !important;
+}
+
+.outline-secondary {
+    background-color: $hbs-white;
+    border: 1px solid $secondary !important;
+    color: $secondary !important;
+}
+
+.outline-schwarz-50 {
+    background-color: $hbs-white;
+    border: 1px solid $hbs-schwarz-50 !important;
+    color: $hbs-schwarz-50 !important;
+}
+
+// Filled Styles
+.filled-tuerkis {
+    background-color: $hbs-tuerkis;
+    border: 1px solid $hbs-tuerkis !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+.filled-primary {
+    background-color: $primary;
+    border: 1px solid $primary !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+.filled-orange {
+    background-color: $hbs-orange;
+    border: 1px solid $hbs-orange !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+.filled-blue {
+    background-color: $hbs-blau;
+    border: 1px solid $hbs-blau !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+.filled-lila {
+    background-color: $hbs-lila;
+    border: 1px solid $hbs-lila !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+.filled-success {
+    background-color: $success;
+    border: 1px solid $success !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+.filled-schwarz-50 {
+    background-color: $hbs-schwarz-50;
+    border: 1px solid $hbs-schwarz-50 !important;
+    color: $hbs-white !important;
+    font-weight: 400 !important;
+}
+
+// form elements:
+.form-control, .form-select {
+    font-size: 18px;
+    border-radius: 1px;
+    border-width: 1px;
+    border-color: $hbs-schwarz !important;
+    box-shadow: none;
+}
+
+.form-control:focus,.form-select:focus-visible {
+    box-shadow: $focus-shadow;
+}
+
+.was-validated .form-control:invalid, .form-control.is-invalid, .form-select.is-invalid,
+.is-invalid .form-control, .is-invalid .form-select {
+    border-color: $hbs-pink !important;
+    background-image: none !important;
+    color: $hbs-schwarz !important;
+    padding-right: 0rem !important;
+}
+
+.form-control.is-invalid:focus, .is-invalid .form-control:focus {
+    // input-text
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 133%;
+    box-shadow: $focus-shadow-danger;
+}
+
+// input-groups
+.form-control.input-group {
+    padding: 0;
+
+    &:focus-within {
+        box-shadow: $focus-shadow;
+        
+        &.is-invalid {
+            box-shadow: $focus-shadow-danger;
+        }
+
+        .form-control:focus,.form-select:focus-visible {
+            box-shadow: none;
+        }
+    }
+}
+
+.input-group-text {
+    border: none;
+
+}
+
+.input-group .form-control {
+    border: none;
+}
+
+.invalid-feedback {
+    color: $hbs-pink;
+}
+
+.read-only,.read-only:focus {
+    background-color: $hbs-schwarz-10;
+    // background-image: url(LOCK ICON) FIXME
+}
+
+//Buttons
+.btn, button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius !important;
+    font-style: normal;
+    line-height: 133%;
+    font-size: 18px;
+    font-weight: 400;
+    height: 44px;
+    padding: 10px 32px;
+}
+
+.btn:focus, .btn:focus-visible, button:focus, button:focus-visible {
+    box-shadow: $focus-shadow;
+}
+
+.btn-rounded {
+    border-radius: 22px !important;
+    padding: 16px;
+}
+
+.btn-circular {
+    border-radius: 22px !important;
+    padding: 10px;
+    width: 44px;
+    height: 44px;
+}
+
+.btn-link {
+    text-decoration: none;
+}
+
+// Badge
+.badge {
+    border-radius: $border-radius-badge;
+    --bs-badge-padding-x: 8px;
+    --bs-badge-padding-y: 4px;
+
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    line-height: 107%;
+}
+
+.form-check-label {
+    font-weight: 400 !important;
+    font-size: 18px !important;
+    line-height: 133% !important;
+}
+
+// ToggleSwitchField
+.form-select.is-invalid, .is-invalid .form-select {
+    color: $hbs-schwarz !important;
+    &:focus {
+        box-shadow: $focus-shadow-danger;
+    }
+}
+.form-check-input[type="checkbox"] {
+    background-color: $hbs-tuerkis-30 !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27white%27 stroke-width=%270.5%27 stroke=%27none%27/%3e%3c/svg%3e") !important;
+    &:checked {
+        border: none;
+    }
+}
+
+// RadioButtons
+.form-check-input[type="radio"] {
+    border: 1px solid $hbs-schwarz !important;
+    padding-right: 1px;
+    border-radius: 12px;
+    &:focus {
+        border: 1.2px solid $hbs-blau !important;
+
+    }
+    &:checked {
+        border: none !important;
+        border-radius: 12px;
+    }
+}
+
+.likert-scale-wrapper {
+    .likert-li {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        label {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            top: 0;
+            left: 0;
+            height: 100%;
+            padding: 0 !important;
+            margin: 0;
+            cursor: pointer;
+        }
+
+        .form-check-input[type="radio"].likert-scale {
+            margin: 0;
+            padding: 1rem;
+            border-radius: 50%;
+            background-color: $hbs-tuerkis-10 !important;
+            border: 1px solid $hbs-tuerkis-40 !important;
+            
+            &:checked {
+                background-color:$hbs-blau !important;
+                background-image: none;
+            }
+        }
+
+        .form-check-input[type="radio"].likert-scale:checked + label {
+            color: $hbs-white !important;
+        }
+    }
+  }
+
+// classic Checkboxes
+.form-check-input[type=checkbox]:not(.toggle) {
+    height: 1.5rem;
+    width: 1.5rem;
+    padding-right: 1px;
+    &:checked {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+    &:not(:checked) {
+        border: 1.2px solid $hbs-schwarz !important;
+        border-radius: 3.6px !important;
+        background-color: $hbs-white !important;
+    }
+    &:focus:not(:checked) {
+        border: 1.2px solid $hbs-blau !important;
+    }
+    
+}
+
+.static-alert {
+    font-size: 20px;
+    line-height: 150%;
+
+    .static-alert-col {
+        max-width: 770px;
+    }
+}
+
+.toast-message {
+    width: 312px;
+    padding: 16px 16px 16px 24px;
+    font-size: 16px;
+    font-weight: 700;
+    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+// DropDownMenu
+
+.dropdown-menu {
+    padding: 0;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    width: 100%;
+    border-radius: 0;
+    border: none;
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
+
+    .dropdown-item {
+        padding: 0;
+        background-color: white !important;
+       
+        .dropdown-btn {
+            display: flex;
+            justify-content: flex-start;
+            background-color: white !important;
+            width: 100%;
+            border: none;
+        }
+
+        .dropdown-btn:hover {
+            background-color: $hbs-tuerkis-20 !important;
+            outline: none !important;
+        }
+
+        .dropdown-btn:focus, .dropdown-btn:focus-visible {
+            background-color: $hbs-tuerkis-20 !important;
+            outline: none !important;
+            box-shadow: inset 0px 0px 0px 2px rgba($hbs-blau, 0.35);
+            border-radius: 1px;
+        }
+
+        .dropdown-btn.active {
+            background-color:rgba(95, 187, 201, 0.3) !important;
+            outline: none !important;
+            box-shadow: none;
+        }
+
+        .dropdown-btn.active:focus, .dropdown-btn.active:focus-visible {
+            box-shadow: inset 0px 0px 0px 2px rgba($hbs-blau, 0.35);
+            border-radius: 1px;
+        }
+    }
+    
+}
+
+.toast-body {
+    padding-right: 18px;
+}
+
+.toast-message .btn-close {
+    font-size: 12px;
+    padding: 6px;
+}
+
+// Modal adjustments
+.modal-header {
+    border-bottom: none;
+    padding-top: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.modal-body {
+    border-bottom: none;
+    padding-right: 5rem;
+    padding-left: 5rem;
+}
+
+.modal-footer {
+    padding-bottom: 3rem;
+    border-top: none;
+    display: flex;
+    justify-content: center;
+}
+
+.modal-backdrop {
+    background-color: $hbs-blau-20;
+    background: rgba($hbs-blau, 0.8);
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.modal-content {
+    /* White */
+    background: #FFFFFF;
+    /* Dropdown Shadow */
+    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
+    border-radius: 0;
+}
+
+// Further Custom Styles
+#root {
+    overflow-x: hidden;
+}
+
+.bg-body {
+    background-color: $hbs-tuerkis-20 !important;
+}
+
+
+header, body, footer {
+    font-family: $font-univers-cd !important;
+    font-style: normal;
+    color: $hbs-schwarz;
+    font-weight: 400;
+    line-height: 125%;
+}
+
+h1, h2, h3, h4 {
+    color: $primary !important; 
+    font-family: $font-simplebold !important;
+    font-weight: 700;
+    line-height: 110%;
+    font-style: normal;
+    text-transform: uppercase;
+}
+
+h1 {
+    font-size: 32px;
+    @include media-breakpoint-up(lg) {
+        font-size: 44px;
+    }
+}
+
+h2 {
+    font-size: 24px;
+    @include media-breakpoint-up(lg) {
+        font-size: 32px;
+    }
+}
+
+h3 {
+    font-size: 20px;
+    @include media-breakpoint-up(lg) {
+        font-size: 24px;
+    }
+}
+
+h4 {
+    font-size: 18px;
+}
+
+h5 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    color: $hbs-schwarz;
+}
+
+a:focus, a:focus-visible {
+    box-shadow: $focus-shadow !important;
+    outline: none !important;
+}
+
+// Text
+
+.body-text-larger {
+    font-size: 20px !important;
+}
+
+p.body-text-large {
+    font-size: 18px !important;
+}
+
+.body-text-medium {
+    font-size: 16px;
+}
+
+.body-text-large-bold {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.body-text-larger-bold {
+    font-size: 20px !important;
+    font-weight: 700;
+}
+
+.body-text-bold {
+    font-size: 16px;
+    font-weight: 700;
+}
+
+p {
+    font-size: 16px;
+    line-height: 150%;
+}
+
+.h1-subtitle {
+    text-transform: none;
+    font-family: $font-univers-cd !important;
+    font-size: 30px;
+    line-height: 125%;
+    color: $hbs-schwarz;
+}
+
+.description {
+    font-family: $font-univers-cd !important;
+    font-weight: 400  !important;
+    font-size: 14px  !important;
+    line-height: 128.5% !important;
+}
+
+.is-invalid {
+    color: $hbs-pink !important;
+    a.form-label {
+        color: $hbs-pink;
+        text-decoration: none;
+        font-weight: 400 !important;
+    }
+}
+
+label, .label, .form-label, .form-label-legend {
+    font-family: $font-univers-cd !important;
+    font-weight: 700 !important;
+    font-size: 16px;
+    line-height: 125%;
+    margin-bottom: 0.25rem;
+    margin-top: 0.4rem;
+}
+
+.form-label-legend {
+    float: inherit !important;
+}
+
+.helper-text {
+    font-family: $font-univers-cd !important;
+    font-size: 14px;
+    line-height: 128,5%;
+    color: $hbs-schwarz-60;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.error-text {
+    font-size: 14px;
+    line-height: 128,5%;
+    color: $hbs-pink;
+}
+
+.validationIconWrap {
+    margin-right: 0.3rem ;
+    padding-bottom: 0.2rem;
+}
+
+.input-text {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 133%;
+}
+
+.link-text-large {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 128.5%;
+}
+
+.link-text-medium {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 125%;
+}
+
+// Inputs
+input, select {
+    width: auto;
+    height: $input-height;
+   
+    border-radius: $input-border-radius;
+    outline: $border-dark !important;
+    border : 1px solid $hbs-schwarz;
+
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+
+    font-family: $font-univers-cd !important;
+    font-style: normal;
+    // input-text
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 133%;
+}
+
+label, label.is-invalid, .is-invalid label {
+    font-family: $font-univers-cd !important;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 125% !important;
+    align-self: stretch;
+    border-color: $hbs-pink !important;
+}
+
+input:focus-visible, input[type=checkbox]:focus, input[type=radio]:focus {
+    box-shadow: $focus-shadow;
+    border-color: $border-dark !important;
+}
+
+// Checkbox
+input[type=checkbox] {
+    border-radius: $border-radius-square;
+}
+
+.form-check-inline {
+    display: inline-flex;
+}
+
+input[type=checkbox], input[type=radio] {
+    background-color: white !important;
+    width: 24px;
+    height: 24px;
+    border: $border-dark !important;
+}
+
+input[type=checkbox]:checked, input[type=radio]:checked {
+    //  -webkit-appearance: none;
+    // -moz-appearance: none;
+    background-color: $hbs-blau !important;
+    color: white !important
+}
+
+// Number input
+input[type=number] {
+    text-align: center;
+    height: $input-height !important;
+}
+
+.progress {
+    --bs-progress-height: 0.6rem;
+    --bs-progress-font-size: 0.75rem;
+    --bs-progress-bg: ;
+    --bs-progress-border-radius: 10px;
+    --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    --bs-progress-bar-color: $weiss !important;
+    --bs-progress-bar-bg: $rot !important;
+    --bs-progress-bar-transition: width 0.6s ease;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}
+
+hr {
+    margin: 1rem 0;
+    color: inherit;
+    border: 0;
+    border-top: 2px solid $hbs-tuerkis !important;
+    opacity: 0.25;
+}
+
+// TODO: Überprüfen, ob das weg kann
+// ul,ol {
+//     padding: 0;
+//     margin: 0;
+//     padding-left: 0rem !important;
+//     padding-inline-start: none;
+// }
+
+.flex-fill {
+    min-width: 0;
+}