Merge pull request #1868 from cfpb/ans_mq_format

Normalize media query syntax

docs/assets/css/header.less

@@ -23,8 +23,8 @@
   vertical-align: middle;
 }
 
-// Mobile size.
-.respond-to-max( @bp-xs-max, {
+// Mobile only.
+.respond-to-max(@bp-xs-max, {
 
   .site-header {
     background-color: @gray-5;
@@ -65,10 +65,10 @@
       padding: 1em;
     }
   }
-} );
+});
 
-// Desktop and tablet size.
-.respond-to-min( @bp-sm-min, {
+// Tablet and above.
+.respond-to-min(@bp-sm-min, {
 
   #search-form {
     margin: 0;
@@ -119,4 +119,4 @@
   .nav-list-item:last-child {
     margin-right: 0px;
   }
-} );
+});

docs/assets/css/layout.less

@@ -1,7 +1,8 @@
 // Taken from enhancements/layout.less in cfgov-refresh
 
 .wrapper__match-content {
+  // Tablet and above.
   .respond-to-min(@bp-sm-min, {
     max-width: @grid_wrapper-width - ( @grid_gutter-width * 2 );
-  } );
+  });
 }

docs/assets/css/main.less

@@ -81,10 +81,10 @@ details[open] summary::after {
   margin: 0 auto;
   padding: 0 30px;
 
-  // Mobile size.
-  .respond-to-max( @bp-xs-max, {
+  // Mobile only.
+  .respond-to-max(@bp-xs-max, {
     padding: 0;
-  } );
+  });
 }
 
 main {
@@ -116,8 +116,8 @@ main {
   }
 }
 
-// Mobile size.
-.respond-to-max( @bp-xs-max, {
+// Mobile only.
+.respond-to-max(@bp-xs-max, {
 
   main {
     padding: 0;
@@ -143,7 +143,7 @@ main {
   .ds-footer {
     padding: 0 15px;
   }
-} );
+});
 
 // Example shapes - for transition examples.
 

docs/assets/css/netlify.less

@@ -27,7 +27,7 @@
   // Hide the admin buttons when printing
   .respond-to-print( {
     display: none;
-  } );
+  });
 }
 
 // Don't show the toggle code button in the Netlify CMS preview pane

docs/assets/css/sidebar.less

@@ -23,8 +23,8 @@
   }
 }
 
-// Desktop and tablet size.
-.respond-to-min( @bp-sm-min, {
+// Tablet and above.
+.respond-to-min(@bp-sm-min, {
 
   .ds-nav ul:last-child {
     margin-bottom: 30px;
@@ -46,10 +46,10 @@
   .ds-nav-1 {
     border-bottom: 1px solid @gray-40;
   }
-} );
+});
 
-// Mobile size.
-.respond-to-max( @bp-xs-max, {
+// Mobile only.
+.respond-to-max(@bp-xs-max, {
 
   .ds-nav a {
     border-style: solid;
@@ -92,4 +92,4 @@
   .ds-nav > .m-list > .m-list_item {
     margin-left: 10px;
   }
-} );
+});

docs/assets/css/tabs.less

@@ -80,17 +80,17 @@
   padding: 20px 40px 7px;
 }
 
-// Mobile view.
-.respond-to-max( @bp-sm-max, {
+// Tablet and below.
+.respond-to-max(@bp-sm-max, {
   .m-tabs_panel {
     &.u-hidden {
       display: block !important;
     }
   }
-} );
+});
 
-// Desktop view.
-.respond-to-min( @bp-med-min, {
+// Desktop and above.
+.respond-to-min(@bp-med-min, {
   .m-tabs_list {
     display: flex;
   }
@@ -108,4 +108,4 @@
     .u-visually-hidden();
   }
 
-} );
+});

docs/pages/alerts.md

@@ -13,7 +13,8 @@ variation_groups:
     variations:
       - variation_is_deprecated: false
         variation_name: Information
-        variation_description: The information alert is the base alert type without any
+        variation_description:
+          The information alert is the base alert type without any
           modifiers. If your alert message requires further explanation, include
           that content in a paragraph following the main message.
         variation_code_snippet: >-
@@ -66,7 +67,8 @@ variation_groups:
                   </ul>
               </div>
           </div>
-        variation_implementation: Alerts are hidden by default; you can toggle their
+        variation_implementation:
+          Alerts are hidden by default; you can toggle their
           visibility by adding or removing the `m-notification__visible` class
           to the base element.
       - variation_code_snippet: |-
