richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Complete item theming and documentation

pull/993/head
jlukic 10 years ago
parent
9fc417f183
commit
1369498b6c
8 changed files with 406 additions and 580 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/definitions/elements/header.less
  2. 104
      src/definitions/views/card.less
  3. 630
      src/definitions/views/item.less
  4. 2
      src/themes/packages/default/elements/button.variables
  5. 12
      src/themes/packages/default/elements/header.variables
  6. 103
      src/themes/packages/default/globals/site.variables
  7. 3
      src/themes/packages/default/views/card.variables
  8. 115
      src/themes/packages/default/views/item.variables

17
src/definitions/elements/header.less
View File

@ -375,6 +375,9 @@ h5.ui.header {
.ui.block.header {
background: @blockBackground;
padding: @blockVerticalPadding @blockHorizontalPadding;
box-shadow: @blockBoxShadow;
border: @blockBorder;
border-radius: @blockBorderRadius;
}
/*-------------------
@ -384,18 +387,26 @@ h5.ui.header {
.ui.attached.header {
background: @attachedBackground;
margin: 0em;
padding: @attachedVerticalPadding @attachedVerticalPadding;
padding: @attachedVerticalPadding @attachedHorizontalPadding;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
margin-left: @attachedOffset;
margin-right: @attachedOffset;
}
.ui.attached:not(.top, .bottom) {
margin: 0em;
.ui.attached:not(.top):not(.bottom) {
margin-top: 0em;
margin-bottom: 0em;
border-top: none;
border-bottom: none;
}
.ui.top.attached.header {
margin-bottom: 0em;
border-bottom: none;
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
}
.ui.bottom.attached.header {
margin-top: 0em;
border-top: none;
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
}

104
src/definitions/views/card.less
View File

@ -37,7 +37,7 @@
float: @groupFloat;
}
.ui.cards:first-child
.ui.cards:first-child,
.ui.card:first-child {
margin-top: 0em;
}
@ -82,10 +82,8 @@
margin: @margin;
}
.ui.cards a.card,
.ui.cards .card a,
.ui.card a,
a.ui.cards {
.ui.cards > .card a,
.ui.card a {
cursor: pointer;
}
@ -108,14 +106,14 @@ a.ui.cards {
Images
---------------*/
.ui.cards .card > .image,
.ui.cards > .card > .image,
.ui.card > .image {
display: block;
position: relative;
padding: @imagePadding;
background: @imageBackground;
}
.ui.cards .card > .image > img,
.ui.cards > .card > .image > img,
.ui.card > .image > img {
display: block;
width: 100%;
@ -124,32 +122,16 @@ a.ui.cards {
border: @imageBorder;
}
.ui.cards .card > .image:only-child > img,
.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.cards > .card > .content,
.ui.card > .content {
background: @contentBackground;
margin: @contentMargin;
@ -160,7 +142,7 @@ a.ui.cards {
border-radius: @contentBorderRadius;
}
.ui.cards .card > .content:after,
.ui.cards > .card > .content:after,
.ui.card > .content:after {
display: block;
content: ' ';
@ -170,7 +152,7 @@ a.ui.cards {
visibility: hidden;
}
.ui.cards .card > .content > .header,
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
display: block;
margin: @headerMargin;
@ -179,25 +161,38 @@ a.ui.cards {
font-size: @headerFontSize;
color: @headerColor;
}
.ui.cards .card > .content > .meta + .description,
.ui.cards .card > .content > .header + .description,
.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
Floated
---------------*/
.ui.cards > .card .left.floated,
.ui.card .left.floated {
float: left;
}
.ui.cards > .card .right.floated,
.ui.card .right.floated {
float: right;
}
/*--------------
Content Image
---------------*/
.ui.cards .card .content img,
.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.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
width: @avatarSize;
@ -210,7 +205,7 @@ a.ui.cards {
Description
---------------*/
.ui.cards .card > .content > .description,
.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
clear: both;
color: @descriptionColor;
@ -220,11 +215,11 @@ a.ui.cards {
Paragraph
---------------*/
.ui.cards .card > .content p,
.ui.cards > .card > .content p,
.ui.card > .content p {
margin: 0em 0em @paragraphDistance;
}
.ui.cards .card > .content p:last-child,
.ui.cards > .card > .content p:last-child,
.ui.card > .content p:last-child {
margin-bottom: 0em;
}
@ -233,21 +228,21 @@ a.ui.cards {
Meta
---------------*/
.ui.cards .card .meta,
.ui.cards > .card .meta,
.ui.card .meta {
font-size: @metaFontSize;
color: @metaColor;
}
.ui.cards .card .meta *,
.ui.cards > .card .meta *,
.ui.card .meta * {
margin-right: @metaSpacing;
}
.ui.cards .card .meta :last-child,
.ui.cards > .card .meta :last-child,
.ui.card .meta :last-child {
margin-right: 0em;
}
.ui.cards .card .meta .right.floated,
.ui.cards > .card .meta .right.floated,
.ui.card .meta .right.floated {
margin-right: 0em;
margin-left: @metaSpacing;
@ -258,31 +253,32 @@ a.ui.cards {
---------------*/
/* Generic */
.ui.cards .card > .content a,
.ui.cards > .card > .content a,
.ui.card > .content a {
color: @contentLinkColor;
transition: @contentLinkTransition;
}
.ui.cards .card > .content a:hover,
.ui.cards > .card > .content a:hover,
.ui.card > .content a:hover {
color: @contentLinkHoverColor;
}
/* Header */
.ui.cards .card > .content > a.header,
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
color: @headerLinkColor;
}
.ui.cards .card > .content > a.header:hover,
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
color: @headerLinkHoverColor;
}
/* Meta */
.ui.cards .card .meta a,
.ui.cards > .card .meta a,
.ui.card .meta a {
color: @metaLinkColor;
}
.ui.cards .card .meta a:hover,
.ui.cards > .card .meta a:hover,
.ui.card .meta a:hover {
color: @metaLinkHoverColor;
}
@ -296,18 +292,18 @@ a.ui.cards {
/*-----Star----- */
/* Icon */
.ui.cards .card > .content .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.cards > .card > .content .star.icon:hover,
.ui.card > .content .star.icon:hover {
opacity: @actionHoverOpacity;
color: @starColor;
}
.ui.cards .card > .content .active.star.icon,
.ui.cards > .card > .content .active.star.icon,
.ui.card > .content .active.star.icon {
color: @starActiveColor;
}
@ -315,18 +311,18 @@ a.ui.cards {
/*-----Like----- */
/* Icon */
.ui.cards .card > .content .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.cards > .card > .content .like.icon:hover,
.ui.card > .content .like.icon:hover {
opacity: @actionHoverOpacity;
color: @likeColor;
}
.ui.cards .card > .content .active.like.icon,
.ui.cards > .card > .content .active.like.icon,
.ui.card > .content .active.like.icon {
color: @likeActiveColor;
}
@ -335,10 +331,10 @@ a.ui.cards {
Extra Content
-----------------*/
.ui.cards .card .extra,
.ui.cards > .card .extra,
.ui.card .extra {
min-height: 0px !important;
position: @extraDisplay;
position: @extraPosition;
background: @extraBackground;
width: @extraWidth;
padding: @extraPadding;

630
src/definitions/views/item.less
View File

@ -22,14 +22,37 @@
Standard
*******************************/
/*--------------
Item
---------------*/
.ui.items > .item {
display: @display;
margin: @margin;
width: @width;
min-height: @minHeight;
background: @background;
padding: @padding;
border: @border;
border-radius: @borderRadius;
box-shadow: @boxShadow;
transition: @transition;
z-index: @zIndex;
}
.ui.items > .item a {
cursor: pointer;
}
/*--------------
Items
---------------*/
.ui.items {
margin: @groupMargin;
margin: @itemsMargin;
}
.ui.items:first-child {
margin-top: 0em;
}
@ -37,8 +60,14 @@
margin-bottom: 0em;
}
/* Clearing */
.ui.items:after {
/*--------------
Item
---------------*/
.ui.items > .item {
min-width: 100%;
}
.ui.items > .item:after {
display: block;
content: ' ';
height: 0px;
@ -46,71 +75,50 @@
overflow: hidden;
visibility: hidden;
}
/*--------------
Item
---------------*/
.ui.items > .row > .item,
.ui.items > .item {
position: relative;
display: @display;
float: @float;
width: @width;
min-height: @minHeight;
margin: @margin;
background: @background;
padding: @padding;
border: @border;
border-radius: @borderRadius;
box-shadow: @boxShadow;
z-index: @zIndex;
.ui.items > .item:first-child {
margin-top: 0em;
}
.ui.items a.item,
.ui.items .item a {
cursor: pointer;
.ui.items > .item:last-child {
margin-bottom: 0em;
}
/*--------------
Images
---------------*/
.ui.items .item > .image {
display: block;
.ui.items > .item > .image {
position: relative;
display: @imageDisplay;
float: @imageFloat;
width: @imageWidth;
margin: @imageMargin;
padding: @imagePadding;
background: @imageBackground;
max-height: @imageMaxHeight;
vertical-align: @imageVerticalAlign;
}
.ui.items .item > .image > img {
.ui.items > .item > .image > img {
display: block;
width: 100%;
height: auto;
border-radius: @imageBorderRadius;
border: @imageBorder;
}
/*--------------
Floated
---------------*/
.ui.items .item .left {
float: left;
}
.ui.items .item .right {
float: right;
.ui.items > .item > .image:only-child > img {
border-radius: @borderRadius;
}
/*--------------
Content
---------------*/
.ui.items .item > .content {
.ui.items > .item > .content {
display: block;
background: @contentBackground;
margin: @contentMargin;
padding: @contentPadding;
box-shadow: @contentBoxShadow;
@ -118,35 +126,69 @@
border: @contentBorder;
border-radius: @contentBorderRadius;
}
.ui.items .item > .content > .header {
.ui.items > .item > .content:after {
display: block;
content: ' ';
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;
}
.ui.items > .item > .image + .content {
display: @contentDisplay;
margin-left: @contentOffset;
vertical-align: @contentVerticalAlign;
padding-left: @contentImagePadding;
}
.ui.items > .item > .content > .header {
display: block;
margin: @titleMargin;
font-family: @titleFont;
font-weight: @titleFontWeight;
font-size: @titleFontSize;
color: @titleColor;
}
.ui.items .item > .content > .meta + .description,
.ui.items .item > .content > .header + .description {
margin: @headerMargin;
font-family: @headerFont;
font-weight: @headerFontWeight;
font-size: @headerFontSize;
color: @headerColor;
}
.ui.items > .item > .content > .meta + .description,
.ui.items > .item > .content > .header + .description {
margin-top: @descriptionDistance;
}
/*--------------
Image
Floated
---------------*/
.ui.items .item .content img {
.ui.items > .item .left.floated {
float: left;
}
.ui.items > .item .right.floated {
float: right;
}
/*--------------
Content Image
---------------*/
.ui.items > .item .content img {
display: inline-block;
vertical-align: @contentImageVerticalAlign;
width: @contentImageWidth;
}
.ui.items > .item img.avatar,
.ui.items > .item .avatar img {
width: @avatarSize;
height: @avatarSize;
border-radius: @avatarBorderRadius;
}
/*--------------
Description
---------------*/
.ui.items .item > .content > .description {
clear: both;
.ui.items > .item > .content > .description {
color: @descriptionColor;
}
@ -154,10 +196,10 @@
Paragraph
---------------*/
.ui.items .item > .content p {
.ui.items > .item > .content p {
margin: 0em 0em @paragraphDistance;
}
.ui.items .item > .content p:last-child {
.ui.items > .item > .content p:last-child {
margin-bottom: 0em;
}
@ -165,427 +207,161 @@
Meta
---------------*/
.ui.items .item .meta {
.ui.items > .item .meta {
font-size: @metaFontSize;
color: @metaColor;
}
/*--------------
Labels
---------------*/
/*-----Star----- */
/* hover */
.ui.items .item .star.label:hover::after {
border-right-color: #F6EFC3;
}
.ui.items .item .star.label:hover::after {
border-top-color: #F6EFC3;
.ui.items > .item .meta * {
margin-right: @metaSpacing;
}
.ui.items .item .star.label:hover .icon {
color: #AC9400
.ui.items > .item .meta :last-child {
margin-right: 0em;
}
/* active */
.ui.items .item .star.label.active::after {
border-right-color: #F6EFC3;
}
.ui.items .item .star.label.active::after {
border-top-color: #F6EFC3;
}
.ui.items .item .star.label.active .icon {
color: #AC9400
.ui.items > .item .meta .right.floated {
margin-right: 0em;
margin-left: @metaSpacing;
}
/*-----Like----- */
/* hover */
.ui.items .item .like.label:hover::after {
border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
border-top-color: #F5E1E2;
}
.ui.items .item .like.label:hover .icon {
color: #EF404A
}
/* active */
.ui.items .item .like.label.active::after {
border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
border-top-color: #F5E1E2;
}
.ui.items .item .like.label.active .icon {
color: #EF404A
}
/*--------------
Extra Content
Links
---------------*/
.ui.items .item .extra {
position: @extraDisplay;
width: @extraWidth;
padding: @extraPadding;
top: @extraTop;
left: @extraLeft;
color: @extraColor;
transition: @extraTransition;
/* Generic */
.ui.items > .item > .content a {
color: @contentLinkColor;
transition: @contentLinkTransition;
}
/*******************************
States
*******************************/
.ui.items .item:hover {
cursor: @hoverCursor;
z-index: @hoverZIndex;
border: @hoverBorder;
box-shadow: @hoverBoxShadow;
.ui.items > .item > .content a:hover {
color: @contentLinkHoverColor;
}
/*******************************
Variations
*******************************/
/*--------------
Connected
---------------*/
.ui.connected.items {
display: table;
width: 100%;
margin-left: 0em !important;
margin-right: 0em !important;
}
.ui.connected.items > .row > .item,
.ui.connected.items > .item {
float: none;
display: table-cell;
vertical-align: top;
height: auto;
border-radius: 0px;
margin: 0em;
width: 33.33%;
/* Header */
.ui.items > .item > .content > a.header {
color: @headerLinkColor;
}
.ui.connected.items > .row {
display: table;
margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
margin-top: 0em;
.ui.items > .item > .content > a.header:hover {
color: @headerLinkHoverColor;
}
/* Borders */
.ui.connected.items > .item,
.ui.connected.items > .row:last-child > .item {
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
}
.ui.connected.items > .row:last-child > .item:first-child,
.ui.connected.items > .item:first-child {
border-radius: 0em 0em 0em 0.33em;
/* Meta */
.ui.items > .item .meta a {
color: @metaLinkColor;
}
.ui.connected.items > .row:last-child > .item:last-child,
.ui.connected.items > .item:last-child {
border-radius: 0em 0em 0.33em 0em;
.ui.items > .item .meta a:hover {
color: @metaLinkHoverColor;
}
/* Hover */
.ui.connected.items .item:hover {
border-bottom-width: 0.2em;
}
/* Item Count */
.ui.one.connected.items > .row > .item,
.ui.one.connected.items > .item {
width: @oneColumn;
}
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
width: @twoColumn;
}
.ui.three.connected.items > .row > .item,
.ui.three.connected.items > .item {
width: @threeColumn;
}
.ui.four.connected.items > .row > .item,
.ui.four.connected.items > .item {
width: @fourColumn;
}
.ui.five.connected.items > .row > .item,
.ui.five.connected.items > .item {
width: @fiveColumn;
}
.ui.six.connected.items > .row > .item,
.ui.six.connected.items > .item {
width: @sixColumn;
}
.ui.seven.connected.items > .row > .item,
.ui.seven.connected.items > .item {
width: @sevenColumn;
}
.ui.eight.connected.items > .row > .item,
.ui.eight.connected.items > .item {
width: @eightColumn;
}
.ui.nine.connected.items > .row > .item,
.ui.nine.connected.items > .item {
width: @nineColumn;
}
.ui.ten.connected.items > .row > .item,
.ui.ten.connected.items > .item {
width: @tenColumn;
}
.ui.eleven.connected.items > .row > .item,
.ui.eleven.connected.items > .item {
width: @elevenColumn;
}
.ui.twelve.connected.items > .row > .item,
.ui.twelve.connected.items > .item {
width: @twelveColumn;
}
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width : 768px) {
.ui.stackable.items {
display: block !important;
}
.ui.stackable.items > .item,
.ui.stackable.items > .row > .item {
display: block !important;
height: auto !important;
width: auto !important;
padding: 0% !important;
}
}
/*--------------
Labels
---------------*/
/*--------------------
Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
display: table;
}
/*-----Star----- */
.ui.horizontal.items > .item > .image,
.ui.items > .horizontal.item > .image {
display: table-cell;
width: 50%;
}
.ui.horizontal.items > .item > .image + .content,
.ui.items > .horizontal.item > .image + .content {
width: 50%;
display: table-cell;
}
.ui.horizontal.items > .item > .content,
.ui.items > .horizontal.item > .content {
padding: 1% 1.7% 11% 3%;
vertical-align: top;
/* Icon */
.ui.items > .item > .content .star.icon {
cursor: pointer;
opacity: @actionOpacity;
transition: @actionTransition;
}
.ui.horizontal.items > .item > .meta,
.ui.items > .horizontal.item > .meta {
position: absolute;
padding: 0%;
bottom: 7%;
left: 3%;
width: 94%;
.ui.items > .item > .content .star.icon:hover {
opacity: @actionHoverOpacity;
color: @starColor;
}
.ui.horizontal.items > .item > .image + .content + .meta,
.ui.items > .horizontal.item > .image + .content + .meta {
bottom: 7%;
left: 53%;
width: 44%;
.ui.items > .item > .content .active.star.icon {
color: @starActiveColor;
}
/*-----Like----- */
.ui.horizontal.items > .item .avatar,
.ui.items > .horizontal.item .avatar {
width: 11.5%;
/* Icon */
.ui.items > .item > .content .like.icon {
cursor: pointer;
opacity: @actionOpacity;
transition: @actionTransition;
}
.ui.items > .item .avatar {
max-width: 25px;
.ui.items > .item > .content .like.icon:hover {
opacity: @actionHoverOpacity;
color: @likeColor;
}
/*--------------
Item Count
---------------*/
.ui.one.items {
margin-left: -2%;
margin-right: -2%;
}
.ui.one.items > .item {
width: 100%;
margin-left: 2%;
margin-right: 2%;
.ui.items > .item > .content .active.like.icon {
color: @likeActiveColor;
}
.ui.two.items {
margin-left: -1%;
margin-right: -1%;
}
.ui.two.items > .item {
width: 48%;
margin-left: 1%;
margin-right: 1%;
}
.ui.two.items > .item:nth-child(2n+1) {
clear: left;
}
/*----------------
Extra Content
-----------------*/
.ui.three.items {
margin-left: -1%;
margin-right: -1%;
}
.ui.three.items > .item {
width: 31.333%;
margin-left: 1%;
margin-right: 1%;
}
.ui.three.items > .item:nth-child(3n+1) {
clear: left;
.ui.items > .item .extra {
display: @extraDisplay;
position: @extraPosition;
background: @extraBackground;
margin: @extraMargin;
width: @extraWidth;
padding: @extraPadding;
top: @extraTop;
left: @extraLeft;
color: @extraColor;
box-shadow: @extraBoxShadow;
transition: @extraTransition;
border-top: @extraDivider;
}
.ui.four.items {
margin-left: -0.5%;
margin-right: -0.5%;
}
.ui.four.items > .item {
width: 24%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.ui.four.items > .item:nth-child(4n+1) {
clear: left;
.ui.items > .item .extra:after {
display: block;
content: ' ';
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;
}
.ui.five.items {
margin-left: -0.5%;
margin-right: -0.5%;
}
.ui.five.items > .item {
width: 19%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.ui.five.items > .item:nth-child(5n+1) {
clear: left;
}
.ui.six.items {
margin-left: -0.5%;
margin-right: -0.5%;
}
.ui.six.items > .item {
width: 15.66%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.ui.six.items > .item:nth-child(6n+1) {
clear: left;
}
/*******************************
Variations
*******************************/
.ui.seven.items {
margin-left: -0.5%;
margin-right: -0.5%;
}
.ui.seven.items > .item {
width: 13.28%;
margin-left: 0.5%;
margin-right: 0.5%;
font-size: 11px;
}
.ui.seven.items > .item:nth-child(7n+1) {
clear: left;
}
/*-------------------
Divided
--------------------*/
.ui.eight.items {
margin-left: -0.25%;
margin-right: -0.25%;
.ui.divided.items > .item {
border-top: @dividedBorder;
margin: @dividedMargin;
padding: @dividedPadding;
}
.ui.eight.items > .item {
width: 12.0%;
margin-left: 0.25%;
margin-right: 0.25%;
font-size: 11px;
.ui.divided.items > .item:first-child {
border-top: none;
margin-top: @dividedFirstLastMargin;
padding-top: @dividedFirstLastPadding;
}
.ui.eight.items > .item:nth-child(8n+1) {
clear: left;
.ui.divided.items > .item:last-child {
margin-bottom: @dividedFirstLastMargin;
padding-bottom: @dividedFirstLastPadding;
}
.ui.nine.items {
margin-left: -0.25%;
margin-right: -0.25%;
}
.ui.nine.items > .item {
width: 10.61%;
margin-left: 0.25%;
margin-right: 0.25%;
font-size: 10px;
}
.ui.nine.items > .item:nth-child(9n+1) {
clear: left;
}
/*-------------------
Link
--------------------*/
.ui.ten.items {
margin-left: -0.2%;
margin-right: -0.2%;
}
.ui.ten.items > .item {
width: 9.6%;
margin-left: 0.2%;
margin-right: 0.2%;
font-size: 10px;
}
.ui.ten.items > .item:nth-child(10n+1) {
clear: left;
.ui.items a.item:hover,
.ui.link.item > .item:hover {
cursor: pointer;
}
.ui.eleven.items {
margin-left: -0.2%;
margin-right: -0.2%;
}
.ui.eleven.items > .item {
width: 8.69%;
margin-left: 0.2%;
margin-right: 0.2%;
font-size: 9px;
}
.ui.eleven.items > .item:nth-child(11n+1) {
clear: left;
.ui.items a.item:hover .content .header,
.ui.link.item > .item:hover .content .header {
color: @headerLinkHoverColor;
}
.ui.twelve.items {
margin-left: -0.1%;
margin-right: -0.1%;
}
.ui.twelve.items > .item {
width: 8.1333%;
margin-left: 0.1%;
margin-right: 0.1%;
font-size: 9px;
}
.ui.twelve.items > .item:nth-child(12n+1) {
clear: left;
}
/*--------------
Items
Size
---------------*/
.ui.items > .row > .item,
.ui.items > .item {
font-size: @medium;
}
}

2
src/themes/packages/default/elements/button.variables
View File

@ -45,7 +45,7 @@
@iconOpacity: 0.8;
@iconDistance: 0.4em;
@iconTransition: opacity @transitionDuration @transitionEasing;
@iconMargin: 0em @iconDistance 0em -@iconDistance;
@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
@iconVerticalAlign: top;
/* Loader */

12
src/themes/packages/default/elements/header.variables
View File

@ -72,15 +72,21 @@
@dividedIconPadding: 0.2em;
/* Block */
@blockBackground: @offWhite @subtleGradient;
@blockBoxShadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
@blockBorder: 1px solid @solidBorderColor;
@blockHorizontalPadding: 1em;
@blockVerticalPadding: 0.5em;
@blockBorderRadius: 0.3125rem;
/* Attached */
@attachedBackground: #F0F0F0;
@attachedOffset: 0px;
@attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor;
@attachedVerticalPadding: 0.75rem;
@attachedHorizontalPadding: 1rem;
@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@attachedBorderRadius: 0.3125em;
@attachedBackground: @blockBackground;
@attachedBorder: none;
@attachedBorderRadius: @blockBorderRadius;
/* Floated */
@floatedMargin: 0.5em;

103
src/themes/packages/default/globals/site.variables
View File

@ -58,46 +58,27 @@
@highlightColor : @textColor;
/*-------------------
Grid
Background Colors
--------------------*/
@columnCount: 16;
@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
@transparentBlack : rgba(0, 0, 0, 0.05);
@strongTransparentBlack : rgba(0, 0, 0, 0.10);
@oneWide : (1 / @columnCount * 100%);
@twoWide : (2 / @columnCount * 100%);
@threeWide : (3 / @columnCount * 100%);
@fourWide : (4 / @columnCount * 100%);
@fiveWide : (5 / @columnCount * 100%);
@sixWide : (6 / @columnCount * 100%);
@sevenWide : (7 / @columnCount * 100%);
@eightWide : (8 / @columnCount * 100%);
@nineWide : (9 / @columnCount * 100%);
@tenWide : (10 / @columnCount * 100%);
@elevenWide : (11 / @columnCount * 100%);
@twelveWide : (12 / @columnCount * 100%);
@thirteenWide : (13 / @columnCount * 100%);
@fourteenWide : (14 / @columnCount * 100%);
@fifteenWide : (15 / @columnCount * 100%);
@sixteenWide : (16 / @columnCount * 100%);
@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
@transparentWhite : rgba(255, 255, 255, 0.05);
@strongTransparentWhite : rgba(255, 255, 255, 0.01);
@oneColumn : (1 / 1 * 100%);
@twoColumn : (1 / 2 * 100%);
@threeColumn : (1 / 3 * 100%);
@fourColumn : (1 / 4 * 100%);
@fiveColumn : (1 / 5 * 100%);
@sixColumn : (1 / 6 * 100%);
@sevenColumn : (1 / 7 * 100%);
@eightColumn : (1 / 8 * 100%);
@nineColumn : (1 / 9 * 100%);
@tenColumn : (1 / 10 * 100%);
@elevenColumn : (1 / 11 * 100%);
@twelveColumn : (1 / 12 * 100%);
@thirteenColumn : (1 / 13 * 100%);
@fourteenColumn : (1 / 14 * 100%);
@fifteenColumn : (1 / 15 * 100%);
@sixteenColumn : (1 / 16 * 100%);
/* Used for differentiating greys */
@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
/*-------------------
Grid
--------------------*/
@columnCount: 16;
/*-------------------
Breakpoints
@ -114,21 +95,6 @@
Power-User
*******************************/
/*-------------------
BG Colors
--------------------*/
@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
@transparentBlack : rgba(0, 0, 0, 0.05);
@strongTransparentBlack : rgba(0, 0, 0, 0.10);
@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
@transparentWhite : rgba(255, 255, 255, 0.05);
@strongTransparentWhite : rgba(255, 255, 255, 0.01);
/* Used for differentiating greys */
@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
/*-------------------
Icons
--------------------*/
@ -180,6 +146,7 @@
@tealBackground : #D2F5F5;
@yellowBackground : #FCF5D8;
/*-------------------
Emotive Colors
--------------------*/
@ -243,6 +210,44 @@
@pinterestColor : #00ACED;
@vkColor : #4D7198;
/*-------------------
Grid Columns
--------------------*/
@oneWide : (1 / @columnCount * 100%);
@twoWide : (2 / @columnCount * 100%);
@threeWide : (3 / @columnCount * 100%);
@fourWide : (4 / @columnCount * 100%);
@fiveWide : (5 / @columnCount * 100%);
@sixWide : (6 / @columnCount * 100%);
@sevenWide : (7 / @columnCount * 100%);
@eightWide : (8 / @columnCount * 100%);
@nineWide : (9 / @columnCount * 100%);
@tenWide : (10 / @columnCount * 100%);
@elevenWide : (11 / @columnCount * 100%);
@twelveWide : (12 / @columnCount * 100%);
@thirteenWide : (13 / @columnCount * 100%);
@fourteenWide : (14 / @columnCount * 100%);
@fifteenWide : (15 / @columnCount * 100%);
@sixteenWide : (16 / @columnCount * 100%);
@oneColumn : (1 / 1 * 100%);
@twoColumn : (1 / 2 * 100%);
@threeColumn : (1 / 3 * 100%);
@fourColumn : (1 / 4 * 100%);
@fiveColumn : (1 / 5 * 100%);
@sixColumn : (1 / 6 * 100%);
@sevenColumn : (1 / 7 * 100%);
@eightColumn : (1 / 8 * 100%);
@nineColumn : (1 / 9 * 100%);
@tenColumn : (1 / 10 * 100%);
@elevenColumn : (1 / 11 * 100%);
@twelveColumn : (1 / 12 * 100%);
@thirteenColumn : (1 / 13 * 100%);
@fourteenColumn : (1 / 14 * 100%);
@fifteenColumn : (1 / 15 * 100%);
@sixteenColumn : (1 / 16 * 100%);
/*-------------------
Borders
--------------------*/

3
src/themes/packages/default/views/card.variables
View File

@ -77,6 +77,7 @@
/* Links */
@contentLinkColor: @linkColor;
@contentLinkTransition: color @transitionDuration @transitionEasing;
@contentLinkHoverColor: @linkHoverColor;
@headerLinkColor: @headerColor;
@headerLinkHoverColor: @linkHoverColor;
@ -101,7 +102,7 @@
/* Additional Content */
@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
@extraBackground: #FAFAFA @subtleGradient;
@extraDisplay: static;
@extraPosition: static;
@extraTop: 0em;
@extraLeft: 0em;
@extraWidth: 100%;

115
src/themes/packages/default/views/item.variables
View File

@ -1,98 +1,129 @@
/*******************************
Item
*******************************/
/*-------------------
View
--------------------*/
/* Items */
@itemsMargin: 1em 0em;
/* Item */
@background: #FFFFFF;
@borderRadius: 0.325rem;
@display: block;
@float: left;
@margin: 0em @horizontalSpacing @rowSpacing;
@display: table;
@background: transparent;
@borderRadius: 0rem;
@margin: 1em 0em;
@minHeight: 0px;
@padding: 0em;
@width: 300px;
@boxShadow:
0px 0px 0px 1px @borderColor,
0px 3px 0px 0px @borderColor
;
@width: 100%;
@boxShadow: none;
@border: none;
@zIndex: '';
@transition: box-shadow @transitionDuration @transitionEasing;
/* Item Group */
@horizontalSpacing: 0.5em;
@rowSpacing: 2.5em;
@groupMargin: 1em -@horizontalSpacing;
/*-------------------
Content
--------------------*/
/* Image */
@imageDisplay: table-cell;
@imageFloat: none;
@imageWidth: 225px;
@imageMaxHeight: '';
@imageVerticalAlign: top;
@imageMargin: 0em;
@imageBackground: @transparentBlack;
@imagePadding: 0em;
@imageBorderRadius: @borderRadius @borderRadius 0em 0em;
@imageBorder: none;
@imageBorderRadius: 0.125rem;
@imageBoxShadow: none;
@imageBorder: none;
/* Content */
@contentDisplay: table-cell;
@contentVerticalAlign: top;
@contentImagePadding: 1em;
@contentOffset: 0em;
@contentBackground: none;
@contentMargin: 0em;
@contentPadding: 0.75em 1em;
@contentPadding: 0em;
@contentFontSize: 1em;
@contentBorder: none;
@contentBorderRadius: 0em;
@contentBoxShadow: none;
/* Title */
@titleMargin: 0em;
@titleFont: @headerFont;
@titleFontWeight: bold;
@titleFontSize: 1.25em;
@titleColor: @darkTextColor;
/* Header */
@headerMargin: 0em;
@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 */
@contentLinkTransition: color @transitionDuration @transitionEasing;
@contentLinkColor: @linkColor;
@contentLinkHoverColor: @linkHoverColor;
@headerLinkColor: @headerColor;
@headerLinkHoverColor: @linkHoverColor;
@metaLinkColor: @lightTextColor;
@metaLinkHoverColor: @textColor;
/* Description */
@descriptionDistance: 0.75em;
@descriptionColor: @lightTextColor;
@descriptionColor: @textColor;
/* Image */
@imageSpacing: 0.25em;
/* Content Image */
@contentImageWidth: 2em;
@contentImageVerticalAlign: middle;
/* Avatar Image */
@avatarSize: @contentImageWidth;
@avatarBorderRadius: @circularRadius;
/* Paragraph */
@paragraphDistance: 0.1em;
@paragraphDistance: 0.5em;
/* Additional Content */
@extraDisplay: absolute;
@extraTop: 100%;
@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
@extraBackground: none;
@extraDisplay: block;
@extraPosition: relative;
@extraMargin: 1em 0em 0em;
@extraTop: 0em;
@extraLeft: 0em;
@extraWidth: 100%;
@extraPadding: 0.5em 0.75em;
@extraPadding: 0.75em 0em 0em;
@extraBoxShadow: none;
@extraColor: @lightTextColor;
@extraTransition: color @transitionDuration @transitionEasing;
/*-------------------
States
Variations
--------------------*/
@hoverCursor: pointer;
@hoverZIndex: 5;
@hoverBorder: none;
@hoverBoxShadow:
0px 0px 0px 1px @selectedBorderColor,
0px 3px 0px 0px @selectedBorderColor
;
/* Divided */
@dividedBorder: 1px solid @borderColor;
@dividedMargin: 0em;
@dividedPadding: 1em 0em;
/*-------------------
Variations
--------------------*/
@dividedFirstLastMargin: 0em;
@dividedFirstLastPadding: 0em;
/* Sizes */
@medium: 1em;
Write Preview
Loading…
Cancel
Save