mirror of
https://github.com/woocommerce/storefront.git
synced 2025-08-21 04:11:59 +08:00
641 lines
11 KiB
SCSS
641 lines
11 KiB
SCSS
// Bourbon
|
|
// See: https://www.bourbon.io/docs/latest/
|
|
@import 'bourbon';
|
|
|
|
// Susy
|
|
// Susy grid system. See: http://oddbird.net/susy/docs/
|
|
@import 'node_modules/susy/sass/susy';
|
|
|
|
// Vendors
|
|
// External libraries and frameworks.
|
|
@import '../sass/vendors/modular-scale';
|
|
|
|
// Utilities
|
|
// Sass tools and helpers used across the project.
|
|
@import '../sass/utils/variables';
|
|
@import '../sass/utils/mixins';
|
|
|
|
/**
|
|
* Front-end only styles
|
|
*/
|
|
.hentry .entry-content {
|
|
// Global
|
|
@media ( min-width: $container-width ) {
|
|
.storefront-align-wide.page-template-template-fullwidth-php &,
|
|
.storefront-align-wide.storefront-full-width-content & {
|
|
.alignfull,
|
|
.alignwide {
|
|
width: auto;
|
|
max-width: 1000%;
|
|
padding-left: ms(2);
|
|
padding-right: ms(2);
|
|
clear: both;
|
|
}
|
|
|
|
.alignfull {
|
|
margin-left: calc(50% - 50vw);
|
|
margin-right: calc(50% - 50vw);
|
|
}
|
|
|
|
.alignwide {
|
|
margin-left: calc(25% - 25vw);
|
|
margin-right: calc(25% - 25vw);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Image
|
|
.wp-block-image {
|
|
@media ( min-width: $container-width ) {
|
|
.storefront-align-wide.page-template-template-fullwidth-php &,
|
|
.storefront-align-wide.storefront-full-width-content & {
|
|
&.alignfull,
|
|
&.alignwide {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wp-block-cover-image,
|
|
.wp-block-cover {
|
|
@media ( min-width: $container-width ) {
|
|
.storefront-align-wide.page-template-template-fullwidth-php &,
|
|
.storefront-align-wide.storefront-full-width-content & {
|
|
&.alignfull,
|
|
&.alignwide {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Front-end + editor styles
|
|
*/
|
|
.hentry .entry-content,
|
|
.editor-styles-wrapper {
|
|
// Typography
|
|
.has-small-font-size {
|
|
font-size: ms(-1);
|
|
}
|
|
|
|
.has-medium-font-size {
|
|
font-size: ms(2);
|
|
}
|
|
|
|
.has-large-font-size {
|
|
font-size: ms(3);
|
|
}
|
|
|
|
.has-huge-font-size {
|
|
font-size: ms(4);
|
|
}
|
|
|
|
// Audio
|
|
.wp-block-audio {
|
|
margin-bottom: ms(2);
|
|
width: 100%;
|
|
|
|
audio {
|
|
width: 100%;
|
|
}
|
|
|
|
&.alignleft audio,
|
|
&.alignright audio {
|
|
max-width: (0.5 * $handheld);
|
|
}
|
|
|
|
&.aligncenter {
|
|
margin: 0 auto ms(2);
|
|
max-width: span(6);
|
|
}
|
|
}
|
|
|
|
// Video
|
|
.wp-block-video {
|
|
margin-bottom: ms(2);
|
|
|
|
video {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Button
|
|
.wp-block-button {
|
|
margin-bottom: ms(2);
|
|
|
|
.wp-block-button__link {
|
|
font-size: ms(1);
|
|
line-height: 1.618;
|
|
border: 0;
|
|
cursor: pointer;
|
|
padding: ms(-2) ms(2);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
text-shadow: none;
|
|
display: inline-block;
|
|
-webkit-appearance: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&:not( .is-style-squared ) {
|
|
.wp-block-button__link {
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
&.is-style-outline .wp-block-button__link,
|
|
&.is-style-outline .wp-block-button__link:focus,
|
|
&.is-style-outline .wp-block-button__link:active,
|
|
&.is-style-outline .wp-block-button__link:hover {
|
|
background: transparent;
|
|
border: 2px solid currentColor;
|
|
}
|
|
}
|
|
|
|
// Latest posts, categories, archives
|
|
.wp-block-archives,
|
|
.wp-block-categories,
|
|
.wp-block-latest-posts {
|
|
margin: 0 0 ms(2);
|
|
list-style: none;
|
|
}
|
|
|
|
.wp-block-latest-posts {
|
|
&__post-date {
|
|
font-size: ms(-1);
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
}
|
|
|
|
&.has-dates {
|
|
li {
|
|
margin: 0 0 1em;
|
|
}
|
|
}
|
|
|
|
&.is-grid {
|
|
li {
|
|
margin: 0 ms(1) 0 0;
|
|
}
|
|
|
|
&.has-dates {
|
|
li {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width:600px) {
|
|
@for $i from 2 through 6 {
|
|
&.columns-#{$i} li {
|
|
margin-right: gutter(12);
|
|
width: span(12 / $i);
|
|
|
|
&:nth-of-type( #{$i}n ) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
body:not( .page-template-template-fullwidth-php ):not( .storefront-full-width-content ) & {
|
|
@for $i from 2 through 6 {
|
|
&.columns-#{$i} li {
|
|
margin-right: gutter(9);
|
|
width: span(9 / $i);
|
|
|
|
&:nth-of-type( #{$i}n ) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Paragraphs
|
|
p {
|
|
&.has-drop-cap {
|
|
&:not( :focus )::first-letter {
|
|
margin: 0.15em ms(-4) 0 0;
|
|
font-size: ms(7);
|
|
font-weight: 300;
|
|
line-height: 0.618;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pullquote
|
|
.wp-block-pullquote {
|
|
margin: 0 0 ms(2);
|
|
|
|
blockquote {
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: ms(1);
|
|
font-size: ms(3);
|
|
line-height: 1.618;
|
|
}
|
|
}
|
|
|
|
// Blockquote
|
|
.wp-block-quote {
|
|
margin: 0 0 ms(2);
|
|
padding: 0 0 0 1em;
|
|
|
|
&.is-large,
|
|
&.is-style-large {
|
|
margin: 0 0 ms(2);
|
|
padding: 0;
|
|
border: 0;
|
|
|
|
p {
|
|
font-size: ms(2);
|
|
line-height: 1.618;
|
|
}
|
|
}
|
|
|
|
footer,
|
|
cite,
|
|
&__citation {
|
|
font-size: ms(1);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
// Image
|
|
.wp-block-image {
|
|
margin-bottom: ms(2);
|
|
|
|
.alignleft {
|
|
margin-right: ms(1);
|
|
}
|
|
|
|
.alignright {
|
|
margin-left: ms(1);
|
|
}
|
|
|
|
figcaption {
|
|
margin: 0;
|
|
padding: ms(-1) 0;
|
|
font-size: ms(-1);
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.wp-block-cover {
|
|
flex-flow: row wrap;
|
|
min-height: 350px;
|
|
|
|
// < 5.2 styling
|
|
> .wp-block-cover-text {
|
|
font-size: ms(3);
|
|
font-weight: 300;
|
|
line-height: 1.618;
|
|
padding: ms(1);
|
|
width: calc(100vw - #{ms(1)});
|
|
max-width: calc(100vw - #{ms(1)});
|
|
color: #fff;
|
|
z-index: 1;
|
|
text-align: center;
|
|
|
|
@media ( min-width: $handheld ) {
|
|
padding: ms(1);
|
|
font-size: ms(4);
|
|
width: calc(8 * (100vw / 12 ));
|
|
max-width: calc(8 * (100vw / 12 ));
|
|
}
|
|
|
|
@media ( min-width: $desktop ) {
|
|
font-size: ms(4);
|
|
width: calc(6 * (100vw / 12 ));
|
|
max-width: calc(6 * (100vw / 12 ));
|
|
}
|
|
}
|
|
|
|
// > 5.2 styling
|
|
.wp-block-cover__inner-container {
|
|
padding: ms(5) ms(1);
|
|
width: calc(100vw - #{ms(1)});
|
|
max-width: calc(100vw - #{ms(1)});
|
|
color: $color-body;
|
|
|
|
*:nth-last-child( -n+1 ) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
padding: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
h1 {
|
|
font-size: ms(6);
|
|
margin-bottom: ms(-6);
|
|
}
|
|
|
|
h2 {
|
|
font-size: ms(5);
|
|
margin-bottom: ms(-5);
|
|
}
|
|
|
|
h3 {
|
|
font-size: ms(4);
|
|
margin-bottom: ms(-4);
|
|
}
|
|
|
|
h4 {
|
|
font-size: ms(3);
|
|
margin-bottom: ms(-3);
|
|
}
|
|
|
|
h5 {
|
|
font-size: ms(2);
|
|
margin-bottom: ms(-2);
|
|
}
|
|
|
|
h6 {
|
|
font-size: ms(2);
|
|
margin-bottom: ms(-2);
|
|
}
|
|
|
|
p {
|
|
&:not( .has-small-font-size ),
|
|
&:not( .has-medium-font-size ),
|
|
&:not( .has-large-font-size ),
|
|
&:not( .has-huge-font-size ) {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: $handheld ) {
|
|
width: calc(8 * (100vw / 12 ));
|
|
max-width: calc(8 * (100vw / 12 ));
|
|
}
|
|
|
|
@media ( min-width: $desktop ) {
|
|
width: calc(6 * (100vw / 12 ));
|
|
max-width: calc(6 * (100vw / 12 ));
|
|
padding-top: ms(9);
|
|
padding-bottom: ms(9);
|
|
}
|
|
}
|
|
|
|
@media ( min-width: $container-width ) {
|
|
.storefront-align-wide.page-template-template-fullwidth-php &,
|
|
.storefront-align-wide.storefront-full-width-content & {
|
|
&.alignfull,
|
|
&.alignwide {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Galleries
|
|
.wp-block-gallery {
|
|
margin: 0 0 ms(2);
|
|
|
|
.blocks-gallery-image,
|
|
.blocks-gallery-item {
|
|
width: span(6);
|
|
margin: 0 gutter(12) gutter(12) 0;
|
|
flex-grow: 0;
|
|
|
|
&:nth-of-type( even ) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: ms(1);
|
|
padding: ms(4) ms(2) ms(-2);
|
|
}
|
|
}
|
|
|
|
@media (min-width:600px) {
|
|
.blocks-gallery-image,
|
|
.blocks-gallery-item {
|
|
margin: 0 gutter(12) gutter(12) 0;
|
|
}
|
|
|
|
@for $i from 2 through 8 {
|
|
&.columns-#{$i} .blocks-gallery-image,
|
|
&.columns-#{$i} .blocks-gallery-item {
|
|
margin-right: gutter(12);
|
|
width: calc(( 100% - #{gutter(12)} * #{$i - 1} ) / #{$i});
|
|
|
|
&:nth-of-type( #{$i}n ) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
body:not( .page-template-template-fullwidth-php ):not( .storefront-full-width-content ) & {
|
|
.blocks-gallery-image,
|
|
.blocks-gallery-item {
|
|
margin-bottom: gutter(9);
|
|
margin-right: gutter(9);
|
|
}
|
|
|
|
@for $i from 2 through 8 {
|
|
&.columns-#{$i} .blocks-gallery-image,
|
|
&.columns-#{$i} .blocks-gallery-item {
|
|
margin-right: gutter(9);
|
|
width: calc(( 100% - #{gutter(9)} * #{$i - 1} ) / #{$i});
|
|
|
|
&:nth-of-type( #{$i}n ) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Separator
|
|
.wp-block-separator {
|
|
border: 0;
|
|
margin: 0 auto ms(2);
|
|
}
|
|
|
|
// Twitter Embed
|
|
.wp-block-embed-twitter {
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Table
|
|
.wp-block-table {
|
|
border-collapse: separate;
|
|
|
|
td,
|
|
th {
|
|
border: 0;
|
|
padding: 1em ms(2);
|
|
word-break: normal;
|
|
}
|
|
|
|
thead {
|
|
th {
|
|
padding: ms(2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// File
|
|
.wp-block-file {
|
|
margin-bottom: ms(2);
|
|
|
|
.wp-block-file__button {
|
|
font-size: ms(-1);
|
|
line-height: 1.618;
|
|
border: 0;
|
|
cursor: pointer;
|
|
padding: ms(-2) ms(2);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
text-shadow: none;
|
|
display: inline-block;
|
|
-webkit-appearance: none;
|
|
border-radius: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Code
|
|
.wp-block-code,
|
|
.wp-block-preformatted pre {
|
|
font-family: 'Courier 10 Pitch', Courier, monospace;
|
|
font-size: ms(1);
|
|
}
|
|
|
|
.wp-block-code {
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: ms(3);
|
|
}
|
|
|
|
// Columns
|
|
.wp-block-columns {
|
|
.wp-block-column {
|
|
margin-bottom: ms(1);
|
|
|
|
@media (min-width:600px) {
|
|
padding-left: 0;
|
|
padding-right: gutter(12);
|
|
margin-left: 0;
|
|
|
|
&:not( :last-child ) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:nth-of-type( even ) {
|
|
padding-right: 0;
|
|
}
|
|
|
|
body:not( .page-template-template-fullwidth-php ):not( .storefront-full-width-content ) & {
|
|
padding-right: gutter(9);
|
|
|
|
&:nth-of-type( even ) {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width:782px) {
|
|
@for $i from 2 through 6 {
|
|
&.has-#{$i}-columns {
|
|
.wp-block-column {
|
|
&:nth-of-type( #{$i}n ) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wp-block-column {
|
|
padding-right: 0;
|
|
|
|
&:not( :first-child ) {
|
|
padding-left: 0;
|
|
}
|
|
|
|
&:not( :last-child ) {
|
|
padding-right: 0;
|
|
margin-right: gutter(12);
|
|
}
|
|
|
|
body:not( .page-template-template-fullwidth-php ):not( .storefront-full-width-content ) & {
|
|
padding-right: 0;
|
|
|
|
&:not( :last-child ) {
|
|
margin-right: gutter(9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Latest Comments
|
|
.wp-block-latest-comments {
|
|
margin: 0 0 ms(2);
|
|
|
|
&__comment-avatar {
|
|
margin-top: ms(-4);
|
|
}
|
|
|
|
&__comment {
|
|
font-size: ms(1);
|
|
margin: 0 0 ms(1);
|
|
}
|
|
|
|
&__comment-date {
|
|
font-size: ms(-1);
|
|
}
|
|
|
|
&__comment-excerpt {
|
|
p {
|
|
margin: ms(-3) 0 ms(1);
|
|
font-size: 1em;
|
|
line-height: 1.618;
|
|
}
|
|
}
|
|
|
|
&.has-avatars {
|
|
.wp-block-latest-comments__comment {
|
|
.wp-block-latest-comments__comment-excerpt,
|
|
.wp-block-latest-comments__comment-meta {
|
|
margin-left: ms(6);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not( .has-avatars ):not( .has-dates ):not( .has-excerpts ) {
|
|
.wp-block-latest-comments__comment {
|
|
margin: 0;
|
|
line-height: 1.618;
|
|
}
|
|
}
|
|
|
|
br {
|
|
display: inline;
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
