Utils SASS file

utilities.scss

/*=============================================================================
=    Scales
=============================================================================*/
//
// Text
//
$textSizes: (
  (xxs,  .8rem),
  (xs,   1rem),
  (sm,   1.2rem),
  (md,   1.5rem),
  (lg,   1.8rem),
  (xlg,  2.5rem),
  (xxlg, 3rem)
);
$textWeights: (
  (light,    300),
  (normal,   400),
  (semibold, 600),
  (bold,     700)
);
//
// Border
//
$borderWidths: (
  (thin,   3px),
  (normal, 5px),
  (thick,  7px)
);
//
// Spacements
//
$spacementMap: (
  (none, 0),
  (xxs, 3px),
  (xs, 5px),
  (sm, 10px),
  (md, 13px),
  (lg, 15px),
  (xl, 20px),
  (xlg, 25px),
  (xxlg, 30px)
);
/*
@each $map in $textSizes {
  $name: nth($map,1);
  $value: nth($map,2);
  .text-#{$name} { font-size: $value; }
}
@each $map in $textWeights {
  $name: nth($map,1);
  $value: nth($map,2);
  .text-weight-#{$name} { font-weight: $value; }
}



@each $map in $borderWidths {
  $name: nth($map,1);
  $value: nth($map,2);
  .b-#{$name} { border-width: $value; }
  .br-#{$name} { border-right: $value solid; }
  .bt-#{$name} { border-top: $value solid; }
  .bl-#{$name} { border-left: $value solid }
  .bb-#{$name} { border-bottom: $value solid; }
}
*/
//
// Border Widths
//
$borderWidths: (
  (thin,   3px),
  (normal, 5px),
  (thick,  7px)
);
/*
@each $map in $borderWidths {
  $name: nth($map,1);
  $value: nth($map,2);
  .shadow-#{$name} { box-shadow: 0px 0px $value rgba(0,0,0,.1); }
}



@each $map in $spacementMap {
  $name: nth($map,1);
  $value: nth($map,2);
  // margins
  .m-#{$name} { margin: $value !important; }
  .mt-#{$name} { margin-top: $value !important; }
  .mb-#{$name} { margin-bottom: $value !important; }
  .ml-#{$name} { margin-left: $value !important; }
  .mr-#{$name} { margin-right: $value !important; }
  // padding
  .p-#{$name} { padding: $value !important; }
  .pt-#{$name} { padding-top: $value !important; }
  .pb-#{$name} { padding-bottom: $value !important; }
  .pl-#{$name} { padding-left: $value !important; }
  .pr-#{$name} { padding-right: $value !important; }
}
.m-auto {
	margin: 0 auto !important;
}
*/

/*=============================================================================
=    Color
=============================================================================*/
$colorMaps: (
  (black, #000),
  (white, #fff),
  (highlight-blue, $highlight-blue),
  (light-green, $light-green),
  (dark-green, $dark-green),
  (error-red, $error-red),
  (light-gray, $ms-light-gray),
  (gray, $ms-gray),
  (light-green, $ms-light-green),
  (green, $ms-green),
  (dark-green, $ms-dark-green),
  (dark-blue, $ms-dark-blue),
  (blue, $ms-blue),
  (dark-yellow, $ms-dark-yellow),
  (purple, $ms-purple),
  (orange, $ms-orange)
);
@each $map in $colorMaps {
  $name: nth($map,1);
  $value: nth($map,2);
  .color-#{$name} {
    color: $value;
    &.color-lighten {color: lighten($value, 10%);}
    &.color-darken {color: darken($value, 10%);}
  }
  .bg-#{$name} {
    background-color: $value;
    &.bg-lighten {background-color: lighten($value, 10%);}
    &.bg-darken {background-color: darken($value, 10%);}
  }
}

/*=============================================================================
=    Layout
=============================================================================*/
.rounded {
	border-radius: 5px;
}

.borderless {
  border: none !important;
}

.ib {
	display: inline-block;
	vertical-align: top;
}

.va-middle {
	vertical-align: middle;
}

.ws-nowrap {
	white-space: nowrap;
}

.ws-normal {
	white-space: normal;
}