semantic-ui-sass 2.4.2.0 → 2.4.3.0

data/app/assets/stylesheets/semantic-ui/elements/_divider.scss

@@ -114,7 +114,7 @@
 }
 
 /* Inside grid */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.stackable.grid .ui.vertical.divider,
   .ui.grid .stackable.row .ui.vertical.divider {
     display: table;
@@ -244,7 +244,7 @@
 .ui.horizontal.divider:after {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.stackable.grid .ui.vertical.divider:before,
   .ui.grid .stackable.row .ui.vertical.divider:before,
   .ui.stackable.grid .ui.vertical.divider:after,

data/app/assets/stylesheets/semantic-ui/elements/_step.scss

@@ -283,7 +283,7 @@
 
 
 /* Mobile (Default) */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.steps:not(.unstackable) {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
@@ -425,7 +425,7 @@
 
 
 /* Tablet Or Below */
-@media only screen and (max-width: 991px) {
+@media only screen and (max-width: $largest-tablet-screen) {
   .ui[class*="tablet stackable"].steps {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;

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

@@ -1,5 +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/_dropdown.scss

@@ -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;
   }
@@ -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;
   }
@@ -1141,25 +1141,25 @@ select.ui.dropdown {
     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;

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

@@ -185,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;
@@ -217,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;
   }
@@ -229,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;
@@ -335,7 +335,7 @@
 }
 
 /* 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;
   }
@@ -370,7 +370,7 @@
 .modals.dimmer[class*="top aligned"] .modal {
   margin: 5vh auto;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .modals.dimmer[class*="top aligned"] .modal {
     margin: 1rem auto;
   }
@@ -380,7 +380,7 @@
 .legacy.modals.dimmer[class*="top aligned"] {
   padding-top: 5vh;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .legacy.modals.dimmer[class*="top aligned"] {
     padding-top: 1rem;
   }
@@ -462,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;
@@ -499,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;
@@ -536,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;
@@ -571,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;

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

@@ -669,7 +669,7 @@
 .ui[class*="very wide"].popup {
   max-width: 550px;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.wide.popup,
   .ui[class*="very wide"].popup {
     max-width: 250px;

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

@@ -426,7 +426,7 @@
       Mobile
 ---------------*/
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.search .results {
     max-width: calc(100vw - 2rem);
   }

data/app/assets/stylesheets/semantic-ui/views/_ad.scss

@@ -223,7 +223,7 @@
 .ui.mobile.ad {
   display: none;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.mobile.ad {
     display: block;
   }

data/app/assets/stylesheets/semantic-ui/views/_card.scss

@@ -787,7 +787,7 @@ a.ui.card:hover,
 
 
 /* Mobile Only */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.two.doubling.cards {
     margin-left: 0em;
     margin-right: 0em;
@@ -872,7 +872,7 @@ a.ui.card:hover,
 }
 
 /* Tablet Only */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: $tablet-breakpoint) and (max-width: $largest-tablet-screen) {
   .ui.two.doubling.cards {
     margin-left: 0em;
     margin-right: 0em;
@@ -960,7 +960,7 @@ a.ui.card:hover,
       Stackable
 --------------------*/
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.stackable.cards {
     display: block !important;
   }