File: /www/wwwroot/www.cytocare.cn/wp-content/themes/peakshops/assets/sass/_gutenberg.scss
/* Gutenberg */
.has-thb-accent-background-color {
background-color: $accent;
}
.has-thb-accent-color {
color: $accent;
p {
color: $accent;
}
}
.wp-block-pullquote {
padding: 0;
}
.wp-block-button {
margin-bottom: 16px;
.wp-block-button__link {
&.has-thb-accent-background-color {
background-color: $accent;
}
&.has-thb-accent-color {
color: $accent;
p {
color: $accent;
}
}
}
&.is-style-outline {
.wp-block-button__link {
background: transparent !important;
}
}
}
// Alignment.
.alignwide {
position: relative;
@include min-break($break-medium) {
margin-left: -30px;
margin-right: 30px;
max-width: none;
width: calc(100% + 60px);
}
@include min-break(1310px) {
margin-left: -40px;
margin-right: 40px;
width: calc(100% + 80px);
}
}
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
&:first-child {
margin-top: 0;
}
.post-detail-style1 & {
position: relative;
width: 100vw;
@include min-break($break-medium) {
max-width: 100vw;
margin-left: calc(50% - 43vw);
width: calc(50% + 43vw);
}
}
}
.wp-block-image {
figcaption {
display: block;
margin: 0;
font-weight: 400;
font-size: 13px;
line-height: 1;
color: $black;
padding: 13px 0;
border-bottom: 1px solid $border;
}
.mfp-image {
display: block;
}
}
.post-detail .wp-block-gallery {
margin-bottom: 1rem;
.blocks-gallery-image,
.blocks-gallery-item {
margin-bottom: 1rem;
}
}
.wp-block-media-text {
margin-bottom: 1rem;
}
.wp-block-latest-comments {
margin-left: 0;
img {
float: left;
margin-right: 10px;
}
}
.has-medium-font-size {
font-size: 1.2em;
}
.has-large-font-size {
font-size: 2em;
}
.has-huge-font-size {
font-size: 3em;
}
.wp-block-button {
&:not(.is-style-outline) {
.wp-block-button__link:not(.has-text-color) {
color: #fff;
}
}
}
.wp-block-cover {
color: #fff;
margin-bottom: 25px;
}
.wp-block-cover, .wp-block-cover-image {
height: auto;
}
.wp-block-categories {
list-style-position: inside;
}
// Responsive Embeds.
.wp-block-embed {
// Don't allow iframe to overflow it's container.
iframe {
max-width: 100%;
}
.wp-block-embed__wrapper {
position: relative;
background: $black;
}
&.wp-has-aspect-ratio {
.wp-block-embed__wrapper::before {
content: "";
display: block;
padding-top: 50%; // Default to 2:1 aspect ratio.
}
iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
}
.wp-embed-responsive {
.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
padding-top: 42.85%; // 9 / 21 * 100
}
.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
padding-top: 50%; // 9 / 18 * 100
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
padding-top: 56.25%; // 9 / 16 * 100
}
.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
padding-top: 75%; // 3 / 4 * 100
}
.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
padding-top: 100%; // 1 / 1 * 100
}
.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
padding-top: 66.66%; // 6 / 9 * 100
}
.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
padding-top: 200%; // 2 / 1 * 100
}
}
}
// Block Reviews
.wc-block-components-review-list-item__rating>.wc-block-components-review-list-item__rating__stars {
@extend .star-rating;
font-size: 16px;
line-height: 1;
height: 16px;
vertical-align: middle;
max-width: 75px;
}