/* *= require shoppe/reset *= require shoppe/elements *= require shoppe/chosen *= require_self */ @import 'variables'; html { font-family:$font; font-size:12px; color:#000; -webkit-font-smoothing:antialiased; background-color:#f7f9fc;} nav.sidebar { width:200px; background:#40454D; position:fixed; top:0; bottom:0; header.logo { height:57px; background:image-url('shoppe/logo.svg') #9AC835 no-repeat 22px 25px; background-size:45px; padding-left:80px; padding-top:28px; h1 a { display:block; width:72px; height:16px; background:image-url('shoppe/shoppe.svg') no-repeat; background-size:72px 16px; text-indent:-40000px; } p { color:#fff; font-size:0.9em; margin-top:4px; } } p.logged { background:#5B6270; padding:12px 20px; color:#fff; font-size:0.9em; } ul { li { span.pending { float:right; font-size:0.9em; font-weight:bold;background:#5B6270; color:#fff;padding:2px 7px; border-radius:16px; margin-top:9px; margin-right:10px;} a { display:block; border-bottom:1px solid rgba(255,255,255,0.05); color:rgba(255,255,255,0.7); text-decoration:none; padding:10px 20px; font-size:1.1em; &:hover { background:rgba(0,0,0,0.1); } &.active { font-weight:bold; color:#fff; } } } } } header.main { position:fixed; left:200px; right:0; height:85px; background:#fff; box-shadow: 0 0px 15px -2px rgba(0,0,0,0.2); p.buttons { float:right; margin-top:27px; margin-right:35px;} p.buttons a { margin-left:10px;} h2 { margin-top:28px; margin-left:35px; font-size:2.0em; font-weight:300; color:#333; background-repeat:no-repeat; background-size:22px; background-position:0 5px; padding-left:32px;} h2 span { font-size:0.4em; font-weight:normal; color:#999; margin-left:10px;} h2 b { font-weight:500;} h2.products { background-image:image-url('shoppe/icons/tags.svg')} h2.orders { background-image:image-url('shoppe/icons/bag.svg'); background-position: 0 3px;} h2.delivery_services { background-image:image-url('shoppe/icons/box.svg'); background-position: 0 3px; background-size:20px;} h2.tax_rates { background-image:image-url('shoppe/icons/currency.svg'); background-position: 0 2px; background-size:22px;} h2.users { background-image:image-url('shoppe/icons/id.svg'); background-position: 0 2px; background-size:22px;} } #content { padding-left:200px; padding-top:85px; section.main { padding:35px; } // // flashes // #flash-notice { background:#21a3e0; padding:15px 35px; color:#fff; font-size:1.2em; font-weight:bold;} #flash-alert { background:#e04e21; padding:15px 35px; color:#fff; font-size:1.2em; font-weight:bold;} // // sub title // .subtitle { background:#fff; border:1px solid #CFD4DD; margin-bottom:25px; padding:15px; h3 { font-size:2.0em; font-weight:500;} } // // data table // div.table { p.info { overflow:hidden; margin-bottom:10px; color:#40454D; } table.data { width:100%; th, td { padding:10px;} thead th { border:1px solid #40454D; background:#40454D; text-align:left; font-weight:normal; font-size:0.9em; color:#fff; } tbody td { border:1px solid #cfd4dd; background:#fff;} a { color:inherit;} tbody th { text-align:left; background:#5B6270; border:1px solid #5B6270;font-size:1.2em; color:#fff;} tbody tr.empty td { padding:50px 0; text-align:center; color:#999; font-style:italic;} tfoot td.right { text-align:right; } tfoot td.bold { font-weight:bold;} tfoot td { border-top:0 solid #ccc; background:#fafafa;} tfoot tr:first-child td { border-top-width:3px;} tbody td a.edit { background:image-url('shoppe/icons/edit.svg') no-repeat; margin-top:3px;width:16px; width:16px; background-size:13px; display:inline-block; text-indent:-40000px; opacity:0.3} tbody td a.edit:hover { opacity:0.5} tbody tr.form { td { background:#f2f6fb;} input[type=text] { border:1px solid #CFD4DD; padding:5px;} input[type=text]:focus { border-color:#9AC835;} td.desc input[type=text] { width:95%;} td.adjustment input[type=text] { width:50px; margin-right:5px;} } } } // // Status tags // span.status-tag { font-weight:600; font-size:11px; text-transform:uppercase; background-size:16px; background-repeat:no-repeat; padding-left:20px; min-height:16px; display:inline-block; &.shipped { color:#E32479; background-image:image-url('shoppe/statuses/shipped.svg'); } &.accepted { color:#89BD2F; background-image:image-url('shoppe/statuses/accepted.svg'); } &.rejected { color:#E33127; background-image:image-url('shoppe/statuses/rejected.svg'); } &.received { color:#909091; background-image:image-url('shoppe/statuses/received.svg'); } } // // forms // form { fieldset { border:1px solid #dce2eb; background:#fff; padding-top:15px; padding-bottom:25px; margin-bottom:15px; legend {color:#5B6270; margin:0 25px; font-weight:300; font-size:1.5em;} .splitContainer { margin:0 25px; margin-bottom:15px; height:50px;} .splitContainer:last-child { margin-bottom:0;} dl { margin:0 25px; margin-bottom:15px; &:last-child { margin-bottom:0;} dt { margin-bottom:10px; font-size:1.2em;} dt label { font-weight:500;} dd { } dd input[type=text], dd input[type=password], textarea { width:100%; padding:5px; border:1px solid #ccc; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ font-size:1.1em; font-family:$font; &:focus { border-color:#9AC835; } &.short { width:100px;} } dd select { width:100%;} dd textarea { height:80px; } dd p.help { margin-top:15px; color:#333; background:image-url('shoppe/icons/support.svg') no-repeat 0 1px; background-size:13px; padding-left:15px;} dd.checkbox { margin-top:14px; font-size:1.1em; color:#999;} dd.checkbox input { float:left; margin-right:10px; margin-top:2px; } &.half { width:49%; margin:0; float:left; &:last-child { float:right;} } &.third { width:31%; margin:0; float:left; &:nth-child(2) { margin-left:2%; width:32%;} &:last-child { float:right; width:33%;} } } // // margined container // div.margin { margin: 0 25px;} // // attributes table // table.productAttributes { width:100%; margin-bottom:10px; line-height:1.0; thead td { background:#f7f7f7; color:#999; font-size:0.9em;} td { border:1px solid #ccc; padding:10px; vertical-align:middle; width:40%; input[type=text] { width:100%; border:0; padding:0; margin:0; font-size:1.2em;} &.remove { width:8%; text-align:center; background:#ffeff5;} &.searchable { width:8%; text-align:center; } &.handle { width:4%; background:image-url('shoppe/move.svg') no-repeat center; background-size:16px;} } } } p.submit {margin:0; background:#fff; border:1px solid #dce2eb; padding:25px; } p.submit .button { margin-right:5px;} p.submit .right .button {margin-left:5px; margin-right:0;} p.submit span.right { float:right;} .errorExplanation { margin-bottom:25px; border:1px solid #EB2732; background:#fff; padding:25px; line-height:1.5; h2 { font-size:1.5em !important; font-weight:300; color:#de1818; margin-bottom:10px;} p { display:none;} ul li { list-style:disc; margin-left:25px; font-size:1.2em;} } } // // attachment preview // div.attachmentPreview { overflow:hidden; border:1px solid #ccc; background:#f7f7f7; padding:10px; margin-bottom:15px; div.imgContainer { float:left;padding:4px; border:1px solid #ccc; background:#fff;} div.imgContainer div.img { background-image:image-url('shoppe/document.svg'); width:40px; height:40px; display:block;background-size:contain; background-repeat:no-repeat; background-position: center center;} div.imgContainer div.img.none { background-image:none;} div.desc {margin-left:60px; padding-top:5px;} div.desc span { display:block} div.desc span.filename { font-size:1.1em; margin-bottom:5px;} div.desc span.filename a { text-decoration:none; font-weight:bold;} div.desc span.delete a { color:#FF9781; font-size:0.9em; } div.desc a { color:#000;} div.desc.none { color:#999; font-style:italic;} } // // order summary page // #order { .details { overflow:hidden; .left { width:55%; float:left } .right { width:45%; float:left; p.acceptreject { text-align:center; margin-top:22px; } p.acceptreject a { margin: 0 5px;} p.ship { text-align:center; margin-top:22px;} p.ship input[type=text] { padding:5px; width:200px; } } dl { dt { float:left; width:30%; text-align:right; color:#888;white-space:nowrap} dd { font-weight:bold; margin-left:35%; margin-bottom:6px; white-space:nowrap} } p.ship { background:#fff; text-align:center;padding:15px;border:1px solid #CED2D8;} p.ship input, p.ship a { margin:0 10px;} } .status-bar { background:image-url('shoppe/square.svg') repeat-x 0 15px; background-size:8px; margin:45px 0; overflow:hidden; ul { li { width:25%;float:left; text-align:center; background:image-url('shoppe/statuses/shipped.svg') no-repeat center 0; background-size:36px; padding-top:42px;z-index:10;} h4 { color:#E32479;} li p { margin-top:5px; font-size:0.9em; color:#999;} li a { color:inherit;} li.payment { background-image:image-url('shoppe/statuses/paid.svg')} li.payment h4 { color:#3DB3E2;} li.received { background-image:image-url('shoppe/statuses/received.svg')} li.received h4 { color:#909091;} li.accepted { background-image:image-url('shoppe/statuses/accepted.svg')} li.accepted h4 { color:#89BD2F;} li.rejected { background-image:image-url('shoppe/statuses/rejected.svg')} li.rejected h4 { color: #E33127} } } .order_items { margin:25px 0; table.data { .money { text-align:right; width:8%} .product { width:42%;} .sku { width:18%;} .qty {text-align:center; width:5%;} tfoot td { background:#5B6270; color:#fff; border:1px solid #5B6270; font-weight:bold; font-size:1.1em;} } } } // // orer search // div.orderSearch { overflow:hidden; display:none; dl.left, dl.right { float:left; width:50%; dt { float:left; width:40%; text-align:right; padding-top:3px; color:#888;} dd { margin-left:44%; margin-bottom:15px;} dd input.small { width:40%;} } p.submit { float:right; } } // // pagination // nav.pagination { display:block; margin:25px 0; overflow:hidden; text-align:center; span { display:inline-block; border:1px solid #ccc; margin-right:3px; color:#333; background:#fff; &.current { background:#9AC835; border-color:#7B9F26; color:#fff; font-weight:600; padding:5px 10px;} a { padding:5px 10px; display:inline-block; color:inherit; text-decoration:none; } } } } footer { position:fixed; bottom:0; width:200px; background:rgba(0,0,0,0.05); p.store { a { display:block; background:#4B515C; color:rgba(255,255,255,0.7); padding:12px 20px; font-size:1.1em; text-decoration:none; } } } span.boolean span.true { color:#38BA4F} span.boolean span.false { color:#c04a4a} .float-right { float:right;} div.field_with_errors { display:inline;}