607 lines
12 KiB
SCSS
607 lines
12 KiB
SCSS
|
|
@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {
|
|
|
|
// WebKit
|
|
&::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: $handle-color;
|
|
border-radius: 8px;
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
&:hover::-webkit-scrollbar-thumb, // This needs specificity.
|
|
&:focus::-webkit-scrollbar-thumb,
|
|
&:focus-within::-webkit-scrollbar-thumb {
|
|
background-color: $handle-color-hover;
|
|
}
|
|
|
|
// Firefox 109+ and Chrome 111+
|
|
scrollbar-width: thin;
|
|
scrollbar-gutter: stable both-edges;
|
|
scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:focus-within {
|
|
scrollbar-color: $handle-color-hover transparent;
|
|
}
|
|
|
|
// Needed to fix a Safari rendering issue.
|
|
will-change: transform;
|
|
|
|
// Always show scrollbar on Mobile devices.
|
|
@media (hover: none) {
|
|
& {
|
|
scrollbar-color: $handle-color-hover transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes containerFadeIn {
|
|
0%,
|
|
80% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.woocommerce-customize-store__step-assemblerHub {
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.edit-site-layout {
|
|
bottom: 0;
|
|
left: 0;
|
|
min-height: 100vh;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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: #fcfcfc;
|
|
}
|
|
|
|
.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 {
|
|
padding: 16px 12px 0 16px;
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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: 348px;
|
|
|
|
&:hover {
|
|
background: #ededed;
|
|
color: $gray-600;
|
|
}
|
|
|
|
&:active {
|
|
color: #171717;
|
|
background: #fcfcfc;
|
|
}
|
|
|
|
&:focus {
|
|
color: #171717;
|
|
background: #fcfcfc;
|
|
border: 1.5px solid var(--wp-admin-theme-color);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: #f0f0f0;
|
|
width: 324px;
|
|
height: 88px;
|
|
|
|
svg {
|
|
color: $gray-600;
|
|
}
|
|
}
|
|
|
|
.woocommerce-customize-store__sidebar-logo-container {
|
|
margin: 12px 0 32px;
|
|
padding: 32px;
|
|
cursor: pointer;
|
|
width: 324px;
|
|
|
|
.woocommerce-customize-store_custom-logo {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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% */
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.woocommerce-customize-store_color-palette-container {
|
|
gap: 7px;
|
|
}
|
|
|
|
.woocommerce-customize-store_color-palette-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;
|
|
border: 1px solid #dcdcde;
|
|
background: #fff;
|
|
|
|
&:hover,
|
|
&.is-active {
|
|
border-radius: 2px;
|
|
border: 1.5px solid var(--wp-admin-theme-color);
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.global-styles-variation-container__iframe {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Layout sidebar */
|
|
.block-editor-block-patterns-list__item {
|
|
.block-editor-block-preview__container {
|
|
border-radius: 2px;
|
|
border: 1.5px solid transparent;
|
|
}
|
|
|
|
&.is-selected,
|
|
&:hover,
|
|
&:focus {
|
|
.block-editor-block-preview__container {
|
|
box-shadow: none;
|
|
border-color: var(--wp-admin-theme-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-site-sidebar-navigation-screen__content .block-editor-block-patterns-list {
|
|
width: 324px;
|
|
}
|
|
|
|
.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: 16px;
|
|
left: 12px; // the default styles for this undersizes the width by 24px so we want to center this
|
|
padding: 0 4px 0 16px;
|
|
}
|
|
|
|
.edit-site-resizable-frame__handle {
|
|
background: var(--wp-admin-theme-color);
|
|
|
|
.components-popover {
|
|
display: inline-flex;
|
|
padding: 0 10px;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
background: var(--wp-admin-theme-color-background-25);
|
|
left: 5px !important;
|
|
border-radius: 4px;
|
|
height: 20px;
|
|
|
|
.components-popover__content {
|
|
color: var(--wp-admin-theme-color-darker-20);
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px; /* 166.667% */
|
|
background: inherit;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-site-layout__canvas .components-resizable-box__container {
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 6px 10px 0 rgba(0, 0, 0, 0.02), 0 13px 15px 0 rgba(0, 0, 0, 0.03), 0 15px 20px 0 rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.woocommerce-customize-store__block-editor,
|
|
.edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas > div .interface-interface-skeleton__content {
|
|
border-radius: 20px;
|
|
|
|
.woocommerce-customize-store__block-editor,
|
|
.woocommerce-block-preview-container,
|
|
.auto-block-preview__container {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.edit-site-resizable-frame__inner-content {
|
|
border-radius: 20px !important;
|
|
}
|
|
}
|
|
|
|
|
|
.woocommerce-customize-store-tour-kit {
|
|
.woocommerce-tour-kit-step {
|
|
width: 319px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|