@indice/ng-components 0.4.0 → 0.4.2

package/src/assets/styles/shell-layout.css

@@ -1,252 +1,250 @@
+.app-logo {
+  @apply h-8 w-8;
+}
 
+.shell-container {
+  @apply antialiased font-sans bg-gray-100 h-full;
+}
 
-  .app-logo {
-    @apply h-8 w-8;
-  }
+.shell-header-container {
+  @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
+}
 
-  .shell-container {
-    @apply antialiased font-sans bg-gray-100 h-full;
-  }
+.sidebar .shell-header-container {
+  @apply bg-gradient-to-r from-gray-900 to-gray-800 z-50 pb-0 sm:pb-0 w-full flex justify-end;
+}
 
-  .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 {
+  @apply max-w-7xl mx-auto;
+}
 
-  .sidebar .shell-header-container {
-    @apply bg-gradient-to-r from-gray-900 to-gray-800 z-50 pb-0 sm:pb-0 w-full flex justify-end;
-  }
+.sidebar .shell-header-container-inner {
+  @apply max-w-full mx-auto;
+}
 
-  .shell-header-container-inner {
-    @apply max-w-7xl mx-auto;
-  }
+.shell-header-container-inner-fluid {
+  @apply w-full mx-auto;
+}
 
-  .sidebar .shell-header-container-inner {
-    @apply max-w-full mx-auto;
-  }
+.shell-content-container {
+  @apply mx-auto -mt-24;
+}
 
-  .shell-header-container-inner-fluid {
-    @apply w-full mx-auto;
-  }
+.sidebar .shell-content-container {
+  @apply mx-auto mt-0;
+}
 
-  .shell-content-container {
-    @apply mx-auto -mt-24;
-  }
+.shell-content-container-no-header {
+  /* overide this style in your app  */
+  @apply mx-auto ;
+}
 
-  .sidebar .shell-content-container {
-    @apply mx-auto mt-0;
-  }
+.sidebar .shell-content-container-inner {
+  @apply max-w-full px-4 pb-2 min-h-screen;
+}
 
-  .shell-content-container-no-header {
-    /* overide this style in your app  */
-    @apply mx-auto ;
-  }
+.shell-content-container-inner {
+  @apply max-w-7xl mx-auto px-4 pb-2 sm:px-6 lg:px-8 min-h-screen;
+}
 
-  .sidebar .shell-content-container-inner {
-    @apply max-w-full px-4 pb-2 min-h-screen;
-  }
+.shell-content-container-inner-fluid {
+  @apply w-full mx-auto min-h-screen ;
+}
 
-  .shell-content-container-inner {
-    @apply max-w-7xl mx-auto px-4 pb-2 sm:px-6 lg:px-8 min-h-screen;
-  }
 
-  .shell-content-container-inner-fluid {
-    @apply w-full mx-auto min-h-screen ;
-  }
+.shell-header-paddings {
+  @apply mx-auto px-4 sm:px-6 lg:px-8;
+}
 
 
-  .shell-header-paddings {
-    @apply mx-auto px-4 sm:px-6 lg:px-8;
-  }
+.sidebar .shell-header-paddings {
+  @apply mx-auto px-2;
+}
 
+.shell-header-border {
+  @apply border-b border-gray-700;
+}
 
-  .sidebar .shell-header-paddings {
-    @apply mx-auto px-2;
-  }
+.sidebar .shell-header-border {
+  @apply border-0;
+}
 
-  .shell-header-border {
-    @apply border-b border-gray-700;
-  }
+.shell-header-menu-container {
+  @apply flex items-center justify-between h-16;
+}
 
-  .sidebar .shell-header-border {
-    @apply border-0;
-  }
+.shell-header-md-visible {
+  @apply hidden sm:block;
+}
 
-  .shell-header-menu-container {
-    @apply flex items-center justify-between h-16;
-  }
+.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-md-visible {
-    @apply hidden sm:block;
-  }
+.shell-header-link-container-inner {
+  @apply flex justify-start;
+}
 
-  .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-logo-container {
+  @apply flex flex-grow-0 flex-shrink-0 items-center;
+}
 
-  .shell-header-link-container-inner {
-    @apply flex justify-start;
-  }
+.shell-header-links-far-container {
+  @apply flex flex-grow-0 flex-shrink-0 items-center ml-2;
+}
 
-  .shell-header-logo-container {
-    @apply flex flex-grow-0 flex-shrink-0 items-center;
-  }
+.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;
+}
 
-  .shell-header-links-far-container {
-    @apply flex flex-grow-0 flex-shrink-0 items-center ml-2;
-  }
+.shell-header-menu-rounded-button-icon-style {
+  @apply h-6 w-6;
+}
 
-  .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;
-  }
+.shell-header-profile {
+  @apply flex items-center;
+}
 
