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

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