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

     1  /*!
     2   * # Semantic UI x.x - Sidebar
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Sidebar
    15  *******************************/
    16  
    17  
    18  /* Sidebar Menu */
    19  .ui.sidebar {
    20    position: fixed;
    21    top: 0;
    22    left: 0;
    23    -webkit-backface-visibility: hidden;
    24            backface-visibility: hidden;
    25    -webkit-transition: none;
    26            transition: none;
    27    will-change: transform;
    28    -webkit-transform: translate3d(0, 0, 0);
    29            transform: translate3d(0, 0, 0);
    30    visibility: hidden;
    31    -webkit-overflow-scrolling: touch;
    32    height: 100% !important;
    33    border-radius: 0em !important;
    34    margin: 0em !important;
    35    overflow-y: auto !important;
    36    z-index: 102;
    37  }
    38  
    39  /* GPU Layers for Child Elements */
    40  .ui.sidebar > * {
    41    -webkit-backface-visibility: hidden;
    42            backface-visibility: hidden;
    43    -webkit-transform: rotateZ(0deg);
    44            transform: rotateZ(0deg);
    45  }
    46  
    47  /*--------------
    48     Direction
    49  ---------------*/
    50  
    51  .ui.left.sidebar {
    52    right: auto;
    53    left: 0px;
    54    -webkit-transform: translate3d(-100%, 0, 0);
    55            transform: translate3d(-100%, 0, 0);
    56  }
    57  .ui.right.sidebar {
    58    right: 0px !important;
    59    left: auto !important;
    60    -webkit-transform: translate3d(100%, 0%, 0);
    61            transform: translate3d(100%, 0%, 0);
    62  }
    63  .ui.top.sidebar,
    64  .ui.bottom.sidebar {
    65    width: 100% !important;
    66    height: auto !important;
    67    overflow-y: visible !important;
    68  }
    69  .ui.top.sidebar {
    70    top: 0px !important;
    71    bottom: auto !important;
    72    -webkit-transform: translate3d(0, -100%, 0);
    73            transform: translate3d(0, -100%, 0);
    74  }
    75  .ui.bottom.sidebar {
    76    top: auto !important;
    77    bottom: 0px !important;
    78    -webkit-transform: translate3d(0, 100%, 0);
    79            transform: translate3d(0, 100%, 0);
    80  }
    81  
    82  /*--------------
    83       Pushable
    84  ---------------*/
    85  
    86  .pushable {
    87    height: 100%;
    88    overflow-x: hidden;
    89    padding: 0em !important;
    90  }
    91  
    92  /* Whole Page */
    93  body.pushable {
    94    background: #333333 !important;
    95  }
    96  
    97  /* Page Context */
    98  .pushable:not(body) {
    99    -webkit-transform: translate3d(0, 0, 0);
   100            transform: translate3d(0, 0, 0);
   101  }
   102  .pushable:not(body) > .ui.sidebar,
   103  .pushable:not(body) > .fixed,
   104  .pushable:not(body) > .pusher:after {
   105    position: absolute;
   106  }
   107  
   108  /*--------------
   109       Fixed
   110  ---------------*/
   111  
   112  .pushable > .fixed {
   113    position: fixed;
   114    -webkit-backface-visibility: hidden;
   115            backface-visibility: hidden;
   116    -webkit-transition: -webkit-transform 500ms ease;
   117            transition: transform 500ms ease;
   118    will-change: transform;
   119    z-index: 101;
   120  }
   121  
   122  /*--------------
   123       Page
   124  ---------------*/
   125  
   126  .pushable > .pusher {
   127    position: relative;
   128    -webkit-backface-visibility: hidden;
   129            backface-visibility: hidden;
   130    overflow: hidden;
   131    min-height: 100%;
   132    -webkit-transition: -webkit-transform 500ms ease;
   133            transition: transform 500ms ease;
   134    z-index: 2;
   135  }
   136  body.pushable > .pusher {
   137    background: #f7f7f7;
   138  }
   139  .pushable > .pusher {
   140    background: inherit;
   141  }
   142  
   143  /*--------------
   144       Dimmer
   145  ---------------*/
   146  
   147  .pushable > .pusher:after {
   148    position: fixed;
   149    top: 0px;
   150    right: 0px;
   151    content: '';
   152    background-color: rgba(0, 0, 0, 0.4);
   153    width: 0px;
   154    height: 0px;
   155    overflow: hidden;
   156    opacity: 0;
   157    -webkit-transition: -webkit-transform 500ms, opacity 500ms;
   158            transition: transform 500ms, opacity 500ms;
   159    will-change: opacity;
   160    z-index: 1000;
   161  }
   162  
   163  /*--------------
   164      Coupling
   165  ---------------*/
   166  
   167  .ui.sidebar.menu .item {
   168    border-radius: 0em !important;
   169  }
   170  
   171  
   172  /*******************************
   173              States
   174  *******************************/
   175  
   176  
   177  /*--------------
   178       Dimmed
   179  ---------------*/
   180  
   181  .pushable > .pusher.dimmed:after {
   182    width: 100% !important;
   183    height: 100% !important;
   184    opacity: 1 !important;
   185  }
   186  
   187  /*--------------
   188      Animating
   189  ---------------*/
   190  
   191  .ui.animating.sidebar {
   192    visibility: visible;
   193  }
   194  
   195  /*--------------
   196       Visible
   197  ---------------*/
   198  
   199  .ui.visible.sidebar {
   200    visibility: visible;
   201    -webkit-transform: translate3d(0, 0, 0);
   202            transform: translate3d(0, 0, 0);
   203  }
   204  
   205  /* Shadow Direction */
   206  .ui.left.visible.sidebar,
   207  .ui.right.visible.sidebar {
   208    box-shadow: 0px 0px 20px rgba(39, 41, 43, 0.15);
   209  }
   210  .ui.top.visible.sidebar,
   211  .ui.bottom.visible.sidebar {
   212    box-shadow: 0px 0px 20px rgba(39, 41, 43, 0.15);
   213  }
   214  
   215  /* Visible On Load */
   216  .ui.visible.left.sidebar ~ .fixed,
   217  .ui.visible.left.sidebar ~ .pusher {
   218    -webkit-transform: translate3d(260px, 0, 0);
   219            transform: translate3d(260px, 0, 0);
   220  }
   221  .ui.visible.right.sidebar ~ .fixed,
   222  .ui.visible.right.sidebar ~ .pusher {
   223    -webkit-transform: translate3d(-260px, 0, 0);
   224            transform: translate3d(-260px, 0, 0);
   225  }
   226  .ui.visible.top.sidebar ~ .fixed,
   227  .ui.visible.top.sidebar ~ .pusher {
   228    -webkit-transform: translate3d(0, 36px, 0);
   229            transform: translate3d(0, 36px, 0);
   230  }
   231  .ui.visible.bottom.sidebar ~ .fixed,
   232  .ui.visible.bottom.sidebar ~ .pusher {
   233    -webkit-transform: translate3d(0, -36px, 0);
   234            transform: translate3d(0, -36px, 0);
   235  }
   236  
   237  /* opposite sides visible forces content overlay */
   238  .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,
   239  .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,
   240  .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,
   241  .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {
   242    -webkit-transform: translate3d(0, 0, 0);
   243            transform: translate3d(0, 0, 0);
   244  }
   245  
   246  /*--------------
   247         iOS
   248  ---------------*/
   249  
   250  /*
   251    iOS incorrectly sizes document when content
   252    is presented outside of view with 2Dtranslate
   253  */
   254  html.ios {
   255    overflow-x: hidden;
   256    -webkit-overflow-scrolling: touch;
   257  }
   258  
   259  
   260  /*******************************
   261            Variations
   262  *******************************/
   263  
   264  
   265  /*--------------
   266       Width
   267  ---------------*/
   268  
   269  
   270  /* Left / Right */
   271  .ui[class*="very thin"].left.sidebar,
   272  .ui[class*="very thin"].right.sidebar {
   273    width: 60px;
   274  }
   275  .ui.thin.left.sidebar,
   276  .ui.thin.right.sidebar {
   277    width: 150px;
   278  }
   279  .ui.left.sidebar,
   280  .ui.right.sidebar {
   281    width: 260px;
   282  }
   283  .ui.wide.left.sidebar,
   284  .ui.wide.right.sidebar {
   285    width: 350px;
   286  }
   287  .ui[class*="very wide"].left.sidebar,
   288  .ui[class*="very wide"].right.sidebar {
   289    width: 475px;
   290  }
   291  
   292  /* Left Visible */
   293  .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
   294  .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
   295    -webkit-transform: translate3d(60px, 0, 0);
   296            transform: translate3d(60px, 0, 0);
   297  }
   298  .ui.visible.thin.left.sidebar ~ .fixed,
   299  .ui.visible.thin.left.sidebar ~ .pusher {
   300    -webkit-transform: translate3d(150px, 0, 0);
   301            transform: translate3d(150px, 0, 0);
   302  }
   303  .ui.visible.wide.left.sidebar ~ .fixed,
   304  .ui.visible.wide.left.sidebar ~ .pusher {
   305    -webkit-transform: translate3d(350px, 0, 0);
   306            transform: translate3d(350px, 0, 0);
   307  }
   308  .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
   309  .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
   310    -webkit-transform: translate3d(475px, 0, 0);
   311            transform: translate3d(475px, 0, 0);
   312  }
   313  
   314  /* Right Visible */
   315  .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
   316  .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
   317    -webkit-transform: translate3d(-60px, 0, 0);
   318            transform: translate3d(-60px, 0, 0);
   319  }
   320  .ui.visible.thin.right.sidebar ~ .fixed,
   321  .ui.visible.thin.right.sidebar ~ .pusher {
   322    -webkit-transform: translate3d(-150px, 0, 0);
   323            transform: translate3d(-150px, 0, 0);
   324  }
   325  .ui.visible.wide.right.sidebar ~ .fixed,
   326  .ui.visible.wide.right.sidebar ~ .pusher {
   327    -webkit-transform: translate3d(-350px, 0, 0);
   328            transform: translate3d(-350px, 0, 0);
   329  }
   330  .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
   331  .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
   332    -webkit-transform: translate3d(-475px, 0, 0);
   333            transform: translate3d(-475px, 0, 0);
   334  }
   335  
   336  
   337  /*******************************
   338            Animations
   339  *******************************/
   340  
   341  
   342  /*--------------
   343      Overlay
   344  ---------------*/
   345  
   346  
   347  /* Set-up */
   348  .ui.overlay.sidebar {
   349    z-index: 102;
   350  }
   351  
   352  /* Initial */
   353  .ui.left.overlay.sidebar {
   354    -webkit-transform: translate3d(-100%, 0%, 0);
   355            transform: translate3d(-100%, 0%, 0);
   356  }
   357  .ui.right.overlay.sidebar {
   358    -webkit-transform: translate3d(100%, 0%, 0);
   359            transform: translate3d(100%, 0%, 0);
   360  }
   361  .ui.top.overlay.sidebar {
   362    -webkit-transform: translate3d(0%, -100%, 0);
   363            transform: translate3d(0%, -100%, 0);
   364  }
   365  .ui.bottom.overlay.sidebar {
   366    -webkit-transform: translate3d(0%, 100%, 0);
   367            transform: translate3d(0%, 100%, 0);
   368  }
   369  
   370  /* Animation */
   371  .animating.ui.overlay.sidebar,
   372  .ui.visible.overlay.sidebar {
   373    -webkit-transition: -webkit-transform 500ms ease;
   374            transition: transform 500ms ease;
   375  }
   376  
   377  /* End - Sidebar */
   378  .ui.visible.left.overlay.sidebar {
   379    -webkit-transform: translate3d(0%, 0%, 0);
   380            transform: translate3d(0%, 0%, 0);
   381  }
   382  .ui.visible.right.overlay.sidebar {
   383    -webkit-transform: translate3d(0%, 0%, 0);
   384            transform: translate3d(0%, 0%, 0);
   385  }
   386  .ui.visible.top.overlay.sidebar {
   387    -webkit-transform: translate3d(0%, 0%, 0);
   388            transform: translate3d(0%, 0%, 0);
   389  }
   390  .ui.visible.bottom.overlay.sidebar {
   391    -webkit-transform: translate3d(0%, 0%, 0);
   392            transform: translate3d(0%, 0%, 0);
   393  }
   394  
   395  /* End - Pusher */
   396  .ui.visible.overlay.sidebar ~ .fixed,
   397  .ui.visible.overlay.sidebar ~ .pusher {
   398    -webkit-transform: none !important;
   399        -ms-transform: none !important;
   400            transform: none !important;
   401  }
   402  
   403  /*--------------
   404        Push
   405  ---------------*/
   406  
   407  
   408  /* Initial */
   409  .ui.push.sidebar {
   410    -webkit-transition: -webkit-transform 500ms ease;
   411            transition: transform 500ms ease;
   412    z-index: 102;
   413  }
   414  
   415  /* Sidebar - Initial */
   416  .ui.left.push.sidebar {
   417    -webkit-transform: translate3d(-100%, 0, 0);
   418            transform: translate3d(-100%, 0, 0);
   419  }
   420  .ui.right.push.sidebar {
   421    -webkit-transform: translate3d(100%, 0, 0);
   422            transform: translate3d(100%, 0, 0);
   423  }
   424  .ui.top.push.sidebar {
   425    -webkit-transform: translate3d(0%, -100%, 0);
   426            transform: translate3d(0%, -100%, 0);
   427  }
   428  .ui.bottom.push.sidebar {
   429    -webkit-transform: translate3d(0%, 100%, 0);
   430            transform: translate3d(0%, 100%, 0);
   431  }
   432  
   433  /* End */
   434  .ui.visible.push.sidebar {
   435    -webkit-transform: translate3d(0%, 0, 0);
   436            transform: translate3d(0%, 0, 0);
   437  }
   438  
   439  /*--------------
   440      Uncover
   441  ---------------*/
   442  
   443  
   444  /* Initial */
   445  .ui.uncover.sidebar {
   446    -webkit-transform: translate3d(0, 0, 0);
   447            transform: translate3d(0, 0, 0);
   448    z-index: 1;
   449  }
   450  
   451  /* End */
   452  .ui.visible.uncover.sidebar {
   453    -webkit-transform: translate3d(0, 0, 0);
   454            transform: translate3d(0, 0, 0);
   455    -webkit-transition: -webkit-transform 500ms ease;
   456            transition: transform 500ms ease;
   457  }
   458  
   459  /*--------------
   460     Slide Along
   461  ---------------*/
   462  
   463  
   464  /* Initial */
   465  .ui.slide.along.sidebar {
   466    z-index: 1;
   467  }
   468  
   469  /* Sidebar - Initial */
   470  .ui.left.slide.along.sidebar {
   471    -webkit-transform: translate3d(-50%, 0, 0);
   472            transform: translate3d(-50%, 0, 0);
   473  }
   474  .ui.right.slide.along.sidebar {
   475    -webkit-transform: translate3d(50%, 0, 0);
   476            transform: translate3d(50%, 0, 0);
   477  }
   478  .ui.top.slide.along.sidebar {
   479    -webkit-transform: translate3d(0, -50%, 0);
   480            transform: translate3d(0, -50%, 0);
   481  }
   482  .ui.bottom.slide.along.sidebar {
   483    -webkit-transform: translate3d(0%, 50%, 0);
   484            transform: translate3d(0%, 50%, 0);
   485  }
   486  
   487  /* Animation */
   488  .ui.animating.slide.along.sidebar {
   489    -webkit-transition: -webkit-transform 500ms ease;
   490            transition: transform 500ms ease;
   491  }
   492  
   493  /* End */
   494  .ui.visible.slide.along.sidebar {
   495    -webkit-transform: translate3d(0%, 0, 0);
   496            transform: translate3d(0%, 0, 0);
   497  }
   498  
   499  /*--------------
   500     Slide Out
   501  ---------------*/
   502  
   503  
   504  /* Initial */
   505  .ui.slide.out.sidebar {
   506    z-index: 1;
   507  }
   508  
   509  /* Sidebar - Initial */
   510  .ui.left.slide.out.sidebar {
   511    -webkit-transform: translate3d(50%, 0, 0);
   512            transform: translate3d(50%, 0, 0);
   513  }
   514  .ui.right.slide.out.sidebar {
   515    -webkit-transform: translate3d(-50%, 0, 0);
   516            transform: translate3d(-50%, 0, 0);
   517  }
   518  .ui.top.slide.out.sidebar {
   519    -webkit-transform: translate3d(0%, 50%, 0);
   520            transform: translate3d(0%, 50%, 0);
   521  }
   522  .ui.bottom.slide.out.sidebar {
   523    -webkit-transform: translate3d(0%, -50%, 0);
   524            transform: translate3d(0%, -50%, 0);
   525  }
   526  
   527  /* Animation */
   528  .ui.animating.slide.out.sidebar {
   529    -webkit-transition: -webkit-transform 500ms ease;
   530            transition: transform 500ms ease;
   531  }
   532  
   533  /* End */
   534  .ui.visible.slide.out.sidebar {
   535    -webkit-transform: translate3d(0%, 0, 0);
   536            transform: translate3d(0%, 0, 0);
   537  }
   538  
   539  /*--------------
   540     Scale Down
   541  ---------------*/
   542  
   543  
   544  /* Initial */
   545  .ui.scale.down.sidebar {
   546    -webkit-transition: -webkit-transform 500ms ease;
   547            transition: transform 500ms ease;
   548    z-index: 102;
   549  }
   550  
   551  /* Sidebar - Initial  */
   552  .ui.left.scale.down.sidebar {
   553    -webkit-transform: translate3d(-100%, 0, 0);
   554            transform: translate3d(-100%, 0, 0);
   555  }
   556  .ui.right.scale.down.sidebar {
   557    -webkit-transform: translate3d(100%, 0, 0);
   558            transform: translate3d(100%, 0, 0);
   559  }
   560  .ui.top.scale.down.sidebar {
   561    -webkit-transform: translate3d(0%, -100%, 0);
   562            transform: translate3d(0%, -100%, 0);
   563  }
   564  .ui.bottom.scale.down.sidebar {
   565    -webkit-transform: translate3d(0%, 100%, 0);
   566            transform: translate3d(0%, 100%, 0);
   567  }
   568  
   569  /* Pusher - Initial */
   570  .ui.scale.down.left.sidebar ~ .pusher {
   571    -webkit-transform-origin: 75% 50%;
   572        -ms-transform-origin: 75% 50%;
   573            transform-origin: 75% 50%;
   574  }
   575  .ui.scale.down.right.sidebar ~ .pusher {
   576    -webkit-transform-origin: 25% 50%;
   577        -ms-transform-origin: 25% 50%;
   578            transform-origin: 25% 50%;
   579  }
   580  .ui.scale.down.top.sidebar ~ .pusher {
   581    -webkit-transform-origin: 50% 75%;
   582        -ms-transform-origin: 50% 75%;
   583            transform-origin: 50% 75%;
   584  }
   585  .ui.scale.down.bottom.sidebar ~ .pusher {
   586    -webkit-transform-origin: 50% 25%;
   587        -ms-transform-origin: 50% 25%;
   588            transform-origin: 50% 25%;
   589  }
   590  
   591  /* Animation */
   592  .ui.animating.scale.down > .visible.ui.sidebar {
   593    -webkit-transition: -webkit-transform 500ms ease;
   594            transition: transform 500ms ease;
   595  }
   596  .ui.visible.scale.down.sidebar ~ .pusher,
   597  .ui.animating.scale.down.sidebar ~ .pusher {
   598    display: block !important;
   599    width: 100%;
   600    height: 100%;
   601    overflow: hidden;
   602  }
   603  
   604  /* End */
   605  .ui.visible.scale.down.sidebar {
   606    -webkit-transform: translate3d(0, 0, 0);
   607            transform: translate3d(0, 0, 0);
   608  }
   609  .ui.visible.scale.down.sidebar ~ .pusher {
   610    -webkit-transform: scale(0.75);
   611        -ms-transform: scale(0.75);
   612            transform: scale(0.75);
   613  }
   614  
   615  
   616  /*******************************
   617           Theme Overrides
   618  *******************************/
   619  
   620  
   621  
   622  /*******************************
   623           Site Overrides
   624  *******************************/
   625