src/assets/scss/base/_b_reset.scss
/** ======================================
* Base : reset
* ======================================= */
/**
* Init
* --------------------------------------- */
html {
box-sizing: border-box;
height: 100%;
font-size: 62.5%;
font-size: calc(1em * 0.625);
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
font-family: $font-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-M;
text-rendering: optimizeLegibility;
color: $clr-0-darker;
background: $clr-light;
overflow: hidden;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-width: $app-min-width;
}
[tabindex="-1"]:focus {
outline: none !important;
}
[data-whatintent="keyboard"] *:focus {
box-shadow: 0 0 0 5px #09f, 0 5px 20px #09f !important;
outline: 0;
}
a,
button,
textarea,
select,
input {
&:focus {
outline: none;
}
}
/**
* Typography
* --------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
p {
margin: 0;
}
small {
font-size: inherit;
}
abbr[title] {
text-transform: lowercase;
}
abbr,
acronym {
cursor: help;
}
/**
* Links
* --------------------------------------- */
a {
text-decoration: none;
color: $clr-1;
transition: color $trans-timing $trans-cubic;
&:active,
&:hover,
&:focus {
color: $clr-1-light;
}
}
/**
* List
* --------------------------------------- */
ul,
ol,
dl {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
dl dd {
margin: 0;
}
/**
* Embed
* --------------------------------------- */
img {
vertical-align: bottom;
&:not([src$=".svg"]) {
height: auto;
}
}
img,
video,
svg {
max-width: 100%;
}
iframe {
border: 0;
}
/**
* Form
* --------------------------------------- */
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
}
input,
select,
textarea {
display: block;
}
input:not([type="range"]),
textarea,
select {
appearance: none;
}
label {
display: inline-block;
cursor: pointer;
abbr {
display: none;
}
}
textarea {
resize: vertical;
}
[type="checkbox"],
[type="radio"] {
display: inline;
appearance: none;
&::-ms-check {
display: none; /* unstyle IE checkboxes */
}
}
[type="search"] {
box-sizing: border-box;
}
select {
&::-ms-expand {
display: none; /* hiding IE11 arrow */
}
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
::placeholder {
color: $clr-0-light;
}
/**
* Table
* --------------------------------------- */
table {
max-width: 100%;
margin: 0;
border-collapse: collapse;
}
tr,
td,
th {
vertical-align: middle;
}
th {
font-weight: inherit;
text-align: left;
}
/**
* Horizontal rule
* --------------------------------------- */
hr {
border: 0;
border-top: 1px solid $clr-0-dark;
margin: 2rem 0;
}