optimized-react-component-library-xyz123 0.10.10 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.10.10",
+  "version": "0.11.1",
   "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) {
@@ -337,6 +338,15 @@
     .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

@@ -225,6 +225,15 @@
     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;

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,6 +11,7 @@
   --info: #545454;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
+  --background-third: #414141;
 }
 
 body,
@@ -650,17 +651,34 @@ 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);
+  padding: 1.8rem 2.4rem;
+}
+
+.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 {