woocommerce/plugins/woocommerce-admin/client/customize-store/transitional/style.scss

231 lines
4.2 KiB
SCSS
Raw Normal View History

.woocommerce-customize-store__transitional {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
.edit-site-site-hub.edit-site-layout__hub {
height: 64px;
padding: 16px;
gap: 12px;
width: 100%;
position: initial;
.edit-site-site-hub__view-mode-toggle-container,
.edit-site-site-icon__image,
svg {
height: 32px;
width: 32px;
background: transparent;
}
.edit-site-site-hub__site-title {
margin-left: 12px;
color: $gray-900;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 153.846% */
}
}
.woocommerce-customize-store__transitional-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
.woocommerce-customize-store__transitional-buttons {
display: flex;
align-items: center;
margin-top: 20px;
gap: 20px;
.woocommerce-customize-store__transitional-preview-button {
flex: 1;
}
}
}
.woocommerce-customize-store__transitional-heading {
color: $gray-900;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 60px; /* 187.5% */
letter-spacing: -0.32px;
margin: 0;
}
.woocommerce-customize-store__transitional-subheading {
color: $gray-700;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: -0.1px;
margin: 4px 0 0;
max-width: 560px;
}
.woocommerce-customize-store__transitional-main-actions-title {
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 120% */
margin-top: 100px;
margin-bottom: 40px;
}
.woocommerce-customize-store__transitional-main-actions {
display: flex;
gap: 40px;
flex-direction: row;
@media only screen and (max-width: 600px) {
flex-direction: column;
}
h3 {
margin: 0;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: -0.32px;
}
.components-button {
text-decoration: none;
}
.woocommerce-customize-store__transitional-action {
display: flex;
}
.woocommerce-customize-store__transitional-action__icon,
.woocommerce-customize-store__transitional-action__content {
flex: 1;
}
.woocommerce-customize-store__transitional-action__icon {
text-align: right;
max-width: 40px;
padding-right: 16px;
}
.woocommerce-customize-store__transitional-action__content {
max-width: 250px;
padding-right: 2px;
p {
margin-top: 5px;
margin-bottom: 16px;
}
}
}
}
.woocommerce-ai-survey-modal {
max-height: 100%;
max-width: 620px;
.components-modal__header {
padding: 32px 32px 24px 32px;
.components-modal__header-heading {
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}
}
.components-modal__content {
padding-top: 0;
padding-bottom: 16px;
}
}
.woocommerce-ai-survey-form {
.woocommerce-ai-survey-form__description {
margin: 0 0 12px;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 153.846% */
}
h4 {
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 123.077% */
margin-top: 0;
margin-bottom: 12px;
span {
color: #cc1818;
margin-left: 3px;
}
}
.woocommerce-survey-star-rating {
button {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 0 6px 0 0;
font-size: 20px;
}
.woocommerce-survey-star-rating__button-on {
color: #000;
}
.woocommerce-survey-star-rating__button-off {
color: var(--gray-gray-5, #dcdcde);
}
}
hr {
color: var(--gutenberg-gray-100, #f0f0f0);
margin: 20px 0;
}
.components-checkbox-control__input {
border: 1px solid $gray-600;
border-radius: 2px;
}
.components-checkbox-control:last-child {
margin-bottom: 4px;
}
.buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
.components-button {
padding: 8px 16px;
}
}
.components-textarea-control__input {
resize: none;
height: 72px;
margin-bottom: 20px;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
color: $gray-900;
}
}