@northdata/fomantic-ui 2.8.722 → 2.9.400

package/lib/semantic-ui/dist/components/modal.css

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic-UI - Modal
- * http://github.com/fomantic/Fomantic-UI/
+ * # Fomantic-UI 2.9.4 - Modal
+ * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * http://opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
  *
  */
 
@@ -18,25 +18,21 @@
   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;
   -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(.icon):not(.dimmer),
+.ui.modal > :first-child:not(.close):not(.dimmer),
 .ui.modal > i.icon:first-child + *,
-.ui.modal > .dimmer:first-child + *:not(.icon),
+.ui.modal > .dimmer:first-child + *:not(.close),
 .ui.modal > .dimmer:first-child + i.icon + * {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -55,10 +51,9 @@
 *******************************/
 
 
-/*--------------
-     Close
----------------*/
-
+/* --------------
+         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: "Josefin Sans", serif;
-  background: #FFFFFF;
+  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,27 +150,42 @@
   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) {
+.ui.modal .actions > .button {
   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 {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+.ui.modal > .centered,
+.ui.modal > .center.aligned {
+  text-align: center;
+}
+.ui.modal > .centered.actions > .button,
+.ui.modal > .center.aligned.actions > .button {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
 
-/*-------------------
+/* -------------------
        Responsive
---------------------*/
-
+-------------------- */
 
 /* Modal Width */
 @media only screen and (max-width: 767.98px) {
@@ -211,6 +205,16 @@
     width: 850px;
     margin: 0em 0em 0em -425px;
   }
+  .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) {
@@ -227,7 +231,7 @@
 
 /* Tablet and Mobile */
 @media only screen and (max-width: 991.98px) {
-  .ui.modal > .header {
+  .ui.modal > .close + .header {
     padding-right: 2.25rem;
   }
   .ui.modal > .close {
@@ -240,8 +244,10 @@
 /* Mobile */
 @media only screen and (max-width: 767.98px) {
   .ui.modal > .header {
-    padding: 0.75rem 1rem !important;
-    padding-right: 2.25rem !important;
+    padding: 0.75rem 1rem;
+  }
+  .ui.modal > .close + .header {
+    padding-right: 2.25rem;
   }
   .ui.overlay.fullscreen.modal > .content.content.content {
     min-height: calc(100vh - 8.1rem);
@@ -257,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;
@@ -275,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 */
@@ -295,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);
 }
 
 
@@ -313,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);
@@ -377,10 +383,9 @@
 *******************************/
 
 
-/*--------------
-     Aligned
-  ---------------*/
-
+/* --------------
+       Aligned
+    --------------- */
 .modals.dimmer .ui.top.aligned.modal {
   top: 5vh;
 }
@@ -396,32 +401,37 @@
   }
 }
 
-/*--------------
-      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: center;
   position: fixed;
 }
+.scrolling.dimmable:not(body) > .dimmer {
+  position: absolute;
+}
 .scrolling.dimmable.dimmed > .dimmer {
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+}
+.modals.dimmer .ui.scrolling.modal.fullscreen {
+  top: 0;
 }
 .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
   margin: 3.5rem auto;
+  top: 1em;
 }
 
 /* Fix for Firefox, Edge, IE11 */
 .modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
-  content: '\00A0';
+  content: "\00A0";
   position: absolute;
   height: 3.5rem;
 }
@@ -429,7 +439,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;
@@ -443,6 +454,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);
@@ -451,13 +464,12 @@
   max-height: calc(100vh - 9.1rem);
 }
 
-/*--------------
-     Full Screen
-  ---------------*/
-
+/* --------------
+       Full Screen
+    --------------- */
 .ui.fullscreen.modal {
   width: 95%;
-  left: 2.5%;
+  left: 5% / 2;
   margin: 1em auto;
 }
 .ui.overlay.fullscreen.modal {
@@ -467,8 +479,8 @@
   top: 0;
   border-radius: 0;
 }
-.ui.modal > .close.inside + .header,
-.ui.fullscreen.modal > .header {
+.ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
+.ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
   padding-right: 2.25rem;
 }
 .ui.modal > .close.inside,
@@ -478,13 +490,12 @@
   color: rgba(0, 0, 0, 0.87);
 }
 .ui.basic.fullscreen.modal > .close {
-  color: #FFFFFF;
+  color: #fff;
 }
 
-/*--------------
+/* --------------
       Size
----------------*/
-
+--------------- */
 .ui.modal {
   font-size: 1rem;
 }
@@ -494,31 +505,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) {
@@ -527,31 +538,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) {
@@ -626,31 +637,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) {
@@ -659,31 +670,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) {
@@ -692,31 +703,31 @@
 @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;
   }
 }