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