vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor galleria css

pull/310/head
mertsincan 2020-04-26 04:37:44 +03:00
parent 7114679ca7
commit cc503a515c
1 changed files with 63 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/galleria/Galleria.vue
View File

@ -183,155 +183,134 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
width: 100%;
height: 100%;
} }
.p-galleria-preview-container { .p-galleria-preview-container {
position: relative; position: relative;
display: flex; display: flex;
width: 100%;
height: 100%;
} }
.p-galleria-preview-container .p-galleria-preview-nav-button {
height: 3em; .p-galleria-preview-nav-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -1.5em; margin-top: -.5em;
z-index: 1;
} }
.p-galleria-preview-prev { .p-galleria-preview-prev {
left: .5em; left: 0;
} }
.p-galleria-preview-next { .p-galleria-preview-next {
right: .5em; right: 0;
}
.p-galleria-preview-prev span,
.p-galleria-preview-next span {
font-size: 2em;
} }
.p-galleria-preview-items-content { .p-galleria-preview-items-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%;
width: 100%;
} }
.p-galleria-preview-nav-onhover .p-galleria-preview-content .p-galleria-preview-nav-button {
.p-galleria-preview-nav-onhover .p-galleria-preview-nav-button {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;
} }
.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button { .p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button {
pointer-events: all; pointer-events: all;
opacity: 1; opacity: 1;
} }
.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button.p-disabled { .p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button.p-disabled {
pointer-events: none; pointer-events: none;
opacity: .5;
} }
.p-galleria-preview-caption { .p-galleria-preview-caption {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 1em;
width: 100%; width: 100%;
} }
.p-galleria .p-galleria-indicator-container {
.p-galleria-indicator-container {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: .2em;
} }
/* Thumbnails */ /* Thumbnails */
.p-galleria-thumbnail-content { .p-galleria-thumbnail-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap;
overflow: auto; overflow: auto;
flex-shrink: 0; flex-shrink: 0;
} }
.p-galleria-thumbnail-prev, .p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next { .p-galleria-thumbnail-next {
align-self: center; align-self: center;
text-align: center; flex: 0 0 auto;
flex-grow: 0;
flex-shrink: 0;
width: 2.5em;
height: 2.5em;
} }
.p-galleria-thumbnail-prev span, .p-galleria-thumbnail-prev span,
.p-galleria-thumbnail-next span { .p-galleria-thumbnail-next span {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.p-galleria-thumbnail-container { .p-galleria-thumbnail-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 .1em;
} }
.p-galleria-thumbnail-items-content { .p-galleria-thumbnail-items-content {
overflow: hidden; overflow: hidden;
width: 100%;
} }
.p-galleria-thumbnail-items-container { .p-galleria-thumbnail-items-container {
display: flex; display: flex;
flex-wrap: nowrap;
flex-direction: row;
} }
.p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
width: 100%; .p-galleria-thumbnail-item {
box-sizing: border-box;
overflow: auto; overflow: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.p-galleria-thumbnail-item .p-galleria-thumbnail-item-content {
margin: .3em; .p-galleria-thumbnail-item-content {
cursor: pointer; cursor: pointer;
} }
/* Indicators */ /* Indicators */
.p-galleria-indicator-onpreview .p-galleria-indicator-container { .p-galleria-indicator-onpreview .p-galleria-indicator-container {
position: absolute; position: absolute;
z-index: 1;
} }
.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container { .p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container {
top: 1em; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
} }
.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container { .p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container {
right: 1em; right: 0;
top: 0; top: 0;
height: 100%; height: 100%;
} }
.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container { .p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container {
bottom: 1em; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
} }
.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container { .p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container {
left: 1em; left: 0;
top: 0; top: 0;
height: 100%; 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 */ /* Positions */
/* Thumbnails */ /* Thumbnails */
@ -340,43 +319,52 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
.p-galleria-thumbnails-right .p-galleria-content .p-galleria-preview-content { .p-galleria-thumbnails-left .p-galleria-preview-content,
.p-galleria-thumbnails-right .p-galleria-preview-content {
flex-direction: row; flex-direction: row;
} }
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
.p-galleria-thumbnails-top .p-galleria-content .p-galleria-preview-content { .p-galleria-thumbnails-left .p-galleria-preview-content,
.p-galleria-thumbnails-top .p-galleria-preview-content {
order: 2; order: 2;
} }
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-content,
.p-galleria-thumbnails-top .p-galleria-content .p-galleria-thumbnail-content { .p-galleria-thumbnails-left .p-galleria-thumbnail-content,
.p-galleria-thumbnails-top .p-galleria-thumbnail-content {
order: 1; order: 1;
} }
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-container { .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
flex-direction: column; 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 { .p-galleria-thumbnails-left .p-galleria-thumbnail-items-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items-container {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }
/* Indicators */ /* Indicators */
.p-galleria-indicators-left .p-galleria-preview-content, .p-galleria-indicators-left .p-galleria-preview-content,
.p-galleria-indicators-right .p-galleria-preview-content { .p-galleria-indicators-right .p-galleria-preview-content {
flex-direction: row; flex-direction: row;
align-items: center; 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 { .p-galleria-indicators-left .p-galleria-preview-container,
.p-galleria-indicators-top .p-galleria-preview-container {
order: 2; 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 { .p-galleria-indicators-left .p-galleria-indicator-container,
.p-galleria-indicators-top .p-galleria-indicator-container {
order: 1; 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 { .p-galleria-indicators-left .p-galleria-indicator-container,
.p-galleria-indicators-right .p-galleria-indicator-container {
flex-direction: column; flex-direction: column;
} }
@ -387,31 +375,17 @@ export default {
justify-content: center; justify-content: center;
position: fixed; position: fixed;
} }
.p-galleria-mask .p-galleria {
max-height: 90%;
max-width: calc(90% - 8em);
}
.p-galleria-close { .p-galleria-close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: .5em;
} }
.p-galleria-close span {
font-size: 3em; .p-galleria-mask .p-galleria-preview-nav-button {
}
.p-galleria-mask .p-galleria .p-galleria-preview-nav-button {
position: fixed; position: fixed;
top: 50%; top: 50%;
height: 20em; margin-top: -.5em;
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 */ /* Keyboard Support */