fix: converted every style to global

TheComputerM · Sep 15, 2020 · f2cc52f · f2cc52f
1 parent 608d2a2
commit f2cc52f
Show file tree

Hide file tree

Showing 27 changed files with 188 additions and 220 deletions.
diff --git a/packages/svelte-materialify/src/components/Alert/Alert.scss b/packages/svelte-materialify/src/components/Alert/Alert.scss
@@ -12,19 +12,17 @@
     color: map-deep-get($material-dark-theme, 'text', 'primary');
   }
 
-  :global {
-    .s-icon,
-    .s-btn {
-      color: inherit !important;
-    }
+  .s-icon,
+  .s-btn {
+    color: inherit !important;
+  }
 
-    .s-icon {
-      align-self: flex-start;
-    }
+  .s-icon {
+    align-self: flex-start;
+  }
 
-    [slot='icon'] {
-      margin-right: $spacer * 4;
-    }
+  [slot='icon'] {
+    margin-right: $spacer * 4;
   }
 
   .s-alert__border {

diff --git a/packages/svelte-materialify/src/components/Alert/Alert.svelte b/packages/svelte-materialify/src/components/Alert/Alert.svelte
@@ -53,7 +53,7 @@
   }
 </script>
 
-<style lang="scss" src="./Alert.scss">
+<style lang="scss" src="./Alert.scss" global>
 </style>
 
 {#if visible}

diff --git a/packages/svelte-materialify/src/components/AppBar/AppBar.scss b/packages/svelte-materialify/src/components/AppBar/AppBar.scss
@@ -16,7 +16,7 @@
     z-index: 0;
     padding: 4px;
 
-    :global(.s-btn.fab) {
+    .s-btn.fab {
       width: 48px;
       height: 48px;
     }

diff --git a/packages/svelte-materialify/src/components/AppBar/AppBar.svelte b/packages/svelte-materialify/src/components/AppBar/AppBar.svelte
@@ -14,7 +14,7 @@
   export let style = '';
 </script>
 
-<style lang="scss" src="./AppBar.scss">
+<style lang="scss" src="./AppBar.scss" global>
 </style>
 
 <header

diff --git a/packages/svelte-materialify/src/components/Avatar/Avatar.scss b/packages/svelte-materialify/src/components/Avatar/Avatar.scss
@@ -16,19 +16,17 @@
     color: map-deep-get($material-dark-theme, 'text', 'primary');
   }
 
-  :global {
-    .s-icon,
-    img,
-    svg {
-      color: inherit;
-      border-radius: inherit;
-      display: inline-flex;
-      height: inherit;
-      width: inherit;
-    }
-  }
-
   &:not(.tile) {
     border-radius: $avatar-border-radius;
   }
+
+  .s-icon,
+  img,
+  svg {
+    color: inherit;
+    border-radius: inherit;
+    display: inline-flex;
+    height: inherit;
+    width: inherit;
+  }
 }
diff --git a/packages/svelte-materialify/src/components/Avatar/Avatar.svelte b/packages/svelte-materialify/src/components/Avatar/Avatar.svelte
@@ -15,7 +15,7 @@
   export let style = '';
 </script>
 
-<style lang="scss" src="./Avatar.scss">
+<style lang="scss" src="./Avatar.scss" global>
 </style>
 
 <div class="s-avatar {klass}" class:tile use:Style={{ 'avatar-size': size }} {style}>

diff --git a/packages/svelte-materialify/src/components/Breadcrumbs/Breadcrumbs.scss b/packages/svelte-materialify/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -9,16 +9,14 @@
   margin: $breadcrumbs-margin;
   padding: $breadcrumbs-padding;
 
-  :global {
-    .s-breadcrumb-item {
-      align-items: center;
-      display: inline-flex;
-      text-decoration: none;
-
-      &.disabled {
-        color: var(--theme-text-disabled);
-        pointer-events: none;
-      }
+  .s-breadcrumb-item {
+    align-items: center;
+    display: inline-flex;
+    text-decoration: none;
+
+    &.disabled {
+      color: var(--theme-text-disabled);
+      pointer-events: none;
     }
   }
 
@@ -27,7 +25,7 @@
     display: inline-flex;
     font-size: $breadcrumbs-item-font-size;
 
-    :global(.s-icon) {
+    .s-icon {
       font-size: $breadcrumbs-item-large-font-size;
     }
 
@@ -44,7 +42,7 @@
     li {
       font-size: $breadcrumbs-item-large-font-size;
 
-      :global(.s-icon) {
+      .s-icon {
         font-size: $breadcrumbs-item-large-font-size;
       }
     }

diff --git a/packages/svelte-materialify/src/components/Breadcrumbs/Breadcrumbs.svelte b/packages/svelte-materialify/src/components/Breadcrumbs/Breadcrumbs.svelte
@@ -20,7 +20,7 @@
   items = items.map((x) => ({ ...defaults, ...x }));
 </script>
 
-<style lang="scss" src="./Breadcrumbs.scss">
+<style lang="scss" src="./Breadcrumbs.scss" global>
 </style>
 
 <ul class="s-breadcrumbs {klass}" class:large>

diff --git a/packages/svelte-materialify/src/components/Button/Button.scss b/packages/svelte-materialify/src/components/Button/Button.scss
@@ -17,11 +17,9 @@
   transition-property: box-shadow, transform, opacity;
   background-color: var(--theme-app-bar);
 
-  :global {
-    a,
-    .s-icon {
-      color: inherit;
-    }
+  a,
+  .s-icon {
+    color: inherit;
   }
 
   .s-btn__content {
@@ -148,7 +146,7 @@
     min-height: 0;
     padding: 0;
     @each $name, $size in $fab-icon-sizes {
-      &.size-#{$name} :global(.s-icon) {
+      &.size-#{$name} .s-icon {
         font-size: #{$size}px;
       }
     }

diff --git a/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroup.scss b/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroup.scss
@@ -9,18 +9,14 @@
   transition: $primary-transition;
 
   &:not(.elevated) {
-    :global {
-      .s-btn-group-item.s-btn {
-        box-shadow: none;
-      }
+    .s-btn-group-item.s-btn {
+      box-shadow: none;
     }
   }
 
   &.borderless {
-    :global {
-      .s-btn-group-item.s-btn {
-        border-width: 0;
-      }
+    .s-btn-group-item.s-btn {
+      border-width: 0;
     }
   }
 

diff --git a/packages/svelte-materialify/src/components/Card/Card.scss b/packages/svelte-materialify/src/components/Card/Card.scss
@@ -67,13 +67,13 @@
     pointer-events: none;
     user-select: none;
 
-    > :global(*:not(.s-progress-linear)) {
+    > *:not(.s-progress-linear) {
       opacity: $card-disabled-opacity;
       transition: inherit;
     }
   }
 
-  > :global(*:first-child:not(.s-btn):not(.s-chip)) {
+  > *:first-child:not(.s-btn):not(.s-chip) {
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
   }

diff --git a/packages/svelte-materialify/src/components/Card/Card.svelte b/packages/svelte-materialify/src/components/Card/Card.svelte
@@ -12,7 +12,7 @@
   export { klass as class };
 </script>
 
-<style lang="scss" src="./Card.scss">
+<style lang="scss" src="./Card.scss" global>
 </style>
 
 <div

diff --git a/packages/svelte-materialify/src/components/Card/CardActions.scss b/packages/svelte-materialify/src/components/Card/CardActions.scss
@@ -5,7 +5,7 @@
   display: flex;
   padding: $card-actions-padding;
 
-  :global(.s-btn) {
+  .s-btn {
     padding: $card-btn-padding;
   }
 }
diff --git a/packages/svelte-materialify/src/components/Card/CardActions.svelte b/packages/svelte-materialify/src/components/Card/CardActions.svelte
@@ -4,7 +4,7 @@
   export { klass as class };
 </script>
 
-<style lang="scss" src="./CardActions.scss">
+<style lang="scss" src="./CardActions.scss" global>
 </style>
 
 <div class="s-card-actions {klass}" {style}>

diff --git a/packages/svelte-materialify/src/components/Card/CardSubtitle.scss b/packages/svelte-materialify/src/components/Card/CardSubtitle.scss
@@ -8,7 +8,7 @@
   letter-spacing: $card-text-letter-spacing;
   padding: $card-subtitle-padding;
 
-  + :global(.s-card-text) {
+  + .s-card-text {
     padding-top: $card-adjacent-sibling-text-padding-top;
   }
 }
diff --git a/packages/svelte-materialify/src/components/Card/CardSubtitle.svelte b/packages/svelte-materialify/src/components/Card/CardSubtitle.svelte
@@ -4,7 +4,7 @@
   export { klass as class };
 </script>
 
-<style lang="scss" src="./CardSubtitle.scss">
+<style lang="scss" src="./CardSubtitle.scss" global>
 </style>
 
 <div class="s-card-subtitle {klass}" {style}>

diff --git a/packages/svelte-materialify/src/components/Card/CardText.svelte b/packages/svelte-materialify/src/components/Card/CardText.svelte
@@ -4,7 +4,7 @@
   export { klass as class };
 </script>
 
-<style lang="scss" src="./CardText.scss">
+<style lang="scss" src="./CardText.scss" global>
 </style>
 
 <div class="s-card-text {klass}" {style}>

diff --git a/packages/svelte-materialify/src/components/Card/CardTitle.scss b/packages/svelte-materialify/src/components/Card/CardTitle.scss
@@ -11,15 +11,13 @@
   word-break: $card-title-word-break;
   padding: $card-subtitle-padding;
 
-  :global {
-    + .s-card-subtitle,
-    + .s-card-title {
-      padding-top: $card-adjacent-sibling-text-padding-top;
-      margin-top: $card-title-adjacent-sibling-subtitle-margin-top;
-    }
+  + .s-card-subtitle,
+  + .s-card-title {
+    padding-top: $card-adjacent-sibling-text-padding-top;
+    margin-top: $card-title-adjacent-sibling-subtitle-margin-top;
+  }
 
-    + .s-card-subtitle {
-      margin-top: $card-title-adjacent-sibling-subtitle-margin-top;
-    }
+  + .s-card-subtitle {
+    margin-top: $card-title-adjacent-sibling-subtitle-margin-top;
   }
 }
diff --git a/packages/svelte-materialify/src/components/Card/CardTitle.svelte b/packages/svelte-materialify/src/components/Card/CardTitle.svelte
@@ -4,7 +4,7 @@
   export { klass as class };
 </script>
 
-<style lang="scss" src="./CardTitle.scss">
+<style lang="scss" src="./CardTitle.scss" global>
 </style>
 
 <div class="s-card-title {klass}" {style}>

diff --git a/packages/svelte-materialify/src/components/Chip/Chip.scss b/packages/svelte-materialify/src/components/Chip/Chip.scss
@@ -3,13 +3,11 @@
 .s-chip__close {
   cursor: pointer;
 
-  :global {
-    .s-icon {
-      font-size: $chip-close-size;
-      max-height: $chip-close-size;
-      max-width: $chip-close-size;
-      user-select: none;
-    }
+  .s-icon {
+    font-size: $chip-close-size;
+    max-height: $chip-close-size;
+    max-width: $chip-close-size;
+    user-select: none;
   }
 
   &:focus,
@@ -51,30 +49,28 @@
     top: 0;
   }
 
-  :global {
-    .s-avatar {
-      height: $chip-avatar-size !important;
-      min-width: $chip-avatar-size !important;
-      width: $chip-avatar-size !important;
-    }
+  .s-avatar {
+    height: $chip-avatar-size !important;
+    min-width: $chip-avatar-size !important;
+    width: $chip-avatar-size !important;
+  }
 
-    .s-icon {
-      font-size: $chip-icon-size;
-    }
+  .s-icon {
+    font-size: $chip-icon-size;
+  }
 
-    .s-icon,
-    .s-avatar {
-      color: inherit;
+  .s-icon,
+  .s-avatar {
+    color: inherit;
 
-      &:first-child {
-        margin-left: $chip-icon-margin-before;
-        margin-right: $chip-icon-margin-after;
-      }
+    &:first-child {
+      margin-left: $chip-icon-margin-before;
+      margin-right: $chip-icon-margin-after;
+    }
 
-      &:last-child {
-        margin-left: $chip-icon-margin-after;
-        margin-right: $chip-icon-margin-before;
-      }
+    &:last-child {
+      margin-left: $chip-icon-margin-after;
+      margin-right: $chip-icon-margin-before;
     }
   }
 
@@ -97,18 +93,16 @@
   }
 
   &.pill {
-    :global {
-      .s-avatar {
-        height: $chip-pill-avatar-size !important;
-        width: $chip-pill-avatar-size !important;
-
-        &:first-child {
-          margin-left: $chip-pill-avatar-margin-before;
-        }
-
-        &:last-child {
-          margin-right: $chip-pill-avatar-margin-before;
-        }
+    .s-avatar {
+      height: $chip-pill-avatar-size !important;
+      width: $chip-pill-avatar-size !important;
+
+      &:first-child {
+        margin-left: $chip-pill-avatar-margin-before;
+      }
+
+      &:last-child {
+        margin-right: $chip-pill-avatar-margin-before;
       }
     }
   }