CSS: Utility Styles

utilities.css

/**
 * Width
 */

.width-100-percent {
  width: 100%;
}

/**
 * divider
 */

.divider,
.divider-whitespace {
  display: block;
  height: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid #d4dde3;
  overflow: hidden;
  margin: 24px auto;
}

.divider-whitespace {
  border-bottom-width: 0;
}

/**
 * Padding
 */

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.padding-10 {
  padding: 10px !important;
}

.padding-20 {
  padding: 20px !important;
}

.padding-30 {
  padding: 30px !important;
}

.padding-40 {
  padding: 40px !important;
}

.padding-50 {
  padding: 50px !important;
}

.padding-t10 {
  padding-top: 10px !important;
}

.padding-t20 {
  padding-top: 20px !important;
}

.padding-r10 {
  padding-right: 10px !important;
}

.padding-r20 {
  padding-right: 20px !important;
}

.padding-b10 {
  padding-bottom: 10px !important;
}

.padding-b20 {
  padding-bottom: 20px !important;
}

.padding-l10 {
  padding-left: 10px !important;
}

.padding-l20 {
  padding-left: 20px !important;
}

/**
 * Margin
 */

.no-margin-top {
  margin-top: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.margin-10 {
  margin: 10px !important;
}

.margin-20 {
  margin: 20px !important;
}

.margin-30 {
  margin: 30px !important;
}

.margin-40 {
  margin: 40px !important;
}

.margin-50 {
  margin: 50px !important;
}

.margin-t0 {
  margin-top: 0 !important;
}

.margin-t5 {
  margin-top: 5px !important;
}

.margin-t10 {
  margin-top: 10px !important;
}

.margin-t15 {
  margin-top: 15px !important;
}

.margin-t20 {
  margin-top: 20px !important;
}

.margin-t30 {
  margin-top: 30px !important;
}

.margin-t40 {
  margin-top: 40px !important;
}

.margin-t50 {
  margin-top: 50px !important;
}

.margin-r0 {
  margin-right: 0 !important;
}

.margin-r10 {
  margin-right: 10px !important;
}

.margin-r20 {
  margin-right: 20px !important;
}

.margin-r30 {
  margin-right: 30px !important;
}

.margin-r40 {
  margin-right: 40px !important;
}

.margin-r50 {
  margin-right: 50px !important;
}

.margin-b5 {
  margin-bottom: 5px !important;
}

.margin-b10 {
  margin-bottom: 10px !important;
}

.margin-b15 {
  margin-bottom: 15px !important;
}

.margin-b20 {
  margin-bottom: 20px !important;
}

.margin-b30 {
  margin-bottom: 30px !important;
}

.margin-b40 {
  margin-bottom: 40px !important;
}

.margin-b50 {
  margin-bottom: 50px !important;
}

.margin-l10 {
  margin-left: 10px !important;
}

.margin-l20 {
  margin-left: 20px !important;
}

.margin-l30 {
  margin-left: 30px !important;
}

.margin-l40 {
  margin-left: 40px !important;
}

.margin-l50 {
  margin-left: 50px !important;
}

.max-height-200 {
  max-height: 200px !important;
  width: auto;
}

/**
 * Height
 */

.max-height-250 {
  max-height: 250px !important;
  width: auto;
}

.max-height-280 {
  max-height: 280px !important;
  width: auto;
}

.max-height-300 {
  max-height: 300px !important;
  width: auto;
}

.max-height-350 {
  max-height: 350px !important;
  width: auto;
}

.max-height-400 {
  max-height: 350px !important;
  width: auto;
}

/**
 * Background
 */
.no-bg {
  background: none !important;
  background-color: transparent !important;
}

/**
 * Text
 */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/**
 * Color - Bootflat
 */

.text-blue-jeans-light {
  color: #5d9cec;
}

.text-blue-jeans-dark {
  color: #4a89dc;
}

.text-aqua-light {
  color: #4fc1e9;
}

.text-aqua-dark {
  color: #3bafda;
}

.text-mint-light {
  color: #48cfad;
}

.text-mint-dark {
  color: #37bc9b;
}

.text-grass-light {
  color: #a0d468;
}

.text-grass-dark {
  color: #8cc152;
}

.text-sunflower-light {
  color: #ffce54;
}

.text-sunflower-dark {
  color: #f6bb42;
}

.text-bittersweet-light {
  color: #fc6e51;
}

.text-bittersweet-dark {
  color: #e9573f;
}

.text-grapefruit-light {
  color: #ed5565;
}

.text-grapefruit-dark {
  color: #da4453;
}

.text-lavender-light {
  color: #ac92ec;
}

.text-lavender-dark {
  color: #967adc;
}

.text-pink-rose-light {
  color: #ec87c0;
}

.text-pink-rose-dark {
  color: #d770ad;
}

.text-light-gray-light {
  color: #f5f7fa;
}

.text-light-gray-dark {
  color: #e6e9ed;
}

.text-medium-gray-light {
  color: #ccd1d9;
}

.text-medium-gray-dark {
  color: #aab2bd;
}

.text-dark-gray-light {
  color: #656d78;
}

.text-dark-gray-dark {
  color: #434a54;
}