31df4716c8
Remove #primary Remove #primary, take 2 Change primary layout module to CSS grid. Remove ::before / ::after based clearfixes. When using flex and grid, pseudo-elements are considered flex/grid elements and cause unexpected behavior. Clearfix is a tool to resolve clearing when using float-based layouts. Modern flex/grid-based layouts do not need them. Main menu: Use flex as layout module. Main menu cleanup. Comments, Posts, and Post Navigation: Use flex for layout. Automatic RTL. Remove errant test data. - Fixed skip to content link to point to main content (#primary). - Changed ID for <main> to #primary to preserve original separation between main and sidebar (#secondary). - Removed superfluous ID reference to #secondary in CSS. - Cleaned up whitespace triggering Travis errors. Fix wpcs issues Cleaning the rebase Compile CSS Remove primary div from WooCommerce too grid-template-columns property doesn't support negative values
86 lines
1.1 KiB
SCSS
86 lines
1.1 KiB
SCSS
.single-product {
|
|
|
|
div.product {
|
|
position: relative;
|
|
|
|
.woocommerce-product-gallery {
|
|
position: relative;
|
|
float: left;
|
|
|
|
.woocommerce-product-gallery__trigger {
|
|
position: absolute;
|
|
top: 2em;
|
|
right: 1em;
|
|
display: block;
|
|
z-index: 99;
|
|
}
|
|
|
|
.flex-viewport {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.flex-control-thumbs {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
float: left;
|
|
|
|
img {
|
|
opacity: 0.5;
|
|
|
|
&.flex-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
|
|
img {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 2 through 5 {
|
|
|
|
&.woocommerce-product-gallery--columns-#{$i} {
|
|
|
|
.flex-control-thumbs {
|
|
|
|
li {
|
|
|
|
@include column-width($i);
|
|
|
|
&:nth-child(#{$i}n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:nth-child(#{$i}n+1) {
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.stock {
|
|
|
|
&:empty::before {
|
|
display: none;
|
|
}
|
|
|
|
&.in-stock {
|
|
color: $woocommerce__color-success;
|
|
}
|
|
|
|
&.out-of-stock {
|
|
color: $woocommerce__color-error;
|
|
}
|
|
}
|