use correct naming syntaxt on block classes

bring · May 11, 2021 · ba69c0c · ba69c0c
1 parent d7083d6
commit ba69c0c
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 24 deletions.
diff --git a/src/shared/commonCombos/full-page-example/Full-page-example.md b/src/shared/commonCombos/full-page-example/Full-page-example.md
@@ -25,7 +25,7 @@
   </div>
 </header>
 <div class="hw-container hw-container--mt hw-container--mb">
- <div class="hw-block hw-block--mt-medium-3--responsive">
+ <div class="hw-block hw-block--mt-medium-3-responsive">
   <div class="hw-breadcrumbs">
     <div class="hw-breadcrumb">
       <a class="hw-link" href="#">Home</a>
@@ -48,23 +48,23 @@
     <span class="hw-breadcrumb__current">Current content</span>
   </div>
 </div>
-<div class="hw-block hw-block--mt-medium-3--responsive hw-block--mb-large-2--responsive">
+<div class="hw-block hw-block--mt-medium-3-responsive hw-block--mb-large-2-responsive">
   <h1>H1 Heading</h1>
 </div>
-<div class="hw-block hw-block--mb-medium-2--responsive">
+<div class="hw-block hw-block--mb-medium-2-responsive">
 <h2>H2 Heading</h2>
 </div>
-<div class="hw-block hw-block--mb-large-2--responsive">
+<div class="hw-block hw-block--mb-large-2-responsive">
 Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
 </div>
 
-<div class="hw-block hw-block--mb-medium-2--responsive">
+<div class="hw-block hw-block--mb-medium-2-responsive">
 <h3>H3 Heading</h3>
 </div>
 <div class="hw-block">
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
 </div>
-<div class="hw-block--mt-large-2--responsive hw-block--mb-large-2--responsive">
+<div class="hw-block--mt-large-2-responsive hw-block--mb-large-2-responsive">
 <figure class="hw-figure">
   <div class="hw-figure__container">
     <img
@@ -77,10 +77,10 @@ Bring to the table win-win survival strategies to ensure proactive domination. A
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 </div>
 
-<div class="hw-block hw-block--mt-large-2--responsive hw-block--mb-medium-3--responsive">
+<div class="hw-block hw-block--mt-large-2-responsive hw-block--mb-medium-3-responsive">
 <h2>H2 Heading</h2>
 </div>
-<div class="hw-block hw-block--mb-large-5--responsive">
+<div class="hw-block hw-block--mb-large-5-responsive">
 <ul class="hw-accordion" data-hw-accordion>
     <li class="hw-accordion__item">
       <button class="hw-accordion__trigger">

diff --git a/src/shared/guidelines/Spacing.md b/src/shared/guidelines/Spacing.md
@@ -47,19 +47,19 @@ For desktop the value is same as above and its one level down for mobile devices
 
 
 ```code
-  --hw-spacing-small-1--responsive: 4px;   
-  --hw-spacing-small-2--responsive: 8px; 
-  --hw-spacing-small-3--responsive: 12px;                      
-  --hw-spacing-small-4--responsive: 16px;
-  --hw-spacing-medium-1--responsive: 20px;
-  --hw-spacing-medium-2--responsive: 24px;
-  --hw-spacing-medium-3--responsive: 32px;
-  --hw-spacing-medium-4--responsive: 40px;
-  --hw-spacing-large-1--responsive: 48px;
-  --hw-spacing-large-2--responsive: 64px;
-  --hw-spacing-large-3--responsive: 80px;
-  --hw-spacing-large-4--responsive: 120px;
-  --hw-spacing-large-5--responsive: 160px; 
+  --hw-spacing-small-1-responsive: 4px;   
+  --hw-spacing-small-2-responsive: 8px; 
+  --hw-spacing-small-3-responsive: 12px;                      
+  --hw-spacing-small-4-responsive: 16px;
+  --hw-spacing-medium-1-responsive: 20px;
+  --hw-spacing-medium-2-responsive: 24px;
+  --hw-spacing-medium-3-responsive: 32px;
+  --hw-spacing-medium-4-responsive: 40px;
+  --hw-spacing-large-1-responsive: 48px;
+  --hw-spacing-large-2-responsive: 64px;
+  --hw-spacing-large-3-responsive: 80px;
+  --hw-spacing-large-4-responsive: 120px;
+  --hw-spacing-large-5-responsive: 160px; 
 ```
 
 

