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
Unified 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