Final flex cleanup (#793)

Author: aaronshekey

docs/brand/data-visualization.html

@@ -25,7 +25,7 @@
     {% header "h3", "Comparison" %}
     <p class="stacks-copy">This is the most common type of chart. Compare two or more values within two different parameters as the framework. This chart type helps to show differences/similarities between items and give context to the impact of those differences/similarities.</p>
 
-    <div class="d-flex my24 gs24 ff-row-wrap flex__allcells3 fc-black-400 ta-center">
+    <div class="d-flex my24 gs24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
         <div class="flex--item s-card">
             <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96"><g fill="currentColor"><path clip-rule="evenodd" d="m4 0h-4v92 4h4 92v-4h-92z" fill-rule="evenodd"/><path d="m11 47h22v39h-22z"/><path d="m67 58h22v28h-22z" fill-opacity=".2"/><path d="m39 12h22v74h-22z" fill-opacity=".6"/></g></svg>
             <div class="mt12">Bar chart</div>
@@ -55,7 +55,7 @@
     {% header "h3", "Part-to-a-whole" %}
     <p class="stacks-copy">Uses size or area to show how some group, entity, or amount breaks down into individual pieces that each represent a proportion of the whole. The data represented in these types of charts aren’t just about how things are divided, it’s about how they’re divided in relation to their whole and to each other. Each part (segment) of the chart represents data points that contribute to the whole and amount to 100% in total. This type makes it easier to identify equal or obviously different values.</p>
 
-    <div class="d-flex my24 gs24 ff-row-wrap flex__allcells3 fc-black-400 ta-center">
+    <div class="d-flex my24 gs24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
         <div class="flex--item s-card">
             <svg class="svg-icon native" width="96" height="96" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M82.395 66.385A39 39 0 0 0 87 48H70c0 12.15-9.85 22-22 22s-22-9.85-22-22a21.93 21.93 0 0 1 6.444-15.556L20.423 20.423a39 39 0 1 0 61.972 45.962z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M78.94 24.259a39 39 0 0 0-20.846-13.93l-4.399 16.416C63.085 29.255 70 37.82 70 48h17a39 39 0 0 0-8.06-23.741z" fill="currentColor" fill-opacity=".3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M37.906 10.329a39 39 0 0 0-17.483 10.094l12.02 12.02A21.93 21.93 0 0 1 48 26c1.97 0 3.879.259 5.695.744l4.399-16.415a39 39 0 0 0-20.188 0z" fill="currentColor" fill-opacity=".6"/></svg>
             <div class="mt12">Donut chart</div>
@@ -81,7 +81,7 @@
     {% header "h3", "Correlations" %}
     <p class="stacks-copy">Shows relationships and connections between the data or shows correlations between two or more variables. Often used as the first step toward the detection of cause-effect relationships. Use this type of chart to check whether there is any relationship between two variables and also to notice anomalies or clusters in the data.</p>
 
-    <div class="d-flex my24 gs24 ff-row-wrap flex__allcells3 fc-black-400 ta-center">
+    <div class="d-flex my24 gs24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
         <div class="flex--item s-card">
             <svg class="svg-icon native" fill="none" height="96" viewBox="0 0 96 96" width="96" ><g stroke="currentColor"><path d="m24 33.5-9 35 34-3.5 34.5 2.5-20-28-14.5-8.5z" fill="currentColor" fill-opacity=".2" stroke-width="2"/><path d="m13.7609 27.6547 35.2391-20.3453 35.2391 20.3453v40.6906l-35.2391 20.3453-35.2391-20.3453z" stroke-width="4"/><g stroke-opacity=".2" stroke-width="2"><path d="m24.0192 33.5773 24.9808-14.4226 24.9808 14.4226v28.8453l-24.9808 14.4227-24.9808-14.4227z"/><path d="m34.4115 39.5773 14.5885-8.4226 14.5885 8.4226v16.8453l-14.5885 8.4227-14.5885-8.4227z"/></g></g></svg>
             <div class="mt12">Radar</div>
@@ -95,7 +95,7 @@
     {% header "h3", "Trend over time" %}
     <p class="stacks-copy">Analyze data over a time period as a way to identify trends or changes in values. Viewing data over time helps to understand performance, particularly when paired with an established target or goal. Use this type of chart to better understand how something is currently performing and to track any changes over time.</p>
 
-    <div class="d-flex my24 gs24 ff-row-wrap flex__allcells3 fc-black-400 ta-center">
+    <div class="d-flex my24 gs24 ff-row-wrap flex__allitems3 fc-black-400 ta-center">
         <div class="flex--item s-card">
             <svg class="svg-icon native" width="96" height="96" fill="none"><path d="M57.8 52.338L42.2 41.117l-15.6 8.416L11 66.052V86h78V38l-15.6 3.117-15.6 11.22z" fill="currentColor" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H0v96h96v-4H4V0z" fill="currentColor"/></svg>
             <div class="mt12">Area chart</div>

docs/product/components/cards.html

@@ -46,7 +46,7 @@ <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
 <div class="s-card bs-lg">…</div>
 {% endhighlight %}
         <div class="stacks-preview--example">
-            <div class="d-flex flex__allcells4 md:fd-column gs12">
+            <div class="d-flex flex__allitems4 md:fd-column gs12">
                 <div class="flex--item s-card bs-sm">
                     <h2 class="fs-body3 lh-sm fc-dark">Small box shadow</h2>
                     <p class="fs-body1 fc-medium">This adds a small box shadow.</p>
@@ -83,7 +83,7 @@ <h2 class="fs-body3 lh-sm fc-dark">…</h2>
 </a>
 {% endhighlight %}
         <div class="stacks-preview--example">
-            <div class="d-flex flex__allcells4 fw-wrap ai-stretch md:fd-column gs12">
+            <div class="d-flex flex__allitems4 fw-wrap ai-stretch md:fd-column gs12">
                 <a href="#" class="flex--item s-card">
                     <h2 class="fs-body3 lh-sm fc-dark">Linked card title</h2>
                     <p class="fs-body1 fc-medium">This is a description of the card’s content.</p>
@@ -128,7 +128,7 @@ <h1 class="fs-body3 fc-dark">…</h1>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
-            <div class="d-flex flex__allcells4 md:fd-column gs12">
+            <div class="d-flex flex__allitems4 md:fd-column gs12">
                 <div class="flex--item s-card s-card__muted">
                     <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
                     <p class="fs-body1 fc-medium">This is a description of the card’s content.</p>

lib/css/atomic/_stacks-flex.less

@@ -44,7 +44,6 @@
         //      all child elements will automatically be sized.
         //  ----------------------------------------------------------------------------
         .create-flex-count-cols(@num, @count: 1) when (@count =< @num) {
-            .flex__allcells@{count},
             .flex__allitems@{count} {
                 > .d-flex,
                 > .flex--item {
@@ -117,9 +116,7 @@
             //      and max-width here to account for gutters.
             //  ------------------------------------------------------------------------
             > .flex--item@{count},                                  // [1]
-            &.flex__allcells@{count} > .d-flex,                     // [2]
             &.flex__allitems@{count} > .d-flex,                     // [2]
-            &.flex__allcells@{count} > .flex--item,                 // [2]
             &.flex__allitems@{count} > .flex--item {                // [2]
                 flex-basis: calc(~"@{itemWidth} - @{spacing}");
             }
@@ -160,7 +157,6 @@
 //  --  UNIVERSAL FLEX WIDTHS
 //      This applies a flex value it to all of a flex's direct children.
 //  --------------------------------------------------------------------------
-.flex__fl0,
 .flex__fl-shrink0 {
     &,
     > .d-flex,
@@ -177,7 +173,6 @@
     }
 }
 
-.flex__fl1,
 .flex__fl-grow1 {
     &,
     > .d-flex,