diff options
Diffstat (limited to 'assets/sass/@primer/css/table-object')
-rw-r--r-- | assets/sass/@primer/css/table-object/README.md | 25 | ||||
-rw-r--r-- | assets/sass/@primer/css/table-object/index.scss | 1 | ||||
-rw-r--r-- | assets/sass/@primer/css/table-object/table-object.scss | 20 |
3 files changed, 46 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/table-object/README.md b/assets/sass/@primer/css/table-object/README.md new file mode 100644 index 0000000..148fab2 --- /dev/null +++ b/assets/sass/@primer/css/table-object/README.md @@ -0,0 +1,25 @@ +--- +bundle: "table-object" +generated: true +--- + +# Primer CSS: `table-object` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/table-object/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/table-object/index.scss b/assets/sass/@primer/css/table-object/index.scss new file mode 100644 index 0000000..295bcfb --- /dev/null +++ b/assets/sass/@primer/css/table-object/index.scss @@ -0,0 +1 @@ +@import "./table-object.scss"; diff --git a/assets/sass/@primer/css/table-object/table-object.scss b/assets/sass/@primer/css/table-object/table-object.scss new file mode 100644 index 0000000..353c732 --- /dev/null +++ b/assets/sass/@primer/css/table-object/table-object.scss @@ -0,0 +1,20 @@ +// TableObject is a module for creating dynamically resizable elements that +// always sit on the same horizontal line (e.g., they never wrap). Using +// tables means it's cross browser friendly. + +.TableObject { + display: table; +} + +// Place this on every "cell" +.TableObject-item { + display: table-cell; + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +// Place this on the largest or most important "cell" +.TableObject-item--primary { + width: 99%; +} |