diff --git a/src/shared/layout/block/Block.md b/src/shared/layout/block/Block.md
@@ -120,17 +120,17 @@ The values are one level down when screen is less than and equal to 720px
     </div>
   </div>
   <div class="hw-helpers-margin-highlighter">
-    <div class="hw-block hw-block--mb-medium-1--responsive hw-block--mt-medium-1--responsive">
+    <div class="hw-block hw-block--mb-medium-1-responsive hw-block--mt-medium-1-responsive">
       <p>Block with responsive spacing top and bottom margins</p>
     </div>
   </div>
   <div class="hw-helpers-margin-highlighter">
-     <div class="hw-block hw-block--mb-medium-2--responsive hw-block--mt-medium-2--responsive">
+     <div class="hw-block hw-block--mb-medium-2-responsive hw-block--mt-medium-2-responsive">
       <p>Block with responsive spacing top and bottom margins</p>
     </div>
   </div>
    <div class="hw-helpers-margin-highlighter">
-     <div class="hw-block hw-block--mb-medium-3--responsive hw-block--mt-medium-3--responsive">
+     <div class="hw-block hw-block--mb-medium-3-responsive hw-block--mt-medium-3-responsive">
       <p>Block with responsive spacing top and bottom margins</p>
     </div>
   </div>

diff --git a/src/shared/layout/block/block.css b/src/shared/layout/block/block.css
@@ -51,6 +51,39 @@
 
 
  /* Use these responsive classes for spacing in mobile and desktop */
+ &--mt-small-1-responsive  { margin-top: var(--hw-spacing-small-1); }
+  &--mt-small-2-responsive  { margin-top: var(--hw-spacing-small-2); }
+  &--mt-small-3-responsive  { margin-top: var(--hw-spacing-small-3); }
+  &--mt-small-4-responsive  { margin-top: var(--hw-spacing-small-4); }
+
+  &--mb-small-1-responsive  { margin-bottom: var(--hw-spacing-small-1); }
+  &--mb-small-2-responsive  { margin-bottom: var(--hw-spacing-small-2); }
+  &--mb-small-3-responsive  { margin-bottom: var(--hw-spacing-small-3); }
+  &--mb-small-4-responsive  { margin-bottom: var(--hw-spacing-small-4); }
+
+  &--mt-medium-1-responsive { margin-top: var(--hw-spacing-medium-1); }
+  &--mt-medium-2-responsive { margin-top: var(--hw-spacing-medium-2); }
+  &--mt-medium-3-responsive { margin-top: var(--hw-spacing-medium-3); }
+  &--mt-medium-4-responsive { margin-top: var(--hw-spacing-medium-4); }
+
+  &--mb-medium-1-responsive { margin-bottom: var(--hw-spacing-medium-1); }
+  &--mb-medium-2-responsive { margin-bottom: var(--hw-spacing-medium-2); }
+  &--mb-medium-3-responsive { margin-bottom: var(--hw-spacing-medium-3); }
+  &--mb-medium-4-responsive { margin-bottom: var(--hw-spacing-medium-4); }
+
+  &--mt-large-1-responsive  { margin-top: var(--hw-spacing-large-1); }
+  &--mt-large-2-responsive  { margin-top: var(--hw-spacing-large-2); }
+  &--mt-large-3-responsive  { margin-top: var(--hw-spacing-large-3); }
+  &--mt-large-4-responsive  { margin-top: var(--hw-spacing-large-4); }
+  &--mt-large-5-responsive  { margin-top: var(--hw-spacing-large-5); }
+
+  &--mb-large-1-responsive  { margin-bottom: var(--hw-spacing-large-1); }
+  &--mb-large-2-responsive  { margin-bottom: var(--hw-spacing-large-2); }
+  &--mb-large-3-responsive  { margin-bottom: var(--hw-spacing-large-3); }
+  &--mb-large-4-responsive  { margin-bottom: var(--hw-spacing-large-4); }
+  &--mb-large-5-responsive  { margin-bottom: var(--hw-spacing-large-5); }
+
+ /************ Deprecated, should be removed by May 20th 2021 */
   &--mt-small-1--responsive  { margin-top: var(--hw-spacing-small-1); }
   &--mt-small-2--responsive  { margin-top: var(--hw-spacing-small-2); }
   &--mt-small-3--responsive  { margin-top: var(--hw-spacing-small-3); }
