woocommerce/plugins/woocommerce-admin/client/customize-store/intro/intro.scss

250 lines
4.1 KiB
SCSS

.woocommerce-customize-store__container {
display: flex;
flex-direction: column;
button {
cursor: pointer;
}
}
.woocommerce-customize-store-header {
min-height: 64px;
padding: 1rem;
width: 100%;
.edit-site-site-hub__view-mode-toggle-container {
background-color: transparent;
height: 32px;
width: 32px;
}
.edit-site-site-icon {
line-height: 0;
svg {
height: 32px;
width: 32px;
}
}
.edit-site-site-hub__site-title {
font-size: 0.8125rem;
font-weight: 500;
margin: 0;
padding: 0 0 0 0.75rem;
line-height: 2rem;
color: $gray-900;
}
}
.woocommerce-customize-store-container {
display: flex;
flex-direction: row;
}
.woocommerce-customize-store-sidebar {
flex: 0 0 380px;
padding: 1rem;
.woocommerce-customize-store-sidebar__title {
color: #1e1e1e;
font-size: 1rem;
font-weight: 600;
margin: 0;
padding: 0;
line-height: 2.5;
}
button {
background-color: transparent;
border: none;
line-height: 1;
padding-right: 0;
vertical-align: middle;
}
svg {
color: inherit;
height: 24px;
width: 24px;
margin: 0.25rem;
}
p {
padding: 0 1rem;
color: #757575;
max-width: 20rem;
}
}
.woocommerce-customize-store-main {
margin-right: 2.5rem;
p {
color: #2f2f2f;
font-size: 0.813rem;
line-height: 1.5;
margin: 0;
padding: 0;
&.select-theme-text {
font-size: 1rem;
font-weight: 500;
color: #1e1e1e;
margin-bottom: 24px;
}
}
}
.woocommerce-customize-store-banner {
background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-background.svg) no-repeat center right;
background-size: auto 218px;
background-position-y: 29px;
border-radius: 4px;
display: flex;
margin: 1.25rem 0 3.375rem;
min-height: 248px;
width: 820px;
align-items: center;
&.offline-banner {
background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-offline.svg) no-repeat center right;
background-size: auto 218px;
background-position-y: 29px;
}
.woocommerce-customize-store-banner-content {
width: 375px;
margin-left: 50px;
button.is-link {
color: #3858e9;
text-decoration: none;
font-weight: 500;
}
h1 {
font-size: 1.25rem;
line-height: 23.87px;
font-weight: 500;
color: #000;
}
p {
margin: 16px 0 28px 0;
color: #2f2f2f;
}
}
}
.woocommerce-customize-store-theme-cards {
display: flex;
flex-wrap: wrap;
gap: 32px;
row-gap: 54px;
max-width: 820px;
.theme-card {
flex-basis: 45%;
display: block;
text-decoration: none;
img {
border-radius: 4px;
border: 1px solid #e9e9e9;
width: 394px;
}
.theme-card__title {
font-size: 1rem;
margin: 0;
padding: 0;
font-weight: 600;
}
.theme-card__info {
margin: 24px 0 14px 0;
display: flex;
.theme-card__color-palettes {
margin-left: auto;
}
}
.theme-card__color-palettes {
display: flex;
margin: 0 0 0 auto;
padding: 0;
gap: 5px;
li {
width: 20px;
height: 20px;
box-shadow: inset 0 0 0 1px #0003;
border-radius: 50%;
}
}
.theme-card__active {
border-radius: 100px;
background: rgba(56, 88, 233, 0.2);
padding: 5px 10px;
justify-content: flex-end;
align-items: center;
gap: 10px;
color: #1d35b4;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 166.667% */
margin-right: 10px;
}
.theme-card__free {
color: #1e1e1e;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 114.286% */
}
}
}
.woocommerce-customize-store-browse-themes {
text-align: center;
button {
background-color: #fff;
border: 1px solid #3858e9;
border-radius: 2px;
color: #3858e9;
display: inline-block;
font-size: 0.8125rem;
margin: 3.75rem 0;
padding: 0.5rem 0.75rem;
}
}
.woocommerce-customize-store__design-change-warning-modal {
width: 480px;
max-width: 480px;
.components-modal__header {
padding-top: 32px;
}
p {
padding: 16px 0 16px 0;
margin: 0;
}
a,
button {
text-decoration: none !important;
}
h1 {
width: 320px;
line-height: 28px;
font-size: 20px;
color: #1e1e1e;
}
.woocommerce-customize-store__design-change-warning-modal-footer {
display: flex;
gap: 15px;
justify-content: flex-end;
}
}