@repobit/dex-system-design 0.18.1 → 0.19.1

package/src/components/footer/footer.css.js

@@ -9,6 +9,62 @@ export default css`
     font-size: var(--typography-body-small-fontSize);
     line-height: var(--typography-lineHeight-normal); 
   }
+/* Stiluri de accesibilitate pentru toate link-urile din footer */
+.footer-nav-main a:focus,
+.footer-links a:focus,
+.footer-countries-container a:focus,
+.country-toggle:focus,
+.close-countries-button:focus,
+.social-icons a:focus {
+  outline: none;
+  border: 2px solid var(--color-blue-500);
+  box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+  border-radius: 4px;
+}
+
+/* Stiluri specifice pentru butoane */
+.country-toggle:focus,
+.close-countries-button:focus {
+  border-color: var(--color-blue-500);
+  box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+}
+
+/* Stiluri pentru link-urile din containerul de țări */
+.footer-countries-container a:focus {
+  border-color: var(--color-blue-500);
+  box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+// /* Stiluri pentru link-urile din social icons */
+// .social-icons a:focus {
+//   border-radius: 50%;
+//   padding: 4px;
+// }
+
+/* Stiluri pentru link-urile din navigația principală */
+.footer-nav-main a:focus {
+  padding: 2px 6px;
+  margin: -2px -6px;
+}
+.footer-secondary-nav {
+padding-top: var(--spacing-24);
+padding-bottom: var(--spacing-24);
+}
+.footer-nav-main-container {
+padding-top: var(--spacing-12);
+padding-bottom: var(--spacing-12);
+}
+/* Stiluri pentru link-urile din grupurile de link-uri */
+bd-footer-links-group a:focus {
+  padding: 2px 6px;
+  margin: -2px -6px;
+  display: inline-block;
+}
+
+
+
 
   bd-divider-vertical {
     display: inline-block;
@@ -57,15 +113,17 @@ export default css`
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--spacing-32);
-    margin-bottom: var(--spacing-24);
+    // margin-bottom: var(--spacing-24);
     flex-wrap: nowrap;
