semantic-ui-sass 2.3.1.1 → 2.4.3.0

data/app/assets/stylesheets/semantic-ui/globals/_variables.scss

@@ -1,4 +1,48 @@
-$import-google-fonts: true !default;
-$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+       Fonts
+--------------------*/
+
 $font-name: 'Lato' !default;
 $font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
+$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
+$import-google-fonts: true !default;
+
+/*-------------------
+      Base Sizes
+--------------------*/
+
+/* This is the single variable that controls them all */
+$em-size: 14px;
+
+/*-------------------
+    Scroll Bars
+--------------------*/
+
+$use-custom-scrollbars: true !default;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+$mobile-breakpoint: 320px !default;
+$tablet-breakpoint: 768px !default;
+$computer-breakpoint: 992px !default;
+$large-monitor-breakpoint: 1200px !default;
+$widescreen-monitor-breakpoint: 1920px !default;
+
+/*-------------------
+    Derived Values
+--------------------*/
+
+/* Rendered Scrollbar Width */
+$scrollbar-width: 17px;
+
+/* Responsive */
+$largest-mobile-screen: ($tablet-breakpoint - 1px);
+$largest-tablet-screen: ($computer-breakpoint - 1px);
+$largest-small-monitor: ($large-monitor-breakpoint - 1px);
+$largest-large-monitor: ($widescreen-monitor-breakpoint - 1px);

data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.1 - Accordion
+ * # Semantic UI 2.4.2 - Accordion
  * http://github.com/semantic-org/semantic-ui/
  *
  *

data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.1 - Checkbox
+ * # Semantic UI 2.4.2 - Checkbox
  * http://github.com/semantic-org/semantic-ui/
  *
  *

data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.1 - Dimmer
+ * # Semantic UI 2.4.2 - Dimmer
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -67,18 +67,20 @@
   border-radius: inherit !important;
 }
 
-/* Scrollbars */
-.ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-}
-.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.25);
-}
-.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(255, 255, 255, 0.15);
-}
-.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.35);
+@if $use-custom-scrollbars {
+  /* Scrollbars */
+  .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.25);
+  }
+  .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(255, 255, 255, 0.15);
+  }
+  .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.35);
+  }
 }
 
 
@@ -115,6 +117,18 @@
 *******************************/
 
 
+/*--------------
+    Legacy
+---------------*/
+
+
+/* Animating / Active / Visible */
+.dimmed.dimmable > .ui.animating.legacy.dimmer,
+.dimmed.dimmable > .ui.visible.legacy.dimmer,
+.ui.active.legacy.dimmer {
+  display: block;
+}
+
 /*--------------
     Alignment
 ---------------*/

