From 0ae984df29770b02c3bce3fd4d377b8c3b68da5e Mon Sep 17 00:00:00 2001 From: Strek Date: Sun, 5 Mar 2023 21:59:51 +0530 Subject: [PATCH] chore: remove duplicate scss (#421) --- .stylelintrc.js | 1 - src/assets/scss/blog.scss | 18 ++---- .../scss/components/theme-switcher.scss | 6 -- src/assets/scss/donations.scss | 4 -- src/assets/scss/forms.scss | 64 ------------------- src/assets/scss/foundations.scss | 11 +--- src/assets/scss/playground-layout.scss | 9 +-- src/assets/scss/tokens/typography.scss | 16 ++--- src/playground/scss/editor.scss | 4 +- 9 files changed, 16 insertions(+), 117 deletions(-) diff --git a/.stylelintrc.js b/.stylelintrc.js index 264c487fbf..5180e40f74 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -16,7 +16,6 @@ module.exports = { indentation: 4, "max-line-length": null, "no-descending-specificity": null, - "no-duplicate-selectors": null, "number-leading-zero": null, "number-no-trailing-zeros": null, "property-no-unknown": null, diff --git a/src/assets/scss/blog.scss b/src/assets/scss/blog.scss index 2057cb61ce..dc92a4580f 100644 --- a/src/assets/scss/blog.scss +++ b/src/assets/scss/blog.scss @@ -84,12 +84,18 @@ ul.tag-list { } .post__sidebar-module { + display: grid; + grid-gap: 1.5rem; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); padding-bottom: 2rem; margin-bottom: 2rem; padding-block-end: 2rem; margin-block-end: 2rem; &:last-of-type { + border-bottom: none; + border-block-end: none; margin-bottom: 0; padding-bottom: 0; padding-block-end: 0; @@ -110,18 +116,6 @@ ul.tag-list { font-size: var(--step-0); } -.post__sidebar-module { - display: grid; - grid-gap: 1.5rem; - border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); - - &:last-of-type { - border-bottom: none; - border-block-end: none; - } -} - // author bios .post__author-bios { padding-top: var(--space-m); diff --git a/src/assets/scss/components/theme-switcher.scss b/src/assets/scss/components/theme-switcher.scss index d2f767573e..43e1f26d58 100644 --- a/src/assets/scss/components/theme-switcher.scss +++ b/src/assets/scss/components/theme-switcher.scss @@ -75,9 +75,3 @@ } } } - -.theme-switcher__button:hover { - .theme-switcher__icon { - color: var(--link-color); - } -} diff --git a/src/assets/scss/donations.scss b/src/assets/scss/donations.scss index 1ac5f30197..27cf1ef1bf 100644 --- a/src/assets/scss/donations.scss +++ b/src/assets/scss/donations.scss @@ -161,10 +161,6 @@ ul.donation-plan__features, padding: 2rem; } -.donation-plan__header { - padding: 2rem 2rem 1.5rem; -} - @media all and (max-width: 640px) { ul.donation-plan__features, .donation-plan__footer { diff --git a/src/assets/scss/forms.scss b/src/assets/scss/forms.scss index e3a1d2557d..0ebed02ffc 100644 --- a/src/assets/scss/forms.scss +++ b/src/assets/scss/forms.scss @@ -1,61 +1,3 @@ -.c-custom-select { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - box-sizing: border-box; - display: block; - width: 100%; - max-width: 100%; - min-width: 0; - padding: 0.625rem 0.875rem; - padding-right: calc(0.875rem * 3); - padding-inline-end: calc(0.875rem * 3); - font: inherit; - color: var(--body-text-color); - color: inherit; - line-height: 1.3; - border: 1px solid var(--border-color); - border-radius: var(--border-radius); - box-shadow: var(--shadow-xs); - background-color: var(--body-background-color); - background-image: - url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), - linear-gradient( - to bottom, - var(--body-background-color) 0%, - var(--body-background-color) 100% - ); - background-repeat: no-repeat, repeat; - background-position: right calc(0.875rem * 1.5) top 50%, 0 0; - background-size: 1em auto, 100%; -} - -.label__text.label__text { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - font-family: var(--text-font); - color: inherit; - font-weight: 400; - line-height: 1.5; - margin-bottom: 0.25rem; - margin-block-end: 0.25rem; -} - -input { - border: 1px solid var(--border-color); - border-radius: var(--border-radius); - padding: 0.625rem 0.875rem; - font: inherit; - font-size: 1rem; - display: block; - min-width: 0; - max-width: 100%; - background-color: var(--body-background-color); - color: inherit; -} - input::-moz-input-placeholder { color: var(--color-neutral-500); font-size: 0.875rem; @@ -338,9 +280,7 @@ ul.selected-options { * { transition: all 0.1s linear; } -} -.c-checkbox__icon { .cm { stroke: transparent; } @@ -361,10 +301,6 @@ ul.selected-options { outline-offset: 3px; } -.c-checkbox input[type="checkbox"]:focus ~ .c-checkbox__icon { - outline: 3px solid transparent; -} - .js-focus-visible .c-checkbox input[type="checkbox"]:focus:not(.focus-visible) ~ .c-checkbox__icon { outline: 2px solid transparent; outline-offset: 3px; diff --git a/src/assets/scss/foundations.scss b/src/assets/scss/foundations.scss index f14851097c..015267db71 100644 --- a/src/assets/scss/foundations.scss +++ b/src/assets/scss/foundations.scss @@ -62,6 +62,7 @@ html { } body { + font-size: var(--step-0); position: relative; margin: 0 auto; line-height: 1.5; @@ -284,11 +285,6 @@ ol { } } -p:empty { - margin: 0; - display: none; -} - figure { margin-bottom: 4rem; margin-block-end: 4rem; @@ -340,11 +336,6 @@ nav { } /* typography */ -body { - font-size: var(--step-0); - line-height: 1.5; -} - .eyebrow { color: var(--link-color); font-size: 1rem; diff --git a/src/assets/scss/playground-layout.scss b/src/assets/scss/playground-layout.scss index 77bd487b26..919cb5d5e6 100644 --- a/src/assets/scss/playground-layout.scss +++ b/src/assets/scss/playground-layout.scss @@ -26,6 +26,8 @@ background-color: var(--lightest-background-color); @media all and (min-width: 1023px) { + height: calc(100vh - 77px); + overflow-y: auto; border-left: 1px solid var(--divider-color); border-inline-end: 1px solid var(--divider-color); background-color: inherit; @@ -49,13 +51,6 @@ flex: 1; } -.playground__config-and-footer { - @media all and (min-width: 1023px) { - height: calc(100vh - 77px); - overflow-y: auto; - } -} - .playground__config { flex: 1; border-bottom: 1px solid var(--divider-color); diff --git a/src/assets/scss/tokens/typography.scss b/src/assets/scss/tokens/typography.scss index bdf4792bb9..a9e935b2a0 100644 --- a/src/assets/scss/tokens/typography.scss +++ b/src/assets/scss/tokens/typography.scss @@ -1,13 +1,5 @@ /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ -:root { - --fluid-min-width: 320; - --fluid-max-width: 1280; - - --fluid-screen: 100vw; - --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); -} - @media screen and (min-width: 1280px) { :root { --fluid-screen: calc(var(--fluid-max-width) * 1px); @@ -15,6 +7,12 @@ } :root { + --fluid-min-width: 320; + --fluid-max-width: 1280; + + --fluid-screen: 100vw; + --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); + --f--2-min: 12.64; --f--2-max: 10.24; --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp)); @@ -50,9 +48,7 @@ --f-6-min: 32.44; --f-6-max: 61.04; --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); -} -:root { --mono-font: "Mono Punctuators", "Space Mono", monospace; --text-font: "Inter", diff --git a/src/playground/scss/editor.scss b/src/playground/scss/editor.scss index 809def7fc6..98cee16c29 100644 --- a/src/playground/scss/editor.scss +++ b/src/playground/scss/editor.scss @@ -5,9 +5,7 @@ .cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection { - & { - background-color: var(--color-primary-800) !important; - } + background-color: var(--color-primary-800) !important; } .cm-completionMatchedText {