fomantic-ui 2.9.1-beta.8 → 2.9.1

package/dist/components/flyout.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.1-beta.8+edc5e7e - Flyout
+ * # Fomantic-UI 2.9.1 - Flyout
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -21,13 +21,10 @@
   left: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
-  -webkit-transition: none;
   transition: none;
   will-change: transform;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
   visibility: hidden;
-  -webkit-overflow-scrolling: touch;
   height: 100%;
   max-height: 100%;
   max-width: 100%;
@@ -35,7 +32,8 @@
   margin: 0;
   overflow-y: hidden;
   z-index: 102;
-  background: #FFFFFF;
+  background: #fff;
+  outline: none;
 }
 
 /* GPU Layers for Child Elements */
@@ -44,10 +42,9 @@
           backface-visibility: hidden;
 }
 
-/*--------------
+/* --------------
    Close
----------------*/
-
+--------------- */
 .ui.flyout > .close {
   cursor: pointer;
   position: absolute;
@@ -69,55 +66,62 @@
   outline: none;
 }
 
-/*--------------
+/* --------------
    Header
----------------*/
-
+--------------- */
 .ui.flyout > .header {
   display: block;
-  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);
 }
 
-/*--------------
+/* --------------
    Content
----------------*/
-
+--------------- */
 .ui.flyout > .content {
   display: block;
   width: 100%;
   font-size: 1em;
   line-height: 1.4;
   padding: 1.5rem;
-  background: #FFFFFF;
+  background: #fff;
+}
+.ui.flyout > .content.scrolling {
+  overflow: auto;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
 }
 .ui.flyout.left > .content,
 .ui.flyout.right > .content {
+  min-height: calc(100vh - 4.7rem);
+}
+.ui.flyout.left > .header + .content,
+.ui.flyout.right > .header + .content {
   min-height: calc(100vh - 9.1rem);
 }
 .ui.flyout.left > .scrolling.content,
 .ui.flyout.right > .scrolling.content {
+  max-height: calc(100vh - 4.7rem);
+}
+.ui.flyout.left > .header + .scrolling.content,
+.ui.flyout.right > .header + .scrolling.content {
   max-height: calc(100vh - 9.1rem);
-  overflow: auto;
 }
 .ui.flyout.top > .scrolling.content,
 .ui.flyout.bottom > .scrolling.content {
   max-height: calc(80vh - 9.1rem);
-  overflow: auto;
 }
 
-/*--------------
-     Actions
-  ---------------*/
-
+/* --------------
+       Actions
+    --------------- */
 .ui.flyout > .actions {
-  background: #F9FAFB;
-  padding: 1rem 1rem;
+  background: #f9fafb;
+  padding: 1rem;
   border-top: 1px solid rgba(34, 36, 38, 0.15);
   text-align: right;
 }
@@ -151,21 +155,18 @@
   border-bottom: none;
 }
 
