optimized-react-component-library-xyz123 2.12.7 → 2.12.9

package/package.json

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

@@ -73,6 +73,15 @@
     fill: var(--dark-text);
   }
 
+  .pts-header-content {
+    background-color: var(--dark-background);
+  }
+
+  .pts-header-logo-container,
+  .pts-header-navigation-container {
+    background: var(--dark-background-second);
+  }
+
   .pts-languageButton {
     color: var(--dark-text);
   }
@@ -87,6 +96,7 @@
   .pts-navigation-header-headline-container {
     border-color: var(--dark-background-third) !important;
   }
+
   .pts-navigation-header-nav-container button svg path,
   .pts-navigation-header-nav-container button svg line {
     color: var(--dark-text);

package/src/css/mobileView.css

@@ -25,6 +25,10 @@
     align-items: center;
   }
 
+  .pts-site-headline {
+    margin-bottom: unset;
+  }
+
   .pts-site-headline,
   .pts-navigation-header-headline-container p {
     font-size: 1.6rem;
@@ -36,11 +40,64 @@
     justify-content: center;
     height: 4.8rem;
     gap: 0.6rem;
+    margin-bottom: unset;
   }
 
-  /* todo .pts-navigation-header-nav-container button {
-    width: 100%;
-  }*/
+  .pts-navigation-header-nav-container {
+    width: calc(100% - 3.2rem);
+    padding: 0 1.6rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    height: 4.8rem;
+  }
+
+  .pts-navigation-header-nav-container .pts-secondary-button {
+    width: 120px;
+  }
+
+  /*--- 3 knappar ---*/
+  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(1) {
+    justify-self: start;
+  }
+
+  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(2) {
+    justify-self: center;
+  }
+
+  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(3) {
+    justify-self: end;
+  }
+
+  /*--- 2 knappar: mitten och höger ---*/
+  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
+      :has(.pts-secondary-button:nth-child(3))
+    ) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
+      :has(.pts-secondary-button:nth-child(3))
+    )
+    .pts-secondary-button:nth-child(1) {
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
+      :has(.pts-secondary-button:nth-child(3))
+    )
+    .pts-secondary-button:nth-child(2) {
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  /*--- 1 knapp: höger ---*/
+  .pts-navigation-header-nav-container:not(:has(.pts-secondary-button:nth-child(2)))
+    .pts-secondary-button {
+    grid-column: 2;
+    justify-self: center;
+  }
 
   .pts-navigation-close-button {
     align-items: center;
@@ -196,10 +253,13 @@
   .pts-header-navigation-container {
     align-items: center;
     justify-content: center;
+    margin-top: 0.4rem;
+    margin-bottom: unset;
   }
 
   .pts-languageButton {
     margin: 0.4rem 0;
+    margin-left: -10px;
   }
 
   .languageIcon {

package/src/css/styles.css

@@ -127,7 +127,7 @@ input:focus-visible:-webkit-autofill {
   white-space: nowrap;
   color: var(--action);
   padding: 0.8rem 2rem;
-  border: 2px solid var(--background);
+  border: 2px solid var(--main);
   border-radius: 0.8rem;
 }
 
@@ -156,7 +156,7 @@ input:focus-visible:-webkit-autofill {
   display: flex;
   flex-direction: column;
   justify-self: center;
-  max-width: 8.6rem;
+  max-width: 860px;
   margin: 1.6rem 0;
 }
 
@@ -230,10 +230,12 @@ input:focus-visible:-webkit-autofill {
 .pts-header-content {
   width: 100%;
   display: flex;
+  background-color: var(--background);
 }
 
 .pts-header-logo-container {
   height: 4rem;
+  background: var(--main);
 }
 
 .pts-header-logo svg {
@@ -246,11 +248,13 @@ input:focus-visible:-webkit-autofill {
   justify-content: flex-end;
   width: 100%;
   align-items: flex-end;
+  margin-bottom: -1.6rem;
+  background: var(--main);
 }
 
 .languageIcon {
   position: relative;
-  margin-top: 0.3rem;
+  margin-top: 0.4rem;
   padding-right: 0.6rem;
   top: 0.01rem;
 }
@@ -260,10 +264,6 @@ input:focus-visible:-webkit-autofill {
   height: 1.6rem;
 }
 
-.pts-languageButton-text:hover {
-  text-decoration: underline 0.2rem;
-}
-
 /**Header with navigation**/
 
 .pts-navigation-header-container {
@@ -311,6 +311,10 @@ input:focus-visible:-webkit-autofill {
   bottom: -1px;
 }
 
+.pts-site-headline {
+  margin-bottom: -1.6rem;
+}
+
 .pts-navigation-header-nav-container .pts-open-icon {
   position: relative;
   top: 4px;
@@ -335,6 +339,7 @@ input:focus-visible:-webkit-autofill {
   width: 100%;
   align-items: flex-end;
   height: 5rem;
+  margin-bottom: -1.6rem;
 }
 
 .pts-navigation-header-nav-container button {
@@ -1006,6 +1011,18 @@ input:focus-visible:-webkit-autofill {
   box-sizing: border-box;
 }
 
+.pts-footer-linkList .pts-secondary-button {
+  position: relative;
+  color: var(--background);
+  border-color: var(--background-second);
+  margin-left: 1.6rem;
+  top: -0.5rem;
+}
+
+.pts-footer-linkList .pts-secondary-button:hover {
+  border-color: var(--background);
+}
+
 /* ---------- MODAL ---------- */
 
 .pts-modal-overlay {
@@ -1091,18 +1108,6 @@ input:focus-visible:-webkit-autofill {
 
 /*-----------ALWAYS IN THE END OF STYLES----------------*/
 
-.pts-footer-linkList .pts-secondary-button {
-  position: relative;
-  color: var(--background);
-  border-color: var(--background-second);
-  margin-left: 1.6rem;
-  top: -0.5rem;
-}
-
-.pts-footer-linkList .pts-secondary-button:hover {
-  border-color: var(--background);
-}
-
 .secondary_icon {
   padding-right: 0.6rem;
 }