You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
2.7 KiB

  1. /*
  2. * # Semantic Image
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Image
  14. *******************************/
  15. .ui.image {
  16. position: relative;
  17. display: inline-block;
  18. vertical-align: middle;
  19. max-width: 100%;
  20. background-color: rgba(0, 0, 0, 0.05);
  21. }
  22. img.ui.image {
  23. display: block;
  24. background: none;
  25. }
  26. .ui.image img {
  27. display: block;
  28. max-width: 100%;
  29. height: auto;
  30. }
  31. /*******************************
  32. States
  33. *******************************/
  34. .ui.disabled.image {
  35. cursor: default;
  36. opacity: 0.3;
  37. }
  38. /*******************************
  39. Variations
  40. *******************************/
  41. /*--------------
  42. Rounded
  43. ---------------*/
  44. .ui.rounded.images .image,
  45. .ui.rounded.images img,
  46. .ui.rounded.image img,
  47. .ui.rounded.image {
  48. -webkit-border-radius: 0.3125em;
  49. -moz-border-radius: 0.3125em;
  50. border-radius: 0.3125em;
  51. }
  52. /*--------------
  53. Circular
  54. ---------------*/
  55. .ui.circular.images .image,
  56. .ui.circular.images img,
  57. .ui.circular.image img,
  58. .ui.circular.image {
  59. -webkit-border-radius: 500rem;
  60. -moz-border-radius: 500rem;
  61. border-radius: 500rem;
  62. }
  63. /*--------------
  64. Avatar
  65. ---------------*/
  66. .ui.avatar.images .image,
  67. .ui.avatar.images img,
  68. .ui.avatar.image img,
  69. .ui.avatar.image {
  70. margin-right: 0.5em;
  71. display: inline-block;
  72. width: 2em;
  73. height: 2em;
  74. -webkit-border-radius: 500rem;
  75. -moz-border-radius: 500rem;
  76. border-radius: 500rem;
  77. }
  78. /*-------------------
  79. Floated
  80. --------------------*/
  81. .ui.floated.image,
  82. .ui.floated.images {
  83. float: left;
  84. margin-right: 1em;
  85. margin-bottom: 1em;
  86. }
  87. .ui.right.floated.images,
  88. .ui.right.floated.image {
  89. float: right;
  90. margin-bottom: 1em;
  91. margin-left: 1em;
  92. }
  93. /*--------------
  94. Sizes
  95. ---------------*/
  96. .ui.tiny.images .image,
  97. .ui.tiny.images img,
  98. .ui.tiny.image {
  99. width: 20px;
  100. font-size: 0.7rem;
  101. }
  102. .ui.mini.images .image,
  103. .ui.mini.images img,
  104. .ui.mini.image {
  105. width: 35px;
  106. font-size: 0.8rem;
  107. }
  108. .ui.small.images .image,
  109. .ui.small.images img,
  110. .ui.small.image {
  111. width: 80px;
  112. font-size: 0.9rem;
  113. }
  114. .ui.medium.images .image,
  115. .ui.medium.images img,
  116. .ui.medium.image {
  117. width: 300px;
  118. font-size: 1rem;
  119. }
  120. .ui.large.images .image,
  121. .ui.large.images img,
  122. .ui.large.image {
  123. width: 450px;
  124. font-size: 1.1rem;
  125. }
  126. .ui.huge.images .image,
  127. .ui.huge.images img,
  128. .ui.huge.image {
  129. width: 600px;
  130. font-size: 1.2rem;
  131. }
  132. /*******************************
  133. Groups
  134. *******************************/
  135. .ui.images {
  136. font-size: 0em;
  137. margin: 0em -0.25rem 0rem;
  138. }
  139. .ui.images .image,
  140. .ui.images img {
  141. display: inline-block;
  142. margin: 0em 0.25em 0.5em;
  143. }