PureCSS tweaks

pure-tweaks.css

/*
  dchest's PureCSS Tweaks 
  https://gist.github.com/dchest/500746c2e41baaafcab3
*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Optional link colors, should go before pure.css */
/*

a:link, a:visited {
  color: #0074d9;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #ff4136;
}

*/

.error {
  color: #b94a48;
}

.pure-form .has-error input,
.pure-form .has-error textarea,
.pure-form .has-error select,
.pure-form input.has-error,
.pure-form textarea.has-error,
.pure-form select.has-error {
    border-color: #b94a48;
}

.pure-form .has-error input:focus,
.pure-form .has-error textarea:focus,
.pure-form .has-error select:focus,
.pure-form input.has-error:focus,
.pure-form textarea.has-error:focus,
.pure-form select.has-error:focus {
  border-color: #e9322d;
}

.pure-form input[type=text], .pure-form input[type=password], .pure-form
input[type=email], .pure-form input[type=url], .pure-form input[type=date],
.pure-form input[type=month], .pure-form input[type=time], .pure-form
input[type=datetime], .pure-form input[type=datetime-local], .pure-form
input[type=week], .pure-form input[type=number], .pure-form
input[type=search], .pure-form input[type=tel], .pure-form input[type=color],
.pure-form select, .pure-form textarea {
  border-radius: 0;
  box-shadow: none;
  border-width: 2px;
}

.pure-form input[type=search] {
  border-radius: 4px;
}

a.pure-menu-link {
  text-decoration: none;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#1a000000',GradientType=0);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0%, rgba(0,0,0, 0.10)), to(rgba(0,0,0, 0.10)));
  background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.10) 0%, rgba(0,0,0, 0.10));
  background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.10) 0%, rgba(0,0,0, 0.10));
  background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.10) 0%, rgba(0,0,0, 0.10));
  background-image: linear-gradient(transparent, rgba(0,0,0, 0.10) 0%, rgba(0,0,0, 0.10));
}

.pure-button-active,
.pure-button:active {
  box-shadow: none;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0%, rgba(0,0,0, 0.20)), to(rgba(0,0,0, 0.20)));
  background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.20) 0%, rgba(0,0,0, 0.20));
  background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.20) 0%, rgba(0,0,0, 0.20));
  background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.20) 0%, rgba(0,0,0, 0.20));
  background-image: linear-gradient(transparent, rgba(0,0,0, 0.20) 0%, rgba(0,0,0, 0.20));
 }

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
  cursor: default;
  border: none;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=40);
}

.pure-button {
  border-radius: 1px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Fix */
@media only screen and (max-width : 480px) {
    .pure-form button[type="submit"] {
        margin: 0;
    }
}