@indice/ng-components 0.3.2-beta.7 → 0.3.2-beta.70

package/_styles.scss

@@ -18,32 +18,32 @@
   }
 
   select {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
+    @apply block w-full rounded-lg border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
     disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
   }
 
   input[type=text] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
+    @apply block w-full rounded-lg border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
     disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
   }
 
   input[type=password] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
+    @apply block w-full rounded-lg border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
     disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
   }
 
   input[type=email] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
+    @apply block w-full rounded-lg border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
     disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
   }
 
   input[type=number] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
+    @apply block w-full rounded-lg border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
     disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
   }
 
   textarea {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
+    @apply block w-full rounded-lg border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
     disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
   }
 }
@@ -477,11 +477,11 @@
   }
 
   .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;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-lg 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;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .header-notifications-dropdown-view-all-button{
@@ -505,11 +505,11 @@
 }
 
 .langs-menu-expanded {
-    @apply transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
 }
 
 .langs-menu-collapsed {
-    @apply hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
 }
 
   .card-deck-busy{
@@ -659,71 +659,74 @@
   }
 
 
+.datepicker-container {
+    @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 border border-gray-300;
+}
 
-    .datepicker-input {
-        @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6 
-        disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-    }
-    .datepicker-button {
-        @apply relative inline-flex items-center px-1.5 py-1.5 border-t border-b border-r border-gray-300 text-sm rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-0;
-    }
+.datepicker-input {
+    @apply w-full rounded-lg text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
+}
 
-    .datepicker-background {
-        @apply bg-gray-100 mt-10 rounded-sm shadow-md p-4 left-0 z-50 w-full;
-    }
-    .datepicker-btn-wrapper {
-        @apply flex justify-between items-center mb-2;
-    }
+.datepicker-button {
+    @apply mr-1 text-xs focus:outline-none inline-flex items-center justify-center w-6 h-6 text-gray-800 hover:text-gray-900;
+}
 
-    .datepicker-selected-month {
-        @apply text-lg font-bold text-gray-800;
-    }
-    .datepicker-selected-year {
-        @apply ml-1 text-lg text-gray-600 font-normal;
-    }
-    .datepicker-nav-btn {
-        @apply transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25;
-    }
-    .datepicker-nav-btn svg {
-        @apply h-6 w-6 text-gray-500 inline-flex;
-    }
-    .datepicker-wrapper {
-        @apply flex flex-wrap mb-3 -mx-1;
-    }
-    .datepicker-day-name {
-        @apply text-gray-800 font-medium text-center text-sm uppercase;
-    }
-    .datepicker-content-wrapper {
-        @apply flex flex-wrap -mx-1 items-center;
-    }
-    .datepicker-year {
-        @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
-    }
-    .datepicker-year.selected {
-        @apply bg-gray-700 text-white font-medium;
-    }
-    .datepicker-year.not-selected {
-        @apply text-gray-800 hover:bg-gray-800;
-    }
+.datepicker-background {
+    @apply bg-gray-100 mt-10 rounded-lg shadow-md p-4 left-0 z-50 w-full;
+}
+.datepicker-btn-wrapper {
+    @apply flex justify-between items-center mb-2;
+}
 
-    .datepicker-blank-days {
-        @apply text-center border p-1 border-transparent text-sm opacity-50;
-    }
+.datepicker-selected-month {
+    @apply text-lg font-bold text-gray-800;
+}
+.datepicker-selected-year {
+    @apply ml-1 text-lg text-gray-600 font-normal;
+}
+.datepicker-nav-btn {
+    @apply transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25;
+}
+.datepicker-nav-btn svg {
+    @apply h-6 w-6 text-gray-500 inline-flex;
+}
+.datepicker-wrapper {
+    @apply flex flex-wrap mb-3 -mx-1;
+}
+.datepicker-day-name {
+    @apply text-gray-800 font-medium text-center text-sm uppercase;
+}
+.datepicker-content-wrapper {
+    @apply flex flex-wrap -mx-1 items-center;
+}
+.datepicker-year {
+    @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
+}
+.datepicker-year.selected {
+    @apply bg-gray-700 text-white font-medium;
+}
+.datepicker-year.not-selected {
+    @apply text-gray-800 hover:bg-gray-800;
+}
 
