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.
389 lines
7.0 KiB
389 lines
7.0 KiB
/*
|
|
* # Semantic - Item
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Copyright 2014 Contributors
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
/*******************************
|
|
Theme
|
|
*******************************/
|
|
|
|
@type : 'view';
|
|
@element : 'item';
|
|
|
|
@import '../../semantic.config';
|
|
|
|
/*******************************
|
|
Standard
|
|
*******************************/
|
|
|
|
/*--------------
|
|
Item
|
|
---------------*/
|
|
|
|
.ui.items > .item {
|
|
table-layout: fixed;
|
|
|
|
display: @display;
|
|
margin: @margin;
|
|
width: @width;
|
|
min-height: @minHeight;
|
|
background: @background;
|
|
padding: @padding;
|
|
|
|
border: @border;
|
|
border-radius: @borderRadius;
|
|
box-shadow: @boxShadow;
|
|
transition: @transition;
|
|
z-index: @zIndex;
|
|
}
|
|
.ui.items > .item a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*--------------
|
|
Items
|
|
---------------*/
|
|
|
|
.ui.items {
|
|
margin: @itemsMargin;
|
|
}
|
|
|
|
.ui.items:first-child {
|
|
margin-top: 0em;
|
|
}
|
|
.ui.items:last-child {
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
/*--------------
|
|
Item
|
|
---------------*/
|
|
|
|
.ui.items > .item {
|
|
min-width: 100%;
|
|
}
|
|
.ui.items > .item:after {
|
|
display: block;
|
|
content: ' ';
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
.ui.items > .item:first-child {
|
|
margin-top: 0em;
|
|
}
|
|
.ui.items > .item:last-child {
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
|
|
|
|
/*--------------
|
|
Images
|
|
---------------*/
|
|
|
|
.ui.items > .item > .image {
|
|
position: relative;
|
|
display: @imageDisplay;
|
|
float: @imageFloat;
|
|
margin: @imageMargin;
|
|
padding: @imagePadding;
|
|
max-height: @imageMaxHeight;
|
|
vertical-align: @imageVerticalAlign;
|
|
}
|
|
.ui.items > .item > .image > img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: @imageBorderRadius;
|
|
border: @imageBorder;
|
|
}
|
|
|
|
.ui.items > .item > .image:only-child > img {
|
|
border-radius: @borderRadius;
|
|
}
|
|
|
|
/* Default Image Width */
|
|
.ui.items > .item > .image:not(.ui) {
|
|
width: @imageWidth;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Content
|
|
---------------*/
|
|
|
|
.ui.items > .item > .content {
|
|
display: block;
|
|
background: @contentBackground;
|
|
margin: @contentMargin;
|
|
padding: @contentPadding;
|
|
box-shadow: @contentBoxShadow;
|
|
font-size: @contentFontSize;
|
|
border: @contentBorder;
|
|
border-radius: @contentBorderRadius;
|
|
}
|
|
.ui.items > .item > .content:after {
|
|
display: block;
|
|
content: ' ';
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.ui.items > .item > .image + .content {
|
|
width: @contentWidth;
|
|
display: @contentDisplay;
|
|
margin-left: @contentOffset;
|
|
vertical-align: @contentVerticalAlign;
|
|
padding-left: @contentImagePadding;
|
|
}
|
|
|
|
.ui.items > .item > .content > .header {
|
|
display: inline-block;
|
|
margin: @headerMargin;
|
|
font-family: @headerFont;
|
|
font-weight: @headerFontWeight;
|
|
font-size: @headerFontSize;
|
|
color: @headerColor;
|
|
}
|
|
.ui.items > .item > .content > .meta + .description{
|
|
margin-top: @descriptionDistance;
|
|
}
|
|
|
|
/*--------------
|
|
Floated
|
|
---------------*/
|
|
|
|
.ui.items > .item .left.floated {
|
|
float: left;
|
|
}
|
|
.ui.items > .item .right.floated {
|
|
float: right;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Content Image
|
|
---------------*/
|
|
|
|
.ui.items > .item .content img {
|
|
display: inline-block;
|
|
vertical-align: @contentImageVerticalAlign;
|
|
width: @contentImageWidth;
|
|
}
|
|
.ui.items > .item img.avatar,
|
|
.ui.items > .item .avatar img {
|
|
width: @avatarSize;
|
|
height: @avatarSize;
|
|
border-radius: @avatarBorderRadius;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Description
|
|
---------------*/
|
|
|
|
.ui.items > .item > .content > .description {
|
|
font-size: @descriptionFontSize;
|
|
line-height: @descriptionLineHeight;
|
|
color: @descriptionColor;
|
|
}
|
|
|
|
/*--------------
|
|
Paragraph
|
|
---------------*/
|
|
|
|
.ui.items > .item > .content p {
|
|
margin: 0em 0em @paragraphDistance;
|
|
}
|
|
.ui.items > .item > .content p:last-child {
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
/*--------------
|
|
Meta
|
|
---------------*/
|
|
|
|
.ui.items > .item .meta {
|
|
font-size: @metaFontSize;
|
|
color: @metaColor;
|
|
}
|
|
.ui.items > .item .meta * {
|
|
margin-right: @metaSpacing;
|
|
}
|
|
.ui.items > .item .meta :last-child {
|
|
margin-right: 0em;
|
|
}
|
|
|
|
.ui.items > .item .meta .right.floated {
|
|
margin-right: 0em;
|
|
margin-left: @metaSpacing;
|
|
}
|
|
|
|
/*--------------
|
|
Links
|
|
---------------*/
|
|
|
|
/* Generic */
|
|
.ui.items > .item > .content a {
|
|
color: @contentLinkColor;
|
|
transition: @contentLinkTransition;
|
|
}
|
|
.ui.items > .item > .content a:hover {
|
|
color: @contentLinkHoverColor;
|
|
}
|
|
|
|
/* Header */
|
|
.ui.items > .item > .content > a.header {
|
|
color: @headerLinkColor;
|
|
}
|
|
.ui.items > .item > .content > a.header:hover {
|
|
color: @headerLinkHoverColor;
|
|
}
|
|
|
|
/* Meta */
|
|
.ui.items > .item .meta a {
|
|
color: @metaLinkColor;
|
|
}
|
|
.ui.items > .item .meta a:hover {
|
|
color: @metaLinkHoverColor;
|
|
}
|
|
|
|
|
|
|
|
/*--------------
|
|
Labels
|
|
---------------*/
|
|
|
|
/*-----Star----- */
|
|
|
|
/* Icon */
|
|
.ui.items > .item > .content .star.icon {
|
|
cursor: pointer;
|
|
opacity: @actionOpacity;
|
|
transition: @actionTransition;
|
|
}
|
|
.ui.items > .item > .content .star.icon:hover {
|
|
opacity: @actionHoverOpacity;
|
|
color: @starColor;
|
|
}
|
|
.ui.items > .item > .content .active.star.icon {
|
|
color: @starActiveColor;
|
|
}
|
|
|
|
/*-----Like----- */
|
|
|
|
/* Icon */
|
|
.ui.items > .item > .content .like.icon {
|
|
cursor: pointer;
|
|
opacity: @actionOpacity;
|
|
transition: @actionTransition;
|
|
}
|
|
.ui.items > .item > .content .like.icon:hover {
|
|
opacity: @actionHoverOpacity;
|
|
color: @likeColor;
|
|
}
|
|
.ui.items > .item > .content .active.like.icon {
|
|
color: @likeActiveColor;
|
|
}
|
|
|
|
/*----------------
|
|
Extra Content
|
|
-----------------*/
|
|
|
|
.ui.items > .item .extra {
|
|
display: @extraDisplay;
|
|
position: @extraPosition;
|
|
background: @extraBackground;
|
|
margin: @extraMargin;
|
|
width: @extraWidth;
|
|
padding: @extraPadding;
|
|
top: @extraTop;
|
|
left: @extraLeft;
|
|
color: @extraColor;
|
|
box-shadow: @extraBoxShadow;
|
|
transition: @extraTransition;
|
|
border-top: @extraDivider;
|
|
}
|
|
|
|
.ui.items > .item .extra:after {
|
|
display: block;
|
|
content: ' ';
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Variations
|
|
*******************************/
|
|
|
|
/*-------------------
|
|
Aligned
|
|
--------------------*/
|
|
|
|
.ui.items > .item > .image + .top.aligned.content {
|
|
vertical-align: top;
|
|
}
|
|
.ui.items > .item > .image + .middle.aligned.content {
|
|
vertical-align: middle;
|
|
}
|
|
.ui.items > .item > .image + .bottom.aligned.content {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
|
|
/*-------------------
|
|
Divided
|
|
--------------------*/
|
|
|
|
.ui.divided.items > .item {
|
|
border-top: @dividedBorder;
|
|
margin: @dividedMargin;
|
|
padding: @dividedPadding;
|
|
}
|
|
.ui.divided.items > .item:first-child {
|
|
border-top: none;
|
|
margin-top: @dividedFirstLastMargin;
|
|
padding-top: @dividedFirstLastPadding;
|
|
}
|
|
.ui.divided.items > .item:last-child {
|
|
margin-bottom: @dividedFirstLastMargin;
|
|
padding-bottom: @dividedFirstLastPadding;
|
|
}
|
|
|
|
/*-------------------
|
|
Link
|
|
--------------------*/
|
|
|
|
.ui.items a.item:hover,
|
|
.ui.link.item > .item:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui.items a.item:hover .content .header,
|
|
.ui.link.item > .item:hover .content .header {
|
|
color: @headerLinkHoverColor;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Size
|
|
---------------*/
|
|
|
|
.ui.items > .item {
|
|
font-size: @medium;
|
|
}
|
|
|
|
.loadUIOverrides();
|