-/*--------------
+/* --------------
    Direction
----------------*/
-
+--------------- */
 .ui.left.flyout {
   right: auto;
   left: 0;
-  -webkit-transform: translate3d(-100%, 0, 0);
-          transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
 }
 .ui.right.flyout {
   right: 0;
   left: auto;
-  -webkit-transform: translate3d(100%, 0, 0);
-          transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
 }
 .ui.top.flyout,
 .ui.bottom.flyout {
@@ -175,20 +176,17 @@
 .ui.top.flyout {
   top: 0;
   bottom: auto;
-  -webkit-transform: translate3d(0, -100%, 0);
-          transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
 }
 .ui.bottom.flyout {
   top: auto;
   bottom: 0;
-  -webkit-transform: translate3d(0, 100%, 0);
-          transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
 }
 
-/*--------------
+/* --------------
      Pushable
----------------*/
-
+--------------- */
 .pushable.pushable.pushable {
   height: 100%;
   overflow-x: hidden;
@@ -209,8 +207,7 @@ body.pushable.dimmed {
 
 /* Page Context */
 .pushable:not(body) {
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
   overflow-y: hidden;
 }
 .pushable:not(body) > .ui.flyout,
@@ -219,35 +216,27 @@ body.pushable.dimmed {
   position: absolute;
 }
 
-/*--------------
+/* --------------
      Fixed
----------------*/
-
+--------------- */
 .pushable > .fixed {
   position: fixed;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
-  -webkit-transition: -webkit-transform 500ms ease;
-  transition: -webkit-transform 500ms ease;
   transition: transform 500ms ease;
-  transition: transform 500ms ease, -webkit-transform 500ms ease;
   will-change: transform;
   z-index: 101;
 }
 
-/*--------------
+/* --------------
      Page
----------------*/
-
+--------------- */
 .pushable > .pusher {
   position: relative;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   min-height: 100%;
-  -webkit-transition: -webkit-transform 500ms ease;
-  transition: -webkit-transform 500ms ease;
   transition: transform 500ms ease;
-  transition: transform 500ms ease, -webkit-transform 500ms ease;
   z-index: 2;
   
 /* Pusher should inherit background from context */
@@ -257,31 +246,28 @@ body.pushable.dimmed {
   overflow: hidden;
 }
 body.pushable > .pusher {
-  background: #FFFFFF;
+  background: #fff;
 }
 
-/*--------------
+/* --------------
      Dimmer
----------------*/
-
+--------------- */
 .pushable > .pusher::after {
   position: fixed;
   top: 0;
   right: 0;
-  content: '';
+  content: "";
   background: rgba(0, 0, 0, 0.4);
   overflow: hidden;
   opacity: 0;
-  -webkit-transition: all 500ms;
   transition: all 500ms;
   will-change: opacity;
   z-index: 1000;
 }
 
-/*--------------
+/* --------------
     Coupling
----------------*/
-
+--------------- */
 .ui.flyout.menu .item {
   border-radius: 0 !important;
 }
@@ -292,10 +278,9 @@ body.pushable > .pusher {
 *******************************/
 
 
-/*--------------
+/* --------------
      Dimmed
----------------*/
-
+--------------- */
 .pushable > .pusher.dimmed::after {
   width: 100% !important;
   height: 100% !important;
@@ -310,56 +295,47 @@ body.pushable > .pusher {
   opacity: 0 !important;
 }
 
-/*--------------
+/* --------------
     Animating
----------------*/
-
+--------------- */
 .ui.animating.flyout {
   visibility: visible;
 }
 
-/*--------------
+/* --------------
      Visible
----------------*/
-
+--------------- */
 .ui.visible.flyout {
   visibility: visible;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /* Shadow Direction */
 .ui.left.visible.flyout,
 .ui.right.visible.flyout {
-  -webkit-box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
-          box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
+  box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
 }
 .ui.top.visible.flyout,
 .ui.bottom.visible.flyout {
-  -webkit-box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
-          box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
+  box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
 }
 
 /* Visible On Load */
 .ui.visible.left.flyout ~ .fixed,
 .ui.visible.left.flyout ~ .pusher {
-  -webkit-transform: translate3d(400px, 0, 0);
-          transform: translate3d(400px, 0, 0);
+  transform: translate3d(400px, 0, 0);
 }
 .ui.visible.right.flyout ~ .fixed,
 .ui.visible.right.flyout ~ .pusher {
-  -webkit-transform: translate3d(-400px, 0, 0);
-          transform: translate3d(-400px, 0, 0);
+  transform: translate3d(-400px, 0, 0);
 }
 .ui.visible.top.flyout ~ .fixed,
 .ui.visible.top.flyout ~ .pusher {
-  -webkit-transform: translate3d(0, 36px, 0);
-          transform: translate3d(0, 36px, 0);
+  transform: translate3d(0, 36px, 0);
 }
 .ui.visible.bottom.flyout ~ .fixed,
 .ui.visible.bottom.flyout ~ .pusher {
-  -webkit-transform: translate3d(0, -36px, 0);
-          transform: translate3d(0, -36px, 0);
+  transform: translate3d(0, -36px, 0);
 }
 
 /* opposite sides visible forces content overlay */
@@ -367,29 +343,27 @@ body.pushable > .pusher {
 .ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .pusher,
 .ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .fixed,
 .ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .pusher {
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
-/*--------------
-       Inverted
-  ---------------*/
-
+/* --------------
+         Inverted
+    --------------- */
 .ui.flyout.inverted {
-  background: #000000;
+  background: #000;
 }
 .ui.flyout.inverted > .close {
-  color: #FFFFFF;
+  color: #fff;
 }
 .ui.flyout.inverted > .header,
 .ui.flyout.inverted > .content {
-  background: #000000;
-  color: #FFFFFF;
+  background: #000;
+  color: #fff;
 }
 .ui.flyout.inverted > .actions {
-  background: #191A1B;
+  background: #191a1b;
   border-top: 1px solid rgba(34, 36, 38, 0.85);
-  color: #FFFFFF;
+  color: #fff;
 }
 
 
@@ -398,10 +372,9 @@ body.pushable > .pusher {
 *******************************/
 
 
-/*--------------
+/* --------------
      Width
----------------*/
-
+--------------- */
 
 /* Left / Right */
 .ui.left.flyout,
@@ -428,45 +401,37 @@ body.pushable > .pusher {
 /* Left Visible */
 .ui.visible.thin.left.flyout ~ .fixed,
 .ui.visible.thin.left.flyout ~ .pusher {
-  -webkit-transform: translate3d(200px, 0, 0);
-          transform: translate3d(200px, 0, 0);
+  transform: translate3d(200px, 0, 0);
 }
 .ui.visible[class*="very thin"].left.flyout ~ .fixed,
 .ui.visible[class*="very thin"].left.flyout ~ .pusher {
-  -webkit-transform: translate3d(120px, 0, 0);
-          transform: translate3d(120px, 0, 0);
+  transform: translate3d(120px, 0, 0);
 }
 .ui.visible.wide.left.flyout ~ .fixed,
 .ui.visible.wide.left.flyout ~ .pusher {
-  -webkit-transform: translate3d(600px, 0, 0);
-          transform: translate3d(600px, 0, 0);
+  transform: translate3d(600px, 0, 0);
 }
 .ui.visible[class*="very wide"].left.flyout ~ .fixed,
 .ui.visible[class*="very wide"].left.flyout ~ .pusher {
-  -webkit-transform: translate3d(800px, 0, 0);
-          transform: translate3d(800px, 0, 0);
+  transform: translate3d(800px, 0, 0);
 }
 
 /* Right Visible */
 .ui.visible.thin.right.flyout ~ .fixed,
 .ui.visible.thin.right.flyout ~ .pusher {
-  -webkit-transform: translate3d(-200px, 0, 0);
-          transform: translate3d(-200px, 0, 0);
+  transform: translate3d(-200px, 0, 0);
 }
 .ui.visible[class*="very thin"].right.flyout ~ .fixed,
 .ui.visible[class*="very thin"].right.flyout ~ .pusher {
-  -webkit-transform: translate3d(-120px, 0, 0);
-          transform: translate3d(-120px, 0, 0);
+  transform: translate3d(-120px, 0, 0);
 }
 .ui.visible.wide.right.flyout ~ .fixed,
 .ui.visible.wide.right.flyout ~ .pusher {
-  -webkit-transform: translate3d(-600px, 0, 0);
-          transform: translate3d(-600px, 0, 0);
+  transform: translate3d(-600px, 0, 0);
 }
 .ui.visible[class*="very wide"].right.flyout ~ .fixed,
 .ui.visible[class*="very wide"].right.flyout ~ .pusher {
-  -webkit-transform: translate3d(-800px, 0, 0);
-          transform: translate3d(-800px, 0, 0);
+  transform: translate3d(-800px, 0, 0);
 }
 
 /* Fullscreen */
@@ -474,10 +439,9 @@ body.pushable > .pusher {
   width: 100%;
 }
 
-/*-------------------
-    Column Width
-  --------------------*/
-
+/* -------------------
+      Column Width
+    -------------------- */
 
 /* Sizing Combinations */
 .ui[class*="one wide"].flyout:not(.fullscreen) {
@@ -535,10 +499,9 @@ body.pushable > .pusher {
 *******************************/
 
 
-/*--------------
-      Overlay
-  ---------------*/
-
+/* --------------
+        Overlay
+    --------------- */
 
 /* Set-up */
 .ui.overlay.flyout {
@@ -547,42 +510,33 @@ body.pushable > .pusher {
 
 /* Initial */
 .ui.left.overlay.flyout {
-  -webkit-transform: translate3d(-100%, 0, 0);
-          transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
 }
 .ui.right.overlay.flyout {
-  -webkit-transform: translate3d(100%, 0, 0);
-          transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
 }
 .ui.top.overlay.flyout {
-  -webkit-transform: translate3d(0%, -100%, 0);
-          transform: translate3d(0%, -100%, 0);
+  transform: translate3d(0, -100%, 0);
 }
 .ui.bottom.overlay.flyout {
-  -webkit-transform: translate3d(0%, 100%, 0);
-          transform: translate3d(0%, 100%, 0);
+  transform: translate3d(0, 100%, 0);
 }
 
 /* Animation */
 .animating.ui.overlay.flyout,
 .ui.visible.overlay.flyout {
-  -webkit-transition: -webkit-transform 500ms ease;
-  transition: -webkit-transform 500ms ease;
   transition: transform 500ms ease;
-  transition: transform 500ms ease, -webkit-transform 500ms ease;
 }
 
 /* End - flyout */
 .ui.visible.overlay.flyout {
-  -webkit-transform: translate3d(0%, 0, 0);
-          transform: translate3d(0%, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /* End - Pusher */
 .ui.visible.overlay.flyout ~ .fixed,
 .ui.visible.overlay.flyout ~ .pusher {
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }