Browse Source

Adds start for idea cards, and docs

Former-commit-id: 8de2c53510
Former-commit-id: ea735dfff4
pull/258/head
Jack Lukic 11 years ago
parent
commit
e2e0c443dd
19 changed files with 1670 additions and 35 deletions
  1. 2
      build/minified/modules/popup.min.css
  2. 1
      build/minified/views/card.min.css
  3. 1
      build/minified/views/item.min.css
  4. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  5. 6
      build/uncompressed/modules/popup.css
  6. 118
      build/uncompressed/views/card.css
  7. 559
      build/uncompressed/views/item.css
  8. 24
      node/src/documents/modules/popup.html
  9. 12
      node/src/documents/specification/spec.html
  10. 135
      node/src/documents/views/card.html
  11. 6
      node/src/documents/views/items.html
  12. 6
      node/src/files/components/semantic/modules/popup.css
  13. 118
      node/src/files/components/semantic/views/card.css
  14. 559
      node/src/files/components/semantic/views/item.css
  15. 2
      node/src/files/stylesheets/semantic.css
  16. 1
      node/src/layouts/default.html.eco
  17. 6
      src/modules/popup.less
  18. 147
      src/views/card.less
  19. 0
      src/views/item.less

2
build/minified/modules/popup.min.css

@ -1 +1 @@
.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;color:rgba(0,0,0,.7);-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.black.popup{background-color:#333;border:0;color:#FFF}.ui.black.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.black.popup:before{background-color:#333}
.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;color:rgba(0,0,0,.7);-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333}

1
build/minified/views/card.min.css

