components/sass/init/_reset.scss

312 lines
4.4 KiB
SCSS
Raw Normal View History

// sass-lint:disable no-important
2018-11-29 00:36:23 +01:00
html {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
margin: 0; padding: 0;
border: none;
box-sizing: inherit;
outline: 0;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
2018-11-29 00:36:23 +01:00
}
[readonly] {
cursor: not-allowed;
}
[type="button"],
[type="submit"] {
cursor: pointer;
}
2018-11-29 00:36:23 +01:00
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
// Remove touch delay on supported devices
touch-action: manipulation;
}
button,
input,
select,
textarea {
background-color: transparent;
2018-11-29 00:36:23 +01:00
font-family: inherit;
font-size: inherit;
font-weight: inherit;
-moz-appearance: none;
-webkit-appearance: none;
2018-11-29 00:36:23 +01:00
&:disabled {
cursor: default;
pointer-events: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
2018-11-29 00:36:23 +01:00
}
ol,
ul {
list-style-position: inside;
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
2018-11-29 00:36:23 +01:00
2018-12-05 18:15:44 +01:00
> * {
user-select: inherit;
-ms-user-select: inherit;
-moz-user-select: inherit;
-webkit-user-select: inherit;
}
2018-11-29 00:36:23 +01:00
> li {
list-style-position: inside;
}
}
ul {
list-style-type: none;
}
label {
&[for] {
cursor: pointer;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
2018-11-29 00:36:23 +01:00
}
dd {
width: 80%;
float: left;
}
dl {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
dt {
width: 20%;
float: left;
}
img {
width: auto; max-width: 100%;
height: auto; max-height: 100%;
vertical-align: middle;
}
a {
color: inherit;
text-decoration: none;
}
button {
background-color: transparent;
color: inherit;
&:not(:disabled) {
cursor: pointer;
}
&:disabled {
opacity: 0.3;
}
}
input {
background-color: transparent;
color: inherit;
&::placeholder {
color: inherit;
opacity: 0.3;
}
&:not(:disabled) {
color: inherit;
}
&:not([type="checkbox"]),
&:not([type="file"]),
&:not([type="radio"]),
&:not([type="select"]) {
cursor: text;
}
&[type="checkbox"]:not(:disabled),
&[type="file"]:not(:disabled),
&[type="radio"]:not(:disabled),
&[type="select"]:not(:disabled) {
cursor: pointer;
}
&[type="text"] {
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
2018-11-29 00:36:23 +01:00
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
textarea {
width: 100%;
padding: var(--spacing-xs);
// border-color should be added in apps for blur/focus
border: 1px solid;
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
&:not([disabled]) {
resize: vertical;
}
&[disabled] {
resize: none;
}
}
2018-12-05 03:56:23 +01:00
p {
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
2018-12-05 18:15:44 +01:00
> * {
user-select: inherit;
-ms-user-select: inherit;
-moz-user-select: inherit;
-webkit-user-select: inherit;
}
2018-12-05 03:56:23 +01:00
}
@media print {
// Intelligent print styles
pre,
blockquote {
border: 1px solid #999 !important;
page-break-inside: avoid !important;
}
tr,
img {
page-break-inside: avoid !important;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm !important;
}
p,
h2,
h3 {
orphans: 3 !important;
widows: 3 !important;
}
h2,
h3 {
page-break-after: avoid !important;
}
thead {
display: table-header-group !important;
}
// Faster, more stable printing
* {
background: transparent !important;
color: #000 !important;
filter: none !important;
text-shadow: none !important;
}
p {
a {
&[href]::after { // Show hypertext data for links and abbreviations
content: " (" attr(href) ")" !important;
}
&[href^="javascript:"],
&[href^="#"] {
&::after {
content: "" !important;
}
}
}
abbr {
&[title]::after {
content: " (" attr(title) ")" !important;
}
}
a,
abbr {
text-decoration: underline !important;
word-wrap: break-word !important;
}
}
2018-11-29 00:36:23 +01:00
}