
// Floats
//
// Writing-direction independent floats. For RTL stylesheets, re-define
// these styles with the opposite direction. Templates need not be changed.

.u-float-start {
  float: left !important;
}

.u-float-end {
  float: right !important;
}


// Contain floats
//
// Contain all floated children and their margins.

.u-cf {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }

  &:after {
    clear: both;
  }
}


// Positioning context
//
// Create a new positioning context.

.u-pc {
  position: relative !important;
}


// Block Formatting Context
//
// Create a new Block Formatting Context. BFCs won’t overlap adjacent floats and
// will contain floated children and their margins.
//
// N.B. Will clip overflow.

.u-bfc {
  overflow: hidden !important;
}

// Floats
//
// Writing-direction independent floats. For RTL stylesheets, re-define
// these styles with the opposite direction. Templates need not be changed.

.u-float-start {
  float: left !important;
}

.u-float-end {
  float: right !important;
}


// Contain floats
//
// Contain all floated children and their margins.

.u-cf {
  &::before,
  &::after {
    content: ' ';
    display: table;
  }

  &::after {
    clear: both;
  }
}


// Positioning context
//
// Create a new positioning context.

.u-pc {
  position: relative !important;
}


// Block Formatting Context
//
// Create a new Block Formatting Context. BFCs won’t overlap adjacent floats and
// will contain floated children and their margins.
//
// N.B. Will clip overflow.

.u-bfc {
  overflow: hidden !important;
}

Update pseudo elements to use double colons
Update pseudo elements to use double colons

The modern pseudo element selector uses two colons... `::before` and `::after`