-    .datepicker-days {
-        @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
-    }
+.datepicker-blank-days {
+    @apply text-center border p-1 border-transparent text-sm opacity-50;
+}
 
-    .datepicker-days.selected {
-        @apply bg-gray-700 text-white font-medium;
-    }
-    .datepicker-days.not-selected {
-        @apply text-gray-800 hover:bg-gray-800;
-    }
+.datepicker-days {
+    @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
+}
 
-    .datepicker-days.out-of-range{
-        @apply cursor-not-allowed opacity-25;
-    }
+.datepicker-days.selected {
+    @apply bg-gray-700 text-white font-medium;
+}
+.datepicker-days.not-selected {
+    @apply text-gray-800 hover:bg-gray-800;
+}
+
+.datepicker-days.out-of-range{
+    @apply cursor-not-allowed opacity-25;
+}
 
 
   .dropdown-container {
@@ -731,8 +734,8 @@
   }
 
   .dropdown-button {
-    @apply bg-white block w-full rounded-sm border-0 pl-3 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 
-    text-xs leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
+    @apply bg-white block w-full rounded-lg border pl-3 py-1.5 pr-10 ring-0 placeholder:text-gray-300 focus:border-gray-500 hover:border-gray-400
+    text-sm leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-300;
   }
 
   .dropdown-selected-text {
@@ -740,7 +743,7 @@
   }
 
   .dropdown-button-icon {
-    @apply absolute inset-y-0 right-0 flex items-center pointer-events-none;
+    @apply absolute inset-y-0 right-1 flex items-center pointer-events-none;
   }
 
   .dropdown-arrow {
@@ -748,7 +751,7 @@
   }
 
   .dropdown-ul {
-    @apply absolute z-50 mt-1 w-auto bg-white shadow-lg max-h-60 rounded-sm py-1 text-xs ring-1 ring-gray-300 ring-opacity-5 focus:outline-none overflow-x-hidden;
+    @apply absolute z-50 mt-1 w-auto bg-white shadow max-h-60 rounded-lg py-1 text-xs ring-1 ring-gray-300 ring-opacity-5 focus:outline-none overflow-x-hidden;
   }
 
   .dropdown-li {
@@ -813,7 +816,7 @@
   }
 
   .form-header-search-input {
-    @apply block w-60 bg-gray-50 rounded-sm text-sm text-gray-900 placeholder-gray-500 outline-none;
+    @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none;
   }
 
   .field-label {
@@ -3231,7 +3234,7 @@
 
 
   .nav-link {
-    @apply cursor-pointer text-white hover:bg-gray-700 hover:text-white hover:shadow-sm px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-pointer text-white hover:bg-gray-700 hover:text-white hover:shadow-sm px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .sidebar .nav-link {
@@ -3239,11 +3242,11 @@
   }
 
   .nav-link-profile {
-    @apply flex items-center cursor-pointer px-4 py-2 text-xs text-gray-700 hover:bg-gray-100 whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply flex items-center cursor-pointer px-4 py-2 rounded-md text-xs text-gray-700 hover:bg-gray-100 whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .nav-link-mobile {
-    @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .sidebar .nav-link-list-container {
@@ -3259,7 +3262,7 @@
   }
 
   .nav-link-active {
-    @apply cursor-default text-blue-300 bg-gray-900 hover:bg-gray-900 px-3 py-2 rounded-sm text-xs shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-default text-sky-600 bg-gray-900 hover:bg-gray-900 px-3 py-2 rounded-lg text-xs shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .sidebar .nav-link-active {
@@ -3267,28 +3270,29 @@
   }
 
   .sidebar .nav-link-active-b {
-    @apply cursor-default bg-gray-900 border-b border-blue-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+    @apply cursor-default bg-gray-900 border-b border-sky-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
   }
 
   .sidebar .nav-link-active-l {
-    @apply cursor-default bg-gray-900 border-l border-blue-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+    @apply cursor-default  bg-gray-900 border-l border-sky-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
   }
 
   .nav-link-profile-active {
-    @apply cursor-default block px-4 py-2 text-xs text-blue-300 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-default rounded-md block px-4 py-2 text-xs text-sky-900 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .nav-link-mobile-active {
-    @apply cursor-default bg-gray-900 text-blue-300 block px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-default bg-gray-900 text-sky-300 block px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
-
+  
   .view-nav-link {
-    @apply cursor-pointer text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-none py-2 px-4 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-pointer rounded-md text-gray-600 hover:border-gray-50 border-transparent border-l-2 hover:bg-gray-50 hover:text-gray-900 py-2 px-4 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
-
+  
   .view-nav-link-active {
-    @apply cursor-default bg-gray-50 border-gray-600 text-gray-900 border-l-4 py-2 px-3 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-default bg-gray-100 border-gray-600 hover:border-gray-600 text-gray-900;
   }
+  
 
   .min-nav-link-text-width {
     width: 220px;
@@ -3310,11 +3314,11 @@
   }
 
   .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;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-lg 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;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .header-notifications-dropdown-view-all-button{
@@ -3540,11 +3544,11 @@
   }
 
   .shell-header-profile-dropdown {
-    @apply z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-lg 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-24 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-lg shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
 
@@ -3553,7 +3557,7 @@
   }
 
   .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-lg 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 {
@@ -3693,7 +3697,7 @@
   }
 
   .side-pane-container {
-    @apply fixed inset-y-0 right-0 sm:pl-10 max-w-full flex transition-all duration-200 ease-in-out;
+    @apply fixed inset-y-0 right-0 max-w-full flex transition-all duration-200 ease-in-out;
   }
 
   .side-pane-container-inner {
@@ -3705,7 +3709,7 @@
   }
 
   .side-pane-box-size-25 {
-    @apply w-screen max-w-xl;
+    @apply w-screen max-w-2xl;
   }
 
   .side-pane-box-size-50 {
@@ -3716,6 +3720,11 @@
     @apply w-screen max-w-4xl;
   }
 
+  
+  .side-pane-box-size-100 {
+    @apply w-screen max-w-full;
+  }
+
   .side-pane {
     @apply flex flex-col bg-white shadow-xl overflow-y-hidden;
   }
@@ -3992,7 +4001,7 @@
   }
 
   .toast-pill {
-    @apply max-w-sm w-full bg-white shadow-lg rounded-sm pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
+    @apply max-w-sm w-full bg-white shadow-lg rounded-xl pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
   }
 
   .toast-context-padding {
@@ -4148,7 +4157,7 @@
   }
 
   .search-container {
-    @apply relative inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 hover:shadow-sm border border-gray-200;
+    @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 focus:shadow hover:shadow border border-gray-300;
   }
 /* 
   .search-input {
@@ -4156,7 +4165,7 @@
   }  */
 
   .search-input {
-    @apply w-60 rounded-sm text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
+    @apply w-64 rounded-lg text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
   }
 
   .search-button {
@@ -4272,7 +4281,7 @@
     }
 
     .toggle-buttons-list-button {
-        @apply relative inline-flex items-center p-2 first:border-l first:rounded-l-sm last:rounded-r-sm border-t border-b border-r border-gray-300 bg-white text-xs text-gray-700 hover:text-gray-900 focus:z-10 focus:outline-none;
+        @apply relative inline-flex items-center p-2 first:border-l first:rounded-l-lg last:rounded-r-lg border-t border-b border-r border-gray-300 bg-white text-xs text-gray-700 hover:text-gray-900 focus:z-10 focus:outline-none;
     }
 
     .toggle-buttons-list-button-selected {