Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-admin/client/layout/style.scss

30 lines
448 B
SCSS
Raw Normal View History

Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45) * Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar
2018-05-18 17:31:08 +00:00
/** @format */
Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99) * Add CSS naming conventions following Gutenberg’s standards * Update `woo-dashboard` to `woocommerce-layout` * Update admin notice container to new classname standard
2018-06-01 14:35:18 +00:00
.woocommerce-layout {
Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45) * Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar
2018-05-18 17:31:08 +00:00
margin: 0;
padding: 0;
}
Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99) * Add CSS naming conventions following Gutenberg’s standards * Update `woo-dashboard` to `woocommerce-layout` * Update admin notice container to new classname standard
2018-06-01 14:35:18 +00:00
.woocommerce-layout__primary {
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
margin: 80px 0 0 $gutter;
Implement updated activity panel tab design (https://github.com/woocommerce/woocommerce-admin/pull/137)
2018-06-29 15:20:08 +00:00
@include breakpoint( '>1100px' ) {
margin-top: 100px;
}
Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45) * Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar
2018-05-18 17:31:08 +00:00
}
Rename sidebar to activity-panel, and refactor code and behavior.
2018-06-28 13:52:45 +00:00
.woocommerce-layout .woocommerce-layout__main {
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
padding-right: $gutter;
max-width: 100%;
Add Summary Number/Performance Tile component (https://github.com/woocommerce/woocommerce-admin/pull/109) * Add SummaryList and SummaryNumber components * Add a demo of SummaryList/SummaryNumbers * Pages without the sidebar displayed can use a larger max-width * Adjust layout styles for smaller screens
2018-06-14 15:16:57 +00:00
}
Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45) * Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar
2018-05-18 17:31:08 +00:00
// @TODO remove this?
Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99) * Add CSS naming conventions following Gutenberg’s standards * Update `woo-dashboard` to `woocommerce-layout` * Update admin notice container to new classname standard
2018-06-01 14:35:18 +00:00
.woocommerce-dashboard__widget {
Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45) * Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar
2018-05-18 17:31:08 +00:00
display: flex;
align-items: center;
text-align: center;
}
Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99) * Add CSS naming conventions following Gutenberg’s standards * Update `woo-dashboard` to `woocommerce-layout` * Update admin notice container to new classname standard
2018-06-01 14:35:18 +00:00
.woocommerce-dashboard__widget-item {
Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45) * Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar
2018-05-18 17:31:08 +00:00
flex: 1;
}