replace zxq.co/ripple/hanayo
This commit is contained in:
Alicia
268
semantic/src/definitions/views/ad.less
Normal file
268
semantic/src/definitions/views/ad.less
Normal file
@@ -0,0 +1,268 @@
|
||||
/*!
|
||||
* # Semantic UI - Ad
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2013 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'ad';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Advertisement
|
||||
*******************************/
|
||||
|
||||
.ui.ad {
|
||||
display: block;
|
||||
overflow: @overflow;
|
||||
margin: @margin;
|
||||
}
|
||||
|
||||
.ui.ad:first-child {
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.ui.ad:last-child {
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.ui.ad iframe {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Common
|
||||
---------------*/
|
||||
|
||||
/* Leaderboard */
|
||||
.ui.leaderboard.ad {
|
||||
width: 728px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
/* Medium Rectangle */
|
||||
.ui[class*="medium rectangle"].ad {
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Large Rectangle */
|
||||
.ui[class*="large rectangle"].ad {
|
||||
width: 336px;
|
||||
height: 280px;
|
||||
}
|
||||
/* Half Page */
|
||||
.ui[class*="half page"].ad {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Square
|
||||
---------------*/
|
||||
|
||||
/* Square */
|
||||
.ui.square.ad {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Small Square */
|
||||
.ui[class*="small square"].ad {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Rectangle
|
||||
---------------*/
|
||||
|
||||
/* Small Rectangle */
|
||||
.ui[class*="small rectangle"].ad {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* Vertical Rectangle */
|
||||
.ui[class*="vertical rectangle"].ad {
|
||||
width: 240px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Button
|
||||
---------------*/
|
||||
|
||||
.ui.button.ad {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
}
|
||||
.ui[class*="square button"].ad {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
.ui[class*="small button"].ad {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Skyscrapers
|
||||
---------------*/
|
||||
|
||||
/* Skyscraper */
|
||||
.ui.skyscraper.ad {
|
||||
width: 120px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/* Wide Skyscraper */
|
||||
.ui[class*="wide skyscraper"].ad {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Banners
|
||||
---------------*/
|
||||
|
||||
/* Banner */
|
||||
.ui.banner.ad {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* Vertical Banner */
|
||||
.ui[class*="vertical banner"].ad {
|
||||
width: 120px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* Top Banner */
|
||||
.ui[class*="top banner"].ad {
|
||||
width: 930px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
/* Half Banner */
|
||||
.ui[class*="half banner"].ad {
|
||||
width: 234px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Boards
|
||||
---------------*/
|
||||
|
||||
/* Leaderboard */
|
||||
.ui[class*="large leaderboard"].ad {
|
||||
width: 970px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
/* Billboard */
|
||||
.ui.billboard.ad {
|
||||
width: 970px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Panorama
|
||||
---------------*/
|
||||
|
||||
/* Panorama */
|
||||
.ui.panorama.ad {
|
||||
width: 980px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Netboard
|
||||
---------------*/
|
||||
|
||||
/* Netboard */
|
||||
.ui.netboard.ad {
|
||||
width: 580px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------
|
||||
Mobile
|
||||
---------------*/
|
||||
|
||||
/* Large Mobile Banner */
|
||||
.ui[class*="large mobile banner"].ad {
|
||||
width: 320px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* Mobile Leaderboard */
|
||||
.ui[class*="mobile leaderboard"].ad {
|
||||
width: 320px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/* Mobile Sizes */
|
||||
.ui.mobile.ad {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
.ui.mobile.ad {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.centered.ad {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.test.ad {
|
||||
position: relative;
|
||||
background: @testBackground;
|
||||
}
|
||||
.ui.test.ad:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
content: @testText;
|
||||
color: @testColor;
|
||||
font-size: @testFontSize;
|
||||
font-weight: @testFontWeight;
|
||||
}
|
||||
.ui.mobile.test.ad:after {
|
||||
font-size: @testMobileFontSize;
|
||||
}
|
||||
.ui.test.ad[data-text]:after {
|
||||
content: attr(data-text);
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
1059
semantic/src/definitions/views/card.less
Normal file
1059
semantic/src/definitions/views/card.less
Normal file
File diff suppressed because it is too large
Load Diff
269
semantic/src/definitions/views/comment.less
Normal file
269
semantic/src/definitions/views/comment.less
Normal file
@@ -0,0 +1,269 @@
|
||||
/*!
|
||||
* # Semantic UI - Comment
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'comment';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Comments
|
||||
---------------*/
|
||||
|
||||
.ui.comments {
|
||||
margin: @margin;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Comment
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment {
|
||||
position: relative;
|
||||
background: @commentBackground;
|
||||
margin: @commentMargin;
|
||||
padding: @commentPadding;
|
||||
border: @commentBorder;
|
||||
border-top: @commentDivider;
|
||||
line-height: @commentLineHeight;
|
||||
}
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: @firstCommentMargin;
|
||||
padding-top: @firstCommentPadding;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Nested Comments
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .comments {
|
||||
margin: @nestedCommentsMargin;
|
||||
padding: @nestedCommentsPadding;
|
||||
}
|
||||
.ui.comments .comment .comments:before{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.ui.comments .comment .comments .comment {
|
||||
border: @nestedCommentBorder;
|
||||
border-top: @nestedCommentDivider;
|
||||
background: @nestedCommentBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Avatar
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .avatar {
|
||||
display: @avatarDisplay;
|
||||
width: @avatarWidth;
|
||||
height: @avatarHeight;
|
||||
float: @avatarFloat;
|
||||
margin: @avatarMargin;
|
||||
}
|
||||
.ui.comments .comment img.avatar,
|
||||
.ui.comments .comment .avatar img {
|
||||
display: block;
|
||||
margin: 0em auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @avatarBorderRadius;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: block;
|
||||
}
|
||||
/* If there is an avatar move content over */
|
||||
.ui.comments .comment > .avatar ~ .content {
|
||||
margin-left: @contentMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Author
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .author {
|
||||
font-size: @authorFontSize;
|
||||
color: @authorColor;
|
||||
font-weight: @authorFontWeight;
|
||||
}
|
||||
.ui.comments .comment a.author {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.comments .comment a.author:hover {
|
||||
color: @authorHoverColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Metadata
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .metadata {
|
||||
display: @metadataDisplay;
|
||||
margin-left: @metadataSpacing;
|
||||
color: @metadataColor;
|
||||
font-size: @metadataFontSize;
|
||||
}
|
||||
.ui.comments .comment .metadata > * {
|
||||
display: inline-block;
|
||||
margin: 0em @metadataContentSpacing 0em 0em;
|
||||
}
|
||||
.ui.comments .comment .metadata > :last-child {
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Comment Text
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: @textMargin;
|
||||
font-size: @textFontSize;
|
||||
word-wrap: @textWordWrap;
|
||||
color: @textColor;
|
||||
line-height: @textLineHeight;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
User Actions
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .actions {
|
||||
font-size: @actionFontSize;
|
||||
}
|
||||
.ui.comments .comment .actions a {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0em @actionContentDistance 0em 0em;
|
||||
color: @actionLinkColor;
|
||||
}
|
||||
.ui.comments .comment .actions a:last-child {
|
||||
margin-right: 0em;
|
||||
}
|
||||
.ui.comments .comment .actions a.active,
|
||||
.ui.comments .comment .actions a:hover {
|
||||
color: @actionLinkHoverColor;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Reply Form
|
||||
---------------------*/
|
||||
|
||||
.ui.comments > .reply.form {
|
||||
margin-top: @replyDistance;
|
||||
}
|
||||
.ui.comments .comment .reply.form {
|
||||
width: 100%;
|
||||
margin-top: @commentReplyDistance;
|
||||
}
|
||||
.ui.comments .reply.form textarea {
|
||||
font-size: @replyFontSize;
|
||||
height: @replyHeight;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
State
|
||||
*******************************/
|
||||
|
||||
.ui.collapsed.comments,
|
||||
.ui.comments .collapsed.comments,
|
||||
.ui.comments .collapsed.comment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Threaded
|
||||
---------------------*/
|
||||
|
||||
.ui.threaded.comments .comment .comments {
|
||||
margin: @threadedCommentMargin;
|
||||
padding: @threadedCommentPadding;
|
||||
box-shadow: @threadedCommentBoxShadow;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Minimal
|
||||
---------------------*/
|
||||
|
||||
.ui.minimal.comments .comment .actions {
|
||||
opacity: 0;
|
||||
position: @minimalActionPosition;
|
||||
top: @minimalActionTop;
|
||||
right: @minimalActionRight;
|
||||
left: @minimalActionLeft;
|
||||
transition: @minimalTransition;
|
||||
transition-delay: @minimalTransitionDelay;
|
||||
}
|
||||
.ui.minimal.comments .comment > .content:hover > .actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.mini.comments {
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.comments {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.comments {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.comments {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.comments {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.big.comments {
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.huge.comments {
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.comments {
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
278
semantic/src/definitions/views/feed.less
Normal file
278
semantic/src/definitions/views/feed.less
Normal file
@@ -0,0 +1,278 @@
|
||||
/*!
|
||||
* # Semantic UI - Feed
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'feed';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Activity Feed
|
||||
*******************************/
|
||||
|
||||
.ui.feed {
|
||||
margin: @margin;
|
||||
}
|
||||
.ui.feed:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.feed:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Event */
|
||||
.ui.feed > .event {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: @eventWidth;
|
||||
padding: @eventPadding;
|
||||
margin: @eventMargin;
|
||||
background: @eventBackground;
|
||||
border-top: @eventDivider;
|
||||
}
|
||||
.ui.feed > .event:first-child {
|
||||
border-top: 0px;
|
||||
padding-top: 0em;
|
||||
}
|
||||
.ui.feed > .event:last-child {
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
/* Event Label */
|
||||
.ui.feed > .event > .label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: @labelWidth;
|
||||
height: @labelHeight;
|
||||
align-self: @labelAlignSelf;
|
||||
text-align: @labelTextAlign;
|
||||
}
|
||||
.ui.feed > .event > .label .icon {
|
||||
opacity: @iconLabelOpacity;
|
||||
font-size: @iconLabelSize;
|
||||
width: @iconLabelWidth;
|
||||
padding: @iconLabelPadding;
|
||||
background: @iconLabelBackground;
|
||||
border: @iconLabelBorder;
|
||||
border-radius: @iconLabelBorderRadius;
|
||||
color: @iconLabelColor;
|
||||
}
|
||||
.ui.feed > .event > .label img {
|
||||
width: @imageLabelWidth;
|
||||
height: @imageLabelHeight;
|
||||
border-radius: @imageLabelBorderRadius;
|
||||
}
|
||||
.ui.feed > .event > .label + .content {
|
||||
margin: @labeledContentMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
/* Content */
|
||||
.ui.feed > .event > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
align-self: @contentAlignSelf;
|
||||
text-align: @contentTextAlign;
|
||||
word-wrap: @contentWordWrap;
|
||||
}
|
||||
.ui.feed > .event:last-child > .content {
|
||||
padding-bottom: @lastLabeledContentPadding;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.feed > .event > .content a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Date
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .date {
|
||||
margin: @dateMargin;
|
||||
padding: @datePadding;
|
||||
color: @dateColor;
|
||||
font-weight: @dateFontWeight;
|
||||
font-size: @dateFontSize;
|
||||
font-style: @dateFontStyle;
|
||||
color: @dateColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Summary
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .summary {
|
||||
margin: @summaryMargin;
|
||||
font-size: @summaryFontSize;
|
||||
font-weight: @summaryFontWeight;
|
||||
color: @summaryColor;
|
||||
}
|
||||
|
||||
/* Summary Image */
|
||||
.ui.feed > .event > .content .summary img {
|
||||
display: inline-block;
|
||||
width: @summaryImageWidth;
|
||||
height: @summaryImageHeight;
|
||||
margin: @summaryImageMargin;
|
||||
border-radius: @summaryImageBorderRadius;
|
||||
vertical-align: @summaryImageVerticalAlign;
|
||||
}
|
||||
/*--------------
|
||||
User
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .user {
|
||||
display: inline-block;
|
||||
font-weight: @userFontWeight;
|
||||
margin-right: @userDistance;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.feed > .event > .content .user img {
|
||||
margin: @userImageMargin;
|
||||
width: @userImageWidth;
|
||||
height: @userImageHeight;
|
||||
vertical-align: @userImageVerticalAlign;
|
||||
}
|
||||
/*--------------
|
||||
Inline Date
|
||||
---------------*/
|
||||
|
||||
/* Date inside Summary */
|
||||
.ui.feed > .event > .content .summary > .date {
|
||||
display: @summaryDateDisplay;
|
||||
float: @summaryDateFloat;
|
||||
font-weight: @summaryDateFontWeight;
|
||||
font-size: @summaryDateFontSize;
|
||||
font-style: @summaryDateFontStyle;
|
||||
margin: @summaryDateMargin;
|
||||
padding: @summaryDatePadding;
|
||||
color: @summaryDateColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Extra Summary
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .extra {
|
||||
margin: @extraMargin;
|
||||
background: @extraBackground;
|
||||
padding: @extraPadding;
|
||||
color: @extraColor;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.ui.feed > .event > .content .extra.images img {
|
||||
display: inline-block;
|
||||
margin: @extraImageMargin;
|
||||
width: @extraImageWidth;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.feed > .event > .content .extra.text {
|
||||
padding: @extraTextPadding;
|
||||
border-left: @extraTextPointer;
|
||||
font-size: @extraTextFontSize;
|
||||
max-width: @extraTextMaxWidth;
|
||||
line-height: @extraTextLineHeight;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Meta
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .meta {
|
||||
display: @metadataDisplay;
|
||||
font-size: @metadataFontSize;
|
||||
margin: @metadataMargin;
|
||||
background: @metadataBackground;
|
||||
border: @metadataBorder;
|
||||
border-radius: @metadataBorderRadius;
|
||||
box-shadow: @metadataBoxShadow;
|
||||
padding: @metadataPadding;
|
||||
color: @metadataColor;
|
||||
}
|
||||
|
||||
.ui.feed > .event > .content .meta > * {
|
||||
position: relative;
|
||||
margin-left: @metadataElementSpacing;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > *:after {
|
||||
content: @metadataDivider;
|
||||
color: @metadataDividerColor;
|
||||
top: 0em;
|
||||
left: @metadataDividerOffset;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.feed > .event > .content .meta .like {
|
||||
color: @likeColor;
|
||||
transition: @likeTransition;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .like:hover .icon {
|
||||
color: @likeHoverColor;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .active.like .icon {
|
||||
color: @likeActiveColor;
|
||||
}
|
||||
|
||||
/* First element */
|
||||
.ui.feed > .event > .content .meta > :first-child {
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > :first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Action */
|
||||
.ui.feed > .event > .content .meta a,
|
||||
.ui.feed > .event > .content .meta > .icon {
|
||||
cursor: @metadataActionCursor;
|
||||
opacity: @metadataActionOpacity;
|
||||
color: @metadataActionColor;
|
||||
transition: @metadataActionTransition;
|
||||
}
|
||||
.ui.feed > .event > .content .meta a:hover,
|
||||
.ui.feed > .event > .content .meta a:hover .icon,
|
||||
.ui.feed > .event > .content .meta > .icon:hover {
|
||||
color: @metadataActionHoverColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.small.feed {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.feed {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.feed {
|
||||
font-size: @large;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
464
semantic/src/definitions/views/item.less
Normal file
464
semantic/src/definitions/views/item.less
Normal file
@@ -0,0 +1,464 @@
|
||||
/*!
|
||||
* # Semantic UI - Item
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'item';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Item
|
||||
---------------*/
|
||||
|
||||
.ui.items > .item {
|
||||
display: @display;
|
||||
margin: @itemSpacing 0em;
|
||||
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: @groupMargin;
|
||||
}
|
||||
|
||||
.ui.items:first-child {
|
||||
margin-top: 0em !important;
|
||||
}
|
||||
.ui.items:last-child {
|
||||
margin-bottom: 0em !important;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Item
|
||||
---------------*/
|
||||
|
||||
.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;
|
||||
flex: 0 0 auto;
|
||||
display: @imageDisplay;
|
||||
float: @imageFloat;
|
||||
margin: @imageMargin;
|
||||
padding: @imagePadding;
|
||||
max-height: @imageMaxHeight;
|
||||
align-self: @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;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.items > .item > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
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 {
|
||||
min-width: 0;
|
||||
width: @contentWidth;
|
||||
display: @contentDisplay;
|
||||
margin-left: @contentOffset;
|
||||
align-self: @contentVerticalAlign;
|
||||
padding-left: @contentImageDistance;
|
||||
}
|
||||
|
||||
.ui.items > .item > .content > .header {
|
||||
display: inline-block;
|
||||
margin: @headerMargin;
|
||||
font-family: @headerFont;
|
||||
font-weight: @headerFontWeight;
|
||||
color: @headerColor;
|
||||
}
|
||||
/* Default Header Size */
|
||||
.ui.items > .item > .content > .header:not(.ui) {
|
||||
font-size: @headerFontSize;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Floated
|
||||
---------------*/
|
||||
|
||||
.ui.items > .item [class*="left floated"] {
|
||||
float: left;
|
||||
}
|
||||
.ui.items > .item [class*="right floated"] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Content Image
|
||||
---------------*/
|
||||
|
||||
.ui.items > .item .content img {
|
||||
align-self: @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 {
|
||||
margin-top: @descriptionDistance;
|
||||
max-width: @descriptionMaxWidth;
|
||||
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 {
|
||||
margin: @metaMargin;
|
||||
font-size: @metaFontSize;
|
||||
line-height: @metaLineHeight;
|
||||
color: @metaColor;
|
||||
}
|
||||
.ui.items > .item .meta * {
|
||||
margin-right: @metaSpacing;
|
||||
}
|
||||
.ui.items > .item .meta :last-child {
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
.ui.items > .item .meta [class*="right floated"] {
|
||||
margin-right: 0em;
|
||||
margin-left: @metaSpacing;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Links
|
||||
---------------*/
|
||||
|
||||
/* Generic */
|
||||
.ui.items > .item > .content a:not(.ui) {
|
||||
color: @contentLinkColor;
|
||||
transition: @contentLinkTransition;
|
||||
}
|
||||
.ui.items > .item > .content a:not(.ui):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:not(.ui) {
|
||||
color: @metaLinkColor;
|
||||
}
|
||||
.ui.items > .item .meta > a:not(.ui):hover {
|
||||
color: @metaLinkHoverColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------
|
||||
Labels
|
||||
---------------*/
|
||||
|
||||
/*-----Star----- */
|
||||
|
||||
/* Icon */
|
||||
.ui.items > .item > .content .favorite.icon {
|
||||
cursor: pointer;
|
||||
opacity: @actionOpacity;
|
||||
transition: @actionTransition;
|
||||
}
|
||||
.ui.items > .item > .content .favorite.icon:hover {
|
||||
opacity: @actionHoverOpacity;
|
||||
color: @favoriteColor;
|
||||
}
|
||||
.ui.items > .item > .content .active.favorite.icon {
|
||||
color: @favoriteActiveColor;
|
||||
}
|
||||
|
||||
/*-----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 > * {
|
||||
margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0em;
|
||||
}
|
||||
.ui.items > .item .extra > [class*="right floated"] {
|
||||
margin: (@extraRowSpacing / 2) 0em (@extraRowSpacing / 2) @extraHorizontalSpacing;
|
||||
}
|
||||
|
||||
.ui.items > .item .extra:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
height: 0px;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Responsive
|
||||
*******************************/
|
||||
|
||||
/* Default Image Width */
|
||||
.ui.items > .item > .image:not(.ui) {
|
||||
width: @imageWidth;
|
||||
}
|
||||
|
||||
|
||||
/* Tablet Only */
|
||||
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
|
||||
.ui.items > .item {
|
||||
margin: @tabletItemSpacing 0em;
|
||||
}
|
||||
.ui.items > .item > .image:not(.ui) {
|
||||
width: @tabletImageWidth;
|
||||
}
|
||||
.ui.items > .item > .image + .content {
|
||||
display: block;
|
||||
padding: 0em 0em 0em @tabletContentImageDistance;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Mobile Only */
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.ui.items > .item {
|
||||
flex-direction: column;
|
||||
margin: @mobileItemSpacing 0em;
|
||||
}
|
||||
.ui.items > .item > .image {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.items > .item > .image,
|
||||
.ui.items > .item > .image > img {
|
||||
max-width: 100% !important;
|
||||
width: @mobileImageWidth !important;
|
||||
max-height: @mobileImageMaxHeight !important;
|
||||
}
|
||||
.ui.items > .item > .image + .content {
|
||||
display: block;
|
||||
padding: @mobileContentImageDistance 0em 0em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui.items > .item > .image + [class*="top aligned"].content {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.ui.items > .item > .image + [class*="middle aligned"].content {
|
||||
align-self: center;
|
||||
}
|
||||
.ui.items > .item > .image + [class*="bottom aligned"].content {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Relaxed
|
||||
---------------*/
|
||||
|
||||
.ui.relaxed.items > .item {
|
||||
margin: @relaxedItemSpacing 0em;
|
||||
}
|
||||
.ui[class*="very relaxed"].items > .item {
|
||||
margin: @veryRelaxedItemSpacing 0em;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Divided
|
||||
--------------------*/
|
||||
|
||||
.ui.divided.items > .item {
|
||||
border-top: @dividedBorder;
|
||||
margin: @dividedMargin;
|
||||
padding: @dividedPadding;
|
||||
}
|
||||
.ui.divided.items > .item:first-child {
|
||||
border-top: none;
|
||||
margin-top: @dividedFirstLastMargin !important;
|
||||
padding-top: @dividedFirstLastPadding !important;
|
||||
}
|
||||
.ui.divided.items > .item:last-child {
|
||||
margin-bottom: @dividedFirstLastMargin !important;
|
||||
padding-bottom: @dividedFirstLastPadding !important;
|
||||
}
|
||||
|
||||
/* Relaxed Divided */
|
||||
.ui.relaxed.divided.items > .item {
|
||||
margin: 0em;
|
||||
padding: @relaxedItemSpacing 0em;
|
||||
}
|
||||
.ui[class*="very relaxed"].divided.items > .item {
|
||||
margin: 0em;
|
||||
padding: @veryRelaxedItemSpacing 0em;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
.ui.items a.item:hover,
|
||||
.ui.link.items > .item:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.items a.item:hover .content .header,
|
||||
.ui.link.items > .item:hover .content .header {
|
||||
color: @headerLinkHoverColor;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Size
|
||||
---------------*/
|
||||
|
||||
.ui.items > .item {
|
||||
font-size: @medium;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
557
semantic/src/definitions/views/statistic.less
Normal file
557
semantic/src/definitions/views/statistic.less
Normal file
@@ -0,0 +1,557 @@
|
||||
/*!
|
||||
* # Semantic UI - Statistic
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'statistic';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Statistic
|
||||
*******************************/
|
||||
|
||||
/* Standalone */
|
||||
.ui.statistic {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: @margin;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
.ui.statistic + .ui.statistic {
|
||||
margin: 0em 0em 0em @horizontalSpacing;
|
||||
}
|
||||
|
||||
.ui.statistic:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.statistic:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Group
|
||||
*******************************/
|
||||
|
||||
/* Grouped */
|
||||
.ui.statistics {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ui.statistics > .statistic {
|
||||
display: inline-flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: column;
|
||||
margin: @elementMargin;
|
||||
max-width: @elementMaxWidth;
|
||||
}
|
||||
.ui.statistics {
|
||||
display: flex;
|
||||
margin: @groupMargin;
|
||||
}
|
||||
|
||||
/* Clearing */
|
||||
.ui.statistics:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
height: 0px;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.statistics:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.statistics:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value,
|
||||
.ui.statistic > .value {
|
||||
font-family: @valueFont;
|
||||
font-size: @valueSize;
|
||||
font-weight: @valueFontWeight;
|
||||
line-height: @valueLineHeight;
|
||||
color: @valueColor;
|
||||
text-transform: @valueTextTransform;
|
||||
text-align: @textAlign;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Label
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .label,
|
||||
.ui.statistic > .label {
|
||||
font-family: @labelFont;
|
||||
font-size: @labelSize;
|
||||
font-weight: @labelFontWeight;
|
||||
color: @labelColor;
|
||||
text-transform: @labelTextTransform;
|
||||
text-align: @textAlign;
|
||||
}
|
||||
|
||||
/* Top Label */
|
||||
.ui.statistics .statistic > .label ~ .value,
|
||||
.ui.statistic > .label ~ .value {
|
||||
margin-top: @topLabelDistance;
|
||||
}
|
||||
|
||||
/* Bottom Label */
|
||||
.ui.statistics .statistic > .value ~ .label,
|
||||
.ui.statistic > .value ~ .label {
|
||||
margin-top: @bottomLabelDistance;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Icon Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value .icon,
|
||||
.ui.statistic > .value .icon {
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Text Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .text.value,
|
||||
.ui.statistic > .text.value {
|
||||
line-height: @textValueLineHeight;
|
||||
min-height: @textValueMinHeight;
|
||||
font-weight: @textValueFontWeight;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.statistics .statistic > .text.value + .label,
|
||||
.ui.statistic > .text.value + .label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Image Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value img,
|
||||
.ui.statistic > .value img {
|
||||
max-height: @imageHeight;
|
||||
vertical-align: @imageVerticalAlign;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Count
|
||||
---------------*/
|
||||
|
||||
|
||||
.ui.ten.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.ten.statistics .statistic {
|
||||
min-width: @tenColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.nine.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.nine.statistics .statistic {
|
||||
min-width: @nineColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.eight.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.eight.statistics .statistic {
|
||||
min-width: @eightColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.seven.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.seven.statistics .statistic {
|
||||
min-width: @sevenColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.six.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.six.statistics .statistic {
|
||||
min-width: @sixColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.five.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.five.statistics .statistic {
|
||||
min-width: @fiveColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.four.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.four.statistics .statistic {
|
||||
min-width: @fourColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.three.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.three.statistics .statistic {
|
||||
min-width: @threeColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.two.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.two.statistics .statistic {
|
||||
min-width: @twoColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.one.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.one.statistics .statistic {
|
||||
min-width: @oneColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.statistic {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.ui.horizontal.statistics {
|
||||
flex-direction: column;
|
||||
margin: 0em;
|
||||
max-width: none;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: none;
|
||||
margin: @horizontalGroupElementMargin;
|
||||
}
|
||||
|
||||
.ui.horizontal.statistic > .text.value,
|
||||
.ui.horizontal.statistics > .statistic > .text.value {
|
||||
min-height: 0em !important;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .value .icon,
|
||||
.ui.horizontal.statistic > .value .icon {
|
||||
width: @iconWidth;
|
||||
}
|
||||
|
||||
.ui.horizontal.statistics .statistic > .value,
|
||||
.ui.horizontal.statistic > .value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .label,
|
||||
.ui.horizontal.statistic > .label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0em 0em 0em @horizontalLabelDistance;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
.ui.red.statistics .statistic > .value,
|
||||
.ui.statistics .red.statistic > .value,
|
||||
.ui.red.statistic > .value {
|
||||
color: @red;
|
||||
}
|
||||
.ui.orange.statistics .statistic > .value,
|
||||
.ui.statistics .orange.statistic > .value,
|
||||
.ui.orange.statistic > .value {
|
||||
color: @orange;
|
||||
}
|
||||
.ui.yellow.statistics .statistic > .value,
|
||||
.ui.statistics .yellow.statistic > .value,
|
||||
.ui.yellow.statistic > .value {
|
||||
color: @yellow;
|
||||
}
|
||||
.ui.olive.statistics .statistic > .value,
|
||||
.ui.statistics .olive.statistic > .value,
|
||||
.ui.olive.statistic > .value {
|
||||
color: @olive;
|
||||
}
|
||||
.ui.green.statistics .statistic > .value,
|
||||
.ui.statistics .green.statistic > .value,
|
||||
.ui.green.statistic > .value {
|
||||
color: @green;
|
||||
}
|
||||
.ui.teal.statistics .statistic > .value,
|
||||
.ui.statistics .teal.statistic > .value,
|
||||
.ui.teal.statistic > .value {
|
||||
color: @teal;
|
||||
}
|
||||
.ui.blue.statistics .statistic > .value,
|
||||
.ui.statistics .blue.statistic > .value,
|
||||
.ui.blue.statistic > .value {
|
||||
color: @blue;
|
||||
}
|
||||
.ui.violet.statistics .statistic > .value,
|
||||
.ui.statistics .violet.statistic > .value,
|
||||
.ui.violet.statistic > .value {
|
||||
color: @violet;
|
||||
}
|
||||
.ui.purple.statistics .statistic > .value,
|
||||
.ui.statistics .purple.statistic > .value,
|
||||
.ui.purple.statistic > .value {
|
||||
color: @purple;
|
||||
}
|
||||
.ui.pink.statistics .statistic > .value,
|
||||
.ui.statistics .pink.statistic > .value,
|
||||
.ui.pink.statistic > .value {
|
||||
color: @pink;
|
||||
}
|
||||
.ui.brown.statistics .statistic > .value,
|
||||
.ui.statistics .brown.statistic > .value,
|
||||
.ui.brown.statistic > .value {
|
||||
color: @brown;
|
||||
}
|
||||
.ui.grey.statistics .statistic > .value,
|
||||
.ui.statistics .grey.statistic > .value,
|
||||
.ui.grey.statistic > .value {
|
||||
color: @grey;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.statistics .statistic > .value,
|
||||
.ui.inverted.statistic .value {
|
||||
color: @invertedValueColor;
|
||||
}
|
||||
.ui.inverted.statistics .statistic > .label,
|
||||
.ui.inverted.statistic .label {
|
||||
color: @invertedLabelColor;
|
||||
}
|
||||
|
||||
.ui.inverted.red.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.red.statistic > .value,
|
||||
.ui.inverted.red.statistic > .value {
|
||||
color: @lightRed;
|
||||
}
|
||||
.ui.inverted.orange.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.orange.statistic > .value,
|
||||
.ui.inverted.orange.statistic > .value {
|
||||
color: @lightOrange;
|
||||
}
|
||||
.ui.inverted.yellow.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.yellow.statistic > .value,
|
||||
.ui.inverted.yellow.statistic > .value {
|
||||
color: @lightYellow;
|
||||
}
|
||||
.ui.inverted.olive.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.olive.statistic > .value,
|
||||
.ui.inverted.olive.statistic > .value {
|
||||
color: @lightOlive;
|
||||
}
|
||||
.ui.inverted.green.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.green.statistic > .value,
|
||||
.ui.inverted.green.statistic > .value {
|
||||
color: @lightGreen;
|
||||
}
|
||||
.ui.inverted.teal.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.teal.statistic > .value,
|
||||
.ui.inverted.teal.statistic > .value {
|
||||
color: @lightTeal;
|
||||
}
|
||||
.ui.inverted.blue.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.blue.statistic > .value,
|
||||
.ui.inverted.blue.statistic > .value {
|
||||
color: @lightBlue;
|
||||
}
|
||||
.ui.inverted.violet.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.violet.statistic > .value,
|
||||
.ui.inverted.violet.statistic > .value {
|
||||
color: @lightViolet;
|
||||
}
|
||||
.ui.inverted.purple.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.purple.statistic > .value,
|
||||
.ui.inverted.purple.statistic > .value {
|
||||
color: @lightPurple;
|
||||
}
|
||||
.ui.inverted.pink.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.pink.statistic > .value,
|
||||
.ui.inverted.pink.statistic > .value {
|
||||
color: @lightPink;
|
||||
}
|
||||
.ui.inverted.brown.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.brown.statistic > .value,
|
||||
.ui.inverted.brown.statistic > .value {
|
||||
color: @lightBrown;
|
||||
}
|
||||
.ui.inverted.grey.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.grey.statistic > .value,
|
||||
.ui.inverted.grey.statistic > .value {
|
||||
color: @lightGrey;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Floated
|
||||
---------------*/
|
||||
|
||||
.ui[class*="left floated"].statistic {
|
||||
float: left;
|
||||
margin: @leftFloatedMargin;
|
||||
}
|
||||
.ui[class*="right floated"].statistic {
|
||||
float: right;
|
||||
margin: @rightFloatedMargin;
|
||||
}
|
||||
.ui.floated.statistic:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
|
||||
/* Mini */
|
||||
.ui.mini.statistics .statistic > .value,
|
||||
.ui.mini.statistic > .value {
|
||||
font-size: @miniValueSize !important;
|
||||
}
|
||||
.ui.mini.horizontal.statistics .statistic > .value,
|
||||
.ui.mini.horizontal.statistic > .value {
|
||||
font-size: @miniHorizontalValueSize !important;
|
||||
}
|
||||
.ui.mini.statistics .statistic > .text.value,
|
||||
.ui.mini.statistic > .text.value {
|
||||
font-size: @miniTextValueSize !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tiny */
|
||||
.ui.tiny.statistics .statistic > .value,
|
||||
.ui.tiny.statistic > .value {
|
||||
font-size: @tinyValueSize !important;
|
||||
}
|
||||
.ui.tiny.horizontal.statistics .statistic > .value,
|
||||
.ui.tiny.horizontal.statistic > .value {
|
||||
font-size: @tinyHorizontalValueSize !important;
|
||||
}
|
||||
.ui.tiny.statistics .statistic > .text.value,
|
||||
.ui.tiny.statistic > .text.value {
|
||||
font-size: @tinyTextValueSize !important;
|
||||
}
|
||||
|
||||
/* Small */
|
||||
.ui.small.statistics .statistic > .value,
|
||||
.ui.small.statistic > .value {
|
||||
font-size: @smallValueSize !important;
|
||||
}
|
||||
.ui.small.horizontal.statistics .statistic > .value,
|
||||
.ui.small.horizontal.statistic > .value {
|
||||
font-size: @smallHorizontalValueSize !important;
|
||||
}
|
||||
.ui.small.statistics .statistic > .text.value,
|
||||
.ui.small.statistic > .text.value {
|
||||
font-size: @smallTextValueSize !important;
|
||||
}
|
||||
|
||||
/* Medium */
|
||||
.ui.statistics .statistic > .value,
|
||||
.ui.statistic > .value {
|
||||
font-size: @valueSize !important;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .value,
|
||||
.ui.horizontal.statistic > .value {
|
||||
font-size: @horizontalValueSize !important;
|
||||
}
|
||||
.ui.statistics .statistic > .text.value,
|
||||
.ui.statistic > .text.value {
|
||||
font-size: @textValueSize !important;
|
||||
}
|
||||
|
||||
/* Large */
|
||||
.ui.large.statistics .statistic > .value,
|
||||
.ui.large.statistic > .value {
|
||||
font-size: @largeValueSize !important;
|
||||
}
|
||||
.ui.large.horizontal.statistics .statistic > .value,
|
||||
.ui.large.horizontal.statistic > .value {
|
||||
font-size: @largeHorizontalValueSize !important;
|
||||
}
|
||||
.ui.large.statistics .statistic > .text.value,
|
||||
.ui.large.statistic > .text.value {
|
||||
font-size: @largeTextValueSize !important;
|
||||
}
|
||||
|
||||
/* Huge */
|
||||
.ui.huge.statistics .statistic > .value,
|
||||
.ui.huge.statistic > .value {
|
||||
font-size: @hugeValueSize !important;
|
||||
}
|
||||
.ui.huge.horizontal.statistics .statistic > .value,
|
||||
.ui.huge.horizontal.statistic > .value {
|
||||
font-size: @hugeHorizontalValueSize !important;
|
||||
}
|
||||
.ui.huge.statistics .statistic > .text.value,
|
||||
.ui.huge.statistic > .text.value {
|
||||
font-size: @hugeTextValueSize !important;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
Reference in New Issue
Block a user