@indice/ng-components 0.2.142-beta → 0.2.143

package/_styles.css

@@ -105,10 +105,6 @@
     @apply block px-4 py-2 text-xs text-blue-300 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
-  .nav-link-notifications {
-    @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
-  }
-
   .nav-link-mobile-active {
     @apply bg-gray-900 text-blue-300 block px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
@@ -134,8 +130,8 @@
     @apply antialiased font-sans bg-gray-100;
   }
 
-    .shell-header-container {
-    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-32 z-50;
+  .shell-header-container {
+    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
   }
 
   .shell-header-container-inner {
@@ -147,7 +143,7 @@
   }
 
   .shell-content-container {
-    @apply -mt-24 sm:-mt-32 ;
+    @apply mx-auto -mt-28;
   }
 
   .shell-content-container-no-header {
@@ -177,17 +173,25 @@
   }
 
   .shell-header-md-visible {
-    @apply hidden sm:ml-6 sm:block;
+    @apply hidden sm:block;
   }
 
   .shell-header-link-container {
     @apply hidden sm:ml-6 sm:block ml-10 flex-grow justify-start flex items-center space-x-4;
   }
 
-  .shell-header-links-no-grow-container {
+  .shell-header-link-container-inner {
+    @apply flex justify-start;
+  }
+
+  .shell-header-logo-container {
     @apply flex flex-grow-0 flex-shrink-0 items-center;
   }
 
+  .shell-header-links-far-container {
+    @apply flex flex-grow-0 flex-shrink-0 items-center ml-2;
+  }
+
   .shell-header-menu-rounded-button {
     @apply bg-gray-800 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
   }
@@ -205,7 +209,7 @@
   }
 
   .shell-header-profile-dropdown-button {
-    @apply max-w-xs focus:outline-none rounded-full flex items-center text-sm ring-1 ring-blue-300 focus:ring-offset-1
+    @apply max-w-xs outline-none focus:outline-none rounded-full flex items-center text-sm ring-1 ring-blue-300 focus:ring-offset-1
     focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;
   }
 
@@ -217,54 +221,13 @@
     @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
-  .shell-header-profile-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 mt-36 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
-  }
-
-  .shell-header-notifications {
-    @apply flex gap-3 items-center;
-  }
-
-  .shell-header-notifications-dropdown-button {
-    @apply max-w-xs focus:outline-none rounded-full flex items-center text-sm ring-1 ring-blue-300 focus:ring-offset-1
-    focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;
-  }
-
-  .shell-header-notifications-dropdown {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
-  }
-
-  .shell-header-notifications-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
-
-  }
-
-  .shell-header-notifications-dropdown-view-all-button{
-    @apply items-center align-text-bottom font-medium w-full px-2.5 py-2.5 text-xs text-gray-600 focus:outline-none;
-  }
-
-  .notification-messages::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-    background: transparent;
-    cursor: pointer;
-    /* or add it to the track */
-  }
-
-  .notification-messages::-webkit-scrollbar-thumb {
-    @apply bg-gray-600;
-
-    &:hover {
-      @apply bg-gray-700;
-    }
-  }
 
   .mobile-menu-button-container {
-    @apply -mr-2 flex sm:hidden;
+    @apply -mr-2 grid grid-cols-1 sm:hidden;
   }
 
   .mobile-menu-button {
-    @apply inline-flex items-center justify-center p-2 rounded-sm text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
+    @apply inline-flex items-center justify-center p-2 rounded-sm outline-none text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
   }
 
   .mobile-menu-container {
@@ -272,7 +235,7 @@
   }
 
   .mobile-menu-link-container {
-    @apply px-2 py-3 space-y-1 sm:px-3;
+    @apply px-2 py-3 grid grid-cols-1 space-y-1;
   }
 
   .mobile-menu-user-info-container {
@@ -300,16 +263,13 @@
   }
 
   .mobile-menu-rounded-button {
-    @apply ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-offset-blue-800 focus:ring-blue-400 focus:ring-white;
+    @apply ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white;
   }
 
   .mobile-menu-rounded-button-icon-style {
     @apply h-6 w-6;
   }
 
-  .mobile-menu-link-container {
-    @apply mt-3 px-2 space-y-1;
-  }
 
 
   .shell-footer-container {
@@ -400,15 +360,15 @@
   }
 
   .view-container-fluid {
-    @apply sm:px-0;
+    @apply sm:px-0 ;
   }
 
   .view-layout-paddings {
-    @apply py-6 sm:py-10;
+    @apply pt-6 pb-4 sm:py-6;
   }
 
   .view-layout-title-container {
-    @apply flex flex-row justify-start ;
+    @apply flex text-white flex-row justify-start ;
   }
 
   .view-layout-title-container-inner {
@@ -428,26 +388,19 @@
   }
 
   .meta-container {
-    @apply mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6;
+    @apply ml-1 mt-2 flex flex-row sm:flex-row sm:flex-wrap space-x-2 sm:space-x-4;
   }
 
   .meta-item-container {
-    @apply mt-2 flex items-center text-sm text-gray-500;
+    @apply flex items-center;
   }
 
   .meta-icon {
-    @apply text-sm text-gray-400 mr-1;
-  }
-
-  .meta-container-sm {
-    @apply flex flex-wrap sm:flex-row space-x-2;
+    @apply text-sm mr-1;
   }
 
   .meta-text {
-    @apply text-white text-xs;
-    margin-top: 2px;
-    margin-left: 2px;
-    margin-right: 2px;
+    @apply text-xs mr-1;
   }
 
   .search-container {
@@ -1203,6 +1156,45 @@
 /*# sourceMappingURL=styles.css.map*/
 
 
+@layer components {
+
+  .notifications-nav-link {
+    @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
+  }
+
+  .header-notifications {
+    @apply flex gap-3 items-center;
+  }
+
+  .header-notifications-dropdown-button {
+    @apply max-w-xs focus:outline-none rounded-full flex items-center text-sm ring-1 ring-blue-300 focus:ring-offset-1
+    focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;
+  }
+
+  .header-notifications-dropdown {
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+  }
+
+  .header-notifications-dropdown-with-username {
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+  }
+
+  .header-notifications-dropdown-view-all-button{
+    @apply items-center align-text-bottom font-medium w-full px-2.5 py-2.5 text-xs text-gray-600 focus:outline-none;
+  }
+
+  .notification-messages::-webkit-scrollbar-thumb {
+    @apply bg-gray-600 hover:bg-gray-700;
+  }
+}
+
+.notification-messages::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  background: transparent;
+  cursor: pointer;
+  /* or add it to the track */
+}
 /*
   Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 */