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

     1  /*!
     2   * # Semantic UI - Image
     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 : 'image';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23               Image
    24  *******************************/
    25  
    26  .ui.image {
    27    position: relative;
    28    display: inline-block;
    29    vertical-align: middle;
    30    max-width: 100%;
    31    background-color: @placeholderColor;
    32  }
    33  
    34  img.ui.image {
    35    display: block;
    36  }
    37  
    38  .ui.image svg,
    39  .ui.image img {
    40    display: block;
    41    max-width: 100%;
    42    height: auto;
    43  }
    44  
    45  
    46  /*******************************
    47              States
    48  *******************************/
    49  
    50  .ui.hidden.images,
    51  .ui.hidden.image {
    52    display: none;
    53  }
    54  
    55  
    56  .ui.disabled.images,
    57  .ui.disabled.image {
    58    cursor: default;
    59    opacity: @disabledOpacity;
    60  }
    61  
    62  
    63  /*******************************
    64            Variations
    65  *******************************/
    66  
    67  
    68  /*--------------
    69       Inline
    70  ---------------*/
    71  
    72  .ui.inline.image,
    73  .ui.inline.image svg,
    74  .ui.inline.image img {
    75    display: inline-block;
    76  }
    77  
    78  /*------------------
    79    Vertical Aligned
    80  -------------------*/
    81  
    82  .ui.top.aligned.images .image,
    83  .ui.top.aligned.image,
    84  .ui.top.aligned.image svg,
    85  .ui.top.aligned.image img {
    86    display: inline-block;
    87    vertical-align: top;
    88  }
    89  .ui.middle.aligned.images .image,
    90  .ui.middle.aligned.image,
    91  .ui.middle.aligned.image svg,
    92  .ui.middle.aligned.image img {
    93    display: inline-block;
    94    vertical-align: middle;
    95  }
    96  .ui.bottom.aligned.images .image,
    97  .ui.bottom.aligned.image,
    98  .ui.bottom.aligned.image svg,
    99  .ui.bottom.aligned.image img {
   100    display: inline-block;
   101    vertical-align: bottom;
   102  }
   103  
   104  /*--------------
   105       Rounded
   106  ---------------*/
   107  
   108  .ui.rounded.images .image,
   109  .ui.rounded.images img,
   110  .ui.rounded.images svg,
   111  .ui.rounded.image img,
   112  .ui.rounded.image svg,
   113  .ui.rounded.image {
   114    border-radius: @roundedBorderRadius;
   115  }
   116  
   117  /*--------------
   118      Bordered
   119  ---------------*/
   120  
   121  .ui.bordered.images .image,
   122  .ui.bordered.images img,
   123  .ui.bordered.images svg,
   124  .ui.bordered.image img,
   125  .ui.bordered.image svg,
   126  img.ui.bordered.image {
   127    border: @imageBorder;
   128  }
   129  
   130  /*--------------
   131      Circular
   132  ---------------*/
   133  
   134  .ui.circular.images,
   135  .ui.circular.image {
   136    overflow: hidden;
   137  }
   138  
   139  .ui.circular.images .image,
   140  .ui.circular.images img,
   141  .ui.circular.images svg,
   142  .ui.circular.image img,
   143  .ui.circular.image svg,
   144  .ui.circular.image {
   145    -webkit-border-radius: @circularRadius;
   146    -moz-border-radius: @circularRadius;
   147    border-radius: @circularRadius;
   148  }
   149  
   150  /*--------------
   151       Fluid
   152  ---------------*/
   153  
   154  .ui.fluid.images,
   155  .ui.fluid.image,
   156  .ui.fluid.images img,
   157  .ui.fluid.images svg,
   158  .ui.fluid.image svg,
   159  .ui.fluid.image img {
   160    display: block;
   161    width: 100%;
   162    height: auto;
   163  }
   164  
   165  
   166  /*--------------
   167       Avatar
   168  ---------------*/
   169  
   170  .ui.avatar.images .image,
   171  .ui.avatar.images img,
   172  .ui.avatar.images svg,
   173  .ui.avatar.image img,
   174  .ui.avatar.image svg,
   175  .ui.avatar.image {
   176    margin-right: @avatarMargin;
   177  
   178    display: inline-block;
   179    width: @avatarSize;
   180    height: @avatarSize;
   181  
   182    -webkit-border-radius: @circularRadius;
   183    -moz-border-radius: @circularRadius;
   184    border-radius: @circularRadius;
   185  }
   186  
   187  
   188  /*-------------------
   189         Floated
   190  --------------------*/
   191  
   192  .ui.floated.image,
   193  .ui.floated.images {
   194    float: left;
   195    margin-right: @floatedHorizontalMargin;
   196    margin-bottom: @floatedVerticalMargin;
   197  }
   198  .ui.right.floated.images,
   199  .ui.right.floated.image {
   200    float: right;
   201    margin-right: 0em;
   202    margin-bottom: @floatedVerticalMargin;
   203    margin-left: @floatedHorizontalMargin;
   204  }
   205  
   206  .ui.floated.images:last-child,
   207  .ui.floated.image:last-child {
   208    margin-bottom: 0em;
   209  }
   210  
   211  
   212  .ui.centered.images,
   213  .ui.centered.image {
   214    margin-left: auto;
   215    margin-right: auto;
   216  }
   217  
   218  /*--------------
   219       Sizes
   220  ---------------*/
   221  
   222  .ui.mini.images .image,
   223  .ui.mini.images img,
   224  .ui.mini.images svg,
   225  .ui.mini.image {
   226    width: @miniWidth;
   227    height: auto;
   228    font-size: @mini;
   229  }
   230  .ui.tiny.images .image,
   231  .ui.tiny.images img,
   232  .ui.tiny.images svg,
   233  .ui.tiny.image {
   234    width: @tinyWidth;
   235    height: auto;
   236    font-size: @tiny;
   237  }
   238  .ui.small.images .image,
   239  .ui.small.images img,
   240  .ui.small.images svg,
   241  .ui.small.image {
   242    width: @smallWidth;
   243    height: auto;
   244    font-size: @small;
   245  }
   246  .ui.medium.images .image,
   247  .ui.medium.images img,
   248  .ui.medium.images svg,
   249  .ui.medium.image {
   250    width: @mediumWidth;
   251    height: auto;
   252    font-size: @medium;
   253  }
   254  .ui.large.images .image,
   255  .ui.large.images img,
   256  .ui.large.images svg,
   257  .ui.large.image {
   258    width: @largeWidth;
   259    height: auto;
   260    font-size: @large;
   261  }
   262  .ui.big.images .image,
   263  .ui.big.images img,
   264  .ui.big.images svg,
   265  .ui.big.image {
   266    width: @bigWidth;
   267    height: auto;
   268    font-size: @big;
   269  }
   270  .ui.huge.images .image,
   271  .ui.huge.images img,
   272  .ui.huge.images svg,
   273  .ui.huge.image {
   274    width: @hugeWidth;
   275    height: auto;
   276    font-size: @huge;
   277  }
   278  .ui.massive.images .image,
   279  .ui.massive.images img,
   280  .ui.massive.images svg,
   281  .ui.massive.image {
   282    width: @massiveWidth;
   283    height: auto;
   284    font-size: @massive;
   285  }
   286  
   287  
   288  /*******************************
   289                Groups
   290  *******************************/
   291  
   292  .ui.images {
   293    font-size: 0em;
   294    margin: 0em -@imageHorizontalMargin 0rem;
   295  }
   296  
   297  .ui.images .image,
   298  .ui.images img,
   299  .ui.images svg {
   300    display: inline-block;
   301    margin: 0em @imageHorizontalMargin @imageVerticalMargin;
   302  }
   303  
   304  .loadUIOverrides();