{"version":3,"sources":["_h-Clearfix.less"],"names":[],"mappings":"AAiGE,mBACE,QAAA,GACA,QAAA,MACA,MAAA","file":"h-Clearfix.css","sourcesContent":["\n/*################################*\\\n    xmeter  |  _h-Clearfix.less\n\\*################################*/\n\n\n// Clearfix\n//\n// The Clearfix Helper creates a line break after an element\n// in order to push subsequent content below the container.\n// This could be a container of floats, or it could simply be an inline list item.\n// Use this as an alternative to the <code>br</code> element.\n//\n// The Clearfix Helper is used in the classical sense in the first example below (to clear a float).\n// In the second example, the Clearfix Helper creates a line break after the 2nd inline item.\n//\n// The last example shows an alternative to marking up postal addresses.\n// Instead of adding <code>br</code> elements to create line breaks in\n// postal addresses—the traditional approach—you may wrap each line of the address\n// with spans using the Clearfix Helper. This approach may be easier if the spans are already present,\n// for example, from microdata markup.\n//\n// <header><dl>\n//   <dt>author</dt>  <dd>Chris Harvey</dd>\n//   <dt>updated</dt> <dd><time>2017-02-09</time></dd>\n// </dl></header>\n//\n// Markup:\n// <!--link rel=\"stylesheet\" href=\"/node_modules/xmeter/css/dist/h-Clearfix.css\"/-->\n// <div class=\"h-Clearfix\">\n//   <div style=\"font-weight: 700; float:  left;\">gravity</div>\n//   <div style=\"font-weight: 700; float: right;\">supernova</div>\n// </div>\n// <div>spacetime black hole singularity</div>\n// <ul>\n//   <li class=\"h-Inline\">spacetime </li>\n//   <li class=\"h-Inline h-Clearfix\">black hole </li>\n//   <li class=\"h-Inline\">singularity </li>\n//   <li class=\"h-Inline\">neutron star </li>\n// </ul>\n// <p>\n//   <span class=\"h-Clearfix\">The White House</span>\n//   <span class=\"h-Clearfix\">1600 Pennsylvania Ave NW</span>\n//   <span class=\"h-Clearfix\">Washington, DC 20500</span>\n// </p>\n//\n// Weight: 3\n//\n// Styleguide Helpers.Clearfix\n\n// Example 1\n//\n// The Clearfix Helper is used in the classical sense: to clear a float.\n//\n// Markup:\n// <div class=\"h-Clearfix\">\n//   <div style=\"font-weight: 700; float:  left;\">gravity</div>\n//   <div style=\"font-weight: 700; float: right;\">supernova</div>\n// </div>\n// <div>spacetime black hole singularity</div>\n//\n// Styleguide Helpers.Clearfix.1\n\n\n// Example 2\n//\n// The Clearfix Helper creates a line break after the 2nd inline list item.\n//\n// Markup:\n// <ul>\n//   <li class=\"h-Inline\">spacetime </li>\n//   <li class=\"h-Inline h-Clearfix\">black hole </li>\n//   <li class=\"h-Inline\">singularity </li>\n//   <li class=\"h-Inline\">neutron star </li>\n// </ul>\n//\n// Styleguide Helpers.Clearfix.2\n\n\n// Example 3\n//\n// An alternative to marking up postal addresses.\n// Instead of adding <code>br</code> elements to create line breaks in\n// postal addresses—the traditional approach—you may wrap each line of the address\n// with spans using the Clearfix Helper. This approach may be easier if the spans are already present,\n// for example, from microdata markup.\n//\n// Markup:\n// <p>\n//   <span class=\"h-Clearfix\">The White House</span>\n//   <span class=\"h-Clearfix\">1600 Pennsylvania Ave NW</span>\n//   <span class=\"h-Clearfix\">Washington, DC 20500</span>\n// </p>\n//\n// Styleguide Helpers.Clearfix.3\n\n.h-Clearfix {\n  &::after {\n    content: '';\n    display: block;\n    clear: both;\n  }\n}\n"]}