@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/_spacing.scss

@@ -1,753 +0,0 @@
-@import 'variables';
-
-/*
-@styleguide
-@title Heights
-
-Element heights can be set using three methods:
-- enum
-  - none
-  - xs (.25em)
-  - s (.75em)
-  - m (1em)
-  - base (2em)
-  - l (3em)
-  - xl (4em)
-- number
-  - 1-16 where the number is a multiplier of 2em, e.g.,
-  <span class="display--ib">`height--16`</span> = 32em
-- percentage
-  - multiples of 10, e.g., <span class="display--ib">`height--40-pct`</span>
-
-<div class="height--base border b-color--dscout">Base Height</div>
-
-    <div class="height--base border b-color--dscout">Base Height</div>
-
-<div class="height--10 border b-color--dscout">20ems Height</div>
-
-    <div class="height--10 border b-color--dscout">20ems Height</div>
-
-<div class="height--5">
-  <div class="height--50-pct border b-color--dscout">50% Height</div>
-</div>
-
-    <div class="height--5">
-      <div class="height--50-pct border b-color--dscout">50% Height</div>
-    </div>
-*/
-
-// === HEIGHTS === //
-
-.height--none { height: $space--none; }
-.height--xs   { height: $space--xs; }
-.height--s    { height: $space--s; }
-.height--m    { height: $space--m; }
-.height--base { height: $space--base; }
-.height--l    { height: $space--l; }
-.height--xl   { height: $space--xl; }
-
-.height--1  { height: $space--base; }
-.height--2  { height: $space--2; }
-.height--3  { height: $space--3; }
-.height--4  { height: $space--4; }
-.height--5  { height: $space--5; }
-.height--6  { height: $space--6; }
-.height--7  { height: $space--7; }
-.height--8  { height: $space--8; }
-.height--9  { height: $space--9; }
-.height--10 { height: $space--10; }
-.height--11 { height: $space--11; }
-.height--12 { height: $space--12; }
-.height--13 { height: $space--13; }
-.height--14 { height: $space--14; }
-.height--15 { height: $space--15; }
-.height--16 { height: $space--16; }
-
-.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 Margins
-
-Element margins can be controlled in much the same fashion as heights.
-The possible values are:
-- auto
-- none
-- xs (.25em)
-- s (.75em)
-- m (1em)
-- base (2em)
-- l (3em)
-- xl (4em)
-
-<div class="margin--base">2em margin on all sides</div>
-
-    <div class="margin--base">2em margin on all sides</div>
-
-Enum values can be applied to each side individually.
-Possible values are:
-- t (top)
-- r (right)
-- b (bottom)
-- l (left)
-
-<div class="margin-l--base">2em margin on the left only</div>
-
-    <div class="margin-l--base">2em margin on the left only</div>
-
-Horizontal or vertical margin can be specified like so:
-
-<div class="margin-h--base">2em margin on left and right</div>
-
-    <div class="margin-h--base">2em margin on left and right</div>
-
-<div class="margin-v--base">2em margin on top and bottom</div>
-
-    <div class="margin-v--base">2em margin on top and bottom</div>
-*/
-// === MARGINS === //
-
-.margin--auto { margin: auto; }
-.margin--none { margin: $space--none; }
-.margin--xs   { margin: $space--xs; }
-.margin--s    { margin: $space--s; }
-.margin--m    { margin: $space--m; }
-.margin--base { margin: $space--base; }
-.margin--l    { margin: $space--l; }
-.margin--xl   { margin: $space--xl; }
-
-// The .margin--[direction]-[enum] selectors are deprecated but left in place
-// for backward compatibility while Particle's consumers are updated. In a
-// future release, these selectors should be removed, leaving only the
-// .margin-[direction]--[enum] selectors.
-
-
-.margin-v--auto,
-.margin--v-auto {
-  margin-bottom: auto;
-  margin-top: auto;
-}
-.margin-v--xs,
-.margin--v-xs {
-  margin-bottom: $space--xs;
-  margin-top:    $space--xs;
-}
-.margin-v--s,
-.margin--v-s {
-  margin-bottom: $space--s;
-  margin-top:    $space--s;
-}
-.margin-v--m,
-.margin--v-m {
-  margin-bottom: $space--m;
-  margin-top:    $space--m;
-}
-.margin-v--base,
-.margin--v-base {
-  margin-bottom: $space--base;
-  margin-top:    $space--base;
-}
-.margin-v--l,
-.margin--v-l {
-  margin-bottom: $space--l;
-  margin-top:    $space--l;
-}
-.margin-v--xl,
-.margin--v-xl {
-  margin-bottom: $space--xl;
-  margin-top:    $space--xl;
-}
-.margin-v--none,
-.margin--v-none {
-  margin-bottom: $space--none;
-  margin-top:    $space--none;
-}
-
-.margin-h--auto,
-.margin--h-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.margin-h--xs,
-.margin--h-xs {
-  margin-left:  $space--xs;
-  margin-right: $space--xs;
-}
-.margin-h--s,
-.margin--h-s {
-  margin-left:  $space--s;
-  margin-right: $space--s;
-}
-.margin-h--m,
-.margin--h-m {
-  margin-left:  $space--m;
-  margin-right: $space--m;
-}
-.margin-h--base,
-.margin--h-base {
-  margin-left:  $space--base;
-  margin-right: $space--base;
-}
-.margin-h--l,
-.margin--h-l {
-  margin-left:  $space--l;
-  margin-right: $space--l;
-}
-.margin-h--xl,
-.margin--h-xl {
-  margin-left:  $space--xl;
-  margin-right: $space--xl;
-}
-.margin-h--none,
-.margin--h-none {
-  margin-left:  $space--none;
-  margin-right: $space--none;
-}
-
-.margin-l--auto,
-.margin--l-auto {
-  margin-left: auto;
-}
-.margin-l--xs,
-.margin--l-xs {
-  margin-left: $space--xs;
-}
-.margin-l--s,
-.margin--l-s {
-  margin-left: $space--s;
-}
-.margin-l--m,
-.margin--l-m {
-  margin-left: $space--m;
-}
-.margin-l--base,
-.margin--l-base {
-  margin-left: $space--base;
-}
-.margin-l--l,
-.margin--l-l {
-  margin-left: $space--l;
-}
-.margin-l--xl,
-.margin--l-xl {
-  margin-left: $space--xl;
-}
-.margin-l--none,
-.margin--l-none {
-  margin-left: $space--none;
-}
-
-.margin-r--auto,
-.margin--r-auto {
-  margin-right: auto;
-}
-.margin-r--xs,
-.margin--r-xs {
-  margin-right: $space--xs;
-}
-.margin-r--s,
-.margin--r-s {
-  margin-right: $space--s;
-}
-.margin-r--m,
-.margin--r-m {
-  margin-right: $space--m;
-}
-.margin-r--base,
-.margin--r-base {
-  margin-right: $space--base;
-}
-.margin-r--l,
-.margin--r-l {
-  margin-right: $space--l;
-}
-.margin-r--xl,
-.margin--r-xl {
-  margin-right: $space--xl;
-}
-.margin-r--none,
-.margin--r-none {
-  margin-right: $space--none;
-}
-
-.margin-b--auto,
-.margin--b-auto {
-  margin-bottom: auto;
-}
-.margin-b--xs,
-.margin--b-xs {
-  margin-bottom: $space--xs;
-}
-.margin-b--s,
-.margin--b-s {
-  margin-bottom: $space--s;
-}
-.margin-b--m,
-.margin--b-m {
-  margin-bottom: $space--m;
-}
-.margin-b--base,
-.margin--b-base {
-  margin-bottom: $space--base;
-}
-.margin-b--l,
-.margin--b-l {
-  margin-bottom: $space--l;
-}
-.margin-b--xl,
-.margin--b-xl {
-  margin-bottom: $space--xl;
-}
-.margin-b--none,
-.margin--b-none {
-  margin-bottom: $space--none;
-}
-
-.margin-t--auto,
-.margin--t-auto {
-  margin-top: auto;
-}
-.margin-t--xs,
-.margin--t-xs {
-  margin-top: $space--xs;
-}
-.margin-t--s,
-.margin--t-s {
-  margin-top: $space--s;
-}
-.margin-t--m,
-.margin--t-m {
-  margin-top: $space--m;
-}
-.margin-t--base,
-.margin--t-base {
-  margin-top: $space--base;
-}
-.margin-t--l,
-.margin--t-l {
-  margin-top: $space--l;
-}
-.margin-t--xl,
-.margin--t-xl {
-  margin-top: $space--xl;
-}
-.margin-t--none,
-.margin--t-none {
-  margin-top: $space--none;
-}
-
-/*
-@styleguide
-@title Max-Widths
-
-Max-widths can be set to one of the following values:
-- <span class="display--ib">`none`</span>
-- percentage, in multiples of 10, e.g.,
-  <span class="display--ib">`max-width--90-pct`</span>
-- number, in multiples of <span class="display--ib">`2em`</span>
-
-<div class="max-width--50-pct bg-color--dscout">50% max-width</div>
-
-    <div class="max-width--50-pct bg-color--dscout">50% max-width</div>
-
-<div class="max-width--10 bg-color--dscout">20em max-width</div>
-
-    <div class="max-width--10 bg-color--dscout">20em max-width</div>
-
-*/
-// === MAX WIDTHS === //
-
-.max-width--none { max-width: none; }
-.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--1  { max-width: $space--base; }
-.max-width--2  { max-width: $space--2; }
-.max-width--3  { max-width: $space--3; }
-.max-width--4  { max-width: $space--4; }
-.max-width--5  { max-width: $space--5; }
-.max-width--6  { max-width: $space--6; }
-.max-width--7  { max-width: $space--7; }
-.max-width--8  { max-width: $space--8; }
-.max-width--9  { max-width: $space--9; }
-.max-width--10 { max-width: $space--10; }
-.max-width--11 { max-width: $space--11; }
-.max-width--12 { max-width: $space--12; }
-.max-width--13 { max-width: $space--13; }
-.max-width--14 { max-width: $space--14; }
-.max-width--15 { max-width: $space--15; }
-.max-width--16 { max-width: $space--16; }
-
-/*
-@styleguide
-@title Max-Heights
-
-Max-heights can be set to one of the following values:
-- <span class="display--ib">`none`</span>
-- percentage, in multiples of 10, e.g.,
-  <span class="display--ib">`max-height--90-pct`</span>
-- number, in multiples of <span class="display--ib">`2em`</span>
-*/
-// === MAX HEIGHTS === //
-
-.max-height--none { max-height: none; }
-.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--1  { max-height: $space--base; }
-.max-height--2  { max-height: $space--2; }
-.max-height--3  { max-height: $space--3; }
-.max-height--4  { max-height: $space--4; }
-.max-height--5  { max-height: $space--5; }
-.max-height--6  { max-height: $space--6; }
-.max-height--7  { max-height: $space--7; }
-.max-height--8  { max-height: $space--8; }
-.max-height--9  { max-height: $space--9; }
-.max-height--10 { max-height: $space--10; }
-.max-height--11 { max-height: $space--11; }
-.max-height--12 { max-height: $space--12; }
-.max-height--13 { max-height: $space--13; }
-.max-height--14 { max-height: $space--14; }
-.max-height--15 { max-height: $space--15; }
-.max-height--16 { max-height: $space--16; }
-
-/*
-@styleguide
-@title Padding
-
-Element padding can be controlled in much the same fashion as margins.
-The possible values are:
-- none
-- xs (.25em)
-- s (.75em)
-- m (1em)
-- base (2em)
-- l (3em)
-- xl (4em)
-
-<div class="padding--base">2em padding on all sides</div>
-
-    <div class="padding--base">2em padding on all sides</div>
-
-Enum values can be applied to each side individually.
-Possible values are:
-- t (top)
-- r (right)
-- b (bottom)
-- l (left)
-
-<div class="padding-l--base">2em padding on the left only</div>
-
-    <div class="padding-l--base">2em padding on the left only</div>
-
-Horizontal or vertical padding can be specified like so:
-
-<div class="padding-h--base">2em padding on left and right</div>
-
-    <div class="padding-h--base">2em padding on left and right</div>
-
-<div class="padding-v--base">2em padding on top and bottom</div>
-
-    <div class="padding-v--base">2em padding on top and bottom</div>
-*/
-// === PADDINGS === //
-
-.padding--none { padding: $space--none; }
-.padding--xs   { padding: $space--xs; }
-.padding--s    { padding: $space--s; }
-.padding--m    { padding: $space--m; }
-.padding--base { padding: $space--base; }
-.padding--l    { padding: $space--l; }
-.padding--xl   { padding: $space--xl; }
-
-// The .padding--[direction]-[enum] selectors are deprecated but left in place
-// for backward compatibility while Particle's consumers are updated. In a
-// future release, these selectors should be removed, leaving only the
-// .padding-[direction]--[enum] selectors.
-
-
-.padding-v--xs,
-.padding--v-xs {
-  padding-bottom: $space--xs;
-  padding-top:    $space--xs;
-}
-.padding-v--s,
-.padding--v-s {
-  padding-bottom: $space--s;
-  padding-top:    $space--s;
-}
-.padding-v--m,
-.padding--v-m {
-  padding-bottom: $space--m;
-  padding-top:    $space--m;
-}
-.padding-v--base,
-.padding--v-base {
-  padding-top:    $space--base;
-  padding-bottom: $space--base;
-}
-.padding-v--l,
-.padding--v-l {
-  padding-top:    $space--l;
-  padding-bottom: $space--l;
-}
-.padding-v--xl,
-.padding--v-xl {
-  padding-bottom: $space--xl;
-  padding-top:    $space--xl;
-}
-.padding-v--none,
-.padding--v-none {
-  padding-bottom: $space--none;
-  padding-top:    $space--none;
-}
-
-.padding-h--xs,
-.padding--h-xs {
-  padding-left:  $space--xs;
-  padding-right: $space--xs;
-}
-.padding-h--s,
-.padding--h-s {
-  padding-left:  $space--s;
-  padding-right: $space--s;
-}
-.padding-h--m,
-.padding--h-m {
-  padding-left:  $space--m;
-  padding-right: $space--m;
-}
-.padding-h--base,
-.padding--h-base {
-  padding-left:  $space--base;
-  padding-right: $space--base;
-}
-.padding-h--l,
-.padding--h-l {
-  padding-left:  $space--l;
-  padding-right: $space--l;
-}
-.padding-h--xl,
-.padding--h-xl {
-  padding-left:  $space--xl;
-  padding-right: $space--xl;
-}
-.padding-h--none,
-.padding--h-none {
-  padding-left:  $space--none;
-  padding-right: $space--none;
-}
-
-.padding-l--xs,
-.padding--l-xs {
-  padding-left: $space--xs;
-}
-.padding-l--s,
-.padding--l-s {
-  padding-left: $space--s;
-}
-.padding-l--m,
-.padding--l-m {
-  padding-left: $space--m;
-}
-.padding-l--base,
-.padding--l-base {
-  padding-left: $space--base;
-}
-.padding-l--l,
-.padding--l-l {
-  padding-left: $space--l;
-}
-.padding-l--xl,
-.padding--l-xl {
-  padding-left: $space--xl;
-}
-.padding-l--none,
-.padding--l-none {
-  padding-left: $space--none;
-}
-
-.padding-r--xs,
-.padding--r-xs {
-  padding-right: $space--xs;
-}
-.padding-r--s,
-.padding--r-s {
-  padding-right: $space--s;
-}
-.padding-r--m,
-.padding--r-m {
-  padding-right: $space--m;
-}
-.padding-r--base,
-.padding--r-base {
-  padding-right: $space--base;
-}
-.padding-r--l,
-.padding--r-l {
-  padding-right: $space--l;
-}
-.padding-r--xl,
-.padding--r-xl {
-  padding-right: $space--xl;
-}
-.padding-r--none,
-.padding--r-none {
-  padding-right: $space--none;
-}
-
-.padding-b--xs,
-.padding--b-xs {
-  padding-bottom: $space--xs;
-}
-.padding-b--s,
-.padding--b-s {
-  padding-bottom: $space--s;
-}
-.padding-b--m,
-.padding--b-m {
-  padding-bottom: $space--m;
-}
-.padding-b--base,
-.padding--b-base {
-  padding-bottom: $space--base;
-}
-.padding-b--l,
-.padding--b-l {
-  padding-bottom: $space--l;
-}
-.padding-b--xl,
-.padding--b-xl {
-  padding-bottom: $space--xl;
-}
-.padding-b--none,
-.padding--b-none {
-  padding-bottom: $space--none;
-}
-
-.padding-t--xs,
-.padding--t-xs {
-  padding-top: $space--xs;
-}
-.padding-t--s,
-.padding--t-s {
-  padding-top: $space--s;
-}
-.padding-t--m,
-.padding--t-m {
-  padding-top: $space--m;
-}
-.padding-t--base,
-.padding--t-base {
-  padding-top: $space--base;
-}
-.padding-t--l,
-.padding--t-l {
-  padding-top: $space--l;
-}
-.padding-t--xl,
-.padding--t-xl {
-  padding-top: $space--xl;
-}
-.padding-t--none,
-.padding--t-none {
-  padding-top: $space--none;
-}
-
-/*
-@styleguide
-@title Widths
-
-Element widths can be set using three methods:
-- enum
-  - none
-  - xs (.25em)
-  - s (.75em)
-  - m (1em)
-  - base (2em)
-  - l (3em)
-  - xl (4em)
-- number
-  - 1-16 where the number is a multiplier of 2em, e.g.,
-  <span class="display--ib">`width--16`</span> = 32em
-- percentage
-  - multiples of 10, e.g., <span class="display--ib">`width--40-pct`</span>
-
-<div class="width--base border b-color--dscout">Base width</div>
-
-    <div class="width--base border b-color--dscout">Base Width</div>
-
-<div class="width--10 border b-color--dscout">20ems Width</div>
-
-    <div class="width--10 border b-color--dscout">20ems Width</div>
-
-<div class="width--100-pct">
-  <div class="width--50-pct border b-color--dscout">50% Width</div>
-</div>
-
-    <div class="width--100-pct">
-      <div class="width--50-pct border b-color--dscout">50% Width</div>
-    </div>
-*/
-// === WIDTHS === //
-
-.width--none { width: $space--none; }
-.width--xs   { width: $space--xs; }
-.width--s    { width: $space--s; }
-.width--m    { width: $space--m; }
-.width--base { width: $space--base; }
-.width--l    { width: $space--l; }
-.width--xl   { width: $space--xl; }
-
-.width--1  { width: $space--base; }
-.width--2  { width: $space--2; }
-.width--3  { width: $space--3; }
-.width--4  { width: $space--4; }
-.width--5  { width: $space--5; }
-.width--6  { width: $space--6; }
-.width--7  { width: $space--7; }
-.width--8  { width: $space--8; }
-.width--9  { width: $space--9; }
-.width--10 { width: $space--10; }
-.width--11 { width: $space--11; }
-.width--12 { width: $space--12; }
-.width--13 { width: $space--13; }
-.width--14 { width: $space--14; }
-.width--15 { width: $space--15; }
-.width--16 { width: $space--16; }
-
-.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%; }