@indice/ng-components 0.5.0-beta.10 → 0.5.0

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

@@ -1,250 +1,250 @@
-.app-logo {
-  @apply h-8 w-8;
-}
-
-.shell-container {
-  @apply antialiased font-sans bg-gray-100 h-full;
-}
-
-.shell-header-container {
-  @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
-}
-
-.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-inner {
-  @apply max-w-7xl mx-auto;
-}
-
-.sidebar .shell-header-container-inner {
-  @apply max-w-full mx-auto;
-}
-
-.shell-header-container-inner-fluid {
-  @apply w-full mx-auto;
-}
-
-.shell-content-container {
-  @apply mx-auto -mt-24;
-}
-
-.sidebar .shell-content-container {
-  @apply mx-auto mt-0;
-}
-
-.shell-content-container-no-header {
-  /* overide this style in your app  */
-  @apply mx-auto ;
-}
-
-.sidebar .shell-content-container-inner {
-  @apply max-w-full px-4 pb-2 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;
-}
-
-
-.sidebar .shell-header-paddings {
-  @apply mx-auto px-2;
-}
-
-.shell-header-border {
-  @apply border-b border-gray-700;
-}
-
-.sidebar .shell-header-border {
-  @apply border-0;
-}
-
-.shell-header-menu-container {
-  @apply flex items-center justify-between h-16;
-}
-
-.shell-header-md-visible {
-  @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-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;
-}
-
-.shell-header-menu-rounded-button-icon-style {
-  @apply h-6 w-6;
-}
-
-.shell-header-profile {
-  @apply flex items-center;
-}
-
-.shell-header-profile .shell-header-profile-userName {
-  @apply cursor-pointer text-white text-xs;
-}
-
-.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 {
-  @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-container {
-  @apply border-b h-full w-full sm:opacity-75 border-gray-700 md:hidden z-50;
-}
-
-.mobile-menu-link-container {
-  @apply px-2 py-3 grid grid-cols-1 space-y-1;
-}
-
-.mobile-menu-user-info-container {
-  @apply pt-4 pb-3 border-t border-gray-700;
-}
-
-.mobile-menu-user-info-container-inner {
-  @apply flex items-center px-5;
-}
-
-.mobile-menu-avatar-container {
-  @apply inline-flex items-center justify-center h-10 w-10 rounded-full ring-1 ring-blue-300;
-}
-
-.mobile-menu-avatar-name {
-  @apply text-sm font-medium leading-none text-white;
-}
-
-.mobile-menu-user-name {
-  @apply text-base font-medium leading-none text-white;
-}
-
-.mobile-menu-user-email {
-  @apply text-sm font-medium leading-none text-gray-400;
-}
-
-.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-rounded-button-icon-style {
-  @apply h-6 w-6;
-}
-
-.shell-footer-container {
-  @apply bg-gradient-to-r from-gray-800 to-gray-900 mt-10 pt-6;
-}
-
-.shell-footer-container-inner {
-  @apply max-w-7xl mx-auto;
-}
-
-.shell-footer-container-inner-fluid {
-  @apply w-full mx-auto;
-}
-
-.shell-footer-component-container {
-  @apply text-gray-300;
-}
-
-.shell-footer-paddings {
-  @apply mx-auto px-4 sm:px-6 lg:px-8;
-}
-
-.shell-footer-component-container-inner {
-  @apply w-full mx-auto;
-}
-
-.shell-footer-logo-h {
-  @apply h-12;
-}
-
-.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 {
-  @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
-}
-
-.shell-footer-section nav {
-  @apply mt-4;
-}
-
-.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-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-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;
-}
+.app-logo {
+  @apply h-8 w-8;
+}
+
+.shell-container {
+  @apply antialiased font-sans bg-gray-100 h-full;
+}
+
+.shell-header-container {
+  @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
+}
+
+.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-inner {
+  @apply max-w-7xl mx-auto;
+}
+
+.sidebar .shell-header-container-inner {
+  @apply max-w-full mx-auto;
+}
+
+.shell-header-container-inner-fluid {
+  @apply w-full mx-auto;
+}
+
+.shell-content-container {
+  @apply mx-auto -mt-24;
+}
+
+.sidebar .shell-content-container {
+  @apply mx-auto mt-0;
+}
+
+.shell-content-container-no-header {
+  /* overide this style in your app  */
+  @apply mx-auto ;
+}
+
+.sidebar .shell-content-container-inner {
+  @apply max-w-full px-4 pb-2 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;
+}
+
+
+.sidebar .shell-header-paddings {
+  @apply mx-auto px-2;
+}
+
+.shell-header-border {
+  @apply border-b border-gray-700;
+}
+
+.sidebar .shell-header-border {
+  @apply border-0;
+}
+
+.shell-header-menu-container {
+  @apply flex items-center justify-between h-16;
+}
+
+.shell-header-md-visible {
+  @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-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;
+}
+
+.shell-header-menu-rounded-button-icon-style {
+  @apply h-6 w-6;
+}
+
+.shell-header-profile {
+  @apply flex items-center;
+}
+
+.shell-header-profile .shell-header-profile-userName {
+  @apply cursor-pointer text-white text-xs;
+}
+
+.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 {
+  @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-container {
+  @apply border-b h-full w-full sm:opacity-75 border-gray-700 md:hidden z-50;
+}
+
+.mobile-menu-link-container {
+  @apply px-2 py-3 grid grid-cols-1 space-y-1;
+}
+
+.mobile-menu-user-info-container {
+  @apply pt-4 pb-3 border-t border-gray-700;
+}
+
+.mobile-menu-user-info-container-inner {
+  @apply flex items-center px-5;
+}
+
+.mobile-menu-avatar-container {
+  @apply inline-flex items-center justify-center h-10 w-10 rounded-full ring-1 ring-blue-300;
+}
+
+.mobile-menu-avatar-name {
+  @apply text-sm font-medium leading-none text-white;
+}
+
+.mobile-menu-user-name {
+  @apply text-base font-medium leading-none text-white;
+}
+
+.mobile-menu-user-email {
+  @apply text-sm font-medium leading-none text-gray-400;
+}
+
+.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-rounded-button-icon-style {
+  @apply h-6 w-6;
+}
+
+.shell-footer-container {
+  @apply bg-gradient-to-r from-gray-800 to-gray-900 mt-10 pt-6;
+}
+
+.shell-footer-container-inner {
+  @apply max-w-7xl mx-auto;
+}
+
+.shell-footer-container-inner-fluid {
+  @apply w-full mx-auto;
+}
+
+.shell-footer-component-container {
+  @apply text-gray-300;
+}
+
+.shell-footer-paddings {
+  @apply mx-auto px-4 sm:px-6 lg:px-8;
+}
+
+.shell-footer-component-container-inner {
+  @apply w-full mx-auto;
+}
+
+.shell-footer-logo-h {
+  @apply h-12;
+}
+
+.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 {
+  @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
+}
+
+.shell-footer-section nav {
+  @apply mt-4;
+}
+
+.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-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-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;
+}