-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #205 from adobecom/stage
Stage to Main | Sep 09
- Loading branch information
Showing
18 changed files
with
1,450 additions
and
80 deletions.
There are no files selected for viewing
359 changes: 359 additions & 0 deletions
359
ecc/blocks/attendee-management-table/attendee-management-table.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,359 @@ | ||
| .attendee-management-table { | ||
| font-family: var(--body-font-family); | ||
| padding: 40px; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .attendee-management-table .loading-screen { | ||
| position: fixed; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 16px; | ||
| height: 100%; | ||
| width: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: 20; | ||
| background: var(--color-white); | ||
| } | ||
|
|
||
| .attendee-management-table .loading-screen sp-field-label { | ||
| font-size: var(--type-body-s-size); | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-main-container { | ||
| margin-top: 24px; | ||
| display: flex; | ||
| gap: 24px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-main-container .dashboard-side-panel { | ||
| background-color: var(--color-gray-100); | ||
| border-radius: 8px; | ||
| padding: 16px; | ||
| max-width: 192px; | ||
| min-width: 192px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-main-container .dashboard-side-panel .back-btn { | ||
| display: flex; | ||
| align-items: center; | ||
| font-weight: 700; | ||
| color: var(--color-black); | ||
| font-size: var(--type-body-s-size); | ||
| width: max-content; | ||
| margin-bottom: 1rem; | ||
| margin-left: -4px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-main-container .dashboard-side-panel sp-field-label { | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-main-container .dashboard-side-panel .clear-all-wrapper.hidden { | ||
| display: none; | ||
| } | ||
|
|
||
| .attendee-management-table .events-picker-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .attendee-management-table sp-divider { | ||
| margin: 16px 0; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 16px; | ||
| justify-content: space-between; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-table-container { | ||
| max-width: calc(100% - 250px); | ||
| position: relative; | ||
| } | ||
|
|
||
| .attendee-management-table .loading-overlay { | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: var(--highlight-background-color); | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-table-wrapper { | ||
| overflow: auto; | ||
| } | ||
|
|
||
| .attendee-management-table .pagination-container { | ||
| margin: 40px auto 0; | ||
| display: flex; | ||
| width: max-content; | ||
| font-size: var(--type-body-xs-size); | ||
| } | ||
|
|
||
| .attendee-management-table .loading-screen, | ||
| .attendee-management-table .dashboard-header, | ||
| .attendee-management-table .dashboard-table-wrapper, | ||
| .attendee-management-table .pagination-container { | ||
| transition: opacity 0.5s; | ||
| } | ||
|
|
||
| .attendee-management-table.loading .dashboard-header, | ||
| .attendee-management-table.loading .dashboard-table-wrapper, | ||
| .attendee-management-table.loading .pagination-container { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .attendee-management-table:not(.loading) .loading-screen { | ||
| opacity: 0; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .attendee-management-table.no-attendees .no-attendees-area { | ||
| margin: 64px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .attendee-management-table sp-theme sp-underlay + sp-dialog { | ||
| position: fixed; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| z-index: 1; | ||
| background: var(--spectrum-gray-100); | ||
| min-width: 480px; | ||
| } | ||
|
|
||
| .attendee-management-table sp-theme sp-underlay + sp-dialog h1 { | ||
| font-size: var(--type-heading-s-size); | ||
| } | ||
|
|
||
| .attendee-management-table sp-theme sp-underlay + sp-dialog p { | ||
| font-size: var(--type-body-s-size); | ||
| } | ||
|
|
||
| .attendee-management-table sp-theme sp-underlay + sp-dialog .button-container { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .attendee-management-table sp-theme sp-underlay:not([open]) + sp-dialog { | ||
| display: none; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-header-text { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-header-text h1 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-header-text p { | ||
| margin: 6px 0; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-actions-container { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-actions-container .search-input-wrapper { | ||
| position: relative; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-actions-container .search-input-wrapper img.icon-search { | ||
| position: absolute; | ||
| display: block; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| right: 10px; | ||
| height: 1rem; | ||
| width: 1rem; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-actions-container input { | ||
| border-radius: 16px; | ||
| border: 2px solid var(--color-gray-500); | ||
| height: 24px; | ||
| padding: 0 16px; | ||
| width: 140px; | ||
| } | ||
|
|
||
| .attendee-management-table .dashboard-actions-container input:not(:placeholder-shown) + img.icon-search { | ||
| display: none; | ||
| } | ||
|
|
||
| .attendee-management-table table { | ||
| margin: auto; | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row { | ||
| height: 40; | ||
| border-bottom: 2px solid var(--color-gray-600); | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th { | ||
| padding: 0 16px; | ||
| font-weight: 700; | ||
| text-align: left; | ||
| font-size: var(--type-body-xxs-size); | ||
| color: var(--spectrum-color-gray-500); | ||
| width: 100px; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th span { | ||
| white-space: nowrap; | ||
| width: 60px; | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th.sortable { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th.active { | ||
| color: var(--color-black); | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th .icon { | ||
| transform: translateY(4px); | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th:not(.active) .icon, | ||
| .attendee-management-table table .table-header-row th .icon-chev-down, | ||
| .attendee-management-table table .table-header-row th.desc-sort .icon-chev-up { | ||
| display: none; | ||
| } | ||
|
|
||
| .attendee-management-table table .table-header-row th.active.desc-sort .icon-chev-down { | ||
| display: inline-block; | ||
|
|
||
| } | ||
|
|
||
| .attendee-management-table table .attendee-row { | ||
| height: 40px; | ||
| } | ||
|
|
||
| .attendee-management-table table .no-search-results-row td { | ||
| padding: 40px 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .attendee-management-table table .attendee-row:nth-of-type(even) { | ||
| background-color: var(--color-gray-100); | ||
| } | ||
|
|
||
| .attendee-management-table table .attendee-row .attendee-title-link { | ||
| font-weight: 700; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .attendee-management-table table .attendee-row .thumbnail-container img { | ||
| display: block; | ||
| height: 90px; | ||
| width: 90px; | ||
| min-width: 90px; | ||
| object-fit: cover; | ||
| border-radius: 6px; | ||
| background-color: var(--color-gray-400); | ||
| } | ||
|
|
||
| .attendee-management-table table .attendee-row td { | ||
| padding: 4px 16px; | ||
| position: relative; | ||
| font-size: var(--type-body-xs-size); | ||
| line-height: var(--type-body-xs-lh); | ||
| min-width: 120px; | ||
| } | ||
|
|
||
| .attendee-management-table .attendee-row .dashboard-attendee-tool-box { | ||
| position: absolute; | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: var(--color-white); | ||
| border-radius: 4px; | ||
| padding: 4px; | ||
| left: 20px; | ||
| z-index: 1; | ||
| box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%); | ||
| width: 182px; | ||
| } | ||
|
|
||
| .attendee-management-table .attendee-row .dashboard-attendee-tool-box a.dash-attendee-tool { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| padding: 0 8px; | ||
| margin: 2px; | ||
| text-decoration: none; | ||
| color: var(--color-black); | ||
| font-size: var(--type-body-xxs-size); | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| .attendee-management-table .attendee-row .dashboard-attendee-tool-box a.dash-attendee-tool:hover { | ||
| background-color: var(--color-gray-200); | ||
| } | ||
|
|
||
| .attendee-management-table .pagination-container input { | ||
| padding: 4px 12px; | ||
| width: 16px; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| .attendee-management-table .pagination-container img.icon { | ||
| cursor: pointer; | ||
| width: 24px; | ||
| padding: 0 16px; | ||
| } | ||
|
|
||
| .attendee-management-table .pagination-container img.icon.disabled { | ||
| opacity: 0.5; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .attendee-management-table table .attendee-row .attendee-status img.icon { | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .attendee-management-table .attendee-row .dashboard-attendee-tool-box a.dash-attendee-tool img.icon { | ||
| width: 16px; | ||
| } | ||
|
|
||
| .attendee-management-table .attendee-row.pending { | ||
| opacity: 0.5; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .attendee-management-table sp-theme.toast-area { | ||
| position: fixed; | ||
| right: calc((100% - var(--grid-container-width)) / 2); | ||
| bottom: 80px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 16px; | ||
| z-index: 9; | ||
| } | ||
|
|
||
| @media screen and (min-width: 900px) { | ||
| .attendee-management-table .dashboard-header { | ||
| flex-direction: row; | ||
| } | ||
| } |
Oops, something went wrong.