optimized-react-component-library-xyz123 0.15.5 → 0.15.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "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) {
@@ -333,6 +334,13 @@
     .errorSummary-text {
         color: var(--dark-error) !important;
     }
+    
+    /*--------------------FOOTER-----------------*/
+
+    .pts-footer-slogan-text-container{
+    background-color: var(--dark-background-third);
+    }
+
 
     /*-------------MODAL-----------*/
     .pts-modal-content{
@@ -344,4 +352,23 @@
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%23B07CBF' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
 
     }
+
+
+   /*-------------Autofill-----------*/
+    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;
+    }
 }

package/src/css/mobileView.css

@@ -44,6 +44,11 @@
     margin: 0;
     padding: 0;
 }
+
+   .pts-footer-slogan-text {
+        font-size: 16px;
+        text-align: center;
+    }
 }
 
 /********************************************/
@@ -88,6 +93,10 @@
     padding: 0;
   }
 
+  .pts-header-content{
+    display:block;
+  }
+
   .pts-header-logo-container {
     padding: 13px 0;
     border-bottom: 2px solid #ddd;
@@ -95,6 +104,11 @@
     text-align: center;
   }
 
+  .pts-header-navigation-container{
+    align-items: center;
+    justify-content: center;
+  }
+
   .pts-languageButton {
     margin: 0.4rem 0;
   }
@@ -245,6 +259,11 @@
     padding-bottom: 4px;
   }
 
+  .pts-footer-slogan-text{
+    line-height: 2rem;
+  }
+
+
   .pts-footer-logo {
     position: static;
     padding-left: 0;
@@ -317,14 +336,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

@@ -259,7 +259,7 @@ div.pts-root-question:last-child {
 /* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
 
 .pts-textField-container {
-  margin-top: 8px;
+  margin-bottom: 16px;
 }
 
 .pts-about {
@@ -312,6 +312,10 @@ div.pts-root-question:last-child {
   width: 100%;
 }
 
+ .pts-root-question-group-fieldset  .pts-root-error{
+    margin-bottom: 1.6rem;
+ } 
+
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
@@ -1066,3 +1070,24 @@ div.pts-root-question:last-child {
   background: var(--red-green-red, rgb(211, 165, 0));
 }
 /* ---------- END FILE UPLOAD ---------- */
+
+
+
+
+
+
+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;
+}
+

package/src/css/styles.css

@@ -11,6 +11,7 @@
   --info: #545454;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
+  --background-third: #414141;
 }
 
 body,
@@ -287,6 +288,27 @@ textarea:focus-visible,
   background-color: var(--main);
 }
 
+.pts-header-content{
+    width: 100%;
+    display: flex;
+}
+
+.pts-header-logo-container{
+    height:4rem;
+}
+
+.pts-header-logo svg{
+    height: 4rem;
+}
+
+.pts-header-navigation-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    align-items: flex-end;
+}
+
 .pts-languageButton {
   position: relative;
   display: inline-flex;
@@ -295,15 +317,16 @@ textarea:focus-visible,
   border: transparent;
   color: var(--action);
   cursor: pointer;
+  font-size: 1.6rem;
 }
 
 .pts-languageButton::after {
     content: "";
     position: absolute;
-    left: 0.7rem;
-    right: -0.3rem;
-    bottom: 0;
-    height: 0.2rem;
+    left: 7px;
+    right: 4px;
+    bottom: 3px;
+    height: 0.15rem;
     background-color: currentColor;
     opacity: 0;
 }
@@ -313,21 +336,25 @@ textarea:focus-visible,
 }
 
 .languageIcon{
+  position: relative;
   margin-top: 0.3rem;
   padding-right: 0.6rem;
+  top: 0.01rem;
 }
 
 .pts-languageButton svg {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }
 
-.languageIcon{
-  padding-left: 0.6rem;
-}
 
 /* ---------- TextBODY ---------- */
 
+.pts-textBody-container p{
+    margin-bottom: 1.6rem;
+
+}
+
 .MoreInfoIcon{
   margin-top: 2px;
 }
@@ -640,17 +667,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 {
@@ -752,8 +797,7 @@ textarea:focus-visible,
     transform: rotate(360deg);
   }
 }
-
-
+/*-----------ALWAYS IN THE END OF STYLES----------------*/
 
 .cleanPadding {
   padding: 0;