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();