semantic-ui-sass 2.4.2.0 → 2.4.3.0

data/README.md

@@ -59,16 +59,36 @@ $use-custom-scrollbars: false;
 ```
 
 ## All variables, you can custom any of that
+
+Fonts:
+
 ```css
-$import-google-fonts: true !default;
-$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
 $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;
+```
+
+Scrollbars:
+
+```css
 $use-custom-scrollbars: true !default;
 ```
 
+Breakpoints:
+
+```css
+$mobile-breakpoint: 320px !default;
+$tablet-breakpoint: 768px !default;
+$computer-breakpoint: 992px !default;
+$large-monitor-breakpoint: 1200px !default;
+$widescreen-monitor-breakpoint: 1920px !default;
+```
+
 ## Javascripts
 
+### Ruby on Rails Version 5
+
 We have a helper that includes all Semantic javascripts. Put this in your Javascript manifest (usually in `application.js`) to
 
 ```js
@@ -83,6 +103,32 @@ You can also load individual modules, provided you also require any dependencies
 //= require semantic-ui/dropdown
 ```
 
+### Ruby on Rails Version 6+
+
+Add packages with yarn:
+
+```console
+yarn add jquery popper.js semantic-ui-sass
+```
+
+In config/webpack/environment.js add the following:
+
+```js
+const webpack = require("webpack")
+
+environment.plugins.append("Provide", new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+}))
+````
+
+In app/javascript/packs/application.js add the following:
+
+```js
+require("semantic-ui-sass")
+````
+
 # semantic-ui-sass with Compass
 
 ## New project

data/app/assets/stylesheets/semantic-ui/collections/_form.scss

@@ -835,7 +835,7 @@
 }
 
 /* Swap to full width on mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.form .fields {
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
@@ -921,7 +921,7 @@
 }
 
 /* Swap to full width on mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
   .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
   .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,

data/app/assets/stylesheets/semantic-ui/collections/_grid.scss

@@ -171,7 +171,7 @@
        Page Grid
 -------------------------*/
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.page.grid {
     width: auto;
     padding-left: 0em;
@@ -180,7 +180,7 @@
     margin-right: 0em;
   }
 }
-@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.page.grid {
     width: auto;
     margin-left: 0em;
@@ -189,7 +189,7 @@
     padding-right: 2em;
   }
 }
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (min-width: $computer-breakpoint) and (max-width: $largest-small-monitor) {
   .ui.page.grid {
     width: auto;
     margin-left: 0em;
@@ -198,7 +198,7 @@
     padding-right: 3%;
   }
 }
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (min-width: $large-monitor-breakpoint) and (max-width: $largest-large-monitor) {
   .ui.page.grid {
     width: auto;
     margin-left: 0em;
@@ -207,7 +207,7 @@
     padding-right: 15%;
   }
 }
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.page.grid {
     width: auto;
     margin-left: 0em;
@@ -459,7 +459,7 @@
 
 
 /* Mobile Sizing Combinations */
-@media only screen and (min-width: 320px) and (max-width: 767px) {
+@media only screen and (min-width: $mobile-breakpoint) and (max-width: $largest-mobile-screen) {
   .ui.grid > .row > [class*="one wide mobile"].column,
   .ui.grid > .column.row > [class*="one wide mobile"].column,
   .ui.grid > [class*="one wide mobile"].column,
@@ -559,7 +559,7 @@
 }
 
 /* Tablet Sizing Combinations */
-@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.grid > .row > [class*="one wide tablet"].column,
   .ui.grid > .column.row > [class*="one wide tablet"].column,
   .ui.grid > [class*="one wide tablet"].column,
@@ -659,7 +659,7 @@
 }
 
 /* Computer/Desktop Sizing Combinations */
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui.grid > .row > [class*="one wide computer"].column,
   .ui.grid > .column.row > [class*="one wide computer"].column,
   .ui.grid > [class*="one wide computer"].column,
@@ -759,7 +759,7 @@
 }
 
 /* Large Monitor Sizing Combinations */
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (min-width: $large-monitor-breakpoint) and (max-width: $largest-large-monitor) {
   .ui.grid > .row > [class*="one wide large screen"].column,
   .ui.grid > .column.row > [class*="one wide large screen"].column,
   .ui.grid > [class*="one wide large screen"].column,
@@ -859,7 +859,7 @@
 }
 
 /* Widescreen Sizing Combinations */
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui.grid > .row > [class*="one wide widescreen"].column,
   .ui.grid > .column.row > [class*="one wide widescreen"].column,
   .ui.grid > [class*="one wide widescreen"].column,
@@ -1478,7 +1478,7 @@
 
 
 /* Mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui[class*="mobile reversed"].grid,
   .ui[class*="mobile reversed"].grid > .row,
   .ui.grid > [class*="mobile reversed"].row {
@@ -1529,7 +1529,7 @@
 }
 
 /* Tablet */
-@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[class*="tablet reversed"].grid,
   .ui[class*="tablet reversed"].grid > .row,
   .ui.grid > [class*="tablet reversed"].row {
@@ -1579,7 +1579,7 @@
 }
 
 /* Computer */
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: $computer-breakpoint) {
   .ui[class*="computer reversed"].grid,
   .ui[class*="computer reversed"].grid > .row,
   .ui.grid > [class*="computer reversed"].row {
@@ -1634,7 +1634,7 @@
 
 
 /* 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.doubling.grid {
     width: auto;
   }
@@ -1730,7 +1730,7 @@
 }
 
 /* Mobile Only */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.grid > .doubling.row,
   .ui.doubling.grid > .row {
     margin: 0em !important;
@@ -1825,7 +1825,7 @@
       Stackable
 --------------------*/
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.stackable.grid {
     width: auto;
     margin-left: 0em !important;
@@ -1905,7 +1905,7 @@
 /* These include arbitrary class repetitions for forced specificity */
 
 /* Mobile Only Hide */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
   .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
   .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
@@ -1933,7 +1933,7 @@
 }
 
 /* Tablet Only Hide */
-@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[class*="mobile only"].grid.grid.grid:not(.tablet),
   .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
   .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
@@ -1961,7 +1961,7 @@
 }
 
 /* Computer Only Hide */
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (min-width: $computer-breakpoint) and (max-width: $largest-small-monitor) {
   .ui[class*="mobile only"].grid.grid.grid:not(.computer),
   .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
   .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
@@ -1989,7 +1989,7 @@
 }
 
 /* Large Screen Only Hide */
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (min-width: $large-monitor-breakpoint) and (max-width: $largest-large-monitor) {
   .ui[class*="mobile only"].grid.grid.grid:not(.computer),
   .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
   .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
@@ -2011,7 +2011,7 @@
 }
 
 /* Widescreen Only Hide */
-@media only screen and (min-width: 1920px) {
+@media only screen and (min-width: $widescreen-monitor-breakpoint) {
   .ui[class*="mobile only"].grid.grid.grid:not(.computer),
   .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
   .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),

data/app/assets/stylesheets/semantic-ui/collections/_menu.scss

@@ -393,14 +393,14 @@
     Container
 ---------------*/
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.menu > .ui.container {
     width: 100% !important;
     margin-left: 0em !important;
     margin-right: 0em !important;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: $tablet-breakpoint) {
   .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
     border-left: 1px solid rgba(34, 36, 38, 0.1);
   }
@@ -1273,7 +1273,7 @@ Floated Menu / Item
     Stackable
 ---------------*/
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.stackable.menu {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;

data/app/assets/stylesheets/semantic-ui/collections/_table.scss

@@ -148,7 +148,7 @@
 }
 
 /* Responsive */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.table:not(.unstackable) {
     width: 100%;
   }
@@ -399,7 +399,7 @@
     Stackable
 ---------------*/
 
-@media only screen and (max-width: 991px) {
+@media only screen and (max-width: $largest-tablet-screen) {
   .ui[class*="tablet stackable"].table,
   .ui[class*="tablet stackable"].table tbody,
   .ui[class*="tablet stackable"].table tr,

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

@@ -1,4 +1,5 @@
 @import 'button';
+@import 'container_variables';
 @import 'container';
 @import 'divider';
 @import 'flag';

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

@@ -17,78 +17,78 @@
 /* All Sizes */
 .ui.container {
   display: block;
-  max-width: 100% !important;
+  max-width: $max-width !important;
 }
 
 /* Mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: $largest-mobile-screen) {
   .ui.container {
-    width: auto !important;
-    margin-left: 1em !important;
-    margin-right: 1em !important;
+    width: $mobile-width !important;
+    margin-left: $mobile-gutter !important;
+    margin-right: $mobile-gutter !important;
   }
   .ui.grid.container {
-    width: auto !important;
+    width: $mobile-grid-width !important;
   }
   .ui.relaxed.grid.container {
-    width: auto !important;
+    width: $mobile-relaxed-grid-width !important;
   }
   .ui.very.relaxed.grid.container {
-    width: auto !important;
+    width: $mobile-very-relaxed-grid-width !important;
   }
 }
 
 /* Tablet */
-@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.container {
-    width: 723px;
-    margin-left: auto !important;
-    margin-right: auto !important;
+    width: $tablet-width;
+    margin-left: $tablet-gutter !important;
+    margin-right: $tablet-gutter !important;
   }
   .ui.grid.container {
-    width: calc( 723px  +  2rem ) !important;
+    width: $tablet-grid-width !important;
   }
   .ui.relaxed.grid.container {
-    width: calc( 723px  +  3rem ) !important;
+    width: $tablet-relaxed-grid-width !important;
   }
   .ui.very.relaxed.grid.container {
-    width: calc( 723px  +  5rem ) !important;
+    width: $tablet-very-relaxed-grid-width !important;
   }
 }
 
 /* Small Monitor */
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (min-width: $computer-breakpoint) and (max-width: $largest-small-monitor) {
   .ui.container {
-    width: 933px;
-    margin-left: auto !important;
-    margin-right: auto !important;
+    width: $computer-width;
+    margin-left: $computer-gutter !important;
+    margin-right: $computer-gutter !important;
   }
   .ui.grid.container {
-    width: calc( 933px  +  2rem ) !important;
+    width: $computer-grid-width !important;
   }
   .ui.relaxed.grid.container {
-    width: calc( 933px  +  3rem ) !important;
+    width: $computer-relaxed-grid-width !important;
   }
   .ui.very.relaxed.grid.container {
-    width: calc( 933px  +  5rem ) !important;
+    width: $computer-very-relaxed-grid-width !important;
   }
 }
 
 /* Large Monitor */
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: $large-monitor-breakpoint) {
   .ui.container {
-    width: 1127px;
-    margin-left: auto !important;
-    margin-right: auto !important;
+    width: $large-monitor-width;
+    margin-left: $large-monitor-gutter !important;
+    margin-right: $large-monitor-gutter !important;
   }
   .ui.grid.container {
-    width: calc( 1127px  +  2rem ) !important;
+    width: $large-monitor-grid-width !important;
   }
   .ui.relaxed.grid.container {
-    width: calc( 1127px  +  3rem ) !important;
+    width: $large-monitor-relaxed-grid-width !important;
   }
   .ui.very.relaxed.grid.container {
-    width: calc( 1127px  +  5rem ) !important;
+    width: $large-monitor-very-relaxed-grid-width !important;
   }
 }
 
@@ -144,4 +144,3 @@
 /*******************************
          Site Overrides
 *******************************/
-

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

@@ -0,0 +1,48 @@
+/*******************************
+            Container
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Minimum Gutter is used to determine the maximum container width for a given device */
+
+$max-width: 100%;
+
+/* Devices */
+$mobile-minimum-gutter: 0em;
+$mobile-width: auto;
+$mobile-gutter: 1em;
+
+$tablet-minimum-gutter: ($em-size  * 1);
+$tablet-width: $tablet-breakpoint - ($tablet-minimum-gutter * 2) - $scrollbar-width;
+$tablet-gutter: auto;
+
+$computer-minimum-gutter: ($em-size  * 1.5);
+$computer-width: $computer-breakpoint - ($computer-minimum-gutter * 2) - $scrollbar-width;
+$computer-gutter: auto;
+
+$large-monitor-minimum-gutter: ($em-size  * 2);
+$large-monitor-width: $large-monitor-breakpoint - ($large-monitor-minimum-gutter * 2) - $scrollbar-width;
+$large-monitor-gutter: auto;
+
+/* Coupling (Add Negative Margin to container size) */
+$grid-gutter-width: 2rem;
+$relaxed-grid-gutter-width: 3rem;
+$very-relaxed-grid-gutter-width: 5rem;
+
+$mobile-grid-width: $mobile-width;
+$tablet-grid-width: calc($tablet-width + $grid-gutter-width);
+$computer-grid-width: calc($computer-width + $grid-gutter-width);
+$large-monitor-grid-width: calc($large-monitor-width + $grid-gutter-width);
+
+$mobile-relaxed-grid-width: $mobile-width;
+$tablet-relaxed-grid-width: calc($tablet-width + $relaxed-grid-gutter-width);
+$computer-relaxed-grid-width: calc($computer-width + $relaxed-grid-gutter-width);
+$large-monitor-relaxed-grid-width: calc($large-monitor-width + $relaxed-grid-gutter-width);
+
+$mobile-very-relaxed-grid-width: $mobile-width;
+$tablet-very-relaxed-grid-width: calc($tablet-width + $very-relaxed-grid-gutter-width);
+$computer-very-relaxed-grid-width: calc($computer-width + $very-relaxed-grid-gutter-width);
+$large-monitor-very-relaxed-grid-width: calc($large-monitor-width + $very-relaxed-grid-gutter-width);