UI COMPONENTS

dabblet.css

/******************************************************************
UI COMPONENTS
******************************************************************/
/*
 * BUTTONS
 */
/* line 177, ../sass/_default.scss */
a.btn, .widget li[id*=menu-item] a, .widget .blogroll a, button.btn {
  display: block;
  position: relative;
  padding: 8px 14px 6px;
  margin: 10px inherit;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'GeogrotesqueMedium', sans-serif;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  color: white;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFEAF4B', endColorstr='#FFFE920B');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYWY0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlOTIwYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feaf4b), color-stop(100%, #fe920b));
  background-image: -webkit-linear-gradient(#feaf4b, #fe920b);
  background-image: -moz-linear-gradient(#feaf4b, #fe920b);
  background-image: -o-linear-gradient(#feaf4b, #fe920b);
  background-image: -ms-linear-gradient(#feaf4b, #fe920b);
  background-image: linear-gradient(#feaf4b, #fe920b);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px; }
  /* line 194, ../sass/_default.scss */
  a.btn:after, .widget li[id*=menu-item] a:after, .widget .blogroll a:after, button.btn:after {
    position: absolute;
    width: 10px;
    height: 12px;
    right: 16px;
    top: 50%;
    margin-top: -7px;
    background: url(../img/icons/arrows.png) -14px -11px;
    content: ''; }
  /* line 203, ../sass/_default.scss */
  a.btn:hover:after, .widget li[id*=menu-item] a:hover:after, .widget .blogroll a:hover:after, button.btn:hover:after {
    right: 12px; }

/******************************************************************
 FORM STYLES
******************************************************************/
/* line 1208, ../sass/_default.scss */
form {
  margin-bottom: 15px;
  margin-top: -10px; }
  /* line 1212, ../sass/_default.scss */
  form input[type=email] {
    width: 252px;
    padding: 12px 14px;
    color: #8d8d8d;
    border: thin solid #cacaca;
    outline: none;
    font: normal 14px/1 "GeogrotesqueLight", sans-serif;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out; }
    /* line 1222, ../sass/_default.scss */
    form input[type=email]:focus {
      color: #333;
      border-color: #888;
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); }
  /* line 1229, ../sass/_default.scss */
  form button[type=submit] {
    margin-top: 13px;
    margin-left: 0;
    padding: 8px 37px 8px 25px;
    outline: none;
    border: none;
    font: normal 14px/1 "GeogrotesqueMedium", sans-serif;
    text-transform: uppercase; }
    /* line 1239, ../sass/_default.scss */
    form button[type=submit]:before {
      width: 112.2px;
      height: 6px;
      bottom: -6px;
      background-size: 112.2px;
      opacity: 0.38; }
    /* line 1247, ../sass/_default.scss */
    form button[type=submit]:after {
      top: 53%; }
    /* line 1248, ../sass/_default.scss */
    form button[type=submit]:hover:after {
      right: 14px; }

dabblet.html

<form class="newsletter" action="/">
	<input type="email" placeholder="Indtast e-mail…" id="email" name="email" />
	<button class="btn" type="submit">Tilmeld</button>
</form>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}