-  .shell-header-menu-rounded-button-icon-style {
-    @apply h-6 w-6;
-  }
+.shell-header-profile .shell-header-profile-userName {
+  @apply cursor-pointer text-white text-xs;
+}
 
-  .shell-header-profile {
-    @apply flex items-center;
-  }
+.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
+  focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;
+}
 
-  .shell-header-profile .shell-header-profile-userName {
-    @apply cursor-pointer text-white text-xs;
-  }
+.shell-header-profile-dropdown {
+  @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-black/5 focus:outline-none;
+}
 
-  .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
-    focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;
-  }
+.shell-header-profile-dropdown-with-username {
+  @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-black/5 focus:outline-none;
+}
 
-  .shell-header-profile-dropdown {
-    @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-black/5 focus:outline-none;
-  }
 
-  .shell-header-profile-dropdown-with-username {
-    @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-black/5 focus:outline-none;
-  }
+.mobile-menu-button-container {
+  @apply -mr-2 grid grid-cols-1 sm:hidden;
+}
 
+.mobile-menu-button {
+  @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-button-container {
-    @apply -mr-2 grid grid-cols-1 sm:hidden;
-  }
+.mobile-menu-container {
+  @apply border-b h-full w-full sm:opacity-75 border-gray-700 md:hidden z-50;
+}
 
-  .mobile-menu-button {
-    @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-link-container {
+  @apply px-2 py-3 grid grid-cols-1 space-y-1;
+}
 
-  .mobile-menu-container {
-    @apply border-b h-full w-full sm:opacity-75 border-gray-700 md:hidden z-50;
-  }
+.mobile-menu-user-info-container {
+  @apply pt-4 pb-3 border-t border-gray-700;
+}
 
-  .mobile-menu-link-container {
-    @apply px-2 py-3 grid grid-cols-1 space-y-1;
-  }
+.mobile-menu-user-info-container-inner {
+  @apply flex items-center px-5;
+}
 
-  .mobile-menu-user-info-container {
-    @apply pt-4 pb-3 border-t border-gray-700;
-  }
+.mobile-menu-avatar-container {
+  @apply inline-flex items-center justify-center h-10 w-10 rounded-full ring-1 ring-blue-300;
+}
 
-  .mobile-menu-user-info-container-inner {
-    @apply flex items-center px-5;
-  }
+.mobile-menu-avatar-name {
+  @apply text-sm font-medium leading-none text-white;
+}
 
-  .mobile-menu-avatar-container {
-    @apply inline-flex items-center justify-center h-10 w-10 rounded-full ring-1 ring-blue-300;
-  }
+.mobile-menu-user-name {
+  @apply text-base font-medium leading-none text-white;
+}
 
-  .mobile-menu-avatar-name {
-    @apply text-sm font-medium leading-none text-white;
-  }
+.mobile-menu-user-email {
+  @apply text-sm font-medium leading-none text-gray-400;
+}
 
-  .mobile-menu-user-name {
-    @apply text-base font-medium leading-none text-white;
-  }
+.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;
+}
 
-  .mobile-menu-user-email {
-    @apply text-sm font-medium leading-none text-gray-400;
-  }
+.mobile-menu-rounded-button-icon-style {
+  @apply h-6 w-6;
+}
 
-  .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;
-  }
+.shell-footer-container {
+  @apply bg-gradient-to-r from-gray-800 to-gray-900 mt-10 pt-6;
+}
 
-  .mobile-menu-rounded-button-icon-style {
-    @apply h-6 w-6;
-  }
+.shell-footer-container-inner {
+  @apply max-w-7xl mx-auto;
+}
 
-  .shell-footer-container {
-    @apply bg-gradient-to-r from-gray-800 to-gray-900 mt-10 pt-6;
-  }
+.shell-footer-container-inner-fluid {
+  @apply w-full mx-auto;
+}
 
-  .shell-footer-container-inner {
-    @apply max-w-7xl mx-auto;
-  }
+.shell-footer-component-container {
+  @apply text-gray-300;
+}
 
-  .shell-footer-container-inner-fluid {
-    @apply w-full mx-auto;
-  }
+.shell-footer-paddings {
+  @apply mx-auto px-4 sm:px-6 lg:px-8;
+}
 
-  .shell-footer-component-container {
-    @apply text-gray-300;
-  }
+.shell-footer-component-container-inner {
+  @apply w-full mx-auto;
+}
 
-  .shell-footer-paddings {
-    @apply mx-auto px-4 sm:px-6 lg:px-8;
-  }
+.shell-footer-logo-h {
+  @apply h-12;
+}
 
-  .shell-footer-component-container-inner {
-    @apply w-full mx-auto;
-  }
+.shell-footer-sections-container {
+  @apply grid grid-cols-8 md:grid-cols-9  lg:grid-cols-8  divide-gray-700 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8;
+}
 
