HubSpot CSS Macros

hubspot-macros.css

{% macro transition(value) -%} 
  -webkit-transition: {{ value }};
	-o-transition: {{ value }};
  transition: {{ value }};
{%- endmacro %}

{% macro transform(value) -%}
  -webkit-transform: {{ value }};
  -ms-transform: {{ value }};
  transform: {{ value }};
{%- endmacro %}

{% macro remCalc(value) -%} 
	{{ value / 16 }}rem
{%- endmacro %}

{% macro screenReaderText(selector) -%}
  {{selector}} {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
  }

  {{selector}}:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
  }
{%- endmacro %}

{% macro container(selector) -%}
	{{ selector }} {
    margin: 0 auto;
    max-width: {{ maxWidth }};
    padding-left: {{ gutters.small }};
    padding-right: {{ gutters.small }};  
    width: 100%;
  }

  @media (min-width: {{breakpoints.large}}) {
    {{ selector }} {
      padding-left: {{ gutters.large }};
      padding-right: {{ gutters.large }};
    }
  }
{%- endmacro %}

{% macro displayFlex() -%}
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
{%- endmacro %}

{% macro flexJustifyCenter() -%}
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
{%- endmacro %}

{% macro flexJustifyStart() -%}
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
{%- endmacro %}

{% macro flexJustifyEnd() -%}
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
{%- endmacro %}

{% macro flexJustifySpaceBetween() -%}
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
{%- endmacro %}

{% macro flexAlignCenter() -%}
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
{%- endmacro %}

{% macro flexAlignStart() -%}
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
{%- endmacro %}

{% macro flexAlignStretch() -%}
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
{%- endmacro %}

{% macro flexGrow(value) -%}
	-webkit-box-flex: {{ value }};
  -ms-flex-positive: {{ value }};
  flex-grow: {{ value }};
{%- endmacro %}

{% macro flexWrap(value) -%}
  -ms-flex-wrap: {{ value }};
  flex-wrap: {{ value }};
{%- endmacro %}

{% macro flexBasis(value) -%}
	-ms-flex-preferred-size: {{ value }};
	flex-basis: {{ value }};
{%- endmacro %}

{% macro flexShrink(value) -%}
	-ms-flex-negative: {{ value }};
	flex-shrink: {{ value }};
{%- endmacro %}