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

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