diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index afb2b251d..6ef2c72a8 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -7,7 +7,7 @@ - **Checkbox** - Checkbox "enable" and "disable" have been replaced with "check" and "uncheck" - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description`` - **Accordion** - Accordions are not unstyled by default allowing for more compatability with other modules without having to override styles. Styled accordions are now included as a variation ``ui styled accordion`` -- **Item** - "Name" has been renamed "Header" to be consistent with other modules. Additional content is no longer nested inside item content, but as an optional variation of content that is formatted to be less pronounced +- **Item** - Items have now been renamed "card" to allow for a more generic item list that does not use a "card" style. Some 'card' view content has been slightly adjusted. Please refer to documentation **Enhancements** - **Accordion** - Accordion now includes all icons in an embedded font instead of requiring icons diff --git a/server/documents/views/card.html.eco b/server/documents/views/card.html.eco new file mode 100644 index 000000000..d6752bbaf --- /dev/null +++ b/server/documents/views/card.html.eco @@ -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') %> +
+ +
+
+ Types + Content + Variations +
+
+ +

Types

+ +
+

Card

+

A single card.

+
+
+ +
+
+
Cute Dog
+
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
+
+
+ Dog Doggington +
+
+
+ +
+

Cards

+

A group of cards.

+
+ + 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. +
+
+
+
+ +
+
+
Cute Dog
+
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
+
+
+ 199 Votes +
+
+
+
+ +
+
+
Faithful Dog
+
5 days ago
+
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.
+
+
+ 199 Votes +
+
+
+
+ +
+
+
Silly Dog
+
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
+
+
+ 199 Votes +
+
+
+
+ +

Content

+ +
+

Title

+

A card can contain content a title

+
+
+
Cute Dog
+
2 days ago
+
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
+
+
+
+
+

Metadata

+

A card can contain content metadata

+
+ + You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced +
+
+
+
Cute Dog
+
+ 2 days ago + Animals +
+
+
+
+ +
+

Description

+

A card can contain a description with a single or multiple paragraphs

+
+
+
Cute Dog
+
2 days ago
+
+

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.

+

Many people also have their own barometers for what makes a cute dog.

+
+
+
+
+ +
+

Image

+

A card can contain an image

+
+
+ +
+
+
+ +

Variations

+ +
+

Floated Content

+

Any content element can be floated left or right

+
+ + You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced +
+
+
+
Cute Dog
+
+ 2 days ago + Animals +
+
+ We are one too! +
+
+
+
+ Dog Doggington +
+
+
+
+ +
+

Column count

+

An item list can list how many columns should exist in a row

+
+
+
+ + + + +
+
+
Cute Dog
+
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
+
+
+
+
+ + + + +
+
+
Faithful Dog
+
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.
+
+
+
+
+ + + + +
+
+
Silly Dog
+
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
+
+
+
+
+ + + + +
+
+
Happy Dog
+
Happy dogs are pretty interesting if you are an unhappy person.
+
+
+
+
+ +
+

Stackable

+
Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints
+

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

+
+
+
+ + +
+
+
Cute Dog
+
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
+
+ 11 Votes +
+
+
+
+
+ +
+
+
Faithful Dog
+
5 days ago
+
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.
+
+ 11 Votes +
+
+
+
+
+ +
diff --git a/server/documents/views/item.html.eco b/server/documents/views/item.html.eco index d46b2f23e..e5706e7f2 100755 --- a/server/documents/views/item.html.eco +++ b/server/documents/views/item.html.eco @@ -1,10 +1,9 @@ --- layout : 'default' -standalone : true css : 'item' title : 'Item' -description : 'An item view presents related site content' +description : 'An item view can be used to list site content' type : 'UI View' --- @@ -45,8 +44,8 @@ type : 'UI View'
-
5 days ago
Faithful Dog
+
5 days ago
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.
@@ -72,8 +71,8 @@ type : 'UI View'
-
2 days ago
Cute Dog
+
2 days ago
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
121 Votes @@ -82,8 +81,8 @@ type : 'UI View'
-
5 days ago
Faithful Dog
+
5 days ago
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.
121 Votes @@ -92,8 +91,8 @@ type : 'UI View'
-
1 week ago
Silly Dog
+
1 week ago
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
121 Votes @@ -128,8 +127,8 @@ type : 'UI View'
-
5 days ago
Faithful Dog
+
5 days ago
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.
@@ -179,8 +178,8 @@ type : 'UI View'
-
5 days ago
Faithful Dog
+
5 days ago
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.
11 Votes @@ -190,90 +189,6 @@ type : 'UI View'
-
-

