optimized-react-component-library-xyz123 0.12.3 → 0.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.12.3",
+  "version": "0.13.2",
   "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,7 +7,6 @@
     --dark-info: #808080;
     --dark-orientation-active:#F4BF56;
     --dark-background-second:#200827;
-    --dark-background-third:#747474;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -338,13 +337,6 @@
     .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,11 +44,6 @@
     margin: 0;
     padding: 0;
 }
-
-   .pts-footer-slogan-text {
-        font-size: 16px;
-        text-align: center;
-    }
 }
 
 /********************************************/
@@ -230,15 +225,6 @@
     padding-bottom: 4px;
   }
 
-  .pts-footer-slogan-text-container{
-    padding: 2.4rem 1.6rem;
-  }
-
-  .pts-footer-slogan-text{
-    line-height: 2rem;
-  }
-
-
   .pts-footer-logo {
     position: static;
     padding-left: 0;
@@ -311,37 +297,14 @@
   }
 }
 
-
-/********************************************/
-/***************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% + 3rem);
-        width: calc(33.33vw - 10rem);
-        right: auto;
+    left: calc(50% + 2rem) !important;
+    width: calc(33.33vw - 7.7rem) !important;
+    right: auto !important;
   }
 
   .files-upload {

package/src/css/questions.css

@@ -142,6 +142,56 @@ 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 {
@@ -179,14 +229,13 @@ 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;
@@ -204,7 +253,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;
@@ -213,7 +262,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;
@@ -231,7 +280,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;
@@ -250,12 +299,11 @@ 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,7 +11,6 @@
   --info: #545454;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
-  --background-third: #414141;
 }
 
 body,
@@ -651,35 +650,17 @@ 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 {