github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/reveal.css (about)

     1  /*!
     2   * # Semantic UI x.x - Reveal
     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  /*******************************
    14              Reveal
    15  *******************************/
    16  
    17  .ui.reveal {
    18    display: inline-block;
    19    position: relative !important;
    20    font-size: 0em !important;
    21  }
    22  .ui.reveal > .visible.content {
    23    position: absolute !important;
    24    top: 0em !important;
    25    left: 0em !important;
    26    z-index: 3 !important;
    27    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
    28            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
    29  }
    30  .ui.reveal > .hidden.content {
    31    position: relative !important;
    32    z-index: 2 !important;
    33  }
    34  
    35  /* Make sure hovered element is on top of other reveal */
    36  .ui.reveal:hover .visible.content {
    37    z-index: 4 !important;
    38  }
    39  
    40  
    41  /*******************************
    42                Types
    43  *******************************/
    44  
    45  
    46  /*--------------
    47        Slide
    48  ---------------*/
    49  
    50  .ui.slide.reveal {
    51    position: relative !important;
    52    overflow: hidden !important;
    53    white-space: nowrap;
    54  }
    55  .ui.slide.reveal > .content {
    56    display: block;
    57    float: left;
    58    margin: 0em;
    59    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
    60            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
    61  }
    62  .ui.slide.reveal > .visible.content {
    63    position: relative !important;
    64  }
    65  .ui.slide.reveal > .hidden.content {
    66    position: absolute !important;
    67    left: 0% !important;
    68    width: 100% !important;
    69    -webkit-transform: translateX(100%) !important;
    70        -ms-transform: translateX(100%) !important;
    71            transform: translateX(100%) !important;
    72  }
    73  .ui.slide.reveal:hover > .visible.content {
    74    -webkit-transform: translateX(-100%) !important;
    75        -ms-transform: translateX(-100%) !important;
    76            transform: translateX(-100%) !important;
    77  }
    78  .ui.slide.reveal:hover > .hidden.content {
    79    -webkit-transform: translateX(0%) !important;
    80        -ms-transform: translateX(0%) !important;
    81            transform: translateX(0%) !important;
    82  }
    83  .ui.slide.right.reveal > .visible.content {
    84    -webkit-transform: translateX(0%) !important;
    85        -ms-transform: translateX(0%) !important;
    86            transform: translateX(0%) !important;
    87  }
    88  .ui.slide.right.reveal > .hidden.content {
    89    -webkit-transform: translateX(-100%) !important;
    90        -ms-transform: translateX(-100%) !important;
    91            transform: translateX(-100%) !important;
    92  }
    93  .ui.slide.right.reveal:hover > .visible.content {
    94    -webkit-transform: translateX(100%) !important;
    95        -ms-transform: translateX(100%) !important;
    96            transform: translateX(100%) !important;
    97  }
    98  .ui.slide.right.reveal:hover > .hidden.content {
    99    -webkit-transform: translateX(0%) !important;
   100        -ms-transform: translateX(0%) !important;
   101            transform: translateX(0%) !important;
   102  }
   103  .ui.slide.up.reveal > .hidden.content {
   104    -webkit-transform: translateY(100%) !important;
   105        -ms-transform: translateY(100%) !important;
   106            transform: translateY(100%) !important;
   107  }
   108  .ui.slide.up.reveal:hover > .visible.content {
   109    -webkit-transform: translateY(-100%) !important;
   110        -ms-transform: translateY(-100%) !important;
   111            transform: translateY(-100%) !important;
   112  }
   113  .ui.slide.up.reveal:hover > .hidden.content {
   114    -webkit-transform: translateY(0%) !important;
   115        -ms-transform: translateY(0%) !important;
   116            transform: translateY(0%) !important;
   117  }
   118  .ui.slide.down.reveal > .hidden.content {
   119    -webkit-transform: translateY(-100%) !important;
   120        -ms-transform: translateY(-100%) !important;
   121            transform: translateY(-100%) !important;
   122  }
   123  .ui.slide.down.reveal:hover > .visible.content {
   124    -webkit-transform: translateY(100%) !important;
   125        -ms-transform: translateY(100%) !important;
   126            transform: translateY(100%) !important;
   127  }
   128  .ui.slide.down.reveal:hover > .hidden.content {
   129    -webkit-transform: translateY(0%) !important;
   130        -ms-transform: translateY(0%) !important;
   131            transform: translateY(0%) !important;
   132  }
   133  
   134  /*--------------
   135        Fade
   136  ---------------*/
   137  
   138  .ui.fade.reveal > .visible.content {
   139    opacity: 1;
   140  }
   141  .ui.fade.reveal:hover > .visible.content {
   142    opacity: 0;
   143  }
   144  
   145  /*--------------
   146        Move
   147  ---------------*/
   148  
   149  .ui.move.reveal {
   150    position: relative !important;
   151    overflow: hidden !important;
   152    white-space: nowrap;
   153  }
   154  .ui.move.reveal > .content {
   155    display: block;
   156    float: left;
   157    margin: 0em;
   158    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
   159            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
   160  }
   161  .ui.move.reveal > .visible.content {
   162    position: relative !important;
   163  }
   164  .ui.move.reveal > .hidden.content {
   165    position: absolute !important;
   166    left: 0% !important;
   167    width: 100% !important;
   168  }
   169  .ui.move.reveal:hover > .visible.content {
   170    -webkit-transform: translateX(-100%) !important;
   171        -ms-transform: translateX(-100%) !important;
   172            transform: translateX(-100%) !important;
   173  }
   174  .ui.move.right.reveal:hover > .visible.content {
   175    -webkit-transform: translateX(100%) !important;
   176        -ms-transform: translateX(100%) !important;
   177            transform: translateX(100%) !important;
   178  }
   179  .ui.move.up.reveal:hover > .visible.content {
   180    -webkit-transform: translateY(-100%) !important;
   181        -ms-transform: translateY(-100%) !important;
   182            transform: translateY(-100%) !important;
   183  }
   184  .ui.move.down.reveal:hover > .visible.content {
   185    -webkit-transform: translateY(100%) !important;
   186        -ms-transform: translateY(100%) !important;
   187            transform: translateY(100%) !important;
   188  }
   189  
   190  /*--------------
   191       Rotate
   192  ---------------*/
   193  
   194  .ui.rotate.reveal > .visible.content {
   195    -webkit-transition-duration: 0.8s;
   196            transition-duration: 0.8s;
   197    -webkit-transform: rotate(0deg);
   198        -ms-transform: rotate(0deg);
   199            transform: rotate(0deg);
   200  }
   201  .ui.rotate.reveal > .visible.content,
   202  .ui.rotate.right.reveal > .visible.content {
   203    -webkit-transform-origin: bottom right;
   204        -ms-transform-origin: bottom right;
   205            transform-origin: bottom right;
   206  }
   207  .ui.rotate.reveal:hover > .visible.content,
   208  .ui.rotate.right.reveal:hover > .visible.content {
   209    -webkit-transform: rotate(110deg);
   210        -ms-transform: rotate(110deg);
   211            transform: rotate(110deg);
   212  }
   213  .ui.rotate.left.reveal > .visible.content {
   214    -webkit-transform-origin: bottom left;
   215        -ms-transform-origin: bottom left;
   216            transform-origin: bottom left;
   217  }
   218  .ui.rotate.left.reveal:hover > .visible.content {
   219    -webkit-transform: rotate(-110deg);
   220        -ms-transform: rotate(-110deg);
   221            transform: rotate(-110deg);
   222  }
   223  
   224  
   225  /*******************************
   226                States
   227  *******************************/
   228  
   229  .ui.disabled.reveal {
   230    opacity: 1 !important;
   231  }
   232  .ui.disabled.reveal > .content {
   233    -webkit-transition: none !important;
   234            transition: none !important;
   235  }
   236  .ui.disabled.reveal:hover > .visible.content {
   237    position: static !important;
   238    display: block !important;
   239    opacity: 1 !important;
   240    top: 0 !important;
   241    left: 0 !important;
   242    right: auto !important;
   243    bottom: auto !important;
   244    -webkit-transform: none !important;
   245        -ms-transform: none !important;
   246            transform: none !important;
   247  }
   248  .ui.disabled.reveal:hover > .hidden.content {
   249    display: none !important;
   250  }
   251  
   252  
   253  /*******************************
   254             Variations
   255  *******************************/
   256  
   257  
   258  /*--------------
   259       Masked
   260  ---------------*/
   261  
   262  .ui.masked.reveal {
   263    overflow: hidden;
   264  }
   265  
   266  /*--------------
   267       Instant
   268  ---------------*/
   269  
   270  .ui.instant.reveal > .content {
   271    -webkit-transition-delay: 0s !important;
   272            transition-delay: 0s !important;
   273  }
   274  
   275  /*--------------
   276       Sizing
   277  ---------------*/
   278  
   279  .ui.reveal > .content {
   280    font-size: 1rem !important;
   281  }
   282  
   283  
   284  /*******************************
   285           Theme Overrides
   286  *******************************/
   287  
   288  
   289  
   290  /*******************************
   291           Site Overrides
   292  *******************************/
   293