Connected

-

An item list can be automatically sized to be even height.

-
- - Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified. -
-
-
-
-
- -
-
-
Cute Dog
-
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
-
-
-
-
- -
-
-
Faithful Dog
-
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.
-
-
-
-
- -
-
-
Silly Dog
-
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
-
-
-
-
-
-
-
-
-
-
-
Cute Dog
-
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
-
-
-
-
-
Faithful Dog
-
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.
-
-
-
-
-
Silly Dog
-
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
-
-
-
-
-
Cute Dog
-
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
-
-
-
-
-
Faithful Dog
-
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.
-
-
-
-
-
Silly Dog
-
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
-
-
-
-
-
- - -

Column count

An item list can list how many columns should exist in a row

@@ -323,72 +238,7 @@ type : 'UI View'
Happy Dog
-
Happy dogs are pretty interesting if you are an unhappy person.

- -
-
-
-
-

A connected item list with a specified column count

-
-
-
- - - - -
-
-
Cute Dog
-
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
-
-
-
-
- - - - -
-
-
Faithful Dog
-
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.
-
-
-
-
- - - - -
-
-
Silly Dog
-
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
-
-
-
-
- - - - -
-
-
Happy Dog
-
Happy dogs are pretty interesting if you are an unhappy person.

- -
-
-
- - - - -
-
-
Quiet Dog
-
A quiet dog is nice if you dont like a lot of upkeep for your dogs.
+
Happy dogs are pretty interesting if you are an unhappy person.
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index cf3cd653c..1cdbd012c 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -55,6 +55,7 @@ + diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less index bad261ba5..930842f72 100755 --- a/src/definitions/collections/message.less +++ b/src/definitions/collections/message.less @@ -18,7 +18,6 @@ @import '../../semantic.config'; - /******************************* Message *******************************/ diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less new file mode 100644 index 000000000..e4ee796f0 --- /dev/null +++ b/src/definitions/views/card.less @@ -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; +} \ No newline at end of file diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less index 8c9b51252..167ecba12 100755 --- a/src/definitions/views/item.less +++ b/src/definitions/views/item.less @@ -85,12 +85,12 @@ position: relative; padding: @imagePadding; background: @imageBackground; - border-radius: @imageBorderRadius; } .ui.items .item > .image > img { display: block; width: 100%; height: auto; + border-radius: @imageBorderRadius; } /*-------------- @@ -126,6 +126,7 @@ font-size: @titleFontSize; color: @titleColor; } +.ui.items .item > .content > .meta + .description, .ui.items .item > .content > .header + .description { margin-top: @descriptionDistance; } @@ -165,11 +166,9 @@ ---------------*/ .ui.items .item .meta { - float: @metaFloat; color: @metaColor; } - /*-------------- Labels ---------------*/ diff --git a/src/semantic.config.example b/src/semantic.config.example index 80da873eb..c9b17ccbe 100755 --- a/src/semantic.config.example +++ b/src/semantic.config.example @@ -77,6 +77,7 @@ @video : 'default'; /* Views */ +@card : 'default'; @comment : 'default'; @feed : 'default'; @item : 'default'; diff --git a/src/themes/_site/views/card.overrides b/src/themes/_site/views/card.overrides new file mode 100644 index 000000000..6f085f935 --- /dev/null +++ b/src/themes/_site/views/card.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/themes/_site/views/card.variables b/src/themes/_site/views/card.variables new file mode 100644 index 000000000..6f085f935 --- /dev/null +++ b/src/themes/_site/views/card.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/themes/packages/basic/elements/button.variables b/src/themes/packages/basic/elements/button.variables index 751944503..a3d1ebd29 100644 --- a/src/themes/packages/basic/elements/button.variables +++ b/src/themes/packages/basic/elements/button.variables @@ -31,6 +31,9 @@ @loadingBackgroundColor: #F0F0F0; +@labeledIconLeftShadow: none; +@labeledIconRightShadow: none; + @mini: 0.6rem; @tiny: 0.7rem; @small: 0.85rem; diff --git a/src/themes/packages/default/collections/message.variables b/src/themes/packages/default/collections/message.variables index 68763704c..adaea93c0 100755 --- a/src/themes/packages/default/collections/message.variables +++ b/src/themes/packages/default/collections/message.variables @@ -25,11 +25,9 @@ ; /* Header */ - @headerFontSize: 1.3em; @headerFontWeight: bold; @headerBottomMargin: 0.25em; - @headerDisplay: block; @headerHorizontalDistance: 0em; @@ -60,7 +58,7 @@ /* Icon Message */ @iconSize: 2em; @iconOpacity: 0.8; -@iconContentDistance: 1.5em; +@iconContentDistance: 1.5rem; @iconVerticalAlign: middle; /* Attached */ diff --git a/src/themes/packages/default/elements/label.variables b/src/themes/packages/default/elements/label.variables index 4b4ca7845..f3ae3d339 100755 --- a/src/themes/packages/default/elements/label.variables +++ b/src/themes/packages/default/elements/label.variables @@ -86,14 +86,14 @@ /* Corner */ @cornerSizeRatio: 1.2; -@cornerTriangleSize: 3em; +@cornerTriangleSize: 2.5em; @cornerTextWidth: 2.5em; @cornerTextSize: 0.7em; @cornerIconSize: 0.7em; -@cornerTopOffset: 0.45em; -@cornerLeftOffset: 0.75em; +@cornerTopOffset: 0.1em; +@cornerLeftOffset: 0.95em; /* Horizontal */ @horizontalLabelMinWidth: 3em; diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index f4a82c844..66d619e39 100755 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -249,7 +249,9 @@ @borderColor : rgba(0, 0, 0, 0.1); @selectedBorderColor : rgba(0, 0, 0, 0.2); + @solidBorderColor : #DDDDDD; +@solidSelectedBorderColor : #B0B0B0; @whiteBorderColor : rgba(255, 255, 255, 0.2); @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); diff --git a/src/themes/packages/default/views/card.overrides b/src/themes/packages/default/views/card.overrides new file mode 100644 index 000000000..8132fa045 --- /dev/null +++ b/src/themes/packages/default/views/card.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; \ No newline at end of file diff --git a/src/themes/packages/default/views/card.variables b/src/themes/packages/default/views/card.variables new file mode 100644 index 000000000..7bd2a5d21 --- /dev/null +++ b/src/themes/packages/default/views/card.variables @@ -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; \ No newline at end of file diff --git a/src/themes/packages/default/views/item.variables b/src/themes/packages/default/views/item.variables index be8862579..8132fa045 100644 --- a/src/themes/packages/default/views/item.variables +++ b/src/themes/packages/default/views/item.variables @@ -7,7 +7,7 @@ /* Item */ @background: #FFFFFF; -@borderRadius: 0.325em; +@borderRadius: 0.325rem; @display: block; @float: left; @margin: 0em @horizontalSpacing @rowSpacing; @@ -39,7 +39,7 @@ /* Content */ @contentMargin: 0em; -@contentPadding: 0.75em 0.5em; +@contentPadding: 0.75em 1em; @contentFontSize: 1em; @contentBorder: none; @contentBorderRadius: 0em;