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/stylesheets/abstracts/_variables.scss

59 lines
1.5 KiB
SCSS
Raw Normal View History

Publish storybook docs, remove react docgen based docs (https://github.com/woocommerce/woocommerce-admin/pull/7055)
2021-06-02 03:54:00 +00:00
@import '@automattic/color-studio/dist/color-variables.scss';
Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759) Fixes woocommerce/woocommerce-admin#4732 This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well. There are 3 major changes required as part of updating: 1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before. 2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color. 3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
2020-07-17 00:11:42 +00:00
Update/@wordpress components base styles (https://github.com/woocommerce/woocommerce-admin/pull/4427)
2020-06-10 01:55:06 +00:00
// Import Gutenberg variables
Publish storybook docs, remove react docgen based docs (https://github.com/woocommerce/woocommerce-admin/pull/7055)
2021-06-02 03:54:00 +00:00
@import '@wordpress/base-styles/colors';
@import '@wordpress/base-styles/variables';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/animations';
@import '@wordpress/base-styles/z-index';
@import '@wordpress/base-styles/default-custom-properties';
Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203) * ActivityCard: Update to match new activity panel designs * Add spacing rhythm system, add the rest of the base colors * Add styles for the ActivityCard * Use the new ActivityCard in the orders panel * Update text color & size * Disable timestamped test (string changes based on date) * Use moment to generate a relative timestamp to match “3 days ago” snapshot * Rename spacing vars The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 13:53:38 +00:00
Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759) Fixes woocommerce/woocommerce-admin#4732 This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well. There are 3 major changes required as part of updating: 1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before. 2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color. 3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
2020-07-17 00:11:42 +00:00
@include wordpress-admin-schemes;
Add fallback gutter for browsers that don't support CSS Custom properties (https://github.com/woocommerce/woocommerce-admin/pull/372)
2018-09-11 07:27:13 +00:00
$fallback-gutter: 24px;
$fallback-gutter-large: 40px;
Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203) * ActivityCard: Update to match new activity panel designs * Add spacing rhythm system, add the rest of the base colors * Add styles for the ActivityCard * Use the new ActivityCard in the orders panel * Update text color & size * Disable timestamped test (string changes based on date) * Use moment to generate a relative timestamp to match “3 days ago” snapshot * Rename spacing vars The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 13:53:38 +00:00
$gutter: var(--main-gap);
Layout: Add the 40px side gutters on 1100px+ screens (https://github.com/woocommerce/woocommerce-admin/pull/282)
2018-08-08 22:11:54 +00:00
$gutter-large: var(--large-gap);
Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203) * ActivityCard: Update to match new activity panel designs * Add spacing rhythm system, add the rest of the base colors * Add styles for the ActivityCard * Use the new ActivityCard in the orders panel * Update text color & size * Disable timestamped test (string changes based on date) * Use moment to generate a relative timestamp to match “3 days ago” snapshot * Rename spacing vars The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 13:53:38 +00:00
Layout: Add the 40px side gutters on 1100px+ screens (https://github.com/woocommerce/woocommerce-admin/pull/282)
2018-08-08 22:11:54 +00:00
$gap-largest: 40px;
style updates per review
2018-08-23 18:21:04 +00:00
$gap-larger: 36px;
Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203) * ActivityCard: Update to match new activity panel designs * Add spacing rhythm system, add the rest of the base colors * Add styles for the ActivityCard * Use the new ActivityCard in the orders panel * Update text color & size * Disable timestamped test (string changes based on date) * Use moment to generate a relative timestamp to match “3 days ago” snapshot * Rename spacing vars The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 13:53:38 +00:00
$gap-large: 24px;
$gap: 16px;
$gap-small: 12px;
Update/table component (https://github.com/woocommerce/woocommerce-admin/pull/251) * Update mock data to reflect latest API format * Update Table component to create a TableCard, TableSummary, and plain Table Use the TableCard container to display mocked revenue data * Add horizontal scroll only on the table itself * Remove `sortable` prop, base column sortability on whether the `value` is true/false Checking against a strict false should prevent any real 0 or ‘’ values from triggering unsortability * Add a checkbox to the demo table * Update accepted props * Update README for TableCard, Table, and TableSummary * Update README * Fix confused defaults
2018-08-01 16:00:45 +00:00
$gap-smaller: 8px;
Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203) * ActivityCard: Update to match new activity panel designs * Add spacing rhythm system, add the rest of the base colors * Add styles for the ActivityCard * Use the new ActivityCard in the orders panel * Update text color & size * Disable timestamped test (string changes based on date) * Use moment to generate a relative timestamp to match “3 days ago” snapshot * Rename spacing vars The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 13:53:38 +00:00
$gap-smallest: 4px;
Scroll to top of the table when navigating table pages (https://github.com/woocommerce/woocommerce-admin/pull/2051) * Scroll to top of the table when navigating table pages * Cleanup * Avoid using scroll-padding-top * Add space between the table top and the scroll point * Only call if the page is different * Move focus to the top of the table when switching pages * Use CSS variables in the Activity Panel and breadcrumbs CSS (https://github.com/woocommerce/woocommerce-admin/pull/2096) * Use CSS variables in the Activity Panel and breadcrumbs CSS * Cleanup * Focus on table element when navigating pages
2019-04-30 09:43:55 +00:00
// Header
Fix header height and positioning for wc nav (https://github.com/woocommerce/woocommerce-admin/pull/5173) * Fix header height and positioning for wc nav * Remove body margin via CSS
2020-09-29 12:57:50 +00:00
$header-height: 60px;
Navigation: Applying styles & behavior for folded menu, including mobile (https://github.com/woocommerce/woocommerce-admin/pull/5497) * Adding base styles for collapsed nav menu. * Handling varying behaviour on mobile-sized screens, with the menu overlaying content instead of shrinking the content area. * Folding the menu by default on screen sizes less than 960px, and if that condition is met after an orientation change * Refactoring logic from Header/index.js to flag if user has scrolled to apply shadow to folded navigation as well. * Refactoring styles in navigation feature to allow them to be loaded properly with webpack (with imports/etc).
2020-11-03 00:57:49 +00:00
$header-scroll-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);
Scroll to top of the table when navigating table pages (https://github.com/woocommerce/woocommerce-admin/pull/2051) * Scroll to top of the table when navigating table pages * Cleanup * Avoid using scroll-padding-top * Add space between the table top and the scroll point * Only call if the page is different * Move focus to the top of the table when switching pages * Use CSS variables in the Activity Panel and breadcrumbs CSS (https://github.com/woocommerce/woocommerce-admin/pull/2096) * Use CSS variables in the Activity Panel and breadcrumbs CSS * Cleanup * Focus on table element when navigating pages
2019-04-30 09:43:55 +00:00
Onboarding: Add the task list dashboard (https://github.com/woocommerce/woocommerce-admin/pull/2654) * Add task list dashboard page * Add actual site URL to header * Fix typos * Remove app bar * Use material icons * Update material icons to use Google hosted font * Localize description strings
2019-07-18 10:11:21 +00:00
// Sidebar
$sidebar-width: 272px;
Format todo comments to match WC Core format (https://github.com/woocommerce/woocommerce-admin/pull/1474) * Format todo comments to match WC Core format * Remove variations todo comment
2019-02-06 06:41:53 +00:00
// @todo Remove this spacing variable
Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203) * ActivityCard: Update to match new activity panel designs * Add spacing rhythm system, add the rest of the base colors * Add styles for the ActivityCard * Use the new ActivityCard in the orders panel * Update text color & size * Disable timestamped test (string changes based on date) * Use moment to generate a relative timestamp to match “3 days ago” snapshot * Rename spacing vars The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 13:53:38 +00:00
$spacing: 16px;
add theming to Gutenberg components'
2018-07-20 03:40:15 +00:00
Component styles: Explicitly import from Gutenberg (https://github.com/woocommerce/woocommerce-admin/pull/3292) * Fix Gutenberg style imports * remove duplicate variables * remove extra variables * remove duplicate imports * move base style imports to webpack
2019-11-22 00:19:37 +00:00
// Gutenberg variable overrides.
Update to Color Studio v2.1.0 (https://github.com/woocommerce/woocommerce-admin/pull/2837) * Update color-studio to v2.1.0 * Handle additional color updates after rebase.
2019-08-29 16:07:56 +00:00
$white: $studio-white;
$black: $studio-black;
add theming to Gutenberg components'
2018-07-20 03:40:15 +00:00
$alert-red: $error-red;
Import all used Gutenberg component styles. (https://github.com/woocommerce/woocommerce-admin/pull/2679) Fixes postcss theme overrides.
2019-08-15 16:51:21 +00:00
$alert-yellow: $notice-yellow;
$alert-green: $valid-green;
Set minimum content height to prevent cutoff of absolute content (https://github.com/woocommerce/woocommerce-admin/pull/1166) * Set minimum content height to prevent cutoff of absolute content * Add admin bar height vars for SCSS and apply them
2018-12-25 04:34:24 +00:00
// WordPress defaults
$adminbar-height: 32px;
$adminbar-height-mobile: 46px;
Update Card component to use Muriel design (https://github.com/woocommerce/woocommerce-admin/pull/2252) * Use Muriel card styling and override card styles in reports * Add card description prop * Add isInactive prop and styling to card component
2019-05-22 08:38:25 +00:00
Update to Color Studio v2.1.0 (https://github.com/woocommerce/woocommerce-admin/pull/2837) * Update color-studio to v2.1.0 * Handle additional color updates after rebase.
2019-08-29 16:07:56 +00:00
// wp-admin colors
$wp-admin-background: #f1f1f1;
$wp-admin-sidebar: #24292d;
Update Card component to use Muriel design (https://github.com/woocommerce/woocommerce-admin/pull/2252) * Use Muriel card styling and override card styles in reports * Add card description prop * Add isInactive prop and styling to card component
2019-05-22 08:38:25 +00:00
// Muriel
Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759) Fixes woocommerce/woocommerce-admin#4732 This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well. There are 3 major changes required as part of updating: 1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before. 2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color. 3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
2020-07-17 00:11:42 +00:00
$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2),
0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14);
$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);