optimized-react-component-library-xyz123 0.20.3 → 0.20.5

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;
   }
@@ -196,12 +210,32 @@
     margin-left: 12px;
   }
 
+  /*---------PREVIEW PAGE----------------*/
+
+    .pts-preview-header {
+        display: block;
+        justify-content: unset;
+        align-items: unset;
+        width: 100%;
+    }
+
+    .pts-preview-header h2 {
+        margin-bottom: 0.8rem;
+    }
+
   .pts-editPreviewLink-container {
-    width: 50%;
+    display: block;
+    justify-content: unset;
+    align-items: unset;
+    margin: 0 0 2.6rem 0;
+  }
+
+  .pts-edit-step-text{
+    padding-left: 0;
   }
 
   .pts-editPreviewLink-container a {
-    font-size: 1.3rem;
+    font-size: 1.6rem;
     display: block;
   }
 
@@ -225,6 +259,11 @@
     padding-bottom: 4px;
   }
 
+  .pts-footer-slogan-text{
+    line-height: 2rem;
+  }
+
+
   .pts-footer-logo {
     position: static;
     padding-left: 0;
@@ -297,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

@@ -32,6 +32,14 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
+.pts-root-question-group-fieldset legend {
+  margin-bottom: 0px;
+}
+
+.pts-root-group-fieldset-legend-container {
+  margin-bottom: 1.6rem;
+}
+
 .pts-radio-option,
 .pts-root-question legend {
   margin-bottom: 0.8rem;
@@ -52,7 +60,6 @@ div.pts-root-question:last-child {
   margin-bottom: 0.4rem;
 }
 
-.pts-root-question select,
 .pts-root-question input[type='text']:focus,
 .pts-root-question input[type='email']:focus,
 .pts-root-question input[type='tel']:focus {
@@ -97,7 +104,7 @@ div.pts-root-question:last-child {
   padding: 3.6rem 0 0 0;
   margin: 0;
 }
-.pts-root-question select,
+
 .pts-root-question input[type='text'],
 .pts-root-question input[type='email'],
 .pts-root-question input[type='tel'] {
@@ -143,55 +150,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;
-
-  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('../icons/arrow-down.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 {
@@ -214,6 +172,7 @@ div.pts-root-question:last-child {
   border-radius: 0.2rem;
 
   cursor: pointer;
+  margin-left: 0px;
 }
 
 .pts-singleCheckbox-container input[type='checkbox']:checked {
@@ -229,13 +188,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;
@@ -245,6 +205,7 @@ div.pts-root-question:last-child {
   border: 0.15rem solid var(--info);
   border-radius: 0.2rem;
   cursor: pointer;
+  margin-left: 0px;
 }
 
 .pts-checkboxGroup-container input[type='checkbox']:checked {
@@ -253,7 +214,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 +223,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 +241,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,15 +260,16 @@ 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 {
-  margin-top: 8px;
+  margin-bottom: 16px;
 }
 
 .pts-about {
@@ -360,6 +322,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 ---------- */
@@ -949,7 +915,6 @@ div.pts-root-question:last-child {
 /* AddFiles.tsx */ /* SelectedFiles.tsx  */
 .lastCol {
   display: flex;
-  justify-content: flex-end;
   max-width: 62px;
   padding: 0;
   margin: 0;
@@ -1114,3 +1079,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,
@@ -99,6 +100,7 @@ h4 {
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
 }
 
 section {
@@ -134,8 +136,12 @@ section {
 --- ?? Make changes in html ?? */
 
 p[aria-live='assertive']:empty {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.pts-root-categoryDescription {
+   margin-top: 0px;
 }
 
 .pts-first-category-section {
@@ -162,6 +168,8 @@ p[aria-live='assertive']:empty {
   margin-bottom: 36px;
 }
 
+
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -173,7 +181,7 @@ p[aria-live='assertive']:empty {
   white-space: nowrap;
   border: 0;
 }
-select:focus-visible,
+
 button:focus-visible,
 a:focus-visible,
 input:focus-visible,
@@ -185,7 +193,7 @@ textarea:focus-visible,
   outline-width: 2px !important;
   box-shadow: 0 0 0 4px #000 !important;
 }
-.using-mouse select:focus-visible,
+
 .using-mouse input:focus-visible,
 .using-mouse button:focus-visible,
 .using-mouse textarea:focus-visible,
@@ -196,6 +204,7 @@ textarea:focus-visible,
   box-shadow: 0 0 0 0px #000 !important;
 }
 
+
 /* ---------- COOKIE BANNER ---------- */
 
 .pts-cookieBanner {
@@ -284,6 +293,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;
@@ -292,40 +322,45 @@ 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;
-  background-color: currentColor;
-  opacity: 0;
+    content: "";
+    position: absolute;
+    left: 7px;
+    right: 4px;
+    bottom: 3px;
+    height: 0.15rem;
+    background-color: currentColor;
+    opacity: 0;
 }
 
 .pts-languageButton:hover::after {
-  opacity: 1;
+    opacity: 1;
 }
 
-.languageIcon {
+.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 ---------- */
 
-.MoreInfoIcon {
+.pts-textBody-container p{
+    margin-bottom: 1.6rem;
+
+}
+
+.MoreInfoIcon{
   margin-top: 2px;
 }
 
@@ -366,7 +401,7 @@ textarea:focus-visible,
 }
 
 .pts-textHeadlineAndBody-container .first-paragraph {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 /* ---------- STEPPER ---------- */
@@ -482,12 +517,6 @@ textarea:focus-visible,
   gap: 0.2rem;
 }
 
-.pts-editPreviewLink-container svg {
-  height: 1.6rem;
-  width: 1.6rem;
-  flex-shrink: 0;
-}
-
 .pts-question-preview,
 .addFilesPreviewContainer {
   display: flex;
@@ -524,11 +553,7 @@ textarea:focus-visible,
   margin-bottom: 36px;
 }
 
-.pts-edit-step-button {
-  text-decoration: none;
-}
-
-.pts-edit-step-text {
+.pts-edit-step-text{
   padding-left: 5px;
 }
 
@@ -641,20 +666,41 @@ textarea:focus-visible,
   transition: 0.2s;
 }
 
+
+
+
 /* ---------- FOOTER ---------- */
 
 .pts-footer-container {
-  display: flex;
-  min-height: 14rem;
   align-items: center;
   width: 100%;
   background-color: var(--background-second);
 }
 
-.pts-footer-content {
+.pts-footer-slogan-text-container{
   display: flex;
   align-items: center;
-  width: 100%;
+  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 {
@@ -669,7 +715,7 @@ textarea:focus-visible,
   flex: 1;
   justify-content: center;
   margin-left: -224px;
-}
+} 
 
 .pts-footer-linkList ul {
   padding: 0;
@@ -703,6 +749,7 @@ textarea:focus-visible,
   box-sizing: border-box;
 }
 
+
 /* ---------- MODAL ---------- */
 
 .pts-modal-overlay {
@@ -755,6 +802,7 @@ textarea:focus-visible,
     transform: rotate(360deg);
   }
 }
+/*-----------ALWAYS IN THE END OF STYLES----------------*/
 
 .cleanPadding {
   padding: 0;
@@ -764,3 +812,16 @@ textarea:focus-visible,
   margin: 0;
   padding: 0;
 }
+
+.visually-hidden {
+    position: absolute !important;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}

package/src/icons/arrow-down-darkmode.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.7069 15.7071C12.5193 15.8946 12.265 15.9999 11.9999 15.9999C11.7347 15.9999 11.4804 15.8946 11.2929 15.7071L5.63585 10.0501C5.54034 9.95785 5.46416 9.84751 5.41175 9.7255C5.35934 9.6035 5.33176 9.47228 5.3306 9.3395C5.32945 9.20672 5.35475 9.07504 5.40503 8.95215C5.45531 8.82925 5.52957 8.7176 5.62346 8.6237C5.71735 8.52981 5.829 8.45556 5.9519 8.40528C6.0748 8.355 6.20648 8.32969 6.33926 8.33085C6.47204 8.332 6.60325 8.35959 6.72526 8.412C6.84726 8.46441 6.95761 8.54059 7.04985 8.6361L11.9999 13.5861L16.9499 8.6361C17.1385 8.45394 17.3911 8.35315 17.6533 8.35542C17.9155 8.3577 18.1663 8.46287 18.3517 8.64828C18.5371 8.83369 18.6423 9.0845 18.6445 9.3467C18.6468 9.60889 18.546 9.8615 18.3639 10.0501L12.7069 15.7071Z" fill="white"/>
-</g>
-</svg>

package/src/icons/arrow-down.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.7069 15.7071C12.5193 15.8946 12.265 15.9999 11.9999 15.9999C11.7347 15.9999 11.4804 15.8946 11.2929 15.7071L5.63585 10.0501C5.54034 9.95785 5.46416 9.84751 5.41175 9.7255C5.35934 9.6035 5.33176 9.47228 5.3306 9.3395C5.32945 9.20672 5.35475 9.07504 5.40503 8.95215C5.45531 8.82925 5.52957 8.7176 5.62346 8.6237C5.71735 8.52981 5.829 8.45556 5.9519 8.40528C6.0748 8.355 6.20648 8.32969 6.33926 8.33085C6.47204 8.332 6.60325 8.35959 6.72526 8.412C6.84726 8.46441 6.95761 8.54059 7.04985 8.6361L11.9999 13.5861L16.9499 8.6361C17.1385 8.45394 17.3911 8.35315 17.6533 8.35542C17.9155 8.3577 18.1663 8.46287 18.3517 8.64828C18.5371 8.83369 18.6423 9.0845 18.6445 9.3467C18.6468 9.60889 18.546 9.8615 18.3639 10.0501L12.7069 15.7071Z" fill="black"/>
-</g>
-</svg>