From de969d7c48f66306170636e2cf67f148753bf41b Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Wed, 15 Sep 2021 08:20:06 -0400 Subject: [PATCH] update normalize.css to use :where --- evergreen.css | 277 ----------------------------------- normalize.css | 227 +++++------------------------ opinionated.css | 232 +++++------------------------- opinionated.evergreen.css | 296 -------------------------------------- 4 files changed, 73 insertions(+), 959 deletions(-) delete mode 100644 evergreen.css delete mode 100644 opinionated.evergreen.css diff --git a/evergreen.css b/evergreen.css deleted file mode 100644 index 79fb420..0000000 --- a/evergreen.css +++ /dev/null @@ -1,277 +0,0 @@ -/* Document - * ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - */ - -:where(html) { - line-height: 1.15; /* 1 */ -} - -/* Sections - * ========================================================================== */ - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Edge, Firefox, and Safari. - */ - -:where(h1) { - font-size: 2em; - margin-block-end: 0.67em; - margin-block-start: 0.67em; -} - -/* Grouping content - * ========================================================================== */ - -/** - * Remove the margin on nested lists in Chrome, Edge, and Safari. - */ - -:where(dl :is(dl, ol, ul), :is(ol, ul) dl) { - margin-block-end: 0; - margin-block-start: 0; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Correct the inheritance of border color in Firefox. - */ - -:where(hr) { - box-sizing: content-box; /* 1 */ - color: inherit; /* 2 */ - height: 0; /* 1 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -:where(pre) { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - * ========================================================================== */ - -/** - * Add the correct text decoration in Safari. - */ - -:where(abbr[title]) { - text-decoration: underline; - text-decoration: underline dotted; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -:where(b, strong) { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -:where(code, kbd, samp) { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -:where(small) { - font-size: 80%; -} - -/* Embedded content - * ========================================================================== */ - -/** - * Add the correct display in iOS 4-7. - */ - -:where(audio:not([controls])) { - display: none; - height: 0; -} - -/* Tabular data - * ========================================================================== */ - -/** - * 1. Correct table border color in Chrome, Edge, and Safari. - * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. - */ - -:where(table) { - border-color: currentColor; /* 1 */ - text-indent: 0; /* 2 */ -} - -/* Forms - * ========================================================================== */ - -/** - * Remove the margin on controls in Safari. - */ - -:where(button, input, select) { - margin: 0; -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -:where(button) { - text-transform: none; -} - -/** - * Correct the inability to style buttons in iOS and Safari. - */ - -:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { - -webkit-appearance: button; -} - -/** - * Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -:where(progress) { - vertical-align: baseline; -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -:where(select) { - text-transform: none; -} - -/** - * Remove the margin in Firefox and Safari. - */ - -:where(textarea) { - margin: 0; -} - -/** - * 1. Correct the odd appearance in Chrome, Edge, and Safari. - * 2. Correct the outline style in Safari. - */ - -:where(input[type="search" i]) { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Safari. - */ - -:where(input::-webkit-inner-spin-button, input::-webkit-outer-spin-button) { - height: auto; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -:where(input::-webkit-input-placeholder) { - color: inherit; - opacity: 0.54; -} - -/** - * Remove the inner padding in Chrome, Edge, and Safari on macOS. - */ - -:where(input[type="search" i]::-webkit-search-decoration) { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style upload buttons in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -:where(input[type="file" i]::-webkit-file-upload-button) { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -:where(:is(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner) { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:where(:is(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i])):-moz-focusring) { - outline: 1px dotted ButtonText; -} - -/** - * Remove the additional :invalid styles in Firefox. - */ - -:where(:-moz-ui-invalid) { - box-shadow: none; -} - -/* Interactive - * ========================================================================== */ - -/* - * Add the correct styles in Safari. - */ - -:where(dialog) { - background-color: white; - border: solid; - color: black; - height: -moz-fit-content; - height: -webkit-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -moz-fit-content; - width: -webkit-fit-content; - width: fit-content; -} - -:where(dialog:not([open])) { - display: none; -} - -/* - * Add the correct display in all browsers. - */ - -:where(summary) { - display: list-item; -} diff --git a/normalize.css b/normalize.css index d543c18..eab5780 100644 --- a/normalize.css +++ b/normalize.css @@ -5,7 +5,7 @@ * 1. Correct the line height in all browsers. */ -html { +:where(html) { line-height: 1.15; /* 1 */ } @@ -17,56 +17,33 @@ html { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Correct the inheritance of border color in Firefox. - * 3. Show the overflow in Edge 18- and IE. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 3 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; } /** @@ -74,7 +51,7 @@ main { * 2. Correct the odd `em` font sizing in all browsers. */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -83,18 +60,10 @@ pre { * ========================================================================== */ /** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -103,8 +72,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -113,9 +81,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -124,47 +90,10 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content - * ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images within links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - /* Tabular data * ========================================================================== */ @@ -173,7 +102,7 @@ svg:not(:root) { * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -table { +:where(table) { border-color: currentColor; /* 1 */ text-indent: 0; /* 2 */ } @@ -185,91 +114,48 @@ table { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Show the overflow in Edge 18- and IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ +:where(textarea) { + margin: 0; } /** @@ -277,7 +163,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -322,7 +208,7 @@ textarea { * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } @@ -331,7 +217,7 @@ textarea { * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } @@ -339,7 +225,7 @@ textarea { * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } @@ -347,24 +233,14 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -372,11 +248,10 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } @@ -384,36 +259,6 @@ dialog:not([open]) { * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } - -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} diff --git a/opinionated.css b/opinionated.css index 47c155a..2bc3b35 100644 --- a/opinionated.css +++ b/opinionated.css @@ -5,7 +5,7 @@ * 1. Correct the line height in all browsers. */ -html { +:where(html) { line-height: 1.15; /* 1 */ } @@ -16,7 +16,7 @@ html { * Remove the margin in all browsers. (opinionated) */ -body { +:where(body) { margin: 0; } @@ -25,56 +25,33 @@ body { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Correct the inheritance of border color in Firefox. - * 3. Show the overflow in Edge 18- and IE. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 3 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; } /** @@ -82,7 +59,7 @@ main { * 2. Correct the odd `em` font sizing in all browsers. */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -91,18 +68,10 @@ pre { * ========================================================================== */ /** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -111,8 +80,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -121,9 +89,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -132,47 +98,10 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content - * ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images within links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - /* Tabular data * ========================================================================== */ @@ -181,7 +110,7 @@ svg:not(:root) { * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -table { +:where(table) { border-color: currentColor; /* 1 */ text-indent: 0; /* 2 */ } @@ -193,94 +122,48 @@ table { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Show the overflow in Edge 18- and IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 2. Remove the margin in Firefox and Safari. - * 3. Remove the default vertical scrollbar in IE. - */ - -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ - overflow: auto; /* 3 */ -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. + * Remove the margin in Firefox and Safari. */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ +:where(textarea) { + margin: 0; } /** @@ -288,7 +171,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -333,7 +216,7 @@ textarea { * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } @@ -342,7 +225,7 @@ textarea { * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } @@ -350,7 +233,7 @@ textarea { * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } @@ -358,24 +241,14 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -383,11 +256,10 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } @@ -395,36 +267,6 @@ dialog:not([open]) { * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } - -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} diff --git a/opinionated.evergreen.css b/opinionated.evergreen.css deleted file mode 100644 index 440fe24..0000000 --- a/opinionated.evergreen.css +++ /dev/null @@ -1,296 +0,0 @@ -/* Document - * ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - */ - -html { - line-height: 1.15; /* 1 */ -} - -/* Sections - * ========================================================================== */ - -/** - * Remove the margin in all browsers. (opinionated) - */ - -body { - margin: 0; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Edge, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - * ========================================================================== */ - -/** - * Remove the margin on nested lists in Chrome, Edge, and Safari. - */ - -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Correct the inheritance of border color in Firefox. - */ - -hr { - box-sizing: content-box; /* 1 */ - color: inherit; /* 2 */ - height: 0; /* 1 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - * ========================================================================== */ - -/** - * Add the correct text decoration in Safari. - */ - -abbr[title] { - text-decoration: underline; - text-decoration: underline dotted; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/* Embedded content - * ========================================================================== */ - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/* Tabular data - * ========================================================================== */ - -/** - * 1. Correct table border color in Chrome, Edge, and Safari. - * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. - */ - -table { - border-color: currentColor; /* 1 */ - text-indent: 0; /* 2 */ -} - -/* Forms - * ========================================================================== */ - -/** - * Remove the margin on controls in Safari. - */ - -button, -input, -select { - margin: 0; -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -button { - text-transform: none; -} - -/** - * Correct the inability to style buttons in iOS and Safari. - */ - -button, -[type="button" i], -[type="reset" i], -[type="submit" i] { - -webkit-appearance: button; -} - -/** - * Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -select { - text-transform: none; -} - -/** - * Remove the margin in Firefox and Safari. - */ - -textarea { - margin: 0; -} - -/** - * 1. Correct the odd appearance in Chrome, Edge, and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search" i] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Safari. - */ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** - * Remove the inner padding in Chrome, Edge, and Safari on macOS. - */ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style upload buttons in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Remove the additional :invalid styles in Firefox. - */ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* Interactive - * ========================================================================== */ - -/* - * Add the correct styles in Safari. - */ - -dialog { - background-color: white; - border: solid; - color: black; - height: -moz-fit-content; - height: -webkit-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -moz-fit-content; - width: -webkit-fit-content; - width: fit-content; -} - -dialog:not([open]) { - display: none; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -}