SCSS Reset helpers

common-scss-helpers.scss

/*
  SASS Class helpers

  to make these work, include them in some imported file (like variables.scss or mixins.scss) and 
  extend them on classes like so: 

  ul {
    @extend %reset-list;
  }

 */

// clearfix for clearing parents of floating elements
%clearfix {

  zoom: 1;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

}

// reset list for quick de-listing lists and breaking
// them horizontally
%reset-list {
  list-style: none;
  padding: 0;
  margin: 0;

  & > li {
    padding: 0;
    margin: 0;
  }

}

// helper class for making lists 'inline' - meaning that the list items align out horizontally
%inline-list {
  @extend %reset-list;
  & > li {
    display: inline-block;
  }
}

// helper class for making flex lists, by default, all space will be equally divided amongst the child elements.
%distributed-list {
  @extend %reset-list;
  display: flex;
  & > li {
    flex-basis: 100%;
  }
}

// helper class for making text-based 'icons'
%text-icon {
  font-family: "Roboto";
  font-weight: 900;
  text-transform: uppercase;
}

// helper class for nulling input styles
%reset-input {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  display: block;
  width: 100%;
  &:focus {
    outline: 0;
  }
}