552 lines
11 KiB
CSS
552 lines
11 KiB
CSS
/*!
|
|
* # Fomantic-UI 2.9.2 - Flyout
|
|
* https://github.com/fomantic/Fomantic-UI/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* https://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
|
|
/*******************************
|
|
Flyout
|
|
*******************************/
|
|
|
|
|
|
/* Flyout Menu */
|
|
.ui.flyout {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: none;
|
|
will-change: transform;
|
|
transform: translate3d(0, 0, 0);
|
|
visibility: hidden;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
overflow-y: hidden;
|
|
z-index: 102;
|
|
background: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
/* GPU Layers for Child Elements */
|
|
.ui.flyout > * {
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* --------------
|
|
Close
|
|
--------------- */
|
|
.ui.flyout > .close {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 1.25rem;
|
|
right: 1.5rem;
|
|
z-index: 1;
|
|
opacity: 0.8;
|
|
font-size: 1.25em;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
padding: 0;
|
|
margin: 0 0 0 0.25rem;
|
|
text-align: right;
|
|
}
|
|
.ui.flyout > .close:focus,
|
|
.ui.flyout > .close:hover {
|
|
opacity: 1;
|
|
outline: none;
|
|
}
|
|
|
|
/* --------------
|
|
Header
|
|
--------------- */
|
|
.ui.flyout > .header {
|
|
display: block;
|
|
background: #fff;
|
|
margin: 0;
|
|
padding: 1.25rem 1.5rem;
|
|
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: #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);
|
|
}
|
|
.ui.flyout.top > .scrolling.content,
|
|
.ui.flyout.bottom > .scrolling.content {
|
|
max-height: calc(80vh - 9.1rem);
|
|
}
|
|
|
|
/* --------------
|
|
Actions
|
|
--------------- */
|
|
.ui.flyout > .actions {
|
|
background: #f9fafb;
|
|
padding: 1rem;
|
|
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
|
text-align: right;
|
|
}
|
|
.ui.flyout .actions > .button:not(.fluid) {
|
|
margin-left: 0.75em;
|
|
}
|
|
.ui.ui.flyout > .basic.actions {
|
|
border-top: none;
|
|
}
|
|
.ui.flyout > .left.actions {
|
|
text-align: left;
|
|
}
|
|
.ui.flyout > .left.actions > .button:not(.fluid) {
|
|
margin-left: 0.5em;
|
|
margin-right: 0.5em;
|
|
}
|
|
.ui.flyout > .centered,
|
|
.ui.flyout > .center.aligned {
|
|
text-align: center;
|
|
}
|
|
.ui.flyout > .centered.actions > .button:not(.fluid),
|
|
.ui.flyout > .center.aligned.actions > .button:not(.fluid) {
|
|
margin-left: 0.5em;
|
|
margin-right: 0.5em;
|
|
}
|
|
.ui.ui.flyout > .basic.header,
|
|
.ui.ui.flyout > .basic.actions {
|
|
background-color: transparent;
|
|
}
|
|
.ui.flyout > .basic.header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* --------------
|
|
Direction
|
|
--------------- */
|
|
.ui.left.flyout {
|
|
right: auto;
|
|
left: 0;
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
.ui.right.flyout {
|
|
right: 0;
|
|
left: auto;
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
.ui.top.flyout,
|
|
.ui.bottom.flyout {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.ui.top.flyout {
|
|
top: 0;
|
|
bottom: auto;
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
.ui.bottom.flyout {
|
|
top: auto;
|
|
bottom: 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
/* --------------
|
|
Pushable
|
|
--------------- */
|
|
.pushable.pushable.pushable {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
}
|
|
.pushable.pushable.pushable.locked {
|
|
overflow-y: hidden;
|
|
background: inherit;
|
|
}
|
|
|
|
/* Whole Page */
|
|
body.pushable {
|
|
background: #545454;
|
|
}
|
|
body.pushable.dimmed {
|
|
background: inherit;
|
|
}
|
|
|
|
/* Page Context */
|
|
.pushable:not(body) {
|
|
transform: translate3d(0, 0, 0);
|
|
overflow-y: hidden;
|
|
}
|
|
.pushable:not(body) > .ui.flyout,
|
|
.pushable:not(body) > .fixed,
|
|
.pushable:not(body) > .pusher::after {
|
|
position: absolute;
|
|
}
|
|
|
|
/* --------------
|
|
Fixed
|
|
--------------- */
|
|
.pushable > .fixed {
|
|
position: fixed;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: transform 500ms ease;
|
|
will-change: transform;
|
|
z-index: 101;
|
|
}
|
|
|
|
/* --------------
|
|
Page
|
|
--------------- */
|
|
.pushable > .pusher {
|
|
position: relative;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
min-height: 100%;
|
|
transition: transform 500ms ease;
|
|
z-index: 2;
|
|
|
|
/* Pusher should inherit background from context */
|
|
background: inherit;
|
|
}
|
|
.pushable > .pusher:not(.overflowing) {
|
|
overflow: hidden;
|
|
}
|
|
body.pushable > .pusher {
|
|
background: #fff;
|
|
}
|
|
|
|
/* --------------
|
|
Dimmer
|
|
--------------- */
|
|
.pushable > .pusher::after {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
content: "";
|
|
background: rgba(0, 0, 0, 0.4);
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition: all 500ms;
|
|
will-change: opacity;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* --------------
|
|
Coupling
|
|
--------------- */
|
|
.ui.flyout.menu .item {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
States
|
|
*******************************/
|
|
|
|
|
|
/* --------------
|
|
Dimmed
|
|
--------------- */
|
|
.pushable > .pusher.dimmed::after {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.pushable > .pusher.dimmed.blurring:not(.closing)::after {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
-webkit-backdrop-filter: blur(5px) grayscale(0.7);
|
|
backdrop-filter: blur(5px) grayscale(0.7);
|
|
}
|
|
.pushable > .pusher.closing.dimmed::after {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* --------------
|
|
Animating
|
|
--------------- */
|
|
.ui.animating.flyout {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* --------------
|
|
Visible
|
|
--------------- */
|
|
.ui.visible.flyout {
|
|
visibility: visible;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
/* Shadow Direction */
|
|
.ui.left.visible.flyout,
|
|
.ui.right.visible.flyout {
|
|
box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
|
|
}
|
|
.ui.top.visible.flyout,
|
|
.ui.bottom.visible.flyout {
|
|
box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
|
|
}
|
|
|
|
/* Visible On Load */
|
|
.ui.visible.left.flyout ~ .fixed,
|
|
.ui.visible.left.flyout ~ .pusher {
|
|
transform: translate3d(400px, 0, 0);
|
|
}
|
|
.ui.visible.right.flyout ~ .fixed,
|
|
.ui.visible.right.flyout ~ .pusher {
|
|
transform: translate3d(-400px, 0, 0);
|
|
}
|
|
.ui.visible.top.flyout ~ .fixed,
|
|
.ui.visible.top.flyout ~ .pusher {
|
|
transform: translate3d(0, 36px, 0);
|
|
}
|
|
.ui.visible.bottom.flyout ~ .fixed,
|
|
.ui.visible.bottom.flyout ~ .pusher {
|
|
transform: translate3d(0, -36px, 0);
|
|
}
|
|
|
|
/* opposite sides visible forces content overlay */
|
|
.ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .fixed,
|
|
.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 {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
/* --------------
|
|
Inverted
|
|
--------------- */
|
|
.ui.flyout.inverted {
|
|
background: #000;
|
|
}
|
|
.ui.flyout.inverted > .close {
|
|
color: #fff;
|
|
}
|
|
.ui.flyout.inverted > .header,
|
|
.ui.flyout.inverted > .content {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
.ui.flyout.inverted > .actions {
|
|
background: #191a1b;
|
|
border-top: 1px solid rgba(34, 36, 38, 0.85);
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Variations
|
|
*******************************/
|
|
|
|
|
|
/* --------------
|
|
Width
|
|
--------------- */
|
|
|
|
/* Left / Right */
|
|
.ui.left.flyout,
|
|
.ui.right.flyout {
|
|
width: 400px;
|
|
}
|
|
.ui.thin.left.flyout,
|
|
.ui.thin.right.flyout {
|
|
width: 200px;
|
|
}
|
|
.ui[class*="very thin"].left.flyout,
|
|
.ui[class*="very thin"].right.flyout {
|
|
width: 120px;
|
|
}
|
|
.ui.wide.left.flyout,
|
|
.ui.wide.right.flyout {
|
|
width: 600px;
|
|
}
|
|
.ui[class*="very wide"].left.flyout,
|
|
.ui[class*="very wide"].right.flyout {
|
|
width: 800px;
|
|
}
|
|
|
|
/* Left Visible */
|
|
.ui.visible.thin.left.flyout ~ .fixed,
|
|
.ui.visible.thin.left.flyout ~ .pusher {
|
|
transform: translate3d(200px, 0, 0);
|
|
}
|
|
.ui.visible[class*="very thin"].left.flyout ~ .fixed,
|
|
.ui.visible[class*="very thin"].left.flyout ~ .pusher {
|
|
transform: translate3d(120px, 0, 0);
|
|
}
|
|
.ui.visible.wide.left.flyout ~ .fixed,
|
|
.ui.visible.wide.left.flyout ~ .pusher {
|
|
transform: translate3d(600px, 0, 0);
|
|
}
|
|
.ui.visible[class*="very wide"].left.flyout ~ .fixed,
|
|
.ui.visible[class*="very wide"].left.flyout ~ .pusher {
|
|
transform: translate3d(800px, 0, 0);
|
|
}
|
|
|
|
/* Right Visible */
|
|
.ui.visible.thin.right.flyout ~ .fixed,
|
|
.ui.visible.thin.right.flyout ~ .pusher {
|
|
transform: translate3d(-200px, 0, 0);
|
|
}
|
|
.ui.visible[class*="very thin"].right.flyout ~ .fixed,
|
|
.ui.visible[class*="very thin"].right.flyout ~ .pusher {
|
|
transform: translate3d(-120px, 0, 0);
|
|
}
|
|
.ui.visible.wide.right.flyout ~ .fixed,
|
|
.ui.visible.wide.right.flyout ~ .pusher {
|
|
transform: translate3d(-600px, 0, 0);
|
|
}
|
|
.ui.visible[class*="very wide"].right.flyout ~ .fixed,
|
|
.ui.visible[class*="very wide"].right.flyout ~ .pusher {
|
|
transform: translate3d(-800px, 0, 0);
|
|
}
|
|
|
|
/* Fullscreen */
|
|
.ui.fullscreen.flyout {
|
|
width: 100%;
|
|
}
|
|
|
|
/* -------------------
|
|
Column Width
|
|
-------------------- */
|
|
|
|
/* Sizing Combinations */
|
|
.ui[class*="one wide"].flyout:not(.fullscreen) {
|
|
width: 6.25%;
|
|
}
|
|
.ui[class*="two wide"].flyout:not(.fullscreen) {
|
|
width: 12.5%;
|
|
}
|
|
.ui[class*="three wide"].flyout:not(.fullscreen) {
|
|
width: 18.75%;
|
|
}
|
|
.ui[class*="four wide"].flyout:not(.fullscreen) {
|
|
width: 25%;
|
|
}
|
|
.ui[class*="five wide"].flyout:not(.fullscreen) {
|
|
width: 31.25%;
|
|
}
|
|
.ui[class*="six wide"].flyout:not(.fullscreen) {
|
|
width: 37.5%;
|
|
}
|
|
.ui[class*="seven wide"].flyout:not(.fullscreen) {
|
|
width: 43.75%;
|
|
}
|
|
.ui[class*="eight wide"].flyout:not(.fullscreen) {
|
|
width: 50%;
|
|
}
|
|
.ui[class*="nine wide"].flyout:not(.fullscreen) {
|
|
width: 56.25%;
|
|
}
|
|
.ui[class*="ten wide"].flyout:not(.fullscreen) {
|
|
width: 62.5%;
|
|
}
|
|
.ui[class*="eleven wide"].flyout:not(.fullscreen) {
|
|
width: 68.75%;
|
|
}
|
|
.ui[class*="twelve wide"].flyout:not(.fullscreen) {
|
|
width: 75%;
|
|
}
|
|
.ui[class*="thirteen wide"].flyout:not(.fullscreen) {
|
|
width: 81.25%;
|
|
}
|
|
.ui[class*="fourteen wide"].flyout:not(.fullscreen) {
|
|
width: 87.5%;
|
|
}
|
|
.ui[class*="fifteen wide"].flyout:not(.fullscreen) {
|
|
width: 93.75%;
|
|
}
|
|
.ui[class*="sixteen wide"].flyout:not(.fullscreen) {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Animations
|
|
*******************************/
|
|
|
|
|
|
/* --------------
|
|
Overlay
|
|
--------------- */
|
|
|
|
/* Set-up */
|
|
.ui.overlay.flyout {
|
|
z-index: 102;
|
|
}
|
|
|
|
/* Initial */
|
|
.ui.left.overlay.flyout {
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
.ui.right.overlay.flyout {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
.ui.top.overlay.flyout {
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
.ui.bottom.overlay.flyout {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
/* Animation */
|
|
.animating.ui.overlay.flyout,
|
|
.ui.visible.overlay.flyout {
|
|
transition: transform 500ms ease;
|
|
}
|
|
|
|
/* End - flyout */
|
|
.ui.visible.overlay.flyout {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
/* End - Pusher */
|
|
.ui.visible.overlay.flyout ~ .fixed,
|
|
.ui.visible.overlay.flyout ~ .pusher {
|
|
transform: none !important;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Theme Overrides
|
|
*******************************/
|
|
|
|
|
|
|
|
/*******************************
|
|
User Overrides
|
|
*******************************/
|
|
|