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

     1  /*!
     2   * # Semantic UI - Divider
     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    : 'element';
    17  @element : 'divider';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  
    22  /*******************************
    23              Divider
    24  *******************************/
    25  
    26  .ui.divider {
    27    margin: @margin;
    28  
    29    line-height: 1;
    30    height: 0em;
    31  
    32    font-weight: @fontWeight;
    33    text-transform: @textTransform;
    34    letter-spacing: @letterSpacing;
    35    color: @color;
    36  
    37    user-select: none;
    38    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    39  }
    40  
    41  /*--------------
    42        Basic
    43  ---------------*/
    44  
    45  .ui.divider:not(.vertical):not(.horizontal) {
    46    border-top: @shadowWidth solid @shadowColor;
    47    border-bottom: @highlightWidth solid @highlightColor;
    48  }
    49  
    50  /*--------------
    51      Coupling
    52  ---------------*/
    53  
    54  .ui.grid > .ui.divider {
    55    font-size: 1rem;
    56  }
    57  
    58  
    59  /*--------------
    60     Horizontal
    61  ---------------*/
    62  
    63  .ui.horizontal.divider {
    64    position: relative;
    65  
    66    height: auto;
    67    margin: @horizontalMargin;
    68    overflow: hidden;
    69    line-height: 1;
    70    text-align: center;
    71  }
    72  
    73  .ui.horizontal.divider:before,
    74  .ui.horizontal.divider:after {
    75    position: absolute;
    76    top: 50%;
    77    content: '';
    78    z-index: 3;
    79  
    80    width: 50%;
    81    top: 50%;
    82    height: 0px;
    83  
    84    border-top: @shadowWidth solid @shadowColor;
    85    border-bottom: @highlightWidth solid @highlightColor;
    86  }
    87  
    88  .ui.horizontal.divider:before {
    89    margin-left: @horizontalRulerOffset;
    90  }
    91  .ui.horizontal.divider:after {
    92    margin-left: @horizontalDividerMargin;
    93  }
    94  
    95  /*--------------
    96      Vertical
    97  ---------------*/
    98  
    99  .ui.vertical.divider {
   100    position: absolute;
   101    z-index: 2;
   102    top: 50%;
   103    left: 50%;
   104  
   105    margin: 0rem;
   106    padding: 0em;
   107    width: auto;
   108    height: 50%;
   109  
   110    line-height: 0em;
   111    text-align: center;
   112    transform: translateX(-50%);
   113  }
   114  
   115  .ui.vertical.divider:before,
   116  .ui.vertical.divider:after {
   117    position: absolute;
   118    left: 50%;
   119    content: '';
   120    z-index: 3;
   121  
   122    border-left: @shadowWidth solid @shadowColor;
   123    border-right: @highlightWidth solid @highlightColor;
   124  
   125    width: 0%;
   126    height: @verticalDividerHeight;
   127  }
   128  
   129  .ui.vertical.divider:before {
   130    top: -100%;
   131  }
   132  .ui.vertical.divider:after {
   133    top: auto;
   134    bottom: 0px;
   135  }
   136  
   137  /* Inside grid */
   138  @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
   139    .ui.stackable.grid .ui.vertical.divider,
   140    .ui.grid .stackable.row .ui.vertical.divider {
   141      position: relative;
   142      margin: @margin;
   143      left: 50%;
   144      height: auto;
   145      overflow: hidden;
   146      line-height: 1;
   147      text-align: center;
   148    }
   149  
   150    .ui.stackable.grid .ui.vertical.divider:before,
   151    .ui.grid .stackable.row .ui.vertical.divider:before,
   152    .ui.stackable.grid .ui.vertical.divider:after,
   153    .ui.grid .stackable.row .ui.vertical.divider:after {
   154      position: absolute;
   155      top: 50%;
   156      left: auto;
   157      content: '';
   158      z-index: 3;
   159  
   160      width: 50%;
   161      top: 50%;
   162      height: 0px;
   163  
   164      border-top: @shadowWidth solid @shadowColor;
   165      border-bottom: @highlightWidth solid @highlightColor;
   166    }
   167  
   168    .ui.stackable.grid .ui.vertical.divider:before,
   169    .ui.grid .stackable.row .ui.vertical.divider:before {
   170      margin-left: -(50% + @horizontalDividerMargin);
   171    }
   172    .ui.stackable.grid .ui.vertical.divider:after,
   173    .ui.grid .stackable.row .ui.vertical.divider:after {
   174      margin-left: @horizontalDividerMargin;
   175    }
   176  }
   177  
   178  /*--------------
   179        Icon
   180  ---------------*/
   181  
   182  .ui.divider > .icon {
   183    margin: @dividerIconMargin;
   184    font-size: @dividerIconSize;
   185    height: 1em;
   186    vertical-align: middle;
   187  }
   188  
   189  /*******************************
   190            Variations
   191  *******************************/
   192  
   193  /*--------------
   194      Hidden
   195  ---------------*/
   196  
   197  .ui.hidden.divider {
   198    border-color: transparent !important;
   199  }
   200  
   201  /*--------------
   202      Inverted
   203  ---------------*/
   204  
   205  .ui.divider.inverted,
   206  .ui.vertical.inverted.divider,
   207  .ui.horizontal.inverted.divider {
   208    color: @invertedTextColor;
   209  }
   210  .ui.divider.inverted,
   211  .ui.divider.inverted:after,
   212  .ui.divider.inverted:before {
   213    border-top-color: @invertedShadowColor !important;
   214    border-bottom-color: @invertedHighlightColor !important;
   215  
   216    border-left-color: @invertedShadowColor !important;
   217    border-right-color: @invertedHighlightColor !important;
   218  }
   219  
   220  /*--------------
   221      Fitted
   222  ---------------*/
   223  
   224  .ui.fitted.divider {
   225    margin: 0em;
   226  }
   227  
   228  /*--------------
   229      Clearing
   230  ---------------*/
   231  
   232  .ui.clearing.divider {
   233    clear: both;
   234  }
   235  
   236  /*--------------
   237      Section
   238  ---------------*/
   239  
   240  .ui.section.divider {
   241    margin-top: @sectionMargin;
   242    margin-bottom: @sectionMargin;
   243  }
   244  
   245  /*--------------
   246       Sizes
   247  ---------------*/
   248  
   249  .ui.divider {
   250    font-size: @medium;
   251  }
   252  
   253  
   254  .loadUIOverrides();