Browse Source

#1425 adds svg to all image variations

pull/1481/head
jlukic 10 years ago
parent
commit
d912d06eeb
1 changed files with 24 additions and 1 deletions
  1. 25
      src/definitions/elements/image.less

25
src/definitions/elements/image.less

@ -29,9 +29,9 @@
max-width: 100%; max-width: 100%;
background-color: @placeholderColor; background-color: @placeholderColor;
} }
img.ui.image { img.ui.image {
display: block; display: block;
background: none;
} }
.ui.image svg, .ui.image svg,
@ -63,6 +63,7 @@ img.ui.image {
---------------*/ ---------------*/
.ui.inline.image, .ui.inline.image,
.ui.inline.image svg,
.ui.inline.image img { .ui.inline.image img {
display: inline-block; display: inline-block;
} }
@ -73,18 +74,21 @@ img.ui.image {
.ui.top.aligned.images .image, .ui.top.aligned.images .image,
.ui.top.aligned.image, .ui.top.aligned.image,
.ui.top.aligned.image svg,
.ui.top.aligned.image img { .ui.top.aligned.image img {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.ui.middle.aligned.images .image, .ui.middle.aligned.images .image,
.ui.middle.aligned.image, .ui.middle.aligned.image,
.ui.middle.aligned.image svg,
.ui.middle.aligned.image img { .ui.middle.aligned.image img {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.ui.bottom.aligned.images .image, .ui.bottom.aligned.images .image,
.ui.bottom.aligned.image, .ui.bottom.aligned.image,
.ui.bottom.aligned.image svg,
.ui.bottom.aligned.image img { .ui.bottom.aligned.image img {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
@ -96,7 +100,9 @@ img.ui.image {
.ui.rounded.images .image, .ui.rounded.images .image,
.ui.rounded.images img, .ui.rounded.images img,
.ui.rounded.images svg,
.ui.rounded.image img, .ui.rounded.image img,
.ui.rounded.image svg,
.ui.rounded.image { .ui.rounded.image {
border-radius: @roundedBorderRadius; border-radius: @roundedBorderRadius;
} }
@ -107,7 +113,9 @@ img.ui.image {
.ui.bordered.images .image, .ui.bordered.images .image,
.ui.bordered.images img, .ui.bordered.images img,
.ui.bordered.images svg,
.ui.bordered.image img, .ui.bordered.image img,
.ui.bordered.image svg,
img.ui.bordered.image { img.ui.bordered.image {
border: @imageBorder; border: @imageBorder;
} }
@ -123,7 +131,9 @@ img.ui.bordered.image {
.ui.circular.images .image, .ui.circular.images .image,
.ui.circular.images img, .ui.circular.images img,
.ui.circular.images svg,
.ui.circular.image img, .ui.circular.image img,
.ui.circular.image svg,
.ui.circular.image { .ui.circular.image {
-webkit-border-radius: @circularRadius; -webkit-border-radius: @circularRadius;
-moz-border-radius: @circularRadius; -moz-border-radius: @circularRadius;
@ -137,6 +147,8 @@ img.ui.bordered.image {
.ui.fluid.images, .ui.fluid.images,
.ui.fluid.image, .ui.fluid.image,
.ui.fluid.images img, .ui.fluid.images img,
.ui.fluid.images svg,
.ui.fluid.image svg,
.ui.fluid.image img { .ui.fluid.image img {
display: block; display: block;
width: 100%; width: 100%;
@ -149,7 +161,9 @@ img.ui.bordered.image {
.ui.avatar.images .image, .ui.avatar.images .image,
.ui.avatar.images img, .ui.avatar.images img,
.ui.avatar.images svg,
.ui.avatar.image img, .ui.avatar.image img,
.ui.avatar.image svg,
.ui.avatar.image { .ui.avatar.image {
margin-right: @avatarMargin; margin-right: @avatarMargin;
@ -199,48 +213,56 @@ img.ui.bordered.image {
.ui.mini.images .image, .ui.mini.images .image,
.ui.mini.images img, .ui.mini.images img,
.ui.mini.images svg,
.ui.mini.image { .ui.mini.image {
width: @miniWidth; width: @miniWidth;
font-size: @mini; font-size: @mini;
} }
.ui.tiny.images .image, .ui.tiny.images .image,
.ui.tiny.images img, .ui.tiny.images img,
.ui.tiny.images svg,
.ui.tiny.image { .ui.tiny.image {
width: @tinyWidth; width: @tinyWidth;
font-size: @tiny; font-size: @tiny;
} }
.ui.small.images .image, .ui.small.images .image,
.ui.small.images img, .ui.small.images img,
.ui.small.images svg,
.ui.small.image { .ui.small.image {
width: @smallWidth; width: @smallWidth;
font-size: @small; font-size: @small;
} }
.ui.medium.images .image, .ui.medium.images .image,
.ui.medium.images img, .ui.medium.images img,
.ui.medium.images svg,
.ui.medium.image { .ui.medium.image {
width: @mediumWidth; width: @mediumWidth;
font-size: @medium; font-size: @medium;
} }
.ui.large.images .image, .ui.large.images .image,
.ui.large.images img, .ui.large.images img,
.ui.large.images svg,
.ui.large.image { .ui.large.image {
width: @largeWidth; width: @largeWidth;
font-size: @large; font-size: @large;
} }
.ui.big.images .image, .ui.big.images .image,
.ui.big.images img, .ui.big.images img,
.ui.big.images svg,
.ui.big.image { .ui.big.image {
width: @bigWidth; width: @bigWidth;
font-size: @big; font-size: @big;
} }
.ui.huge.images .image, .ui.huge.images .image,
.ui.huge.images img, .ui.huge.images img,
.ui.huge.images svg,
.ui.huge.image { .ui.huge.image {
width: @hugeWidth; width: @hugeWidth;
font-size: @huge; font-size: @huge;
} }
.ui.massive.images .image, .ui.massive.images .image,
.ui.massive.images img, .ui.massive.images img,
.ui.massive.images svg,
.ui.massive.image { .ui.massive.image {
width: @massiveWidth; width: @massiveWidth;
font-size: @massive; font-size: @massive;
@ -257,6 +279,7 @@ img.ui.bordered.image {
.ui.images .image, .ui.images .image,
.ui.images img { .ui.images img {
.ui.images isvg{
display: inline-block; display: inline-block;
margin: 0em @imageHorizontalMargin @imageVerticalMargin; margin: 0em @imageHorizontalMargin @imageVerticalMargin;
} }

Loading…
Cancel
Save