@dubai-design-system/components-js 3.11.5 → 3.11.6

package/dist/collection/components/dda-header/dda-header-main.css

@@ -9,11 +9,13 @@
     left: 0;
     z-index: 999;
 }
-body.transparent .dda-header{
+
+body.transparent .dda-header {
     background: transparent;
     box-shadow: none;
 }
-.dda-header.white{
+
+.dda-header.white {
     background: var(--dda-surface-100) !important;
 }
 
@@ -21,9 +23,10 @@ body.transparent .dda-header{
     position: relative;
 }
 
-body.transparent .dda-header.white{
+body.transparent .dda-header.white {
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
 }
+
 body.transparent .dda-header::before {
     content: "";
     width: 100%;
@@ -33,7 +36,8 @@ body.transparent .dda-header::before {
     top: 0;
     left: 0;
 }
-.dda-header.white::before{
+
+.dda-header.white::before {
     display: none !important;
 }
 
@@ -51,16 +55,20 @@ body.transparent .dda-header::before {
 .govt-logo img {
     height: 72px;
 }
+
 .entt-logo img {
     height: 54px;
 }
-body.transparent .logo-colored{
+
+body.transparent .logo-colored {
     display: none;
 }
-.logo-white{
+
+.logo-white {
     display: none;
 }
-body.transparent .logo-white{
+
+body.transparent .logo-white {
     display: block;
 }
 
@@ -75,7 +83,7 @@ body.transparent .logo-white{
     display: none;
 }
 
-:root[data-theme='dark'] .dda-header.white .dda-head-logo .logo-white{
+:root[data-theme='dark'] .dda-header.white .dda-head-logo .logo-white {
     display: block;
 }
 
@@ -94,7 +102,8 @@ body.transparent .logo-white{
     align-items: center;
     gap: 10px;
 }
-.dda-menu-overley{
+
+.dda-menu-overley {
     width: 100%;
     height: 100vh;
     background: #0000007e;
@@ -104,7 +113,8 @@ body.transparent .logo-white{
     z-index: 1;
     display: none;
 }
-.dda-menu-overley.show-overley{
+
+.dda-menu-overley.show-overley {
     display: block;
 }
 
@@ -112,9 +122,11 @@ body.transparent .logo-white{
     display: flex;
     align-items: center;
 }
-.hamburger-menu > dda-tooltip{
+
+.hamburger-menu>dda-tooltip {
     height: 22px;
-} 
+}
+
 .hamburger-menu-btn {
     width: 27px;
     height: 22px;
@@ -200,14 +212,15 @@ body.transparent .hamburger-line {
 
 
 
-.dda-header-megamenu{
+.dda-header-megamenu {
     width: 100%;
     padding: 0 15px;
     position: fixed;
     top: 175px;
     left: 0;
 }
-.dda-header-submenu-item{
+
+.dda-header-submenu-item {
     min-height: 350px;
     background: var(--dda-surface-100);
     border-radius: 8px;
@@ -216,7 +229,8 @@ body.transparent .hamburger-line {
     box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
     position: relative;
 }
-.dda-header-submenu-item .dda-header-submenu-title{
+
+.dda-header-submenu-item .dda-header-submenu-title {
     font-size: var(--font-h6);
     font-weight: var(--font-weight-regular);
     color: var(--dda-on-surface-0);
@@ -225,7 +239,7 @@ body.transparent .hamburger-line {
     margin-bottom: 10px;
 }
 
-.dda-header-submenu-item ul{
+.dda-header-submenu-item ul {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -276,7 +290,7 @@ body.transparent .hamburger-line {
 }
 
 
-.da-header-search{
+.da-header-search {
     display: none;
 }
 
@@ -285,16 +299,18 @@ body.transparent .hamburger-line {
 .dda-toolbar-menu ul li .tool-btn svg,
 .dda-toolbar-menu-sidemenu ul li .tool-btn i,
 .dda-toolbar-menu-sidemenu ul li .tool-btn svg {
-    font-size: 20px; 
+    font-size: 20px;
     color: var(--dda-on-surface-variant-30);
 }
 
-@media only screen and (min-width: 768px){
+@media only screen and (min-width: 768px) {
+
     body.transparent .dda-toolbar-menu ul li .tool-btn,
     body.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn {
         background-color: rgb(41 42 45 / 14%);
         color: var(--dda-neutral-100);
     }
+
     body.transparent .dda-toolbar-menu ul li .tool-btn i,
     body.transparent .dda-toolbar-menu ul li .tool-btn svg,
     body.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn i,
@@ -304,11 +320,11 @@ body.transparent .hamburger-line {
 }
 
 
-.dda-search{
+.dda-search {
     position: relative;
 }
 .dda-search i,
-.dda-search svg{
+.dda-search svg {
     font-size: 21px;
     color: var(--dda-on-surface-variant-30);
     position: absolute;
@@ -316,10 +332,12 @@ body.transparent .hamburger-line {
     inset-inline-start: 10px;
     z-index: 1;
 }
-.dda-header-search-input{
+
+.dda-header-search-input {
     padding: 0px !important;
 }
-.dda-search input[type="text"]{
+
+.dda-search input[type="text"] {
     width: 110px;
     height: 40px;
     background-color: transparent;
@@ -333,28 +351,36 @@ body.transparent .hamburger-line {
     padding-inline-end: 10px;
     /* transition: all 250ms ease; */
 }
-.dda-search input[type="text"]:focus{
+
+.dda-search input[type="text"]:focus {
     width: 250px;
     /* outline: 0; */
 }
+
 .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-on-surface-0);
 }
-.dda-search input[type="text"]::placeholder{
+
+.dda-search input[type="text"]::placeholder {
     color: var(--dda-on-surface-0);
 }
-body.transparent .dda-header .dda-search input[type="text"]{
+
+body.transparent .dda-header .dda-search input[type="text"] {
     color: var(--dda-surface-100);
 }
+
 body.transparent .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }
-body.transparent .dda-search input[type="text"]::placeholder{
+
+body.transparent .dda-search input[type="text"]::placeholder {
     color: var(--dda-neutral-100);
 }
-body.transparent .dda-search i{
+
+body.transparent .dda-search i {
     color: var(--dda-neutral-100);
 }
+
 .dda-sidemenu {
     display: none;
     width: 375px;
@@ -444,17 +470,21 @@ ul.main_side_menu li a.showSubSub::after {
     transform: rotate(-45deg);
     /* transition: all 250ms ease; */
 }
-ul.main_side_menu li a i{
+
+ul.main_side_menu li a i {
     display: block;
 }
-:root[dir='rtl'] ul.main_side_menu li a i{
+
+:root[dir='rtl'] ul.main_side_menu li a i {
     transform: rotate(180deg);
 }
 
-:root[dir='rtl'] ul.main_side_menu li a.showSub::after, :root[dir='rtl'] ul.main_side_menu li a.showSubSub::after  {
+:root[dir='rtl'] ul.main_side_menu li a.showSub::after,
+:root[dir='rtl'] ul.main_side_menu li a.showSubSub::after {
     transform: rotate(135deg);
 }
-:root[dir='rtl'] .material-icons{
+
+:root[dir='rtl'] .material-icons {
     direction: rtl;
 }
 
@@ -586,14 +616,16 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     display: none;
     /* transition: left 0.5s ease; */
 }
-.mobile-accessibility{
+
+.mobile-accessibility {
     padding-top: 35px;
     position: absolute;
     top: 0px;
     z-index: 10;
     height: 100%;
 }
-.mobile-accessibility-content{
+
+.mobile-accessibility-content {
     display: block;
     padding: 0 14px;
     height: 100%;
@@ -636,7 +668,73 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     inset-inline-end: 5px;
 }
 
+.dda-login-popup.desktop,
+.dda-login-popup.mobile {
+    display: none;
+}
 
+.dda-login-popup {
+    background-color: var(--dda-surface-100);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--dda-surface-variant-90);
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    z-index: 50;
+    height: fit-content;
+    min-width: 110px;
+}
+
+.dda-login-popup.desktop {
+    position: fixed;
+    top: 170px;
+    bottom: auto;
+    inset-inline-end: 5.5rem;
+}
+
+.dda-login-popup.mobile {
+    position: fixed;
+    bottom: 2.5rem;
+    inset-inline-end: 6rem;
+}
+
+.dda-login-popup ul> :not(:last-child) {
+    border-bottom: 1px solid var(--dda-surface-variant-90);
+}
+
+.dda-login-popup a {
+    text-align: start;
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+    display: inline-block;
+    text-decoration: none;
+    width: 100%;
+    color: var(--dda-surface-0);
+    border-radius: 4px;
+}
+
+.dda-login-popup a:hover {
+    background-color: var(--dda-on-primary-98);
+    color: var(--dda-on-primary-variant-40);
+}
+
+@media (min-width: 640px) {
+    .dda-login-popup {
+        inset-inline-end: 8rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .dda-login-popup.desktop{
+        display: none !important;
+    }
+}
+
+@media (min-width: 767px) {
+    .dda-login-popup.mobile{
+        display: none !important;
+    }
+}
 
 /*Mobile view*/
 .dda-mobile-entt-logo,
@@ -660,19 +758,20 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
     font-size: 23px;
     color: var(--dda-on-surface-variant-30);
 }
-.dda-mobile-search a svg ,
+
+.dda-mobile-search a svg,
 .dda-mobile-search button svg {
     fill: var(--dda-on-surface-variant-30);
 }
 
 body.transparent .dda-mobile-search a i,
-body.transparent .dda-mobile-search a svg, 
+body.transparent .dda-mobile-search a svg,
 body.transparent .dda-mobile-search button i,
 body.transparent .dda-mobile-search button svg {
     color: var(--dda-neutral-100);
 }
 
-.maincontent{
+.maincontent {
     padding-top: 170px;
     padding-bottom: 100px;
 }
@@ -682,13 +781,15 @@ body.transparent .dda-mobile-search button svg {
     body.transparent .dda-header::before {
         height: 130px;
     }
-    .dda-header{
+
+    .dda-header {
         padding: 0 !important;
     }
 
-    .dda-menu-overley{
+    .dda-menu-overley {
         display: none !important;
     }
+
     .side-nav-close-btn {
         display: block;
     }
@@ -783,7 +884,7 @@ body.transparent .dda-mobile-search button svg {
         padding-inline-end: 15px;
     }
 
-    ul.main_side_menu li a{
+    ul.main_side_menu li a {
         padding-left: 10px;
         padding-right: 10px;
     }
@@ -799,21 +900,21 @@ body.transparent .dda-mobile-search button svg {
         border-radius: 0px;
     }
 
-    ul.main_side_menu li a.showSub::after{
+    ul.main_side_menu li a.showSub::after {
         transform: rotate(45deg);
         inset-inline-end: 13px;
     }
-    
+
     ul.main_side_menu li a.icon_arrow::after {
         transform: rotate(-135deg);
     }
 
-    :root[dir='rtl'] ul.main_side_menu li a.showSub::after, 
+    :root[dir='rtl'] ul.main_side_menu li a.showSub::after,
     :root[dir='rtl'] ul.main_side_menu li a.showSubSub::after {
         transform: rotate(45deg);
     }
 
-    :root[dir='rtl'] ul.main_side_menu li a.showSub.icon_arrow::after, 
+    :root[dir='rtl'] ul.main_side_menu li a.showSub.icon_arrow::after,
     :root[dir='rtl'] ul.main_side_menu li a.showSub.icon_arrow::after {
         transform: rotate(-135deg);
     }
@@ -833,17 +934,20 @@ body.transparent .dda-mobile-search button svg {
         padding: 0;
         padding-inline-start: 10px;
     }
+
     .maincontent {
         padding-top: 100px;
     }
 
-    ul.main_side_menu a.showSub.icon_arrow{
+    ul.main_side_menu a.showSub.icon_arrow {
         background-color: var(--dda-on-primary-94);
     }
-    ul.main_side_menu .main_sub_menu.showSubMenu{
+
+    ul.main_side_menu .main_sub_menu.showSubMenu {
         background-color: var(--dda-on-primary-98);
     }
-    ul.main_side_menu li a:hover{
+
+    ul.main_side_menu li a:hover {
         padding-bottom: 13px;
     }
 
@@ -852,9 +956,10 @@ body.transparent .dda-mobile-search button svg {
 @media (max-width: 1200px) {}
 
 @media (max-width: 1024px) {
-    .dda-header{
+    .dda-header {
         padding: 10px 0;
     }
+
     .dda-head-logo,
     .dda-menu-container {
         width: 100vw;
@@ -865,16 +970,20 @@ body.transparent .dda-mobile-search button svg {
     .dda-search input[type="text"] {
         transition: all 250ms ease;
     }
+
     .dda-header {
         transition: all 300ms ease-in-out;
     }
+
     .dda-sidemenu {
         transition: left 0.5s ease;
     }
+
     ul.main_side_menu li a.showSub::after,
     ul.main_side_menu li a.showSubSub::after {
         transition: all 250ms ease;
     }
+
     .dda-accessibility {
         transition: left 0.5s ease;
     }