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

     1  /*!
     2   * # Semantic UI x.x - Popup
     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              Popup
    15  *******************************/
    16  
    17  .ui.popup {
    18    display: none;
    19    position: absolute;
    20    top: 0px;
    21    right: 0px;
    22    
    23  /* Fixes content being squished when inline (moz only) */
    24    min-width: -moz-max-content;
    25    z-index: 1900;
    26    border: 1px solid #cccccc;
    27    max-width: 250px;
    28    background-color: #ffffff;
    29    padding: 0.833em 1em;
    30    font-weight: normal;
    31    font-style: normal;
    32    color: rgba(0, 0, 0, 0.8);
    33    border-radius: 0.2857rem;
    34    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    35  }
    36  .ui.popup > .header {
    37    padding: 0em;
    38    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    39    font-size: 1.125em;
    40    line-height: 1.2;
    41    font-weight: bold;
    42  }
    43  .ui.popup > .header + .content {
    44    padding-top: 0.5em;
    45  }
    46  .ui.popup:before {
    47    position: absolute;
    48    content: '';
    49    width: 0.75em;
    50    height: 0.75em;
    51    background: #ffffff;
    52    -webkit-transform: rotate(45deg);
    53        -ms-transform: rotate(45deg);
    54            transform: rotate(45deg);
    55    z-index: 2;
    56    box-shadow: 1px 1px 0px 0px #b3b3b3;
    57  }
    58  
    59  
    60  /*******************************
    61              Types
    62  *******************************/
    63  
    64  
    65  /*--------------
    66       Spacing
    67  ---------------*/
    68  
    69  .ui.popup {
    70    margin: 0em;
    71  }
    72  .ui.popup.bottom {
    73    margin: 0.75em 0em 0em;
    74  }
    75  .ui.popup.top {
    76    margin: 0em 0em 0.75em;
    77  }
    78  .ui.popup.left.center {
    79    margin: 0em 0.75em 0em 0em;
    80  }
    81  .ui.popup.right.center {
    82    margin: 0em 0em 0em 0.75em;
    83  }
    84  
    85  /*--------------
    86       Pointer
    87  ---------------*/
    88  
    89  
    90  /*--- Below ---*/
    91  
    92  .ui.bottom.center.popup:before {
    93    margin-left: -0.325em;
    94    top: -0.325em;
    95    left: 50%;
    96    right: auto;
    97    bottom: auto;
    98    box-shadow: -1px -1px 0px 0px #b3b3b3;
    99  }
   100  .ui.bottom.left.popup {
   101    margin-left: 0em;
   102  }
   103  .ui.bottom.left.popup:before {
   104    top: -0.325em;
   105    left: 1em;
   106    right: auto;
   107    bottom: auto;
   108    margin-left: 0em;
   109    box-shadow: -1px -1px 0px 0px #b3b3b3;
   110  }
   111  .ui.bottom.right.popup {
   112    margin-right: 0em;
   113  }
   114  .ui.bottom.right.popup:before {
   115    top: -0.325em;
   116    right: 1em;
   117    bottom: auto;
   118    left: auto;
   119    margin-left: 0em;
   120    box-shadow: -1px -1px 0px 0px #b3b3b3;
   121  }
   122  
   123  /*--- Above ---*/
   124  
   125  .ui.top.center.popup:before {
   126    top: auto;
   127    right: auto;
   128    bottom: -0.325em;
   129    left: 50%;
   130    margin-left: -0.325em;
   131  }
   132  .ui.top.left.popup {
   133    margin-left: 0em;
   134  }
   135  .ui.top.left.popup:before {
   136    bottom: -0.325em;
   137    left: 1em;
   138    top: auto;
   139    right: auto;
   140    margin-left: 0em;
   141  }
   142  .ui.top.right.popup {
   143    margin-right: 0em;
   144  }
   145  .ui.top.right.popup:before {
   146    bottom: -0.325em;
   147    right: 1em;
   148    top: auto;
   149    left: auto;
   150    margin-left: 0em;
   151  }
   152  
   153  /*--- Left Center ---*/
   154  
   155  .ui.left.center.popup:before {
   156    top: 50%;
   157    right: -0.325em;
   158    bottom: auto;
   159    left: auto;
   160    margin-top: -0.325em;
   161    box-shadow: 1px -1px 0px 0px #b3b3b3;
   162  }
   163  
   164  /*--- Right Center  ---*/
   165  
   166  .ui.right.center.popup:before {
   167    top: 50%;
   168    left: -0.325em;
   169    bottom: auto;
   170    right: auto;
   171    margin-top: -0.325em;
   172    box-shadow: -1px 1px 0px 0px #b3b3b3;
   173  }
   174  
   175  
   176  /*******************************
   177              Coupling
   178  *******************************/
   179  
   180  
   181  /* Immediate Nested Grid */
   182  .ui.popup > .ui.grid:not(.padded) {
   183    width: -webkit-calc(100% + 1.75rem);
   184    width: calc(100% + 1.75rem);
   185    margin: -0.7rem -0.875rem;
   186  }
   187  
   188  
   189  /*******************************
   190              States
   191  *******************************/
   192  
   193  .ui.loading.popup {
   194    display: block;
   195    visibility: hidden;
   196    z-index: -1;
   197  }
   198  .ui.animating.popup,
   199  .ui.visible.popup {
   200    display: block;
   201  }
   202  
   203  
   204  /*******************************
   205              Variations
   206  *******************************/
   207  
   208  
   209  /*--------------
   210       Basic
   211  ---------------*/
   212  
   213  .ui.basic.popup:before {
   214    display: none;
   215  }
   216  
   217  /*--------------
   218       Wide
   219  ---------------*/
   220  
   221  .ui.wide.popup {
   222    max-width: 350px;
   223  }
   224  .ui[class*="very wide"].popup {
   225    max-width: 550px;
   226  }
   227  
   228  /*--------------
   229       Fluid
   230  ---------------*/
   231  
   232  .ui.fluid.popup {
   233    width: 100%;
   234    max-width: none;
   235  }
   236  
   237  /*--------------
   238       Colors
   239  ---------------*/
   240  
   241  
   242  /* Inverted colors  */
   243  .ui.inverted.popup {
   244    background: #1b1c1d;
   245    color: #ffffff;
   246    border: none;
   247    box-shadow: none;
   248  }
   249  .ui.inverted.popup .header {
   250    background-color: none;
   251    color: #ffffff;
   252  }
   253  .ui.inverted.popup:before {
   254    background-color: #1b1c1d;
   255    box-shadow: none !important;
   256  }
   257  
   258  /*--------------
   259       Flowing
   260  ---------------*/
   261  
   262  .ui.flowing.popup {
   263    max-width: none;
   264  }
   265  
   266  /*--------------
   267       Sizes
   268  ---------------*/
   269  
   270  .ui.small.popup {
   271    font-size: 0.785714rem;
   272  }
   273  .ui.popup {
   274    font-size: 0.85714rem;
   275  }
   276  .ui.large.popup {
   277    font-size: 1rem;
   278  }
   279  .ui.huge.popup {
   280    font-size: 1.14285rem;
   281  }
   282  
   283  
   284  /*******************************
   285           Theme Overrides
   286  *******************************/
   287  
   288  
   289  
   290  /*******************************
   291          User Overrides
   292  *******************************/
   293