From 85adc0a9974194f355393b68a969ccba0e5c378d Mon Sep 17 00:00:00 2001 From: mricoul Date: Mon, 3 Jun 2024 17:38:44 +0200 Subject: [PATCH 1/2] feat (scss): remove reset and update normalize --- src/scss/03-base/_normalize.scss | 171 +++++++++++++++---------------- src/scss/03-base/_reset.scss | 88 ---------------- src/scss/03-base/base.scss | 1 - src/scss/editor.scss | 1 - 4 files changed, 85 insertions(+), 176 deletions(-) delete mode 100644 src/scss/03-base/_reset.scss diff --git a/src/scss/03-base/_normalize.scss b/src/scss/03-base/_normalize.scss index c852e46a..6c3968e6 100644 --- a/src/scss/03-base/_normalize.scss +++ b/src/scss/03-base/_normalize.scss @@ -14,28 +14,28 @@ html { } /* Sections - ========================================================================== */ + ========================================================================== */ /** - * Remove the margin in all browsers. - */ + * Remove the margin in all browsers. + */ body { margin: 0; } /** - * Render the `main` element consistently in IE. - */ + * Render the `main` element consistently in IE. + */ main { display: block; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ h1 { margin: .67em 0; @@ -43,12 +43,12 @@ h1 { } /* Grouping content - ========================================================================== */ + ========================================================================== */ /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ hr { box-sizing: content-box; /* 1 */ @@ -57,9 +57,9 @@ hr { } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + * 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; /* 1 */ @@ -67,31 +67,30 @@ pre { } /* Text-level semantics - ========================================================================== */ + ========================================================================== */ /** - * Remove the gray background on active links in IE 10. - */ + * Remove the gray background on active links in IE 10. + */ a { - text-decoration-thickness: 1px; background-color: transparent; } /** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ abbr[title] { text-decoration: underline; /* 2 */ - text-decoration-style: dotted; /* 2 */ + text-decoration: underline dotted; /* 2 */ border-bottom: none; /* 1 */ } /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ + * Add the correct font weight in Chrome, Edge, and Safari. + */ b, strong { @@ -99,9 +98,9 @@ strong { } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ code, kbd, @@ -111,17 +110,17 @@ samp { } /** - * Add the correct font size in all browsers. - */ + * Add the correct font size in all browsers. + */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ sub, sup { @@ -140,23 +139,23 @@ sup { } /* Embedded content - ========================================================================== */ + ========================================================================== */ /** - * Remove the border on images inside links in IE 10. - */ + * Remove the border on images inside links in IE 10. + */ img { border-style: none; } /* Forms - ========================================================================== */ + ========================================================================== */ /** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ button, input, @@ -170,9 +169,9 @@ textarea { } /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ button, input { /* 1 */ @@ -180,9 +179,9 @@ input { /* 1 */ } /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ button, select { /* 1 */ @@ -190,8 +189,8 @@ select { /* 1 */ } /** - * Correct the inability to style clickable types in iOS and Safari. - */ + * Correct the inability to style clickable types in iOS and Safari. + */ button, [type="button"], @@ -201,8 +200,8 @@ button, } /** - * Remove the inner border and padding in Firefox. - */ + * Remove the inner border and padding in Firefox. + */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, @@ -213,8 +212,8 @@ button::-moz-focus-inner, } /** - * Restore the focus styles unset by the previous rule. - */ + * Restore the focus styles unset by the previous rule. + */ button:-moz-focusring, [type="button"]:-moz-focusring, @@ -224,19 +223,19 @@ button:-moz-focusring, } /** - * Correct the padding in Firefox. - */ + * Correct the padding in Firefox. + */ fieldset { padding: .35em .75em .625em; } /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ legend { box-sizing: border-box; /* 1 */ @@ -248,25 +247,25 @@ legend { } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ progress { vertical-align: baseline; } /** - * Remove the default vertical scrollbar in IE 10+. - */ + * Remove the default vertical scrollbar in IE 10+. + */ textarea { overflow: auto; } /** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ [type="checkbox"], [type="radio"] { @@ -275,8 +274,8 @@ textarea { } /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ + * Correct the cursor style of increment and decrement buttons in Chrome. + */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { @@ -284,9 +283,9 @@ textarea { } /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ [type="search"] { -webkit-appearance: textfield; /* 1 */ @@ -294,17 +293,17 @@ textarea { } /** - * Remove the inner padding in Chrome and Safari on macOS. - */ + * Remove the inner padding in Chrome and Safari on macOS. + */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ @@ -312,38 +311,38 @@ textarea { } /* Interactive - ========================================================================== */ + ========================================================================== */ /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ + * Add the correct display in Edge, IE 10+, and Firefox. + */ details { display: block; } /* - * Add the correct display in all browsers. - */ + * Add the correct display in all browsers. + */ summary { display: list-item; } /* Misc - ========================================================================== */ + ========================================================================== */ /** - * Add the correct display in IE 10+. - */ + * Add the correct display in IE 10+. + */ template { display: none; } /** - * Add the correct display in IE 10. - */ + * Add the correct display in IE 10. + */ [hidden] { display: none; diff --git a/src/scss/03-base/_reset.scss b/src/scss/03-base/_reset.scss deleted file mode 100644 index fdf879ea..00000000 --- a/src/scss/03-base/_reset.scss +++ /dev/null @@ -1,88 +0,0 @@ -/** - * Reset specific elements to make them easier to style in other contexts. - */ - -html, -body, -p, -ol, -ul, -li, -dl, -dt, -dd, -blockquote, -figure, -fieldset, -form, -legend, -textarea, -pre, -iframe, -hr, -h1, -h2, -h3, -h4, -h5, -h6 { - padding: 0; - margin: 0; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} - -/** - * Apply generic border-box to all elements. - * See: - * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ - */ - -html { - /* Set automatic RTL direction depending on lang attribute */ - @include set-rtl-direction; - - /* Apply border-box across the entire page. */ - box-sizing: border-box; - - // HTML resets - font-family: $font-family-primary; - line-height: $line-height-base; - - // Scroll resets - -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; - - // Fonts resets - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: auto; -} - -/** - * Relax the definition a bit, to allow components to override it manually. - */ -* { - &, - &::before, - &::after { - box-sizing: inherit; - } -} - -// body resets -body { - font-family: $font-family-primary; - font-size: $font-size-base; - font-weight: normal; - color: $color-text; - background-color: $color-light; -} - -button { - cursor: pointer; - - &[disabled] { - cursor: not-allowed; - } -} diff --git a/src/scss/03-base/base.scss b/src/scss/03-base/base.scss index 1949763a..15c6af59 100644 --- a/src/scss/03-base/base.scss +++ b/src/scss/03-base/base.scss @@ -6,7 +6,6 @@ @import "./variables-css"; @import "./normalize"; @import "./svg-icons"; -@import "./reset"; @import "./forms"; @import "./links"; @import "./media"; diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 267a7f98..cb6a38a4 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -21,7 +21,6 @@ $entry-file-name: "editor"; @import "./03-base/fonts"; @import "./03-base/variables-css"; -@import "./03-base/reset"; @import "./03-base/svg-icons"; @import "./03-base/links"; @import "./03-base/text"; From 14dc889a52d6dcbfe68becb15b58ec3c4553cb15 Mon Sep 17 00:00:00 2001 From: Milan Ricoul Date: Thu, 4 Jul 2024 11:20:05 +0200 Subject: [PATCH 2/2] feat (body): add base body.scss --- src/scss/03-base/_body.scss | 28 ++++++++++++++++++++++++++++ src/scss/03-base/base.scss | 1 + 2 files changed, 29 insertions(+) create mode 100644 src/scss/03-base/_body.scss diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss new file mode 100644 index 00000000..c6bdbe39 --- /dev/null +++ b/src/scss/03-base/_body.scss @@ -0,0 +1,28 @@ +html { + /* Set automatic RTL direction depending on lang attribute */ + @include set-rtl-direction; + + /* Apply border-box across the entire page. */ + box-sizing: border-box; + + // HTML resets + font-family: $font-family-primary; + line-height: $line-height-base; + + // Scroll resets + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + + // Fonts resets + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: auto; +} + +body { + font-family: $font-family-primary; + font-size: $font-size-base; + font-weight: normal; + color: $color-text; + background-color: $color-light; +} diff --git a/src/scss/03-base/base.scss b/src/scss/03-base/base.scss index 15c6af59..b09c00ad 100644 --- a/src/scss/03-base/base.scss +++ b/src/scss/03-base/base.scss @@ -5,6 +5,7 @@ @import "./fonts"; @import "./variables-css"; @import "./normalize"; +@import "./body"; @import "./svg-icons"; @import "./forms"; @import "./links";