Changes to directory structure
This commit is contained in:
Jeremy Rangel
188
includes/blocks/lcp-gallery/src/style.scss
Normal file
188
includes/blocks/lcp-gallery/src/style.scss
Normal file
@ -0,0 +1,188 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-gallery {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.lcp-inline-gallery {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lcp-inline-gallery .lcp-gallery-item .img-fluid {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
.lcp-gallery .gallery-item,.lcp-gallery .gallery-item > img {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.lcp-gallery .gallery-item.last:after {content:"";width:100%;height:100%;background:red;position:absolute;top:0;left:0;opacity:.5}
|
||||
|
||||
// Thumbnails
|
||||
.lg-thumbnail-grayscale .lg-thumb-item:not(.active) img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-active-grayscale .lg-thumb-item.active img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-blur .lg-thumb-item:not(.active) img {filter: blur(1px);}
|
||||
.lg-thumbnail-active-blur .lg-thumb-item.active img {filter: blur(1px);}
|
||||
|
||||
.lg-outer {background:none}
|
||||
// Gallery More Images
|
||||
.lcp-display-none {display:none}
|
||||
.gallery-item {position:relative}
|
||||
span.gallery-more {position: absolute;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
color: white;}
|
||||
|
||||
/* Aspect Ratio */
|
||||
.lcp-gallery.aspect-1-1 .lcp-gallery-item {aspect-ratio:1/1}
|
||||
.lcp-gallery.aspect-2-3 .lcp-gallery-item {aspect-ratio:2/3}
|
||||
.lcp-gallery.aspect-3-4 .lcp-gallery-item {aspect-ratio:3/4}
|
||||
.lcp-gallery.aspect-4-5 .lcp-gallery-item {aspect-ratio:4/5}
|
||||
.lcp-gallery.aspect-5-7 .lcp-gallery-item {aspect-ratio:5/7}
|
||||
.lcp-gallery.aspect-3-2 .lcp-gallery-item {aspect-ratio:3/2}
|
||||
.lcp-gallery.aspect-16-9 .lcp-gallery-item {aspect-ratio:16/9}
|
||||
|
||||
.gallery-item img {object-fit:cover}
|
||||
/* Container Styles */
|
||||
|
||||
/* Grid Styles */
|
||||
.lcp-gallery.grid {
|
||||
display:grid
|
||||
}
|
||||
.lcp-gallery.grid .gallery-item img{
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
|
||||
}
|
||||
.lcp-gallery.grid {
|
||||
gap:1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr
|
||||
}
|
||||
@media only screen and (min-width: 1167px) {
|
||||
.lcp-gallery.grid.large-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens (min-width: 768px and max-width: 1166px) */
|
||||
@media only screen and (min-width: 768px) and (max-width: 1166px) {
|
||||
.lcp-gallery.grid.medium-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens (max-width: 767px) */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.lcp-gallery.grid.small-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.grid > a > img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
}
|
||||
|
||||
.lcp-gallery.grid>a>img {
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
display: block; /* Add this */
|
||||
}
|
||||
Reference in New Issue
Block a user