data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.1 - Dropdown
+ * # Semantic UI 2.4.2 - Dropdown
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -433,22 +433,22 @@ select.ui.dropdown {
 .ui.selection.dropdown .menu > .message {
   padding: 0.78571429rem 1.14285714rem;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.selection.dropdown .menu {
     max-height: 8.01428571rem;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.selection.dropdown .menu {
     max-height: 10.68571429rem;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.selection.dropdown .menu {
     max-height: 16.02857143rem;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.selection.dropdown .menu {
     max-height: 21.37142857rem;
   }
@@ -519,7 +519,7 @@ select.ui.dropdown {
 /* Dropdown Icon */
 .ui.active.selection.dropdown > .dropdown.icon,
 .ui.visible.selection.dropdown > .dropdown.icon {
-  opacity: 1;
+  opacity: '';
   z-index: 3;
 }
 
@@ -619,22 +619,22 @@ select.ui.dropdown {
           backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.search.dropdown .menu {
     max-height: 8.01428571rem;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.search.dropdown .menu {
     max-height: 10.68571429rem;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.search.dropdown .menu {
     max-height: 16.02857143rem;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.search.dropdown .menu {
     max-height: 21.37142857rem;
   }
@@ -735,7 +735,7 @@ select.ui.dropdown {
   color: inherit;
 }
 .ui.inline.dropdown .dropdown.icon {
-  margin: 0em 0.5em 0em 0.21428571em;
+  margin: 0em 0.21428571em 0em 0.21428571em;
   vertical-align: baseline;
 }
 .ui.inline.dropdown > .text {
@@ -946,6 +946,19 @@ select.ui.dropdown {
   background-color: #FDCFCF;
 }
 
+/*--------------------
+        Clear
+----------------------*/
+
+.ui.dropdown > .clear.dropdown.icon {
+  opacity: 0.8;
+  -webkit-transition: opacity 0.1s ease;
+  transition: opacity 0.1s ease;
+}
+.ui.dropdown > .clear.dropdown.icon:hover {
+  opacity: 1;
+}
+
 /*--------------------
         Disabled
 ----------------------*/
@@ -1125,28 +1138,28 @@ select.ui.dropdown {
 @media all and (-ms-high-contrast: none) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
-    min-width: calc(100% -  17px );
+    min-width: calc(100% - 17px);
   }
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
     max-height: 10.28571429rem;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
     max-height: 15.42857143rem;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
     max-height: 20.57142857rem;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
     max-height: 20.57142857rem;
@@ -1450,7 +1463,7 @@ select.ui.dropdown {
 /* Dropdown Carets */
 @font-face {
   font-family: 'Dropdown';
-  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -1485,19 +1498,15 @@ select.ui.dropdown {
 .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
   content: "\f0da" /*rtl:"\f0d9"*/;
 }
-/* Icons for Reference
-.dropdown.down.icon {
-  content: "\f0d7";
-}
-.dropdown.up.icon {
-  content: "\f0d8";
-}
-.dropdown.left.icon {
-  content: "\f0d9";
-}
-.dropdown.icon.icon {
-  content: "\f0da";
+.ui.dropdown > .clear.icon:before {
+  content: "\f00d";
 }
+/* Icons for Reference (Subsetted in 2.4.0)
+  .dropdown.down:before { content: "\f0d7"; }
+  .dropdown.up:before { content: "\f0d8"; }
+  .dropdown.left:before { content: "\f0d9"; }
+  .dropdown.right:before { content: "\f0da"; }
+  .dropdown.close:before { content: "\f00d"; }
 */
 
 

data/app/assets/stylesheets/semantic-ui/modules/_embed.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.1 - Video
+ * # Semantic UI 2.4.2 - Video
  * http://github.com/semantic-org/semantic-ui/
  *
  *

data/app/assets/stylesheets/semantic-ui/modules/_modal.scss

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.1 - Modal
+ * # Semantic UI 2.4.2 - Modal
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -14,6 +14,7 @@
 *******************************/
 
 .ui.modal {
+  position: absolute;
   display: none;
   z-index: 1001;
   text-align: left;
@@ -184,31 +185,31 @@
 
 
 /* Modal Width */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.modal {
     width: 95%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.modal {
     width: 88%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.modal {
     width: 850px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: $large-monitor-breakpoint) {
   .ui.modal {
     width: 900px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.modal {
     width: 950px;
     margin: 0em 0em 0em 0em;
@@ -216,7 +217,7 @@
 }
 
 /* Tablet and Mobile */
-@media only screen and (max-width: 991px) {
+@media only screen and (max-width: $largest-tablet-screen) {
   .ui.modal > .header {
     padding-right: 2.25rem;
   }
@@ -228,7 +229,7 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.modal > .header {
     padding: 0.75rem 1rem !important;
     padding-right: 2.25rem !important;
@@ -320,8 +321,21 @@
   color: rgba(0, 0, 0, 0.85);
 }
 
+/* Resort to margin positioning if legacy */
+.ui.legacy.modal,
+.ui.legacy.page.dimmer > .ui.modal {
+  top: 50%;
+  left: 50%;
+}
+.ui.legacy.page.dimmer > .ui.scrolling.modal,
+.ui.page.dimmer > .ui.scrolling.legacy.modal,
+.ui.top.aligned.legacy.page.dimmer > .ui.modal,
+.ui.top.aligned.dimmer > .ui.legacy.modal {
+  top: auto;
+}
+
 /* Tablet and Mobile */
-@media only screen and (max-width: 991px) {
+@media only screen and (max-width: $largest-tablet-screen) {
   .ui.basic.modal > .close {
     color: #FFFFFF;
   }
@@ -356,6 +370,21 @@
 .modals.dimmer[class*="top aligned"] .modal {
   margin: 5vh auto;
 }
+@media only screen and (max-width: $largest-mobile-screen) {
+  .modals.dimmer[class*="top aligned"] .modal {
+    margin: 1rem auto;
+  }
+}
+
+/* Legacy Top Aligned */
+.legacy.modals.dimmer[class*="top aligned"] {
+  padding-top: 5vh;
+}
+@media only screen and (max-width: $largest-mobile-screen) {
+  .legacy.modals.dimmer[class*="top aligned"] {
+    padding-top: 1rem;
+  }
+}
 
 /*--------------
     Scrolling
@@ -379,7 +408,7 @@
   position: fixed;
 }
 .modals.dimmer .ui.scrolling.modal {
-  margin: 1rem auto !important;
+  margin: 1rem auto;
 }
 
 /* Undetached Scrolling */
@@ -398,7 +427,7 @@
 
 /* Scrolling Content */
 .ui.modal .scrolling.content {
-  max-height: calc(70vh);
+  max-height: calc(80vh - 10em);
   overflow: auto;
 }
 
@@ -408,12 +437,8 @@
 
 .ui.fullscreen.modal {
   width: 95% !important;
-  left: 0em !important;
   margin: 1em auto;
 }
-.ui.fullscreen.scrolling.modal {
-  left: 0em !important;
-}
 .ui.fullscreen.modal > .header {
   padding-right: 2.25rem;
 }
@@ -437,31 +462,31 @@
 }
 
 /* Mini Modal Width */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.mini.modal {
     width: 95%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.mini.modal {
     width: 35.2%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.mini.modal {
     width: 340px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: $large-monitor-breakpoint) {
   .ui.mini.modal {
     width: 360px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.mini.modal {
     width: 380px;
     margin: 0em 0em 0em 0em;
@@ -474,31 +499,31 @@
 }
 
 /* Tiny Modal Width */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.tiny.modal {
     width: 95%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.tiny.modal {
     width: 52.8%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.tiny.modal {
     width: 510px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: $large-monitor-breakpoint) {
   .ui.tiny.modal {
     width: 540px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.tiny.modal {
     width: 570px;
     margin: 0em 0em 0em 0em;
@@ -511,31 +536,31 @@
 }
 
 /* Small Modal Width */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.small.modal {
     width: 95%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.small.modal {
     width: 70.4%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.small.modal {
     width: 680px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: $large-monitor-breakpoint) {
   .ui.small.modal {
     width: 720px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.small.modal {
     width: 760px;
     margin: 0em 0em 0em 0em;
@@ -546,31 +571,31 @@
 .ui.large.modal > .header {
   font-size: 1.6em;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.large.modal {
     width: 95%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.large.modal {
     width: 88%;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.large.modal {
     width: 1020px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: $large-monitor-breakpoint) {
   .ui.large.modal {
     width: 1080px;
     margin: 0em 0em 0em 0em;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.large.modal {
     width: 1140px;
     margin: 0em 0em 0em 0em;