Browse Source
Migrates item view to card view, in preperation for a more generic card view, extends docs on cards
pull/993/head
Migrates item view to card view, in preperation for a more generic card view, extends docs on cards
pull/993/head
jlukic
10 years ago
17 changed files with 1023 additions and 171 deletions
Split View
Diff Options
-
2RELEASE NOTES.md
-
263server/documents/views/card.html.eco
-
166server/documents/views/item.html.eco
-
1server/layouts/default.html.eco
-
1src/definitions/collections/message.less
-
521src/definitions/views/card.less
-
5src/definitions/views/item.less
-
1src/semantic.config.example
-
3src/themes/_site/views/card.overrides
-
3src/themes/_site/views/card.variables
-
3src/themes/packages/basic/elements/button.variables
-
4src/themes/packages/default/collections/message.variables
-
6src/themes/packages/default/elements/label.variables
-
2src/themes/packages/default/globals/site.variables
-
98src/themes/packages/default/views/card.overrides
-
111src/themes/packages/default/views/card.variables
-
4src/themes/packages/default/views/item.variables
@ -0,0 +1,263 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'card' |
|||
|
|||
title : 'Card' |
|||
description : 'A card view can be used to list site content as a playing card' |
|||
type : 'UI View' |
|||
--- |
|||
|
|||
<%- @partial('header') %> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">Content</a> |
|||
<a class="card">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Card</h4> |
|||
<p>A single card.</p> |
|||
<div class="ui card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> |
|||
</div> |
|||
<div class="extra content"> |
|||
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="clearing example"> |
|||
<h4 class="ui header">Cards</h4> |
|||
<p>A group of cards. </p> |
|||
<div class="ignored yellow ui message"> |
|||
<i class="info icon"></i> |
|||
Cards must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height. |
|||
</div> |
|||
<div class="ui cards"> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> |
|||
</div> |
|||
<div class="extra content"> |
|||
199 Votes |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Faithful Dog</div> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> |
|||
</div> |
|||
<div class="extra content"> |
|||
199 Votes |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Silly Dog</div> |
|||
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div> |
|||
</div> |
|||
<div class="extra content"> |
|||
199 Votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Content</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Title</h4> |
|||
<p>A card can contain content a title</p> |
|||
<div class="ui card"> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="meta">2 days ago</div> |
|||
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Metadata</h4> |
|||
<p>A card can contain content metadata</p> |
|||
<div class="ui info message"> |
|||
<i class="info icon"></i> |
|||
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced |
|||
</div> |
|||
<div class="ui card"> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="meta"> |
|||
<span class="time">2 days ago</span> |
|||
<span class="category">Animals</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Description</h4> |
|||
<p>A card can contain a description with a single or multiple paragraphs</p> |
|||
<div class="ui card"> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="meta">2 days ago</div> |
|||
<div class="description"> |
|||
<p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p> |
|||
<p>Many people also have their own barometers for what makes a cute dog.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Image</h4> |
|||
<p>A card can contain an image</p> |
|||
<div class="ui card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres.jpg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Floated Content</h4> |
|||
<p>Any content element can be floated left or right</p> |
|||
<div class="ui info message"> |
|||
<i class="info icon"></i> |
|||
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced |
|||
</div> |
|||
<div class="ui card"> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="meta"> |
|||
<span class="right floated time">2 days ago</span> |
|||
<span class="category">Animals</span> |
|||
</div> |
|||
<div class="description"> |
|||
We are one too! |
|||
</div> |
|||
</div> |
|||
<div class="extra content"> |
|||
<div class="right floated author"> |
|||
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Column count</h4> |
|||
<p>An item list can list how many columns should exist in a row</p> |
|||
<div class="ui four cards"> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres4.jpg"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres5.jpg"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Faithful Dog</div> |
|||
<div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres3.jpg"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Silly Dog</div> |
|||
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres2.jpg"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Happy Dog</div> |
|||
<div class="description">Happy dogs are pretty interesting if you are an unhappy person.</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Stackable</h4> |
|||
<div class="ui ignored info message">Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints</div> |
|||
<p>An item view can have its cards take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p> |
|||
<div class="ui stackable cards"> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres5.jpg"> |
|||
<a class="like ui corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Cute Dog</div> |
|||
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> |
|||
<div class="extra content"> |
|||
11 Votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<img src="/images/demo/highres6.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="header">Faithful Dog</div> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> |
|||
<div class="extra content"> |
|||
11 Votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,521 @@ |
|||
/* |
|||
* # 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 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: @titleMargin; |
|||
font-family: @titleFont; |
|||
font-weight: @titleFontWeight; |
|||
font-size: @titleFontSize; |
|||
color: @titleColor; |
|||
} |
|||
.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 { |
|||
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; |
|||
} |
|||
|
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
|
|||
/*-----Star----- */ |
|||
|
|||
/* hover */ |
|||
.ui.cards .card .star.label:hover::after, |
|||
.ui.card .star.label:hover::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.cards .card .star.label:hover::after, |
|||
.ui.card .star.label:hover::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.cards .card .star.label:hover .icon, |
|||
.ui.card .star.label:hover .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/* active */ |
|||
.ui.cards .card .star.label.active::after, |
|||
.ui.card .star.label.active::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.cards .card .star.label.active::after, |
|||
.ui.card .star.label.active::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.cards .card .star.label.active .icon, |
|||
.ui.card .star.label.active .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/*-----Like----- */ |
|||
|
|||
/* hover */ |
|||
.ui.cards .card .like.label:hover::after, |
|||
.ui.card .like.label:hover::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.cards .card .like.label.active::after, |
|||
.ui.card .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.cards .card .like.label:hover .icon, |
|||
.ui.card .like.label:hover .icon { |
|||
color: #EF404A |
|||
} |
|||
/* active */ |
|||
.ui.cards .card .like.label.active::after, |
|||
.ui.card .like.label.active::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.cards .card .like.label.active::after, |
|||
.ui.card .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.cards .card .like.label.active .icon, |
|||
.ui.card .like.label.active .icon { |
|||
color: #EF404A |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Extra Content |
|||
---------------*/ |
|||
|
|||
.ui.cards .card .extra, |
|||
.ui.card .extra { |
|||
position: @extraDisplay; |
|||
width: @extraWidth; |
|||
padding: @extraPadding; |
|||
top: @extraTop; |
|||
left: @extraLeft; |
|||
color: @extraColor; |
|||
transition: @extraTransition; |
|||
border-top: @extraDivider; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.cards .card:hover, |
|||
.ui.card:hover { |
|||
cursor: @hoverCursor; |
|||
z-index: @hoverZIndex; |
|||
border: @hoverBorder; |
|||
box-shadow: @hoverBoxShadow; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
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,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,111 @@ |
|||
/******************************* |
|||
Item |
|||
*******************************/ |
|||
/*------------------- |
|||
View |
|||
--------------------*/ |
|||
|
|||
/* Shadow */ |
|||
@shadowDistance: 3px; |
|||
@shadowBoxShadow: 0px 3px 0px 0px @solidBorderColor; |
|||
|
|||
/* Item */ |
|||
@background: #FFFFFF; |
|||
@borderRadius: 0.325rem; |
|||
@display: block; |
|||
@margin: 0em @horizontalSpacing @rowSpacing; |
|||
@minHeight: 0px; |
|||
@padding: 0em; |
|||
@width: 300px; |
|||
@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; |
|||
|
|||
/* Title */ |
|||
@titleMargin: 0em; |
|||
@titleFont: @headerFont; |
|||
@titleFontWeight: bold; |
|||
@titleFontSize: 1.25em; |
|||
@titleColor: @darkTextColor; |
|||
|
|||
/* Metadata */ |
|||
@metaSpacing: 0.3em; |
|||
@metaColor: @lightTextColor; |
|||
|
|||
/* 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: none; |
|||
@extraDisplay: static; |
|||
@extraTop: 0em; |
|||
@extraLeft: 0em; |
|||
@extraWidth: 100%; |
|||
@extraPadding: 0.5em 1em; |
|||
@extraColor: @lightTextColor; |
|||
@extraTransition: color @transitionDuration @transitionEasing; |
|||
|
|||
/*------------------- |
|||
States |
|||
--------------------*/ |
|||
|
|||
@shadowHoverBoxShadow: 0px 3px 0px 0px @solidSelectedBorderColor; |
|||
|
|||
@hoverCursor: pointer; |
|||
@hoverZIndex: 5; |
|||
@hoverBorder: none; |
|||
@hoverBoxShadow: |
|||
@shadowHoverBoxShadow, |
|||
0px 0px 0px 1px @selectedBorderColor |
|||
; |
|||
|
|||
|
|||
/*------------------- |
|||
Variations |
|||
--------------------*/ |
|||
|
|||
/* Sizes */ |
|||
@medium: 1em; |
|||
Write
Preview
Loading…
Cancel
Save