woocommerce/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

886 lines
17 KiB
SCSS

@keyframes containerFadeIn {
0%,
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.woocommerce-customize-store-header,
.edit-site-layout__header-container {
.edit-site-site-hub__view-mode-toggle-container a {
color: unset;
}
}
.edit-site-layout__header-container {
position: fixed;
z-index: 4;
}
body.woocommerce-assembler {
overflow: hidden;
}
.woocommerce-customize-store__step-assemblerHub,
.woocommerce-customize-store__step-transitionalScreen,
.woocommerce-customize-store__step-intro {
a {
text-decoration: none;
}
.edit-site-layout {
bottom: 0;
left: 0;
min-height: 100vh;
position: fixed;
right: 0;
top: 0;
background-color: #f5f5f5;
}
/* Sidebar Header */
.edit-site-layout__hub {
width: 380px;
height: 64px;
}
.edit-site-site-hub__view-mode-toggle-container {
height: 64px;
}
.edit-site-sidebar-navigation-screen__title-icon {
align-items: center;
padding-top: 80px;
padding-bottom: 0;
gap: 0;
width: 348px;
z-index: 2;
}
.edit-site-sidebar-navigation-screen-patterns__group-header {
margin-top: 32px;
}
.edit-site-sidebar-navigation-screen__title-icon,
.edit-site-site-hub__view-mode-toggle-container,
.edit-site-layout__view-mode-toggle-icon.edit-site-site-icon {
background-color: #f5f5f5;
}
.edit-site-layout__view-mode-toggle-icon.edit-site-site-icon {
align-items: center;
display: flex;
}
.edit-site-site-hub__site-title {
color: $gray-900;
font-size: 0.8125rem;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 153.846% */
margin: 0;
}
.edit-site-site-icon__image {
border-radius: 2px;
}
.edit-site-site-hub__view-mode-toggle-container {
.edit-site-layout__view-mode-toggle,
.edit-site-layout__view-mode-toggle-icon.edit-site-site-icon,
.edit-site-site-icon__icon {
width: 32px;
height: 32px;
}
}
/* Sidebar */
.edit-site-layout__sidebar-region {
width: 380px;
z-index: 3;
background-color: #f5f5f5;
}
.edit-site-layout__sidebar {
.edit-site-sidebar__content {
display: flex;
flex-direction: column;
.components-navigator-screen {
will-change: auto;
padding: 0 16px;
overflow-x: hidden;
flex: 1;
&::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}
&::-webkit-scrollbar-track-piece:start {
background: transparent;
margin-top: 250px;
}
&::-webkit-scrollbar-track-piece:end {
background: transparent;
margin-bottom: 400px;
}
}
}
.edit-site-sidebar-button {
color: $gray-900;
height: 40px;
}
.edit-site-sidebar-navigation-screen__title {
font-size: 1rem;
color: $gray-900;
text-overflow: ellipsis;
white-space: nowrap;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
padding: 0;
}
.edit-site-sidebar-navigation-screen__description {
color: $gray-700;
font-size: 0.8125rem;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 153.846% */
}
.edit-site-sidebar-navigation-screen__content .components-heading {
color: $gray-700;
font-size: 0.6875rem;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 145.455% */
text-transform: uppercase;
}
.edit-site-sidebar-navigation-item {
border-radius: 4px;
padding: 8px 8px 8px 16px;
align-items: center;
gap: 8px;
align-self: stretch;
width: 100%;
border: 1.5px solid transparent;
&:hover,
&:active,
&:focus,
&.edit-site-sidebar-navigation-screen-patterns__group-homepage-item--active {
background: #e4e4e4;
color: $gray-600;
}
.components-flex-item {
color: $gray-900;
font-size: 0.8125rem;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
letter-spacing: -0.078px;
}
}
.edit-site-sidebar-navigation-item.components-item
.edit-site-sidebar-navigation-item__drilldown-indicator {
fill: #ccc;
}
.edit-site-save-hub {
border-top: 0;
padding: 32px 29px 32px 32px;
button.is-primary:disabled {
opacity: 0.5;
}
button .components-spinner {
margin-top: 0;
}
}
}
.woocommerce-customize-store__sidebar-group-header {
color: $gray-900;
font-size: 0.6875rem;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 145.455% */
text-transform: uppercase;
}
.woocommerce-customize-store__sidebar-group {
padding: 0 8px;
.woocommerce-customize-store__sidebar-group-header {
padding: 16px 0;
}
}
button.block-library-site-logo__inspector-upload-container {
margin: 12px 0 32px;
display: flex;
padding: 32px;
justify-content: center;
align-items: center;
gap: $gap;
align-self: stretch;
border-radius: 4px;
background: #e4e4e4;
width: 324px;
height: 88px;
svg {
color: $gray-600;
}
}
.woocommerce-customize-store__sidebar-logo-container {
padding: 32px;
cursor: pointer;
width: 324px;
display: flex;
align-items: center;
justify-content: center;
.woocommerce-customize-store_custom-logo {
max-width: 250px;
max-height: 250px;
}
}
.woocommerce-customize-store__sidebar-logo-content {
.components-toggle-control {
margin-bottom: 24px;
label {
color: $gray-900;
font-size: 0.8125rem;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
margin-bottom: 0;
}
.components-form-toggle:not(.is-checked) {
.components-form-toggle__track {
background-color: $gray-600;
border-color: $gray-600;
}
}
.components-form-toggle__thumb {
background-color: #fff;
border-color: #fff;
}
}
.components-range-control {
margin-bottom: 24px;
padding-top: 8px;
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.components-base-control__label {
text-transform: none;
color: $gray-900;
font-size: 0.8125rem;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
margin-bottom: 8px;
}
.components-input-control__container {
width: 84px;
}
.components-input-control__input {
display: flex;
height: 36px;
align-items: center;
border-radius: 2px;
border: 1px solid $gray-600;
background: #fff;
color: $gray-900;
&:focus + .components-input-control__backdrop {
box-shadow: none;
border: 1px solid var(--wp-admin-theme-color-darker-10);
}
}
}
.components-base-control__help {
color: $gray-700;
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
}
}
.woocommerce-customize-store__fiverr-cta-group {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--gutenberg-gray-700, #dcdcde);
color: var(--gutenberg-gray-900, #1e1e1e);
font-size: 11px;
p {
margin-top: 6px;
}
}
.block-editor-block-patterns-list__item-title {
display: none;
}
/* Color sidebar */
.woocommerce-customize-store__color-panel-container {
border: 0;
margin-top: 24px;
padding: 0;
.components-panel__body-title {
margin: 0 !important;
&:hover {
background: initial;
}
}
.components-panel__body-toggle.components-button {
padding: 16px 0;
text-transform: uppercase;
color: $gray-900;
font-size: 0.6875rem;
font-weight: 600;
line-height: 16px; /* 145.455% */
&:focus {
box-shadow: none;
}
.components-panel__arrow {
right: 0;
color: $gray-900;
}
}
.color-block-support-panel {
border-top: 0;
padding: 0;
}
}
.woocommerce-customize-store_color-palette-container {
gap: 7px;
}
.woocommerce-customize-store_color-palette-spinner-container,
.woocommerce-customize-store_font-pairing-spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 174px;
}
.woocommerce-customize-store_sidebar-color-content {
width: 324px;
.woocommerce-customize-store_global-styles-variations_item {
border: 1.5px solid transparent;
padding: 2.5px;
border-radius: 4px;
&:hover,
&.is-active {
border: 1.5px solid var(--wp-admin-theme-color);
}
.woocommerce-customize-store_global-styles-variations_item-preview {
border: 1px solid #dcdcde;
border-radius: 2px;
background: #fff;
}
}
}
.woocommerce-customize-store_sidebar-typography-content {
width: 324px;
.woocommerce-customize-store_global-styles-variations_item {
border-radius: 2px;
outline: 1px solid #dcdcde;
background: #fff;
&:hover,
&.is-active {
border-radius: 2px;
outline: 1.5px solid var(--wp-admin-theme-color);
background: #fff;
}
}
.global-styles-variation-container__iframe {
box-shadow: none;
}
}
.woocommerce-customize-store_sidebar-patterns-upgrade-notice {
color: #1e1e1e;
padding: 0 0 40px;
margin-top: 48px;
font-size: 11px;
h4 {
text-transform: uppercase;
margin-bottom: 4px;
}
p {
margin: 0;
}
a,
button {
text-decoration: none;
}
}
.woocommerce-customize-store_sidebar-typography-upgrade-notice {
margin-top: 48px;
color: #1e1e1e;
padding: 0;
h4 {
text-transform: uppercase;
margin-bottom: 4px;
}
p {
margin: 0;
}
a,
button {
text-decoration: none;
}
}
.block-editor-block-preview__content {
height: 100%;
width: 100%;
}
.edit-site-sidebar-navigation-screen__content {
.block-editor-block-preview__content {
left: 0;
margin: 0;
min-height: auto;
overflow: visible;
text-align: initial;
top: 0;
transform-origin: top left;
position: relative;
}
.block-editor-block-patterns-list {
width: 324px;
overflow-y: unset;
}
}
.woocommerce-customize-store__sidebar-homepage-content {
.block-editor-block-preview__content {
background-color: #fff;
max-height: 280px !important;
}
}
/* Preview Canvas */
.edit-site-layout__canvas {
bottom: 16px;
top: 75px;
left: 6px; // the default styles for this undersizes the width by 24px so we want to center this
padding: 0;
background: #ddd;
border-radius: 0 0 12px 12px;
// Design with AI: This is necessary because the design with AI flow does not have the device toolbar.
.woocommerce-assembler--with-ai & {
top: 16px;
padding: 0 4px 0 16px;
border-radius: 0;
background: transparent;
}
}
.edit-site-resizable-frame__handle {
background: var(--wp-admin-theme-color);
cursor: ew-resize;
}
.edit-site-layout__canvas .components-resizable-box__container {
border-radius: 12px;
/* new frame */
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
transition: all 0.3s ease 0s;
// Design with AI: This is necessary because the design with AI flow does not have the device toolbar.
.woocommerce-assembler--with-ai & {
transition: none;
}
}
.woocommerce-customize-store__block-editor,
.edit-site-layout:not(.is-full-canvas)
.edit-site-layout__canvas > div
.interface-interface-skeleton__content {
// Design with AI: This is necessary because the design with AI flow does not have the device toolbar.
.woocommerce-customize-store__step-designWithAi & {
border-radius: 12px;
}
.woocommerce-customize-store__block-editor,
.woocommerce-block-preview-container,
.auto-block-preview__container {
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
}
}
.customize-your-store-edit-site-resizable-frame__inner-content {
height: 100%;
border-radius: 0 0 12px 12px;
// Design with AI: This is necessary because the design with AI flow does not have the device toolbar.
.woocommerce-customize-store__step-designWithAi & {
border-radius: 12px;
}
}
.woocommerce-customize-store__device-toolbar {
padding: 10px 8px;
text-align: center;
background-color: #fff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
position: relative;
top: 16px;
z-index: 10;
border-radius: 12px 12px 0 0;
width: calc(100% - 16px);
left: 6px;
}
.woocommerce-customize-store__device-button:not([disabled]):focus {
box-shadow: none;
outline: none;
}
.woocommerce-customize-store__device-button:not([disabled]) {
&:hover,
&.is-selected {
box-shadow: none;
outline: none;
.woocommerce-customize-store__device-icon {
fill: initial;
&--zoom {
stroke: rgb(0, 0, 0);
}
}
}
}
.woocommerce-customize-store__device-icon {
margin-right: 10px;
fill: #757575;
&--zoom {
stroke: #757575;
}
&:last-of-type {
margin-right: 0;
}
}
}
.woocommerce-customize-store__step-assemblerHub,
.woocommerce-customize-store__step-transitionalScreen {
.edit-site-layout {
.edit-site-site-hub__view-mode-toggle-container {
padding: 16px 12px 0 16px;
}
}
}
.woocommerce-customize-store__step-intro {
.edit-site-site-hub__view-mode-toggle-container {
height: 32px;
}
.edit-site-layout {
.edit-site-site-hub__view-mode-toggle-container {
padding-left: 16px;
}
}
}
.woocommerce-customize-store-tour-kit {
.woocommerce-tour-kit-step {
width: 319px;
box-shadow: none;
border: 1px solid var(--gutenberg-gray-300, #ddd);
}
.tour-kit-frame__container {
box-shadow: none;
}
.components-elevation {
display: none;
}
.tour-kit-frame__arrow::before {
box-shadow: none !important;
}
.tour-kit-frame__container[data-popper-placement^="left"] {
& > .tour-kit-frame__arrow {
right: -5px;
&::before {
background: #fff;
border-top: 1px solid var(--gutenberg-gray-300, #ddd);
border-right: 1px solid var(--gutenberg-gray-300, #ddd);
}
}
}
.tour-kit-frame__container[data-popper-placement^="right"] {
& > .tour-kit-frame__arrow {
&::before {
border-bottom: 1px solid var(--gutenberg-gray-300, #ddd);
border-left: 1px solid var(--gutenberg-gray-300, #ddd);
background: #fff;
}
}
}
.tour-kit-frame__container[data-popper-placement^="top"] {
& > .tour-kit-frame__arrow {
&::before {
border-bottom: 1px solid var(--gutenberg-gray-300, #ddd);
border-right: 1px solid var(--gutenberg-gray-300, #ddd);
}
}
}
.tour-kit-frame__container[data-popper-placement^="bottom"] {
& > .tour-kit-frame__arrow {
&::before {
border-top: 1px solid var(--gutenberg-gray-300, #ddd);
border-left: 1px solid var(--gutenberg-gray-300, #ddd);
}
}
}
.woocommerce-tour-kit-step__heading {
color: $gray-900;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}
.woocommerce-tour-kit-step__description {
color: $gray-900;
font-size: 0.8125rem;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
margin-top: 8px;
}
.woocommerce-tour-kit-step-navigation__step {
color: $gray-700;
line-height: 16px;
}
&:not(.woocommerce-customize-store-welcome-tourkit) {
.woocommerce-tour-kit-step__body {
margin-top: -16px;
}
}
}
.woocommerce-customize-store-welcome-tourkit {
.tour-kit-frame__container {
box-shadow: none;
}
&.ai-offline {
.woocommerce-tour-kit-step {
width: 430px;
.components-card__header {
background-image: none;
height: auto;
margin: 0;
}
}
.tour-kit-frame__container {
bottom: 0;
}
}
.woocommerce-tour-kit-step {
width: 335px;
border-radius: 8px;
border: 1px solid #dcdcdc;
/* Shadow / Popover */
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
.components-card__header {
align-items: flex-start;
height: 194px;
background-image: url(../assets/images/welcome-tour.svg);
background-size: 160px;
background-position: center;
background-repeat: no-repeat;
margin-bottom: $gap;
}
}
.woocommerce-tour-kit-step-navigation .components-button.is-primary {
margin-left: 12px;
}
}
.edit-site-canvas-spinner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
animation: 0.5s ease 1s edit-site-canvas-spinner__fade-in-animation;
animation-fill-mode: forwards;
@include reduce-motion("animation");
circle {
stroke: rgba($black, 0.3);
}
}
.woocommerce-assembler-hub__resizable-frame__drag-handler {
background: #000;
left: 5px !important;
border-radius: 2px;
.components-popover__content {
color: #f0f0f0;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.4;
background: inherit;
padding: 4px 8px;
width: max-content;
box-shadow: none;
text-align: center;
}
}
.woocommerce-customize-store {
.block-editor-color-gradient-control {
.components-circular-option-picker {
display: none;
}
}
}
.woocommerce-customize-store__logo-header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.components-dropdown-menu__menu
.woocommerce-customize-store__logo-menu-group.components-menu-group {
border-top: 0;
padding: 0 8px;
.components-menu-item__button {
width: 112px;
}
.components-menu-item__item {
min-width: auto;
}
}
// Hack to hide when the media modal is open
// Otherwise in Firefox the popover remains visible on top of the modal
// Changing the z-index of Popovers have wider implications.
.modal-open .woocommerce-customize-store__logo-dropdown-popover {
display: none;
}
.woocommerce-customize-store__logo-dropdown-popover {
.components-popover__content {
padding: 16px 8px;
}
}
.woocommerce-customize-store__logo-menu-item-delete {
color: #cc1818;
}
.components-resizable-box__handle {
display: none !important;
}
.woocommerce-customize-store_popover-tooltip {
pointer-events: none;
.components-popover__content {
width: fit-content;
user-select: none;
}
}
.edit-site-layout__content {
.edit-site-layout__sidebar {
display: flex;
max-width: 700px;
}
.edit-site-layout__canvas-container {
background-color: #f5f5f5;
}
}