Last active
April 5, 2019 12:36
-
-
Save artlipsky/aaa19687bbdadab2e70b6510b4708424 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------Default Styles---------------------------*/ | |
.woocommerce div.product div.images.woocommerce-product-gallery { | |
width: 100%; | |
} | |
.flex-viewport { | |
min-width: 0; | |
} | |
.flex-viewport, .woocommerce div.product div.images .flex-control-thumbs li img { | |
transition: all ease 0.2s; | |
border: 2px solid white; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { | |
background: transparent; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:before { | |
border: 2px solid #d3ced2; | |
transition: all ease 0.2s; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:after { | |
background: #d3ced2; | |
transition: all ease 0.2s; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover:before { | |
border: 2px solid #00ADEF; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover:after { | |
background: #00ADEF; | |
} | |
/*---------------------Layout Settings----------------------------*/ | |
/* Left align thumbnails */ | |
/* (by default */ | |
/* Right align thumbnails */ | |
/* | |
.woocommerce div.product div.images .flex-control-thumbs { | |
justify-content: flex-end; | |
} | |
*/ | |
/* Centered align thumbnails */ | |
/* | |
.woocommerce div.product div.images .flex-control-thumbs { | |
justify-content: center; | |
} | |
*/ | |
/* Horizontal scroll thumbnails */ | |
/* | |
.woocommerce div.product div.images .flex-control-thumbs li { | |
width: 23%; | |
flex-shrink: 0; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
overflow: scroll; | |
flex-wrap: nowrap; | |
} | |
*/ | |
/* Images Vertically on Right */ | |
/* | |
.flex-viewport { | |
width: 100%; | |
margin-right: 104px; | |
} | |
.woocommerce div.product div.images.woocommerce-product-gallery { | |
display: flex; | |
overflow: hidden; | |
position: relative; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
flex-direction: column; | |
flex-wrap: nowrap; | |
height: 100%; | |
overflow: scroll; | |
position: absolute; | |
right: 0; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li { | |
width: 100%; | |
flex-shrink: 0; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { | |
left: .5em; | |
} | |
*/ | |
/* Images Veritcally on Left */ | |
/* | |
.flex-viewport { | |
width: 100%; | |
margin-left: 104px; | |
} | |
.woocommerce div.product div.images.woocommerce-product-gallery { | |
display: flex; | |
overflow: hidden; | |
position: relative; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: nowrap; | |
height: 100%; | |
overflow: scroll; | |
position: absolute; | |
left: 0; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li { | |
width: 100%; | |
flex-shrink: 0; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { | |
right: .5em; | |
} | |
*/ | |
/* Stack All Images Vertically */ | |
/* | |
.flex-viewport { | |
display: none; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { | |
display: none; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
flex-direction: column; | |
flex-wrap: nowrap; | |
height: 80vh; | |
overflow: scroll; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li { | |
width: 100%; | |
flex-shrink: 0; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li img { | |
opacity: 1; | |
} | |
*/ | |
/* Stack All Images Horizontally */ | |
/* | |
.flex-viewport { | |
display: none; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { | |
display: none; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
flex-direction: row; | |
width: 100%; | |
flex-wrap: nowrap; | |
overflow: scroll; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li { | |
width: 23%; | |
flex-shrink: 0; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li img { | |
opacity: 1; | |
} | |
*/ | |
/* Stack All Images like Grid */ | |
/* | |
.flex-viewport { | |
display: none; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { | |
display: none; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
width: 100%; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li { | |
width: 25%; | |
flex-shrink: 0; | |
} | |
.woocommerce div.product div.images .flex-control-thumbs li img { | |
opacity: 1; | |
} | |
*/ | |
/*----------------------Style Customization----------------------*/ | |
/* Background */ | |
.woocommerce div.product div.images.woocommerce-product-gallery { | |
background: default; | |
padding: default; | |
border: default; | |
} | |
/* Original Thumbnail */ | |
.woocommerce div.product div.images .flex-control-thumbs li img { | |
opacity: default; | |
border: default; | |
} | |
/* Hovered Image */ | |
.woocommerce div.product div.images .flex-control-thumbs li img:hover { | |
border: 2px solid #E96199; | |
} | |
/* Active Image */ | |
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { | |
border: 2px solid #00ADEF; | |
opacity: 1; | |
} | |
/* Zoom Icon Color */ | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:before { | |
border-color: default; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:after { | |
background: default; | |
} | |
/* Zoom Icon Hover Color */ | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover:before { | |
border-color: default; | |
} | |
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover:after { | |
background: default; | |
} | |
/* Border Radius */ | |
.woocommerce div.product div.images .flex-control-thumbs li img, .flex-viewport { | |
border-radius: 20px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment