0
1
Fork 0
hedera-web-mindshore/web/forms/ecomerce/catalog/style.css

307 lines
3.4 KiB
CSS
Raw Normal View History

2015-03-06 23:33:54 +00:00
.catalog
{
position: relative;
width: 100%;
2015-02-01 03:21:54 +00:00
height: 100%;
2015-02-08 15:38:38 +00:00
min-height: 25em;
2015-02-01 03:21:54 +00:00
}
2015-03-07 00:56:24 +00:00
.catalog div.center
2015-02-01 03:21:54 +00:00
{
position: absolute;
2015-02-08 15:38:38 +00:00
top: 0;
bottom: 0;
left: 0;
right: 17em;
}
2015-02-08 15:38:38 +00:00
/* Main */
2015-03-07 00:56:24 +00:00
.catalog div.main
{
position: absolute;
2015-02-08 15:38:38 +00:00
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
padding: .4em;
}
.catalog div.main .list-view
{
2015-02-08 15:38:38 +00:00
margin: 0 auto;
2015-07-07 15:27:47 +00:00
max-width: 50em;
min-width: 25em;
}
2015-03-06 23:33:54 +00:00
.catalog .footer-message
{
2015-02-18 16:11:25 +00:00
padding-bottom: 1em;
text-align: center;
}
2015-09-16 16:11:15 +00:00
.htk-toast
{
margin-left: -11em;
}
2015-02-08 15:38:38 +00:00
/* Topbar */
2015-09-16 16:11:15 +00:00
.action-bar > div > .search
2015-02-08 15:38:38 +00:00
{
2015-09-16 16:11:15 +00:00
margin-top: .8em;
2015-02-08 15:38:38 +00:00
background-color: white;
2015-09-16 16:11:15 +00:00
height: 2.3em;
2015-02-08 15:38:38 +00:00
}
.search > input
{
2015-02-08 15:38:38 +00:00
margin: 0;
border: none;
2015-09-16 16:11:15 +00:00
width: 8em;
2015-02-08 15:38:38 +00:00
box-shadow: none;
}
.search > input:focus
2015-02-08 15:38:38 +00:00
{
background-color: initial;
}
.search > img
2015-02-08 15:38:38 +00:00
{
2015-09-16 16:11:15 +00:00
margin: 0;
margin-left: .4em;
2015-02-08 15:38:38 +00:00
vertical-align: middle;
}
/* Menu */
2015-09-16 16:11:15 +00:00
.right-panel
2015-02-08 15:38:38 +00:00
{
position: absolute;
z-index: 20;
2015-09-16 16:11:15 +00:00
top: 3.9em;
2015-07-03 05:49:45 +00:00
bottom: 0;
right: 0;
2015-02-08 15:38:38 +00:00
width: 17em;
background-color: white;
box-shadow: 0 0.2em 0.2em #AAA;
}
2015-03-06 23:33:54 +00:00
button.basket
{
2015-02-08 15:38:38 +00:00
width: 100%;
height: 3em;
2015-04-01 08:24:15 +00:00
font-size: 1.1em;
text-align: center;
background-color: #00BCD4;
2015-07-23 15:58:48 +00:00
border-radius: 0;
}
2015-03-06 23:33:54 +00:00
button.basket:hover
{
background-color: #0AB;
}
/* Realms */
2015-07-23 15:58:48 +00:00
.realms-box
{
2015-04-01 08:24:15 +00:00
box-shadow: 0 0 0.4em #AAA;
2015-07-23 15:58:48 +00:00
background-color: rgba(1, 1, 1, .1);
}
2015-07-23 15:58:48 +00:00
.realms-box a
{
2015-08-17 18:02:14 +00:00
display: block;
float: left;
2015-07-23 15:58:48 +00:00
line-height: 0;
width: 33.3%;
}
.realms-box a > img
{
width: 100%;
border: 0;
2015-02-08 15:38:38 +00:00
padding: 0;
cursor: pointer;
}
2015-07-23 15:58:48 +00:00
.realms-box img:hover
{
2015-07-03 05:49:45 +00:00
opacity: 0.85;
2015-02-08 15:38:38 +00:00
}
/* Types */
2015-03-06 23:33:54 +00:00
.types-box
2015-02-01 03:21:54 +00:00
{
position: absolute;
2015-09-16 16:11:15 +00:00
top: 11.5em;
2015-07-03 05:49:45 +00:00
bottom: 0;
right: 0;
left: 0;
2015-02-01 03:21:54 +00:00
overflow: auto;
}
2015-07-23 15:58:48 +00:00
.types-box a
{
2015-07-23 15:58:48 +00:00
padding: .5em 1.5em;
display: block;
}
2015-07-23 15:58:48 +00:00
.types-box a:hover
{
2015-07-23 15:58:48 +00:00
background-color: rgba(1, 1, 1, .1);
}
2015-07-07 15:27:47 +00:00
/* Lots popup*/
div.amount
{
text-align: center;
background-color: #009688;
color: white;
line-height: 2.5em;
padding: 0.2em;
2015-07-07 15:27:47 +00:00
}
button.erase
{
float: left;
}
button.confirm
{
float: right;
}
button.erase > img,
button.confirm > img
{
height: 1em;
}
2015-03-09 08:36:54 +00:00
/* List view */
2015-07-03 05:49:45 +00:00
.items
2015-02-01 03:21:54 +00:00
{
width: 100%;
}
2015-07-03 05:49:45 +00:00
.catalog div.box div.header,
.items > thead > tr,
2015-03-06 23:33:54 +00:00
.realms-bar
2015-02-08 15:38:38 +00:00
{
2015-02-17 11:48:53 +00:00
background-color: #777;
2015-02-08 15:38:38 +00:00
}
2015-07-03 05:49:45 +00:00
.items > tbody > tr
2015-02-01 03:21:54 +00:00
{
2015-09-22 07:20:47 +00:00
height: 4em;
2015-02-01 03:21:54 +00:00
}
.items .icon
{
2015-09-22 07:20:47 +00:00
width: 4em;
padding: 0;
}
.items .icon > img
{
2015-09-22 07:20:47 +00:00
max-height: 2.5em;
max-width: 2.5em;
border-radius: 50%;
}
td.second-category
{
font-weight: bold;
color: orange;
}
td.third-category
{
font-weight: bold;
color: red;
}
.catalog .price
{
color: green;
font-size: 1.1em;
}
/* Grid view */
.catalog .grid-view
{
text-align: center;
}
.item-box
{
text-align: left;
position: relative;
width: 22em;
display: inline-block;
padding: .8em;
margin: .4em;
margin-bottom: .1em;
height: 9em;
overflow: hidden;
}
.item-box > .image
{
width: 9em;
height: 100%;
float: left;
margin-right: 1em;
}
.item-box img
{
max-width: 9em;
max-height: 9em;
display: block;
margin: 0 auto;
}
.item-box > p
{
margin: 0;
padding: 0;
font-size: .9em;
}
.item-box > h2
{
font-size: 1.1em;
font-weight: normal;
}
.item-box > .aval-price
{
position: absolute;
bottom: 1em;
right: 4em;
}
.item-box > .add-button
{
position: absolute;
bottom: .5em;
right: .5em;
}
2015-09-16 16:11:15 +00:00
/* Transitions */
.right-panel
{
transition: right .3s;
}
/* Mobile */
.catalog-actions button.menu
{
display: none;
}
.catalog-actions button.menu > img
{
height: 1.8em;
}
@media (max-width: 950px)
{
.catalog-actions button.menu
{
display: block;
}
2015-09-16 16:11:15 +00:00
.right-panel
{
2015-09-16 16:11:15 +00:00
top: 0;
right: -17em;
}
.right-panel.show
{
right: 0;
}
.catalog div.center
{
right: 0;
}
}