refactor: move global styles to specific components (#34)

Co-authored-by: Manuel Odelain <[email protected]>
rezozero · Jul 10, 2024 · e50d87c · e50d87c
1 parent 66e14e9
commit e50d87c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 25 deletions.
diff --git a/assets/scss/_normalize.scss b/assets/scss/_normalize.scss
@@ -5,27 +5,6 @@
     box-sizing: border-box;
 }
 
-/* Remove list styles (bullets/numbers) */
-ol, ul, menu, summary {
-    list-style: none;
-}
-
-/* For images to not be able to exceed their container */
-img {
-    max-block-size: 100%;
-    max-inline-size: 100%;
-}
-
-/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-input, textarea {
-    user-select: auto;
-}
-
-/* revert the 'white-space' property for textarea elements on Safari */
-textarea {
-    white-space: revert;
-}
-
 /* revert for bug in Chromium browsers
    - fix for the content editable attribute will work properly.
    - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */

diff --git a/components/atoms/VMarkdown/VMarkdown.vue b/components/atoms/VMarkdown/VMarkdown.vue
@@ -162,6 +162,14 @@ export default defineComponent({
         }
     }
 
+    ol, ul, menu, summary {
+        list-style: none;
+    }
+
+    ol {
+        counter-reset: item;
+    }
+
     li {
         position: relative;
         padding: rem(8) 0 rem(8) rem(40);
@@ -196,10 +204,6 @@ export default defineComponent({
         }
     }
 
-    ol {
-        counter-reset: item;
-    }
-
     ol li {
         counter-increment: item;
 

diff --git a/components/molecules/VInput/VInput.vue b/components/molecules/VInput/VInput.vue
@@ -69,6 +69,7 @@ const slotName = computed(() => (isCheckbox.value || isRadio.value ? 'beforeLabe
     border: none;
     grid-column: 1/-1;
     grid-row: 1;
+    user-select: auto; // Safari - solving issue when using user-select:none on the <body> text input doesn't working
 
     &[type='radio'],
     &[type='checkbox'] {

diff --git a/components/molecules/VTextarea/VTextarea.vue b/components/molecules/VTextarea/VTextarea.vue
@@ -38,6 +38,8 @@ const { isFocused, isFilled, model, onBlur, onFocus } = useTextInput(props, emit
 <style lang="scss" module>
 .textarea {
     min-height: rem(150);
+    user-select: auto; // Safari - solving issue when using user-select:none on the <body> text input doesn't working
+    white-space: revert; // Revert the 'white-space' property for textarea elements on Safari
 
     &:focus,
     &:focus-visible {