jlukic
10 years ago
35 changed files with 2628 additions and 411 deletions
Split View
Diff Options
-
5build/less/definitions/collections/message.less
-
23build/less/definitions/elements/button.less
-
556build/less/definitions/views/card.less
-
6build/less/definitions/views/item.less
-
3build/less/themes/_site/views/card.overrides
-
3build/less/themes/_site/views/card.variables
-
3build/less/themes/packages/basic/elements/button.variables
-
17build/less/themes/packages/basic/views/card.variables
-
4build/less/themes/packages/default/collections/message.variables
-
20build/less/themes/packages/default/elements/button.variables
-
6build/less/themes/packages/default/elements/label.variables
-
2build/less/themes/packages/default/globals/site.variables
-
98build/less/themes/packages/default/views/card.overrides
-
128build/less/themes/packages/default/views/card.variables
-
10build/less/themes/packages/default/views/item.variables
-
2build/minified/definitions/collections/breadcrumb.min.css
-
2build/minified/definitions/collections/message.min.css
-
2build/minified/definitions/elements/button.min.css
-
2build/minified/definitions/elements/label.min.css
-
14build/minified/definitions/views/card.min.css
-
2build/minified/definitions/views/item.min.css
-
967build/packaged/definitions/css/semantic.css
-
2build/packaged/definitions/css/semantic.min.css
-
46build/uncompressed/definitions/collections/breadcrumb.css
-
4build/uncompressed/definitions/collections/message.css
-
51build/uncompressed/definitions/elements/button.css
-
24build/uncompressed/definitions/elements/label.css
-
640build/uncompressed/definitions/views/card.css
-
11build/uncompressed/definitions/views/item.css
-
101server/documents/views/card.html.eco
-
8server/documents/views/item.html.eco
-
24server/files/javascript/card.js
-
166src/definitions/views/card.less
-
26src/themes/packages/basic/views/card.variables
-
61src/themes/packages/default/views/card.variables
@ -0,0 +1,556 @@ |
|||
/* |
|||
* # 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 : 'card'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
|
|||
.ui.cards, |
|||
.ui.card { |
|||
margin: @groupMargin; |
|||
} |
|||
.ui.cards:first-child |
|||
.ui.card:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.cards:last-child, |
|||
.ui.card:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.ui.cards > .row > .card, |
|||
.ui.cards > .card { |
|||
display: @groupDisplay; |
|||
float: @groupFloat; |
|||
} |
|||
|
|||
/* Clearing */ |
|||
.ui.cards:after, |
|||
.ui.card:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
|
|||
.ui.cards > .row > .card, |
|||
.ui.cards > .card, |
|||
.ui.card { |
|||
position: relative; |
|||
display: @display; |
|||
|
|||
width: @width; |
|||
min-height: @minHeight; |
|||
margin: @margin; |
|||
|
|||
background: @background; |
|||
padding: @padding; |
|||
|
|||
border: @border; |
|||
border-radius: @borderRadius; |
|||
box-shadow: @boxShadow; |
|||
transition: @transition; |
|||
z-index: @zIndex; |
|||
} |
|||
|
|||
.ui.cards > .row > .card > :first-child, |
|||
.ui.cards > .card > :first-child, |
|||
.ui.card > :first-child { |
|||
border-radius: @borderRadius @borderRadius 0em 0em !important; |
|||
} |
|||
|
|||
.ui.cards > .row > .card > :last-child, |
|||
.ui.cards > .card > :last-child, |
|||
.ui.card > :last-child { |
|||
border-radius: 0em 0em @borderRadius @borderRadius !important; |
|||
} |
|||
|
|||
|
|||
.ui.cards a.card, |
|||
.ui.cards .card a, |
|||
.ui.card a, |
|||
a.ui.cards { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
|
|||
.ui.cards .card > .image, |
|||
.ui.card > .image { |
|||
display: block; |
|||
position: relative; |
|||
padding: @imagePadding; |
|||
background: @imageBackground; |
|||
} |
|||
.ui.cards .card > .image > img, |
|||
.ui.card > .image > img { |
|||
display: block; |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: @imageBorderRadius; |
|||
} |
|||
|
|||
.ui.cards .card > .image:only-child > img, |
|||
.ui.card > .image:only-child > img { |
|||
border-radius: @borderRadius; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Floated |
|||
---------------*/ |
|||
|
|||
.ui.cards .card .left.floated, |
|||
.ui.card .left.floated { |
|||
float: left; |
|||
} |
|||
.ui.cards .card .right.floated, |
|||
.ui.card .right.floated { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.cards .card > .content, |
|||
.ui.card > .content { |
|||
background: @contentBackground; |
|||
margin: @contentMargin; |
|||
padding: @contentPadding; |
|||
box-shadow: @contentBoxShadow; |
|||
font-size: @contentFontSize; |
|||
border: @contentBorder; |
|||
border-radius: @contentBorderRadius; |
|||
} |
|||
|
|||
.ui.cards .card > .content:after, |
|||
.ui.card > .content:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ui.cards .card > .content > .header, |
|||
.ui.card > .content > .header { |
|||
display: block; |
|||
margin: @headerMargin; |
|||
font-family: @headerFont; |
|||
font-weight: @headerFontWeight; |
|||
font-size: @headerFontSize; |
|||
color: @headerColor; |
|||
} |
|||
.ui.cards .card > .content > .meta + .description, |
|||
.ui.cards .card > .content > .header + .description, |
|||
.ui.card > .content > .meta + .description, |
|||
.ui.card > .content > .header + .description { |
|||
margin-top: @descriptionDistance; |
|||
} |
|||
|
|||
/*-------------- |
|||
Image |
|||
---------------*/ |
|||
|
|||
.ui.cards .card .content img, |
|||
.ui.card .content img { |
|||
display: inline-block; |
|||
vertical-align: @contentImageVerticalAlign; |
|||
width: @contentImageWidth; |
|||
} |
|||
.ui.cards .card img.avatar, |
|||
.ui.cards .card .avatar img, |
|||
.ui.card img.avatar, |
|||
.ui.card .avatar img { |
|||
width: @avatarSize; |
|||
height: @avatarSize; |
|||
border-radius: @avatarBorderRadius; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Description |
|||
---------------*/ |
|||
|
|||
.ui.cards .card > .content > .description, |
|||
.ui.card > .content > .description { |
|||
clear: both; |
|||
color: @descriptionColor; |
|||
} |
|||
|
|||
/*-------------- |
|||
Paragraph |
|||
---------------*/ |
|||
|
|||
.ui.cards .card > .content p, |
|||
.ui.card > .content p { |
|||
margin: 0em 0em @paragraphDistance; |
|||
} |
|||
.ui.cards .card > .content p:last-child, |
|||
.ui.card > .content p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
|
|||
.ui.cards .card .meta, |
|||
.ui.card .meta { |
|||
font-size: @metaFontSize; |
|||
color: @metaColor; |
|||
} |
|||
.ui.cards .card .meta *, |
|||
.ui.card .meta * { |
|||
margin-right: @metaSpacing; |
|||
} |
|||
.ui.cards .card .meta :last-child, |
|||
.ui.card .meta :last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
.ui.cards .card .meta .right.floated, |
|||
.ui.card .meta .right.floated { |
|||
margin-right: 0em; |
|||
margin-left: @metaSpacing; |
|||
} |
|||
|
|||
/*-------------- |
|||
Links |
|||
---------------*/ |
|||
|
|||
/* Generic */ |
|||
.ui.cards .card > .content a, |
|||
.ui.card > .content a { |
|||
color: @contentLinkColor; |
|||
} |
|||
.ui.cards .card > .content a:hover, |
|||
.ui.card > .content a:hover { |
|||
color: @contentLinkHoverColor; |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.cards .card > .content > a.header, |
|||
.ui.card > .content > a.header { |
|||
color: @headerLinkColor; |
|||
} |
|||
.ui.cards .card > .content > a.header:hover, |
|||
.ui.card > .content > a.header:hover { |
|||
color: @headerLinkHoverColor; |
|||
} |
|||
|
|||
/* Meta */ |
|||
.ui.cards .card .meta a, |
|||
.ui.card .meta a { |
|||
color: @metaLinkColor; |
|||
} |
|||
.ui.cards .card .meta a:hover, |
|||
.ui.card .meta a:hover { |
|||
color: @metaLinkHoverColor; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
|
|||
/*-----Star----- */ |
|||
|
|||
/* Icon */ |
|||
.ui.cards .card > .content .star.icon, |
|||
.ui.card > .content .star.icon { |
|||
cursor: pointer; |
|||
opacity: @actionOpacity; |
|||
transition: @actionTransition; |
|||
} |
|||
.ui.cards .card > .content .star.icon:hover, |
|||
.ui.card > .content .star.icon:hover { |
|||
opacity: @actionHoverOpacity; |
|||
color: @starColor; |
|||
} |
|||
.ui.cards .card > .content .active.star.icon, |
|||
.ui.card > .content .active.star.icon { |
|||
color: @starActiveColor; |
|||
} |
|||
|
|||
/*-----Like----- */ |
|||
|
|||
/* Icon */ |
|||
.ui.cards .card > .content .like.icon, |
|||
.ui.card > .content .like.icon { |
|||
cursor: pointer; |
|||
opacity: @actionOpacity; |
|||
transition: @actionTransition; |
|||
} |
|||
.ui.cards .card > .content .like.icon:hover, |
|||
.ui.card > .content .like.icon:hover { |
|||
opacity: @actionHoverOpacity; |
|||
color: @likeColor; |
|||
} |
|||
.ui.cards .card > .content .active.like.icon, |
|||
.ui.card > .content .active.like.icon { |
|||
color: @likeActiveColor; |
|||
} |
|||
|
|||
/*---------------- |
|||
Extra Content |
|||
-----------------*/ |
|||
|
|||
.ui.cards .card .extra, |
|||
.ui.card .extra { |
|||
position: @extraDisplay; |
|||
background: @extraBackground; |
|||
width: @extraWidth; |
|||
padding: @extraPadding; |
|||
top: @extraTop; |
|||
left: @extraLeft; |
|||
color: @extraColor; |
|||
box-shadow: @extraBoxShadow; |
|||
transition: @extraTransition; |
|||
border-top: @extraDivider; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
.ui.link.cards .card:hover, |
|||
.ui.link.card:hover { |
|||
cursor: pointer; |
|||
z-index: @linkHoverZIndex; |
|||
background: @linkHoverBackground; |
|||
border: @linkHoverBorder; |
|||
box-shadow: @linkHoverBoxShadow; |
|||
} |
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : 768px) { |
|||
.ui.stackable.cards { |
|||
display: block !important; |
|||
} |
|||
.ui.stackable.cards > .card, |
|||
.ui.stackable.cards > .row > .card { |
|||
display: block !important; |
|||
height: auto !important; |
|||
width: auto !important; |
|||
padding: 0% !important; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Item Count |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.one.cards { |
|||
margin-left: -2%; |
|||
margin-right: -2%; |
|||
} |
|||
.ui.one.cards > .card { |
|||
width: 100%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
.ui.two.cards { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.two.cards > .card { |
|||
width: 48%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.two.cards > .card:nth-child(2n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.three.cards { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.three.cards > .card { |
|||
width: 31.333%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.three.cards > .card:nth-child(3n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.four.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.four.cards > .card { |
|||
width: 24%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.four.cards > .card:nth-child(4n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.five.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.five.cards > .card { |
|||
width: 19%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.five.cards > .card:nth-child(5n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.six.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.six.cards > .card { |
|||
width: 15.66%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.six.cards > .card:nth-child(6n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.seven.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.seven.cards > .card { |
|||
width: 13.28%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.seven.cards > .card:nth-child(7n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eight.cards { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.eight.cards > .card { |
|||
width: 12.0%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.eight.cards > .card:nth-child(8n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.nine.cards { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.nine.cards > .card { |
|||
width: 10.61%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.nine.cards > .card:nth-child(9n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.ten.cards { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.ten.cards > .card { |
|||
width: 9.6%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.cards > .card:nth-child(10n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eleven.cards { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.eleven.cards > .card { |
|||
width: 8.69%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.eleven.cards > .card:nth-child(11n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.twelve.cards { |
|||
margin-left: -0.1%; |
|||
margin-right: -0.1%; |
|||
} |
|||
.ui.twelve.cards > .card { |
|||
width: 8.1333%; |
|||
margin-left: 0.1%; |
|||
margin-right: 0.1%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.twelve.cards > .card:nth-child(12n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
|
|||
.ui.cards > .row > .card, |
|||
.ui.cards > .card { |
|||
font-size: @medium; |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -0,0 +1,17 @@ |
|||
/******************************* |
|||
Card |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
View |
|||
--------------------*/ |
|||
|
|||
@width: 225px; |
|||
@background: transparent; |
|||
|
|||
@extraBackground: transparent; |
|||
@extraDivider: none; |
|||
|
|||
@imageBorderRadius: @borderRadius; |
|||
|
|||
@headerFontSize: 1.1em; |
|||
@ -0,0 +1,98 @@ |
|||
/******************************* |
|||
Item |
|||
*******************************/ |
|||
/*------------------- |
|||
View |
|||
--------------------*/ |
|||
|
|||
/* Item */ |
|||
@background: #FFFFFF; |
|||
@borderRadius: 0.325rem; |
|||
@display: block; |
|||
@float: left; |
|||
@margin: 0em @horizontalSpacing @rowSpacing; |
|||
@minHeight: 0px; |
|||
@padding: 0em; |
|||
@width: 300px; |
|||
@boxShadow: |
|||
0px 0px 0px 1px @borderColor, |
|||
0px 3px 0px 0px @borderColor |
|||
; |
|||
@border: none; |
|||
@zIndex: ''; |
|||
|
|||
/* Item Group */ |
|||
@horizontalSpacing: 0.5em; |
|||
@rowSpacing: 2.5em; |
|||
@groupMargin: 1em -@horizontalSpacing; |
|||
|
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
|
|||
/* Image */ |
|||
@imageBackground: @transparentBlack; |
|||
@imagePadding: 0em; |
|||
@imageBorderRadius: @borderRadius @borderRadius 0em 0em; |
|||
@imageBoxShadow: none; |
|||
@imageBorder: none; |
|||
|
|||
/* Content */ |
|||
@contentMargin: 0em; |
|||
@contentPadding: 0.75em 1em; |
|||
@contentFontSize: 1em; |
|||
@contentBorder: none; |
|||
@contentBorderRadius: 0em; |
|||
@contentBoxShadow: none; |
|||
|
|||
/* Title */ |
|||
@titleMargin: 0em; |
|||
@titleFont: @headerFont; |
|||
@titleFontWeight: bold; |
|||
@titleFontSize: 1.25em; |
|||
@titleColor: @darkTextColor; |
|||
|
|||
/* Metadata */ |
|||
@metaColor: @lightTextColor; |
|||
|
|||
/* Description */ |
|||
@descriptionDistance: 0.75em; |
|||
@descriptionColor: @lightTextColor; |
|||
|
|||
/* Image */ |
|||
@imageSpacing: 0.25em; |
|||
@contentImageWidth: 2em; |
|||
@contentImageVerticalAlign: middle; |
|||
|
|||
/* Paragraph */ |
|||
@paragraphDistance: 0.1em; |
|||
|
|||
/* Additional Content */ |
|||
@extraDisplay: absolute; |
|||
@extraTop: 100%; |
|||
@extraLeft: 0em; |
|||
@extraWidth: 100%; |
|||
|
|||
@extraPadding: 0.5em 0.75em; |
|||
@extraColor: @lightTextColor; |
|||
@extraTransition: color @transitionDuration @transitionEasing; |
|||
|
|||
/*------------------- |
|||
States |
|||
--------------------*/ |
|||
|
|||
@hoverCursor: pointer; |
|||
@hoverZIndex: 5; |
|||
@hoverBorder: none; |
|||
@hoverBoxShadow: |
|||
0px 0px 0px 1px @selectedBorderColor, |
|||
0px 3px 0px 0px @selectedBorderColor |
|||
; |
|||
|
|||
|
|||
/*------------------- |
|||
Variations |
|||
--------------------*/ |
|||
|
|||
/* Sizes */ |
|||
@medium: 1em; |
|||
@ -0,0 +1,128 @@ |
|||
/******************************* |
|||
Card |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
View |
|||
--------------------*/ |
|||
|
|||
/* Shadow */ |
|||
@shadowDistance: 0px; |
|||
@shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor; |
|||
|
|||
/* Item */ |
|||
@background: #FFFFFF; |
|||
@borderRadius: 0.325rem; |
|||
@display: block; |
|||
@margin: 0em @horizontalSpacing @rowSpacing; |
|||
@minHeight: 0px; |
|||
@padding: 0em; |
|||
@width: 275px; |
|||
@boxShadow: |
|||
0px 0px 0px 1px @solidBorderColor, |
|||
@shadowBoxShadow |
|||
; |
|||
@border: none; |
|||
@zIndex: ''; |
|||
@transition: box-shadow @transitionDuration @transitionEasing; |
|||
|
|||
/* Item Group */ |
|||
@groupDisplay: block; |
|||
@groupFloat: left; |
|||
@horizontalSpacing: 0.5em; |
|||
@rowSpacing: 2.5em; |
|||
@groupMargin: 1em -@horizontalSpacing; |
|||
|
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
|
|||
/* Image */ |
|||
@imageBackground: @transparentBlack; |
|||
@imagePadding: 0em; |
|||
@imageBorderRadius: @borderRadius @borderRadius 0em 0em; |
|||
@imageBoxShadow: none; |
|||
@imageBorder: none; |
|||
|
|||
/* Content */ |
|||
@contentBackground: none; |
|||
@contentMargin: 0em; |
|||
@contentPadding: 1em 1em; |
|||
@contentFontSize: 1em; |
|||
@contentBorder: none; |
|||
@contentBorderRadius: 0em; |
|||
@contentBoxShadow: none; |
|||
|
|||
/* Header */ |
|||
@headerMargin: 0em; |
|||
@headerFont: @headerFont; |
|||
@headerFontWeight: bold; |
|||
@headerFontSize: 1.25em; |
|||
@headerColor: @darkTextColor; |
|||
|
|||
/* Metadata */ |
|||
@metaFontSize: 0.9em; |
|||
@metaSpacing: 0.3em; |
|||
@metaColor: @lightTextColor; |
|||
|
|||
/* Icons */ |
|||
@actionOpacity: 0.75; |
|||
@actionHoverOpacity: 1; |
|||
@actionTransition: color @transitionDuration @transitionEasing; |
|||
@starColor: #AC9400; |
|||
@starActiveColor: #E9B539; |
|||
@likeColor: #FFADAE; |
|||
@likeActiveColor: #EF404A; |
|||
|
|||
/* Links */ |
|||
@contentLinkColor: @linkColor; |
|||
@contentLinkHoverColor: @linkHoverColor; |
|||
@headerLinkColor: @headerColor; |
|||
@headerLinkHoverColor: @linkHoverColor; |
|||
@metaLinkColor: @lightTextColor; |
|||
@metaLinkHoverColor: @textColor; |
|||
|
|||
/* Description */ |
|||
@descriptionDistance: 0.75em; |
|||
@descriptionColor: rgba(0, 0, 0, 0.5); |
|||
|
|||
/* Content Image */ |
|||
@contentImageWidth: 2em; |
|||
@contentImageVerticalAlign: middle; |
|||
|
|||
/* Avatar Image */ |
|||
@avatarSize: @contentImageWidth; |
|||
@avatarBorderRadius: @circularRadius; |
|||
|
|||
/* Paragraph */ |
|||
@paragraphDistance: 0.5em; |
|||
|
|||
/* Additional Content */ |
|||
@extraDivider: 1px solid rgba(0, 0, 0, 0.05); |
|||
@extraBackground: #FAFAFA linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
@extraDisplay: static; |
|||
@extraTop: 0em; |
|||
@extraLeft: 0em; |
|||
@extraWidth: 100%; |
|||
@extraPadding: 0.75em 1em; |
|||
@extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15); |
|||
@extraColor: @lightTextColor; |
|||
@extraTransition: color @transitionDuration @transitionEasing; |
|||
|
|||
/*------------------- |
|||
Variations |
|||
--------------------*/ |
|||
|
|||
/* Link */ |
|||
@linkHoverBackground: ''; |
|||
@linkHoverBorder: none; |
|||
@linkHoverZIndex: 5; |
|||
|
|||
@shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor; |
|||
@linkHoverBoxShadow: |
|||
@shadowHoverBoxShadow, |
|||
0px 0px 0px 1px @selectedBorderColor |
|||
; |
|||
|
|||
/* Sizes */ |
|||
@medium: 1em; |
|||
2
build/minified/definitions/elements/button.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/minified/definitions/elements/label.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
14
build/minified/definitions/views/card.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/minified/definitions/views/item.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
967
build/packaged/definitions/css/semantic.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/packaged/definitions/css/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,640 @@ |
|||
/* |
|||
* # Semantic - Item |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2014 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
/* |
|||
|
|||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ |
|||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ |
|||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ |
|||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ |
|||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ |
|||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ |
|||
|
|||
*/ |
|||
/******************************* |
|||
Folders |
|||
*******************************/ |
|||
/* Path to theme packages */ |
|||
/* Path to site override folder */ |
|||
/******************************* |
|||
Themes |
|||
*******************************/ |
|||
/* To override a theme for an individual element |
|||
specify theme name below |
|||
|
|||
Be sure to update the user folder name (see README) |
|||
*/ |
|||
/* Global */ |
|||
/* Elements */ |
|||
/* Collections */ |
|||
/* Modules */ |
|||
/* Views */ |
|||
/******************************* |
|||
Import Directives |
|||
*******************************/ |
|||
/*------------------ |
|||
Load Default |
|||
-------------------*/ |
|||
/******************************* |
|||
Site Settings |
|||
*******************************/ |
|||
/*------------------- |
|||
Paths |
|||
--------------------*/ |
|||
/*------------------- |
|||
Fonts |
|||
--------------------*/ |
|||
/*------------------- |
|||
Site Colors |
|||
--------------------*/ |
|||
/*--- Colors ---*/ |
|||
/*------------------- |
|||
Page |
|||
--------------------*/ |
|||
/*------------------- |
|||
Grid |
|||
--------------------*/ |
|||
/*------------------- |
|||
Breakpoints |
|||
--------------------*/ |
|||
/******************************* |
|||
Power-User |
|||
*******************************/ |
|||
/*------------------- |
|||
BG Colors |
|||
--------------------*/ |
|||
/*------------------- |
|||
Icons |
|||
--------------------*/ |
|||
/* Max Width of Icon */ |
|||
/*------------------- |
|||
Easing |
|||
--------------------*/ |
|||
/*--- Light Variations ---*/ |
|||
/*--- Neutrals ---*/ |
|||
/*--- Text Colors ---*/ |
|||
/*--- Backgrounds ---*/ |
|||
/*------------------- |
|||
Emotive Colors |
|||
--------------------*/ |
|||
/* Positive / Negative */ |
|||
/* Messages */ |
|||
/*------------------- |
|||
Neutral Text |
|||
--------------------*/ |
|||
/*------------------- |
|||
Brand Colors |
|||
--------------------*/ |
|||
/*------------------- |
|||
Borders |
|||
--------------------*/ |
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
/*------------------- |
|||
Transitions |
|||
--------------------*/ |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/*------------------- |
|||
Disabled |
|||
--------------------*/ |
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
/*--- Colors ---*/ |
|||
/*--- Emotive ---*/ |
|||
/*--- Neutrals ---*/ |
|||
/*------------------- |
|||
Down (:active) |
|||
--------------------*/ |
|||
/*--- Colors ---*/ |
|||
/*--- Emotive ---*/ |
|||
/*--- Neutrals ---*/ |
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
/*--- Standard ---*/ |
|||
/*--- Emotive ---*/ |
|||
/*--- Neutrals ---*/ |
|||
/******************************* |
|||
Card |
|||
*******************************/ |
|||
/*------------------- |
|||
View |
|||
--------------------*/ |
|||
/* Shadow */ |
|||
/* Item */ |
|||
/* Item Group */ |
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
/* Image */ |
|||
/* Content */ |
|||
/* Header */ |
|||
/* Metadata */ |
|||
/* Icons */ |
|||
/* Links */ |
|||
/* Description */ |
|||
/* Content Image */ |
|||
/* Avatar Image */ |
|||
/* Paragraph */ |
|||
/* Additional Content */ |
|||
/*------------------- |
|||
Variations |
|||
--------------------*/ |
|||
/* Link */ |
|||
/* Sizes */ |
|||
/*------------------ |
|||
Load Theme |
|||
-------------------*/ |
|||
/*------------------ |
|||
Load Site |
|||
-------------------*/ |
|||
/******************************* |
|||
User Global Variables |
|||
*******************************/ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
/*------------------ |
|||
Override Mix-in |
|||
-------------------*/ |
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
.ui.cards, |
|||
.ui.card { |
|||
margin: 1em -0.5em; |
|||
} |
|||
.ui.cards:first-child .ui.card:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.cards:last-child, |
|||
.ui.card:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.cards > .row > .card, |
|||
.ui.cards > .card { |
|||
display: block; |
|||
float: left; |
|||
} |
|||
/* Clearing */ |
|||
.ui.cards:after, |
|||
.ui.card:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
.ui.cards > .row > .card, |
|||
.ui.cards > .card, |
|||
.ui.card { |
|||
position: relative; |
|||
display: block; |
|||
width: 275px; |
|||
min-height: 0px; |
|||
margin: 0em 0.5em 2.5em; |
|||
background: #ffffff; |
|||
padding: 0em; |
|||
border: none; |
|||
border-radius: 0.325rem; |
|||
box-shadow: 0px 0px 0px 1px #dddddd, 0px 0px 0px 0px #dddddd; |
|||
-webkit-transition: box-shadow 0.25s ease; |
|||
transition: box-shadow 0.25s ease; |
|||
z-index: ''; |
|||
} |
|||
.ui.cards > .row > .card > :first-child, |
|||
.ui.cards > .card > :first-child, |
|||
.ui.card > :first-child { |
|||
border-radius: 0.325rem 0.325rem 0em 0em !important; |
|||
} |
|||
.ui.cards > .row > .card > :last-child, |
|||
.ui.cards > .card > :last-child, |
|||
.ui.card > :last-child { |
|||
border-radius: 0em 0em 0.325rem 0.325rem !important; |
|||
} |
|||
.ui.cards a.card, |
|||
.ui.cards .card a, |
|||
.ui.card a, |
|||
a.ui.cards { |
|||
cursor: pointer; |
|||
} |
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
.ui.cards .card > .image, |
|||
.ui.card > .image { |
|||
display: block; |
|||
position: relative; |
|||
padding: 0em; |
|||
background: rgba(0, 0, 0, 0.05); |
|||
} |
|||
.ui.cards .card > .image > img, |
|||
.ui.card > .image > img { |
|||
display: block; |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: 0.325rem 0.325rem 0em 0em; |
|||
} |
|||
.ui.cards .card > .image:only-child > img, |
|||
.ui.card > .image:only-child > img { |
|||
border-radius: 0.325rem; |
|||
} |
|||
/*-------------- |
|||
Floated |
|||
---------------*/ |
|||
.ui.cards .card .left.floated, |
|||
.ui.card .left.floated { |
|||
float: left; |
|||
} |
|||
.ui.cards .card .right.floated, |
|||
.ui.card .right.floated { |
|||
float: right; |
|||
} |
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
.ui.cards .card > .content, |
|||
.ui.card > .content { |
|||
background: none; |
|||
margin: 0em; |
|||
padding: 1em 1em; |
|||
box-shadow: none; |
|||
font-size: 1em; |
|||
border: none; |
|||
border-radius: 0em; |
|||
} |
|||
.ui.cards .card > .content:after, |
|||
.ui.card > .content:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
.ui.cards .card > .content > .header, |
|||
.ui.card > .content > .header { |
|||
display: block; |
|||
margin: 0em; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; |
|||
font-weight: bold; |
|||
font-size: 1.25em; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
.ui.cards .card > .content > .meta + .description, |
|||
.ui.cards .card > .content > .header + .description, |
|||
.ui.card > .content > .meta + .description, |
|||
.ui.card > .content > .header + .description { |
|||
margin-top: 0.75em; |
|||
} |
|||
/*-------------- |
|||
Image |
|||
---------------*/ |
|||
.ui.cards .card .content img, |
|||
.ui.card .content img { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 2em; |
|||
} |
|||
.ui.cards .card img.avatar, |
|||
.ui.cards .card .avatar img, |
|||
.ui.card img.avatar, |
|||
.ui.card .avatar img { |
|||
width: 2em; |
|||
height: 2em; |
|||
border-radius: 500rem; |
|||
} |
|||
/*-------------- |
|||
Description |
|||
---------------*/ |
|||
.ui.cards .card > .content > .description, |
|||
.ui.card > .content > .description { |
|||
clear: both; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
/*-------------- |
|||
Paragraph |
|||
---------------*/ |
|||
.ui.cards .card > .content p, |
|||
.ui.card > .content p { |
|||
margin: 0em 0em 0.5em; |
|||
} |
|||
.ui.cards .card > .content p:last-child, |
|||
.ui.card > .content p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
.ui.cards .card .meta, |
|||
.ui.card .meta { |
|||
font-size: 0.9em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.cards .card .meta *, |
|||
.ui.card .meta * { |
|||
margin-right: 0.3em; |
|||
} |
|||
.ui.cards .card .meta :last-child, |
|||
.ui.card .meta :last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.cards .card .meta .right.floated, |
|||
.ui.card .meta .right.floated { |
|||
margin-right: 0em; |
|||
margin-left: 0.3em; |
|||
} |
|||
/*-------------- |
|||
Links |
|||
---------------*/ |
|||
/* Generic */ |
|||
.ui.cards .card > .content a, |
|||
.ui.card > .content a { |
|||
color: #009fda; |
|||
} |
|||
.ui.cards .card > .content a:hover, |
|||
.ui.card > .content a:hover { |
|||
color: #00b2f3; |
|||
} |
|||
/* Header */ |
|||
.ui.cards .card > .content > a.header, |
|||
.ui.card > .content > a.header { |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
.ui.cards .card > .content > a.header:hover, |
|||
.ui.card > .content > a.header:hover { |
|||
color: #00b2f3; |
|||
} |
|||
/* Meta */ |
|||
.ui.cards .card .meta a, |
|||
.ui.card .meta a { |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.cards .card .meta a:hover, |
|||
.ui.card .meta a:hover { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
/*-----Star----- */ |
|||
/* Icon */ |
|||
.ui.cards .card > .content .star.icon, |
|||
.ui.card > .content .star.icon { |
|||
cursor: pointer; |
|||
opacity: 0.75; |
|||
-webkit-transition: color 0.25s ease; |
|||
transition: color 0.25s ease; |
|||
} |
|||
.ui.cards .card > .content .star.icon:hover, |
|||
.ui.card > .content .star.icon:hover { |
|||
opacity: 1; |
|||
color: #ac9400; |
|||
} |
|||
.ui.cards .card > .content .active.star.icon, |
|||
.ui.card > .content .active.star.icon { |
|||
color: #e9b539; |
|||
} |
|||
/*-----Like----- */ |
|||
/* Icon */ |
|||
.ui.cards .card > .content .like.icon, |
|||
.ui.card > .content .like.icon { |
|||
cursor: pointer; |
|||
opacity: 0.75; |
|||
-webkit-transition: color 0.25s ease; |
|||
transition: color 0.25s ease; |
|||
} |
|||
.ui.cards .card > .content .like.icon:hover, |
|||
.ui.card > .content .like.icon:hover { |
|||
opacity: 1; |
|||
color: #ffadae; |
|||
} |
|||
.ui.cards .card > .content .active.like.icon, |
|||
.ui.card > .content .active.like.icon { |
|||
color: #ef404a; |
|||
} |
|||
/*---------------- |
|||
Extra Content |
|||
-----------------*/ |
|||
.ui.cards .card .extra, |
|||
.ui.card .extra { |
|||
position: static; |
|||
background: #fafafa -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: #fafafa linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
width: 100%; |
|||
padding: 0.75em 1em; |
|||
top: 0em; |
|||
left: 0em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: color 0.25s ease; |
|||
transition: color 0.25s ease; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
.ui.link.cards .card:hover, |
|||
.ui.link.card:hover { |
|||
cursor: pointer; |
|||
z-index: 5; |
|||
background: ''; |
|||
border: none; |
|||
box-shadow: 0px 0px 0px 0px #b0b0b0, 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
@media only screen and (max-width: 768px) { |
|||
.ui.stackable.cards { |
|||
display: block !important; |
|||
} |
|||
.ui.stackable.cards > .card, |
|||
.ui.stackable.cards > .row > .card { |
|||
display: block !important; |
|||
height: auto !important; |
|||
width: auto !important; |
|||
padding: 0% !important; |
|||
} |
|||
} |
|||
/*-------------- |
|||
Item Count |
|||
---------------*/ |
|||
.ui.one.cards { |
|||
margin-left: -2%; |
|||
margin-right: -2%; |
|||
} |
|||
.ui.one.cards > .card { |
|||
width: 100%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
} |
|||
.ui.two.cards { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.two.cards > .card { |
|||
width: 48%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.two.cards > .card:nth-child(2n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.three.cards { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.three.cards > .card { |
|||
width: 31.333%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.three.cards > .card:nth-child(3n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.four.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.four.cards > .card { |
|||
width: 24%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.four.cards > .card:nth-child(4n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.five.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.five.cards > .card { |
|||
width: 19%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.five.cards > .card:nth-child(5n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.six.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.six.cards > .card { |
|||
width: 15.66%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.six.cards > .card:nth-child(6n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.seven.cards { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.seven.cards > .card { |
|||
width: 13.28%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.seven.cards > .card:nth-child(7n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.eight.cards { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.eight.cards > .card { |
|||
width: 12.0%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.eight.cards > .card:nth-child(8n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.nine.cards { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.nine.cards > .card { |
|||
width: 10.61%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.nine.cards > .card:nth-child(9n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.ten.cards { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.ten.cards > .card { |
|||
width: 9.6%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.cards > .card:nth-child(10n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.eleven.cards { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.eleven.cards > .card { |
|||
width: 8.69%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.eleven.cards > .card:nth-child(11n+1) { |
|||
clear: left; |
|||
} |
|||
.ui.twelve.cards { |
|||
margin-left: -0.1%; |
|||
margin-right: -0.1%; |
|||
} |
|||
.ui.twelve.cards > .card { |
|||
width: 8.1333%; |
|||
margin-left: 0.1%; |
|||
margin-right: 0.1%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.twelve.cards > .card:nth-child(12n+1) { |
|||
clear: left; |
|||
} |
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
.ui.cards > .row > .card, |
|||
.ui.cards > .card { |
|||
font-size: 1em; |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
/******************************* |
|||
Card |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
View |
|||
--------------------*/ |
|||
|
|||
@width: 250px; |
|||
@background: transparent; |
|||
@border: none; |
|||
@boxShadow: none; |
|||
|
|||
@contentPadding: 1em 0em; |
|||
|
|||
@extraBackground: transparent; |
|||
@extraDivider: none; |
|||
@extraBoxShadow: none; |
|||
|
|||
@headerFontSize: 1.2em; |
|||
|
|||
@imageBorderRadius: @borderRadius; |
|||
@imageBorder: 1px solid @borderColor; |
|||
|
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save