@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/utilities/_dimensions.scss

@@ -0,0 +1,265 @@
+/*
+@styleguide
+@title Heights
+
+**Element heights can be set using enums representing a sliding scale of ems:**
+
+`0.25`, `0.5`, `0.75`, `1`, `1.5`, `2`, `3`, `4`, `5`, `6`, `8`, `10`, `12`, `14`, `16`, `18`, `20`, `22`, `24`, `26`, `28`, `30`, `32`, `36`, `40`, `48`, `60`
+
+<div class="height--0.75 border b-color--dscout"></div>
+
+```html
+<div class="height--0.75 border b-color--dscout"></div>
+```
+
+<div class="height--4 border b-color--dscout"></div>
+
+```html
+<div class="height--4 border b-color--dscout"></div>
+```
+
+**Or as a percentage in multiples of 10, e.g., `height--40-pct`.**
+
+<div class="height--10">
+  <div class="height--50-pct border b-color--dscout"></div>
+</div>
+
+```html
+<div class="height--10">
+  <div class="height--50-pct border b-color--dscout"></div>
+</div>
+```
+
+**Or set to `none` or `auto`.**
+*/
+
+// === HEIGHTS === //
+
+.height--none { height: 0; }
+
+.height--0\.25 { height: .25em };
+.height--0\.5  { height: .5em };
+.height--0\.75 { height: .75em };
+.height--1     { height: 1em };
+.height--1\.5  { height: 1.5em };
+.height--2     { height: 2em };
+.height--3     { height: 3em };
+.height--4     { height: 4em };
+.height--5     { height: 5em };
+.height--6     { height: 6em };
+.height--8     { height: 8em };
+.height--10    { height: 10em };
+.height--12    { height: 12em };
+.height--14    { height: 14em };
+.height--16    { height: 16em };
+.height--18    { height: 18em };
+.height--20    { height: 20em };
+.height--22    { height: 22em };
+.height--24    { height: 24em };
+.height--26    { height: 26em };
+.height--28    { height: 28em };
+.height--30    { height: 30em };
+.height--32    { height: 32em };
+.height--36    { height: 36em };
+.height--40    { height: 40em };
+.height--48    { height: 48em };
+.height--60    { height: 60em };
+
+.height--10-pct  { height: 10%; }
+.height--20-pct  { height: 20%; }
+.height--30-pct  { height: 30%; }
+.height--40-pct  { height: 40%; }
+.height--50-pct  { height: 50%; }
+.height--60-pct  { height: 60%; }
+.height--70-pct  { height: 70%; }
+.height--80-pct  { height: 80%; }
+.height--90-pct  { height: 90%; }
+.height--100-pct { height: 100%; }
+
+/*
+@styleguide
+@title Max-Heights
+
+Max-heights can be set to the same enums as height classes. E.g.:
+
+- `max-height--auto`
+- `max-height--12`
+- `max-height--90-pct`
+*/
+// === MAX HEIGHTS === //
+
+.max-height--none    { max-height: none; }
+.max-height--auto    { max-height: auto; }
+
+.max-height--10-pct  { max-height: 10%; }
+.max-height--20-pct  { max-height: 20%; }
+.max-height--30-pct  { max-height: 30%; }
+.max-height--40-pct  { max-height: 40%; }
+.max-height--50-pct  { max-height: 50%; }
+.max-height--60-pct  { max-height: 60%; }
+.max-height--70-pct  { max-height: 70%; }
+.max-height--80-pct  { max-height: 80%; }
+.max-height--90-pct  { max-height: 90%; }
+.max-height--100-pct { max-height: 100%; }
+
+.max-height--0\.25 { max-height: .25em };
+.max-height--0\.5  { max-height: .5em };
+.max-height--0\.75 { max-height: .75em };
+.max-height--1     { max-height: 1em };
+.max-height--1\.5  { max-height: 1.5em };
+.max-height--2     { max-height: 2em };
+.max-height--3     { max-height: 3em };
+.max-height--4     { max-height: 4em };
+.max-height--5     { max-height: 5em };
+.max-height--6     { max-height: 6em };
+.max-height--8     { max-height: 8em };
+.max-height--10    { max-height: 10em };
+.max-height--12    { max-height: 12em };
+.max-height--14    { max-height: 14em };
+.max-height--16    { max-height: 16em };
+.max-height--18    { max-height: 18em };
+.max-height--20    { max-height: 20em };
+.max-height--22    { max-height: 22em };
+.max-height--24    { max-height: 24em };
+.max-height--26    { max-height: 26em };
+.max-height--28    { max-height: 28em };
+.max-height--30    { max-height: 30em };
+.max-height--32    { max-height: 32em };
+.max-height--36    { max-height: 36em };
+.max-height--40    { max-height: 40em };
+.max-height--48    { max-height: 48em };
+.max-height--60    { max-height: 60em };
+
+/*
+@styleguide
+@title Widths
+
+**Element widths can be set using enums representing a sliding scale of ems:**
+
+`0.25`, `0.5`, `0.75`, `1`, `1.5`, `2`, `3`, `4`, `5`, `6`, `8`, `10`, `12`, `14`, `16`, `18`, `20`, `22`, `24`, `26`, `28`, `30`, `32`, `36`, `40`, `48`, `60`
+
+<div class="width--0.75 height--1 border b-color--dscout"></div>
+
+```html
+<div class="width--0.75 height--1 border b-color--dscout"></div>
+```
+
+<div class="width--4 height--1 border b-color--dscout"></div>
+
+```html
+<div class="width--4 height--1 border b-color--dscout"></div>
+```
+
+**Or as percentages in multiples of 10, e.g., `width--40-pct`**
+
+<div class="width--100-pct">
+  <div class="width--40-pct height--1 border b-color--dscout"></div>
+</div>
+
+```html
+<div class="width--100-pct">
+  <div class="width--40-pct height--1 border b-color--dscout"></div>
+</div>
+```
+
+**Or set to `none` or `auto`.**
+
+*/
+// === WIDTHS === //
+
+.width--none { width: 0; }
+.width--auto { width: auto; }
+
+.width--0\.25 { width: .25em };
+.width--0\.5  { width: .5em };
+.width--0\.75 { width: .75em };
+.width--1     { width: 1em };
+.width--1\.5  { width: 1.5em };
+.width--2     { width: 2em };
+.width--3     { width: 3em };
+.width--4     { width: 4em };
+.width--5     { width: 5em };
+.width--6     { width: 6em };
+.width--8     { width: 8em };
+.width--10    { width: 10em };
+.width--12    { width: 12em };
+.width--14    { width: 14em };
+.width--16    { width: 16em };
+.width--18    { width: 18em };
+.width--20    { width: 20em };
+.width--22    { width: 22em };
+.width--24    { width: 24em };
+.width--26    { width: 26em };
+.width--28    { width: 28em };
+.width--30    { width: 30em };
+.width--32    { width: 32em };
+.width--36    { width: 36em };
+.width--40    { width: 40em };
+.width--48    { width: 48em };
+.width--60    { width: 60em };
+
+.width--10-pct  { width: 10%; }
+.width--20-pct  { width: 20%; }
+.width--30-pct  { width: 30%; }
+.width--40-pct  { width: 40%; }
+.width--50-pct  { width: 50%; }
+.width--60-pct  { width: 60%; }
+.width--70-pct  { width: 70%; }
+.width--80-pct  { width: 80%; }
+.width--90-pct  { width: 90%; }
+.width--100-pct { width: 100%; }
+
+/*
+@styleguide
+@title Max-Widths
+
+Max-widths can be set to the same enums as width classes. E.g.:
+
+- `max-width--auto`
+- `max-width--12`
+- `max-width--90-pct`
+
+*/
+// === MAX WIDTHS === //
+
+.max-width--none    { max-width: none; }
+.max-width--auto    { max-width: auto; }
+
+.max-width--10-pct  { max-width: 10%; }
+.max-width--20-pct  { max-width: 20%; }
+.max-width--30-pct  { max-width: 30%; }
+.max-width--40-pct  { max-width: 40%; }
+.max-width--50-pct  { max-width: 50%; }
+.max-width--60-pct  { max-width: 60%; }
+.max-width--70-pct  { max-width: 70%; }
+.max-width--80-pct  { max-width: 80%; }
+.max-width--90-pct  { max-width: 90%; }
+.max-width--100-pct { max-width: 100%; }
+
+.max-width--0\.25 { max-width: .25em };
+.max-width--0\.5  { max-width: .5em };
+.max-width--0\.75 { max-width: .75em };
+.max-width--1     { max-width: 1em };
+.max-width--1\.5  { max-width: 1.5em };
+.max-width--2     { max-width: 2em };
+.max-width--3     { max-width: 3em };
+.max-width--4     { max-width: 4em };
+.max-width--5     { max-width: 5em };
+.max-width--6     { max-width: 6em };
+.max-width--8     { max-width: 8em };
+.max-width--10    { max-width: 10em };
+.max-width--12    { max-width: 12em };
+.max-width--14    { max-width: 14em };
+.max-width--16    { max-width: 16em };
+.max-width--18    { max-width: 18em };
+.max-width--20    { max-width: 20em };
+.max-width--22    { max-width: 22em };
+.max-width--24    { max-width: 24em };
+.max-width--26    { max-width: 26em };
+.max-width--28    { max-width: 28em };
+.max-width--30    { max-width: 30em };
+.max-width--32    { max-width: 32em };
+.max-width--36    { max-width: 36em };
+.max-width--40    { max-width: 40em };
+.max-width--48    { max-width: 48em };
+.max-width--60    { max-width: 60em };

