diff --git a/package.json b/package.json index 51f68631..3f1b54cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "indice-ng-lib", - "version": "0.4.0", + "version": "0.4.2", "scripts": { "ng": "ng", "start": "ng serve", diff --git a/projects/app/tsconfig.app.json b/projects/app/tsconfig.app.json index 0cefca32..f23e876e 100644 --- a/projects/app/tsconfig.app.json +++ b/projects/app/tsconfig.app.json @@ -5,7 +5,6 @@ "outDir": "../../out-tsc/app", "types": [], "paths": { - "@angular/*": ["node_modules/@angular/*"], "@indice/ng-auth": ["projects/ng-auth/src/public-api.ts"], "@indice/ng-components": ["projects/ng-components/src/public-api.ts"], "@indice/ng-conf": ["projects/ng-conf/src/public-api.ts"] diff --git a/projects/ng-auth/package.json b/projects/ng-auth/package.json index 2de0d986..3a2c5f05 100644 --- a/projects/ng-auth/package.json +++ b/projects/ng-auth/package.json @@ -1,6 +1,6 @@ { "name": "@indice/ng-auth", - "version": "0.4.0", + "version": "0.4.2", "description": "Indice extensions for Angular v20 using oidc-client", "repository": { "type": "git", diff --git a/projects/ng-components/package.json b/projects/ng-components/package.json index 6821373d..ac522081 100644 --- a/projects/ng-components/package.json +++ b/projects/ng-components/package.json @@ -1,6 +1,6 @@ { "name": "@indice/ng-components", - "version": "0.4.0", + "version": "0.4.2", "description": "Indice common components for Angular v20", "repository": { "type": "git", @@ -25,7 +25,7 @@ "@angular/common": ">=20.0.0", "@angular/core": ">=20.0.0", "@angular/router": ">=20.0.0", - "@indice/ng-auth": ">=0.4.0", + "@indice/ng-auth": ">=0.4.2", "oidc-client-ts": "^3.0.1", "rxjs": ">=7.8.1", "tailwindcss": "^4.1.16", diff --git a/projects/ng-components/src/assets/styles/advanced-search.css b/projects/ng-components/src/assets/styles/advanced-search.css index e827c792..9a5a4f73 100644 --- a/projects/ng-components/src/assets/styles/advanced-search.css +++ b/projects/ng-components/src/assets/styles/advanced-search.css @@ -1,57 +1,39 @@ +.advanced-search-filter { + @apply flex gap-6 mb-2 pr-2; +} +.advanced-search-filter-value-container { + @apply flex gap-6 mb-6; +} - .advanced-search-container { +.advanced-search-filter-value-label { + @apply block; +} - } +.advanced-search-filter-operator-label { + @apply block; +} - .advanced-search-filter { - @apply flex gap-6 mb-2 pr-2; - } +.advanced-search-filter-value-input { + @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm; +} - .advanced-search-filter-field-container { +.advanced-search-filter-value-input-daterange-from { + @apply mt-6 p-2; +} - } +.advanced-search-filter-value-input-daterange-to { + @apply mt-6 p-2; +} - .advanced-search-filter-value-container { - @apply flex gap-6 mb-6; - } +.advanced-search-chips { + @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700; +} - .advanced-search-filter-field-label { +.advanced-search-chips-remove-filter { + @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white; +} - } - - .advanced-search-filter-value-label { - @apply block; - } - - .advanced-search-filter-operator-container { - - } - - .advanced-search-filter-operator-label { - @apply block; - } - - .advanced-search-filter-value-input { - @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm; - } - - .advanced-search-filter-value-input-daterange-from { - @apply mt-6 p-2; - } - - .advanced-search-filter-value-input-daterange-to { - @apply mt-6 p-2; - } - - .advanced-search-chips { - @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700; - } - - .advanced-search-chips-remove-filter { - @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white; - } - - .advanced-search-chips.disabled .advanced-search-chips-remove-filter:active { - @apply transform-none; - } +.advanced-search-chips.disabled .advanced-search-chips-remove-filter:active { + @apply transform-none; +} diff --git a/projects/ng-components/src/assets/styles/avatar-initials.css b/projects/ng-components/src/assets/styles/avatar-initials.css index 6b798744..0e39559e 100644 --- a/projects/ng-components/src/assets/styles/avatar-initials.css +++ b/projects/ng-components/src/assets/styles/avatar-initials.css @@ -1,37 +1,35 @@ +.avatar-container { + @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden; +} +.avatar-container-large { + @apply inline-flex items-center justify-center h-12 w-12 rounded-full; +} - .avatar-container { - @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden; - } - - .avatar-container-large { - @apply inline-flex items-center justify-center h-12 w-12 rounded-full; - } - - .avatar-text { - @apply text-sm font-medium leading-none text-blue-300; - } +.avatar-text { + @apply text-sm font-medium leading-none text-blue-300; +} - .avatar-text-large { - @apply text-xl font-medium leading-none text-white; - } +.avatar-text-large { + @apply text-xl font-medium leading-none text-white; +} .circle { - display: flex; - justify-content: center; - align-items: center; +display: flex; +justify-content: center; +align-items: center; } .circle img { - border-radius: 50%; - width: 60px; - height: 60px; +border-radius: 50%; +width: 60px; +height: 60px; } .circle .initials { - color: #FFFFFF; - font-size: 20px; - line-height: 19px; - letter-spacing: 0.2625px; +color: #FFFFFF; +font-size: 20px; +line-height: 19px; +letter-spacing: 0.2625px; } diff --git a/projects/ng-components/src/assets/styles/cards.css b/projects/ng-components/src/assets/styles/cards.css index 3bf34fe5..b7fc966d 100644 --- a/projects/ng-components/src/assets/styles/cards.css +++ b/projects/ng-components/src/assets/styles/cards.css @@ -1,85 +1,84 @@ - - .card-deck-busy{ - @apply animate-pulse; - } +.card-deck-busy{ + @apply animate-pulse; +} - .cards-deck-1 { - @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1; - } +.cards-deck-1 { + @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1; +} - .cards-deck-2 { - @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2; - } +.cards-deck-2 { + @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2; +} - .cards-deck-3 { - @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3; - } +.cards-deck-3 { + @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3; +} - .cards-deck-4 { - @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4; - } +.cards-deck-4 { + @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4; +} - .card { - @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;; - } +.card { + @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;; +} - .card-body { - @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6; - } +.card-body { + @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6; +} - .card-img-top { - @apply object-cover w-full h-48; - } +.card-img-top { + @apply object-cover w-full h-48; +} - .card-header { - @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200; - } +.card-header { + @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200; +} - .card-footer { - @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200; - } +.card-footer { + @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200; +} - .kpi-tile-title-container { - @apply uppercase mb-2 overflow-ellipsis overflow-hidden; - } +.kpi-tile-title-container { + @apply uppercase mb-2 overflow-ellipsis overflow-hidden; +} - .kpi-tile-action { - @apply hover:text-gray-500; - } +.kpi-tile-action { + @apply hover:text-gray-500; +} - .kpi-tile-value { - @apply text-6xl font-thin my-6; - } +.kpi-tile-value { + @apply text-6xl font-thin my-6; +} - .gallery-deck-1 { - @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2; - } +.gallery-deck-1 { + @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2; +} - .gallery-deck-2 { - @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4; - } +.gallery-deck-2 { + @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4; +} - .gallery-deck-3 { - @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4; - } +.gallery-deck-3 { + @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4; +} - .gallery-deck-4 { - @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4; - } +.gallery-deck-4 { + @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4; +} - .tile-card-footer { - @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4; - } +.tile-card-footer { + @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4; +} - .tile-card-item-btn { - @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none; - } +.tile-card-item-btn { + @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none; +} - .tile-card-item-btn-selected { - @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1; - } +.tile-card-item-btn-selected { + @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1; +} - .tile-card-item-btn-available { - @apply bg-slate-500 hover:bg-slate-700 ring-0; - } +.tile-card-item-btn-available { + @apply bg-slate-500 hover:bg-slate-700 ring-0; +} diff --git a/projects/ng-components/src/assets/styles/collapsible-panel.css b/projects/ng-components/src/assets/styles/collapsible-panel.css index 58c555f1..e3f6ba89 100644 --- a/projects/ng-components/src/assets/styles/collapsible-panel.css +++ b/projects/ng-components/src/assets/styles/collapsible-panel.css @@ -1,24 +1,23 @@ +.collapsible-panel-container { + @apply bg-white border border-gray-200 mb-2; +} - .collapsible-panel-container { - @apply bg-white border border-gray-200 mb-2; - } +.collapsible-panel-container-shadow { + @apply shadow-sm; +} - .collapsible-panel-container-shadow { - @apply shadow-sm; - } +.collapsible-panel-container-inner { + @apply relative border-b border-gray-200; +} - .collapsible-panel-container-inner { - @apply relative border-b border-gray-200; - } +.collapsible-panel-button { + @apply w-full px-8 py-6 text-left; +} - .collapsible-panel-button { - @apply w-full px-8 py-6 text-left; - } +.collapsible-panel-button-content-container { + @apply flex items-center justify-between; +} - .collapsible-panel-button-content-container { - @apply flex items-center justify-between; - } - - .collapsible-panel-content-container { - @apply relative overflow-hidden transition-all duration-700; - } +.collapsible-panel-content-container { + @apply relative overflow-hidden transition-all duration-700; +} diff --git a/projects/ng-components/src/assets/styles/combobox.css b/projects/ng-components/src/assets/styles/combobox.css index 13ab32fe..d76e4a2a 100644 --- a/projects/ng-components/src/assets/styles/combobox.css +++ b/projects/ng-components/src/assets/styles/combobox.css @@ -1,28 +1,27 @@ +.combobox-wrapper { + @apply relative mt-1; +} - .combobox-wrapper { - @apply relative mt-1; - } +.combobox-input { + @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm; +} - .combobox-input { - @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm; - } +.combobox-icons { + @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none; +} - .combobox-icons { - @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none; - } +.combobox-results { + @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm; +} - .combobox-results { - @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm; - } +.combobox-default-item-template { + @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate; +} - .combobox-default-item-template { - @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate; - } +.combobox-selected-item-wrapper { + @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400; +} - .combobox-selected-item-wrapper { - @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400; - } - - .combobox-selected-item-remove-btn { - @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500; - } +.combobox-selected-item-remove-btn { + @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500; +} diff --git a/projects/ng-components/src/assets/styles/components.css b/projects/ng-components/src/assets/styles/components.css index bb817297..6430612e 100644 --- a/projects/ng-components/src/assets/styles/components.css +++ b/projects/ng-components/src/assets/styles/components.css @@ -1,36 +1,34 @@ +.md-visible { + @apply hidden md:block; +} +.btn-outline { + @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm; +} - .md-visible { - @apply hidden md:block; - } +.btn-outline:disabled { + @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed; +} - .btn-outline { - @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm; - } - .btn-outline:disabled { - @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed; - } +.btn-view-header { + @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800; +} - .btn-view-header { - @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800; - } +.sidebar .btn-view-header { + @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white; +} +.btn-form-view-header { + @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50; +} - .sidebar .btn-view-header { - @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white; - } +.btn-form-view-header-search { + @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50; +} - .btn-form-view-header { - @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50; - } - - .btn-form-view-header-search { - @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50; - } - - .selected-view-indicator { - @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300; - } +.selected-view-indicator { + @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300; +} diff --git a/projects/ng-components/src/assets/styles/drop-down-menu.css b/projects/ng-components/src/assets/styles/drop-down-menu.css index 8c2d1f79..9b61a907 100644 --- a/projects/ng-components/src/assets/styles/drop-down-menu.css +++ b/projects/ng-components/src/assets/styles/drop-down-menu.css @@ -1,49 +1,48 @@ - - .dropdown-container { - @apply relative w-auto; - } - - .dropdown-button { - @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 { - @apply truncate w-full inline-flex items-start place-items-center; - } - - .dropdown-button-icon { - @apply absolute inset-y-0 right-1 flex items-center pointer-events-none; - } - - .dropdown-arrow { - @apply h-5 w-5 text-gray-600; - } - - .dropdown-ul { - @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-black/5 focus:outline-none overflow-x-hidden; - } - - .dropdown-li { - @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 min-w-max; - } - - .dropdown-li-selected { - @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 min-w-max; - } - - .dropdown-li-text { - @apply font-normal truncate inline-flex items-center ; - } - - .dropdown-li-selected-text { - @apply font-semibold truncate inline-flex items-center ; - } - - .dropdown-li-selected-indicator-container { - @apply text-gray-600 absolute inset-y-0 right-0 flex items-center pr-4; - } - - .dropdown-li-selected-indicator { - @apply h-5 w-5; - } +.dropdown-container { + @apply relative w-auto; +} + +.dropdown-button { + @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 { + @apply truncate w-full inline-flex items-start place-items-center; +} + +.dropdown-button-icon { + @apply absolute inset-y-0 right-1 flex items-center pointer-events-none; +} + +.dropdown-arrow { + @apply h-5 w-5 text-gray-600; +} + +.dropdown-ul { + @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-black/5 focus:outline-none overflow-x-hidden; +} + +.dropdown-li { + @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 min-w-max; +} + +.dropdown-li-selected { + @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 min-w-max; +} + +.dropdown-li-text { + @apply font-normal truncate inline-flex items-center ; +} + +.dropdown-li-selected-text { + @apply font-semibold truncate inline-flex items-center ; +} + +.dropdown-li-selected-indicator-container { + @apply text-gray-600 absolute inset-y-0 right-0 flex items-center pr-4; +} + +.dropdown-li-selected-indicator { + @apply h-5 w-5; +} diff --git a/projects/ng-components/src/assets/styles/form-layout.css b/projects/ng-components/src/assets/styles/form-layout.css index ff2a6d97..84d8125e 100644 --- a/projects/ng-components/src/assets/styles/form-layout.css +++ b/projects/ng-components/src/assets/styles/form-layout.css @@ -1,52 +1,51 @@ +.form-layout-container { + @apply bg-white shadow-sm border border-gray-200 rounded-xl; +} - .form-layout-container { - @apply bg-white shadow-sm border border-gray-200 rounded-xl; - } +.form-header { + @apply px-4 py-4 bg-gray-50 rounded-t-xl h-24 sm:flex sm:items-center sm:justify-between; +} - .form-header { - @apply px-4 py-4 bg-gray-50 rounded-t-xl h-24 sm:flex sm:items-center sm:justify-between; - } +.form-header-inner { + @apply flex-1 min-w-0; +} - .form-header-inner { - @apply flex-1 min-w-0; - } +.form-header-image { + @apply w-12 h-12; +} - .form-header-image { - @apply w-12 h-12; - } +.form-title { + @apply text-lg leading-6 font-medium text-gray-900; +} - .form-title { - @apply text-lg leading-6 font-medium text-gray-900; - } +.form-subtitle { + @apply mt-1 max-w-2xl text-sm text-gray-500; +} - .form-subtitle { - @apply mt-1 max-w-2xl text-sm text-gray-500; - } +.form-header-actions { + @apply mt-4 flex md:mt-0 md:ml-4; +} - .form-header-actions { - @apply mt-4 flex md:mt-0 md:ml-4; - } +.form-content-container { + @apply px-4 py-4; +} - .form-content-container { - @apply px-4 py-4; - } +.form-content-container-inner { + @apply flex flex-col pt-4; +} - .form-content-container-inner { - @apply flex flex-col pt-4; - } +.form-header-search-input { + @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none; +} - .form-header-search-input { - @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none; - } +.field-label { + @apply block text-sm py-2 font-medium text-gray-500; +} - .field-label { - @apply block text-sm py-2 font-medium text-gray-500; - } +.field-info { + @apply mt-2 text-xs text-gray-400 py-2; +} - .field-info { - @apply mt-2 text-xs text-gray-400 py-2; - } - - .form-actions { - @apply -mx-4 -mb-4 mt-4 px-4 sm:px-6 py-3 bg-gray-100 text-gray-700 text-right flex justify-end rounded-b-xl; - } +.form-actions { + @apply -mx-4 -mb-4 mt-4 px-4 sm:px-6 py-3 bg-gray-100 text-gray-700 text-right flex justify-end rounded-b-xl; +} diff --git a/projects/ng-components/src/assets/styles/list-view-empty-state.css b/projects/ng-components/src/assets/styles/list-view-empty-state.css deleted file mode 100644 index e69de29b..00000000 diff --git a/projects/ng-components/src/assets/styles/list-view.css b/projects/ng-components/src/assets/styles/list-view.css index dc3a08d9..f903c87a 100644 --- a/projects/ng-components/src/assets/styles/list-view.css +++ b/projects/ng-components/src/assets/styles/list-view.css @@ -1,63 +1,62 @@ +.list-view-container { + @apply flex flex-col border border-gray-200 rounded-lg; +} - .list-view-container { - @apply flex flex-col border border-gray-200 rounded-lg; - } +.list-view-container-inner { + @apply overflow-y-hidden overflow-x-auto rounded-lg; +} - .list-view-container-inner { - @apply overflow-y-hidden overflow-x-auto rounded-lg; - } +.list-view-table { + @apply min-w-full divide-y divide-gray-200; +} - .list-view-table { - @apply min-w-full divide-y divide-gray-200; - } +.list-view-thead { + @apply bg-gray-50; +} - .list-view-thead { - @apply bg-gray-50; - } +.list-view-th-details { + @apply px-2 py-3 w-6 text-left text-xs font-medium text-gray-500 uppercase; +} - .list-view-th-details { - @apply px-2 py-3 w-6 text-left text-xs font-medium text-gray-500 uppercase; - } +.list-view-th { + @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider; +} - .list-view-th { - @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider; - } +.list-view-th-full { + @apply w-full px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words; +} - .list-view-th-full { - @apply w-full px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words; - } +.list-view-th-half { + @apply w-full sm:w-1/2 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words; +} - .list-view-th-half { - @apply w-full sm:w-1/2 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words; - } +.list-view-tbody { + @apply bg-white divide-y divide-gray-200; +} - .list-view-tbody { - @apply bg-white divide-y divide-gray-200; - } +.list-view-tr { + @apply hover:bg-gray-50; +} - .list-view-tr { - @apply hover:bg-gray-50; - } +.list-view-td-details { + @apply px-2 py-2 whitespace-nowrap items-center; +} - .list-view-td-details { - @apply px-2 py-2 whitespace-nowrap items-center; - } +.list-view-td { + @apply px-4 py-4 whitespace-nowrap; +} - .list-view-td { - @apply px-4 py-4 whitespace-nowrap; - } +.list-view-td-full { + @apply w-full px-4 py-4 break-all; +} - .list-view-td-full { - @apply w-full px-4 py-4 break-all; - } +.list-view-td-half { + @apply w-full sm:w-1/2 px-4 py-4 whitespace-normal break-words; +} - .list-view-td-half { - @apply w-full sm:w-1/2 px-4 py-4 whitespace-normal break-words; - } +.details-button { + @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100; +} - .details-button { - @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100; - } - - .expand-collapse-button { - @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100; } +.expand-collapse-button { + @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100; } diff --git a/projects/ng-components/src/assets/styles/modal.css b/projects/ng-components/src/assets/styles/modal.css index 8a0b612f..4115b8a7 100644 --- a/projects/ng-components/src/assets/styles/modal.css +++ b/projects/ng-components/src/assets/styles/modal.css @@ -1,10 +1,12 @@ .modal-open { overflow: hidden; } + .modal-open .modal { overflow-x: hidden; overflow-y: auto; } + .modal { position: fixed; top: 0; @@ -16,12 +18,14 @@ overflow: hidden; outline: 0; } + .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; } + .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); @@ -30,58 +34,72 @@ .fade { transition: opacity 0.15s linear; } + .fade:not(.show) { opacity: 0; } + @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } + .modal.show .modal-dialog { transform: none; } + .modal.modal-static .modal-dialog { transform: scale(1.02); } + .modal-dialog-scrollable { display: flex; - max-height: subtract(100%, 1rem); + max-height: calc(100% - 1rem); } + .modal-dialog-scrollable .modal-content { - max-height: subtract(100vh, 1rem); + max-height: calc(100vh - 1rem); overflow: hidden; } + .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer { flex-shrink: 0; } + .modal-dialog-scrollable .modal-body { overflow-y: auto; } + .modal-dialog-centered { display: flex; align-items: center; - min-height: subtract(100%, 1rem); + min-height: calc(100% - 1rem); } + .modal-dialog-centered::before { display: block; - height: subtract(100vh, 1rem); + height: calc(100vh - 1rem); height: -webkit-min-content; height: min-content; content: ""; } + .modal-dialog-centered.modal-dialog-scrollable { flex-direction: column; justify-content: center; height: 100%; } + .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none; } + .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } + .modal-content { position: relative; display: flex; @@ -94,6 +112,7 @@ border-radius: 0.3rem; outline: 0; } + .modal-backdrop { position: fixed; top: 0; @@ -103,12 +122,15 @@ height: 100vh; background-color: #000; } + .modal-backdrop.fade { opacity: 0; } + .modal-backdrop.show { opacity: 0.5; } + .modal-scrollbar-measure { position: absolute; top: -9999px; @@ -116,6 +138,7 @@ height: 50px; overflow: scroll; } + @media (min-width: 576px) { .modal-dialog { max-width: 500px; @@ -123,17 +146,19 @@ } .modal-dialog-scrollable { - max-height: subtract(100%, 3.5rem); + max-height: calc(100% - 3.5rem); } + .modal-dialog-scrollable .modal-content { - max-height: subtract(100vh, 3.5rem); + max-height: calc(100vh - 3.5rem); } .modal-dialog-centered { - min-height: subtract(100%, 3.5rem); + min-height: calc(100% - 3.5rem); } + .modal-dialog-centered::before { - height: subtract(100vh, 3.5rem); + height: calc(100vh - 3.5rem); height: -webkit-min-content; height: min-content; } @@ -142,12 +167,14 @@ max-width: 300px; } } + @media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } } + @media (min-width: 1200px) { .modal-xl { max-width: 1140px; diff --git a/projects/ng-components/src/assets/styles/model-view-layout.css b/projects/ng-components/src/assets/styles/model-view-layout.css index 2e82ae2a..171e6c78 100644 --- a/projects/ng-components/src/assets/styles/model-view-layout.css +++ b/projects/ng-components/src/assets/styles/model-view-layout.css @@ -1,48 +1,47 @@ +.model-view-container { + @apply mt-5 min-w-full min-h-screen; +} - .model-view-container { - @apply mt-5 min-w-full min-h-screen; - } +.model-view-container-inner { + @apply lg:grid lg:grid-cols-12 lg:gap-x-5; +} - .model-view-container-inner { - @apply lg:grid lg:grid-cols-12 lg:gap-x-5; - } +.model-view-aside { + @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 md:col-span-3; +} - .model-view-aside { - @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 md:col-span-3; - } +.model-view-aside-header-section { + @apply min-w-full; +} - .model-view-aside-header-section { - @apply min-w-full; - } +.model-view-aside-header-container { + @apply bg-white shadow-sm border border-gray-200 rounded-xl; +} - .model-view-aside-header-container { - @apply bg-white shadow-sm border border-gray-200 rounded-xl; - } +.model-view-aside-header-container-inner { + @apply flex flex-col bg-gray-50 justify-self-stretch rounded-t-xl h-24; +} - .model-view-aside-header-container-inner { - @apply flex flex-col bg-gray-50 justify-self-stretch rounded-t-xl h-24; - } +.model-view-menu-container { + @apply bg-white px-4 py-4 flow-root hidden sm:block rounded-b-xl; +} - .model-view-menu-container { - @apply bg-white px-4 py-4 flow-root hidden sm:block rounded-b-xl; - } +.model-view-menu-container-mobile { + @apply mt-2 px-4 py-2 flow-root sm:hidden; +} - .model-view-menu-container-mobile { - @apply mt-2 px-4 py-2 flow-root sm:hidden; - } +.model-view-menu-nav { + @apply h-full flex flex-col; +} - .model-view-menu-nav { - @apply h-full flex flex-col; - } +.model-view-menu-item { + @apply space-y-1; +} - .model-view-menu-item { - @apply space-y-1; - } +.model-view-menu-item-far { + @apply mt-auto pt-10 space-y-1; +} - .model-view-menu-item-far { - @apply mt-auto pt-10 space-y-1; - } - - .model-view-details-container { - @apply sm:px-6 lg:px-2 lg:col-span-9 md:col-span-10; - } +.model-view-details-container { + @apply sm:px-6 lg:px-2 lg:col-span-9 md:col-span-10; +} diff --git a/projects/ng-components/src/assets/styles/nav-links.css b/projects/ng-components/src/assets/styles/nav-links.css index 89487a0f..0775f80d 100644 --- a/projects/ng-components/src/assets/styles/nav-links.css +++ b/projects/ng-components/src/assets/styles/nav-links.css @@ -1,66 +1,64 @@ +.nav-link { + @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 { + @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white flex items-center px-2 py-2 text-sm font-medium rounded-md; +} - .nav-link { - @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; - } +.nav-link-profile { + @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; +} - .sidebar .nav-link { - @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white flex items-center px-2 py-2 text-sm font-medium rounded-md; - } +.nav-link-mobile { + @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; +} - .nav-link-profile { - @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; - } +.sidebar .nav-link-list-container { + @apply flex-1 flex flex-col overflow-y-auto; +} - .nav-link-mobile { - @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-inner { + @apply flex-1 px-2 py-4 space-y-2; +} - .sidebar .nav-link-list-container { - @apply flex-1 flex flex-col overflow-y-auto; - } +.sidebar .nav-link-list-container-inner .icons-only { + @apply flex-1 px-2 py-4 space-y-4; +} - .sidebar .nav-link-list-container-inner { - @apply flex-1 px-2 py-4 space-y-2; - } +.nav-link-active { + @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-list-container-inner .icons-only { - @apply flex-1 px-2 py-4 space-y-4; - } +.sidebar .nav-link-active { + @apply cursor-default bg-gray-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md; +} - .nav-link-active { - @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-b { + @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 { - @apply cursor-default bg-gray-900 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-sky-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md; +} - .sidebar .nav-link-active-b { - @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; - } +.nav-link-profile-active { + @apply cursor-default rounded-md block px-4 py-2 text-xs text-sky-900 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden; +} - .sidebar .nav-link-active-l { - @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 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-sky-300 block px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden; - } +.nav-link-mobile-active { + @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 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 { + @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-100 border-gray-600 hover:border-gray-600 text-gray-900; - } +.view-nav-link-active { + @apply cursor-default bg-gray-100 border-gray-600 hover:border-gray-600 text-gray-900; +} - .min-nav-link-text-width { - width: 220px; - } +.min-nav-link-text-width { + width: 220px; +} diff --git a/projects/ng-components/src/assets/styles/notifications-indicator.component.css b/projects/ng-components/src/assets/styles/notifications-indicator.component.css index a0d190a5..87c03e30 100644 --- a/projects/ng-components/src/assets/styles/notifications-indicator.component.css +++ b/projects/ng-components/src/assets/styles/notifications-indicator.component.css @@ -1,33 +1,31 @@ +.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; +} - .notifications-nav-link { - @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50; - } +.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 { - @apply flex gap-3 items-center; - } +.header-notifications-dropdown { + @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-black/5 focus:outline-none; +} - .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-with-username { + @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-black/5 focus:outline-none; +} - .header-notifications-dropdown { - @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-black/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; +} - .header-notifications-dropdown-with-username { - @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-black/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-thumb { + @apply bg-gray-600 hover:bg-gray-700; +} .notification-messages::-webkit-scrollbar { @@ -36,4 +34,4 @@ background: transparent; cursor: pointer; /* or add it to the track */ -} \ No newline at end of file +} diff --git a/projects/ng-components/src/assets/styles/pager.css b/projects/ng-components/src/assets/styles/pager.css index b7c619f1..8faa5e3e 100644 --- a/projects/ng-components/src/assets/styles/pager.css +++ b/projects/ng-components/src/assets/styles/pager.css @@ -1,32 +1,31 @@ +.pager-container { + @apply flex flex-col sm:flex-row mb-2 justify-start; +} - .pager-container { - @apply flex flex-col sm:flex-row mb-2 justify-start; - } +.pager-container-near { + @apply sm:flex-1 justify-start items-center mb-1 sm:mb-0; +} - .pager-container-near { - @apply sm:flex-1 justify-start items-center mb-1 sm:mb-0; - } +.pager-container-far { + @apply justify-start flex-nowrap items-center; +} - .pager-container-far { - @apply justify-start flex-nowrap items-center; - } +.pager-icon-button { + @apply inline-flex relative ml-1 mr-2 items-center px-2 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50; +} - .pager-icon-button { - @apply inline-flex relative ml-1 mr-2 items-center px-2 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50; - } +.pager-pages-container { + @apply relative inline-flex rounded-sm; +} - .pager-pages-container { - @apply relative inline-flex rounded-sm; - } +.pager-button { + @apply relative ml-1 inline-flex items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50; +} - .pager-button { - @apply relative ml-1 inline-flex items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50; - } +.pager-arrow-button-left { + @apply inline-flex relative ml-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50; +} - .pager-arrow-button-left { - @apply inline-flex relative ml-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50; - } - - .pager-arrow-button-right { - @apply inline-flex relative mr-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50; - } +.pager-arrow-button-right { + @apply inline-flex relative mr-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50; +} diff --git a/projects/ng-components/src/assets/styles/shell-layout.css b/projects/ng-components/src/assets/styles/shell-layout.css index 24b9803d..121492f7 100644 --- a/projects/ng-components/src/assets/styles/shell-layout.css +++ b/projects/ng-components/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; +} diff --git a/projects/ng-components/src/assets/styles/shell-sidebar-header.css b/projects/ng-components/src/assets/styles/shell-sidebar-header.css deleted file mode 100644 index ba7cde59..00000000 --- a/projects/ng-components/src/assets/styles/shell-sidebar-header.css +++ /dev/null @@ -1,2 +0,0 @@ -@layer components { -} \ No newline at end of file diff --git a/projects/ng-components/src/assets/styles/shell-sidebar-layout.css b/projects/ng-components/src/assets/styles/shell-sidebar-layout.css index 4ad22d88..05f16afc 100644 --- a/projects/ng-components/src/assets/styles/shell-sidebar-layout.css +++ b/projects/ng-components/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; +} diff --git a/projects/ng-components/src/assets/styles/shell-sidebar.css b/projects/ng-components/src/assets/styles/shell-sidebar.css index dbb705f3..9cc935c3 100644 --- a/projects/ng-components/src/assets/styles/shell-sidebar.css +++ b/projects/ng-components/src/assets/styles/shell-sidebar.css @@ -1,32 +1,31 @@ +.shell-sidebar-container-fixed { + @apply fixed w-0 sm:w-64 flex-col inset-y-0 bg-gray-800; +} - .shell-sidebar-container-fixed { - @apply fixed w-0 sm:w-64 flex-col inset-y-0 bg-gray-800; - } +.shell-sidebar-toggle-button { + @apply hidden sm:block px-4 border-0 text-white focus:outline-none; +} - .shell-sidebar-toggle-button { - @apply hidden sm:block px-4 border-0 text-white focus:outline-none; - } +.shell-sidebar-container-hidden { + @apply hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800; +} - .shell-sidebar-container-hidden { - @apply hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800; - } +.shell-sidebar-content-container { + @apply flex flex-col; +} - .shell-sidebar-content-container { - @apply flex flex-col; - } +.shell-sidebar-content-container-inner { + @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800; +} - .shell-sidebar-content-container-inner { - @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800; - } +.shell-sidebar-header-container { + @apply flex-1; +} - .shell-sidebar-header-container { - @apply flex-1; - } - - .shell-sidebar-component-container { - @apply flex w-full flex-col h-full min-h-0 bg-gray-800; - } +.shell-sidebar-component-container { + @apply flex w-full flex-col h-full min-h-0 bg-gray-800; +} - .shell-sidebar-component-links-container { - @apply pt-4; - } +.shell-sidebar-component-links-container { + @apply pt-4; +} diff --git a/projects/ng-components/src/assets/styles/side-pane.css b/projects/ng-components/src/assets/styles/side-pane.css index 0f559d73..62704f07 100644 --- a/projects/ng-components/src/assets/styles/side-pane.css +++ b/projects/ng-components/src/assets/styles/side-pane.css @@ -1,50 +1,48 @@ +.side-pane-outer-container { + @apply fixed inset-0 overflow-hidden z-40; +} +.side-pane-overlay { + @apply absolute bg-black opacity-25 inset-0; +} - .side-pane-outer-container { - @apply fixed inset-0 overflow-hidden z-40; - } +.side-pane-overlay-opacity-0 { + @apply absolute bg-black opacity-0 inset-0; +} - .side-pane-overlay { - @apply absolute bg-gray-500 bg-black/25 inset-0; - } +.side-pane-overlay-opacity-50 { + @apply absolute bg-black opacity-50 inset-0; +} - .side-pane-overlay-opacity-0 { - @apply absolute bg-gray-500 bg-black/0 inset-0; - } +.side-pane-container { + @apply fixed inset-y-0 right-0 max-w-full flex transition-all duration-200 ease-in-out; +} - .side-pane-overlay-opacity-50 { - @apply absolute bg-gray-500 bg-black/50 inset-0; - } +.side-pane-container-inner { + @apply w-screen max-w-md; +} - .side-pane-container { - @apply fixed inset-y-0 right-0 max-w-full flex transition-all duration-200 ease-in-out; - } +.side-pane-box-size { + @apply w-screen max-w-2xl; +} - .side-pane-container-inner { - @apply w-screen max-w-md; - } +.side-pane-box-size-25 { + @apply w-screen max-w-2xl; +} - .side-pane-box-size { - @apply w-screen max-w-2xl; - } +.side-pane-box-size-50 { + @apply w-screen max-w-3xl; +} - .side-pane-box-size-25 { - @apply w-screen max-w-2xl; - } - - .side-pane-box-size-50 { - @apply w-screen max-w-3xl; - } - - .side-pane-box-size-75 { - @apply w-screen max-w-4xl; - } +.side-pane-box-size-75 { + @apply w-screen max-w-4xl; +} - .side-pane-box-size-100 { - @apply w-screen max-w-full; - } +.side-pane-box-size-100 { + @apply w-screen max-w-full; +} - .side-pane { - @apply flex flex-col bg-white shadow-xl overflow-y-hidden; - } +.side-pane { + @apply flex flex-col bg-white shadow-xl overflow-y-hidden; +} diff --git a/projects/ng-components/src/assets/styles/side-view-layout.css b/projects/ng-components/src/assets/styles/side-view-layout.css index fc2f43d4..79670e21 100644 --- a/projects/ng-components/src/assets/styles/side-view-layout.css +++ b/projects/ng-components/src/assets/styles/side-view-layout.css @@ -1,57 +1,56 @@ +.side-view-layout-size-box { + @apply h-screen; +} - .side-view-layout-size-box { - @apply h-screen; - } +.side-view-layout-container { + @apply h-full flex flex-col shadow-xl bg-gray-900; +} - .side-view-layout-container { - @apply h-full flex flex-col shadow-xl bg-gray-900; - } +.side-view-layout-container-inner { + @apply min-h-0 flex-1 flex flex-col pt-6 overflow-y-hidden; +} - .side-view-layout-container-inner { - @apply min-h-0 flex-1 flex flex-col pt-6 overflow-y-hidden; - } +.side-view-layout-header-margins { + @apply px-4 sm:px-6; +} - .side-view-layout-header-margins { - @apply px-4 sm:px-6; - } +.side-view-layout-header-container { + @apply flex items-start justify-between; +} - .side-view-layout-header-container { - @apply flex items-start justify-between; - } +.side-view-layout-header-title { + @apply text-lg font-medium text-white; +} - .side-view-layout-header-title { - @apply text-lg font-medium text-white; - } +.side-view-layout-close-button-container { + @apply ml-3 h-7 flex items-center; +} - .side-view-layout-close-button-container { - @apply ml-3 h-7 flex items-center; - } +.side-view-layout-close-button { + @apply rounded-sm text-white hover:text-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300; +} - .side-view-layout-close-button { - @apply rounded-sm text-white hover:text-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300; - } +.side-view-layout-close-button-icon { + @apply h-6 w-6; +} - .side-view-layout-close-button-icon { - @apply h-6 w-6; - } +.side-view-layout-content-container { + @apply bg-white mt-6 relative flex-1 px-6 overflow-y-auto; +} - .side-view-layout-content-container { - @apply bg-white mt-6 relative flex-1 px-6 overflow-y-auto; - } +.side-view-layout-actions-container { + @apply flex-shrink-0 px-4 py-4 flex bg-gray-100 justify-end; +} - .side-view-layout-actions-container { - @apply flex-shrink-0 px-4 py-4 flex bg-gray-100 justify-end; - } +.side-view-layout-action-button-cancel { + @apply bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500; +} - .side-view-layout-action-button-cancel { - @apply bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500; - } +.side-view-layout-action-button-submit { + @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500; +} - .side-view-layout-action-button-submit { - @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500; - } - - .side-view-layout-action-button-submit:disabled { - @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 cursor-not-allowed; - } +.side-view-layout-action-button-submit:disabled { + @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 cursor-not-allowed; +} diff --git a/projects/ng-components/src/assets/styles/stepper.css b/projects/ng-components/src/assets/styles/stepper.css index c8c60605..55e319cb 100644 --- a/projects/ng-components/src/assets/styles/stepper.css +++ b/projects/ng-components/src/assets/styles/stepper.css @@ -1,170 +1,169 @@ +/* Bullets */ +.stepper-bullets-container { + @apply flex items-center justify-center; +} +.stepper-bullets-counter { + @apply text-sm font-medium; +} +.stepper-bullets-ol { + @apply ml-8 flex items-center space-x-5; +} +.stepper-bullets-completed-step { + @apply block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900; +} +.stepper-bullets-active-step { + @apply relative flex items-center justify-center; +} +.stepper-bullets-active-step-level1 { + @apply absolute w-5 h-5 p-px flex; +} +.stepper-bullets-active-step-level11 { + @apply w-full h-full rounded-full bg-blue-200; +} +.stepper-bullets-active-step-bullet { + @apply relative block w-2.5 h-2.5 bg-blue-600 rounded-full; +} +.stepper-bullets-upcoming-step { + @apply block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400; +} - /* Bullets */ - .stepper-bullets-container { - @apply flex items-center justify-center; - } - .stepper-bullets-counter { - @apply text-sm font-medium; - } - .stepper-bullets-ol { - @apply ml-8 flex items-center space-x-5; - } - .stepper-bullets-completed-step { - @apply block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900; - } - .stepper-bullets-active-step { - @apply relative flex items-center justify-center; - } - .stepper-bullets-active-step-level1 { - @apply absolute w-5 h-5 p-px flex; - } - .stepper-bullets-active-step-level11 { - @apply w-full h-full rounded-full bg-blue-200; - } - .stepper-bullets-active-step-bullet { - @apply relative block w-2.5 h-2.5 bg-blue-600 rounded-full; - } - .stepper-bullets-upcoming-step { - @apply block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400; - } +/* Bullets & Text */ +.stepper-bullets-and-text-container { + @apply flex items-center justify-center; +} +.stepper-bullets-and-text-ol { + @apply space-y-6; +} +.stepper-bullets-and-text-completed-step { + @apply flex items-start; +} +.stepper-bullets-and-text-completed-step-level1 { + @apply flex-shrink-0 relative h-5 w-5 flex items-center justify-center; +} +.stepper-bullets-and-text-completed-step-container { + @apply ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900; +} +.stepper-bullets-and-text-active-step { + @apply flex items-start; +} +.stepper-bullets-and-text-active-step-level1 { + @apply flex-shrink-0 h-5 w-5 relative flex items-center justify-center; +} +.stepper-bullets-and-text-active-step-level11 { + @apply absolute h-4 w-4 rounded-full bg-blue-200; +} +.stepper-bullets-and-text-active-step-level12 { + @apply relative block w-2 h-2 bg-blue-600 rounded-full; +} +.stepper-bullets-and-text-active-step-container { + @apply ml-3 text-sm font-medium text-blue-600; +} +.stepper-bullets-and-text-upcoming-step { + @apply flex items-start; +} +.stepper-bullets-and-text-upcoming-step-level1 { + @apply flex-shrink-0 h-5 w-5 relative flex items-center justify-center; +} +.stepper-bullets-and-text-upcoming-step-level2 { + @apply h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400; +} +.stepper-bullets-and-text-upcoming-step-container { + @apply ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900; +} - /* Bullets & Text */ - .stepper-bullets-and-text-container { - @apply flex items-center justify-center; - } - .stepper-bullets-and-text-ol { - @apply space-y-6; - } - .stepper-bullets-and-text-completed-step { - @apply flex items-start; - } - .stepper-bullets-and-text-completed-step-level1 { - @apply flex-shrink-0 relative h-5 w-5 flex items-center justify-center; - } - .stepper-bullets-and-text-completed-step-container { - @apply ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900; - } - .stepper-bullets-and-text-active-step { - @apply flex items-start; - } - .stepper-bullets-and-text-active-step-level1 { - @apply flex-shrink-0 h-5 w-5 relative flex items-center justify-center; - } - .stepper-bullets-and-text-active-step-level11 { - @apply absolute h-4 w-4 rounded-full bg-blue-200; - } - .stepper-bullets-and-text-active-step-level12 { - @apply relative block w-2 h-2 bg-blue-600 rounded-full; - } - .stepper-bullets-and-text-active-step-container { - @apply ml-3 text-sm font-medium text-blue-600; - } - .stepper-bullets-and-text-upcoming-step { - @apply flex items-start; - } - .stepper-bullets-and-text-upcoming-step-level1 { - @apply flex-shrink-0 h-5 w-5 relative flex items-center justify-center; - } - .stepper-bullets-and-text-upcoming-step-level2 { - @apply h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400; - } - .stepper-bullets-and-text-upcoming-step-container { - @apply ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900; - } +/* Circles */ - /* Circles */ - - /* Panels With Border */ - .panels-with-border-container { - @apply border-t border-b border-gray-200; - } - .panels-with-border-nav { - @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; - } - .panels-with-border-ol { - @apply rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none; - } - .panels-with-border-li { - @apply relative overflow-hidden lg:flex-1 cursor-pointer; - } - .panels-with-border-completed-step { - @apply border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0; - } - .panels-with-border-completed-step-level1 { - @apply absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto; - } - .panels-with-border-completed-step-level2 { - @apply px-6 py-5 flex items-start text-sm font-medium; - } - .panels-with-border-completed-step-level21 { - @apply flex-shrink-0; - } - .panels-with-border-completed-step-level211 { - @apply w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full; - } - .panels-with-border-completed-step-level22 { - @apply mt-0.5 ml-4 min-w-0 flex flex-col; - } - .panels-with-border-completed-step-level221 { - @apply text-xs font-semibold tracking-wide uppercase; - } - .panels-with-border-completed-step-level222 { - @apply text-sm font-medium text-gray-500; - } - .panels-with-border-active-step { - @apply border border-gray-200 overflow-hidden lg:border-0; - } - .panels-with-border-active-step-level1 { - @apply absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto; - } - .panels-with-border-active-step-level2 { - @apply px-6 py-5 flex items-start text-sm font-medium lg:pl-9; - } - .panels-with-border-active-step-level21 { - @apply flex-shrink-0; - } - .panels-with-border-active-step-level211 { - @apply w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full; - } - .panels-with-border-active-step-level211-text { - @apply text-blue-600; - } - .panels-with-border-active-step-level22 { - @apply mt-0.5 ml-4 min-w-0 flex flex-col; - } - .panels-with-border-active-step-level221 { - @apply text-xs font-semibold text-blue-600 tracking-wide uppercase; - } - .panels-with-border-active-step-level222 { - @apply text-sm font-medium text-gray-500; - } - .panels-with-border-step-separator { - @apply hidden absolute top-0 left-0 w-3 inset-0 lg:block; - } - .panels-with-border-upcoming-step { - @apply border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0; - } - .panels-with-border-upcoming-step-level1 { - @apply absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto; - } - .panels-with-border-upcoming-step-level2 { - @apply px-6 py-5 flex items-start text-sm font-medium lg:pl-9; - } - .panels-with-border-upcoming-step-level21 { - @apply flex-shrink-0; - } - .panels-with-border-upcoming-step-level211 { - @apply w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full; - } - .panels-with-border-upcoming-step-level211-text { - @apply text-gray-500; - } - .panels-with-border-upcoming-step-level22 { - @apply mt-0.5 ml-4 min-w-0 flex flex-col; - } - .panels-with-border-upcoming-step-level221 { - @apply text-xs font-semibold text-gray-500 tracking-wide uppercase; - } - .panels-with-border-upcoming-step-level222 { - @apply text-sm font-medium text-gray-500; - } \ No newline at end of file +/* Panels With Border */ +.panels-with-border-container { + @apply border-t border-b border-gray-200; +} +.panels-with-border-nav { + @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; +} +.panels-with-border-ol { + @apply rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none; +} +.panels-with-border-li { + @apply relative overflow-hidden lg:flex-1 cursor-pointer; +} +.panels-with-border-completed-step { + @apply border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0; +} +.panels-with-border-completed-step-level1 { + @apply absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto; +} +.panels-with-border-completed-step-level2 { + @apply px-6 py-5 flex items-start text-sm font-medium; +} +.panels-with-border-completed-step-level21 { + @apply flex-shrink-0; +} +.panels-with-border-completed-step-level211 { + @apply w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full; +} +.panels-with-border-completed-step-level22 { + @apply mt-0.5 ml-4 min-w-0 flex flex-col; +} +.panels-with-border-completed-step-level221 { + @apply text-xs font-semibold tracking-wide uppercase; +} +.panels-with-border-completed-step-level222 { + @apply text-sm font-medium text-gray-500; +} +.panels-with-border-active-step { + @apply border border-gray-200 overflow-hidden lg:border-0; +} +.panels-with-border-active-step-level1 { + @apply absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto; +} +.panels-with-border-active-step-level2 { + @apply px-6 py-5 flex items-start text-sm font-medium lg:pl-9; +} +.panels-with-border-active-step-level21 { + @apply flex-shrink-0; +} +.panels-with-border-active-step-level211 { + @apply w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full; +} +.panels-with-border-active-step-level211-text { + @apply text-blue-600; +} +.panels-with-border-active-step-level22 { + @apply mt-0.5 ml-4 min-w-0 flex flex-col; +} +.panels-with-border-active-step-level221 { + @apply text-xs font-semibold text-blue-600 tracking-wide uppercase; +} +.panels-with-border-active-step-level222 { + @apply text-sm font-medium text-gray-500; +} +.panels-with-border-step-separator { + @apply hidden absolute top-0 left-0 w-3 inset-0 lg:block; +} +.panels-with-border-upcoming-step { + @apply border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0; +} +.panels-with-border-upcoming-step-level1 { + @apply absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto; +} +.panels-with-border-upcoming-step-level2 { + @apply px-6 py-5 flex items-start text-sm font-medium lg:pl-9; +} +.panels-with-border-upcoming-step-level21 { + @apply flex-shrink-0; +} +.panels-with-border-upcoming-step-level211 { + @apply w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full; +} +.panels-with-border-upcoming-step-level211-text { + @apply text-gray-500; +} +.panels-with-border-upcoming-step-level22 { + @apply mt-0.5 ml-4 min-w-0 flex flex-col; +} +.panels-with-border-upcoming-step-level221 { + @apply text-xs font-semibold text-gray-500 tracking-wide uppercase; +} +.panels-with-border-upcoming-step-level222 { + @apply text-sm font-medium text-gray-500; +} diff --git a/projects/ng-components/src/assets/styles/tab-group.css b/projects/ng-components/src/assets/styles/tab-group.css index 557dd547..d6ddf949 100644 --- a/projects/ng-components/src/assets/styles/tab-group.css +++ b/projects/ng-components/src/assets/styles/tab-group.css @@ -1,28 +1,27 @@ +.tab-group-select-hidden { + @apply sm:hidden; +} - .tab-group-select-hidden { - @apply sm:hidden; - } +.tab-group-select { + @apply block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md; +} - .tab-group-select { - @apply block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md; - } +.tab-active { + @apply border-gray-500 text-gray-900 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm; +} - .tab-active { - @apply border-gray-500 text-gray-900 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm; - } +.tab { + @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm; +} - .tab { - @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm; - } +.tab-group-container-nav { + @apply -mb-px flex space-x-8; +} - .tab-group-container-nav { - @apply -mb-px flex space-x-8; - } +.tab-group-container-hidden { + @apply hidden sm:block; +} - .tab-group-container-hidden { - @apply hidden sm:block; - } - - .tab-group-container { - @apply border-b border-gray-200; - } +.tab-group-container { + @apply border-b border-gray-200; +} diff --git a/projects/ng-components/src/assets/styles/toast.css b/projects/ng-components/src/assets/styles/toast.css index cd4f00d1..4f07acf1 100644 --- a/projects/ng-components/src/assets/styles/toast.css +++ b/projects/ng-components/src/assets/styles/toast.css @@ -1,70 +1,70 @@ - .toast { - @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-50; - animation: move 400ms ease-in; - } +.toast { + @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-50; + animation: move 400ms ease-in; +} - .toast-closed { - @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start; - animation: close 100ms ease-out; - } +.toast-closed { + @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start; + animation: close 100ms ease-out; +} - .toast-container { - @apply w-full flex flex-col items-center space-y-4 sm:items-end z-50; - } +.toast-container { + @apply w-full flex flex-col items-center space-y-4 sm:items-end z-50; +} - .toast-pill { - @apply max-w-sm w-full bg-white shadow-lg rounded-xl pointer-events-auto ring-1 ring-black ring-black/5 overflow-hidden; - } +.toast-pill { + @apply max-w-sm w-full bg-white shadow-lg rounded-xl pointer-events-auto ring-1 ring-black ring-black/5 overflow-hidden; +} - .toast-context-padding { - @apply p-4; - } +.toast-context-padding { + @apply p-4; +} - .toast-context { - @apply flex items-start; - } +.toast-context { + @apply flex items-start; +} - .toast-icon { - @apply flex-shrink-0; - } +.toast-icon { + @apply flex-shrink-0; +} - .toast-close-icon { - @apply ml-4 flex-shrink-0 flex; - } +.toast-close-icon { + @apply ml-4 flex-shrink-0 flex; +} - .toast-close-button { - @apply bg-white rounded-sm inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; - } +.toast-close-button { + @apply bg-white rounded-sm inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; +} - .toast-title { - @apply mb-1 text-sm font-medium text-gray-900; - } +.toast-title { + @apply mb-1 text-sm font-medium text-gray-900; +} - .toast-body { - @apply text-sm text-gray-500 whitespace-normal; - word-break: break-word; - } +.toast-body { + @apply text-sm text-gray-500 whitespace-normal; + word-break: break-word; +} - @keyframes move { - from { - opacity: 0; - --tw-translate-y: 0.5rem; - transform: translateY(0.5rem); - } +@keyframes move { + from { + opacity: 0; + --tw-translate-y: 0.5rem; + transform: translateY(0.5rem); + } - to { - --tw-translate-y: 0; - transform: translateY(0); - opacity: 100; - } + to { + --tw-translate-y: 0; + transform: translateY(0); + opacity: 100; } +} - @keyframes close { - from { - opacity: 100; - } +@keyframes close { + from { + opacity: 100; + } - to { - opacity: 0; - } + to { + opacity: 0; } +} diff --git a/projects/ng-components/src/assets/styles/toggle-button.component.css b/projects/ng-components/src/assets/styles/toggle-button.component.css index 1a723e75..d982a485 100644 --- a/projects/ng-components/src/assets/styles/toggle-button.component.css +++ b/projects/ng-components/src/assets/styles/toggle-button.component.css @@ -1,52 +1,51 @@ +.toggle-button-button { + @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1; +} - .toggle-button-button { - @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1; - } +.toggle-button-button-disabled { + @apply opacity-75; +} - .toggle-button-button-disabled { - @apply opacity-75; - } +.toggle-button-bg-false { + @apply bg-gray-200; +} - .toggle-button-bg-false { - @apply bg-gray-200; - } +.toggle-button-bg-true { + @apply bg-gray-600; +} - .toggle-button-bg-true { - @apply bg-gray-600; - } +.toggle-button-icon-container { + @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out; +} - .toggle-button-icon-container { - @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out; - } +.toggle-button-icon-container-true { + @apply translate-x-5; +} - .toggle-button-icon-container-true { - @apply translate-x-5; - } +.toggle-button-icon-container-false { + @apply translate-x-0; +} - .toggle-button-icon-container-false { - @apply translate-x-0; - } +.toggle-button-icon-container-inner { + @apply opacity-100 ease-in duration-200 absolute inset-0 flex h-full w-full items-center justify-center transition-opacity; +} - .toggle-button-icon-container-inner { - @apply opacity-100 ease-in duration-200 absolute inset-0 flex h-full w-full items-center justify-center transition-opacity; - } +.toggle-button-container-inner-true { + @apply opacity-0 ease-out duration-100; +} - .toggle-button-container-inner-true { - @apply opacity-0 ease-out duration-100; - } +.toggle-button-container-inner-false { + @apply opacity-100 ease-in duration-200; +} - .toggle-button-container-inner-false { - @apply opacity-100 ease-in duration-200; - } +.toggle-button-icon { + @apply h-3 w-3 text-gray-600; +} - .toggle-button-icon { - @apply h-3 w-3 text-gray-600; - } +.toggle-button-text { + @apply text-sm font-medium text-gray-900; +} - .toggle-button-text { - @apply text-sm font-medium text-gray-900; - } - - .toggle-button-description { - @apply text-xs mt-1 text-gray-500; - } +.toggle-button-description { + @apply text-xs mt-1 text-gray-500; +} diff --git a/projects/ng-components/src/assets/styles/toggle-buttons-list.component.css b/projects/ng-components/src/assets/styles/toggle-buttons-list.component.css index 034ccae6..27af853f 100644 --- a/projects/ng-components/src/assets/styles/toggle-buttons-list.component.css +++ b/projects/ng-components/src/assets/styles/toggle-buttons-list.component.css @@ -1,45 +1,44 @@ - - .toggle-buttons-list-container { - @apply relative items-center inline-flex; - } - - .toggle-buttons-list-icon-container { - @apply flex-none mr-2; - } - - .toggle-buttons-list-drop-down-container { - @apply block lg:hidden z-10; - } - - .toggle-buttons-list-drop-down-compact-container { - @apply block z-10; - } - - /* mw-40 not supported*/ - .toggle-buttons-list-drop-down { - @apply w-full; - } - - .toggle-buttons-list { - @apply hidden lg:block; - } - - .toggle-buttons-list-button { - @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 { - @apply bg-gray-100; - } - - .toggle-buttons-list-button-icon-container { - @apply flex-none mr-2; - } - - .toggle-buttons-list-button-button-text { - @apply mr-2 block overflow-ellipsis overflow-hidden; - } - - .toggle-buttons-list-button-button-count { - @apply ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs text-gray-700 tabular-nums; - } +.toggle-buttons-list-container { + @apply relative items-center inline-flex; +} + +.toggle-buttons-list-icon-container { + @apply flex-none mr-2; +} + +.toggle-buttons-list-drop-down-container { + @apply block lg:hidden z-10; +} + +.toggle-buttons-list-drop-down-compact-container { + @apply block z-10; +} + +/* mw-40 not supported*/ +.toggle-buttons-list-drop-down { + @apply w-full; +} + +.toggle-buttons-list { + @apply hidden lg:block; +} + +.toggle-buttons-list-button { + @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 { + @apply bg-gray-100; +} + +.toggle-buttons-list-button-icon-container { + @apply flex-none mr-2; +} + +.toggle-buttons-list-button-button-text { + @apply mr-2 block overflow-ellipsis overflow-hidden; +} + +.toggle-buttons-list-button-button-count { + @apply ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs text-gray-700 tabular-nums; +} diff --git a/projects/ng-components/src/assets/styles/toggle.css b/projects/ng-components/src/assets/styles/toggle.css index 4088e9a0..a347ece3 100644 --- a/projects/ng-components/src/assets/styles/toggle.css +++ b/projects/ng-components/src/assets/styles/toggle.css @@ -1,24 +1,23 @@ +.toggle-button { + @apply mt-3 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; +} - .toggle-button { - @apply mt-3 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 - } +.toggle-span { + @apply translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200; +} - .toggle-span { - @apply translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 - } +.enabled { + @apply bg-indigo-600; +} - .enabled { - @apply bg-indigo-600 - } +.enabled-anim { + @apply translate-x-5; +} - .enabled-anim { - @apply translate-x-5 - } +.disabled { + @apply bg-gray-200; +} - .disabled { - @apply bg-gray-200 - } - - .disabled-anim { - @apply translate-x-0 - } +.disabled-anim { + @apply translate-x-0; +} diff --git a/projects/ng-components/src/assets/styles/view-layout.css b/projects/ng-components/src/assets/styles/view-layout.css index d5a837cd..cefb41e8 100644 --- a/projects/ng-components/src/assets/styles/view-layout.css +++ b/projects/ng-components/src/assets/styles/view-layout.css @@ -1,89 +1,89 @@ @reference tailwindcss; - .view-container { - @apply mt-4 sm:mt-5 flex flex-col; - } +.view-container { + @apply mt-4 sm:mt-5 flex flex-col; +} - .view-container-fluid { - @apply sm:px-0 ; - } +.view-container-fluid { + @apply sm:px-0 ; +} - .view-layout-paddings { - @apply py-4 sm:py-6; - } +.view-layout-paddings { + @apply py-4 sm:py-6; +} - .sidebar .view-layout-paddings { - @apply py-2 sm:py-4; - } +.sidebar .view-layout-paddings { + @apply py-2 sm:py-4; +} - .view-layout-title-container { - @apply flex text-white flex-col md:flex-row justify-start; - } +.view-layout-title-container { + @apply flex text-white flex-col md:flex-row justify-start; +} - .view-layout-title-container-inner { - @apply flex-1 min-w-0; - } +.view-layout-title-container-inner { + @apply flex-1 min-w-0; +} - .view-layout-title-container-far { - @apply flex items-center justify-start sm:justify-end; - } +.view-layout-title-container-far { + @apply flex items-center justify-start sm:justify-end; +} - .title-icon { - @apply text-2xl md:text-xl text-white font-thin mr-1; - } +.title-icon { + @apply text-2xl md:text-xl text-white font-thin mr-1; +} - .sidebar .title-icon { - @apply text-2xl md:text-xl font-thin mr-1 text-gray-900; - } +.sidebar .title-icon { + @apply text-2xl md:text-xl font-thin mr-1 text-gray-900; +} - .view-layout-title { - @apply inline text-xl md:text-3xl text-white; - } +.view-layout-title { + @apply inline text-xl md:text-3xl text-white; +} - .sidebar .view-layout-title { - @apply inline text-xl md:text-3xl text-gray-900; - } +.sidebar .view-layout-title { + @apply inline text-xl md:text-3xl text-gray-900; +} - .view-layout-title-busy { - @apply animate-pulse inline text-xl md:text-3xl text-gray-200; - } +.view-layout-title-busy { + @apply animate-pulse inline text-xl md:text-3xl text-gray-200; +} - .sidebar .view-layout-title-busy { - @apply animate-pulse inline text-xl md:text-3xl text-gray-400; - } +.sidebar .view-layout-title-busy { + @apply animate-pulse inline text-xl md:text-3xl text-gray-400; +} - .meta-container { - @apply mt-1 ml-1 hidden h-0 w-0 md:w-full md:flex md:flex-wrap opacity-75; - } +.meta-container { + @apply mt-1 ml-1 hidden h-0 w-0 md:w-full md:flex md:flex-wrap opacity-75; +} - .sidebar .meta-container { - @apply text-gray-900; - } +.sidebar .meta-container { + @apply text-gray-900; +} - .meta-item-container { - @apply flex items-center mr-2; - } +.meta-item-container { + @apply flex items-center mr-2; +} - .meta-icon { - @apply text-sm mr-1; - } +.meta-icon { + @apply text-sm mr-1; +} - .meta-text { - @apply text-xs mr-1; - } +.meta-text { + @apply text-xs mr-1; +} - .search-container { - @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-container { + @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 { - @apply pl-10 pr-20 w-60 bg-gray-50 rounded-sm text-sm text-gray-900 border-gray-400 placeholder-gray-500 outline-none focus:shadow focus:outline-none z-0; - } */ +.search-input { + @apply pl-10 pr-20 w-60 bg-gray-50 rounded-sm text-sm text-gray-900 border-gray-400 placeholder-gray-500 outline-none focus:shadow focus:outline-none z-0; +} */ - .search-input { - @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-input { + @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 { - @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; - } +.search-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; +} diff --git a/projects/ng-components/src/styles.css b/projects/ng-components/src/styles.css index e39fedfa..89a5d5fb 100644 --- a/projects/ng-components/src/styles.css +++ b/projects/ng-components/src/styles.css @@ -7,7 +7,6 @@ @import './assets/styles/tab-group.css'; @import './assets/styles/shell-sidebar.css'; -@import './assets/styles/shell-sidebar-header.css'; @import './assets/styles/shell-sidebar-layout.css'; @import './assets/styles/notifications-indicator.component.css'; @@ -22,7 +21,6 @@ @import './assets/styles/list-view.css'; @import './assets/styles/model-view-layout.css'; @import './assets/styles/nav-links.css'; -@import './assets/styles/notifications-indicator.component.css'; @import './assets/styles/pager.css'; @import './assets/styles/advanced-search.css'; @import './assets/styles/shell-layout.css'; diff --git a/projects/ng-components/src/tailwind.config.js b/projects/ng-components/src/tailwind.config.js index 2c671192..357433da 100644 --- a/projects/ng-components/src/tailwind.config.js +++ b/projects/ng-components/src/tailwind.config.js @@ -2,7 +2,7 @@ module.exports = { prefix: '', content: [ - './projects/ng-components/src/**/*.{html,ts,css,scss}', + './projects/ng-components/src/**/*.{html,ts,css}', ], darkMode: 'class', theme: { @@ -21,4 +21,4 @@ module.exports = { corePlugins: { preflight: true, } -}; \ No newline at end of file +}; diff --git a/projects/ng-config/package.json b/projects/ng-config/package.json index 9ab67760..fe3de65f 100644 --- a/projects/ng-config/package.json +++ b/projects/ng-config/package.json @@ -1,6 +1,6 @@ { "name": "@indice/ng-config", - "version": "0.4.0", + "version": "0.4.2", "description": "Indice dynamic runtime configuration provider for applications", "repository": { "type": "git",