/*
* # Semantic - Image * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘element’; @element : ‘image’;
@import ‘../../theme.config’;
/*******************************
Image
*******************************/
.ui.image {
position: relative; display: inline-block; vertical-align: middle; max-width: 100%; background-color: @placeholderColor;
}
img.ui.image {
display: block;
}
.ui.image svg, .ui.image img {
display: block; max-width: 100%; height: auto;
}
/*******************************
States
*******************************/
.ui.disabled.image {
cursor: default; opacity: @disabledOpacity;
}
/*******************************
Variations
*******************************/
/*————–
Inline
—————*/
.ui.inline.image, .ui.inline.image svg, .ui.inline.image img {
display: inline-block;
}
/*——————
Vertical Aligned
——————-*/
.ui.top.aligned.images .image, .ui.top.aligned.image, .ui.top.aligned.image svg, .ui.top.aligned.image img {
display: inline-block; vertical-align: top;
} .ui.middle.aligned.images .image, .ui.middle.aligned.image, .ui.middle.aligned.image svg, .ui.middle.aligned.image img {
display: inline-block; vertical-align: middle;
} .ui.bottom.aligned.images .image, .ui.bottom.aligned.image, .ui.bottom.aligned.image svg, .ui.bottom.aligned.image img {
display: inline-block; vertical-align: bottom;
}
/*————–
Rounded
—————*/
.ui.rounded.images .image, .ui.rounded.images img, .ui.rounded.images svg, .ui.rounded.image img, .ui.rounded.image svg, .ui.rounded.image {
border-radius: @roundedBorderRadius;
}
/*————–
Bordered
—————*/
.ui.bordered.images .image, .ui.bordered.images img, .ui.bordered.images svg, .ui.bordered.image img, .ui.bordered.image svg, img.ui.bordered.image {
border: @imageBorder;
}
/*————–
Circular
—————*/
.ui.circular.images, .ui.circular.image {
overflow: hidden;
}
.ui.circular.images .image, .ui.circular.images img, .ui.circular.images svg, .ui.circular.image img, .ui.circular.image svg, .ui.circular.image {
-webkit-border-radius: @circularRadius; -moz-border-radius: @circularRadius; border-radius: @circularRadius;
}
/*————–
Fluid
—————*/
.ui.fluid.images, .ui.fluid.image, .ui.fluid.images img, .ui.fluid.images svg, .ui.fluid.image svg, .ui.fluid.image img {
display: block; width: 100%;
}
/*————–
Avatar
—————*/
.ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.image {
margin-right: @avatarMargin; display: inline-block; width: @avatarSize; height: @avatarSize; -webkit-border-radius: @circularRadius; -moz-border-radius: @circularRadius; border-radius: @circularRadius;
}
/*——————-
Floated
——————–*/
.ui.floated.image, .ui.floated.images {
float: left; margin-right: @floatedHorizontalMargin; margin-bottom: @floatedVerticalMargin;
} .ui.right.floated.images, .ui.right.floated.image {
float: right; margin-right: 0em; margin-bottom: @floatedVerticalMargin; margin-left: @floatedHorizontalMargin;
}
.ui.floated.images:last-child, .ui.floated.image:last-child {
margin-bottom: 0em;
}
.ui.centered.images, .ui.centered.image {
margin-left: auto; margin-right: auto;
}
/*————–
Sizes
—————*/
.ui.mini.images .image, .ui.mini.images img, .ui.mini.images svg, .ui.mini.image {
width: @miniWidth; font-size: @mini;
} .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg, .ui.tiny.image {
width: @tinyWidth; font-size: @tiny;
} .ui.small.images .image, .ui.small.images img, .ui.small.images svg, .ui.small.image {
width: @smallWidth; font-size: @small;
} .ui.medium.images .image, .ui.medium.images img, .ui.medium.images svg, .ui.medium.image {
width: @mediumWidth; font-size: @medium;
} .ui.large.images .image, .ui.large.images img, .ui.large.images svg, .ui.large.image {
width: @largeWidth; font-size: @large;
} .ui.big.images .image, .ui.big.images img, .ui.big.images svg, .ui.big.image {
width: @bigWidth; font-size: @big;
} .ui.huge.images .image, .ui.huge.images img, .ui.huge.images svg, .ui.huge.image {
width: @hugeWidth; font-size: @huge;
} .ui.massive.images .image, .ui.massive.images img, .ui.massive.images svg, .ui.massive.image {
width: @massiveWidth; font-size: @massive;
}
/*******************************
Groups
*******************************/
.ui.images {
font-size: 0em; margin: 0em -@imageHorizontalMargin 0rem;
}
.ui.images .image, .ui.images img, .ui.images svg {
display: inline-block; margin: 0em @imageHorizontalMargin @imageVerticalMargin;
}
.loadUIOverrides();