woocommerce/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss

255 lines
4.5 KiB
SCSS

.woocommerce-profile-wizard__body .woocommerce-profile-wizard__container {
> .woocommerce-profile-wizard__themes-tab-panel {
margin-bottom: $gap-large;
@include breakpoint( '>782px' ) {
max-width: 810px;
.woocommerce-profile-wizard__themes {
display: grid;
grid-gap: $gap-large;
grid-template-columns: 1fr 1fr;
}
}
}
}
.woocommerce-profile-wizard__themes-tab-panel .components-tab-panel__tabs {
display: flex;
justify-content: space-between;
background: $studio-white;
box-shadow: $muriel-box-shadow-1dp;
border-radius: 3px;
margin-top: $gap-large;
margin-bottom: $gap-large;
button {
border: 0;
color: $studio-gray-50;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
height: 48px;
width: 100%;
@include font-size( 14 );
font-weight: 500;
outline: none;
padding: 0 $gap-large;
}
}
p.woocommerce-profile-wizard__themes-skip-this-step {
text-align: center;
}
.woocommerce-profile-wizard__body .woocommerce-profile-wizard__theme.components-card {
overflow: hidden;
@include breakpoint( '>782px' ) {
margin: 0;
}
.woocommerce-profile-wizard__theme-image {
width: 100%;
height: 300px;
background-size: cover;
}
.woocommerce-profile-wizard__theme-name {
margin-top: auto;
margin-bottom: $gap-smaller;
@include font-size( 24 );
font-weight: 400;
svg {
max-width: 18px;
height: 18px;
margin-left: $gap-smaller;
path {
fill: $studio-red-50;
}
}
}
.woocommerce-profile-wizard__theme-status {
margin: 0;
font-size: 14px;
}
.woocommerce-profile-wizard__theme-learn-more {
display: inline-block;
}
}
.woocommerce-profile-wizard__body .woocommerce-theme-uploader.components-card {
margin: 0;
position: relative;
&.is-uploading .woocommerce-theme-uploader__dropzone-wrapper {
min-height: 382px;
}
.woocommerce-theme-uploader__dropzone-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 2px;
background: #f6f6f6;
border: 1px dashed #b0b5b8;
}
.components-form-file-upload {
flex: 1 1 auto;
width: 100%;
display: flex;
}
.components-form-file-upload > .components-button {
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
margin: 0;
width: 100%;
height: 100%;
min-height: 380px;
> .gridicon {
width: 48px;
height: 48px;
path {
fill: #50575d;
}
}
.dashicons-upload {
display: none;
}
}
.woocommerce-theme-uploader__title {
margin: $gap-smaller 0;
@include font-size( 24 );
font-weight: 400;
}
p {
@include font-size( 14 );
margin: 0;
}
}
.woocommerce-theme-preview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100% !important;
display: flex;
flex-direction: column;
.woocommerce-theme-preview__toolbar {
background: $studio-white;
flex-direction: row;
display: flex;
height: $header-height;
border-bottom: 1px solid $studio-gray-5;
padding-left: $gap;
padding-right: $gap;
align-items: center;
.is-button.is-primary {
height: 40px;
margin: 0;
@include breakpoint( '<782px' ) {
margin-left: auto;
}
}
}
.woocommerce-theme-preview__theme-name {
padding-left: $gap;
color: $studio-gray-90;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%;
}
.woocommerce-theme-preview__close {
padding: 0 $gap 0 0;
color: $studio-gray-50;
}
.woocommerce-theme-preview__devices {
margin-left: auto;
margin-right: $gap;
.woocommerce-theme-preview__device {
padding: $gap-small;
color: $studio-gray-50;
margin: 0;
border-radius: 50%;
&.is-selected,
&:focus {
background: $studio-gray-50;
color: $studio-white;
}
}
@include breakpoint( '<782px' ) {
display: none;
}
}
.woocommerce-web-preview {
flex: 1;
padding: $gap-largest $gap;
overflow: scroll;
.woocommerce-web-preview__iframe-wrapper {
height: 100%;
border-radius: 3px;
box-shadow: $muriel-box-shadow-1dp;
overflow: hidden;
margin: 0 auto;
iframe {
display: block;
}
}
&.is-mobile .woocommerce-web-preview__iframe-wrapper {
max-width: 360px;
}
&.is-tablet .woocommerce-web-preview__iframe-wrapper {
max-width: 768px;
}
&.is-desktop {
width: 100%;
padding: 0;
.woocommerce-web-preview__iframe-wrapper {
border-radius: 0;
box-shadow: none;
}
}
}
}
.woocommerce-theme-preview-active {
overflow: hidden;
.woocommerce-profile-wizard__header {
display: none;
}
}