fix(select): fix stylelint issues

stasson · Jan 23, 2018 · a03c907 · a03c907
1 parent d3b9edb
commit a03c907
Showing 1 changed file with 62 additions and 84 deletions.
diff --git a/components/select/styles.scss b/components/select/styles.scss
@@ -8,94 +8,72 @@
 // TODO: MDCFIX 
 // implement new select
 .mdc-multi-select {
-    @include mdc-theme-prop(border-color, text-hint-on-light);
-
-    width: 250px;
-    padding: 0;
-    border-width: 1px;
-    border-style: solid;
-    outline: none;
-    appearance: none;
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(border-color, text-hint-on-dark);
-    }
-
-    // stylelint-disable plugin/selector-bem-pattern
-    .mdc-list-group {
-      @include mdc-theme-prop(color, text-hint-on-light);
-
-      margin: 16px 0 0;
-      padding: 0 0 0 16px;
-      font-weight: normal;
-
-      @include mdc-theme-dark {
-        @include mdc-theme-prop(color, text-hint-on-dark);
-      }
-
-      &:last-child {
-        margin-bottom: 16px;
-      }
-
-      .mdc-list-divider {
-        margin-left: -16px;
-      }
-      // stylelint-enable plugin/selector-bem-pattern
+  @include mdc-theme-prop(border-color, text-hint-on-light);
+
+  width: 250px;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  outline: none;
+  appearance: none;
+
+  .mdc-list-divider {
+    margin-bottom: 8px;
+    padding-top: 8px;
+    font-size: 0;
+  }
+
+  .mdc-list-group {
+    @include mdc-theme-prop(color, text-hint-on-light);
+
+    margin: 16px 0 0;
+    padding: 0 0 0 16px;
+    font-weight: normal;
+
+    &:last-child {
+      margin-bottom: 16px;
     }
-
-    // stylelint-disable plugin/selector-bem-pattern
-    .mdc-list-item {
-      @include mdc-theme-prop(color, text-primary-on-light);
-
-      margin: 0 0 0 -16px;
-      padding: 0 16px;
-
-      @include mdc-theme-dark {
-        @include mdc-theme-prop(color, text-primary-on-dark);
-      }
-
-      &:first-child {
-        margin-top: 12px;
-      }
-
-      &:last-child {
-        margin-bottom: 8px;
-      }
-
-      // Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
-      // OS-determined selection color, which states styles are not going to play well with.
-      // Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
-      // that we use for ripple/states to position and size themselves relative to the entire body instead.
-      // Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
-      &::before,
-      &::after {
-        content: none;
-      }
+
+    .mdc-list-divider {
+      margin-left: -16px;
     }
-    // stylelint-enable plugin/selector-bem-pattern
-
-    // stylelint-disable plugin/selector-bem-pattern
-    .mdc-list-item:checked {
-      @include mdc-theme-prop(background-color, background);
-
-      @include mdc-theme-dark {
-        @include mdc-theme-prop(background-color, text-primary-on-dark);
-      }
+  }
+
+  .mdc-list-item {
+    @include mdc-theme-prop(color, text-primary-on-light);
+
+    margin: 0 0 0 -16px;
+    padding: 0 16px;
+
+    &:first-child {
+      margin-top: 12px;
     }
-  
-    .mdc-list-divider {
+
+    &:last-child {
       margin-bottom: 8px;
-      padding-top: 8px;
-      font-size: 0;
     }
-    // stylelint-enable plugin/selector-bem-pattern
-  }
-
-  .mdc-multi-select:focus .mdc-list-item:checked {
-    @include mdc-theme-prop(background-color, primary);
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(background-color, text-primary-on-dark);
+
+    // Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
+    // OS-determined selection color, which states styles are not going to play well with.
+    // Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
+    // that we use for ripple/states to position and size themselves relative to the entire body instead.
+    // Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
+    &::before,
+    &::after {
+      content: none;
     }
   }
-
+
+  .mdc-list-item:checked {
+    @include mdc-theme-prop(background-color, background);
+  }
+
+}
+
+.mdc-multi-select:focus .mdc-list-item:checked {
+  @include mdc-theme-prop(background-color, primary);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(background-color, text-primary-on-dark);
+  }
+}