@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/_helpers.scss

@@ -1,660 +0,0 @@
-@import 'mixins';
-@import 'variables';
-
-/*
-@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="bg-color--dscout rounded--med">Medium Rounded</div>
-
-    <div class="bg-color--dscout rounded--med">Medium Rounded</div>
-
-Radii can also be applied to each side of an element individually like so:
-
-- top
-- right
-- bottom
-- left
-
-<div class="bg-color--dscout rounded-right--large">Rounded right</div>
-
-    <div class="bg-color--dscout rounded-right--large">Rounded right</div>
-*/
-
-// === RADII === //
-
-.rounded--tiny   { border-radius: $radius--tiny; }
-.rounded--small  { border-radius: $radius--small; }
-.rounded--med    { border-radius: $radius--med; }
-.rounded--large  { border-radius: $radius--large; }
-.rounded--circle { border-radius: $radius--circle; }
-.rounded--pill   { border-radius: $radius--pill; }
-
-.rounded-top--tiny   { @include rounded-top($radius--tiny); }
-.rounded-top--small  { @include rounded-top($radius--small); }
-.rounded-top--med    { @include rounded-top($radius--med); }
-.rounded-top--large  { @include rounded-top($radius--large); }
-.rounded-top--circle { @include rounded-top($radius--circle); }
-.rounded-top--pill   { @include rounded-top($radius--pill); }
-
-.rounded-right--tiny   { @include rounded-right($radius--tiny); }
-.rounded-right--small  { @include rounded-right($radius--small); }
-.rounded-right--med    { @include rounded-right($radius--med); }
-.rounded-right--large  { @include rounded-right($radius--large); }
-.rounded-right--circle { @include rounded-right($radius--circle); }
-.rounded-right--pill   { @include rounded-right($radius--pill); }
-
-.rounded-bottom--tiny   { @include rounded-bottom($radius--tiny); }
-.rounded-bottom--small  { @include rounded-bottom($radius--small); }
-.rounded-bottom--med    { @include rounded-bottom($radius--med); }
-.rounded-bottom--large  { @include rounded-bottom($radius--large); }
-.rounded-bottom--circle { @include rounded-bottom($radius--circle); }
-.rounded-bottom--pill   { @include rounded-bottom($radius--pill); }
-
-.rounded-left--tiny   { @include rounded-left($radius--tiny); }
-.rounded-left--small  { @include rounded-left($radius--small); }
-.rounded-left--med    { @include rounded-left($radius--med); }
-.rounded-left--large  { @include rounded-left($radius--large); }
-.rounded-left--circle { @include rounded-left($radius--circle); }
-.rounded-left--pill   { @include rounded-left($radius--pill); }
-
-/*
-@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>
-
-    <div class="display--n">Hidden</div>
-
-<div class="display--i">Inline</div><div class="display--i">Inline</div>
-
-    <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>
-
-    <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>
-
-    <p class="display--ib">Inline Block</p>
-    <p class="display--ib">Inline Block</p>
-
-<div class="display--f">Flex</div>
-
-    <div class="display--f">Flex</div>
-
-<div class="display--f justify-content--c">Flex + Justify Content Center</div>
-
-    <div class="display--f justify-content--c">
-      Flex + Justify Content Center
-    </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; align-items: center; }
-.justify-content--c      { justify-content: center; }
-
-/*
-@styleguide
-@title Vertical Alignment
-
-Use vertical class names to control vertical alignment on inline elements.
-
-<div>
-  <img class="vertical--top" src="https://placehold.it/50x50" />
-  Top aligned
-</div>
-
-    <div>
-      <img class="vertical--top" src="https://placehold.it/50x50" />
-      Top aligned
-    </div>
-
-<div>
-  <img class="vertical--mid" src="https://placehold.it/50x50" />
-  Middle aligned
-</div>
-
-    <div>
-      <img class="vertical--mid" src="https://placehold.it/50x50" />
-      Middle aligned
-    </div>
-
-<div>
-  <img class="vertical--btm" src="https://placehold.it/50x50" />
-  Bottom aligned
-</div>
-
-    <div>
-      <img class="vertical--btm" src="https://placehold.it/50x50" />
-      Bottom aligned
-    </div>
-*/
-
-.vertical--top { vertical-align: top; }
-.vertical--mid { vertical-align: middle; }
-.vertical--btm { vertical-align: bottom; }
-
-/*
-@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., <span class="display--ib">`.top--xs`</span>.
-
-Space values are:
-- 0
-- xs (.25em)
-- s (.75em)
-- m (1em)
-- base (2em)
-
-<div class="position--r height--l">
-  <div class="position--a bottom--0 right--0">
-    Stuck to the bottom right
-  </div>
-</div>
-
-    <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 <span class="display--ib">`absolute--fill`</span> 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>
-
-    <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--xs    { top:    $space--xs; }
-.right--xs  { right:  $space--xs; }
-.bottom--xs { bottom: $space--xs; }
-.left--xs   { left:   $space--xs; }
-
-.top--s    { top:    $space--s; }
-.right--s  { right:  $space--s; }
-.bottom--s { bottom: $space--s; }
-.left--s   { left:   $space--s; }
-
-.top--m    { top:    $space--m; }
-.right--m  { right:  $space--m; }
-.bottom--m { bottom: $space--m; }
-.left--m   { left:   $space--m; }
-
-.top--base    { top:    $space--base; }
-.right--base  { right:  $space--base; }
-.bottom--base { bottom: $space--base; }
-.left--base   { left:   $space--base; }
-
-.absolute--fill {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/*
-@styleguide
-@title Floats & Clearfix
-
-Use these classes to control an element's float or clear a float.
-
-<div class="cf">
-  <div class="float--r">Right Side</div>
-  <div class="float--l">Left Side</div>
-  <div class="cf"></div>
-</div>
-
-    <div class="cf">
-      <div class="float--r">Right Side</div>
-      <div class="float--l">Left Side</div>
-    </div>
-
-You can also apply <span class="display--ib">`.float--n`</span> for no float
-or <span class="display--ib">`.clear-float`</span> to clear a float.
-*/
-
-// === FLOATS === //
-
-.float--l { float: left;  _display: inline; }
-.float--r { float: right; _display: inline; }
-.float--n { float: none; }
-
-.cf::before,
-.cf::after   { content: ' '; display: table; }
-.cf::after   { clear: both; }
-.cf          { *zoom: 1; }
-
-.clear-float { clear: both; }
-
-/*
-@styleguide
-@title Columns
-
-Use <span class="display--ib">`col--{number}`</span> classes for CSS columns.
-Specify up to 4 columns.
-
-<div class="col--3">
-  <p>
-    Spicy jalapeno bacon ipsum dolor amet tri-tip jowl rump cow bresaola strip steak short ribs, ground round shoulder jerky shank beef sirloin. Ground round pork belly burgdoggen jerky tenderloin alcatra tail brisket doner sausage swine. Pastrami hamburger picanha spare ribs shankle corned beef pork belly tail flank turducken kielbasa rump beef swine. Meatball sirloin turducken short ribs ham hock corned beef picanha beef fatback tri-tip rump boudin meatloaf landjaeger.
-  </p>
-  <p>
-    Pork chop spare ribs pork loin pastrami turkey. Tenderloin corned beef t-bone, jowl ham pork loin biltong picanha. Frankfurter tail ham short loin biltong tongue cow chicken. Frankfurter shoulder salami shank, short loin sirloin pastrami pig porchetta brisket swine ribeye capicola. Flank alcatra hamburger, chuck kielbasa capicola shankle cow strip steak chicken pork short loin pig filet mignon shank. Ham kielbasa swine turducken short loin venison cupim corned beef pork chop salami.
-  </p>
-</div>
-
-    <div class="col--3" style="column-width: 10em;">
-      <p>
-        Spicy jalapeno bacon ipsum dolor amet tri-tip jowl rump cow bresaola
-        strip steak short ribs, ground round shoulder jerky shank beef sirloin.
-        Ground round pork belly burgdoggen jerky tenderloin alcatra tail
-        brisket doner sausage swine. Pastrami hamburger picanha spare ribs
-        shankle corned beef pork belly tail flank turducken kielbasa rump beef
-        swine. Meatball sirloin turducken short ribs ham hock corned beef
-        picanha beef fatback tri-tip rump boudin meatloaf landjaeger.
-      </p>
-      <p>
-        Pork chop spare ribs pork loin pastrami turkey. Tenderloin corned beef
-        t-bone, jowl ham pork loin biltong picanha. Frankfurter tail ham short
-        loin biltong tongue cow chicken. Frankfurter shoulder salami shank,
-        short loin sirloin pastrami pig porchetta brisket swine ribeye
-        capicola. Flank alcatra hamburger, chuck kielbasa capicola shankle cow
-        strip steak chicken pork short loin pig filet mignon shank. Ham
-        kielbasa swine turducken short loin venison cupim corned beef pork chop
-        salami.
-      </p>
-    </div>
-*/
-
-// === COLUMNS === //
-
-.col--1 { column-count: 1; @include column-gap($space--m); }
-.col--2 { column-count: 2; @include column-gap($space--m); }
-.col--3 { column-count: 3; @include column-gap($space--m); }
-.col--4 { column-count: 4; @include column-gap($space--m); }
-
-/*
-@styleguide
-@title Visibility
-
-Hide elements with the <span class="display--ib">`visually-hidden`</span> class.
-
-<div class="visually-hidden">Can't see me!</div>
-
-    <div class="visually-hidden">Can't see me!</div>
-*/
-
-// === HIDING === //
-
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-// === RESIZING === //
-
-.vert      { resize: vertical; }
-.no-resize { resize: none; }
-
-/*
-@styleguide
-@title Text Alignment
-
-Text alignment classes work on block-level elements.
-
-<div>
-  <p class="text-align--l">Left Aligned</p>
-  <p class="text-align--r">Right Aligned</p>
-  <p class="text-align--c">Center Aligned</p>
-  <p class="text-align--j">
-    <strong>Justified:</strong>
-    Spicy jalapeno bacon ipsum dolor amet tri-tip jowl rump cow bresaola strip
-    steak short ribs, ground round shoulder jerky shank beef sirloin. Ground
-    round pork belly burgdoggen jerky tenderloin alcatra tail brisket doner
-    sausage swine. Pastrami hamburger picanha spare ribs shankle corned beef
-    pork belly tail flank turducken kielbasa rump beef swine. Meatball sirloin
-    turducken short ribs ham hock corned beef picanha beef fatback tri-tip rump
-    boudin meatloaf landjaeger.
-  </p>
-</div>
-
-    <p class="text-align--l">Left Aligned</p>
-    <p class="text-align--r">Right Aligned</p>
-    <p class="text-align--c">Center Aligned</p>
-    <p class="text-align--j">
-      <strong>Justified:</strong>
-      Spicy jalapeno bacon ipsum dolor amet tri-tip jowl rump cow bresaola
-      strip steak short ribs, ground round shoulder jerky shank beef sirloin.
-      Ground round pork belly burgdoggen jerky tenderloin alcatra tail brisket
-      doner sausage swine. Pastrami hamburger picanha spare ribs shankle corned
-      beef pork belly tail flank turducken kielbasa rump beef swine. Meatball
-      sirloin turducken short ribs ham hock corned beef picanha beef fatback
-      tri-tip rump boudin meatloaf landjaeger.
-    </p>
-*/
-
-// === TEXT ALIGNMENT === //
-
-.text-align--l  { text-align: left; }
-.text-align--r  { text-align: right; }
-.text-align--c  { text-align: center; }
-.text-align--j  { text-align: justify; }
-.text-space--n  { white-space: nowrap; }
-
-/*
-@styleguide
-@title Truncate Text
-
-Combine this class with a width to truncate text or just leave as is to
-truncate at width of containing element.
-
-<div class="width--5 truncate">
-  Pork chop spare ribs pork loin pastrami turkey. Tenderloin corned beef
-  t-bone, jowl ham pork loin biltong picanha.
-</div>
-
-    <div class="width--5 truncate">
-      Pork chop spare ribs pork loin pastrami turkey. Tenderloin corned beef
-      t-bone, jowl ham pork loin biltong picanha.
-    </div>
-
-You can apply the <span class="display--ib">`list--truncated`</span> class
-to a <span class="display--ib">`ul`</span> or
-<span class="display--ib">`ol`</span> to truncate text in its children.
-*/
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.list--truncated {
-  li, a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-/*
-@styleguide
-@title Shadows
-
-Apply a box shadow.
-
-<div class="shadow--s bg-color--invert padding--m">
-  Small shadow. Used to indicate that an element is not interactive.
-</div>
-
-    <div class="shadow--s bg-color--invert padding--m">
-      Small shadow. Used to indicate that an element is not interactive.
-    </div>
-
-<div class="shadow--m bg-color--invert padding--m">
-  Medium shadow. Used to indicate that an element is interactive.
-</div>
-
-    <div class="shadow--m bg-color--invert padding--m">
-      Medium shadow. Used to indicate that an element is interactive.
-    </div>
-
-<div class="shadow--l bg-color--invert padding--m">
-  Large shadow. Used to indicate that an element is being interacted with,
-  e.g. hovered over.
-</div>
-
-    <div class="shadow--l bg-color--invert padding--m">
-      Large shadow. Used to indicate that an element is being interacted with,
-      e.g. hovered over.
-    </div>
-
-<div class="shadow--xl bg-color--invert padding--m">
-  Extra large shadow. Used for maximum separation from the background,
-  such as when a container is in its edit state.
-</div>
-
-    <div class="shadow--xl bg-color--invert padding--m">
-      Extra large shadow. Used for maximum separation from the background,
-      such as when a container is in its edit state.
-    </div>
-*/
-
-// === SHADOWS === //
-
-.shadow--s {
-  box-shadow: $shadow--s;
-}
-
-.shadow--m {
-  box-shadow: $shadow--m;
-}
-
-.shadow--l {
-  box-shadow: $shadow--l;
-}
-
-.shadow--xl {
-  box-shadow: $shadow--xl;
-}
-
-/*
-@styleguide
-@title Overflow
-
-Use these classes to control an element's overflow
-
-<div class="width--5 height--5 padding--base bg-color--note overflow--auto">
-  <div class="width--6 height--6 bg-color--marker">overflow auto</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow--hidden">
-  <div class="width--6 height--6 bg-color--marker">overflow hidden</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow--scroll">
-  <div class="width--6 height--6 bg-color--marker">overflow scroll</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow--visible">
-  <div class="width--6 height--6 bg-color--marker">overflow visible</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-x--auto">
-  <div class="width--6 height--6 bg-color--marker">overflow-x auto</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-x--hidden">
-  <div class="width--6 height--6 bg-color--marker">overflow-x hidden</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-x--scroll">
-  <div class="width--6 height--6 bg-color--marker">overflow-x scroll</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-x--visible">
-  <div class="width--6 height--6 bg-color--marker">overflow-x visible</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-y--auto">
-  <div class="width--6 height--6 bg-color--marker">overflow-y auto</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-y--hidden">
-  <div class="width--6 height--6 bg-color--marker">overflow-y hidden</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-y--scroll">
-  <div class="width--6 height--6 bg-color--marker">overflow-y scroll</div>
-</div>
-
-<div class="width--5 height--5 padding--base bg-color--note overflow-y--visible">
-  <div class="width--6 height--6 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;
-}
-
-/*
-@styleguide
-@title Z-Index
-
-Classes to increase the z-index of an element. Intentionally only provides small
-set of indexes. If you're needing to set a z-index higher than 3 there's a good
-chance there's a bigger problem related to element ordering and the use of
-stacking contexts that needs to be addressed.
-
-    <div class="position--r z-index--1">Stack me!</div>
-*/
-
-.z-index--1 {
-  z-index: 1;
-}
-.z-index--2 {
-  z-index: 2;
-}
-.z-index--3 {
-  z-index: 3;
-}