optimized-react-component-library-xyz123 0.1.141 → 0.1.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.1.141",
+  "version": "0.1.142",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",

package/src/css/darkMode.css

@@ -5,8 +5,8 @@
     --dark-error: #D75055;
     --dark-main:#141414;
     --dark-info: #808080;
-    --dark-yellow:#F4BF56;
-    --dark-purple:#200827;
+    --dark-orientation-active:#F4BF56;
+    --dark-background-second:#200827;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -53,7 +53,7 @@
 /*-----------HEADER--------------*/
 
     .pts-header-container{
-        background-color: var(--dark-purple);
+        background-color: var(--dark-background-second);
     }
 
     .pts-header-container svg path{
@@ -164,7 +164,7 @@
     }
 
     .pts-stepperDotActive {
-        background-color: var(--dark-yellow);
+        background-color: var(--dark-orientation-active);
     }
 
     .pts-stepper-step:not(:last-child)::after {
@@ -274,6 +274,10 @@
         color: var(--dark-action);
     }
 
+    .error-close svg path{
+        stroke: var(--dark-action);
+    }
+
     .errorMessageAddingFile{
         color: var(--dark-error);
     }

package/src/css/mobileView.css

@@ -1,185 +1,319 @@
-@media (max-width: 1085px) {
-  .pts-footer-container {
-    display: flex;
-    height: auto;
-    flex-direction: column;
-    text-align: left;
-    padding: 1.6rem;
-  }
 
-  .pts-footer-logo {
-    position: static;
-    padding-left: 0;
-    margin-left: -8px;
-    margin-bottom: 1.6rem;
-    align-self: flex-start;
-  }
-
-  .pts-footer-linkList {
-    width: 100%;
-  }
-
-  .pts-footer-linkList ul {
-    flex-direction: column;
-    gap: 1.6rem;
-    padding-top: 0;
-  }
-
-  .pts-footer-linkList a span {
-    padding: 0;
-  }
+/********************************************/
+/*************** WIDTH: 1085 *****************/
+/********************************************/
 
-  .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
-    display: none;
-  }
+@media (max-width: 1085px) {
+    .pts-footer-content {
+        display:flex;
+        height: auto;
+        flex-direction: column;
+        text-align: left;
+        padding: 1.6rem;
+        width: 90%;
+    }
+
+    .pts-footer-logo {
+        position: static;
+        padding-left: 0;
+        margin-left: -8px;
+        margin-bottom: 1.6rem;
+        align-self: flex-start;
+    }
+
+    .pts-footer-linkList {
+        width: 100%;
+        margin-bottom: 8px;
+        margin-left:0;
+    }
+
+    .pts-footer-linkList ul {
+        flex-direction: column;
+        gap: 1.6rem;
+        padding-top: 0;
+    }
+
+    .pts-footer-linkList a span {
+        padding: 0;
+    }
+
+    .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
+        display: none;
+    }
 }
 