package/styles/utilities/_display.scss

@@ -0,0 +1,71 @@
+/*
+@styleguide
+@title Display
+
+Control how an element is displayed. Possible display values are:
+- `n` (none)
+- `i` (inline)
+- `b` (block)
+- `ib` (inline-block)
+- `it` (inline-table)
+- `t` (table)
+- `tc` (table-cell)
+- `t-row` (table-row)
+- `t-row-group` (table-row-group)
+- `t-column` (table-column)
+- `t-column-group` (table-column-group)
+- `f` (flex)
+
+<div class="display--n">Hidden</div>
+
+```html
+<div class="display--n">Hidden</div>
+```
+
+<div class="display--i">Inline</div><div class="display--i">Inline</div>
+
+```html
+<div class="display--i">Inline</div><div class="display--i">Inline</div>
+```
+
+<div>
+  <span class="display--b">Block</span>
+  <span class="display--b">Block</span>
+</div>
+
+```html
+<span class="display--b">Block</span>
+<span class="display--b">Block</span>
+```
+
+<div>
+  <p class="display--ib">Inline Block</p><p class="display--ib">Inline Block</p>
+</div>
+
+```html
+<p class="display--ib">Inline Block</p>
+<p class="display--ib">Inline Block</p>
+```
+
+<div class="display--f">Flex</div>
+
+```html
+<div class="display--f">Flex</div>
+```
+*/
+
+// === DISPLAY === //
+
+.display--n { display: none; }
+.display--i { display: inline; }
+.display--b { display: block; }
+.display--ib { display: inline-block; }
+.display--it { display: inline-table; }
+.display--t { display: table; }
+.display--tc { display: table-cell; }
+.display--t-row { display: table-row; }
+.display--t-row-group { display: table-row-group; }
+.display--t-column { display: table-column; }
+.display--t-column-group { display: table-column-group; }
+.display--f { display: flex; }
+.display--if { display: inline-flex; }