@@ -78,11 +80,12 @@ variation_groups:
                   <div class="h4 m-notification_message">11 results</div>
               </div>
           </div>
-        variation_description: The success alert displays when an operation has run as
+        variation_description:
+          The success alert displays when an operation has run as
           expected, such as returning the number of results in a search.
-        variation_implementation: ""
+        variation_implementation: ''
         variation_name: Success
-        variation_specs: ""
+        variation_specs: ''
       - variation_code_snippet: |-
           <div class="m-notification
                       m-notification__visible
@@ -92,15 +95,16 @@ variation_groups:
                   <div class="h4 m-notification_message">No results found.</div>
               </div>
           </div>
-        variation_description: The warning alert displays when an operation has run as
+        variation_description:
+          The warning alert displays when an operation has run as
           expected, but doesn’t have the expected results, such as a search that
           returned no result. This alert can also be used to display additional
           critical information to a user before they submit a form, such as how
           their data will be used and protected or a reminder that they can’t
           edit their responses after submitting.
-        variation_implementation: ""
+        variation_implementation: ''
         variation_name: Warning
-        variation_specs: ""
+        variation_specs: ''
       - variation_code_snippet: |-
           <div class="m-notification
                       m-notification__visible
@@ -110,7 +114,8 @@ variation_groups:
                   <div class="h4 m-notification_message">Page not found.</div>
               </div>
           </div>
-        variation_description: The error alert displays when an operation has not run as
+        variation_description:
+          The error alert displays when an operation has not run as
           expected and encounters an error. Use after validating on the server
           side to call out input errors preventing form submission.
         variation_implementation: >-
@@ -122,7 +127,7 @@ variation_groups:
           * For field level alerts, the error icon and message should
             always appear below the input field.
         variation_name: Error
-        variation_specs: ""
+        variation_specs: ''
       - variation_code_snippet: >-
           <div class="m-notification
                       m-notification__visible">
@@ -137,7 +142,7 @@ variation_groups:
           icons](https://cfpb.github.io/design-system/foundation/iconography) to
           reassure the user that an action is functioning as intended.
         variation_name: In-progress
-    variation_group_description: ""
+    variation_group_description: ''
   - variation_group_name: Field-level alerts
     variations:
       - variation_is_deprecated: false
@@ -152,8 +157,8 @@ variation_groups:
                   </span>
               </div>
           </div>
-        variation_code_snippet_rendered: ""
-        variation_specs: ""
+        variation_code_snippet_rendered: ''
+        variation_specs: ''
       - variation_is_deprecated: false
         variation_name: Warning
         variation_code_snippet: >-
@@ -167,7 +172,7 @@ variation_groups:
                   </span>
               </div>
           </div>
-        variation_specs: ""
+        variation_specs: ''
       - variation_is_deprecated: false
         variation_name: Error
         variation_code_snippet: >-
@@ -178,13 +183,14 @@ variation_groups:
                       This is a field-level alert with an error status.
                   </span>
           </div>
-        variation_specs: ""
-    variation_group_description: Field-level alerts reflect validation status and
+        variation_specs: ''
+    variation_group_description:
+      Field-level alerts reflect validation status and
       include success, warning, and error. Field-level alerts (icon and message)
       should always appear below the input field.
-guidelines: ""
+guidelines: ''
 eyebrow: Components
-use_cases: ""
+use_cases: ''
 accessibility: >-
   * For screen reader accessibility, form-level errors should include anchor
   links to the problem field in question.
@@ -218,5 +224,5 @@ behavior: >-
 
 
   In general, the best practice for server-side validation is to mark errors with both form-level and field-level errors.
-research: ""
+research: ''
 ---

docs/pages/atomic-components.md

@@ -10,10 +10,10 @@ description: Atomic Component is a micro framework for building Atomic Design
 use_cases: >-
   This framework is intended to be used in conjunction with adherence to Atomic
   Design principles. It helps provide a uniform way to build Atomic components
-  using HTML, CSS, and JavaScript. 
+  using HTML, CSS, and JavaScript.
 
 
-  Atomic prefixing standards for atoms, molecules, and organisms are covered in greater detail in [cfgov-refresh documentation](https://cfpb.github.io/cfgov-refresh/atomic-structure/). 
+  Atomic prefixing standards for atoms, molecules, and organisms are covered in greater detail in [cfgov-refresh documentation](https://cfpb.github.io/cfgov-refresh/atomic-structure/).
 
 
   An example use case in building a Molecule: molecules are prefixed with “m-” in CSS, JavaScript, and HTML files, as demonstrated below.
@@ -74,7 +74,7 @@ use_cases: >-
           this.ui.message.textContent = CONSTANTS.MESSAGE;
           this.ui.explanation.textContent = CONSTANTS.EXPLANATION;
         }
-  } );
+  });
 
 
   NotificationMolecule.constants = CONSTANTS;