-@media (max-width: 750px) {
-  #main-content {
-    padding-top: 1.6rem;
-    padding-bottom: 0;
-  }
-
-  section,
-  .pts-form-step-header {
-    margin-left: 0;
-    margin-right: 0;
-    border-radius: 0;
-    padding-bottom: 0;
-  }
-
-  /* --- ??? --- */
-  .pts-root-categoryDescription,
-  .pts-root-stepDescription {
-    margin-bottom: 1.6rem;
-  }
-
-  .pts-header-container {
-    justify-content: center;
-  }
-
-  .pts-skipLink-container {
-    left: 1.8rem;
-  }
-
-  /* ---------- STEPPER ---------- */
-
-  .pts-stepper-step {
-    margin: 0;
-    position: relative;
-    flex: none;
-  }
-
-  .pts-stepper-step:not(:last-child)::after {
-    left: calc(50% + 3rem);
-    width: calc(33.33vw - 10rem);
-    right: auto;
-  }
-
-  .pts-shortNameInStepper {
-    display: none;
-  }
-
-  .pts-stepper-container {
-    justify-content: space-between;
-    height: 4.2rem;
-  }
-
-  .pts-errorSummary-container {
-    margin-bottom: 1.6rem;
-  }
-
-  .pts-stepperButtons-container {
-    margin-right: 1.6rem;
-  }
-
-  .pts-radioMultiple-container,
-  .pts-multipleCheckboxes-container {
-    padding-bottom: 1.6rem;
-  }
-
-  .pts-textArea-container textarea {
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .pts-footer-container {
-    height: auto;
-    flex-direction: column;
-    text-align: left;
-    padding: 1.6rem;
-  }
-
-  .pts-footer-logo {
-    position: static;
-    padding-left: 0;
-    margin-bottom: 1.6rem;
-    align-self: flex-start;
-  }
-
-  .pts-footer-linkList {
-    width: 100%;
-  }
-
-  .pts-footer-linkList ul {
-    flex-direction: column;
-    gap: 1.6rem;
-    padding-top: 0;
-  }
-
-  .pts-footer-linkList a span {
-    padding: 0;
-  }
-
-  .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
-    display: none;
-  }
-
-  .pts-question-preview {
-    flex-direction: column;
-    margin-bottom: 1.6rem;
-    padding-bottom: 0.8rem;
-  }
-
-  .pts-question-preview h4 {
-    margin-bottom: 1.6rem;
-  }
-
-  .pts-root-answer {
-    width: 100%;
-    margin-bottom: 0;
-  }
-
-  .stepInfoText,
-  .desciptionswithheadline {
-    margin-bottom: 3.6rem;
-  }
-
-  .pts-root-answer ul {
-    padding-left: 1.6rem;
-  }
+/********************************************/
+/*************** WIDTH: 990 *****************/
+/********************************************/
 
