html, body, button, input, table, td, th {
font-family: $toolkit-font-stack;
}
// basic styles for HTML5 and other elements html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
margin: 0; padding: 0; vertical-align: baseline;
}
// HTML5 display definition main {
display: block;
}
// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units // clagnut.com/blog/348/#c790 // note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback // snook.ca/archives/html_and_css/font-size-with-rem // 2. Keeps page centred in all browsers regardless of content height // 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted // www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ // 4. Prevents iOS text size adjust after orientation change, without disabling user zoom. // 5. Force the scrollbar to always display in IE10/11
html {
font-size: 62.5%; // 1 overflow-y: scroll; // 2 // Allow RGBA here, this line has been copied from govuk_template // scss-lint:disable ColorVariable -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3 -webkit-text-size-adjust: 100%; // 4 -ms-text-size-adjust: 100%; // 4 -ms-overflow-style: scrollbar; // 5 background-color: $white;
}
// 1. Font-size increased to compensate for change to html element font-size in // order to support beta typography which was set in ems // (62.5% * 160% = 100%) // 2. Addresses margins handled incorrectly in IE6/7
body {
font-size: 160%; // 1 margin: 0; // 2 background: $white; color: $text-colour; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
ol, ul, nav ol, nav ul {
list-style: inherit;
}
fieldset {
border: none; padding: 0;
}
b, strong {
font-weight: 600;
}
img {
border: 0;
}
@include ie-lte(7) {
button { overflow: visible; }
}
abbr {
cursor: help;
}
// Link styles a:link {
color: $link-colour;
}
a:visited {
color: $link-visited-colour;
}
a:hover {
color: $link-hover-colour;
}
a:active {
color: $link-active-colour;
}
// Set focus styles a {
// Allow RGBA here, this line has been copied from govuk_template // scss-lint:disable ColorVariable -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
a:focus {
background-color: $focus-colour; outline: 3px solid $focus-colour;
}
input:focus, textarea:focus, select:focus, button:focus {
outline: 3px solid $focus-colour; outline-offset: 0;
}