85 lines
1.7 KiB
SCSS
85 lines
1.7 KiB
SCSS
/*
|
|
App reset by Ben Frain @benfrain / benfrain.com
|
|
Slightly modified by Bharani @bharani91 / github.com/bharani91
|
|
*/
|
|
|
|
/*Hat tip to @thierrykoblentz for this approach: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: rgba(255,255,255,0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
input[type],
|
|
[contenteditable] {
|
|
user-select: text;
|
|
}
|
|
|
|
body,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
/*IMPORTANT: This removes the focus outline for most browsers. Be aware this is a backwards accessibilty step! Mozilla (i.e. Firefox) also adds a dotted outline around a tags and buttons when they receive tab focus which I haven't found an unhacky way of removing.*/
|
|
a:focus,
|
|
button:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
button {
|
|
appearance: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
input,
|
|
fieldset {
|
|
appearance: none;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/*This switches the default outline off when an input receives focus (really important for users tabbing through with a keyboard) so ensure you put something decent in for your input focus instead!!*/
|
|
input:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/*Removes the default focusring that Mozilla places on select items. From: http://stackoverflow.com/a/18853002/1147859
|
|
Ensure you set `#000` to the colour you want your text to appear */
|
|
select:-moz-focusring {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 #000;
|
|
} |