Jack Lukic
11 years ago
19 changed files with 1670 additions and 35 deletions
Split View
Diff Options
-
2build/minified/modules/popup.min.css
-
1build/minified/views/card.min.css
-
1build/minified/views/item.min.css
-
2build/packaged/semantic.min.css
-
6build/uncompressed/modules/popup.css
-
118build/uncompressed/views/card.css
-
559build/uncompressed/views/item.css
-
24node/src/documents/modules/popup.html
-
12node/src/documents/specification/spec.html
-
135node/src/documents/views/card.html
-
6node/src/documents/views/items.html
-
6node/src/files/components/semantic/modules/popup.css
-
118node/src/files/components/semantic/views/card.css
-
559node/src/files/components/semantic/views/item.css
-
2node/src/files/stylesheets/semantic.css
-
1node/src/layouts/default.html.eco
-
6src/modules/popup.less
-
147src/views/card.less
-
0src/views/item.less
@ -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} |
|||
@ -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
File diff suppressed because it is too large
View File
2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
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; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -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> |
|||
@ -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; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -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; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save