package/styles/utilities/_overflow.scss

@@ -0,0 +1,74 @@
+/*
+@styleguide
+@title Overflow
+
+Use these classes to control an element's overflow
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow--auto">
+  <div class="width--12 height--12 bg-color--marker">overflow auto</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow--hidden">
+  <div class="width--12 height--12 bg-color--marker">overflow hidden</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow--scroll">
+  <div class="width--12 height--12 bg-color--marker">overflow scroll</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow--visible">
+  <div class="width--12 height--12 bg-color--marker">overflow visible</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-x--auto">
+  <div class="width--12 height--12 bg-color--marker">overflow-x auto</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-x--hidden">
+  <div class="width--12 height--12 bg-color--marker">overflow-x hidden</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-x--scroll">
+  <div class="width--12 height--12 bg-color--marker">overflow-x scroll</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-x--visible">
+  <div class="width--12 height--12 bg-color--marker">overflow-x visible</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-y--auto">
+  <div class="width--12 height--12 bg-color--marker">overflow-y auto</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-y--hidden">
+  <div class="width--12 height--12 bg-color--marker">overflow-y hidden</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-y--scroll">
+  <div class="width--12 height--12 bg-color--marker">overflow-y scroll</div>
+</div>
+
+<div class="width--10 height--10 padding--2 bg-color--note overflow-y--visible">
+  <div class="width--12 height--12 bg-color--marker">overflow-y visible</div>
+</div>
+*/
+
+// === OVERFLOW === //
+
+.overflow--auto { overflow: auto; }
+.overflow--hidden { overflow: hidden; }
+.overflow--scroll { overflow: scroll; }
+.overflow--visible { overflow: visible; }
+.overflow--inherit { overflow: inherit; }
+
+.overflow-x--auto { overflow-x: auto; }
+.overflow-x--hidden { overflow-x: hidden; }
+.overflow-x--scroll { overflow-x: scroll; }
+.overflow-x--visible { overflow-x: visible; }
+.overflow-x--inherit { overflow-x: inherit; }
+
+.overflow-y--auto { overflow-y: auto; }
+.overflow-y--hidden { overflow-y: hidden; }
+.overflow-y--scroll { overflow-y: scroll; }
+.overflow-y--visible { overflow-y: visible; }
+.overflow-y--inherit { overflow-y: inherit; }

