@pinuts/bsr-uikit-relaunch 0.0.7 → 0.0.8

package/dist/styles/bootstrap-customized.scss

@@ -1,815 +0,0 @@
-$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;
-}