fomantic-ui-sass 2.8.8.1 → 2.9.1

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

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic-UI 2.8.8 - Modal
- * http://github.com/fomantic/Fomantic-UI/
+ * # Fomantic-UI 2.9.1 - Modal
+ * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * http://opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
  *
  */
 
@@ -18,21 +18,17 @@
   display: none;
   z-index: 1001;
   text-align: left;
-  background: #FFFFFF;
+  background: #fff;
   border: none;
-  -webkit-box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
-          box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
-  -webkit-transform-origin: 50% 25%;
-          transform-origin: 50% 25%;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
+  transform-origin: 50% 25%;
+  flex: 0 0 auto;
   border-radius: 0.28571429rem;
   -webkit-user-select: text;
-     -moz-user-select: text;
       -ms-user-select: text;
           user-select: text;
   will-change: top, left, margin, transform, opacity;
+  outline: none;
 }
 .ui.modal > :first-child:not(.close):not(.dimmer),
 .ui.modal > i.icon:first-child + *,
@@ -55,10 +51,9 @@
 *******************************/
 
 
-/*--------------
+/* --------------
      Close
----------------*/
-
+--------------- */
 .ui.modal > .close {
   cursor: pointer;
   position: absolute;
@@ -67,27 +62,27 @@
   z-index: 1;
   opacity: 0.8;
   font-size: 1.25em;
-  color: #FFFFFF;
+  color: #fff;
   width: 2.25rem;
   height: 2.25rem;
   padding: 0.625rem 0 0 0;
 }
+.ui.modal > .close:focus,
 .ui.modal > .close:hover {
   opacity: 1;
+  outline: none;
 }
 
-/*--------------
+/* --------------
      Header
----------------*/
-
+--------------- */
 .ui.modal > .header {
   display: block;
-  font-family: $font-family;
-  background: #FFFFFF;
+  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  background: #fff;
   margin: 0;
   padding: 1.25rem 1.5rem;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: rgba(0, 0, 0, 0.85);
   border-bottom: 1px solid rgba(34, 36, 38, 0.15);
 }
@@ -97,72 +92,56 @@
   font-weight: bold;
 }
 
-/*--------------
+/* --------------
      Content
----------------*/
-
+--------------- */
 .ui.modal > .content {
   display: block;
   width: 100%;
   font-size: 1em;
   line-height: 1.4;
   padding: 1.5rem;
-  background: #FFFFFF;
+  background: #fff;
 }
 .ui.modal > .image.content {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
 }
 
 /* Image */
 .ui.modal > .content > .image {
   display: block;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
-  width: '';
-  -ms-flex-item-align: start;
-      align-self: start;
+  flex: 0 1 auto;
+  width: "";
+  align-self: start;
   max-width: 100%;
 }
 .ui.modal > [class*="top aligned"] {
-  -ms-flex-item-align: start;
-      align-self: start;
+  align-self: start;
 }
 .ui.modal > [class*="middle aligned"] {
-  -ms-flex-item-align: center;
-      align-self: center;
+  align-self: center;
 }
 .ui.modal > [class*="stretched"] {
-  -ms-flex-item-align: stretch;
-      align-self: stretch;
+  align-self: stretch;
 }
 
 /* Description */
 .ui.modal > .content > .description {
   display: block;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
+  flex: 1 0 auto;
   min-width: 0;
-  -ms-flex-item-align: start;
-      align-self: start;
+  align-self: start;
 }
 .ui.modal > .content > i.icon + .description,
 .ui.modal > .content > .image + .description {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
-  min-width: '';
+  flex: 0 1 auto;
+  min-width: "";
   width: auto;
   padding-left: 2em;
 }
-/*rtl:ignore*/
+
+/* rtl:ignore */
 .ui.modal > .content > .image > i.icon {
   margin: 0;
   opacity: 1;
@@ -171,22 +150,29 @@
   font-size: 8rem;
 }
 
-/*--------------
-     Actions
----------------*/
-
+/* --------------
+         Actions
+    --------------- */
 .ui.modal > .actions {
-  background: #F9FAFB;
-  padding: 1rem 1rem;
+  background: #f9fafb;
+  padding: 1rem;
   border-top: 1px solid rgba(34, 36, 38, 0.15);
   text-align: right;
 }
 .ui.modal .actions > .button:not(.fluid) {
   margin-left: 0.75em;
 }
+.ui.ui.modal > .basic.actions,
 .ui.basic.modal > .actions {
   border-top: none;
 }
