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

     1  /*!
     2   * # Semantic UI - Segment
     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 : 'segment';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22              Segment
    23  *******************************/
    24  
    25  .ui.segment {
    26    position: relative;
    27    background-color: @background;
    28    box-shadow: @boxShadow;
    29    margin: @margin 0em;
    30    padding: @verticalPadding @horizontalPadding;
    31    border-radius: @borderRadius;
    32    border: @border;
    33  }
    34  
    35  .ui.segment:first-child {
    36    margin-top: 0em;
    37  }
    38  .ui.segment:last-child {
    39    margin-bottom: 0em;
    40  }
    41  
    42  .ui.segment:after {
    43    content: '';
    44    display: block;
    45    height: 0px;
    46    clear: both;
    47    visibility: hidden;
    48  }
    49  
    50  /* Vertical */
    51  .ui[class*="vertical segment"] {
    52    margin: 0em;
    53    padding-left: 0em;
    54    padding-right: 0em;
    55  
    56    background-color: transparent;
    57    border-radius: 0px;
    58    border: none;
    59    box-shadow: 0px -1px 0px @borderColor inset;
    60  }
    61  .ui[class*="vertical segment"]:last-child {
    62    box-shadow: none;
    63  }
    64  
    65  /* Horizontal */
    66  .ui[class*="horizontal segment"] {
    67    margin: 0em;
    68    padding-top: 0em;
    69    padding-bottom: 0em;
    70  
    71    background-color: transparent;
    72    border-radius: 0px;
    73    border: none;
    74    box-shadow: 1px 0px 0px @borderColor;
    75  }
    76  
    77  /*-------------------
    78      Loose Coupling
    79  --------------------*/
    80  
    81  /* Header */
    82  .ui.inverted.segment > .ui.header {
    83    color: @white;
    84  }
    85  
    86  /* Label */
    87  .ui[class*="bottom attached"].segment > [class*="top attached"].label {
    88    border-top-left-radius: 0em;
    89    border-top-right-radius: 0em;
    90  }
    91  .ui[class*="top attached"].segment > [class*="bottom attached"].label {
    92    border-bottom-left-radius: 0em;
    93    border-bottom-right-radius: 0em;
    94  }
    95  .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
    96    border-top-left-radius: 0em;
    97    border-top-right-radius: 0em;
    98  }
    99  .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
   100    border-bottom-left-radius: 0em;
   101    border-bottom-right-radius: 0em;
   102  }
   103  
   104  /* Grid */
   105  .ui.page.grid.segment,
   106  .ui.grid .ui.segment.column {
   107    padding-top: @pageGridMargin;
   108    padding-bottom: @pageGridMargin;
   109  }
   110  .ui.grid.segment {
   111    margin: @margin 0rem;
   112    border-radius: @borderRadius;
   113  }
   114  
   115  /* Table */
   116  .ui.basic.table.segment {
   117    background: @background;
   118    border: @border;
   119    box-shadow: @boxShadow;
   120  }
   121  .ui[class*="very basic"].table.segment {
   122    padding: @verticalPadding @horizontalPadding;
   123  }
   124  
   125  
   126  /*******************************
   127               Types
   128  *******************************/
   129  
   130  /*-------------------
   131          Piled
   132  --------------------*/
   133  
   134  .ui.piled.segment {
   135    margin: @piledMargin 0em;
   136    box-shadow: @piledBoxShadow;
   137    z-index: @piledZIndex;
   138  }
   139  .ui.piled.segment:first-child {
   140    margin-top: 0em;
   141  }
   142  .ui.piled.segment:last-child {
   143    margin-bottom: 0em;
   144  }
   145  .ui.piled.segment:after,
   146  .ui.piled.segment:before {
   147    background-color: @white;
   148    visibility: visible;
   149    content: '';
   150    display: block;
   151    height: 100%;
   152    left: 0px;
   153    position: absolute;
   154    width: 100%;
   155    box-shadow: @piledBoxShadow;
   156  }
   157  .ui.piled.segment:after {
   158    transform: rotate(@piledDegrees);
   159    top: 0;
   160    z-index: -1;
   161  }
   162  .ui.piled.segment:before {
   163    transform: rotate(-@piledDegrees);
   164    top: 0;
   165    z-index: -2;
   166  }
   167  
   168  /* Piled Attached */
   169  .ui[class*="top attached"].piled.segment {
   170    margin-top: @piledMargin;
   171    margin-bottom: 0em;
   172  }
   173  .ui.piled.segment[class*="top attached"]:first-child {
   174    margin-top: 0em;
   175  }
   176  .ui.piled.segment[class*="bottom attached"] {
   177    margin-top: 0em;
   178    margin-bottom: @piledMargin;
   179  }
   180  .ui.piled.segment[class*="bottom attached"]:last-child {
   181    margin-bottom: 0em;
   182  }
   183  
   184  /*-------------------
   185         Stacked
   186  --------------------*/
   187  
   188  .ui.stacked.segment {
   189    padding-bottom: @stackedPadding;
   190  }
   191  .ui.stacked.segment:after,
   192  .ui.stacked.segment:before {
   193    content: '';
   194    position: absolute;
   195    bottom: -(@stackedHeight / 2);
   196    left: 0%;
   197  
   198    border-top: 1px solid @borderColor;
   199    background-color: @stackedPageBackground;
   200  
   201    width: 100%;
   202    height: @stackedHeight;
   203    visibility: visible;
   204  }
   205  .ui.stacked.segment:before {
   206    display: none;
   207  }
   208  
   209  /* Add additional page */
   210  .ui.tall.stacked.segment:before {
   211    display: block;
   212    bottom: 0px;
   213  }
   214  
   215  /* Inverted */
   216  .ui.stacked.inverted.segment:after,
   217  .ui.stacked.inverted.segment:before {
   218    background-color: @subtleTransparentBlack;
   219    border-top: 1px solid @selectedBorderColor;
   220  }
   221  
   222  /*-------------------
   223         Compact
   224  --------------------*/
   225  
   226  .ui.compact.segment {
   227    display: table;
   228  }
   229  
   230  /*-------------------
   231         Circular
   232  --------------------*/
   233  
   234  .ui.circular.segment {
   235    display: table-cell;
   236    padding: @circularPadding;
   237    text-align: center;
   238    vertical-align: middle;
   239    border-radius: 500em;
   240  }
   241  
   242  /*-------------------
   243         Raised
   244  --------------------*/
   245  
   246  .ui.raised.segment {
   247    box-shadow: @raisedBoxShadow;
   248  }
   249  
   250  
   251  /*******************************
   252              States
   253  *******************************/
   254  
   255  /*--------------
   256      Disabled
   257  ---------------*/
   258  
   259  .ui.disabled.segment {
   260    opacity: @disabledOpacity;
   261    color: @disabledTextColor;
   262  }
   263  
   264  /*--------------
   265      Loading
   266  ---------------*/
   267  
   268  .ui.loading.segment {
   269    position: relative;
   270    cursor: default;
   271    point-events: none;
   272    text-shadow: none !important;
   273    color: transparent !important;
   274    transition: all 0s linear;
   275  }
   276  .ui.loading.segment:before {
   277    position: absolute;
   278    content: '';
   279    top: 0%;
   280    left: 0%;
   281    background: @loaderDimmerColor;
   282    width: 100%;
   283    height: 100%;
   284    border-radius: @borderRadius;
   285    z-index: @loaderDimmerZIndex;
   286  }
   287  .ui.loading.segment:after {
   288    position: absolute;
   289    content: '';
   290    top: 50%;
   291    left: 50%;
   292  
   293    margin: @loaderMargin;
   294    width: @loaderSize;
   295    height: @loaderSize;
   296  
   297    animation: segment-spin @loaderSpeed linear;
   298    animation-iteration-count: infinite;
   299  
   300    border-radius: @circularRadius;
   301  
   302    border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
   303    border-style: solid;
   304    border-width: @loaderLineWidth;
   305  
   306    box-shadow: 0px 0px 0px 1px transparent;
   307    visibility: visible;
   308    z-index: @loaderLineZIndex;
   309  }
   310  
   311  @keyframes segment-spin {
   312    from {
   313      transform: rotate(0deg);
   314    }
   315    to {
   316      transform: rotate(360deg);
   317    }
   318  }
   319  
   320  
   321  /*******************************
   322             Variations
   323  *******************************/
   324  
   325  
   326  /*-------------------
   327         Basic
   328  --------------------*/
   329  
   330  .ui.basic.segment {
   331    position: relative;
   332    background-color: transparent;
   333    box-shadow: none;
   334  
   335    border-radius: 0px;
   336  }
   337  
   338  /*-------------------
   339         Fittted
   340  --------------------*/
   341  
   342  .ui.fitted.segment {
   343    padding: 0em;
   344  }
   345  
   346  /*-------------------
   347         Colors
   348  --------------------*/
   349  
   350  .ui.black.segment:not(.inverted) {
   351    border-top: @coloredBorderSize solid @black;
   352  }
   353  .ui.blue.segment:not(.inverted) {
   354    border-top: @coloredBorderSize solid @blue;
   355  }
   356  .ui.green.segment:not(.inverted) {
   357    border-top: @coloredBorderSize solid @green;
   358  }
   359  .ui.orange.segment:not(.inverted) {
   360    border-top: @coloredBorderSize solid @orange;
   361  }
   362  .ui.pink.segment:not(.inverted) {
   363    border-top: @coloredBorderSize solid @pink;
   364  }
   365  .ui.purple.segment:not(.inverted) {
   366    border-top: @coloredBorderSize solid @purple;
   367  }
   368  .ui.red.segment:not(.inverted) {
   369    border-top: @coloredBorderSize solid @red;
   370  }
   371  .ui.teal.segment:not(.inverted) {
   372    border-top: @coloredBorderSize solid @teal;
   373  }
   374  .ui.yellow.segment:not(.inverted) {
   375    border-top: @coloredBorderSize solid @yellow;
   376  }
   377  
   378  .ui.black.segment:not(.inverted):not(.attached) {
   379    border-top-left-radius: @coloredBorderRadius !important;
   380    border-top-right-radius: @coloredBorderRadius !important;
   381  }
   382  .ui.blue.segment:not(.inverted):not(.attached) {
   383    border-top-left-radius: @coloredBorderRadius !important;
   384    border-top-right-radius: @coloredBorderRadius !important;
   385  }
   386  .ui.green.segment:not(.inverted):not(.attached) {
   387    border-top-left-radius: @coloredBorderRadius !important;
   388    border-top-right-radius: @coloredBorderRadius !important;
   389  }
   390  .ui.orange.segment:not(.inverted):not(.attached) {
   391    border-top-left-radius: @coloredBorderRadius !important;
   392    border-top-right-radius: @coloredBorderRadius !important;
   393  }
   394  .ui.pink.segment:not(.inverted):not(.attached) {
   395    border-top-left-radius: @coloredBorderRadius !important;
   396    border-top-right-radius: @coloredBorderRadius !important;
   397  }
   398  .ui.purple.segment:not(.inverted):not(.attached) {
   399    border-top-left-radius: @coloredBorderRadius !important;
   400    border-top-right-radius: @coloredBorderRadius !important;
   401  }
   402  .ui.red.segment:not(.inverted):not(.attached) {
   403    border-top-left-radius: @coloredBorderRadius !important;
   404    border-top-right-radius: @coloredBorderRadius !important;
   405  }
   406  .ui.teal.segment:not(.inverted):not(.attached) {
   407    border-top-left-radius: @coloredBorderRadius !important;
   408    border-top-right-radius: @coloredBorderRadius !important;
   409  }
   410  .ui.yellow.segment:not(.inverted):not(.attached) {
   411    border-top-left-radius: @coloredBorderRadius !important;
   412    border-top-right-radius: @coloredBorderRadius !important;
   413  }
   414  
   415  /*-------------------
   416     Inverted Colors
   417  --------------------*/
   418  
   419  .ui.inverted.segment,
   420  .ui.inverted.black.segment {
   421    background-color: @black !important;
   422    color: @white !important;
   423  }
   424  .ui.inverted.blue.segment {
   425    background-color: @blue !important;
   426    color: @white !important;
   427  }
   428  .ui.inverted.green.segment {
   429    background-color: @green !important;
   430    color: @white !important;
   431  }
   432  .ui.inverted.orange.segment {
   433    background-color: @orange !important;
   434    color: @white !important;
   435  }
   436  .ui.inverted.pink.segment {
   437    background-color: @pink !important;
   438    color: @white !important;
   439  }
   440  .ui.inverted.purple.segment {
   441    background-color: @purple !important;
   442    color: @white !important;
   443  }
   444  .ui.inverted.red.segment {
   445    background-color: @red !important;
   446    color: @white !important;
   447  }
   448  .ui.inverted.teal.segment {
   449    background-color: @teal !important;
   450    color: @white !important;
   451  }
   452  .ui.inverted.yellow.segment {
   453    background-color: @yellow !important;
   454    color: @white !important;
   455  }
   456  
   457  /*-------------------
   458         Aligned
   459  --------------------*/
   460  
   461  .ui[class*="left aligned"].segment {
   462    text-align: left;
   463  }
   464  .ui[class*="right aligned"].segment {
   465    text-align: right;
   466  }
   467  .ui[class*="center aligned"].segment {
   468    text-align: center;
   469  }
   470  
   471  /*-------------------
   472         Floated
   473  --------------------*/
   474  
   475  .ui.floated.segment,
   476  .ui[class*="left floated"].segment {
   477    float: left;
   478    margin-right: @margin;
   479  }
   480  .ui[class*="right floated"].segment {
   481    float: right;
   482    margin-left: @margin;
   483  }
   484  
   485  
   486  /*-------------------
   487        Inverted
   488  --------------------*/
   489  
   490  .ui.inverted.segment {
   491    border: none;
   492    -webkit-box-shadow: none;
   493    -moz-box-shadow: none;
   494    box-shadow: none;
   495  }
   496  .ui.inverted.segment .segment {
   497    color: @textColor;
   498  }
   499  .ui.inverted.segment .inverted.segment {
   500    color: @white;
   501  }
   502  .ui.inverted.segment,
   503  .ui.primary.inverted.segment {
   504    background-color: @black;
   505    color: @white;
   506  }
   507  
   508  .ui.inverted.block.segment,
   509  .ui.inverted.attached.segment {
   510    border-color: @solidWhiteBorderColor;
   511  }
   512  
   513  /*-------------------
   514       Ordinality
   515  --------------------*/
   516  
   517  .ui.secondary.segment {
   518    background: @secondaryBackground;
   519    color: @secondaryColor;
   520  }
   521  
   522  .ui.tertiary.segment {
   523    background: @tertiaryBackground;
   524    color: @textColor;
   525  }
   526  
   527  .ui.secondary.inverted.segment {
   528    background: @secondaryInvertedBackground;
   529    color: @secondaryInvertedColor;
   530  }
   531  .ui.tertiary.inverted.segment {
   532    background: @tertiaryInvertedBackground;
   533    color: @tertiaryInvertedColor;
   534  }
   535  
   536  
   537  /*-------------------
   538        Attached
   539  --------------------*/
   540  
   541  .ui.segment.attached {
   542    top: 0px;
   543    bottom: 0px;
   544    margin: 0em @attachedHorizontalOffset;
   545    width: @attachedWidth;
   546    max-width: @attachedWidth;
   547    border-radius: 0px;
   548    box-shadow: @attachedBoxShadow;
   549    border: @attachedBorder;
   550  }
   551  .ui.segment.attached + .ui.segment.attached:not(.top) {
   552    border-top: none;
   553  }
   554  
   555  /* Top */
   556  .ui[class*="top attached"].segment {
   557    top: @attachedTopOffset;
   558    bottom: 0px;
   559    margin-top: @margin;
   560    margin-bottom: 0em;
   561    border-radius: @borderRadius @borderRadius 0em 0em;
   562  }
   563  .ui.segment[class*="top attached"]:first-child {
   564    margin-top: 0em;
   565  }
   566  
   567  /* Bottom */
   568  .ui.segment[class*="bottom attached"] {
   569    top: @attachedBottomOffset;
   570    bottom: 0px;
   571    margin-top: 0em;
   572    margin-bottom: @margin;
   573    box-shadow: @attachedBottomBoxShadow;
   574    border-radius: 0em 0em @borderRadius @borderRadius;
   575  }
   576  .ui.segment[class*="bottom attached"]:last-child {
   577    margin-bottom: 0em;
   578  }
   579  
   580  
   581  /*-------------------
   582         Groups
   583  --------------------*/
   584  
   585  .ui.segments {
   586    margin: @margin 0em;
   587  }
   588  .ui.segments:first-child {
   589    margin-top: 0em;
   590  }
   591  .ui.segments:last-child {
   592    margin-bottom: 0em;
   593  }
   594  
   595  .ui.segments > .segment {
   596    top: 0px;
   597    bottom: 0px;
   598    margin: 0em @attachedHorizontalOffset;
   599    width: @attachedWidth;
   600    max-width: @attachedWidth;
   601    border-radius: 0px;
   602    box-shadow: @attachedBoxShadow;
   603    border: @attachedBorder;
   604  }
   605  
   606  .ui.segments > .segment:not(:first-child) {
   607    border-top: none;
   608  }
   609  
   610  /* Top */
   611  .ui.segments > .segment:first-child {
   612    margin-top: 0em;
   613    bottom: 0px;
   614    margin-bottom: 0em;
   615    top: @attachedTopOffset;
   616    border-radius: @borderRadius @borderRadius 0em 0em;
   617  }
   618  
   619  /* Bottom */
   620  .ui.segments > .segment:last-child {
   621    bottom: 0px;
   622    margin-top: 0em;
   623    margin-bottom: 0em;
   624    top: @attachedBottomOffset;
   625    box-shadow: @attachedBottomBoxShadow;
   626    border-radius: 0em 0em @borderRadius @borderRadius;
   627  }
   628  
   629  .loadUIOverrides();