summaryrefslogtreecommitdiffstats
path: root/assets/sass/@primer/css/table-object
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/@primer/css/table-object')
-rw-r--r--assets/sass/@primer/css/table-object/README.md25
-rw-r--r--assets/sass/@primer/css/table-object/index.scss1
-rw-r--r--assets/sass/@primer/css/table-object/table-object.scss20
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%;
+}