+.ui.modal > .left.actions {
+  text-align: left;
+}
+.ui.modal > .left.actions > .button:not(.fluid) {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
 .ui.modal > .centered,
 .ui.modal > .center.aligned {
   text-align: center;
@@ -197,40 +183,49 @@
   margin-right: 0.5em;
 }
 
-/*-------------------
+/* -------------------
        Responsive
---------------------*/
-
+-------------------- */
 
 /* Modal Width */
 @media only screen and (max-width: 767.98px) {
   .ui.modal:not(.fullscreen) {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.modal:not(.fullscreen) {
     width: 88%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.modal:not(.fullscreen) {
     width: 850px;
-    margin: 0 0 0 0;
+    margin: 0;
+  }
+  .ui.modal:not(.fullscreen) > .active.dimmer + .close:not(.inside) {
+    pointer-events: none;
+    opacity: 0.1;
+  }
+  .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
+    text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.3), 1px -1px 2px rgba(0, 0, 0, 0.3), -1px 2px 2px rgba(0, 0, 0, 0.3), 1px 2px 2px rgba(0, 0, 0, 0.3);
+  }
+  .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
+    text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.3), 1px -1px 2px rgba(255, 255, 255, 0.3), -1px 2px 2px rgba(255, 255, 255, 0.3), 1px 2px 2px rgba(255, 255, 255, 0.3);
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.modal:not(.fullscreen) {
     width: 900px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.modal:not(.fullscreen) {
     width: 950px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 
@@ -268,12 +263,10 @@
     top: 0.5rem !important;
     right: 0.5rem !important;
   }
-  /*rtl:ignore*/
+  
+/* rtl:ignore */
   .ui.modal .image.content {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
   }
   .ui.modal > .content > .image {
     display: block;
@@ -286,14 +279,14 @@
     font-size: 5rem;
     text-align: center;
   }
-  /*rtl:ignore*/
+  
+/* rtl:ignore */
   .ui.modal > .content > .description {
     display: block;
     width: 100% !important;
     margin: 0 !important;
     padding: 1rem 0 !important;
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Let Buttons Stack */
@@ -306,13 +299,11 @@
   }
 }
 
-/*--------------
+/* --------------
     Coupling
----------------*/
-
+--------------- */
 .ui.inverted.dimmer > .ui.modal {
-  -webkit-box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
-          box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
 }
 
 
@@ -324,23 +315,27 @@
   background-color: transparent;
   border: none;
   border-radius: 0;
-  -webkit-box-shadow: none !important;
-          box-shadow: none !important;
-  color: #FFFFFF;
+  box-shadow: none !important;
+  color: #fff;
 }
+.ui.ui.modal > .basic.header,
+.ui.ui.modal > .basic.actions,
 .ui.basic.modal > .header,
 .ui.basic.modal > .content,
 .ui.basic.modal > .actions {
   background-color: transparent;
 }
+.ui.modal > .basic.header {
+  border-bottom: none;
+}
 .ui.basic.modal > .header {
-  color: #FFFFFF;
+  color: #fff;
   border-bottom: none;
 }
 .ui.basic.modal > .close {
   top: 1rem;
   right: 1.5rem;
-  color: #FFFFFF;
+  color: #fff;
 }
 .ui.inverted.dimmer > .basic.modal {
   color: rgba(0, 0, 0, 0.87);
@@ -388,10 +383,9 @@
 *******************************/
 
 
-/*--------------
-     Aligned
-  ---------------*/
-
+/* --------------
+       Aligned
+    --------------- */
 .modals.dimmer .ui.top.aligned.modal {
   top: 5vh;
 }
@@ -407,24 +401,26 @@
   }
 }
 
-/*--------------
-      Scrolling
-  ---------------*/
-
+/* --------------
+        Scrolling
+    --------------- */
 
 /* Scrolling Dimmer */
 .scrolling.dimmable.dimmed {
   overflow: hidden;
 }
 .scrolling.dimmable > .dimmer {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   position: fixed;
 }
+.scrolling.dimmable:not(body) > .dimmer {
+  justify-content: center;
+  position: absolute;
+}
 .scrolling.dimmable.dimmed > .dimmer {
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
 }
 .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
   margin: 2rem auto;
@@ -432,7 +428,7 @@
 
 /* Fix for Firefox, Edge, IE11 */
 .modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
-  content: '\00A0';
+  content: "\00A0";
   position: absolute;
   height: 2rem;
 }
