adding tymargins-once class and supporting mixin changes

aaronpinero · Oct 16, 2019 · 03d3705 · 03d3705
1 parent b5068ee
commit 03d3705
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 84 deletions.
diff --git a/dist/style/tyfy.css b/dist/style/tyfy.css
diff --git a/docs/content/mixins.html b/docs/content/mixins.html
@@ -114,7 +114,7 @@ <h3 class="tyfont-size-h4">Arguments</h3>
           <dt>$context</dt>
           <dd><em>optional</em></dd>
           <dd>Default value is <code class="val val-default">all</code></dd>
-          <dd>Allowed values are <code>all</code>, <code>headings</code>, or <code>lists</code>. The <code>all</code> context sets the value for all tags; the <code>headings</code> context sets the value only for headings; the <code>lists</code> context sets the value only for children of ordered, unordered, and definition lists.</dd>
+          <dd>Allowed values are <code>all</code>, <code>once</code>, <code>headings</code>, or <code>lists</code>. The <code>all</code> context sets the value for all tags; the <code>once</code> context sets the margin value only for immediate desendants; the <code>headings</code> context sets the value only for headings; the <code>lists</code> context sets the value only for children of ordered, unordered, and definition lists.</dd>
           <dt>$measure</dt>
           <dd><em>optional</em></dd>
           <dd>Default value is <code class="val val-default">$tyspacing-md</code></dd>
@@ -131,7 +131,7 @@ <h3 class="tyfont-size-h4">Arguments</h3>
           <dt>$state</dt>
           <dd><em>optional</em></dd>
           <dd>Default value is <code class="val val-default">on</code></dd>
-          <dd>Allowed values are <code>on</code>, <code>skip</code>, or <code>off</code>. The <code>skip</code> option eliminates the adjacent sibling margins only on immediate descendants.</dd>
+          <dd>Allowed values are <code>on</code>, <code>once</code>, <code>skip</code>, or <code>off</code>. The <code>skip</code> option eliminates the adjacent sibling margins only on immediate descendants; <code>once</code> applies the adjacent sibling margins only to immediate descendants.</dd>
         </dl>
         <h3 class="tyfont-size-h4">Example</h3>
         <pre class="codebox mini" data-lang="SCSS"><code class="code-nobg language-scss">tag.class {

diff --git a/docs/content/spacing.html b/docs/content/spacing.html
@@ -26,6 +26,8 @@ <h2>Classes</h2>
         <dl>
           <dt>.tymargins-on</dt>
           <dd>Apply the default adjacent sibling margin rules to descendants of the element with this class</dd>
+          <dt>.tymargins-once</dt>
+          <dd>Apply the default adjacent sibling margin rules for the immediate descendants of the element with this class</dd>
           <dt>.tymargins-skip</dt>
           <dd>Remove the default adjacent sibling margin rules from the immediate descendants of the element with this class</dd>
           <dt>.tymargins-off</dt>

diff --git a/docs/mixins.html b/docs/mixins.html
@@ -202,7 +202,7 @@ <h3 class="tyfont-size-h4">Arguments</h3>
           <dt>$context</dt>
           <dd><em>optional</em></dd>
           <dd>Default value is <code class="val val-default">all</code></dd>
-          <dd>Allowed values are <code>all</code>, <code>headings</code>, or <code>lists</code>. The <code>all</code> context sets the value for all tags; the <code>headings</code> context sets the value only for headings; the <code>lists</code> context sets the value only for children of ordered, unordered, and definition lists.</dd>
+          <dd>Allowed values are <code>all</code>, <code>once</code>, <code>headings</code>, or <code>lists</code>. The <code>all</code> context sets the value for all tags; the <code>once</code> context sets the margin value only for immediate desendants; the <code>headings</code> context sets the value only for headings; the <code>lists</code> context sets the value only for children of ordered, unordered, and definition lists.</dd>
           <dt>$measure</dt>
           <dd><em>optional</em></dd>
           <dd>Default value is <code class="val val-default">$tyspacing-md</code></dd>
@@ -219,7 +219,7 @@ <h3 class="tyfont-size-h4">Arguments</h3>
           <dt>$state</dt>
           <dd><em>optional</em></dd>
           <dd>Default value is <code class="val val-default">on</code></dd>
-          <dd>Allowed values are <code>on</code>, <code>skip</code>, or <code>off</code>. The <code>skip</code> option eliminates the adjacent sibling margins only on immediate descendants.</dd>
+          <dd>Allowed values are <code>on</code>, <code>once</code>, <code>skip</code>, or <code>off</code>. The <code>skip</code> option eliminates the adjacent sibling margins only on immediate descendants; <code>once</code> applies the adjacent sibling margins only to immediate descendants.</dd>
         </dl>
         <h3 class="tyfont-size-h4">Example</h3>
         <pre class="codebox mini" data-lang="SCSS"><code class="code-nobg language-scss">tag.class {

diff --git a/docs/resources/style/tyfy-docs.css b/docs/resources/style/tyfy-docs.css
@@ -179,7 +179,7 @@ body {
   margin-top: 0;
   margin-bottom: 0; }
 
-/* line 93, source/scss/required/_mixins.scss */
+/* line 99, source/scss/required/_mixins.scss */
 body * + * {
   margin-top: 1.75rem; }
 
@@ -200,7 +200,7 @@ body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h5,
 body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
   margin-top: 2.625rem; }
 
-/* line 93, source/scss/required/_mixins.scss */
+/* line 99, source/scss/required/_mixins.scss */
 .tymargins-on * + * {
   margin-top: 1.75rem; }
 
@@ -221,11 +221,15 @@ body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
 .tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
   margin-top: 2.625rem; }
 
