app/assets/stylesheets/shoppe/application.scss in shoppe-0.0.7 vs app/assets/stylesheets/shoppe/application.scss in shoppe-0.0.8
- old
+ new
@@ -1,8 +1,9 @@
/*
*= require shoppe/reset
*= require shoppe/elements
+ *= require shoppe/chosen
*= require_self
*/
@import 'variables';
@@ -67,12 +68,18 @@
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:1.8em; color:#333;}
- h2 span { font-size:0.5em; font-weight:normal; color:#999; 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.users { background-image:image-url('shoppe/icons/id.svg'); background-position: 0 2px; background-size:22px;}
+
}
#content {
padding-left:200px;
padding-top:85px;
@@ -96,10 +103,11 @@
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;}
}
@@ -127,64 +135,121 @@
//
// forms
//
form {
fieldset {
- border:1px solid #ddd;
+ border:1px solid #dce2eb;
background:#fff;
- padding-top:22px;
+ padding-top:15px;
padding-bottom:25px;
margin-bottom:15px;
- border-bottom-left-radius:6px;
- border-bottom-right-radius:6px;
- legend { border-top-left-radius:8px; border-top-right-radius:8px; font-weight:bold; color:#fff;padding:1%;background:#40454D; width:98%;}
+ legend {color:#5B6270; margin:0 25px; font-weight:300; font-size:1.5em;}
+
+ .splitContainer { margin:0 25px; margin-bottom:15px;overflow:hidden;}
+ .splitContainer:last-child { margin-bottom:0;}
+
dl {
margin:0 25px;
- overflow:hidden;
margin-bottom:15px;
&:last-child { margin-bottom:0;}
- dt { width:150px; float:left;}
- dd { margin-left:170px; }
+ dt { margin-bottom:10px; font-size:1.2em;}
+ dt label { font-weight:500;}
+ dd { }
dd input[type=text], dd input[type=password], textarea {
- width:97%; padding:8px; font-size:1.2em; border:1px solid #ccc;
+ 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;
- border-radius:6px;
- &:focus { border-color:#999; background-color:#f6f9f0;}
+ &:focus { border-color:#9AC835; }
&.short { width:100px;}
}
+ dd select { width:200px;}
dd textarea { height:80px; }
- dd p.help { margin-top:10px; color:#999;}
+ 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:10px; 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:30px 0 30px 185px; }
+ 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:4px solid #e43c3c;
- background:#ffeded;
- padding:10px 10px 10px 10px;
+ border:1px solid #EB2732;
+ background:#fff;
+ padding:25px;
line-height:1.5;
- h2 { font-size:1.0em !important; font-weight:600; color:#F20011; margin-bottom:3px;}
+ 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;}
+ 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
//
@@ -207,10 +272,13 @@
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;
@@ -232,9 +300,16 @@
}
}
.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
\ No newline at end of file