docs/pages/buttons.md

@@ -9,7 +9,7 @@ description: Buttons signal actions. They should be used sparingly; each
   should lead users to another page or further information.
 variation_groups:
   - variation_group_name: Types
-    variation_group_description: ""
+    variation_group_description: ''
     variations:
       - variation_code_snippet: >-
           <button class="a-btn" title="Default state">Default state</button>
@@ -22,7 +22,8 @@ variation_groups:
 
 
           <button class="a-btn active" title="Active state">Active state</button>
-        variation_description: Use a primary button for an action that goes to the next
+        variation_description:
+          Use a primary button for an action that goes to the next
           step. Avoid using multiple primary buttons on a single page; there can
           be multiple secondary buttons per page.
         variation_implementation: >-
@@ -33,7 +34,7 @@ variation_groups:
 
 
           Apply the `a-btn` class to a link, button and submit input field to receive the atomic button styles. For more information, see [cf.gov refresh documentation on atomic styles](https://cfpb.github.io/cfgov-refresh/atomic-structure/).
-        variation_specs: ""
+        variation_specs: ''
         variation_name: Primary button
       - variation_code_snippet: >-
           <button class="a-btn a-btn__secondary" title="Default state">Default
@@ -49,7 +50,7 @@ variation_groups:
           <button class="a-btn a-btn__secondary active" title="Active state">Active state</button>
         variation_description: Use a secondary button for actions that happen on the current page.
         variation_name: Secondary button
-        variation_specs: ""
+        variation_specs: ''
       - variation_code_snippet: >-
           <button class="a-btn a-btn__disabled" title="Default state"
           disabled>Default state</button>
@@ -60,7 +61,7 @@ variation_groups:
 
           <button class="a-btn a-btn__disabled focus" title="Focused state" disabled>Focused state</button>
         variation_name: Disabled button
-        variation_specs: ""
+        variation_specs: ''
       - variation_code_snippet: >-
           <button class="a-btn a-btn__warning" title="Default state">Default
           state</button>
@@ -71,7 +72,7 @@ variation_groups:
 
           <button class="a-btn a-btn__warning focus" title="Focused state">Focused state</button>
         variation_name: Destructive button
-        variation_specs: ""
+        variation_specs: ''
       - variation_name: Destructive action
         variation_code_snippet: >-
           <div class="m-btn-group">
@@ -81,7 +82,7 @@ variation_groups:
         variation_description: When paired with a primary action, indicate the
           destructive action using a destructive action button link to the right
           of the primary button.
-        variation_specs: ""
+        variation_specs: ''
       - variation_is_deprecated: false
         variation_name: Full-width button (on x-small screens)
         variation_description: Reduce screen size to see this button in action.
@@ -107,7 +108,8 @@ variation_groups:
           </div>
       - variation_is_deprecated: false
         variation_name: Button with icon
-        variation_description: An icon should appear after the text it represents. The
+        variation_description:
+          An icon should appear after the text it represents. The
           only exception is the back button, in which the icon should appear
           before the button’s text. Each icon should be used exclusively and
           consistently for one action. Icons should never be underlined.
@@ -160,7 +162,7 @@ guidelines: >-
   * Use clear, succinct, and informative language.
 
   * Limit the copy length to 22 characters.
-behavior: ""
+behavior: ''
 restrictions:
   - restrictions_do: <button class="a-btn" title="Test button">Short label</button>
     restrictions_do_not: <button class="a-btn" title="Test button">This label is
@@ -182,10 +184,10 @@ restrictions:
           </span>
       </button>
 eyebrow: Components
-accessibility: ""
+accessibility: ''
 related_items: "* [Button
   variables](https://cfpb.github.io/design-system/development/variables#buttons\
   )"
 last_updated: 2020-01-28T15:55:47.394Z
-research: ""
+research: ''
 ---