@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.3

package/styles/utilities/_dimensions.scss

@@ -1,265 +1,51 @@
-/*
-@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 };
+$enums: (
+  'none': 0,
+  '0\\.25': .25em,
+  '0\\.5': .5em,
+  '0\\.75': .75em,
+  '1': 1em,
+  '1\\.25': 1.25em,
+  '1\\.5': 1.5em,
+  '2': 2em,
+  '3': 3em,
+  '4': 4em,
+  '5': 5em,
+  '6': 6em,
+  '8': 8em,
+  '10': 10em,
+  '12': 12em,
+  '14': 14em,
+  '16': 16em,
+  '18': 18em,
+  '20': 20em,
+  '22': 22em,
+  '24': 24em,
+  '26': 26em,
+  '28': 28em,
+  '30': 30em,
+  '32': 32em,
+  '36': 36em,
+  '40': 40em,
+  '48': 48em,
+  '60': 60em,
+  '10-pct': 10%,
+  '20-pct': 20%,
+  '30-pct': 30%,
+  '40-pct': 40%,
+  '50-pct': 50%,
+  '60-pct': 60%,
+  '70-pct': 70%,
+  '80-pct': 80%,
+  '90-pct': 90%,
+  '100-pct': 100%,
+  'auto': auto,
+);
+
+@each $enum, $value in $enums {
+  .height--#{$enum} { height: $value; }
+  .max-height--#{$enum} { max-height: $value; }
+  .min-height--#{$enum} { min-height: $value; }
+  .width--#{$enum} { width: $value; }
+  .max-width--#{$enum} { max-width: $value; }
+  .min-width--#{$enum} { min-width: $value; }
+}

package/styles/utilities/_display.scss

@@ -1,71 +1,8 @@
-/*
-@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; }
+.display--n { display: none; }

package/styles/utilities/_overflow.scss

@@ -1,58 +1,3 @@
-/*
-@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; }

package/styles/utilities/_radii.scss

@@ -34,37 +34,109 @@ Radii can also be applied to each side of an element individually like so:
 
 // === 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--tiny   { border-radius: var(--radius--tiny); }
+.rounded--small  { border-radius: var(--radius--small); }
+.rounded--med    { border-radius: var(--radius--med); }
+.rounded--large  { border-radius: var(--radius--large); }
+.rounded--circle { border-radius: var(--radius--circle); }
+.rounded--pill   { border-radius: 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-top--tiny   {
+  border-top-left-radius: var(--radius--tiny);
+  border-top-right-radius: var(--radius--tiny);
+}
+.rounded-top--small  {
+  border-top-left-radius: var(--radius--small);
+  border-top-right-radius: var(--radius--small);
+}
+.rounded-top--med    {
+  border-top-left-radius: var(--radius--med);
+  border-top-right-radius: var(--radius--med);
+}
+.rounded-top--large  {
+  border-top-left-radius: var(--radius--large);
+  border-top-right-radius: var(--radius--large);
+}
+.rounded-top--circle {
+  border-top-left-radius: var(--radius--circle);
+  border-top-right-radius: var(--radius--circle);
+}
+.rounded-top--pill   {
+  border-top-left-radius: var(--radius--pill);
+  border-top-right-radius: 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-right--tiny   {
+  border-top-right-radius: var(--radius--tiny);
+  border-bottom-right-radius: var(--radius--tiny);
+}
+.rounded-right--small  {
+  border-top-right-radius: var(--radius--small);
+  border-bottom-right-radius: var(--radius--small);
+}
+.rounded-right--med    {
+  border-top-right-radius: var(--radius--med);
+  border-bottom-right-radius: var(--radius--med);
+}
+.rounded-right--large  {
+  border-top-right-radius: var(--radius--large);
+  border-bottom-right-radius: var(--radius--large);
+}
+.rounded-right--circle {
+  border-top-right-radius: var(--radius--circle);
+  border-bottom-right-radius: var(--radius--circle);
+}
+.rounded-right--pill   {
+  border-top-right-radius: var(--radius--pill);
+  border-bottom-right-radius: 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-bottom--tiny   {
+  border-bottom-left-radius: var(--radius--tiny);
+  border-bottom-right-radius: var(--radius--tiny);
+}
+.rounded-bottom--small  {
+  border-bottom-left-radius: var(--radius--small);
+  border-bottom-right-radius: var(--radius--small);
+}
+.rounded-bottom--med    {
+  border-bottom-left-radius: var(--radius--med);
+  border-bottom-right-radius: var(--radius--med);
+}
+.rounded-bottom--large  {
+  border-bottom-left-radius: var(--radius--large);
+  border-bottom-right-radius: var(--radius--large);
+}
+.rounded-bottom--circle {
+  border-bottom-left-radius: var(--radius--circle);
+  border-bottom-right-radius: var(--radius--circle);
+}
+.rounded-bottom--pill   {
+  border-bottom-left-radius: var(--radius--pill);
+  border-bottom-right-radius: 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)); }
+.rounded-left--tiny   {
+  border-top-left-radius: var(--radius--tiny);
+  border-bottom-left-radius: var(--radius--tiny);
+}
+.rounded-left--small  {
+  border-top-left-radius: var(--radius--small);
+  border-bottom-left-radius: var(--radius--small);
+}
+.rounded-left--med    {
+  border-top-left-radius: var(--radius--med);
+  border-bottom-left-radius: var(--radius--med);
+}
+.rounded-left--large  {
+  border-top-left-radius: var(--radius--large);
+  border-bottom-left-radius: var(--radius--large);
+}
+.rounded-left--circle {
+  border-top-left-radius: var(--radius--circle);
+  border-bottom-left-radius: var(--radius--circle);
+}
+.rounded-left--pill   {
+  border-top-left-radius: var(--radius--pill);
+  border-bottom-left-radius: var(--radius--pill);
+}

package/styles/utilities/_shadows.scss

@@ -1,62 +1,3 @@
-/*
-@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);
 }