generated from layer5io/layer5-repo-template
-
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.
Signed-off-by: Lee Calcote <[email protected]>
- Loading branch information
1 parent
ad457b9
commit c9fc975
Showing
16 changed files
with
5,076 additions
and
0 deletions.
There are no files selected for viewing
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,8 @@ | ||
| { | ||
| "about_url": null, | ||
| "license_url": null, | ||
| "assets": { | ||
| }, | ||
| "name": "Modern Category + Group Boxes", | ||
| "component": true | ||
| } |
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,335 @@ | ||
| .custom-category-header { | ||
| margin: 1em auto; | ||
| display: inline-block; | ||
| font-size: 3em; | ||
| border-bottom: 2px solid var(--primary); | ||
| } | ||
|
|
||
| .category-boxes { | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .categories-list { | ||
| .navigation-container { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| .category .muted, | ||
| .navigation-categories .muted { | ||
| opacity: 25%; | ||
| &:hover { | ||
| opacity: 100%; | ||
| } | ||
| } | ||
|
|
||
| .navigation-categories, | ||
| .categories-list { | ||
| .navigation-container { | ||
| border-bottom: 3px solid var(--primary-low-mid-or-secondary-high); | ||
| } | ||
| .list-container { | ||
| padding-top: 32px; | ||
| } | ||
| } | ||
|
|
||
| .custom-category-boxes-container { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| &::empty { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .category { | ||
| .custom-category-boxes { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin: 0 0 32px 0; | ||
| width: 100%; | ||
| flex-wrap: wrap; | ||
| .category-box { | ||
| width: 30%; | ||
| margin-right: 1em; | ||
| margin-bottom: 1em; | ||
| flex-grow: 1; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .category-list:not(.theme-setting):not(.setting), | ||
| .navigation-categories .list-container .full-width #list-area .contents, | ||
| .categories-list .list-container .full-width #header-list-area .contents { | ||
| .column { | ||
| margin-top: 2em; | ||
| } | ||
| .category-boxes, | ||
| .category-boxes-with-topics, | ||
| .category-list.subcategory-list, | ||
| .column.categories, | ||
| .category-list, | ||
| .muted-categories { | ||
| display: none; | ||
| visibility: hidden; | ||
| } | ||
| } | ||
|
|
||
| .category-title-contents { | ||
| padding: 87px 0; | ||
| .d-icon-lock { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .groups-boxes { | ||
| display: grid; | ||
| gap: 18px; | ||
| grid-auto-flow: row; | ||
| grid-template-columns: 1fr 1fr; | ||
| .group-box { | ||
| background-color: none; | ||
| border: 0 !important; | ||
| border-radius: 12px; | ||
| color: var(--primary); | ||
| padding: 0px; | ||
| box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), | ||
| 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), | ||
| 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), | ||
| 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888); | ||
| .group-avatar-flair { | ||
| grid-area: group-image; | ||
| .avatar-flair { | ||
| background-size: 64px; | ||
| height: 64px; | ||
| margin: 0 0; | ||
| width: 64px; | ||
| } | ||
| } | ||
| .group-box-inner { | ||
| display: inline-grid; | ||
| gap: 1em; | ||
| grid-auto-flow: row; | ||
| grid-template-rows: 1fr 0fr; | ||
| .group-description { | ||
| color: var(--primary-very-high); | ||
| } | ||
| .group-info-wrapper { | ||
| align-items: center; | ||
| gap: 1em; | ||
| .group-info { | ||
| margin-bottom: unset; | ||
| padding-right: 1em; | ||
| width: unset; | ||
| span { | ||
| color: var(--primary); | ||
| font-size: 1.125em; | ||
| font-weight: 600; | ||
| letter-spacing: 0.03em; | ||
| flex-shrink: 1; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| .group-user-count { | ||
| color: var(--primary-high); | ||
| flex-shrink: 0; | ||
| font-size: 0.875em; | ||
| padding-top: 2px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .group-membership { | ||
| color: var(--primary-high); | ||
| padding-top: 0; | ||
| .is-group-member { | ||
| color: var(--success); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .custom-category-boxes:not(.above-discovery-categories-outlet) { | ||
| display: grid; | ||
| grid-auto-flow: row; | ||
| grid-gap: 32px; | ||
| grid-template-columns: 1fr 1fr; | ||
| grid-template-rows: 1fr; | ||
| width: 100%; | ||
| .category-box { | ||
| display: flex; | ||
| flex-grow: 1; | ||
| background-color: var(--secondary); | ||
| border-left-width: 0; | ||
| border-radius: 12px; | ||
| margin: 0 0; | ||
| max-height: 160px; | ||
| overflow: hidden; | ||
| transition: all ease-out 0.2s; | ||
| width: initial; | ||
| box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), | ||
| 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), | ||
| 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), | ||
| 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888); | ||
| &:hover { | ||
| background-color: var(--secondary-very-high); | ||
| } | ||
| &.muted { | ||
| .category-details { | ||
| grid-column: 2; | ||
| } | ||
| } | ||
| .category-box-inner { | ||
| border: 0; | ||
| display: grid; | ||
| grid-auto-flow: column; | ||
| grid-template-columns: 0fr 1fr 0fr; | ||
| column-gap: 48px; | ||
| padding: 0; | ||
| .category-logo { | ||
| align-self: center; | ||
| display: inline-block; | ||
| width: 132px; | ||
| height: 132px; | ||
| img { | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| .category-abbreviation { | ||
| display: none; | ||
| } | ||
| &.no-logo-present { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100px; | ||
| height: 100%; | ||
| min-height: 100px; | ||
| .category-abbreviation { | ||
| display: block; | ||
| color: white; | ||
| font-weight: bold; | ||
| font-size: 2em; | ||
| } | ||
| } | ||
| } | ||
| .category-details { | ||
| align-self: center; | ||
| } | ||
| } | ||
| } | ||
| h3 { | ||
| align-items: baseline; | ||
| color: var(--primary); | ||
| display: inline-flex; | ||
| font-size: 1.125em; | ||
| font-weight: 600; | ||
| letter-spacing: 0.03em; | ||
| line-height: 140%; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| text-align: left; | ||
| .rtl & { | ||
| text-align: right; | ||
| } | ||
| .d-icon { | ||
| color: var(--primary-very-high); | ||
| font-size: 16px; | ||
| height: 16px !important; | ||
| margin-inline-end: 4px !important; | ||
| width: 16px !important; | ||
| } | ||
| } | ||
| .category-box-heading { | ||
| margin-bottom: 8px; | ||
| } | ||
| .description { | ||
| color: var(--primary-high); | ||
| font-size: 1em; | ||
| font-weight: 400; | ||
| line-height: 140%; | ||
| letter-spacing: 0.03em; | ||
| margin-bottom: 0; | ||
| max-height: 3em; | ||
| text-align: left; | ||
| .rtl & { | ||
| text-align: right; | ||
| } | ||
| p { | ||
| margin: 0; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| } | ||
| } | ||
| .subcategory { | ||
| display: none; | ||
| } | ||
| .subcategories { | ||
| display: none; | ||
| .subcategory { | ||
| .subcategory-image-placeholder { | ||
| margin-right: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Subcategory theming | ||
| #header-list-area { | ||
| .custom-category-boxes { | ||
| grid-template-columns: 1fr 1fr 1fr; | ||
| margin-top: 32px; | ||
| .category-box-inner { | ||
| column-gap: 24px; | ||
| .category-logo { | ||
| height: 80px; | ||
| width: 80px; | ||
| } | ||
| } | ||
| .category-box-heading { | ||
| margin-bottom: 4px; | ||
| } | ||
| h3 { | ||
| font-size: 1em; | ||
| } | ||
| .description { | ||
| display: none; | ||
| } | ||
| } | ||
| .custom-category-boxes-container + .category-boxes { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 1250px) { | ||
| body.category, | ||
| #header-list-area { | ||
| .custom-category-boxes { | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 960px) { | ||
| .custom-category-boxes { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 800px) { | ||
| body.category, | ||
| body.navigation-categories { | ||
| .custom-category-boxes { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } | ||
| #header-list-area { | ||
| .custom-category-boxes { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.