@@ -83,6 +116,8 @@
   &--mb-large-4--responsive  { margin-bottom: var(--hw-spacing-large-4); }
   &--mb-large-5--responsive  { margin-bottom: var(--hw-spacing-large-5); }
 
+  /*********************************************************************/
+
 
   /******** Padding ********/
   &--py {
@@ -144,6 +179,37 @@
    * Modifiers: padding and padding variations
    */
 
+   &--mt-small-2-responsive  { margin-top: var(--hw-spacing-small-1); }
+   &--mt-small-3-responsive  { margin-top: var(--hw-spacing-small-2); }
+   &--mt-small-4-responsive  { margin-top: var(--hw-spacing-small-3); }
+
+   &--mb-small-2-responsive  { margin-bottom: var(--hw-spacing-small-1); }
+   &--mb-small-3-responsive  { margin-bottom: var(--hw-spacing-small-2); }
+   &--mb-small-4-responsive  { margin-bottom: var(--hw-spacing-small-3); }
+
+   &--mt-medium-1-responsive { margin-top: var(--hw-spacing-small-4); }
+   &--mt-medium-2-responsive { margin-top: var(--hw-spacing-medium-1); }
+   &--mt-medium-3-responsive { margin-top: var(--hw-spacing-medium-2); }
+   &--mt-medium-4-responsive { margin-top: var(--hw-spacing-medium-3); }
+
+   &--mb-medium-1-responsive { margin-bottom: var(--hw-spacing-small-4); }
+   &--mb-medium-2-responsive { margin-bottom: var(--hw-spacing-medium-1); }
+   &--mb-medium-3-responsive { margin-bottom: var(--hw-spacing-medium-2); }
+   &--mb-medium-4-responsive { margin-bottom: var(--hw-spacing-medium-3); }
+
+   &--mt-large-1-responsive  { margin-top: var(--hw-spacing-medium-4); }
+   &--mt-large-2-responsive  { margin-top: var(--hw-spacing-large-1); }
+   &--mt-large-3-responsive  { margin-top: var(--hw-spacing-large-2); }
+   &--mt-large-4-responsive  { margin-top: var(--hw-spacing-large-3); }
+   &--mt-large-5-responsive  { margin-top: var(--hw-spacing-large-4); }
+
+   &--mb-large-1-responsive  { margin-bottom: var(--hw-spacing-medium-4); }
+   &--mb-large-2-responsive  { margin-bottom: var(--hw-spacing-large-1); }
+   &--mb-large-3-responsive  { margin-bottom: var(--hw-spacing-large-2); }
+   &--mb-large-4-responsive  { margin-bottom: var(--hw-spacing-large-3); }
+   &--mb-large-5-responsive  { margin-bottom: var(--hw-spacing-large-4); }
+
+    /* Deprecated, these classes should be deleted before May 20th 2021 */
     &--mt-small-2--responsive  { margin-top: var(--hw-spacing-small-1); }
     &--mt-small-3--responsive  { margin-top: var(--hw-spacing-small-2); }
     &--mt-small-4--responsive  { margin-top: var(--hw-spacing-small-3); }
@@ -173,6 +239,8 @@
     &--mb-large-3--responsive  { margin-bottom: var(--hw-spacing-large-2); }
     &--mb-large-4--responsive  { margin-bottom: var(--hw-spacing-large-3); }
     &--mb-large-5--responsive  { margin-bottom: var(--hw-spacing-large-4); }
+
+    /*******************************************************/
 
     &--py-responsive { 
       padding-top: var(--hw-spacing-medium-2);