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

Adds start for idea cards, and docs 

Former-commit-id: 8de2c53510
Former-commit-id: ea735dfff4
pull/258/head
Jack Lukic 11 years ago
parent
b19b66a9bd
commit
e2e0c443dd
19 changed files with 1670 additions and 35 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -1 +1 @@
90a30609cb6f43c82c405df2b6369c9aff133c2a
3ac54ff81248eae5ecc7fac98de36e6dac6787f8

6
build/uncompressed/modules/popup.css
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

Write Preview
Loading…
Cancel
Save