Update control size variables

5 files changed, 12 insertions, 8 deletions

diff --git a/src/_menus.scss b/src/_menus.scss
index bec6afc..957eea9 100644
--- a/src/_menus.scss
+++ b/src/_menus.scss
@@ -5,7 +5,7 @@
   border-radius: $border-radius;
   list-style: none;
   margin: 0;
-  min-width: $control-min-width;
+  min-width: $control-width-xs;
   padding: $unit-2;
   transform: translateY($layout-spacing-sm);
   z-index: $zindex-1;
diff --git a/src/_modals.scss b/src/_modals.scss
index 2f81ed7..9a29eb6 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -31,7 +31,7 @@
 
     .modal-container {
       animation: slide-down .2s ease 1;
-      max-width: 640px;
+      max-width: $control-width-md;
       width: 100%;
       z-index: $zindex-0;
     }
@@ -39,7 +39,7 @@
 
   &.modal-sm {
     .modal-container {
-      max-width: 320px;
+      max-width: $control-width-sm;
       padding: 0 $unit-2;
     }
   }
@@ -51,7 +51,7 @@
 
     .modal-container {
       box-shadow: none;
-      max-width: 960px;
+      max-width: $control-width-lg;
     }
   }
 }
diff --git a/src/_popovers.scss b/src/_popovers.scss
index 6a9a2e5..9a275e9 100644
--- a/src/_popovers.scss
+++ b/src/_popovers.scss
@@ -12,7 +12,7 @@
     top: 0;
     transform: translate(-50%, -50%) scale(0);
     transition: transform .2s ease;
-    width: $control-max-width;
+    width: $control-width-sm;
     z-index: $zindex-4;
   }
 
diff --git a/src/_tooltips.scss b/src/_tooltips.scss
index 938afc2..061f9d3 100644
--- a/src/_tooltips.scss
+++ b/src/_tooltips.scss
@@ -10,7 +10,7 @@
     display: block;
     font-size: $font-size-sm;
     left: 50%;
-    max-width: $control-max-width;
+    max-width: $control-width-sm;
     opacity: 0;
     overflow: hidden;
     padding: $unit-1 $unit-2;
diff --git a/src/_variables.scss b/src/_variables.scss
index 551d6ee..70a26d9 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -86,8 +86,12 @@ $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
 $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
 $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
 $control-icon-size: .8rem !default;
-$control-min-width: 180px !default;
-$control-max-width: 320px !default;
+
+$control-width-xs: 180px !default;
+$control-width-sm: 320px !default;
+$control-width-md: 640px !default;
+$control-width-lg: 960px !default;
+$control-width-xl: 1280px !default;
 
 // Responsive breakpoints
 $size-xs: 480px !default;