woocommerce/plugins/woocommerce-admin/client/layout/style.scss

263 lines
4.4 KiB
SCSS
Raw Normal View History

.woocommerce-layout {
margin: 0;
padding: 0;
}
.woocommerce-layout__primary {
margin: $gutter-large 0 0 $fallback-gutter-large;
margin: $gutter-large 0 0 $gutter-large;
@include breakpoint( '<782px' ) {
margin-top: 20px;
}
}
.woocommerce-layout .woocommerce-layout__main {
padding-right: $fallback-gutter-large;
padding-right: $gutter-large;
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
max-width: 100%;
}
.woocommerce-page {
.update-nag {
display: none;
}
}
.woocommerce-admin-is-loading {
#adminmenumain,
#wpfooter,
#wpcontent,
#wpadminbar,
#wpbody-content,
.woocommerce-layout__header,
.update-nag,
.woocommerce-store-alerts,
.woocommerce-message,
.notice,
.error,
.updated,
.components-modal__screen-overlay {
display: none;
}
}
.woocommerce-admin-full-screen {
background: $studio-gray-0;
color: $studio-gray-60;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
margin-top: -$adminbar-height;
@include breakpoint( '<600px' ) {
margin-top: -$adminbar-height-mobile;
}
#wpwrap {
top: 0;
}
#wpbody-content {
min-height: 100vh;
}
/* Hide wp-admin and WooCommerce elements when the dashboard body class is present */
#wpcontent > *,
#adminmenumain,
.woocommerce-layout__header,
.update-nag,
.woocommerce-store-alerts,
.woocommerce-message,
.notice,
.error,
.updated {
display: none;
}
#wpcontent {
margin-left: 0 !important;
> #wpbody {
display: block;
margin-top: 0 !important;
}
}
}
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
.woocommerce-onboarding {
/* Muriel style overrides */
.muriel-component {
margin-top: $gap;
margin-bottom: $gap;
}
.components-base-control.has-error {
margin-bottom: $gap * 2 !important;
border-color: $studio-red-50;
@include breakpoint( '<782px' ) {
margin-bottom: $gap-small + $gap * 2 !important;
}
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
.components-base-control__help {
top: 100%;
left: $gap-small;
position: absolute;
margin-top: $gap-smallest;
font-size: 12px;
font-style: normal;
color: $studio-red-50;
}
}
.components-form-toggle {
display: inline-block;
label {
font-size: 14px;
}
.components-base-control {
display: inline-block;
}
.components-base-control__field {
margin-bottom: 0;
}
}
}
.woocommerce-task-dashboard__container .components-button.is-button,
.woocommerce-profile-wizard__body .components-button.is-button,
.woocommerce-page .components-modal__frame .components-button.is-button {
height: 48px;
padding-left: 25px;
padding-right: 25px;
text-align: center;
font-size: 14px;
line-height: 36px;
font-weight: 500;
align-items: center;
&:disabled {
cursor: not-allowed;
}
}
.components-modal__frame.woocommerce-usage-modal {
width: 600px;
max-width: 100%;
.components-modal__header {
border-bottom: 0;
margin-bottom: 0;
}
.woocommerce-usage-modal__wrapper {
flex-grow: 1;
display: flex;
flex-direction: column;
a {
color: $studio-gray-60;
}
button.is-primary {
align-self: flex-end;
}
}
.woocommerce-usage-modal__actions {
display: flex;
justify-content: flex-end;
margin-top: $gap;
button {
margin-left: $gap;
}
}
}
.woocommerce-payments__usage-modal {
.components-modal__header {
height: auto;
padding: 24px 24px 0 24px;
.components-modal__header-heading {
font-size: 24px;
line-height: 32px;
margin: 0 0 24px 0;
}
}
.woocommerce-payments__usage-modal-message {
padding: $gap 0;
font-size: 16px;
line-height: 24px;
}
.woocommerce-payments__usage-footer {
display: flex;
justify-content: flex-end;
padding: $gap 0;
button {
margin-left: $gap;
}
}
}
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
.components-modal__frame.woocommerce-cart-modal {
width: 600px;
max-width: 100%;
.components-modal__header {
border-bottom: 0;
margin-bottom: $gap;
margin-top: $gap;
button {
display: none;
}
}
.components-modal__header-heading {
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 32px;
}
.woocommerce-list {
margin-top: $gap-smallest;
}
.woocommerce-list .woocommerce-list__item:first-child {
border-top: 1px solid $studio-gray-5;
}
.woocommerce-list__item {
border-bottom: 1px solid $studio-gray-5;
}
.woocommerce-cart-modal__help-text {
font-size: 16px;
line-height: 24px;
}
.woocommerce-cart-modal__actions {
text-align: right;
button.is-link {
margin-right: $gap;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
button.is-primary {
align-self: flex-end;
}
}
}