fix(vuetify): changed styles to use the breakpoint mixin

nmsmith22389 · Oct 29, 2018 · 6b14be5 · 6b14be5
1 parent e108ade
commit 6b14be5
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 19 deletions.
diff --git a/components/_bottom-sheets.scss b/components/_bottom-sheets.scss
@@ -14,7 +14,7 @@
         max-width: 70%;
         min-width: 0;
 
-        @media #{map-get($display-breakpoints, xs-only)} {
+        @include breakpoint(xs-only) {
             max-width: none;
         }
     }

diff --git a/components/_grid.scss b/components/_grid.scss
@@ -12,7 +12,7 @@
         }
     }
 
-    @media #{map-get($display-breakpoints, sm-and-down)} {
+    @include breakpoint(sm-and-down) {
         padding: map-get($grid-gutters, lg);
     }
 

diff --git a/components/_snackbars.scss b/components/_snackbars.scss
@@ -93,7 +93,7 @@
     }
 }
 
-@media #{map-get($display-breakpoints, sm-and-up)} {
+@include breakpoint(sm-and-up) {
     .v-snack {
         &__wrapper {
             border-radius: rem(2px);

diff --git a/components/_steppers.scss b/components/_steppers.scss
@@ -277,7 +277,7 @@
     }
 }
 
-@media #{map-get($display-breakpoints, sm-and-down)} {
+@include breakpoint(sm-and-down) {
     .v-stepper:not(.v-stepper--vertical) {
         .v-stepper__label {
             display: none;

diff --git a/components/_tabs.scss b/components/_tabs.scss
@@ -61,7 +61,7 @@
         .v-tabs__container--align-with-title {
             padding-left: rem(16px);
 
-            @media #{map-get($display-breakpoints, xs-only)} {
+            @include breakpoint(xs-only) {
                 padding-left: rem(24px);
             }
         }
@@ -111,15 +111,15 @@
         .v-tabs__div {
             min-width: rem(72px);
 
-            @media #{map-get($display-breakpoints, sm-and-up)} {
+            @include breakpoint(sm-and-up) {
                 min-width: rem(160px);
             }
         }
     }
 
     &--fixed-tabs {
         .v-tabs__div {
-            @media #{map-get($display-breakpoints, xs-only)} {
+            @include breakpoint(xs-only) {
                 flex: 1 0 auto;
             }
         }

diff --git a/components/_toolbar.scss b/components/_toolbar.scss
@@ -75,6 +75,10 @@
         display: flex;
         padding: 0 map-get($grid-gutters, xl);
 
+        @include breakpoint(sm-and-down) {
+            padding: 0 map-get($grid-gutters, lg);
+        }
+
         .v-btn--icon {
             margin: rem(6px);
         }
@@ -95,22 +99,18 @@
         > .v-list:first-child {
             margin-left: -#{map-get($grid-gutters, xl)};
 
-            @media #{map-get($display-breakpoints, sm-and-down)} {
+            @include breakpoint(sm-and-down) {
                 margin-left: -#{map-get($grid-gutters, lg)};
             }
         }
 
         > .v-list:last-child {
             margin-right: -#{map-get($grid-gutters, xl)};
 
-            @media #{map-get($display-breakpoints, sm-and-down)} {
+            @include breakpoint(sm-and-down) {
                 margin-right: -#{map-get($grid-gutters, lg)};
             }
         }
-
-        @media #{map-get($display-breakpoints, sm-and-down)} {
-            padding: 0 map-get($grid-gutters, lg);
-        }
     }
 
     &__extension {

diff --git a/components/_tooltips.scss b/components/_tooltips.scss
@@ -3,6 +3,12 @@
 .v-tooltip {
     position: relative;
 
+    @include breakpoint(sm-and-down) {
+        .v-tooltip__content {
+            padding: rem(10px 16px);
+        }
+    }
+
     &__content {
         @include elevation(2);
         background: map-get($grey, darken-2);
@@ -20,10 +26,4 @@
             pointer-events: none;
         }
     }
-
-    @media #{map-get($display-breakpoints, sm-and-down)} {
-        .v-tooltip__content {
-            padding: rem(10px 16px);
-        }
-    }
 }