-/* line 118, source/scss/required/_mixins.scss */
+/* line 93, source/scss/required/_mixins.scss */
+.tymargins-once > * + * {
+  margin-top: 1.75rem; }
+
+/* line 124, source/scss/required/_mixins.scss */
 .tymargins-skip > * + * {
   margin-top: 0; }
 
-/* line 123, source/scss/required/_mixins.scss */
+/* line 132, source/scss/required/_mixins.scss */
 .tymargins-off * + * {
   margin-top: 0; }
 
@@ -348,15 +352,15 @@ a {
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     transition: all 250ms;
     vertical-align: middle; }
-    /* line 179, source/scss/required/_mixins.scss */
+    /* line 188, source/scss/required/_mixins.scss */
     a[href].tybutton:hover, a[href].tybutton:active, a[href].tybutton[href]:hover, a[href].tybutton[href]:active {
       background-color: #cc0066;
       background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
       color: white; }
-    /* line 190, source/scss/required/_mixins.scss */
+    /* line 199, source/scss/required/_mixins.scss */
     a[href].tybutton:active, a[href].tybutton[href]:active {
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-    /* line 193, source/scss/required/_mixins.scss */
+    /* line 202, source/scss/required/_mixins.scss */
     a[href].tybutton:focus, a[href].tybutton[href]:focus {
       outline: none; }
   /* line 30, source/scss/optional/_links.scss */
@@ -379,18 +383,18 @@ a {
     border: 2px #0066CC solid;
     color: #0066CC;
     padding: calc(0.4375rem - 2px) calc(1.3125rem - 2px); }
-    /* line 179, source/scss/required/_mixins.scss */
+    /* line 188, source/scss/required/_mixins.scss */
     a[href].tybutton-outline:hover, a[href].tybutton-outline:active, a[href].tybutton-outline[href]:hover, a[href].tybutton-outline[href]:active {
       background-color: #cc0066;
       background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
       color: white; }
-    /* line 190, source/scss/required/_mixins.scss */
+    /* line 199, source/scss/required/_mixins.scss */
     a[href].tybutton-outline:active, a[href].tybutton-outline[href]:active {
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-    /* line 193, source/scss/required/_mixins.scss */
+    /* line 202, source/scss/required/_mixins.scss */
     a[href].tybutton-outline:focus, a[href].tybutton-outline[href]:focus {
       outline: none; }
-    /* line 220, source/scss/required/_mixins.scss */
+    /* line 229, source/scss/required/_mixins.scss */
     a[href].tybutton-outline:hover, a[href].tybutton-outline:active, a[href].tybutton-outline[href]:hover, a[href].tybutton-outline[href]:active {
       border-color: #c20061; }
 
@@ -469,7 +473,7 @@ ul.list-flex {
   display: flex;
   flex-wrap: wrap;
   padding-left: 0; }
-  /* line 123, source/scss/required/_mixins.scss */
+  /* line 132, source/scss/required/_mixins.scss */
   ul.list-flex * + * {
     margin-top: 0; }
   /* line 88, source/scss/optional/_lists.scss */
@@ -494,7 +498,7 @@ ul.list-flex {
     column-gap: 2.625rem;
     margin-bottom: -0.875rem;
     padding-left: 0; }
-    /* line 123, source/scss/required/_mixins.scss */
+    /* line 132, source/scss/required/_mixins.scss */
     ol.list-cols-2 * + *, ol.list-cols-3 * + *,
     ul.list-cols-2 * + *,
     ul.list-cols-3 * + * {
@@ -706,15 +710,15 @@ span.smallcaps {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   transition: all 250ms;
   vertical-align: middle; }
-  /* line 179, source/scss/required/_mixins.scss */
+  /* line 188, source/scss/required/_mixins.scss */
   .tybutton:hover, .tybutton:active, .tybutton[href]:hover, .tybutton[href]:active {
     background-color: #cc0066;
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
     color: white; }
-  /* line 190, source/scss/required/_mixins.scss */
+  /* line 199, source/scss/required/_mixins.scss */
   .tybutton:active, .tybutton[href]:active {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-  /* line 193, source/scss/required/_mixins.scss */
+  /* line 202, source/scss/required/_mixins.scss */
   .tybutton:focus, .tybutton[href]:focus {
     outline: none; }
 
@@ -738,18 +742,18 @@ span.smallcaps {
   border: 2px #0066CC solid;
   color: #0066CC;
   padding: calc(0.4375rem - 2px) calc(1.3125rem - 2px); }
-  /* line 179, source/scss/required/_mixins.scss */
+  /* line 188, source/scss/required/_mixins.scss */
   .tybutton-outline:hover, .tybutton-outline:active, .tybutton-outline[href]:hover, .tybutton-outline[href]:active {
     background-color: #cc0066;
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
     color: white; }
-  /* line 190, source/scss/required/_mixins.scss */
+  /* line 199, source/scss/required/_mixins.scss */
   .tybutton-outline:active, .tybutton-outline[href]:active {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-  /* line 193, source/scss/required/_mixins.scss */
+  /* line 202, source/scss/required/_mixins.scss */
   .tybutton-outline:focus, .tybutton-outline[href]:focus {
     outline: none; }
-  /* line 220, source/scss/required/_mixins.scss */
+  /* line 229, source/scss/required/_mixins.scss */
   .tybutton-outline:hover, .tybutton-outline:active, .tybutton-outline[href]:hover, .tybutton-outline[href]:active {
     border-color: #c20061; }
 
@@ -1199,7 +1203,7 @@ h6.tyfy-collapsable-processed:hover::before {
   display: none;
   margin: 0;
   padding: 0; }
-  /* line 123, source/scss/required/_mixins.scss */
+  /* line 132, source/scss/required/_mixins.scss */
   .tabs-container ul.tabs * + * {
     margin-top: 0; }
   @media (min-width: 40em) {
@@ -1429,7 +1433,7 @@ input[type="color"] {
     border-color: var(--tycolor-link-active);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; }
 
-/* line 123, source/scss/required/_mixins.scss */
+/* line 132, source/scss/required/_mixins.scss */
 select * + * {
   margin-top: 0; }
 
@@ -1466,7 +1470,7 @@ input[type="submit"] {
   display: inline-block;
   font-family: "IBM Plex Sans", helvetica, arial, sans-serif;
   width: auto; }
-  /* line 179, source/scss/required/_mixins.scss */
+  /* line 188, source/scss/required/_mixins.scss */
   button:hover, button:active, button[href]:hover, button[href]:active,
   input[type="button"]:hover,
   input[type="button"]:active,
@@ -1483,7 +1487,7 @@ input[type="submit"] {
     background-color: #cc0066;
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
     color: white; }
-  /* line 190, source/scss/required/_mixins.scss */
+  /* line 199, source/scss/required/_mixins.scss */
   button:active, button[href]:active,
   input[type="button"]:active,
   input[type="button"][href]:active,
@@ -1492,7 +1496,7 @@ input[type="submit"] {
   input[type="submit"]:active,
   input[type="submit"][href]:active {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-  /* line 193, source/scss/required/_mixins.scss */
+  /* line 202, source/scss/required/_mixins.scss */
   button:focus, button[href]:focus,
   input[type="button"]:focus,
   input[type="button"][href]:focus,
@@ -1644,7 +1648,7 @@ select.tyselect {
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     transition: all 250ms;
     vertical-align: middle; }
-    /* line 179, source/scss/required/_mixins.scss */
+    /* line 188, source/scss/required/_mixins.scss */
     .reverse .tybutton:hover, .reverse .tybutton:active, .reverse .tybutton[href]:hover, .reverse .tybutton[href]:active,
     .reverse a.tybutton:hover,
     .reverse a.tybutton:active,
@@ -1669,7 +1673,7 @@ select.tyselect {
       background-color: #ffb3d9;
       background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
       color: black; }
-    /* line 190, source/scss/required/_mixins.scss */
+    /* line 199, source/scss/required/_mixins.scss */
     .reverse .tybutton:active, .reverse .tybutton[href]:active,
     .reverse a.tybutton:active,
     .reverse a.tybutton[href]:active,
@@ -1682,7 +1686,7 @@ select.tyselect {
     .reverse input[type="submit"]:active,
     .reverse input[type="submit"][href]:active {
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-    /* line 193, source/scss/required/_mixins.scss */
+    /* line 202, source/scss/required/_mixins.scss */
     .reverse .tybutton:focus, .reverse .tybutton[href]:focus,
     .reverse a.tybutton:focus,
     .reverse a.tybutton[href]:focus,
@@ -1716,7 +1720,7 @@ select.tyselect {
     border: 2px #b3d9ff solid;
     color: #b3d9ff;
     padding: calc(0.4375rem - 2px) calc(1.3125rem - 2px); }
-    /* line 179, source/scss/required/_mixins.scss */
+    /* line 188, source/scss/required/_mixins.scss */
     .reverse .tybutton-outline:hover, .reverse .tybutton-outline:active, .reverse .tybutton-outline[href]:hover, .reverse .tybutton-outline[href]:active,
     .reverse a.tybutton-outline:hover,
     .reverse a.tybutton-outline:active,
@@ -1725,17 +1729,17 @@ select.tyselect {
       background-color: #ffb3d9;
       background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
       color: black; }
-    /* line 190, source/scss/required/_mixins.scss */
+    /* line 199, source/scss/required/_mixins.scss */
     .reverse .tybutton-outline:active, .reverse .tybutton-outline[href]:active,
     .reverse a.tybutton-outline:active,
     .reverse a.tybutton-outline[href]:active {
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-    /* line 193, source/scss/required/_mixins.scss */
+    /* line 202, source/scss/required/_mixins.scss */
     .reverse .tybutton-outline:focus, .reverse .tybutton-outline[href]:focus,
     .reverse a.tybutton-outline:focus,
     .reverse a.tybutton-outline[href]:focus {
       outline: none; }
-    /* line 220, source/scss/required/_mixins.scss */
+    /* line 229, source/scss/required/_mixins.scss */
     .reverse .tybutton-outline:hover, .reverse .tybutton-outline:active, .reverse .tybutton-outline[href]:hover, .reverse .tybutton-outline[href]:active,
     .reverse a.tybutton-outline:hover,
     .reverse a.tybutton-outline:active,
@@ -2048,18 +2052,18 @@ strong.tyfy {
   padding: calc(0.4375rem - 2px) calc(1.3125rem - 2px);
   font-family: "IBM Plex Sans", helvetica, arial, sans-serif;
   margin: 0.4375rem; }
-  /* line 179, source/scss/required/_mixins.scss */
+  /* line 188, source/scss/required/_mixins.scss */
   .reverse .tybutton-outline-white:hover, .reverse .tybutton-outline-white:active, .reverse .tybutton-outline-white[href]:hover, .reverse .tybutton-outline-white[href]:active {
     background-color: white;
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
     color: black; }
-  /* line 190, source/scss/required/_mixins.scss */
+  /* line 199, source/scss/required/_mixins.scss */
   .reverse .tybutton-outline-white:active, .reverse .tybutton-outline-white[href]:active {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
-  /* line 193, source/scss/required/_mixins.scss */
+  /* line 202, source/scss/required/_mixins.scss */
   .reverse .tybutton-outline-white:focus, .reverse .tybutton-outline-white[href]:focus {
     outline: none; }
-  /* line 220, source/scss/required/_mixins.scss */
+  /* line 229, source/scss/required/_mixins.scss */
   .reverse .tybutton-outline-white:hover, .reverse .tybutton-outline-white:active, .reverse .tybutton-outline-white[href]:hover, .reverse .tybutton-outline-white[href]:active {
     border-color: #f2f2f2; }
 
@@ -2118,7 +2122,7 @@ code.val-default {
   display: flex;
   flex-wrap: wrap;
   padding: 0.875rem 1.75rem; }
-  /* line 123, source/scss/required/_mixins.scss */
+  /* line 132, source/scss/required/_mixins.scss */
   .form-demo * + * {
     margin-top: 0; }
   /* line 156, docs/resources/scss/tyfy-docs-all.scss */
@@ -2174,7 +2178,7 @@ footer.footer {
   color: #707070;
   font-size: 0.83333rem;
   line-height: 1.75rem; }
-  /* line 123, source/scss/required/_mixins.scss */
+  /* line 132, source/scss/required/_mixins.scss */
   footer.footer * + * {
     margin-top: 0; }
   /* line 211, docs/resources/scss/tyfy-docs-all.scss */
@@ -2209,7 +2213,7 @@ footer.footer {
     grid-template-columns: auto auto;
     grid-column-gap: 1.75rem;
     grid-row-gap: 1.75rem; }
-    /* line 123, source/scss/required/_mixins.scss */
+    /* line 132, source/scss/required/_mixins.scss */
     dl.grid * + * {
       margin-top: 0; }
     /* line 243, docs/resources/scss/tyfy-docs-all.scss */
@@ -2507,7 +2511,7 @@ ul.nav-paging {
   grid-template-columns: auto auto;
   margin-top: 3.5rem;
   padding: 0; }
-  /* line 123, source/scss/required/_mixins.scss */
+  /* line 132, source/scss/required/_mixins.scss */
   ul.nav-paging * + * {
     margin-top: 0; }
   /* line 620, docs/resources/scss/tyfy-docs-all.scss */
@@ -2732,7 +2736,7 @@ header.brand nav {
       flex-wrap: wrap;
       justify-content: center;
       padding: 2.625rem 0; }
-      /* line 118, source/scss/required/_mixins.scss */
+      /* line 124, source/scss/required/_mixins.scss */
       .section-benefits > * + * {
         margin-top: 0; } }
   /* line 840, docs/resources/scss/tyfy-docs-all.scss */

diff --git a/docs/spacing.html b/docs/spacing.html
@@ -114,6 +114,8 @@ <h2>Classes</h2>
         <dl>
           <dt>.tymargins-on</dt>
           <dd>Apply the default adjacent sibling margin rules to descendants of the element with this class</dd>
+          <dt>.tymargins-once</dt>
+          <dd>Apply the default adjacent sibling margin rules for the immediate descendants of the element with this class</dd>
           <dt>.tymargins-skip</dt>
           <dd>Remove the default adjacent sibling margin rules from the immediate descendants of the element with this class</dd>
           <dt>.tymargins-off</dt>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tyfy",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "a framework for typographic structure and common content patterns",
   "directories": {
     "doc": "docs"

diff --git a/source/scss/essential/_spacing.scss b/source/scss/essential/_spacing.scss
@@ -14,9 +14,12 @@
 .tymargins-on {
   @include tymargins(on);
 }
+.tymargins-off {
+  @include tymargins(off);
+}
+.tymargins-once {
+  @include tymargins(once);
+}
 .tymargins-skip {
   @include tymargins(skip);
 }
-.tymargins-off {
-  @include tymargins(off);
-}