-  .shell-footer-logo-h {
-    @apply h-12;
-  }
+.shell-footer-section {
+  @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
+}
 
-  .shell-footer-sections-container {
-    @apply grid grid-cols-8 md:grid-cols-9  lg:grid-cols-8  divide-gray-700 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8;
-  }
+.shell-footer-section nav {
+  @apply mt-4;
+}
 
-  .shell-footer-section {
-    @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
-  }
+.shell-footer-section ul {
+  @apply space-y-2;
+}
 
-  .shell-footer-section nav {
-    @apply mt-4;
-  }
+.shell-footer-section-links {
+  @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
+}
 
-  .shell-footer-section ul {
-    @apply space-y-2;
-  }
 
-  .shell-footer-section-links {
-    @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
-  }
+.shell-footer-section-links ul {
+  @apply grid lg:grid-cols-2;
+}
 
+.shell-footer-section-links li {
+  @apply mb-2;
+}
 
-  .shell-footer-section-links ul {
-    @apply grid lg:grid-cols-2;
-  }
+.shell-footer-section-title {
+  @apply text-xl font-semibold text-white;
+}
 
-  .shell-footer-section-links li {
-    @apply mb-2;
-  }
 
-  .shell-footer-section-title {
-    @apply text-xl font-semibold text-white;
-  }
+.shell-footer-social {
+  @apply flex space-x-2 font-normal text-base hover:text-gray-100;
+}
 
+.shell-footer-social-icon {
+  @apply h-6 w-6;
+}
 
-  .shell-footer-social {
-    @apply flex space-x-2 font-normal text-base hover:text-gray-100;
-  }
+.shell-footer-link {
+  @apply text-sm text-gray-400 hover:underline transition duration-150 ease-in-out;
+}
 
-  .shell-footer-social-icon {
-    @apply h-6 w-6;
-  }
-
-  .shell-footer-link {
-    @apply text-sm text-gray-400 hover:underline transition duration-150 ease-in-out;
-  }
-
-  .shell-footer-copyright {
-    @apply max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-700 py-5;
-  }
+.shell-footer-copyright {
+  @apply max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-700 py-5;
+}

package/src/assets/styles/shell-sidebar-layout.css

@@ -1,125 +1,122 @@
 @reference tailwindcss;
 
-  .sidebar-off-canvas-menu-container {
-    @apply relative z-40 md:hidden;
-  }
+.sidebar-off-canvas-menu-container {
+  @apply relative z-40 md:hidden;
+}
 
-  
-  
-  .sidebar-off-canvas-menu-backdrop {
-    @apply fixed inset-0 transition-opacity ease-linear opacity-0 duration-300 pointer-events-none bg-gray-600 bg-black/75;
-  }
+.sidebar-off-canvas-menu-backdrop {
+  @apply fixed inset-0 transition-opacity ease-linear opacity-0 duration-300 pointer-events-none bg-gray-600 bg-black/75;
+}
 
-  .sidebar-off-canvas-menu-backdrop-opacity-100 {
-    @apply fixed inset-0 transition-opacity ease-linear duration-300 pointer-events-none bg-gray-600 bg-black/75 opacity-100;
-  }
+.sidebar-off-canvas-menu-backdrop-opacity-100 {
+  @apply fixed inset-0 transition-opacity ease-linear duration-300 pointer-events-none bg-gray-600 bg-black/75 opacity-100;
+}
 
-  .sidebar-off-canvas-menu-container-inner {
-    @apply fixed inset-0 flex z-40 transition ease-in-out duration-300 transform translate-x-0;
-  }
+.sidebar-off-canvas-menu-container-inner {
+  @apply fixed inset-0 flex z-40 transition ease-in-out duration-300 transform translate-x-0;
+}
 
-  .sidebar-off-canvas-menu-container-inner-active {
-    @apply translate-x-0;
-  }
+.sidebar-off-canvas-menu-container-inner-active {
+  @apply translate-x-0;
+}
 
-  .sidebar-off-canvas-menu-container-inner-not-active {
-    @apply -translate-x-full;
-  }
+.sidebar-off-canvas-menu-container-inner-not-active {
+  @apply -translate-x-full;
+}
 
 
-  .sidebar-off-canvas-menu-container-inner-translate-x-full {
-    @apply fixed inset-0 flex z-40 transition ease-in-out duration-300 transform -translate-x-full;
-  }
+.sidebar-off-canvas-menu-container-inner-translate-x-full {
+  @apply fixed inset-0 flex z-40 transition ease-in-out duration-300 transform -translate-x-full;
+}
 
-  .sidebar-off-canvas-layout-container {
-    @apply relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800;
-  }
+.sidebar-off-canvas-layout-container {
+  @apply relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800;
+}
 