package/styles/utilities/_position.scss

@@ -0,0 +1,107 @@
+/*
+@styleguide
+@title Positioning
+
+Use positioning classes to control how elements are laid out in relation to
+the viewport or other elements.
+
+Position classes have the following values:
+- `a` (absolute)
+- `f` (fixed)
+- `r` (relative)
+- `s` (static)
+- `i` (inherit)
+
+You can also specify top, right, bottom, and left positions using the following
+syntax {side}--{space}, e.g., `top--0.25`.
+
+Space values are:
+- `0`
+- `0.25`
+- `0.5`
+- `0.75`
+- `1`
+- `1.5`
+- `2`
+
+<div class="position--r height--l">
+  <div class="position--a bottom--0 right--0">
+    Stuck to the bottom right
+  </div>
+</div>
+
+```html
+<div class="border b-color--main position--r height--l">
+  <div class="position--a bottom--0 right--0">
+    Stuck to the bottom right
+  </div>
+</div>
+```
+
+There is also an `absolute--fill` class that
+will stretch an element to all four corners of its parent:
+
+<div class="position--r height--l width--100-pct">
+  <div class="position--a absolute--fill bg-color--dscout">
+    Absolute Fill
+  </div>
+</div>
+
+```html
+<div class="position--r height--l width--100-pct">
+  <div class="position--a absolute--fill bg-color--dscout">
+    Absolute Fill
+  </div>
+</div>
+```
+*/
+
+// === POSITIONING === //
+
+.position--a { position: absolute; }
+.position--f { position: fixed; }
+.position--r { position: relative; }
+.position--s { position: static; }
+.position--i { position: inherit; }
+
+.top--0    { top:    0; }
+.right--0  { right:  0; }
+.bottom--0 { bottom: 0; }
+.left--0   { left:   0; }
+
+.top--0\.25    { top:    .25em; }
+.right--0\.25  { right:  .25em; }
+.bottom--0\.25 { bottom: .25em; }
+.left--0\.25   { left:   .25em; }
+
+.top--0\.5    { top:    .5em; }
+.right--0\.5  { right:  .5em; }
+.bottom--0\.5 { bottom: .5em; }
+.left--0\.5   { left:   .5em; }
+
+.top--0\.75    { top:    .75em; }
+.right--0\.75  { right:  .75em; }
+.bottom--0\.75 { bottom: .75em; }
+.left--0\.75   { left:   .75em; }
+
+.top--1    { top:    1em; }
+.right--1  { right:  1em; }
+.bottom--1 { bottom: 1em; }
+.left--1   { left:   1em; }
+
+.top--1\.5    { top:    1.5em; }
+.right--1\.5  { right:  1.5em; }
+.bottom--1\.5 { bottom: 1.5em; }
+.left--1\.5   { left:   1.5em; }
+
+.top--2    { top:    2em; }
+.right--2  { right:  2em; }
+.bottom--2 { bottom: 2em; }
+.left--2   { left:   2em; }
+
+.absolute--fill {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

package/styles/utilities/_radii.scss

@@ -0,0 +1,70 @@
+/*
+@styleguide
+@title Border Radii
+
+Use rounded classes to set the border radius of an element.
+Pre-defined sizes are:
+
+- `tiny`
+- `small`
+- `med`
+- `large`
+- `circle`
+- `pill`
+
+<div class="rounded--med bg-color--dscout color--invert padding--1">Medium Rounded</div>
+
+```html
+<div class="rounded--med bg-color--dscout color--invert padding--1">Medium Rounded</div>
+```
+
+Radii can also be applied to each side of an element individually like so:
+
+- `top`
+- `right`
+- `bottom`
+- `left`
+
+<div class="rounded-right--large bg-color--dscout color--invert padding--1">Rounded right</div>
+
+```html
+<div class="rounded-right--large bg-color--dscout color--invert padding--1">Rounded right</div>
+```
+*/
+
+// === RADII === //
+
+.rounded--tiny   { @include rounded(var(--radius--tiny)); }
+.rounded--small  { @include rounded(var(--radius--small)); }
+.rounded--med    { @include rounded(var(--radius--med)); }
+.rounded--large  { @include rounded(var(--radius--large)); }
+.rounded--circle { @include rounded(var(--radius--circle)); }
+.rounded--pill   { @include rounded(var(--radius--pill)); }
+
+.rounded-top--tiny   { @include rounded-top(var(--radius--tiny)); }
+.rounded-top--small  { @include rounded-top(var(--radius--small)); }
+.rounded-top--med    { @include rounded-top(var(--radius--med)); }
+.rounded-top--large  { @include rounded-top(var(--radius--large)); }
+.rounded-top--circle { @include rounded-top(var(--radius--circle)); }
+.rounded-top--pill   { @include rounded-top(var(--radius--pill)); }
+
+.rounded-right--tiny   { @include rounded-right(var(--radius--tiny)); }
+.rounded-right--small  { @include rounded-right(var(--radius--small)); }
+.rounded-right--med    { @include rounded-right(var(--radius--med)); }
+.rounded-right--large  { @include rounded-right(var(--radius--large)); }
+.rounded-right--circle { @include rounded-right(var(--radius--circle)); }
+.rounded-right--pill   { @include rounded-right(var(--radius--pill)); }
+
+.rounded-bottom--tiny   { @include rounded-bottom(var(--radius--tiny)); }
+.rounded-bottom--small  { @include rounded-bottom(var(--radius--small)); }
+.rounded-bottom--med    { @include rounded-bottom(var(--radius--med)); }
+.rounded-bottom--large  { @include rounded-bottom(var(--radius--large)); }
+.rounded-bottom--circle { @include rounded-bottom(var(--radius--circle)); }
+.rounded-bottom--pill   { @include rounded-bottom(var(--radius--pill)); }
+
+.rounded-left--tiny   { @include rounded-left(var(--radius--tiny)); }
+.rounded-left--small  { @include rounded-left(var(--radius--small)); }
+.rounded-left--med    { @include rounded-left(var(--radius--med)); }
+.rounded-left--large  { @include rounded-left(var(--radius--large)); }
+.rounded-left--circle { @include rounded-left(var(--radius--circle)); }
+.rounded-left--pill   { @include rounded-left(var(--radius--pill)); }

package/styles/utilities/_resizing.scss

@@ -0,0 +1,42 @@
+/*
+@styleguide
+@title Resizing
+
+Set the `resize` property to one of the following enums:
+- `horizontal`
+- `vertical`
+- `both`
+- `none`
+
+This is primarily useful for constraining textareas, which are resizable by
+default. However, it can be applied to any element.
+
+<textarea class="resize--vertical"></textarea>
+
+```html
+<textarea class="resize--vertical"></textarea>
+```
+
+<textarea class="resize--horizontal"></textarea>
+
+```html
+<textarea class="resize--horizontal"></textarea>
+```
+
+<textarea class="resize--both"></textarea>
+
+```html
+<textarea class="resize--both"></textarea>
+```
+
+<textarea class="resize--none"></textarea>
+
+```html
+<textarea class="resize--none"></textarea>
+```
+*/
+
+.resize--horizontal { resize: horizontal; }
+.resize--vertical   { resize: vertical; }
+.resize--both       { resize: both; }
+.resize--none       { resize: none; }

package/styles/utilities/_shadows.scss

@@ -0,0 +1,74 @@
+/*
+@styleguide
+@title Shadows
+
+Apply a box shadow.
+
+<div class="padding--2 bg-color--gray-5">
+  <div class="shadow--s bg-color--invert padding--1">
+    Small shadow. Used to indicate that an element is not interactive.
+  </div>
+</div>
+
+```html
+<div class="shadow--s bg-color--invert padding--1">
+  Small shadow. Used to indicate that an element is not interactive.
+</div>
+```
+
+<div class="padding--2 bg-color--gray-5">
+  <div class="shadow--m bg-color--invert padding--1">
+    Medium shadow. Used to indicate that an element is interactive.
+  </div>
+</div>
+
+```html
+<div class="shadow--m bg-color--invert padding--1">
+  Medium shadow. Used to indicate that an element is interactive.
+</div>
+```
+
+<div class="padding--2 bg-color--gray-5">
+  <div class="shadow--l bg-color--invert padding--1">
+    Large shadow. Used to indicate that an element is being interacted with,
+    e.g. hovered over.
+  </div>
+</div>
+
+```html
+<div class="shadow--l bg-color--invert padding--1">
+  Large shadow. Used to indicate that an element is being interacted with,
+  e.g. hovered over.
+</div>
+```
+
+<div class="padding--2 bg-color--gray-5">
+  <div class="shadow--xl bg-color--invert padding--1">
+    Extra large shadow. Used for maximum separation from the background,
+    such as when a container is in its edit state.
+  </div>
+</div>
+
+```html
+<div class="shadow--xl bg-color--invert padding--1">
+  Extra large shadow. Used for maximum separation from the background,
+  such as when a container is in its edit state.
+</div>
+```
+*/
+
+.shadow--s {
+  box-shadow: var(--shadow--s);
+}
+
+.shadow--m {
+  box-shadow: var(--shadow--m);
+}
+
+.shadow--l {
+  box-shadow: var(--shadow--l);
+}
+
+.shadow--xl {
+  box-shadow: var(--shadow--xl);
+}