-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed #1105 - New Component: Galleria
- Loading branch information
1 parent
aae8b0d
commit 83c7049
Showing
4 changed files
with
1,186 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,244 @@ | ||
| .p-galleria-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* Preview */ | ||
| .p-galleria-preview-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| position: relative; | ||
| } | ||
|
|
||
| .p-galleria-preview-container { | ||
| position: relative; | ||
| } | ||
|
|
||
| .p-galleria-preview-container .p-galleria-preview-nav-button { | ||
| height: 3em; | ||
| position: absolute; | ||
| top: 50%; | ||
| margin-top: -1.5em; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .p-galleria-preview-prev { | ||
| left: .5em; | ||
| } | ||
|
|
||
| .p-galleria-preview-next { | ||
| right: .5em; | ||
| } | ||
|
|
||
| .p-galleria-preview-prev span, | ||
| .p-galleria-preview-next span { | ||
| font-size: 2em; | ||
| } | ||
|
|
||
| .p-galleria-preview-nav-onhover .p-galleria-preview-content .p-galleria-preview-nav-button { | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| transition: opacity .2s ease-in-out; | ||
| } | ||
|
|
||
| .p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button { | ||
| pointer-events: all; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button.p-disabled { | ||
| pointer-events: none; | ||
| opacity: .5; | ||
| } | ||
|
|
||
| .p-galleria-preview-caption { | ||
| position: absolute; | ||
| bottom: 0; | ||
| padding: 1em; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .p-galleria-indicator-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: .2em; | ||
| } | ||
|
|
||
| /* Thumbnails */ | ||
| .p-galleria-thumbnail-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: nowrap; | ||
| overflow: auto; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-prev, | ||
| .p-galleria-thumbnail-next { | ||
| align-self: center; | ||
| text-align: center; | ||
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
| width: 2.5em; | ||
| height: 2.5em; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-prev span, | ||
| .p-galleria-thumbnail-next span { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| padding: 0 .1em; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-items-content { | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-items-container { | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item { | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| overflow: auto; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content { | ||
| margin: .3em; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* Indicators */ | ||
| .p-galleria-indicator-onpreview .p-galleria-indicator-container { | ||
| position: absolute; | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container { | ||
| top: 1em; | ||
| width: 100%; | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container { | ||
| right: 1em; | ||
| height: 100%; | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container { | ||
| bottom: 1em; | ||
| width: 100%; | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container { | ||
| left: 1em; | ||
| height: 100%; | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption, | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption { | ||
| width: calc(100% - 4em); | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption, | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-next { | ||
| right: 4em; | ||
| } | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption, | ||
| .p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-prev { | ||
| left: 4em; | ||
| } | ||
|
|
||
| /* Positions */ | ||
| /* Thumbnails */ | ||
| .p-galleria-thumbnails-left .p-galleria-content, | ||
| .p-galleria-thumbnails-right .p-galleria-content { | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
| .p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content, | ||
| .p-galleria-thumbnails-top .p-galleria-content .p-galleria-preview-content { | ||
| order: 2; | ||
| } | ||
| .p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-content, | ||
| .p-galleria-thumbnails-top .p-galleria-content .p-galleria-thumbnail-content { | ||
| order: 1; | ||
| } | ||
| .p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-container, | ||
| .p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-container { | ||
| flex-direction: column; | ||
| } | ||
| .p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-items-container, | ||
| .p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-items-container { | ||
| flex-direction: column; | ||
| height: 100%; | ||
| } | ||
| /* Indicators */ | ||
| .p-galleria-indicators-left .p-galleria-preview-content, | ||
| .p-galleria-indicators-right .p-galleria-preview-content { | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
| .p-galleria-indicators-left .p-galleria-preview-content .p-galleria-preview-container, | ||
| .p-galleria-indicators-top .p-galleria-preview-content .p-galleria-preview-container { | ||
| order: 2; | ||
| } | ||
| .p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container, | ||
| .p-galleria-indicators-top .p-galleria-preview-content .p-galleria-indicator-container { | ||
| order: 1; | ||
| } | ||
| .p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container, | ||
| .p-galleria-indicators-right .p-galleria-preview-content .p-galleria-indicator-container { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* FullScreen */ | ||
| .p-galleria-mask { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| position: fixed; | ||
| } | ||
| .p-galleria-mask .p-galleria { | ||
| max-height: 90%; | ||
| max-width: calc(90% - 8em); | ||
| } | ||
| .p-galleria-close { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| margin: .5em; | ||
| } | ||
| .p-galleria-close span { | ||
| font-size: 3em; | ||
| } | ||
| .p-galleria-mask .p-galleria .p-galleria-preview-nav-button { | ||
| position: fixed; | ||
| top: 50%; | ||
| height: 20em; | ||
| width: 4em; | ||
| margin-top: -10em; | ||
| } | ||
| .p-galleria-mask .p-galleria .p-galleria-preview-prev { | ||
| left: 0; | ||
| } | ||
| .p-galleria-mask .p-galleria .p-galleria-preview-next { | ||
| right: 0; | ||
| } | ||
|
|
||
| /* Keyboard Support */ | ||
| .p-items-hidden .p-galleria-thumbnail-item { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { | ||
| visibility: visible; | ||
| } |
Oops, something went wrong.