yowainwright

// target IE 10 and 11 with a media query
@mixin support-ie-10-11 {
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @content
  }
}

// hack for css styles for < ie 9 only
@mixin support-ie-9($property, $value) {
	$property: #{$value + '\0/'};

yowainwright

/* usual suspects 👥 */
--blue: blue; /* yep, it's just the truth */
--redpink: #FB2743; /* I saw it on ASOS. I like what they're doing with blue. */
--floralwhite: #fffcf3 #fff floralwhite hsl(45,100,97)rgb(255,252,243); /* I saw it on Cosma Schema. */
  
/* off the beaten path, but weird and refreshing 👨‍🎨 */
--lightpurple: #E2D7FE;
--cartoonflesh: #FFAEA2;
--deeputramarine: #152783;

yowainwright

switch (inputFrequency) {
  case 1: 
    date = this.nextBillDateIsWithinOneMonth(nextBillDate) ? 
      moment(nextBillDate) : moment(nextBillDate).subtract(1, 'month')
    break
  case > initialFrequency:
    newFrequencyDelta = (inputFrequency - initialFrequency)
    date = moment(nextBillDate).add(newFrequencyDelta, 'month')
    break
  default:

yowainwright

@mixin play-button ($fontsize, $circlesize) {
	position: relative;
	&:after {
		content: '▶';
		display: block;
		width: $circlesize;
		height: $circlesize;
		border-radius: 100%;
		position: absolute;
		left: calc(50% - #{$circlesize / 2});

yowainwright

const build = () => {
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      if (err) return reject(err)
      resolve(stats)
    })
  })
}

export { build }

yowainwright

@mixin stripes($backgroundColor: black) {
    background-color: $backgroundColor;
    background-image: linear-gradient(to bottom right, transparent, transparent 25%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.2) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.2) 75%, rgba(255,255,255,.2));
    background-size: 4px 4px;
}

yowainwright

@mixin progress-bar-color($valueColor: $color-brand-contrast, $backgroundColor: transparent) {
  background-color: $backgroundColor;
  color: $valueColor;
  &::-moz-progress-bar {
    background-color: $valueColor;
  }
  &::-webkit-progress-bar {
    background-color: $backgroundColor;
  }
  &::-webkit-progress-value {

yowainwright

// vertically center
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}
// Example usage: @include vertical-align;

// horizontally align
@mixin horizontal-align($position: relative) {

yowainwright

This Gist contains a SCSS Mixin for Optimal Text Underlining

This SCSS Mixin changes the text underline color or its location relative to the text it underlines.

A Pen by Jeff Wainwright on CodePen.

License.

yowainwright

Check out gustavo! 🚀