sass-toolkit/tests/controls/15-underline.css

Think of Toolkit as your swiss army knife for modern design and development.

/**
  * Underline
**/
.underline-default {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline";
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #fff 75%, #00e 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 1.125em;
  text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-background {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($background: #f00)";
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #f00 75%, #00e 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 1.125em;
  text-shadow: 0.0625em 0.0625em 0 #f00, -0.0625em 0 0 #f00;
}
.underline-color {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($color: #f00)";
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #fff 75%, #f00 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 1.125em;
  text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-clear-descenders {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($clear-descenders: false)";
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #fff 75%, #00e 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 1.125em;
}
.underline-distance {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($distance: 2)";
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #fff 75%, #00e 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 2.125em;
  text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-width {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($width: 1)";
  text-decoration: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to top, #fff 75%, #00e 75%);
  background-size: 0.125em 0.125em;
  background-position: 0 1.0625em;
  text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}
.underline-first-extend {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($background: green, $extend: true)";
  background-image: linear-gradient(to top, green 75%, #00e 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 1.125em;
  text-shadow: 0.0625em 0.0625em 0 green, -0.0625em 0 0 green;
}
.underline-first-extend, .underline-second-extend {
  text-decoration: none;
  background-repeat: repeat-x;
}
.underline-second-extend {
  _setting-underline-background: #fff;
  _setting-underline-color: #00e;
  _setting-underline-clear-descenders: true;
  _setting-underline-distance: 1;
  _setting-underline-width: 2;
  _test: "@include underline($color: green, $extend: true)";
  background-image: linear-gradient(to top, #fff 75%, green 75%);
  background-size: 0.125em 0.1875em;
  background-position: 0 1.125em;
  text-shadow: 0.0625em 0.0625em 0 #fff, -0.0625em 0 0 #fff;
}