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
History
Albert Juhé Lluveras 090ecf3a8a IE11: fix CSS grid in Summary (https://github.com/woocommerce/woocommerce-admin/pull/353) 
* Fix Summary values not visible with IE11

* Fix Summary grid for IE11

* Move grid position mixin to _mixins file, so it can be used for other elements

* Remove set-grid-positions mixin and improve code understandability
 		2018-09-06 17:11:34 +02:00
..
abstracts IE11: fix CSS grid in Summary (https://github.com/woocommerce/woocommerce-admin/pull/353) 2018-09-06 17:11:34 +02:00
shared Add loading indicators, error state, and EmptyContent to the revenue report. (#347, woocommerce/woocommerce-admin#348) 2018-09-05 12:45:49 -04:00
README.md Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274) 2018-08-06 11:30:43 -04:00
_embedded.scss Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274) 2018-08-06 11:30:43 -04:00
_index.scss Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274) 2018-08-06 11:30:43 -04:00

README.md

CSS

Folder/File Structure

  • /abstracts/* – this contains all mixins/variables/etc, things that won't appear in compiled CSS
  • /shared/* – these are the styles that will appear in compiled CSS - the reset, gutenberg components import, etc
  • /_embedded.scss – this file is used for the embed pages CSS, and is imported in embedded.js only
  • /_index.scss – this file is used for the app's CSS, and is imported in index.js only

Naming: Component classes

To avoid class name collisions between elements of the woo app and to the enclosing WordPress dashboard, class names must adhere to the following guidelines:

Any default export of a folder's index.js must be prefixed with woocommerce- followed by the directory name in which it resides:

.woocommerce-[ directory name ]

(Example: .woocommerce-card from components/card/index.js)

For any descendant of the top-level (index.js) element, prefix using the top-level element's class name separated by two underscores:

.woocommerce-[ directory name ]__[ descendant description ]

(Example: .woocommerce-card__title, or .woocommerce-ellipsis-menu__item)

For optional variations of an element or its descendants, you may use a modifier class, but you must not apply styles to the modifier class directly; only as an additional selector to the element to which the modifier applies:

.woocommerce-[ directory name ].is-[ modifier description ] .woocommerce-[ directory name ]__[ descendant description ].is-[ modifier description ]

(Example: .woocommerce-ellipsis-menu__item.is-active )

In all of the above cases, except in separating the top-level element from its descendants, you must use dash delimiters when expressing multiple terms of a name. You can use .is-* or .has-* to describe element states.

You may observe that these conventions adhere closely to the BEM (Blocks, Elements, Modifiers) CSS methodology, with minor adjustments to the application of modifiers.

Naming: Layout classes

All layout classes use the .woocommerce-layout__ prefix:

.woocommerce-layout__[ section ]

(Example: .woocommerce-layout__activity-panel )

If the section has children elements, prefix a description with the section class name:

.woocommerce-layout__[ section ]-[ descendant description ]

(Example: .woocommerce-layout__activity-panel-title )

Naming: Dashboard classes

All dashboard components use the .woocommerce-dashboard__ prefix:

.woocommerce-dashboard__[ section ]

(Example: .woocommerce-dashboard__widget )

Naming: Analytics classes

All analytics components use the .woocommerce-analytics__ prefix.