-  .sidebar-off-canvas-toggle-button-container {
-    @apply absolute top-0 right-0 -mr-12 pt-2;
-  }
+.sidebar-off-canvas-toggle-button-container {
+  @apply absolute top-0 right-0 -mr-12 pt-2;
+}
 
   
 
-  .sidebar-off-canvas-toggle-button {
-    @apply ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none;
-  }
+.sidebar-off-canvas-toggle-button {
+  @apply ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none;
+}
 
   
   
-  .sidebar-off-canvas-app-logo-container {
-    @apply flex-shrink-0 flex items-center px-4;
-  }
+.sidebar-off-canvas-app-logo-container {
+  @apply flex-shrink-0 flex items-center px-4;
+}
 
-  .sidebar-dummy-element {
-    @apply flex-shrink-0 w-14;
-  }
+.sidebar-dummy-element {
+  @apply flex-shrink-0 w-14;
+}
 
-  /* in mobile view the static menu container is always hidden - off-canvas container is visible */
-  .sidebar-static-menu-outer-container {
-    @apply hidden md:flex;
-  }
+/* in mobile view the static menu container is always hidden - off-canvas container is visible */
+.sidebar-static-menu-outer-container {
+  @apply hidden md:flex;
+}
 
-  .sidebar-static-menu-container {
-    @apply flex-col w-64 fixed inset-y-0;
-  }
+.sidebar-static-menu-container {
+  @apply flex-col w-64 fixed inset-y-0;
+}
 
-  .sidebar-static-menu-container-active {
-    @apply flex;
-  }
+.sidebar-static-menu-container-active {
+  @apply flex;
+}
 
-  .sidebar-static-menu-container-not-active {
-    @apply flex w-20;
-  }
+.sidebar-static-menu-container-not-active {
+  @apply flex w-20;
+}
 
-  .sidebar-static-menu-container-inner {
-    @apply flex-1 flex items-center flex-col min-h-0 bg-gray-800 shadow-lg;
-  }
+.sidebar-static-menu-container-inner {
+  @apply flex-1 flex items-center flex-col min-h-0 bg-gray-800 shadow-lg;
+}
 
-  .sidebar-static-menu-app-logo-container {
-    @apply flex items-center h-16 flex-shrink-0;
-  }
+.sidebar-static-menu-app-logo-container {
+  @apply flex items-center h-16 flex-shrink-0;
+}
 
-  .sidebar-static-menu-header-app-logo-container {
-    @apply flex items-center h-16 flex-shrink-0 ;
-  }
+.sidebar-static-menu-header-app-logo-container {
+  @apply flex items-center h-16 flex-shrink-0 ;
+}
 
-  .shell-sidebar-logo {
-    @apply h-8 w-auto;
-  }
+.shell-sidebar-logo {
+  @apply h-8 w-auto;
+}
 
-  /* !!!! malakai onoma !!!! */
-  .sidebar-static-menu-wrapper {
-    @apply flex flex-col md:pl-20;
-  }
+.sidebar-static-menu-wrapper {
+  @apply flex flex-col md:pl-20;
+}
 
-  .sidebar-static-menu-wrapper-expanded {
-    @apply md:pl-64;
-  }
+.sidebar-static-menu-wrapper-expanded {
+  @apply md:pl-64;
+}
 
-  .sidebar-static-menu-sticky-header-container {
-    @apply sticky top-0 z-20 flex-shrink-0 flex h-16 bg-gray-900 shadow-2xl;
-  }
+.sidebar-static-menu-sticky-header-container {
+  @apply sticky top-0 z-20 flex-shrink-0 flex h-16 bg-gray-900 shadow-2xl;
+}
 
-  .sidebar-static-menu-toggle-button {
-    @apply px-4 text-white focus:outline-none;
-  }
+.sidebar-static-menu-toggle-button {
+  @apply px-4 text-white focus:outline-none;
+}
 
-  .sidebar-static-menu-toggle-button-md {
-    @apply px-4 text-white focus:outline-none md:hidden;
-  }
+.sidebar-static-menu-toggle-button-md {
+  @apply px-4 text-white focus:outline-none md:hidden;
+}
 
-  .sidebar-static-menu-header-container {
-    @apply flex-1 px-4 flex justify-between;
-  }
+.sidebar-static-menu-header-container {
+  @apply flex-1 px-4 flex justify-between;
+}
 
-  /* fix names  */
+/* fix names  */
 
-  .sidebar-static-menu-header-near-container  {
-    @apply flex-1 flex;
-  }
+.sidebar-static-menu-header-near-container  {
+  @apply flex-1 flex;
+}
 
-  .sidebar-static-menu-header-far-container {
-    @apply ml-4 flex items-center md:ml-6;
-  }
+.sidebar-static-menu-header-far-container {
+  @apply ml-4 flex items-center md:ml-6;
+}