Base table styles for Scales CSS
These are the base styles for creating tables.
Scales uses the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.
* NPM: npm install --save @scales/base-tables
Tables can get pretty crazy. Take a look at this example with some of the classes that Scales provides and how to use them:
```
Lorem
Ipsum
Dolor
Sit
Sit
Dolor
03.788
Lorem
Dolor
32.210
Lorem
Dolor
47.797
Lorem
Sit
Dolor
09.640
Lorem
Dolor
12.117
Lorem
* .Table.Numerical
* .Table--spacing-large
* .Table--spacing-medium
* .Table--spacing-small
* .Table--bordered
* .Table--bordered-inside
* .Table--bordered-rows
* .Table--bordered-rows-inside
* .Table--bordered-columns
* .Table--bordered-columns-inside
* .Table--striped-odd
* .Table--striped-even
* .TableHighlight
* .Table--fixed
*
* $table-padding-large$table-padding-medium
* $table-padding-small
* $table-border-width
* $table-border-style
* $table-border-color
* $table-stripe-color
* $table-highlight-color
* $table-highlight-text-color
* $table-heading-alignment
* $table-cell-alignment
*
#### The Scales Namespace Variable
All Scales patterns expose the $scales-namespace variable.
$scales-namespace accepts a string that will prefix all Scales classes. The default value is null.
#### Class Level Namespace Variable
Class level namespace variables allow you to namespace a selector based on the type e.g. b- for "base", o- for "objects", u- for utilities, and c- for "components".
This pattern exposes the $scales-base-class-namespace variable.
$scales-base-class-namespace accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is null.
#### Namespace Variable Usage
To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:
``
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
These table styles simply provide a base for tables. In your project or theme, you can easily extend tables for your own purposes. For example:
`
// Change variables before importing
$table-border-color: red;
$table-border-style: dashed;
// Import tables partial
@import your-project/scalescss/base-tables/tables
//
// Primary table styles
///
.Table--primary {
th {
background-color: #0074D9;
color: #fff;
border: 0;
}
tr:hover {
background-color: #f8fb9b;
color: #333;
}
}
````
Lorem
Ipsum
Dolor
Sit
Sit
Dolor
03.788
Lorem
Dolor
32.210
Lorem
Dolor
47.797
Lorem
Sit
Dolor
09.640
Lorem
Dolor
12.117
Lorem