feat: add margin to switch, clean up no longer needed sass

hperrin · Nov 17, 2021 · 312372d · 312372d
1 parent 55effc6
commit 312372d
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 40 deletions.
diff --git a/packages/form-field/_mixins.scss b/packages/form-field/_mixins.scss
diff --git a/packages/form-field/_style.scss b/packages/form-field/_style.scss
@@ -1,4 +1 @@
 @use '@material/form-field/mdc-form-field';
-@use './mixins';
-
-@include mixins.core-styles;
diff --git a/packages/paper/_mixins.scss b/packages/paper/_mixins.scss
@@ -73,14 +73,6 @@ $paper-padding: 24px 16px !default;
   $query: feature-targeting.all()
 ) {
   @include shape.radius($radius, $rtl-reflexive, $query: $query);
-
-  // &.smui-paper--dense {
-  //   @include shape.radius(
-  //     $radius,
-  //     $rtl-reflexive,
-  //     $query: $query
-  //   );
-  // }
 }
 
 @mixin ink-color($color, $query: feature-targeting.all()) {

diff --git a/packages/site/src/routes/demo/list/_ThreeLine.svelte b/packages/site/src/routes/demo/list/_ThreeLine.svelte
@@ -2,17 +2,30 @@
   <List class="demo-list" threeLine nonInteractive>
     <Item>
       <Text>
-        <PrimaryText>FruitPhone 11</PrimaryText>
-        <SecondaryText>$1,100</SecondaryText>
+        <PrimaryText>FruitPhone Pro</PrimaryText>
+        <SecondaryText>$1,000</SecondaryText>
         <SecondaryText>A beautiful phone with good specs.</SecondaryText>
       </Text>
     </Item>
     <Item>
       <Text>
-        <PrimaryText>Addition Phone</PrimaryText>
+        <PrimaryText>Robot Phone Max</PrimaryText>
         <SecondaryText>$700</SecondaryText>
         <SecondaryText
-          >Pretty much the same phone, but a different brand name and OS.</SecondaryText
+          title="Pretty much the same phone, but a different brand name and OS. It spies on you more, too."
+          >Pretty much the same phone, but a different brand name and OS. It
+          spies on you more, too.</SecondaryText
+        >
+      </Text>
+    </Item>
+    <Item>
+      <Text>
+        <PrimaryText>Penguin Phone</PrimaryText>
+        <SecondaryText>$220</SecondaryText>
+        <SecondaryText
+          title="A very weak phone that you can install literally anything on. Compile your own kernel, you nerd. :D"
+          >A very weak phone that you can install literally anything on. Compile
+          your own kernel, you nerd. :D</SecondaryText
         >
       </Text>
     </Item>

diff --git a/packages/site/src/routes/demo/switch/_Group.svelte b/packages/site/src/routes/demo/switch/_Group.svelte
@@ -1,5 +1,5 @@
 {#each options as option}
-  <div style="margin: 18px 0;">
+  <div>
     <FormField>
       <Switch
         bind:group={selected}

diff --git a/packages/site/src/routes/demo/textfield/_DifferentTypes.svelte b/packages/site/src/routes/demo/textfield/_DifferentTypes.svelte
@@ -20,7 +20,7 @@
     />
   </div>
 
-  <div>
+  <div class="hide-file-ui">
     <!--
       Note: the change and input events fire
       before the `files` prop is updated.
@@ -42,3 +42,14 @@
     alert('Selected ' + valueTypeFiles.length + ' file(s).');
   }
 </script>
+
+<style>
+  .hide-file-ui :global(input[type='file']::file-selector-button) {
+    display: none;
+  }
+
+  .hide-file-ui
+    :global(:not(.mdc-text-field--label-floating) input[type='file']) {
+    color: transparent;
+  }
+</style>
diff --git a/packages/switch/_mixins.scss b/packages/switch/_mixins.scss
@@ -4,6 +4,8 @@
 @use '@material/theme/index' as theme;
 @use '@material/switch/index' as switch;
 
+$margin: 14px !default;
+
 $_inverse-secondary: color.scale(
   theme-color.prop-value(secondary),
   $lightness: 75%
@@ -14,6 +16,10 @@ $_secondary-state-content: color.scale(
 );
 
 @mixin core-styles($query: feature-targeting.all()) {
+  .mdc-switch {
+    margin: $margin;
+  }
+
   .mdc-switch.smui-switch--color-secondary {
     // See: https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-switch/_switch-theme.scss#L76
     @include switch.theme(

diff --git a/packages/textfield/_mixins.scss b/packages/textfield/_mixins.scss
@@ -166,7 +166,7 @@
   }
 }
 
-// See: https://github.com/material-components/material-components-web/blob/v10.0.0/packages/mdc-textfield/_mixins.scss#L1369
+// See: https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-textfield/_mixins.scss#L1374
 @mixin _baseline-center-aligned($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
@@ -177,7 +177,7 @@
   }
 }
 
-// See: https://github.com/material-components/material-components-web/blob/v10.0.0/packages/mdc-textfield/_mixins.scss#L2265
+// See: https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-textfield/_mixins.scss#L2276
 @mixin _centered-affix-safari-support($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
@@ -189,7 +189,7 @@
   }
 }
 
-// See: https://github.com/material-components/material-components-web/blob/v10.0.0/packages/mdc-textfield/_mixins.scss#L1865
+// See: https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-textfield/_mixins.scss#L1875
 @mixin _truncate-floating-label-max-width(
   $truncation,
   $query: feature-targeting.all()
@@ -200,7 +200,7 @@
   );
 }
 
-// See: https://github.com/material-components/material-components-web/blob/v10.0.0/packages/mdc-textfield/_mixins.scss#L1880
+// See: https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-textfield/_mixins.scss#L1890
 @mixin _truncate-floating-label-floated-max-width(
   $truncation,
   $query: feature-targeting.all()

diff --git a/packages/tooltip/_mixins.scss b/packages/tooltip/_mixins.scss
@@ -7,9 +7,6 @@ $rich-content-link-color: primary !default;
 
 @mixin core-styles($query: feature-targeting.all()) {
   .mdc-tooltip--rich {
-    // I don't know why MDC doesn't have this style.
-    display: none;
-
     @include tooltip-theme.rich-text-ink-color(
       on-surface,
       on-surface,