@ -0,0 +1 @@
.ui.idea.cards{margin:0 -.5em -1em}.ui.idea.cards .card{display:inline-block;margin:0 .5em 1em;position:relative;width:388px;background-color:#FFF;border:1px solid #DCDDDE;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;color:rgba(93,98,102,.7)}.ui.idea.cards .card:after,.ui.idea.cards .card:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:rgba(0,0,0,.02);width:100%;height:5px;visibility:visible}.ui.idea.cards .card:before{bottom:0}.ui.idea.cards .card .idea{height:150px;padding:1em}.ui.idea.cards .card .header{margin:0 0 .5em;line-height:1;font-size:1.5em;color:#5d6266}.ui.idea.cards .card .description{line-height:1.4}.ui.idea.cards .card .image{float:right;margin:2em 0 2em 2em;padding:5px;width:120px;height:82px;background-color:#EEEFEF;border:1px solid #D9DCDD;-moz-box-shadow:2px 0 4px rgba(0,0,0,.1);-webkit-box-shadow:2px 0 4px rgba(0,0,0,.1);box-shadow:2px 0 4px rgba(0,0,0,.1);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.idea.cards .card .image img{display:block;max-width:100%}.ui.idea.cards .card .meta{border-top:1px solid #DCDDDE;padding:1em}.ui.idea.cards .card .meta:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.idea.cards .card .meta .countdown{float:left}.ui.idea.cards .card .meta .votes{float:right}.ui.idea.cards .card .progress,.ui.idea.cards .card .progress .bar{height:5px;top:0}

1
build/minified/views/item.min.css
File diff suppressed because it is too large
View File

2
build/packaged/semantic.min.css.REMOVED.git-id

@ -1 +1 @@
90a30609cb6f43c82c405df2b6369c9aff133c2a
3ac54ff81248eae5ecc7fac98de36e6dac6787f8

6
build/uncompressed/modules/popup.css

@ -195,15 +195,15 @@
Colors
---------------*/
/* Black */
.ui.black.popup {
.ui.inverted.popup {
background-color: #333333;
border: none;
color: #FFFFFF;
}
.ui.black.popup .header {
.ui.inverted.popup .header {
background-color: rgba(0, 0, 0, 0.2);
color: #FFFFFF;
}
.ui.black.popup:before {
.ui.inverted.popup:before {
background-color: #333333;
}

118
build/uncompressed/views/card.css

@ -0,0 +1,118 @@
/*
* # Quirky Card
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Idea Card
*******************************/
/*--------------
Card
---------------*/
.ui.idea.cards {
margin: 0em -0.5em -1em;
}
.ui.idea.cards .card {
display: inline-block;
margin: 0em 0.5em 1em;
position: relative;
width: 388px;
background-color: #FFFFFF;
border: 1px solid #DCDDDE;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
color: rgba(93, 98, 102, 0.7);
}
/* Stacked Style */
.ui.idea.cards .card:after,
.ui.idea.cards .card:before {
content: '';
position: absolute;
bottom: -3px;
left: 0%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.02);
width: 100%;
height: 5px;
visibility: visible;
}
.ui.idea.cards .card:before {
bottom: 0px;
}
/*--------------
Idea
---------------*/
.ui.idea.cards .card .idea {
height: 150px;
padding: 1em;
}
/*--------------
Content
---------------*/
.ui.idea.cards .card .header {
margin: 0em 0em 0.5em;
line-height: 1;
font-size: 1.5em;
color: #5d6266;
}
.ui.idea.cards .card .description {
line-height: 1.4;
}
/*--------------
Images
---------------*/
.ui.idea.cards .card .image {
float: right;
margin: 2em 0em 2em 2em;
padding: 5px;
width: 120px;
height: 82px;
background-color: #EEEFEF;
border: 1px solid #D9DCDD;
-moz-box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.ui.idea.cards .card .image img {
display: block;
max-width: 100%;
}
/*--------------
Meta
---------------*/
.ui.idea.cards .card .meta {
border-top: 1px solid #DCDDDE;
padding: 1em;
}
.ui.idea.cards .card .meta:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* types of metadata */
.ui.idea.cards .card .meta .countdown {
float: left;
}
.ui.idea.cards .card .meta .votes {
float: right;
}
/*--------------
Progress
---------------*/
.ui.idea.cards .card .progress,
.ui.idea.cards .card .progress .bar {
height: 5px;
top: 0px;
}

559
build/uncompressed/views/item.css

@ -0,0 +1,559 @@
/*
* # Semantic Item View
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Standard
*******************************/
/*--------------
Items
---------------*/
/* Force Clearing */
.ui.items:after {
display: block;
content: ' ';
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;
}
/*--------------
Item
---------------*/
.ui.items > .row > .item,
.ui.items > .item {
display: block;
float: left;
position: relative;
top: 0px;
width: 316px;
min-height: 375px;
margin: 1em 0.5em 2.5em;
padding: 0em;
background-color: #FFFFFF;
line-height: 1.2;
font-size: 1em;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 0.33em;
-webkit-border-radius: 0.33em;
border-radius: 0.33em;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
padding: 0.5em;
}
.ui.items a.item,
.ui.items .item a {
cursor: pointer;
}
.ui.items .item,
.ui.items .item > .image,
.ui.items .item > .image .overlay,
.ui.items .item > .content,
.ui.items .item > .content > .meta,
.ui.items .item > .content > .extra {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/*--------------
Images
---------------*/
.ui.items .item > .image {
display: block;
position: relative;
background-color: rgba(0, 0, 0, 0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui.items .item > .image > img {
position: relative;
display: block;
width: 100%;
overflow: hidden;
-webkit-border-radius: 0.22em;
-moz-border-radius: 0.22em;
border-radius: 0.22em;
}
/*--------------
Content
---------------*/
.ui.items .item > .content {
padding: 0.75em 0.5em;
}
.ui.items .item > .content > .name {
display: block;
font-size: 1.25em;
font-weight: bold;
margin-bottom: 0.2em;
color: rgba(0, 0, 0, 0.7);
}
.ui.items .item > .content > .description {
clear: both;
margin: 0em 0em;
color: rgba(0, 0, 0, 0.45);
}
.ui.items .item > .content > .description p {
margin: 0em 0em 0.2em;
}
.ui.items .item > .content > .description p:last-child {
margin-bottom: 0em;
}
/*--------------
Meta
---------------*/
.ui.items .item .meta {
float: right;
color: rgba(0, 0, 0, 0.35);
}
.ui.items .item > .content > .meta + .name {
float: left;
}
/*--------------
Labels
---------------*/
/*-----star----- */
/* hover */
.ui.items .item .star.label:hover::after {
border-right-color: #F6EFC3;
}
.ui.items .item .star.label:hover::after {
border-right-color: transparent;
border-top-color: #F6EFC3;
}
.ui.items .item .star.label:hover .icon {
color: #ac9400;
}
/* active */
.ui.items .item .star.label.active::after {
border-right-color: #F6EFC3;
}
.ui.items .item .star.label.active::after {
border-right-color: transparent;
border-top-color: #F6EFC3;
}
.ui.items .item .star.label.active .icon {
color: #ac9400;
}
/*-----like----- */
/* hover */
.ui.items .item .like.label:hover::after {
border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
border-right-color: transparent;
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-right-color: transparent;
border-top-color: #F5E1E2;
}
.ui.items .item .like.label.active .icon {
color: #ef404a;
}
/*--------------
Extra
---------------*/
.ui.items .item .extra {
position: absolute;
width: 100%;
padding: 0em 0.5em;
bottom: -2em;
left: 0em;
height: 1.5em;
color: rgba(0, 0, 0, 0.25);
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.ui.items .item .extra > img {
display: inline-block;
border-radius: 500px 500px 500px 500px;
margin-right: 0.25em;
vertical-align: middle;
width: 2em;
}
.ui.items .item .extra .left {
float: left;
}
.ui.items .item .extra .right {
float: right;
}
/*******************************
States
*******************************/
.ui.items .item:hover {
cursor: pointer;
z-index: 5;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
color: rgba(0, 0, 0, 0.5);
}
.ui.items .item:nth-of-type(n+1):hover {
border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(n+2):hover {
border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(n+3):hover {
border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(n+4):hover {
border-bottom-color: #EF4D6D !important;
}
.ui.items .item:nth-of-type(n+5):hover {
border-bottom-color: #564F8A !important;
}
.ui.items .item:nth-of-type(n+6):hover {
border-bottom-color: #00B5AD !important;
}
/*******************************
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%;
}
.ui.connected.items > .row {
display: table;
margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
margin-top: 0em;
}
/* 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;
}
.ui.connected.items > .row:last-child > .item:last-child,
.ui.connected.items > .item:last-child {
border-radius: 0em 0em 0.33em 0em;
}
/* 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: 50%;
padding-left: 2%;
padding-right: 2%;
}
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
width: 50%;
padding-left: 1%;
padding-right: 1%;
}
.ui.three.connected.items > .row > .item,
.ui.three.connected.items > .item {
width: 33.333%;
padding-left: 1%;
padding-right: 1%;
}
.ui.four.connected.items > .row > .item,
.ui.four.connected.items > .item {
width: 25%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.five.connected.items > .row > .item,
.ui.five.connected.items > .item {
width: 20%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.six.connected.items > .row > .item,
.ui.six.connected.items > .item {
width: 16.66%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.seven.connected.items > .row > .item,
.ui.seven.connected.items > .item {
width: 14.28%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.eight.connected.items > .row > .item,
.ui.eight.connected.items > .item {
width: 12.5%;
padding-left: 0.25%;
padding-right: 0.25%;
}
.ui.nine.connected.items > .row > .item,
.ui.nine.connected.items > .item {
width: 11.11%;
padding-left: 0.25%;
padding-right: 0.25%;
}
.ui.ten.connected.items > .row > .item,
.ui.ten.connected.items > .item {
width: 10%;
padding-left: 0.2%;
padding-right: 0.2%;
}
.ui.eleven.connected.items > .row > .item,
.ui.eleven.connected.items > .item {
width: 9.09%;
padding-left: 0.2%;
padding-right: 0.2%;
}
.ui.twelve.connected.items > .row > .item,
.ui.twelve.connected.items > .item {
width: 8.3333%;
padding-left: 0.1%;
padding-right: 0.1%;
}
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width: 600px) {
.ui.stackable.items {
display: block !important;
}
.ui.stackable.items .item {
margin: 0em 2em 1em !important;
display: block !important;
width: auto !important;
padding: 0% !important;
}
}
/*--------------------
Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
display: table;
}
.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;
}
.ui.horizontal.items > .item > .meta,
.ui.items > .horizontal.item > .meta {
position: absolute;
padding: 0%;
bottom: 7%;
left: 3%;
width: 94%;
}
.ui.horizontal.items > .item > .image + .content + .meta,
.ui.items > .horizontal.item > .image + .content + .meta {
bottom: 7%;
left: 53%;
width: 44%;
}
.ui.horizontal.items > .item .avatar,
.ui.items > .horizontal.item .avatar {
width: 11.5%;
}
.ui.items > .item .avatar {
max-width: 25px;
}
/*--------------
Item Count
---------------*/
.ui.one.items {
margin-left: -2%;
margin-right: -2%;
}
.ui.one.items > .item {
width: 100%;
margin-left: 2%;
margin-right: 2%;
}
.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;
}
.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.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.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;
}
.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;
}
.ui.eight.items {
margin-left: -0.25%;
margin-right: -0.25%;
}
.ui.eight.items > .item {
width: 12.0%;
margin-left: 0.25%;
margin-right: 0.25%;
font-size: 11px;
}
.ui.eight.items > .item:nth-child(8n+1) {
clear: left;
}
.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;
}
.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.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.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;
}

24
node/src/documents/modules/popup.html

@ -26,18 +26,6 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Popup</h4>
<p>A standard popup</p>
<div class="ui info icon ignored message">
<i class="icon sketchy question circle"></i>
<div class="content">
<div class="header">Specifying Content</div>
<p>Popups can specify content in three ways:<p>
<ul class="list">
<li>Using html title attribute</li>
<li>Using data-content attribute</li>
<li>Using the content property in the initialization of the popup</li>
</ul>
</div>
</div>
<i class="sketchy question icon link" data-content="Hello. This is a popup"></i>
</div>
@ -68,6 +56,18 @@ type : 'UI Module'
<h4 class="ui header">Including metadata</h4>
<p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p>
<div class="ui info icon ignored message">
<i class="icon sketchy question circle"></i>
<div class="content">
<div class="header">Specifying Content</div>
<p>Popups can specify content in three ways:<p>
<ul class="list">
<li>Using html title attribute</li>
<li>Using data-content attribute</li>
<li>Using the content property in the initialization of the popup</li>
</ul>
</div>
</div>
<div class="code" data-type="html">
<i class="sketchy question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
</div>

12
node/src/documents/specification/spec.html

@ -37,10 +37,11 @@ type : 'UI Specification'
// All elements must specify whether it is an element, collection, module, or behavior
"Type": "Element",
// definition of the html structure of each type of an element
// Types are exclusive forms of your element. For example a button cannot be an icon button and a text button. The definitions of the html structure of each element is written using emmet syntax. These are used to generate html structures for your elements. For more information visit: http://docs.emmet.io/abbreviations/syntax/
"Types": {
"Standard" : ".ui.button"
},
"Standard" : ".ui.button",
"Icon" : ".ui.icon.button > i.icon",
}
// States are ways which elements show an innate change in its quality.
"States": {
@ -62,11 +63,6 @@ type : 'UI Specification'
"huge",
"massive"
],
// Types are exclusive forms of your element. For example a button cannot be an icon button and a text button. The definitions of the html structure of each element is written using emmet syntax. These are used to generate html structures for your elements. For more information visit: http://docs.emmet.io/abbreviations/syntax/
"Types": {
"Standard" : ".ui.button",
"Icon" : ".ui.icon.button > i.icon",
}
"Color": [
"black",
"green",

135
node/src/documents/views/card.html

@ -0,0 +1,135 @@
---
layout : 'default'
css : 'card'
title : 'Card'
type : 'UI View'
---
<div class="segment">
<div class="container">
<h1 class="ui dividing header">Card</h1>
<p>An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Standard</a>
</div>
</div>
<h2 class="ui dividing header">Standard</h2>
<div class="example">
<h4 class="ui header">Idea Card</h4>
<p>A card for displaying an idea</p>
<div class="ui idea cards">
<div class="card">
<div class="idea">
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
<div class="header">Dog Moods</div>
<div class="description">
Wouldn't it be nice if your dog could always be happy. Introducing a device which will help your dog maintain his mood in any situation.
</div>
</div>
<div class="meta">
<div class="countdown">
<i class="icon sketchy clock"></i>
12 days left
</div>
<div class="votes">
<i class="sketchy checkmark circle icon"></i>
58 votes to go
</div>
</div>
<div class="ui bottom attached green progress">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Idea Cards</h4>
<p> A set of idea cards</p>
<div class="ui idea cards">
<div class="card">
<div class="idea">
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
<div class="header">Dog Moods</div>
<div class="description">
Wouldn't it be nice if your dog could always be happy. Introducing a device which will help your dog maintain his mood in any situation.
</div>
</div>
<div class="meta">
<div class="countdown">
<i class="icon sketchy clock"></i>
12 days left
</div>
<div class="votes">
<i class="sketchy checkmark circle icon"></i>
58 votes to go
</div>
</div>
<div class="ui bottom attached green progress">
<div class="bar"></div>
</div>
</div>
<div class="card">
<div class="idea">
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
<div class="header">Dog Moods</div>
<div class="description">
Wouldn't it be nice if your dog could always be happy. Introducing a device which will help your dog maintain his mood in any situation.
</div>
</div>
<div class="meta">
<div class="countdown">
<i class="icon sketchy clock"></i>
12 days left
</div>
<div class="votes">
<i class="sketchy checkmark circle icon"></i>
58 votes to go
</div>
</div>
<div class="ui bottom attached green progress">
<div class="bar"></div>
</div>
</div>
<div class="card">
<div class="idea">
<div class="image">
<img src="/images/demo/invention.jpg">
</div>
<div class="header">Dog Moods</div>
<div class="description">
Wouldn't it be nice if your dog could always be happy. Introducing a device which will help your dog maintain his mood in any situation.
</div>
</div>
<div class="meta">
<div class="countdown">
<i class="icon sketchy clock"></i>
12 days left
</div>
<div class="votes">
<i class="sketchy checkmark circle icon"></i>
58 votes to go
</div>
</div>
<div class="ui bottom attached green progress">
<div class="bar"></div>
</div>
</div>
</div>
</div>
</div>

6
node/src/documents/views/items.html

@ -1,13 +1,13 @@
---
layout : 'default'
css : 'items'
css : 'item'
title : 'Items'
title : 'Item'
type : 'UI View'
---
<div class="segment">
<div class="container">
<h1 class="ui dividing header">Items</h1>
<h1 class="ui dividing header">Item</h1>
<p>An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.</p>
</div>
</div>

6
node/src/files/components/semantic/modules/popup.css

@ -195,15 +195,15 @@
Colors
---------------*/
/* Black */
.ui.black.popup {
.ui.inverted.popup {
background-color: #333333;
border: none;
color: #FFFFFF;
}
.ui.black.popup .header {
.ui.inverted.popup .header {
background-color: rgba(0, 0, 0, 0.2);
color: #FFFFFF;
}
.ui.black.popup:before {
.ui.inverted.popup:before {
background-color: #333333;
}

118
node/src/files/components/semantic/views/card.css

@ -0,0 +1,118 @@
/*
* # Quirky Card
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Idea Card
*******************************/
/*--------------
Card
---------------*/
.ui.idea.cards {
margin: 0em -0.5em -1em;
}
.ui.idea.cards .card {
display: inline-block;
margin: 0em 0.5em 1em;
position: relative;
width: 388px;
background-color: #FFFFFF;
border: 1px solid #DCDDDE;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
color: rgba(93, 98, 102, 0.7);
}
/* Stacked Style */
.ui.idea.cards .card:after,
.ui.idea.cards .card:before {
content: '';
position: absolute;
bottom: -3px;
left: 0%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.02);
width: 100%;
height: 5px;
visibility: visible;
}
.ui.idea.cards .card:before {
bottom: 0px;
}
/*--------------
Idea
---------------*/
.ui.idea.cards .card .idea {
height: 150px;
padding: 1em;
}
/*--------------
Content
---------------*/
.ui.idea.cards .card .header {
margin: 0em 0em 0.5em;
line-height: 1;
font-size: 1.5em;
color: #5d6266;
}
.ui.idea.cards .card .description {
line-height: 1.4;
}
/*--------------
Images
---------------*/
.ui.idea.cards .card .image {
float: right;
margin: 2em 0em 2em 2em;
padding: 5px;
width: 120px;
height: 82px;
background-color: #EEEFEF;
border: 1px solid #D9DCDD;
-moz-box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.ui.idea.cards .card .image img {
display: block;
max-width: 100%;
}
/*--------------
Meta
---------------*/
.ui.idea.cards .card .meta {
border-top: 1px solid #DCDDDE;
padding: 1em;
}
.ui.idea.cards .card .meta:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* types of metadata */
.ui.idea.cards .card .meta .countdown {
float: left;
}
.ui.idea.cards .card .meta .votes {
float: right;
}
/*--------------
Progress
---------------*/
.ui.idea.cards .card .progress,
.ui.idea.cards .card .progress .bar {
height: 5px;
top: 0px;
}

559
node/src/files/components/semantic/views/item.css

@ -0,0 +1,559 @@
/*
* # Semantic Item View
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Standard
*******************************/
/*--------------
Items
---------------*/
/* Force Clearing */
.ui.items:after {
display: block;
content: ' ';
height: 0px;
clear: both;
overflow: hidden;
visibility: hidden;
}
/*--------------
Item
---------------*/
.ui.items > .row > .item,
.ui.items > .item {
display: block;
float: left;
position: relative;
top: 0px;
width: 316px;
min-height: 375px;
margin: 1em 0.5em 2.5em;
padding: 0em;
background-color: #FFFFFF;
line-height: 1.2;
font-size: 1em;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 0.33em;
-webkit-border-radius: 0.33em;
border-radius: 0.33em;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
padding: 0.5em;
}
.ui.items a.item,
.ui.items .item a {
cursor: pointer;
}
.ui.items .item,
.ui.items .item > .image,
.ui.items .item > .image .overlay,
.ui.items .item > .content,
.ui.items .item > .content > .meta,
.ui.items .item > .content > .extra {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/*--------------
Images
---------------*/
.ui.items .item > .image {
display: block;
position: relative;
background-color: rgba(0, 0, 0, 0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui.items .item > .image > img {
position: relative;
display: block;
width: 100%;
overflow: hidden;
-webkit-border-radius: 0.22em;
-moz-border-radius: 0.22em;
border-radius: 0.22em;
}
/*--------------
Content
---------------*/
.ui.items .item > .content {
padding: 0.75em 0.5em;
}
.ui.items .item > .content > .name {
display: block;
font-size: 1.25em;
font-weight: bold;
margin-bottom: 0.2em;
color: rgba(0, 0, 0, 0.7);
}
.ui.items .item > .content > .description {
clear: both;
margin: 0em 0em;
color: rgba(0, 0, 0, 0.45);
}
.ui.items .item > .content > .description p {
margin: 0em 0em 0.2em;
}
.ui.items .item > .content > .description p:last-child {
margin-bottom: 0em;
}
/*--------------
Meta
---------------*/
.ui.items .item .meta {
float: right;
color: rgba(0, 0, 0, 0.35);
}
.ui.items .item > .content > .meta + .name {
float: left;
}
/*--------------
Labels
---------------*/
/*-----star----- */
/* hover */
.ui.items .item .star.label:hover::after {
border-right-color: #F6EFC3;
}
.ui.items .item .star.label:hover::after {
border-right-color: transparent;
border-top-color: #F6EFC3;
}
.ui.items .item .star.label:hover .icon {
color: #ac9400;
}
/* active */
.ui.items .item .star.label.active::after {
border-right-color: #F6EFC3;
}
.ui.items .item .star.label.active::after {
border-right-color: transparent;
border-top-color: #F6EFC3;
}
.ui.items .item .star.label.active .icon {
color: #ac9400;
}
/*-----like----- */
/* hover */
.ui.items .item .like.label:hover::after {
border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
border-right-color: transparent;
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-right-color: transparent;
border-top-color: #F5E1E2;
}
.ui.items .item .like.label.active .icon {
color: #ef404a;
}
/*--------------
Extra
---------------*/
.ui.items .item .extra {
position: absolute;
width: 100%;
padding: 0em 0.5em;
bottom: -2em;
left: 0em;
height: 1.5em;
color: rgba(0, 0, 0, 0.25);
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.ui.items .item .extra > img {
display: inline-block;
border-radius: 500px 500px 500px 500px;
margin-right: 0.25em;
vertical-align: middle;
width: 2em;
}
.ui.items .item .extra .left {
float: left;
}
.ui.items .item .extra .right {
float: right;
}
/*******************************
States
*******************************/
.ui.items .item:hover {
cursor: pointer;
z-index: 5;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
color: rgba(0, 0, 0, 0.5);
}
.ui.items .item:nth-of-type(n+1):hover {
border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(n+2):hover {
border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(n+3):hover {
border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(n+4):hover {
border-bottom-color: #EF4D6D !important;
}
.ui.items .item:nth-of-type(n+5):hover {
border-bottom-color: #564F8A !important;
}
.ui.items .item:nth-of-type(n+6):hover {
border-bottom-color: #00B5AD !important;
}
/*******************************
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%;
}
.ui.connected.items > .row {
display: table;
margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
margin-top: 0em;
}
/* 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;
}
.ui.connected.items > .row:last-child > .item:last-child,
.ui.connected.items > .item:last-child {
border-radius: 0em 0em 0.33em 0em;
}
/* 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: 50%;
padding-left: 2%;
padding-right: 2%;
}
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
width: 50%;
padding-left: 1%;
padding-right: 1%;
}
.ui.three.connected.items > .row > .item,
.ui.three.connected.items > .item {
width: 33.333%;
padding-left: 1%;
padding-right: 1%;
}
.ui.four.connected.items > .row > .item,
.ui.four.connected.items > .item {
width: 25%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.five.connected.items > .row > .item,
.ui.five.connected.items > .item {
width: 20%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.six.connected.items > .row > .item,
.ui.six.connected.items > .item {
width: 16.66%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.seven.connected.items > .row > .item,
.ui.seven.connected.items > .item {
width: 14.28%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.eight.connected.items > .row > .item,
.ui.eight.connected.items > .item {
width: 12.5%;
padding-left: 0.25%;
padding-right: 0.25%;
}
.ui.nine.connected.items > .row > .item,
.ui.nine.connected.items > .item {
width: 11.11%;
padding-left: 0.25%;
padding-right: 0.25%;
}
.ui.ten.connected.items > .row > .item,
.ui.ten.connected.items > .item {
width: 10%;
padding-left: 0.2%;
padding-right: 0.2%;
}
.ui.eleven.connected.items > .row > .item,
.ui.eleven.connected.items > .item {
width: 9.09%;
padding-left: 0.2%;
padding-right: 0.2%;
}
.ui.twelve.connected.items > .row > .item,
.ui.twelve.connected.items > .item {
width: 8.3333%;
padding-left: 0.1%;
padding-right: 0.1%;
}
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width: 600px) {
.ui.stackable.items {
display: block !important;
}
.ui.stackable.items .item {
margin: 0em 2em 1em !important;
display: block !important;
width: auto !important;
padding: 0% !important;
}
}
/*--------------------
Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
display: table;
}
.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;
}
.ui.horizontal.items > .item > .meta,
.ui.items > .horizontal.item > .meta {
position: absolute;
padding: 0%;
bottom: 7%;
left: 3%;
width: 94%;
}
.ui.horizontal.items > .item > .image + .content + .meta,
.ui.items > .horizontal.item > .image + .content + .meta {
bottom: 7%;
left: 53%;
width: 44%;
}
.ui.horizontal.items > .item .avatar,
.ui.items > .horizontal.item .avatar {
width: 11.5%;
}
.ui.items > .item .avatar {
max-width: 25px;
}
/*--------------
Item Count
---------------*/
.ui.one.items {
margin-left: -2%;
margin-right: -2%;
}
.ui.one.items > .item {
width: 100%;
margin-left: 2%;
margin-right: 2%;
}
.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;
}
.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.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.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;
}
.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;
}
.ui.eight.items {
margin-left: -0.25%;
margin-right: -0.25%;
}
.ui.eight.items > .item {
width: 12.0%;
margin-left: 0.25%;
margin-right: 0.25%;
font-size: 11px;
}
.ui.eight.items > .item:nth-child(8n+1) {
clear: left;
}
.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;
}
.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.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.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;
}

2
node/src/files/stylesheets/semantic.css

@ -935,7 +935,7 @@ a:hover {
}
.ui.progress .bar {
body.progress .ui.progress .bar {
-webkit-animation: finish 10s ease-in-out infinite;
-moz-animation: finish 10s ease-in-out infinite;
}

1
node/src/layouts/default.html.eco

@ -46,6 +46,7 @@
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/message.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/table.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/card.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/comment.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/feed.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/items.css">

6
src/modules/popup.less

@ -242,15 +242,15 @@
---------------*/
/* Black */
.ui.black.popup {
.ui.inverted.popup {
background-color: #333333;
border: none;
color: #FFFFFF;
}
.ui.black.popup .header {
.ui.inverted.popup .header {
background-color: rgba(0, 0, 0, 0.2);
color: #FFFFFF;
}
.ui.black.popup:before {
.ui.inverted.popup:before {
background-color: #333333;
}

147
src/views/card.less

@ -0,0 +1,147 @@
/*
* # Quirky Card
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Idea Card
*******************************/
/*--------------
Card
---------------*/
.ui.idea.cards {
margin: 0em -0.5em -1em;
}
.ui.idea.cards .card {
display: inline-block;
margin: 0em 0.5em 1em;
position: relative;
width: 388px;
background-color: #FFFFFF;
border: 1px solid #DCDDDE;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
color: rgba(93, 98, 102, 0.7);
}
/* Stacked Style */
.ui.idea.cards .card:after,
.ui.idea.cards .card:before {
content: '';
position: absolute;
bottom: -3px;
left: 0%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.02);
width: 100%;
height: 5px;
visibility: visible;
}
.ui.idea.cards .card:before {
bottom: 0px;
}
/*--------------
Idea
---------------*/
.ui.idea.cards .card .idea {
height: 150px;
padding: 1em;
}
/*--------------
Content
---------------*/
.ui.idea.cards .card .header {
margin: 0em 0em 0.5em;
line-height: 1;
font-size: 1.5em;
color: rgba(93, 98, 102, 1);
}
.ui.idea.cards .card .description {
line-height: 1.4;
}
/*--------------
Images
---------------*/
.ui.idea.cards .card .image {
float: right;
margin: 2em 0em 2em 2em;
padding: 5px;
width: 120px;
height: 82px;
background-color: #EEEFEF;
border: 1px solid #D9DCDD;
-moz-box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.ui.idea.cards .card .image img {
display: block;
max-width: 100%;
}
/*--------------
Meta
---------------*/
.ui.idea.cards .card .meta {
border-top: 1px solid #DCDDDE;
padding: 1em;
}
.ui.idea.cards .card .meta:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* types of metadata */
.ui.idea.cards .card .meta .countdown {
float: left;
}
.ui.idea.cards .card .meta .votes {
float: right;
}
/*--------------
Progress
---------------*/
.ui.idea.cards .card .progress,
.ui.idea.cards .card .progress .bar {
height: 5px;
top: 0px;
}

src/views/items.less → src/views/item.less

Loading…
Cancel
Save