@@ -440,7 +436,8 @@
 /* Undetached Scrolling */
 .scrolling.undetached.dimmable.dimmed {
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
 }
 .scrolling.undetached.dimmable.dimmed > .dimmer {
   overflow: hidden;
@@ -454,6 +451,8 @@
 .ui.modal > .scrolling.content {
   max-height: calc(80vh - 10rem);
   overflow: auto;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
 }
 .ui.overlay.fullscreen.modal > .content {
   min-height: calc(100vh - 9.1rem);
@@ -462,10 +461,9 @@
   max-height: calc(100vh - 9.1rem);
 }
 
-/*--------------
-     Full Screen
-  ---------------*/
-
+/* --------------
+       Full Screen
+    --------------- */
 .ui.fullscreen.modal {
   width: 95%;
   left: 2.5%;
@@ -489,13 +487,12 @@
   color: rgba(0, 0, 0, 0.87);
 }
 .ui.basic.fullscreen.modal > .close {
-  color: #FFFFFF;
+  color: #fff;
 }
 
-/*--------------
+/* --------------
       Size
----------------*/
-
+--------------- */
 .ui.modal {
   font-size: 1rem;
 }
@@ -505,31 +502,31 @@
 @media only screen and (max-width: 767.98px) {
   .ui.mini.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.mini.modal {
     width: 35.2%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.mini.modal {
     width: 340px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.mini.modal {
     width: 360px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.mini.modal {
     width: 380px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 .ui.tiny.modal > .header:not(.ui) {
@@ -538,31 +535,31 @@
 @media only screen and (max-width: 767.98px) {
   .ui.tiny.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.tiny.modal {
     width: 52.8%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.tiny.modal {
     width: 510px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.tiny.modal {
     width: 540px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.tiny.modal {
     width: 570px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 .ui.small.modal > .header:not(.ui) {
@@ -571,31 +568,31 @@
 @media only screen and (max-width: 767.98px) {
   .ui.small.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.small.modal {
     width: 70.4%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.small.modal {
     width: 680px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.small.modal {
     width: 720px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.small.modal {
     width: 760px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 .ui.large.modal > .header:not(.ui) {
@@ -604,31 +601,31 @@
 @media only screen and (max-width: 767.98px) {
   .ui.large.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.large.modal {
     width: 88%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.large.modal {
     width: 1020px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.large.modal {
     width: 1080px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.large.modal {
     width: 1140px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 .ui.big.modal > .header:not(.ui) {
@@ -637,31 +634,31 @@
 @media only screen and (max-width: 767.98px) {
   .ui.big.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.big.modal {
     width: 88%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.big.modal {
     width: 1190px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.big.modal {
     width: 1260px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.big.modal {
     width: 1330px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 .ui.huge.modal > .header:not(.ui) {
@@ -670,31 +667,31 @@
 @media only screen and (max-width: 767.98px) {
   .ui.huge.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.huge.modal {
     width: 88%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.huge.modal {
     width: 1360px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.huge.modal {
     width: 1440px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.huge.modal {
     width: 1520px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 .ui.massive.modal > .header:not(.ui) {
@@ -703,63 +700,63 @@
 @media only screen and (max-width: 767.98px) {
   .ui.massive.modal {
     width: 95%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.massive.modal {
     width: 88%;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.massive.modal {
     width: 1530px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1200px) {
   .ui.massive.modal {
     width: 1620px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.massive.modal {
     width: 1710px;
-    margin: 0 0 0 0;
+    margin: 0;
   }
 }
 
 
 /*****************************
-            Inverted
-  *******************************/
+              Inverted
+    *******************************/
 
 .ui.inverted.modal {
-  background: rgba(0, 0, 0, 0.9);
+  background: #000;
 }
 .ui.inverted.modal > .header,
 .ui.inverted.modal > .content {
-  background: rgba(0, 0, 0, 0.9);
-  color: #FFFFFF;
+  background: #000;
+  color: #fff;
 }
 .ui.inverted.modal > .actions {
-  background: #191A1B;
+  background: #191a1b;
   border-top: 1px solid rgba(34, 36, 38, 0.85);
-  color: #FFFFFF;
+  color: #fff;
 }
 .ui.inverted.dimmer > .modal > .close {
   color: rgba(0, 0, 0, 0.85);
 }
 @media only screen and (max-width: 991.98px) {
   .ui.dimmer .inverted.modal > .close {
-    color: #FFFFFF;
+    color: #fff;
   }
 }
 .ui.inverted.modal > .close.inside,
 .ui.inverted.fullscreen.modal > .close {
-  color: #FFFFFF;
+  color: #fff;
 }