make use of :not and :is selectors

aaronpinero · May 24, 2021 · 7029ee0 · 7029ee0
1 parent 7c62e9c
commit 7029ee0
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 30 deletions.
diff --git a/dist/style/tyfy.css b/dist/style/tyfy.css
diff --git a/dist/style/tyfy.css.map b/dist/style/tyfy.css.map
diff --git a/docs/changelog.html b/docs/changelog.html
@@ -108,6 +108,7 @@ <h2>v2.0.10 - 2021-05-24</h2>
           <li>Added new Extras module for a custom <a href="audio.html"><span class="smallcaps">HTML</span> audio player</a></li>
           <li>Moved some icons assets to <a href="https://github.com/aaronpinero/pinero-icons">a separate repository</a></li>
           <li>Added styles for disabled button inputs</li>
+          <li>Updated <a href="compatibility.html">compatibility information</a></li>
         </ul>
         <h2>v2.0.9 - 2021-01-14</h2>
         <ul>

diff --git a/docs/compatibility.html b/docs/compatibility.html
@@ -115,6 +115,8 @@ <h1>Browser Compatibility</h1>
           <li><a href="https://caniuse.com/#feat=css-appearance"><span class="smallcaps">CSS</span> Appearance</a></li>
           <li><a href="https://caniuse.com/#feat=css-sel3"><span class="smallcaps">CSS3</span> Selectors</a></li>
           <li><a href="https://caniuse.com/#feat=css-variables"><span class="smallcaps">CSS</span> Custom Properties</a></li>
+          <li><a href="https://caniuse.com/css-not-sel-list"><span class="smallcaps">CSS</span> Select list argument of :not()</a></li>
+          <li><a href="https://caniuse.com/css-matches-pseudo"><span class="smallcaps">CSS</span> :is() pseudo-class</a></li>
           <li><a href="https://www.caniuse.com/#feat=intersectionobserver">Intersection Observer API</a></li>
         </ul>
       </section>

diff --git a/docs/content/changelog.html b/docs/content/changelog.html
@@ -17,6 +17,7 @@ <h2>v2.0.10 - 2021-05-24</h2>
           <li>Added new Extras module for a custom <a href="audio.html"><span class="smallcaps">HTML</span> audio player</a></li>
           <li>Moved some icons assets to <a href="https://github.com/aaronpinero/pinero-icons">a separate repository</a></li>
           <li>Added styles for disabled button inputs</li>
+          <li>Updated <a href="compatibility.html">compatibility information</a></li>
         </ul>
         <h2>v2.0.9 - 2021-01-14</h2>
         <ul>

diff --git a/docs/content/compatibility.html b/docs/content/compatibility.html
@@ -24,6 +24,8 @@ <h1>Browser Compatibility</h1>
           <li><a href="https://caniuse.com/#feat=css-appearance"><span class="smallcaps">CSS</span> Appearance</a></li>
           <li><a href="https://caniuse.com/#feat=css-sel3"><span class="smallcaps">CSS3</span> Selectors</a></li>
           <li><a href="https://caniuse.com/#feat=css-variables"><span class="smallcaps">CSS</span> Custom Properties</a></li>
+          <li><a href="https://caniuse.com/css-not-sel-list"><span class="smallcaps">CSS</span> Select list argument of :not()</a></li>
+          <li><a href="https://caniuse.com/css-matches-pseudo"><span class="smallcaps">CSS</span> :is() pseudo-class</a></li>
           <li><a href="https://www.caniuse.com/#feat=intersectionobserver">Intersection Observer API</a></li>
         </ul>
       </section>

diff --git a/docs/resources/style/tyfy-docs.css b/docs/resources/style/tyfy-docs.css
@@ -190,12 +190,7 @@ body dl * + *, body ol * + *, body ul * + * {
 body dl * + dd {
   margin-top: 0;
 }
-body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h1,
-body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h2,
-body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h3,
-body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h4,
-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 {
+body :not(h1, h2, h3, h4, h5, h6) + :is(h1,h2,h3,h4,h5,h6) {
   margin-top: 2.625rem;
 }
 
@@ -208,12 +203,7 @@ body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
 .tymargins-on dl * + dd {
   margin-top: 0;
 }
-.tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h1,
-.tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h2,
-.tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h3,
-.tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h4,
-.tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h5,
-.tymargins-on :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
+.tymargins-on :not(h1, h2, h3, h4, h5, h6) + :is(h1,h2,h3,h4,h5,h6) {
   margin-top: 2.625rem;
 }
 

diff --git a/source/scss/required/_mixins.scss b/source/scss/required/_mixins.scss
@@ -4,16 +4,7 @@
 // clears floats inside the element to which the mixin is applied
 
 @mixin tyclear {
-  *zoom:1;
-  &::before,
-  &::after {
-    display:table;
-    content:"";
-    line-height:0;
-  }
-  &::after {
-    clear:both;
-  }
+  display: flow-root;
 }
 
 ////////// tyhidden mixin //////////
@@ -66,12 +57,7 @@
 @mixin tymargins-size ($context:all, $measure:tyspacing(md)) {
   @if $context == headings {
     // headings
-    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h1,
-    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h2,
-    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h3,
-    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h4,
-    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h5,
-    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
+    :not(h1,h2,h3,h4,h5,h6) + :is(h1,h2,h3,h4,h5,h6) {
       margin-top:$measure;
     }
   }