optimized-react-component-library-xyz123 0.13.6 → 0.13.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.13.6",
+  "version": "0.13.8",
   "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

@@ -7,6 +7,7 @@
     --dark-info: #808080;
     --dark-orientation-active:#F4BF56;
     --dark-background-second:#200827;
+    --dark-background-third:#747474;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -17,6 +18,24 @@
         color: var(--dark-text);
     }
 
+    @media (prefers-color-scheme: dark) {
+    input:autofill,
+    input:autofill:hover,
+    input:autofill:focus,
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus {
+        -webkit-box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
+        box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
+        -webkit-text-fill-color: var(--dark-text) !important; /* behåller textfärgen */
+        background-color: var(--dark-main) !important;
+    }
+
+    /* Firefox */
+    input:-moz-autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+    }
+}
 
    /*----------COOKIE BANNER-------*/
    .pts-cookieBanner {
@@ -337,6 +356,13 @@
     .errorSummary-text {
         color: var(--dark-error) !important;
     }
+    
+    /*--------------------FOOTER-----------------*/
+
+    .pts-footer-slogan-text-container{
+    background-color: var(--dark-background-third);
+    }
+
 
     /*-------------MODAL-----------*/
     .pts-modal-content{

package/src/css/mobileView.css

@@ -44,6 +44,11 @@
     margin: 0;
     padding: 0;
 }
+
+   .pts-footer-slogan-text {
+        font-size: 16px;
+        text-align: center;
+    }
 }
 
 /********************************************/
@@ -225,6 +230,11 @@
     padding-bottom: 4px;
   }
 
+  .pts-footer-slogan-text{
+    line-height: 2rem;
+  }
+
+
   .pts-footer-logo {
     position: static;
     padding-left: 0;
@@ -297,14 +307,37 @@
   }
 }
 
+
+/********************************************/
+/***************WIDTH: 750 ******************/
+/********************************************/
+@media (max-width: 750px) {
+    body .pts-stepper-step:not(:last-child)::after {
+        left: calc(50% + 3rem);
+        width: calc(33.33vw - 13rem);
+        right: auto;
+    }
+}
+
+/********************************************/
+/***************WIDTH: 550 ******************/
+/********************************************/
+@media (max-width: 550px) {
+    body .pts-stepper-step:not(:last-child)::after {
+        left: calc(50% + 3rem);
+        width: calc(33.33vw - 11rem);
+        right: auto;
+    }
+}
+
 /********************************************/
 /***************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;
+     left: calc(50% + 3rem);
+        width: calc(33.33vw - 10rem);
+        right: auto;
   }
 
   .files-upload {

package/src/css/questions.css

@@ -142,56 +142,6 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-/* ---------- DROPDOWN ---------- */
-
-/* För inspiration */
-
-.pts-dropdown-container {
-  margin-bottom: 1.5rem;
-}
-
-.pts-dropdown-container label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-}
-
-.pts-dropdown-container select {
-  display: block;
-  width: 100%;
-  padding-right: 2.4em;
-  padding-left: 0.6em;
-
-  border: #747474 1px solid;
-  box-shadow: none;
-  margin: 0;
-  height: 42px;
-
-  word-wrap: normal;
-
-  text-transform: none;
-
-  cursor: pointer;
-
-  border-radius: 6px;
-
-  font-family: Arial;
-  font-size: 16px;
-
-  background-image: url(https://dsa.pts.se/images/arrow.svg);
-  background-repeat: no-repeat;
-  background-position: right 14px center;
-  background-size: 1em;
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  transition:
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-}
-
 /* ---------- SINGLE CHECKBOX ---------- */
 
 .pts-singleCheckbox-row {
@@ -229,13 +179,14 @@ div.pts-root-question:last-child {
   margin-top: 0.2rem;
 }
 
+
 /*-------- CHECKBOX GROUP-------- */
 
-.pts-checkboxGroup-options {
+.pts-checkboxGroup-options{
   display: flex;
 }
 
-.pts-checkboxGroup-container input[type='checkbox'] {
+.pts-checkboxGroup-container input[type='checkbox']{
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -253,7 +204,7 @@ div.pts-root-question:last-child {
   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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
 }
 
-.pts-checkboxGroup-container label {
+.pts-checkboxGroup-container label{
   padding-top: 0.3rem;
   line-height: 20px;
   cursor: pointer;
@@ -262,7 +213,7 @@ div.pts-root-question:last-child {
 
 /* ---------- MULTIPLE CHECKBOXES ---------- */
 
-.pts-multipleCheckboxes-container input[type='checkbox'] {
+.pts-multipleCheckboxes-container input[type='checkbox']{
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -280,7 +231,7 @@ div.pts-root-question:last-child {
   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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
 }
 
-.pts-multipleCheckboxes-container label {
+.pts-multipleCheckboxes-container label{
   cursor: pointer;
   margin: 0;
   padding-top: 0.1rem;
@@ -299,11 +250,12 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-.pts-multipleCheckboxes-container li label {
+.pts-multipleCheckboxes-container li label{
   flex: 1;
   margin-top: 0.2rem;
 }
 
+
 /* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
 
 .pts-textField-container {

package/src/css/styles.css

@@ -11,8 +11,27 @@
   --info: #545454;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
+  --background-third: #414141;
 }
 
+
+input:autofill,
+input:autofill:hover,
+input:autofill:focus,
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 1000px var(--main) inset !important;
+    box-shadow: 0 0 0 1000px var(--main) inset !important;
+    -webkit-text-fill-color: inherit !important; /* behåller textfärgen */
+    background-color: var(--main) !important;
+}
+input:-moz-autofill {
+    box-shadow: 0 0 0 1000px transparent inset !important;
+}
+
+
+
 body,
 #root {
   min-height: 100vh;
@@ -650,17 +669,35 @@ textarea:focus-visible,
 /* ---------- FOOTER ---------- */
 
 .pts-footer-container {
-  display: flex;
-  min-height: 14rem;
   align-items: center;
   width: 100%;
   background-color: var(--background-second);
 }
 
+.pts-footer-slogan-text-container{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-third);
+      height: 50px;
+      padding: 0px;
+}
+
+.pts-footer-slogan-text{
+  color: var(--main);
+  line-height: 2.4rem;
+  font-size: 2rem;
+  text-box-trim: trim-both;
+  margin: 0;
+  
+}
+
  .pts-footer-content{
     display: flex;
     align-items: center;
     width: 100%;
+    min-height: 14rem;
+    padding: 0.1rem 0;
 }
 
 .pts-footer-logo {