Updated the normalise css.

This commit is contained in:
Fredrik Jonsson 2018-01-30 14:26:03 +01:00
commit fbf7a90ed3

View file

@ -12,6 +12,9 @@
//
// Style guide: forms.button
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
.button,
%button,
button,
@ -19,6 +22,7 @@ button,
html [type='button'],
[type='reset'],
[type='submit'] {
// sass-lint:disable no-vendor-prefixes
-moz-appearance: button;
-webkit-appearance: button; // 2
}
@ -30,12 +34,9 @@ button,
[type='reset'],
[type='submit'] {
@extend %button--disabled;
@include typeface(headings);
@include margin-right(.75);
@include margin-bottom(.75);
// Some styles don't apply to <a> links since they are inline elements by default.
display: inline-block;
padding: 2px 10px;
padding: 2px 6px;
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet. And prevent its "line-height: normal" rule below from
// breaking the "appearance: button" styling on the input elements.
@ -44,15 +45,8 @@ button,
// Improve usability and consistency of cursor style between image-type `input` and others.
cursor: pointer;
color: color(button);
text-align: center;
background-image: linear-gradient(#f6f6f6, #e2e2e2);
border: 1px solid #e4e4e4;
border-left-color: #d2d2d2;
border-right-color: #d2d2d2;
border-bottom-color: #b4b4b4;
border-radius: 2px;
// sass-lint:disable no-vendor-prefixes
// Remove the inner border and padding in Firefox.
&::-moz-focus-inner {
border-style: none;
@ -63,6 +57,7 @@ button,
&:-moz-focusring {
outline: 1px dotted ButtonText;
}
// sass-lint:enable no-vendor-prefixes
&:hover,
&:focus,
@ -71,13 +66,6 @@ button,
text-decoration: none;
color: color(button);
}
&:active {
border-color: #555;
text-shadow: color(button) 0 -1px 0;
background: color(grey-dark);
color: color(text-bg);
}
}
// Add button variations here.
@ -94,10 +82,6 @@ button,
// Re-set default cursor for disabled elements.
cursor: default;
color: color(button-disabled);
background-color: color(grey-extra-light);
border-color: color(grey-extra-light);
background-image: none;
text-shadow: none;
&:hover,
&:focus,