-  .pts-serviceHeadlineAndBody-container {
-    margin: 0;
-  }
-
-  .pts-principleOfPublicity-container p {
-    margin-top: 0;
+@media (max-width: 990px) {
+  .filePickLabel .filePickButton {
+    font-size: 1.4rem;
+    line-height: 14px;
+    text-align: center;
   }
+}
 
-  .pts-serviceHeadlineAndBody-container .pts-moreinfo-list a {
-    margin-top: 1.6rem;
-  }
 
-  .pts-footer-container {
-    margin-top: 1.6rem;
-  }
+/********************************************/
+/*************** WIDTH: 750 *****************/
+/********************************************/
+@media (max-width: 750px) {
+    #main-content {
+        padding-top: 1.6rem;
+        padding-bottom: 0;
+    }
+
+    .pts-cookieBanner {
+        width: fit-content;
+    }
+
+    .pts-cookieBanner-Links {
+        margin-bottom: 1.6rem;
+        display: flex;
+    }
+
+    .pts-cookieBanner a {
+        padding-left: 10px;
+        position: relative;
+        top: 5px;
+    }
+
+    .pts-header-container {
+        justify-content: center;
+        flex-direction: column;
+        padding: 0;
+    }
+
+    .pts-header-logo-container{
+        padding: 13px 0;
+        border-bottom: 2px solid #ddd;
+        width: 100%;
+        text-align: center;
+    }
+
+    .pts-languageButton{
+        margin: 0.4rem 0;
+    }
+    
+    .languageIcon {
+        margin-top: 0.4rem;
+    }
+
+    .pts-languageButton span:first-child{
+        margin: 0.4rem 0
+    }
+    
+    section,
+    .pts-form-step-header {
+        margin-left: 0;
+        margin-right: 0;
+        border-radius: 0;
+        padding: 1.6rem;
+    }
+
+    .pts-errorSummary-container{
+        margin: 0;
+        margin-top:1.6rem;
+    }
+
+    #pts-error-summary{
+        padding: 1.6rem 0;
+        margin: 0;
+    }
+
+    /* --- ??? --- */
+    .pts-root-categoryDescription,
+    .pts-root-stepDescription {
+        margin-bottom: 1.6rem;
+    }
+
+    .pts-skipLink-container {
+        left: 1.8rem;
+    }
+
+    /* ---------- STEPPER ---------- */
+    .pts-stepper-container{
+        height: auto;
+        margin-top: 0px;
+        display: flex;
+    }
+
+    .pts-stepper-step {
+        margin: 0;
+        position: relative;
+    }
+
+    .pts-stepper-step:not(:last-child)::after {
+        left: calc(50% + 3rem);
+        width: calc(33.33vw - 10rem);
+        right: auto;
+    }
+
+    .pts-shortNameInStepper {
+        display: none;
+    }
+
+    .pts-stepperDot{
+        margin-bottom: 0;
+    }
+
+    .pts-stepperButtons-container {
+        margin-right: 1.6rem;
+        margin-top: 1.6rem;
+    }
+
+    .pts-radioMultiple-container,
+    .pts-multipleCheckboxes-container {
+        padding-bottom: 1.6rem;
+    }
+
+    .pts-textArea-container textarea {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .inputContainer {
+        margin-bottom: 1.6rem;
+    }
+
+    .fileItem {
+        display: grid !important;
+        grid-template-columns: 26px 75% 60px;
+        margin: 0;
+    }
+      
+    .DropZoneContainer {
+        display: none;
+    }
+
+    .files-drop-zone {
+        padding: 2rem 1rem;
+    }
+
+    .pts-addFile-error-container {
+        margin: 1.6rem 0;
+    }
+
+     .errorMessageAddingFile {
+        margin-left: 12px;
+    }
+
+    .pts-editPreviewLink-container{
+        width: 50%;
+    }
+
+    .pts-editPreviewLink-container a{
+        font-size: 1.3rem;
+        display: block;
+    }
+
+    .pts-preview-page dl{
+        display:flex;
+        flex-direction: column;
+    }
+
+    .pts-preview-page dt, 
+    .pts-preview-page dd {
+        padding: 0;
+    }
+
+    .pts-preview-page dt{
+        border: none;
+        padding-bottom: 8px;
+
+    }
+
+    .pts-preview-page dd{
+        margin-bottom: 1.6rem;
+        padding-bottom: 4px;
+    }
+
+    .pts-footer-logo {
+        position: static;
+        padding-left: 0;
+        margin-bottom: 1.6rem;
+        align-self: flex-start;
+    }
+
+    .pts-footer-linkList {
+        width: 100%;
+    }
+
+    .pts-footer-linkList ul {
+        flex-direction: column;
+        gap: 1.6rem;
+        padding-top: 0;
+    }
+
+    .pts-footer-linkList a span {
+        padding: 0;
+    }
+
+    .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
+        display: none;
+    }
+
+    .pts-question-preview {
+        flex-direction: column;
+        margin-bottom: 1.6rem;
+        padding-bottom: 0.8rem;
+    }
+
+    .pts-question-preview h4 {
+        margin-bottom: 1.6rem;
+    }
+
+    .pts-root-answer {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .stepInfoText,
+    .desciptionswithheadline {
+        margin-bottom: 3.6rem;
+    }
+
+    .pts-root-answer ul {
+        padding-left: 1.6rem;
+    }
+
+    .pts-serviceHeadlineAndBody-container {
+        margin: 0;
+    }
+
+    .pts-principleOfPublicity-container p {
+        margin-top: 0;
+    }
+
+    .pts-serviceHeadlineAndBody-container .pts-moreinfo-list a {
+        margin-top: 1.6rem;
+    }
+
+    .pts-footer-container {
+        margin-top: 1.6rem;
+    }
+
+    .pts-footer-container {
+        height: auto;
+        flex-direction: column;
+        text-align: left;
+    }
+
+   
 }
 
+/********************************************/
+/***************WIDTH: 480 ******************/
+/********************************************/
 @media (max-width: 480px) {
-  .pts-stepper-step:not(:last-child)::after {
-    left: calc(50% + 2rem) !important;
-    width: calc(33.33vw - 7.7rem) !important;
-    right: auto !important;
+    .pts-stepper-step:not(:last-child)::after {
+        left: calc(50% + 2rem) !important;
+        width: calc(33.33vw - 7.7rem) !important;
+        right: auto !important;
+    }
+
+     .files-upload {
+    padding: 0 0.5rem;
   }
-}
+}