item.css 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. /*!
  2. * # Semantic UI 2.4.2 - Item
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Standard
  12. *******************************/
  13. /*--------------
  14. Item
  15. ---------------*/
  16. .ui.items > .item {
  17. display: -webkit-box;
  18. display: -ms-flexbox;
  19. display: flex;
  20. margin: 1em 0em;
  21. width: 100%;
  22. min-height: 0px;
  23. background: transparent;
  24. padding: 0em;
  25. border: none;
  26. border-radius: 0rem;
  27. -webkit-box-shadow: none;
  28. box-shadow: none;
  29. -webkit-transition: -webkit-box-shadow 0.1s ease;
  30. transition: -webkit-box-shadow 0.1s ease;
  31. transition: box-shadow 0.1s ease;
  32. transition: box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  33. z-index: '';
  34. }
  35. .ui.items > .item a {
  36. cursor: pointer;
  37. }
  38. /*--------------
  39. Items
  40. ---------------*/
  41. .ui.items {
  42. margin: 1.5em 0em;
  43. }
  44. .ui.items:first-child {
  45. margin-top: 0em !important;
  46. }
  47. .ui.items:last-child {
  48. margin-bottom: 0em !important;
  49. }
  50. /*--------------
  51. Item
  52. ---------------*/
  53. .ui.items > .item:after {
  54. display: block;
  55. content: ' ';
  56. height: 0px;
  57. clear: both;
  58. overflow: hidden;
  59. visibility: hidden;
  60. }
  61. .ui.items > .item:first-child {
  62. margin-top: 0em;
  63. }
  64. .ui.items > .item:last-child {
  65. margin-bottom: 0em;
  66. }
  67. /*--------------
  68. Images
  69. ---------------*/
  70. .ui.items > .item > .image {
  71. position: relative;
  72. -webkit-box-flex: 0;
  73. -ms-flex: 0 0 auto;
  74. flex: 0 0 auto;
  75. display: block;
  76. float: none;
  77. margin: 0em;
  78. padding: 0em;
  79. max-height: '';
  80. -ms-flex-item-align: top;
  81. align-self: top;
  82. }
  83. .ui.items > .item > .image > img {
  84. display: block;
  85. width: 100%;
  86. height: auto;
  87. border-radius: 0.125rem;
  88. border: none;
  89. }
  90. .ui.items > .item > .image:only-child > img {
  91. border-radius: 0rem;
  92. }
  93. /*--------------
  94. Content
  95. ---------------*/
  96. .ui.items > .item > .content {
  97. display: block;
  98. -webkit-box-flex: 1;
  99. -ms-flex: 1 1 auto;
  100. flex: 1 1 auto;
  101. background: none;
  102. margin: 0em;
  103. padding: 0em;
  104. -webkit-box-shadow: none;
  105. box-shadow: none;
  106. font-size: 1em;
  107. border: none;
  108. border-radius: 0em;
  109. }
  110. .ui.items > .item > .content:after {
  111. display: block;
  112. content: ' ';
  113. height: 0px;
  114. clear: both;
  115. overflow: hidden;
  116. visibility: hidden;
  117. }
  118. .ui.items > .item > .image + .content {
  119. min-width: 0;
  120. width: auto;
  121. display: block;
  122. margin-left: 0em;
  123. -ms-flex-item-align: top;
  124. align-self: top;
  125. padding-left: 1.5em;
  126. }
  127. .ui.items > .item > .content > .header {
  128. display: inline-block;
  129. margin: -0.21425em 0em 0em;
  130. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  131. font-weight: bold;
  132. color: rgba(0, 0, 0, 0.85);
  133. }
  134. /* Default Header Size */
  135. .ui.items > .item > .content > .header:not(.ui) {
  136. font-size: 1.28571429em;
  137. }
  138. /*--------------
  139. Floated
  140. ---------------*/
  141. .ui.items > .item [class*="left floated"] {
  142. float: left;
  143. }
  144. .ui.items > .item [class*="right floated"] {
  145. float: right;
  146. }
  147. /*--------------
  148. Content Image
  149. ---------------*/
  150. .ui.items > .item .content img {
  151. -ms-flex-item-align: middle;
  152. align-self: middle;
  153. width: '';
  154. }
  155. .ui.items > .item img.avatar,
  156. .ui.items > .item .avatar img {
  157. width: '';
  158. height: '';
  159. border-radius: 500rem;
  160. }
  161. /*--------------
  162. Description
  163. ---------------*/
  164. .ui.items > .item > .content > .description {
  165. margin-top: 0.6em;
  166. max-width: auto;
  167. font-size: 1em;
  168. line-height: 1.4285em;
  169. color: rgba(0, 0, 0, 0.87);
  170. }
  171. /*--------------
  172. Paragraph
  173. ---------------*/
  174. .ui.items > .item > .content p {
  175. margin: 0em 0em 0.5em;
  176. }
  177. .ui.items > .item > .content p:last-child {
  178. margin-bottom: 0em;
  179. }
  180. /*--------------
  181. Meta
  182. ---------------*/
  183. .ui.items > .item .meta {
  184. margin: 0.5em 0em 0.5em;
  185. font-size: 1em;
  186. line-height: 1em;
  187. color: rgba(0, 0, 0, 0.6);
  188. }
  189. .ui.items > .item .meta * {
  190. margin-right: 0.3em;
  191. }
  192. .ui.items > .item .meta :last-child {
  193. margin-right: 0em;
  194. }
  195. .ui.items > .item .meta [class*="right floated"] {
  196. margin-right: 0em;
  197. margin-left: 0.3em;
  198. }
  199. /*--------------
  200. Links
  201. ---------------*/
  202. /* Generic */
  203. .ui.items > .item > .content a:not(.ui) {
  204. color: '';
  205. -webkit-transition: color 0.1s ease;
  206. transition: color 0.1s ease;
  207. }
  208. .ui.items > .item > .content a:not(.ui):hover {
  209. color: '';
  210. }
  211. /* Header */
  212. .ui.items > .item > .content > a.header {
  213. color: rgba(0, 0, 0, 0.85);
  214. }
  215. .ui.items > .item > .content > a.header:hover {
  216. color: #1e70bf;
  217. }
  218. /* Meta */
  219. .ui.items > .item .meta > a:not(.ui) {
  220. color: rgba(0, 0, 0, 0.4);
  221. }
  222. .ui.items > .item .meta > a:not(.ui):hover {
  223. color: rgba(0, 0, 0, 0.87);
  224. }
  225. /*--------------
  226. Labels
  227. ---------------*/
  228. /*-----Star----- */
  229. /* Icon */
  230. .ui.items > .item > .content .favorite.icon {
  231. cursor: pointer;
  232. opacity: 0.75;
  233. -webkit-transition: color 0.1s ease;
  234. transition: color 0.1s ease;
  235. }
  236. .ui.items > .item > .content .favorite.icon:hover {
  237. opacity: 1;
  238. color: #FFB70A;
  239. }
  240. .ui.items > .item > .content .active.favorite.icon {
  241. color: #FFE623;
  242. }
  243. /*-----Like----- */
  244. /* Icon */
  245. .ui.items > .item > .content .like.icon {
  246. cursor: pointer;
  247. opacity: 0.75;
  248. -webkit-transition: color 0.1s ease;
  249. transition: color 0.1s ease;
  250. }
  251. .ui.items > .item > .content .like.icon:hover {
  252. opacity: 1;
  253. color: #FF2733;
  254. }
  255. .ui.items > .item > .content .active.like.icon {
  256. color: #FF2733;
  257. }
  258. /*----------------
  259. Extra Content
  260. -----------------*/
  261. .ui.items > .item .extra {
  262. display: block;
  263. position: relative;
  264. background: none;
  265. margin: 0.5rem 0em 0em;
  266. width: 100%;
  267. padding: 0em 0em 0em;
  268. top: 0em;
  269. left: 0em;
  270. color: rgba(0, 0, 0, 0.4);
  271. -webkit-box-shadow: none;
  272. box-shadow: none;
  273. -webkit-transition: color 0.1s ease;
  274. transition: color 0.1s ease;
  275. border-top: none;
  276. }
  277. .ui.items > .item .extra > * {
  278. margin: 0.25rem 0.5rem 0.25rem 0em;
  279. }
  280. .ui.items > .item .extra > [class*="right floated"] {
  281. margin: 0.25rem 0em 0.25rem 0.5rem;
  282. }
  283. .ui.items > .item .extra:after {
  284. display: block;
  285. content: ' ';
  286. height: 0px;
  287. clear: both;
  288. overflow: hidden;
  289. visibility: hidden;
  290. }
  291. /*******************************
  292. Responsive
  293. *******************************/
  294. /* Default Image Width */
  295. .ui.items > .item > .image:not(.ui) {
  296. width: 175px;
  297. }
  298. /* Tablet Only */
  299. @media only screen and (min-width: 768px) and (max-width: 991px) {
  300. .ui.items > .item {
  301. margin: 1em 0em;
  302. }
  303. .ui.items > .item > .image:not(.ui) {
  304. width: 150px;
  305. }
  306. .ui.items > .item > .image + .content {
  307. display: block;
  308. padding: 0em 0em 0em 1em;
  309. }
  310. }
  311. /* Mobile Only */
  312. @media only screen and (max-width: 767px) {
  313. .ui.items:not(.unstackable) > .item {
  314. -webkit-box-orient: vertical;
  315. -webkit-box-direction: normal;
  316. -ms-flex-direction: column;
  317. flex-direction: column;
  318. margin: 2em 0em;
  319. }
  320. .ui.items:not(.unstackable) > .item > .image {
  321. display: block;
  322. margin-left: auto;
  323. margin-right: auto;
  324. }
  325. .ui.items:not(.unstackable) > .item > .image,
  326. .ui.items:not(.unstackable) > .item > .image > img {
  327. max-width: 100% !important;
  328. width: auto !important;
  329. max-height: 250px !important;
  330. }
  331. .ui.items:not(.unstackable) > .item > .image + .content {
  332. display: block;
  333. padding: 1.5em 0em 0em;
  334. }
  335. }
  336. /*******************************
  337. Variations
  338. *******************************/
  339. /*-------------------
  340. Aligned
  341. --------------------*/
  342. .ui.items > .item > .image + [class*="top aligned"].content {
  343. -ms-flex-item-align: start;
  344. align-self: flex-start;
  345. }
  346. .ui.items > .item > .image + [class*="middle aligned"].content {
  347. -ms-flex-item-align: center;
  348. align-self: center;
  349. }
  350. .ui.items > .item > .image + [class*="bottom aligned"].content {
  351. -ms-flex-item-align: end;
  352. align-self: flex-end;
  353. }
  354. /*--------------
  355. Relaxed
  356. ---------------*/
  357. .ui.relaxed.items > .item {
  358. margin: 1.5em 0em;
  359. }
  360. .ui[class*="very relaxed"].items > .item {
  361. margin: 2em 0em;
  362. }
  363. /*-------------------
  364. Divided
  365. --------------------*/
  366. .ui.divided.items > .item {
  367. border-top: 1px solid rgba(34, 36, 38, 0.15);
  368. margin: 0em;
  369. padding: 1em 0em;
  370. }
  371. .ui.divided.items > .item:first-child {
  372. border-top: none;
  373. margin-top: 0em !important;
  374. padding-top: 0em !important;
  375. }
  376. .ui.divided.items > .item:last-child {
  377. margin-bottom: 0em !important;
  378. padding-bottom: 0em !important;
  379. }
  380. /* Relaxed Divided */
  381. .ui.relaxed.divided.items > .item {
  382. margin: 0em;
  383. padding: 1.5em 0em;
  384. }
  385. .ui[class*="very relaxed"].divided.items > .item {
  386. margin: 0em;
  387. padding: 2em 0em;
  388. }
  389. /*-------------------
  390. Link
  391. --------------------*/
  392. .ui.items a.item:hover,
  393. .ui.link.items > .item:hover {
  394. cursor: pointer;
  395. }
  396. .ui.items a.item:hover .content .header,
  397. .ui.link.items > .item:hover .content .header {
  398. color: #1e70bf;
  399. }
  400. /*--------------
  401. Size
  402. ---------------*/
  403. .ui.items > .item {
  404. font-size: 1em;
  405. }
  406. /*---------------
  407. Unstackable
  408. ----------------*/
  409. @media only screen and (max-width: 767px) {
  410. .ui.unstackable.items > .item > .image,
  411. .ui.unstackable.items > .item > .image > img {
  412. width: 125px !important;
  413. }
  414. }
  415. /*******************************
  416. Theme Overrides
  417. *******************************/
  418. /*******************************
  419. User Variable Overrides
  420. *******************************/