+    padding-top: var(--spacing-24);
+    padding-bottom: var(--spacing-24);
   }
 
   .footer-middle-line {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
-    gap: (--spacing-16);
+    align-items: center;
+    gap: var(--spacing-16);
     padding-top: var(--spacing-24);
     padding-bottom: var(--spacing-24);
 
@@ -75,7 +133,7 @@ export default css`
     flex: 1;
     display: flex;
     justify-content: flex-end;
-    align-items: baseline;
+    align-items: center;
     margin: 0;
     font-size: var(--typography-body-small-fontSize);
     font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
@@ -383,6 +441,7 @@ export default css`
   .footer-countries-container a.selected {
     font-weight: var(--typography-fontWeight-bold);
     color: var(--color-primary);
+    right: 12px;
   }
 .footer-countries-container {
     margin-top: var(--spacing-16);
@@ -412,214 +471,225 @@ export default css`
   height: var(--dimension-20px);
   display: block;
 }
- 
- @media (max-width: 768px) {
-    :host {
-      // background-color: var(--color-neutral-0) !important;
-      // color: #151719 !important;
-      // --nav-link-color: #151719 !important;
-    }
-
-    .footer-nav-main {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-8);
-    }
-
-    .footer-nav-main bd-divider-vertical {
-      display: none !important;
-    }
-
-    // .footer-nav-main a {
-    //   color: #151719 !important;
-    //   padding: 0.25rem 0;
-    // }
-
-    // bd-footer a[slot="nav"] svg {
-    //   fill: #151719 !important;
-    // }
-
-    // * {
-    //   color: #151719 !important;
-    // }
-
-    // bd-divider-vertical,
-    // bd-divider-horizontal {
-    //   background-color: #151719 !important;
-    // }
-
-    // a {
-    //   color: #151719 !important;
-    // }
-
-    // a:hover {
-    //   color: #151719 !important;
-    // }
-
-    // ::slotted(a[slot="social-top"] svg) {
-    //   fill: #151719 !important;
-    //   color: #151719 !important;
-    // }
-
-    // nav.footer-nav-main ::slotted(a[slot="nav"]) {
-    //   color: #151719 !important;
-    // }
-
-    // .country-toggle {
-    //   color: #151719 !important;
-    //   border-color: #151719 !important;
-    // }
-
-    // .footer-top {
-    //   flex-direction: row;
-    //   align-items: flex-start;
-    //   gap: var(--spacing-16);
-    //   background-color: var(--color-neutral-0) !important;
-    //   padding: var(--spacing-32) 0 0;
-    // }
-
-    .footer-links {
-      flex-direction: column;
-      gap: var(--spacing-32);
-    }
-
-    .footer-middle-line {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-16);
-    }
-
-    .footer-middle-line > :last-child {
-      justify-content: flex-start;
-      text-align: left;
-    }
-
-    .footer-social-legal,
-    .footer-bottom {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-16);
-    }
-
-    .footer-address {
-      text-align: left;
-    }
-
-    .footer-extra {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    .footer-anpc,
-    .footer-locale,
-    .footer-countries {
-      text-align: left;
-      width: 100%;
-    }
-
-    .footer-nav-main a[slot="nav"] {
-      color: #151719 !important;
-    }
-
-    bd-footer-links-group {
-      margin-bottom: 10px;
-    }
-
-    .second-nav .footer-nav-main {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-14);
-    }
-
-    .second-nav .footer-nav-main bd-divider-vertical {
-      display: none !important;
-    }
-
-    .second-nav .footer-nav-main a {
-      color: #151719 !important;
-      padding: var(--spacing-4) 0;
-      display: block;
-    }
-    
-    .footer-links-right.social-icons a svg {
-      fill: #151719 !important;
-      color: #151719 !important;
-    }
-  //   .footer-top-bleed {
-  //   background: transparent;
-  // }
+@media (max-width: 768px) {
+  :host {
+    font-size: var(--typography-body-small-fontSize);
+  }
+
+  .footer-nav-main {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+  }
+
+  .footer-nav-main bd-divider-vertical {
+    display: none !important;
+  }
+
+  .footer-middle-line {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+  }
+
+  .footer-middle-line > :last-child {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  .footer-social-legal,
+  .footer-bottom {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+  }
+
+  .footer-address {
+    text-align: left;
+  }
+
+  .footer-extra {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .footer-anpc,
+  .footer-locale,
+  .footer-countries {
+    text-align: left;
+    width: 100%;
+  }
+
+  .footer-nav-main a[slot="nav"] {
+    color: #151719 !important;
+  }
+
+  bd-footer-links-group {
+    margin-bottom: 10px;
+  }
+
+  .second-nav .footer-nav-main {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-14);
+  }
+
+  .second-nav .footer-nav-main bd-divider-vertical {
+    display: none !important;
+  }
+
+  .second-nav .footer-nav-main a {
+    color: #151719 !important;
+    padding: var(--spacing-4) 0;
+    display: block;
+  }
+  
+  .footer-links-right.social-icons a svg {
+    fill: #151719 !important;
+    color: #151719 !important;
+  }
+
   .social-icons {
     gap: var(--spacing-40);
     align-items: center;
-    margin:auto;
-}
-.second-nav {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-8);
-}
-.second-nav.footer-nav-main{
-display: inline-grid;}
-.second-nav bd-divider-vertical {
-  display: none !important;
-}
+    margin: auto;
+  }
 
-.second-nav a {
-  color: #151719 !important;
-  padding: var(--spacing-4) 0;
-  display: block;
-}
-  .footer-countries-toggle{
+  .second-nav {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+  }
+
+  .second-nav.footer-nav-main {
+    display: inline-grid;
+  }
+
+  .second-nav bd-divider-vertical {
+    display: none !important;
+  }
+
+  .second-nav a {
+    color: #151719 !important;
+    padding: var(--spacing-4) 0;
+    display: block;
+  }
+
+  .footer-countries-toggle {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     margin: var(--spacing-16) 0;
-    }
- .country-toggle{
-  width: 270px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto;
-      }
-      .footer-countries-container {
-      display: block !important;
-      }
-}
-
-.footer-countries-container {
-  display: flex;
-  gap: var(--spacing-32);
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-/* Pentru desktop - 3 coloane */
-.footer-countries-container bd-footer-links-group {
-  flex: 1;
-  min-width: calc(33.33% - var(--spacing-32));
-}
+  }
 
-/* Pentru tableta - 2 coloane */
-@media (max-width: 1024px) and (min-width: 769px) {
-  .footer-countries-container bd-footer-links-group {
-    flex: 0 0 calc(50% - var(--spacing-16));
-    min-width: calc(50% - var(--spacing-16));
+  .country-toggle {
+    width: 270px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
   }
-}
 
-/* Pentru mobil - 1 coloană */
-@media (max-width: 768px) {
   .footer-countries-container {
+    display: block !important;
     flex-direction: column;
     gap: var(--spacing-16);
   }
-  
+
   .footer-countries-container bd-footer-links-group {
     flex: 0 0 100%;
     width: 100%;
   }
+
+  /* STILURI MODIFICATE PENTRU FOOTER-LINKS PE MOBILE */
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8) !important;
+  }
+
+  .footer-links-left,
+  .footer-links-right {
+    width: 100%;
+  }
+
+  /* QUICK LINKS - PRIMA POZIȚIE */
+  .footer-links-left {
+    order: 1;
+  }
+
+  /* DIVIDER - ÎNTRE QUICK LINKS ȘI SOCIAL LINKS */
+  /* Targetăm divider-ul care este copil direct în .footer-links */
+  .footer-links > bd-divider-horizontal {
+    order: 2;
+    margin: var(--spacing-16) 0;
+    width: 100%;
+  }
+
+  /* SOCIAL LINKS - A TREIA POZIȚIE (DUPĂ DIVIDER) */
+  .footer-links-right {
+    order: 3;
+    display: flex;
+    justify-content: center;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* STILURI PENTRU COMPONENTELE BD-FOOTER-LINKS-GROUP */
+  bd-footer-links-group {
+    width: 100% !important;
+    min-width: 100% !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin-bottom: var(--spacing-8) !important;
+  }
+
+  .footer-links-left ::slotted(bd-footer-links-group) {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin-bottom: var(--spacing-8) !important;
+  }
+
+  /* GRID PENTRU QUICK LINKS */
+  .footer-links-left bd-grid {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--spacing-8) !important;
+  }
+
+  bd-grid {
+    grid-template-columns: 1fr !important;
+    gap: var(--spacing-8) !important;
+  }
+
+  .footer-links-left {
+    gap: var(--spacing-8) !important;
+  }
+  .footer-middle-line {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding-top: 0 !important;
+  }
+
+  .secondary-nav-container {
+    order: 1;
+    width: 100%;
+  }
+
+  /* Divider-ul imediat după secondary-nav */
+  .secondary-nav-container bd-divider-horizontal {
+    margin-top: var(--spacing-16);
+    margin-bottom: var(--spacing-16);
+    width: 100%;
+  }
+
+  .footer-address {
+    order: 2;
+    width: 100%;
+    text-align: left;
+  }
 }
 `;