List Samples

by Mike Gifford

HTML

<h1>This is a story of the Drupal 8 underline</h1>

<p>Once upone a time there was <a href="#">a standard Drupal 8</a> underline when people thought that it would be a good idea to spice it up a bit so that more people would know it was there <a href="#" class="underline1">why not make it a solid black line?</a> You could try something complicated <a href="#" class="underline2">recomended by lots on Stackoverflow</a> or even something with <a href="#" class="underline3">goofy images</a>. Sometimes though something subtle is good <a href="#" class="underline4">like green dots</a>. But this is Drupal so let's make them <a href="#" class="underline5">Drupal Blue dots</a>. We've got a styleguide though so we can choose a different blue, why not <a href="#" class="underline6">a light blue to make it blend in more</a> or <a href="#" class="underline6a">even smaller</a> or even <a href="#" class="underline6b">a light blue to make it blend in more</a>. A <a href="#" class="underline7">simple green dot</a> is easy! But you can just make <a href="#" class="underline8">a solid line too</a>

</p>
<br>Thanks to:
<ul>
    <li>http://stackoverflow.com/questions/1734618/css-underline-possible-to-increase-gap</li>
    <li>http://www.htmldog.com/examples/underlines.html</li>
    <li>https://groups.drupal.org/node/283223</li>
</ul>

CSS

/* Scroll down the the very, very, very bottom */





/**
 * @file
 * Generic theme-independent base styles.
 */
/**
 * Autocomplete.
 *
 * @see autocomplete.js
 */
/* Suggestion list */
#autocomplete {
  border: 1px solid;
  overflow: hidden;
  position: absolute;
  z-index: 100;
}
#autocomplete ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
#autocomplete li {
  background: #fff;
  color: #000;
  cursor: default;
  white-space: pre;
}
/* Animated throbber */
.js input.form-autocomplete {
  background-image: url(../../../misc/throbber.gif);
  background-position: 100% 2px;
  /* LTR */
  background-repeat: no-repeat;
}
.js input.throbbing {
  background-position: 100% -18px;
  /* LTR */
}
/**
 * Collapsible details.
 *
 * @see collapse.js
 */
.js details:not([open]) .details-wrapper {
  display: none;
}
/**
 * Resizable textareas.
 */
.form-textarea-wrapper textarea {
  display: block;
  margin: 0;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.resize-none {
  resize: none;
}
.resize-vertical {
  resize: vertical;
  min-height: 2em;
}
.resize-horizontal {
  resize: horizontal;
  max-width: 100%;
}
.resize-both {
  resize: both;
  max-width: 100%;
  min-height: 2em;
}
/**
 * TableDrag behavior.
 *
 * @see tabledrag.js
 */
body.drag {
  cursor: move;
}
.draggable a.tabledrag-handle {
  cursor: move;
  float: left;
  /* LTR */
  height: 1.7em;
  margin-left: -1em;
  /* LTR */
  overflow: hidden;
  text-decoration: none;
}
a.tabledrag-handle:hover {
  text-decoration: none;
}
a.tabledrag-handle .handle {
  background: url(../../../misc/draggable.png) no-repeat 6px 9px;
  height: 13px;
  margin: -0.4em 0.5em;
  /* LTR */
  padding: 0.42em 0.5em;
  /* LTR */
  width: 13px;
}
.touch .draggable td {
  padding: 0 10px;
}
.touch .draggable .menu-item__link {
  display: inline-block;
  padding: 10px 0;
}
.touch a.tabledrag-handle {
  height: 44px;
  width: 40px;
}
.touch...