From e2e0c443ddaea5432d58e0d8f7482a8f84c3dcbb Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 12 Jun 2013 19:37:12 -0400 Subject: [PATCH] Adds start for idea cards, and docs Former-commit-id: 8de2c53510e8d58756fe168ed97ab8a85cb3ef02 Former-commit-id: ea735dfff4295fb80955df6a65f4961154ce8280 --- build/minified/modules/popup.min.css | 2 +- build/minified/views/card.min.css | 1 + build/minified/views/item.min.css | 1 + .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/uncompressed/modules/popup.css | 6 +- build/uncompressed/views/card.css | 118 ++++ build/uncompressed/views/item.css | 559 ++++++++++++++++++ node/src/documents/modules/popup.html | 24 +- node/src/documents/specification/spec.html | 12 +- node/src/documents/views/card.html | 135 +++++ node/src/documents/views/items.html | 6 +- .../components/semantic/modules/popup.css | 6 +- .../files/components/semantic/views/card.css | 118 ++++ .../files/components/semantic/views/item.css | 559 ++++++++++++++++++ node/src/files/stylesheets/semantic.css | 2 +- node/src/layouts/default.html.eco | 1 + src/modules/popup.less | 6 +- src/views/card.less | 147 +++++ src/views/{items.less => item.less} | 0 19 files changed, 1670 insertions(+), 35 deletions(-) create mode 100644 build/minified/views/card.min.css create mode 100644 build/minified/views/item.min.css create mode 100644 build/uncompressed/views/card.css create mode 100644 build/uncompressed/views/item.css create mode 100755 node/src/documents/views/card.html create mode 100644 node/src/files/components/semantic/views/card.css create mode 100644 node/src/files/components/semantic/views/item.css create mode 100755 src/views/card.less rename src/views/{items.less => item.less} (100%) diff --git a/build/minified/modules/popup.min.css b/build/minified/modules/popup.min.css index c8621c891..acf50b018 100644 --- a/build/minified/modules/popup.min.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/minified/views/card.min.css b/build/minified/views/card.min.css new file mode 100644 index 000000000..09181dfbe --- /dev/null +++ b/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} \ No newline at end of file diff --git a/build/minified/views/item.min.css b/build/minified/views/item.min.css new file mode 100644 index 000000000..1f861d86c --- /dev/null +++ b/build/minified/views/item.min.css @@ -0,0 +1 @@ +.ui.items:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.row>.item,.ui.items>.item{display:block;float:left;position:relative;top:0;width:316px;min-height:375px;margin:1em .5em 2.5em;padding:0;background-color:#FFF;line-height:1.2;font-size:1em;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);border-bottom:.2em solid rgba(0,0,0,.2);-moz-border-radius:.33em;-webkit-border-radius:.33em;border-radius:.33em;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;-ms-transition:all .2s ease;transition:all .2s ease;padding:.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}.ui.items .item>.image{display:block;position:relative;background-color:rgba(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:.22em;-moz-border-radius:.22em;border-radius:.22em}.ui.items .item>.content{padding:.75em .5em}.ui.items .item>.content>.name{display:block;font-size:1.25em;font-weight:700;margin-bottom:.2em;color:rgba(0,0,0,.7)}.ui.items .item>.content>.description{clear:both;margin:0;color:rgba(0,0,0,.45)}.ui.items .item>.content>.description p{margin:0 0 .2em}.ui.items .item>.content>.description p:last-child{margin-bottom:0}.ui.items .item .meta{float:right;color:rgba(0,0,0,.35)}.ui.items .item>.content>.meta+.name{float:left}.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}.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}.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}.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}.ui.items .item .extra{position:absolute;width:100%;padding:0 .5em;bottom:-2em;left:0;height:1.5em;color:rgba(0,0,0,.25);-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.items .item .extra>img{display:inline-block;border-radius:500px;margin-right:.25em;vertical-align:middle;width:2em}.ui.items .item .extra .left{float:left}.ui.items .item .extra .right{float:right}.ui.items .item:hover{cursor:pointer;z-index:5;box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.items .item:hover .extra{color:rgba(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}.ui.connected.items{display:table;width:100%;margin-left:0!important;margin-right:0!important}.ui.connected.items>.row>.item,.ui.connected.items>.item{float:none;display:table-cell;vertical-align:top;height:auto;border-radius:0;margin:0;width:33.33%}.ui.connected.items>.row{display:table;margin:.5em 0}.ui.connected.items>.row:first-child{margin-top:0}.ui.connected.items>.item,.ui.connected.items>.row:last-child>.item{border-bottom:.2em solid rgba(0,0,0,.2)}.ui.connected.items>.row:last-child>.item:first-child,.ui.connected.items>.item:first-child{border-radius:0 0 0 .33em}.ui.connected.items>.row:last-child>.item:last-child,.ui.connected.items>.item:last-child{border-radius:0 0 .33em}.ui.connected.items .item:hover{border-bottom-width:.2em}.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:.5%;padding-right:.5%}.ui.five.connected.items>.row>.item,.ui.five.connected.items>.item{width:20%;padding-left:.5%;padding-right:.5%}.ui.six.connected.items>.row>.item,.ui.six.connected.items>.item{width:16.66%;padding-left:.5%;padding-right:.5%}.ui.seven.connected.items>.row>.item,.ui.seven.connected.items>.item{width:14.28%;padding-left:.5%;padding-right:.5%}.ui.eight.connected.items>.row>.item,.ui.eight.connected.items>.item{width:12.5%;padding-left:.25%;padding-right:.25%}.ui.nine.connected.items>.row>.item,.ui.nine.connected.items>.item{width:11.11%;padding-left:.25%;padding-right:.25%}.ui.ten.connected.items>.row>.item,.ui.ten.connected.items>.item{width:10%;padding-left:.2%;padding-right:.2%}.ui.eleven.connected.items>.row>.item,.ui.eleven.connected.items>.item{width:9.09%;padding-left:.2%;padding-right:.2%}.ui.twelve.connected.items>.row>.item,.ui.twelve.connected.items>.item{width:8.3333%;padding-left:.1%;padding-right:.1%}@media only screen and (max-width:600px){.ui.stackable.items{display:block!important}.ui.stackable.items .item{margin:0 2em 1em!important;display:block!important;width:auto!important;padding:0!important}}.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}.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:-.5%;margin-right:-.5%}.ui.four.items>.item{width:24%;margin-left:.5%;margin-right:.5%}.ui.four.items>.item:nth-child(4n+1){clear:left}.ui.five.items{margin-left:-.5%;margin-right:-.5%}.ui.five.items>.item{width:19%;margin-left:.5%;margin-right:.5%}.ui.five.items>.item:nth-child(5n+1){clear:left}.ui.six.items{margin-left:-.5%;margin-right:-.5%}.ui.six.items>.item{width:15.66%;margin-left:.5%;margin-right:.5%}.ui.six.items>.item:nth-child(6n+1){clear:left}.ui.seven.items{margin-left:-.5%;margin-right:-.5%}.ui.seven.items>.item{width:13.28%;margin-left:.5%;margin-right:.5%;font-size:11px}.ui.seven.items>.item:nth-child(7n+1){clear:left}.ui.eight.items{margin-left:-.25%;margin-right:-.25%}.ui.eight.items>.item{width:12%;margin-left:.25%;margin-right:.25%;font-size:11px}.ui.eight.items>.item:nth-child(8n+1){clear:left}.ui.nine.items{margin-left:-.25%;margin-right:-.25%}.ui.nine.items>.item{width:10.61%;margin-left:.25%;margin-right:.25%;font-size:10px}.ui.nine.items>.item:nth-child(9n+1){clear:left}.ui.ten.items{margin-left:-.2%;margin-right:-.2%}.ui.ten.items>.item{width:9.6%;margin-left:.2%;margin-right:.2%;font-size:10px}.ui.ten.items>.item:nth-child(10n+1){clear:left}.ui.eleven.items{margin-left:-.2%;margin-right:-.2%}.ui.eleven.items>.item{width:8.69%;margin-left:.2%;margin-right:.2%;font-size:9px}.ui.eleven.items>.item:nth-child(11n+1){clear:left}.ui.twelve.items{margin-left:-.1%;margin-right:-.1%}.ui.twelve.items>.item{width:8.1333%;margin-left:.1%;margin-right:.1%;font-size:9px}.ui.twelve.items>.item:nth-child(12n+1){clear:left} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index 1ff3d195f..b75167e3f 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -90a30609cb6f43c82c405df2b6369c9aff133c2a \ No newline at end of file +3ac54ff81248eae5ecc7fac98de36e6dac6787f8 \ No newline at end of file diff --git a/build/uncompressed/modules/popup.css b/build/uncompressed/modules/popup.css index 1a83b186c..37a1b35af 100644 --- a/build/uncompressed/modules/popup.css +++ b/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; } diff --git a/build/uncompressed/views/card.css b/build/uncompressed/views/card.css new file mode 100644 index 000000000..f4bdf060f --- /dev/null +++ b/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; +} diff --git a/build/uncompressed/views/item.css b/build/uncompressed/views/item.css new file mode 100644 index 000000000..ff7aaedbe --- /dev/null +++ b/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; +} diff --git a/node/src/documents/modules/popup.html b/node/src/documents/modules/popup.html index fa42466c9..33c8eb571 100755 --- a/node/src/documents/modules/popup.html +++ b/node/src/documents/modules/popup.html @@ -26,18 +26,6 @@ type : 'UI Module'

Popup

A standard popup

-
- -
-
Specifying Content
-

Popups can specify content in three ways:

-

    -
  • Using html title attribute
    • -
  • Using data-content attribute
    • -
  • Using the content property in the initialization of the popup
    • -
-
-
@@ -68,6 +56,18 @@ type : 'UI Module'

Including metadata

Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata

+

+ +
+
Specifying Content
+

Popups can specify content in three ways:

+

    +
  • Using html title attribute
    • +
  • Using data-content attribute
    • +
  • Using the content property in the initialization of the popup
    • +
+
+
diff --git a/node/src/documents/specification/spec.html b/node/src/documents/specification/spec.html index bcd40ab12..84c6caa3e 100755 --- a/node/src/documents/specification/spec.html +++ b/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", diff --git a/node/src/documents/views/card.html b/node/src/documents/views/card.html new file mode 100755 index 000000000..5e191b679 --- /dev/null +++ b/node/src/documents/views/card.html @@ -0,0 +1,135 @@ +--- +layout : 'default' +css : 'card' + +title : 'Card' +type : 'UI View' +--- +
+
+

Card

+

An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.

+
+
+
+ +
+
+ Standard +
+
+ +

Standard

+ +
+

Idea Card

+

A card for displaying an idea

+ +
+
+
+
+ +
+
Dog Moods
+
+ 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. +
+
+
+
+ + 12 days left +
+
+ + 58 votes to go +
+
+
+
+
+
+
+
+ +
+

Idea Cards

+

A set of idea cards

+
+
+
+
+ +
+
Dog Moods
+
+ 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. +
+
+
+
+ + 12 days left +
+
+ + 58 votes to go +
+
+
+
+
+
+
+
+
+ +
+
Dog Moods
+
+ 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. +
+
+
+
+ + 12 days left +
+
+ + 58 votes to go +
+
+
+
+
+
+
+
+
+ +
+
Dog Moods
+
+ 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. +
+
+
+
+ + 12 days left +
+
+ + 58 votes to go +
+
+
+
+
+
+
+
+ +
\ No newline at end of file diff --git a/node/src/documents/views/items.html b/node/src/documents/views/items.html index dec9fd785..cf727f413 100755 --- a/node/src/documents/views/items.html +++ b/node/src/documents/views/items.html @@ -1,13 +1,13 @@ --- layout : 'default' -css : 'items' +css : 'item' -title : 'Items' +title : 'Item' type : 'UI View' ---
-

Items

+

Item

An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.

diff --git a/node/src/files/components/semantic/modules/popup.css b/node/src/files/components/semantic/modules/popup.css index 1a83b186c..37a1b35af 100644 --- a/node/src/files/components/semantic/modules/popup.css +++ b/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; } diff --git a/node/src/files/components/semantic/views/card.css b/node/src/files/components/semantic/views/card.css new file mode 100644 index 000000000..f4bdf060f --- /dev/null +++ b/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; +} diff --git a/node/src/files/components/semantic/views/item.css b/node/src/files/components/semantic/views/item.css new file mode 100644 index 000000000..ff7aaedbe --- /dev/null +++ b/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; +} diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index b6054f557..ed9620634 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/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; } diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index d45538362..cfc999c33 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -46,6 +46,7 @@ + diff --git a/src/modules/popup.less b/src/modules/popup.less index a61257183..0513aa696 100755 --- a/src/modules/popup.less +++ b/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; } \ No newline at end of file diff --git a/src/views/card.less b/src/views/card.less new file mode 100755 index 000000000..d603e689c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/views/items.less b/src/views/item.less similarity index 100% rename from src/views/items.less rename to src/views/item.less