Current Path : /storage/v11800/affypharma/public_html/wp-content/plugins/caxton/assets/scss/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
Current File : /storage/v11800/affypharma/public_html/wp-content/plugins/caxton/assets/scss/_caxton-grid.scss |
.caxton-grid {
display: flex;
flex-wrap: wrap;
margin: 1% -1%;
.grid-item {
border-color: inherit;
box-sizing: border-box;
width: 31.33%;
margin: 1%;
padding: 0;
&.ba {
padding: 2%;
}
> a {
display: block;
}
}
h3.grid-title {
padding: 0 7%;
margin: 0;
font-size: 18px;
text-align: center;
display: none;
}
.grid-image {
position: relative;
padding-top: 100%;
background: center/cover;
overflow: hidden;
margin: 0;
h3.grid-title,
&:before {
content: '';
position: absolute;
display: block;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
opacity: .7;
}
&:before {
opacity: .2;
}
h3.grid-title {
margin: 0;
color: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), 0 0 3px #000;
}
&:before {
background: rgba(0, 0, 0, .5);
height: 9999px;
}
&:hover {
h3.grid-title,
&:before {
opacity: 1;
}
}
}
&.caxton-circle-images {
.grid-image {
border-radius: 999px;
overflow: hidden;
z-index: 7;
}
.ba {
border-radius: 999px;
}
}
&.caxton-title-below-image {
.grid-image {
margin: 0 0 1em;
}
h3.grid-title {
display: block;
}
.grid-image {
h3.grid-title,
&:before {
display: none;
}
}
.ba {
border-radius: 0;
}
}
&.caxton-rectangle-images {
.grid-image {
padding-top: 56.25%;
}
}
time {
text-align: center;
display: block;
margin: .5em 0 .2em;
}
.grid-meta {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.author, .comments {
margin: 0;
}
.fa:before {
margin-right: 7px;
}
}
}
.caxton-columns {
display: grid;
grid-auto-flow: dense;
grid-gap: 16px;
&.grid-gap-none {
grid-gap: 0;
}
&.grid-gap-tight {
grid-gap: 8px;
}
&.grid-gap-wide {
grid-gap: 25px;
}
&.grid-gap-wider {
grid-gap: 32px;
}
@for $i from 1 to 6 {
&.caxton-#{$i}-columns {
grid-template-columns: repeat( $i , 1fr);
}
}
&.layout-caxton-col {
overflow: hidden;
}
.layout-caxton-col {
overflow: hidden;
}
@for $i from 1 through 6 {
.caxton-col-#{ $i } {
grid-column: #{ $i };
}
}
}
.caxton-section-block {
display: flex;
flex-direction: column;
height: 100%;
}
@media (max-width:1024px) AND (min-width:768px) {
.caxton-columns:not(.caxton-responsive-phone):not(caxton-responsive-never) {
grid-template-columns: 100%;
.layout-caxton-col {
grid-column: 1;
}
}
.wp-block-caxton-section:not([data-tablet-css*='grid-area']) {
grid-area: span 1 / span 12 / auto / auto !important;
}
}
@media (max-width:767px) {
.caxton-columns:not(caxton-responsive-never) {
grid-template-columns: 100%;
.layout-caxton-col {
grid-column: 1;
}
}
.wp-block-caxton-section:not([data-mobile-css*=grid-area]) {
grid-area: span 1 / span 12 / auto / auto !important;
}
.caxton-grid .grid-item {
width: 100% !important;
}
}