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

     1  /*!
     2   * # Semantic UI - Icon
     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 : 'icon';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  
    23  /*******************************
    24               Icon
    25  *******************************/
    26  
    27  @font-face {
    28    font-family: 'Icons';
    29    src: @fallbackSRC;
    30    src: @src;
    31    font-style: normal;
    32    font-weight: normal;
    33    font-variant: normal;
    34    text-decoration: inherit;
    35    text-transform: none;
    36  }
    37  
    38  i.icon {
    39    display: inline-block;
    40    opacity: @opacity;
    41  
    42    margin: 0em @distanceFromText 0em 0em;
    43  
    44    width: @width;
    45    height: @height;
    46  
    47    font-family: 'Icons';
    48    font-style: normal;
    49    line-height: 1;
    50    font-weight: normal;
    51    text-decoration: inherit;
    52    text-align: center;
    53  
    54    speak: none;
    55    font-smoothing: antialiased;
    56    -moz-osx-font-smoothing: grayscale;
    57    backface-visibility: hidden;
    58  }
    59  
    60  i.icon:before {
    61    background: none !important;
    62  }
    63  
    64  /*******************************
    65               Types
    66  *******************************/
    67  
    68  /*--------------
    69      Loading
    70  ---------------*/
    71  
    72  i.icon.loading {
    73    height: 1em;
    74    animation: icon-loading @loadingDuration linear infinite;
    75  }
    76  @keyframes icon-loading {
    77   from {
    78      transform: rotate(0deg);
    79   }
    80   to {
    81      transform: rotate(360deg);
    82   }
    83  }
    84  
    85  /*******************************
    86               States
    87  *******************************/
    88  
    89  i.icon.hover {
    90    opacity: 1;
    91  }
    92  
    93  i.icon.active {
    94    opacity: 1;
    95  }
    96  
    97  i.emphasized.icon {
    98    opacity: 1;
    99  }
   100  
   101  i.disabled.icon {
   102    pointer-events: none;
   103    opacity: @disabledOpacity !important;
   104  }
   105  
   106  
   107  /*******************************
   108             Variations
   109  *******************************/
   110  
   111  
   112  /*-------------------
   113           Link
   114  --------------------*/
   115  
   116  i.link.icon {
   117    cursor: pointer;
   118    opacity: @linkOpacity;
   119    transition: opacity @transitionDuration @transitionEasing;
   120  }
   121  i.link.icon:hover {
   122    opacity: 1 !important;
   123  }
   124  
   125  /*-------------------
   126        Circular
   127  --------------------*/
   128  
   129  i.circular.icon {
   130    border-radius: 500em !important;
   131  
   132    padding: @circularPadding !important;
   133  
   134    box-shadow: @circularShadow;
   135  
   136    line-height: 1 !important;
   137    width: @circularSize !important;
   138    height: @circularSize !important;
   139  }
   140  i.circular.inverted.icon {
   141    border: none;
   142    box-shadow: none;
   143  }
   144  
   145  /*-------------------
   146        Flipped
   147  --------------------*/
   148  
   149  i.flipped.icon,
   150  i.horizontally.flipped.icon {
   151    transform: scale(-1, 1);
   152  }
   153  i.vertically.flipped.icon {
   154    transform: scale(1, -1);
   155  }
   156  
   157  /*-------------------
   158        Rotated
   159  --------------------*/
   160  
   161  i.rotated.icon,
   162  i.right.rotated.icon,
   163  i.clockwise.rotated.icon {
   164    transform: rotate(90deg);
   165  }
   166  
   167  i.left.rotated.icon,
   168  i.counterclockwise.rotated.icon {
   169    transform: rotate(-90deg);
   170  }
   171  
   172  /*-------------------
   173        Bordered
   174  --------------------*/
   175  
   176  i.bordered.icon {
   177    width: @borderedSize;
   178    height: @borderedSize;
   179  
   180    padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
   181    box-shadow: @borderedShadow;
   182  
   183    vertical-align: baseline;
   184  }
   185  i.bordered.inverted.icon {
   186    border: none;
   187    box-shadow: none;
   188  }
   189  
   190  /*-------------------
   191         Colors
   192  --------------------*/
   193  
   194  i.white.icon {
   195    color: @white !important;
   196  }
   197  i.black.icon {
   198    color: @black !important;
   199  }
   200  i.blue.icon {
   201    color: @blue !important;
   202  }
   203  i.green.icon {
   204    color: @green !important;
   205  }
   206  i.orange.icon {
   207    color: @orange !important;
   208  }
   209  i.pink.icon {
   210    color: @pink !important;
   211  }
   212  i.purple.icon {
   213    color: @purple !important;
   214  }
   215  i.red.icon {
   216    color: @red !important;
   217  }
   218  i.teal.icon {
   219    color: @teal !important;
   220  }
   221  i.yellow.icon {
   222    color: @yellow !important;
   223  }
   224  
   225  
   226  /*-------------------
   227        Inverted
   228  --------------------*/
   229  
   230  i.inverted.icon {
   231    color: @white;
   232  }
   233  i.inverted.black.icon {
   234    color: @lightBlack !important;
   235  }
   236  i.inverted.blue.icon {
   237    color: @lightBlue !important;
   238  }
   239  i.inverted.green.icon {
   240    color: @lightGreen !important;
   241  }
   242  i.inverted.orange.icon {
   243    color: @lightOrange !important;
   244  }
   245  i.inverted.pink.icon {
   246    color: @lightPink !important;
   247  }
   248  i.inverted.purple.icon {
   249    color: @lightPurple !important;
   250  }
   251  i.inverted.red.icon {
   252    color: @lightRed !important;
   253  }
   254  i.inverted.teal.icon {
   255    color: @lightTeal !important;
   256  }
   257  i.inverted.yellow.icon {
   258    color: @lightYellow !important;
   259  }
   260  
   261  /* Inverted Shapes */
   262  i.inverted.bordered.icon,
   263  i.inverted.circular.icon {
   264    background-color: #222222 !important;
   265    color: #FFFFFF !important;
   266  }
   267  i.inverted.bordered.black.icon,
   268  i.inverted.circular.black.icon {
   269    background-color: @black !important;
   270    color: #FFFFFF !important;
   271  }
   272  i.inverted.bordered.blue.icon,
   273  i.inverted.circular.blue.icon {
   274    background-color: @blue !important;
   275    color: #FFFFFF !important;
   276  }
   277  i.inverted.bordered.green.icon,
   278  i.inverted.circular.green.icon {
   279    background-color: @green !important;
   280    color: #FFFFFF !important;
   281  }
   282  i.inverted.bordered.orange.icon,
   283  i.inverted.circular.orange.icon {
   284    background-color: @orange !important;
   285    color: #FFFFFF !important;
   286  }
   287  i.inverted.bordered.pink.icon,
   288  i.inverted.circular.pink.icon {
   289    background-color: @pink !important;
   290    color: #FFFFFF !important;
   291  }
   292  i.inverted.bordered.purple.icon,
   293  i.inverted.circular.purple.icon {
   294    background-color: @purple !important;
   295    color: #FFFFFF !important;
   296  }
   297  i.inverted.bordered.red.icon,
   298  i.inverted.circular.red.icon {
   299    background-color: @red !important;
   300    color: #FFFFFF !important;
   301  }
   302  i.inverted.bordered.teal.icon,
   303  i.inverted.circular.teal.icon {
   304    background-color: @teal !important;
   305    color: #FFFFFF !important;
   306  }
   307  i.inverted.bordered.yellow.icon,
   308  i.inverted.circular.yellow.icon {
   309    background-color: @yellow !important;
   310    color: #FFFFFF !important;
   311  }
   312  
   313  
   314  /*-------------------
   315          Sizes
   316  --------------------*/
   317  
   318  i.small.icon {
   319    font-size: @small;
   320  }
   321  i.icon {
   322    font-size: @medium;
   323  }
   324  i.large.icon {
   325    font-size: @large;
   326    vertical-align: middle;
   327  }
   328  i.big.icon {
   329    font-size: @big;
   330    vertical-align: middle;
   331  }
   332  i.huge.icon {
   333    font-size: @huge;
   334    vertical-align: middle;
   335  }
   336  i.massive.icon {
   337    font-size: @massive;
   338    vertical-align: middle;
   339  }
   340  
   341  .loadUIOverrides();