/*

* # Semantic - Dimmer
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘module’; @element : ‘dimmer’;

@import ‘../../theme.config’;

/*******************************

Dimmer

*******************************/

.dimmable {

position: @dimmablePosition;

}

.ui.dimmer {

display: none;
position: @dimmerPosition;
top: 0em !important;
left: 0em !important;

width: 100%;
height: 100%;

text-align: @textAlign;
vertical-align: @verticalAlign;

background: @background;
opacity: @hiddenOpacity;
line-height: @lineHeight;

animation-fill-mode: both;
animation-duration: @duration;
transition: @transition;

user-select: none;
will-change: opacity;
z-index: @zIndex;

}

/* Dimmer Content */ .ui.dimmer > .content {

width: 100%;
height: 100%;
display: @contentDisplay;
user-select: text;

} .ui.dimmer > .content > div {

display: @contentChildDisplay;
vertical-align: @verticalAlign;
color: @textColor;

}

/* Loose Coupling */ .ui.segment > .ui.dimmer {

border-radius: inherit !important;

}

/*******************************

States

*******************************/

.animating.dimmable:not(body), .dimmed.dimmable:not(body) {

overflow: @overflow;

}

.dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer {

display: block;
opacity: @visibleOpacity;

}

.ui.disabled.dimmer {

width: 0 !important;
height: 0 !important;

}

/*******************************

Variations

*******************************/

/*————–

Page

—————*/

.ui.page.dimmer {

position: @pageDimmerPosition;
transform-style: @transformStyle;
perspective: @perspective;
transform-origin: center center;

}

body.animating.in.dimmable, body.dimmed.dimmable {

overflow: hidden;

} body.dimmable > .dimmer {

position: fixed;

}

/* body.dimmable > :not(.dimmer) {

filter: @elementStartFilter;

} body.dimmed.dimmable > :not(.dimmer) {

filter: @elementEndFilter;
transition: @elementTransition;

} */

/*————–

Aligned

—————*/

.ui.dimmer > .top.aligned.content > * {

vertical-align: top;

} .ui.dimmer > .bottom.aligned.content > * {

vertical-align: bottom;

}

/*————–

Inverted

—————*/

.ui.inverted.dimmer {

background: @invertedBackground;

} .ui.inverted.dimmer > .content > * {

color: @textColor;

}

/*————–

Simple

—————*/

/* Displays without javascript */ .ui.simple.dimmer {

display: block;
overflow: hidden;
opacity: 1;
width: 0%;
height: 0%;
z-index: -100;
background-color: @simpleStartBackground;

} .dimmed.dimmable > .ui.simple.dimmer {

overflow: visible;
opacity: 1;
width: 100%;
height: 100%;
background: @simpleEndBackground;
z-index: @simpleZIndex;

}

.ui.simple.inverted.dimmer {

background: @simpleInvertedStartBackground;

} .dimmed.dimmable > .ui.simple.inverted.dimmer {

background: @simpleInvertedEndBackground;

}

.loadUIOverrides();