github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/dimmer.less (about)

     1  /*!
     2   * # Semantic UI - Dimmer
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  /*******************************
    13              Theme
    14  *******************************/
    15  
    16  @type    : 'module';
    17  @element : 'dimmer';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22              Dimmer
    23  *******************************/
    24  
    25  .dimmable {
    26    position: @dimmablePosition;
    27  }
    28  
    29  .ui.dimmer {
    30    display: none;
    31    position: @dimmerPosition;
    32    top: 0em !important;
    33    left: 0em !important;
    34  
    35    width: 100%;
    36    height: 100%;
    37  
    38    text-align: @textAlign;
    39    vertical-align: @verticalAlign;
    40  
    41    background: @background;
    42    opacity: @hiddenOpacity;
    43    line-height: @lineHeight;
    44  
    45    animation-fill-mode: both;
    46    animation-duration: @duration;
    47    transition: @transition;
    48  
    49    user-select: none;
    50    will-change: opacity;
    51    z-index: @zIndex;
    52  }
    53  
    54  /* Dimmer Content */
    55  .ui.dimmer > .content {
    56    width: 100%;
    57    height: 100%;
    58    display: @contentDisplay;
    59    user-select: text;
    60  }
    61  .ui.dimmer > .content > div {
    62    display: @contentChildDisplay;
    63    vertical-align: @verticalAlign;
    64    color: @textColor;
    65  }
    66  
    67  
    68  /* Loose Coupling */
    69  .ui.segment > .ui.dimmer {
    70    border-radius: inherit !important;
    71  }
    72  
    73  /*******************************
    74              States
    75  *******************************/
    76  
    77  .animating.dimmable:not(body),
    78  .dimmed.dimmable:not(body) {
    79    overflow: @overflow;
    80  }
    81  
    82  .dimmed.dimmable > .ui.animating.dimmer,
    83  .dimmed.dimmable > .ui.visible.dimmer,
    84  .ui.active.dimmer {
    85    display: block;
    86    opacity: @visibleOpacity;
    87  }
    88  
    89  .ui.disabled.dimmer {
    90    width: 0 !important;
    91    height: 0 !important;
    92  }
    93  
    94  /*******************************
    95             Variations
    96  *******************************/
    97  
    98  /*--------------
    99        Page
   100  ---------------*/
   101  
   102  .ui.page.dimmer {
   103    position: @pageDimmerPosition;
   104    transform-style: @transformStyle;
   105    perspective: @perspective;
   106    transform-origin: center center;
   107  }
   108  
   109  body.animating.in.dimmable,
   110  body.dimmed.dimmable {
   111    overflow: hidden;
   112  }
   113  body.dimmable > .dimmer {
   114    position: fixed;
   115  }
   116  
   117  /*
   118  body.dimmable > :not(.dimmer) {
   119    filter: @elementStartFilter;
   120  }
   121  body.dimmed.dimmable > :not(.dimmer) {
   122    filter: @elementEndFilter;
   123    transition: @elementTransition;
   124  }
   125  */
   126  
   127  /*--------------
   128      Aligned
   129  ---------------*/
   130  
   131  .ui.dimmer > .top.aligned.content > * {
   132    vertical-align: top;
   133  }
   134  .ui.dimmer > .bottom.aligned.content > * {
   135    vertical-align: bottom;
   136  }
   137  
   138  /*--------------
   139      Inverted
   140  ---------------*/
   141  
   142  .ui.inverted.dimmer {
   143    background: @invertedBackground;
   144  }
   145  .ui.inverted.dimmer > .content > * {
   146    color: @textColor;
   147  }
   148  
   149  /*--------------
   150       Simple
   151  ---------------*/
   152  
   153  /* Displays without javascript */
   154  .ui.simple.dimmer {
   155    display: block;
   156    overflow: hidden;
   157    opacity: 1;
   158    width: 0%;
   159    height: 0%;
   160    z-index: -100;
   161    background-color: @simpleStartBackground;
   162  }
   163  .dimmed.dimmable > .ui.simple.dimmer {
   164    overflow: visible;
   165    opacity: 1;
   166    width: 100%;
   167    height: 100%;
   168    background: @simpleEndBackground;
   169    z-index: @simpleZIndex;
   170  }
   171  
   172  .ui.simple.inverted.dimmer {
   173    background: @simpleInvertedStartBackground;
   174  }
   175  .dimmed.dimmable > .ui.simple.inverted.dimmer {
   176    background: @simpleInvertedEndBackground;
   177  }
   178  
   179  .loadUIOverrides();