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

     1  /*!
     2   * # Semantic UI - Header
     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    : 'element';
    18  @element : 'header';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  
    23  /*******************************
    24              Header
    25  *******************************/
    26  
    27  /* Standard */
    28  .ui.header {
    29    border: none;
    30    margin: @margin;
    31    padding: @verticalPadding @horizontalPadding;
    32    font-family: @fontFamily;
    33    font-weight: @fontWeight;
    34    line-height: @lineHeight;
    35    text-transform: @textTransform;
    36    color: @textColor;
    37  }
    38  
    39  .ui.header:first-child {
    40    margin-top: @firstMargin;
    41  }
    42  .ui.header:last-child {
    43    margin-bottom: @lastMargin;
    44  }
    45  
    46  /*--------------
    47     Sub Header
    48  ---------------*/
    49  
    50  .ui.header .sub.header {
    51    font-weight: normal;
    52    margin: 0em;
    53    padding: 0em;
    54    font-size: @subHeaderFontSize;
    55    line-height: @subHeaderLineHeight;
    56    color: @subHeaderColor;
    57  }
    58  
    59  /*--------------
    60        Icon
    61  ---------------*/
    62  
    63  .ui.header > .icon {
    64    display: table-cell;
    65    opacity: @iconOpacity;
    66    font-size: @iconSize;
    67    padding-top: @iconOffset;
    68    vertical-align: @iconAlignment;
    69  }
    70  
    71  /* With Text Node */
    72  .ui.header .icon:only-child {
    73    display: inline-block;
    74    padding: 0em;
    75    margin-right: @iconMargin;
    76  }
    77  
    78  /*-------------------
    79          Image
    80  --------------------*/
    81  
    82  .ui.header > .image,
    83  .ui.header > img {
    84    display: inline-block;
    85    margin-top: @imageOffset;
    86    width: @imageWidth;
    87    height: @imageHeight;
    88    vertical-align: @imageAlignment;
    89  }
    90  .ui.header > .image:only-child,
    91  .ui.header > img:only-child {
    92    margin-right: @imageMargin;
    93  }
    94  
    95  /*--------------
    96       Content
    97  ---------------*/
    98  
    99  .ui.header .content {
   100    display: inline-block;
   101    vertical-align: @contentAlignment;
   102  }
   103  
   104  /* After Image */
   105  .ui.header > img + .content,
   106  .ui.header > .image + .content {
   107    padding-left: @imageMargin;
   108    vertical-align: @contentImageAlignment;
   109  }
   110  
   111  /* After Icon */
   112  .ui.header > .icon + .content {
   113    padding-left: @iconMargin;
   114    display: table-cell;
   115    vertical-align: @contentIconAlignment;
   116  }
   117  
   118  
   119  /*--------------
   120   Loose Coupling
   121  ---------------*/
   122  
   123  .ui.header .ui.label {
   124    font-size: @labelSize;
   125    margin: 0em 0em 0em @labelDistance;
   126    vertical-align: @labelVerticalAlign;
   127  }
   128  
   129  /* Positioning */
   130  .ui.header + p {
   131    margin-top: @nextParagraphDistance;
   132  }
   133  
   134  
   135  
   136  /*******************************
   137              Types
   138  *******************************/
   139  
   140  
   141  /*--------------
   142       Page
   143  ---------------*/
   144  
   145  h1.ui.header {
   146    font-size: @h1;
   147  }
   148  h2.ui.header {
   149    font-size: @h2;
   150  }
   151  h3.ui.header {
   152    font-size: @h3;
   153  }
   154  h4.ui.header {
   155    font-size: @h4;
   156  }
   157  h5.ui.header {
   158    font-size: @h5;
   159  }
   160  
   161  
   162  /* Sub Header */
   163  h1.ui.header .sub.header {
   164    font-size: @h1SubHeaderFontSize;
   165  }
   166  h2.ui.header .sub.header {
   167    font-size: @h2SubHeaderFontSize;
   168  }
   169  h3.ui.header .sub.header {
   170    font-size: @h3SubHeaderFontSize;
   171  }
   172  h4.ui.header .sub.header {
   173    font-size: @h4SubHeaderFontSize;
   174  }
   175  h5.ui.header .sub.header {
   176    font-size: @h5SubHeaderFontSize;
   177  }
   178  
   179  
   180  /*--------------
   181   Content Heading
   182  ---------------*/
   183  
   184  .ui.huge.header {
   185    min-height: 1em;
   186    font-size: @huge;
   187  }
   188  .ui.large.header {
   189    font-size: @large;
   190  }
   191  .ui.medium.header {
   192    font-size: @medium;
   193  }
   194  .ui.small.header {
   195    font-size: @small;
   196  }
   197  .ui.tiny.header {
   198    font-size: @tiny;
   199  }
   200  
   201  /* Sub Header */
   202  .ui.huge.header .sub.header {
   203    font-size: @hugeSubHeaderFontSize;
   204  }
   205  .ui.large.header .sub.header {
   206    font-size: @hugeSubHeaderFontSize;
   207  }
   208  .ui.header .sub.header {
   209    font-size: @subHeaderFontSize;
   210  }
   211  .ui.small.header .sub.header {
   212    font-size: @smallSubHeaderFontSize;
   213  }
   214  .ui.tiny.header .sub.header {
   215    font-size: @tinySubHeaderFontSize;
   216  }
   217  
   218  /*-------------------
   219          Icon
   220  --------------------*/
   221  
   222  .ui.icon.header {
   223    display: inline-block;
   224    text-align: center;
   225    margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;
   226  }
   227  .ui.icon.header:after {
   228    content: '';
   229    display: block;
   230    height: 0px;
   231    clear: both;
   232    visibility: hidden;
   233  }
   234  
   235  .ui.icon.header:first-child {
   236    margin-top: @iconHeaderFirstMargin;
   237  }
   238  .ui.icon.header .icon {
   239    float: none;
   240    display: block;
   241    width: auto;
   242    height: auto;
   243    padding: 0em;
   244    font-size: @iconHeaderSize;
   245    margin: 0em auto @iconHeaderMargin;
   246    opacity: @iconHeaderOpacity;
   247  }
   248  .ui.icon.header .content {
   249    display: block;
   250  }
   251  .ui.icon.header .circular.icon {
   252    font-size: @circularHeaderIconSize;
   253  }
   254  .ui.icon.header .square.icon {
   255    font-size: @squareHeaderIconSize;
   256  }
   257  .ui.block.icon.header .icon {
   258    margin-bottom: 0em;
   259  }
   260  .ui.icon.header.aligned {
   261    margin-left: auto;
   262    margin-right: auto;
   263    display: block;
   264  }
   265  
   266  /*******************************
   267              States
   268  *******************************/
   269  
   270  .ui.disabled.header {
   271    opacity: @disabledOpacity;
   272  }
   273  
   274  
   275  /*******************************
   276             Variations
   277  *******************************/
   278  
   279  
   280  /*-------------------
   281         Colors
   282  --------------------*/
   283  
   284  .ui.black.header {
   285    color: @black !important;
   286  }
   287  a.ui.black.header:hover {
   288    color: @blackHover !important;
   289  }
   290  
   291  .ui.blue.header {
   292    color: @blue !important;
   293  }
   294  a.ui.blue.header:hover {
   295    color: @blueHover !important;
   296  }
   297  
   298  .ui.green.header {
   299    color: @green !important;
   300  }
   301  a.ui.green.header:hover {
   302    color: @greenHover !important;
   303  }
   304  
   305  .ui.orange.header {
   306    color: @orange !important;
   307  }
   308  a.ui.orange.header:hover {
   309    color: @orangeHover !important;
   310  }
   311  
   312  .ui.pink.header {
   313    color: @pink !important;
   314  }
   315  a.ui.pink.header:hover {
   316    color: @pinkHover !important;
   317  }
   318  
   319  .ui.purple.header {
   320    color: @purple !important;
   321  }
   322  a.ui.purple.header:hover {
   323    color: @purpleHover !important;
   324  }
   325  
   326  .ui.red.header {
   327    color: @red !important;
   328  }
   329  a.ui.red.header:hover {
   330    color: @redHover !important;
   331  }
   332  
   333  .ui.teal.header {
   334    color: @teal !important;
   335  }
   336  a.ui.teal.header:hover {
   337    color: @tealHover !important;
   338  }
   339  
   340  .ui.yellow.header {
   341    color: @yellow !important;
   342  }
   343  a.ui.yellow.header:hover {
   344    color: @yellowHover !important;
   345  }
   346  
   347  .ui.black.dividing.header {
   348    border-bottom: @dividedColoredBorderWidth solid @blackDividedBorderColor;
   349  }
   350  .ui.blue.dividing.header {
   351    border-bottom: @dividedColoredBorderWidth solid @blueDividedBorderColor;
   352  }
   353  .ui.green.dividing.header {
   354    border-bottom: @dividedColoredBorderWidth solid @greenDividedBorderColor;
   355  }
   356  .ui.orange.dividing.header {
   357    border-bottom: @dividedColoredBorderWidth solid @orangeDividedBorderColor;
   358  }
   359  .ui.pink.dividing.header {
   360    border-bottom: @dividedColoredBorderWidth solid @pinkDividedBorderColor;
   361  }
   362  .ui.purple.dividing.header {
   363    border-bottom: @dividedColoredBorderWidth solid @purpleDividedBorderColor;
   364  }
   365  .ui.red.dividing.header {
   366    border-bottom: @dividedColoredBorderWidth solid @redDividedBorderColor;
   367  }
   368  .ui.teal.dividing.header {
   369    border-bottom: @dividedColoredBorderWidth solid @tealDividedBorderColor;
   370  }
   371  .ui.yellow.dividing.header {
   372    border-bottom: @dividedColoredBorderWidth solid @yellowDividedBorderColor;
   373  }
   374  
   375  /*-------------------
   376        Inverted
   377  --------------------*/
   378  
   379  .ui.inverted.header {
   380    color: @invertedColor;
   381  }
   382  .ui.inverted.header .sub.header {
   383    color: @invertedSubHeaderColor;
   384  }
   385  .ui.inverted.attached.header {
   386    background: @invertedAttachedBackground;
   387    box-shadow: none;
   388  }
   389  .ui.inverted.block.header {
   390    background: @invertedBlockBackground;
   391    box-shadow: none;
   392  }
   393  
   394  
   395  /*-------------------
   396     Inverted Colors
   397  --------------------*/
   398  
   399  .ui.inverted.black.header {
   400    color: @darkGrey !important;
   401  }
   402  a.ui.inverted.black.header:hover {
   403    color: @darkGreyHover !important;
   404  }
   405  
   406  .ui.inverted.blue.header {
   407    color: @lightBlue !important;
   408  }
   409  a.ui.inverted.blue.header:hover {
   410    color: @lightBlueHover !important;
   411  }
   412  
   413  .ui.inverted.green.header {
   414    color: @lightGreen !important;
   415  }
   416  a.ui.inverted.green.header:hover {
   417    color: @lightGreenHover !important;
   418  }
   419  
   420  .ui.inverted.orange.header {
   421    color: @lightOrange !important;
   422  }
   423  a.ui.inverted.orange.header:hover {
   424    color: @lightOrangeHover !important;
   425  }
   426  
   427  .ui.inverted.pink.header {
   428    color: @lightPink !important;
   429  }
   430  a.ui.inverted.pink.header:hover {
   431    color: @lightPinkHover !important;
   432  }
   433  
   434  .ui.inverted.purple.header {
   435    color: @lightPurple !important;
   436  }
   437  a.ui.inverted.purple.header:hover {
   438    color: @lightPurpleHover !important;
   439  }
   440  
   441  .ui.inverted.red.header {
   442    color: @lightRed !important;
   443  }
   444  a.ui.inverted.red.header:hover {
   445    color: @lightRedHover !important;
   446  }
   447  
   448  .ui.inverted.teal.header {
   449    color: @lightTeal !important;
   450  }
   451  a.ui.inverted.teal.header:hover {
   452    color: @lightTealHover !important;
   453  }
   454  
   455  .ui.inverted.yellow.header {
   456    color: @lightYellow !important;
   457  }
   458  a.ui.inverted.yellow.header:hover {
   459    color: @lightYellowHover !important;
   460  }
   461  
   462  .ui.inverted.block.header {
   463    border-bottom: none;
   464  }
   465  
   466  /*-------------------
   467         Aligned
   468  --------------------*/
   469  
   470  .ui.left.aligned.header {
   471    text-align: left;
   472  }
   473  .ui.right.aligned.header {
   474    text-align: right;
   475  }
   476  .ui.centered.header,
   477  .ui.center.aligned.header {
   478    text-align: center;
   479  }
   480  .ui.justified.header {
   481    text-align: justify;
   482  }
   483  .ui.justified.header:after {
   484    display: inline-block;
   485    content: '';
   486    width: 100%;
   487  }
   488  
   489  /*-------------------
   490         Floated
   491  --------------------*/
   492  
   493  .ui.floated.header,
   494  .ui[class*="left floated"].header {
   495    float: left;
   496    margin-top: 0em;
   497    margin-right: @floatedMargin;
   498  }
   499  .ui[class*="right floated"].header {
   500    float: right;
   501    margin-top: 0em;
   502    margin-left: @floatedMargin;
   503  }
   504  
   505  /*-------------------
   506         Fittted
   507  --------------------*/
   508  
   509  .ui.fitted.header {
   510    padding: 0em;
   511  }
   512  
   513  
   514  /*-------------------
   515        Dividing
   516  --------------------*/
   517  
   518  .ui.dividing.header {
   519    padding-bottom: @dividedBorderPadding;
   520    border-bottom: @dividedBorder;
   521  }
   522  .ui.dividing.header .sub.header {
   523    padding-bottom: @dividedSubHeaderPadding;
   524  }
   525  .ui.dividing.header .icon {
   526    margin-bottom: @dividedIconPadding;
   527  }
   528  
   529  .ui.inverted.dividing.header {
   530    border-bottom-color: @invertedDividedBorderColor;
   531  }
   532  
   533  
   534  /*-------------------
   535          Block
   536  --------------------*/
   537  
   538  .ui.block.header {
   539    background: @blockBackground;
   540    padding: @blockVerticalPadding @blockHorizontalPadding;
   541    box-shadow: @blockBoxShadow;
   542    border: @blockBorder;
   543    border-radius: @blockBorderRadius;
   544  }
   545  
   546  .ui.tiny.block.header {
   547    font-size: @tinyBlock;
   548  }
   549  .ui.small.block.header {
   550    font-size: @smallBlock;
   551  }
   552  .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   553    font-size: @mediumBlock;
   554  }
   555  .ui.large.block.header {
   556    font-size: @largeBlock;
   557  }
   558  .ui.huge.block.header {
   559    font-size: @hugeBlock;
   560  }
   561  
   562  /*-------------------
   563         Attached
   564  --------------------*/
   565  
   566  .ui.attached.header {
   567    background: @attachedBackground;
   568    padding: @attachedVerticalPadding @attachedHorizontalPadding;
   569    margin-left: @attachedOffset;
   570    margin-right: @attachedOffset;
   571    box-shadow: @attachedBoxShadow;
   572    border: @attachedBorder;
   573  }
   574  .ui.attached.block.header {
   575    background: @blockBackground;
   576  }
   577  
   578  .ui.attached:not(.top):not(.bottom).header {
   579    margin-top: 0em;
   580    margin-bottom: 0em;
   581    border-top: none;
   582    border-bottom: none;
   583    border-radius: 0em;
   584  }
   585  .ui.top.attached.header {
   586    margin-bottom: 0em;
   587    border-bottom: none;
   588    border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
   589  }
   590  .ui.bottom.attached.header {
   591    margin-top: 0em;
   592    border-top: none;
   593    border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
   594  }
   595  
   596  /* Attached Sizes */
   597  .ui.tiny.attached.header {
   598    font-size: @tinyAttached;
   599  }
   600  .ui.small.attached.header {
   601    font-size: @smallAttached;
   602  }
   603  .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   604    font-size: @mediumAttached;
   605  }
   606  .ui.large.attached.header {
   607    font-size: @largeAttached;
   608  }
   609  .ui.huge.attached.header {
   610    font-size: @hugeAttached;
   611  }
   612  
   613  /*-------------------
   614          Sizing
   615  --------------------*/
   616  
   617  .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   618    font-size: @medium;
   619  }
   620  
   621  .loadUIOverrides();