@indice/ng-components 0.2.132 → 0.2.134-beta

package/README.md

@@ -1,4 +1,4 @@
-# INDICE ANGULAR Components
-
-Indice common components for Angular 2+
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+# INDICE ANGULAR Components
+
+Indice common components for Angular 2+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.

package/_styles.css

@@ -105,6 +105,10 @@
     @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;
   }
@@ -130,8 +134,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-28 z-50;
+    .shell-header-container {
+    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-32 z-50;
   }
 
   .shell-header-container-inner {
@@ -143,7 +147,7 @@
   }
 
   .shell-content-container {
-    @apply mx-auto -mt-28;
+    @apply -mt-24 sm:-mt-32 ;
   }
 
   .shell-content-container-no-header {
@@ -173,25 +177,17 @@
   }
 
   .shell-header-md-visible {
-    @apply hidden sm:block;
+    @apply hidden sm:ml-6 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-link-container-inner {
-    @apply flex justify-start;
-  }
-
-  .shell-header-logo-container {
+  .shell-header-links-no-grow-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;
   }
@@ -209,7 +205,7 @@
   }
 
   .shell-header-profile-dropdown-button {
-    @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
+    @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;
   }
 
@@ -221,13 +217,54 @@
     @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 grid grid-cols-1 sm:hidden;
+    @apply -mr-2 flex sm:hidden;
   }
 
   .mobile-menu-button {
-    @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;
+    @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;
   }
 
   .mobile-menu-container {
@@ -235,7 +272,7 @@
   }
 
   .mobile-menu-link-container {
-    @apply px-2 py-3 grid grid-cols-1 space-y-1;
+    @apply px-2 py-3 space-y-1 sm:px-3;
   }
 
   .mobile-menu-user-info-container {
@@ -263,13 +300,16 @@
   }
 
   .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-2 focus:ring-offset-gray-800 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-1 focus:ring-offset-blue-800 focus:ring-blue-400 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 {
@@ -360,15 +400,15 @@
   }
 
   .view-container-fluid {
-    @apply sm:px-0 ;
+    @apply sm:px-0;
   }
 
   .view-layout-paddings {
-    @apply pt-6 pb-4 sm:py-6;
+    @apply py-6 sm:py-10;
   }
 
   .view-layout-title-container {
-    @apply flex text-white flex-row justify-start ;
+    @apply flex flex-row justify-start ;
   }
 
   .view-layout-title-container-inner {
@@ -388,19 +428,26 @@
   }
 
   .meta-container {
-    @apply ml-1 mt-2 flex flex-row sm:flex-row sm:flex-wrap space-x-2 sm:space-x-4;
+    @apply mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6;
   }
 
   .meta-item-container {
-    @apply flex items-center;
+    @apply mt-2 flex items-center text-sm text-gray-500;
   }
 
   .meta-icon {
-    @apply text-sm mr-1;
+    @apply text-sm text-gray-400 mr-1;
+  }
+
+  .meta-container-sm {
+    @apply flex flex-wrap sm:flex-row space-x-2;
   }
 
   .meta-text {
-    @apply text-xs mr-1;
+    @apply text-white text-xs;
+    margin-top: 2px;
+    margin-left: 2px;
+    margin-right: 2px;
   }
 
   .search-container {