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

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