app/assets/stylesheets/shoppe/application.scss in shoppe-1.0.2 vs app/assets/stylesheets/shoppe/application.scss in shoppe-1.0.3
- old
+ new
@@ -31,18 +31,18 @@
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 10px; border-radius:16px; margin-top:9px; margin-right:10px;}
a {
display:block;
@@ -69,10 +69,11 @@
left:200px;
right:0;
height:85px;
background:#fff;
box-shadow: 0 0px 15px -2px rgba(0,0,0,0.2);
+ z-index: 1;
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;}
@@ -87,33 +88,33 @@
}
#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;}
}
-
-
+
+
//
// Status tags
//
span.status-tag {
font-weight:600;
@@ -127,11 +128,11 @@
&.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'); }
}
-
+
//
// fieldset
//
fieldset {
border:1px solid #dce2eb;
@@ -141,21 +142,21 @@
margin-bottom:15px;
legend {color:#5B6270; margin:0 25px; font-weight:300; font-size:1.5em;}
&.padded { padding:15px 25px 25px 25px;}
&.padded legend { margin:0;}
}
-
+
//
// forms
//
form {
fieldset {
.splitContainer { margin:0 25px; margin-bottom:15px; height:50px;}
.splitContainer:last-child { margin-bottom:0;}
-
- dl {
+
+ 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;}
@@ -177,42 +178,60 @@
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%;}
}
+
+ &.quarter {
+ width:23%;
+ margin:0;
+ margin-left:2%;
+ float:left;
+ &:last-child { float:right; width:25%;}
+ &:first-child { margin:0;}
+ }
+
+ &.three-quarter {
+ width:75%;
+ margin:0;
+ float:right;
+ }
}
-
+
dl.sided {
clear:both;
dt { float:left; width:25%; text-align:right; padding-top:4px;}
dd { margin-left:30%; }
dd p.help { margin-top:10px;}
dd div.checkbox { padding-top:5px;}
}
-
-
+
+
//
// 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;}
+ thead td, thead th { text-align:left; border:1px solid #ccc; background:#f7f7f7; color:#999; font-size:0.9em; padding:10px; }
+ tr:nth-child(even) td {
+ background:#fbfbfb;
+ }
td {
border:1px solid #ccc;
padding:10px;
vertical-align:middle;
width:40%;
@@ -220,15 +239,39 @@
&.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;}
}
}
+
+ //
+ // imports example table
+ //
+ table.importExample {
+ @extend table.productAttributes;
+ tr:nth-last-child(2) td {
+ border-bottom: none;
+ }
+ tr.tear-off td {
+ border:none;
+ background:image-url('shoppe/table-tear-off.png') repeat-x 0 0;
+ height:5px;
+ padding:0;
+ }
+ td {
+ border:1px solid #ddd;
+ font-size:0.9em;
+ width:auto;
+ }
+ }
}
p.submit {margin:0; background:#fff; border:1px solid #dce2eb; padding:25px; }
- p.submit .button { margin-right:5px;}
+ p.submit .button {
+ margin-right:5px;
+ vertical-align: middle;
+ }
p.submit .right .button {margin-left:5px; margin-right:0;}
- p.submit span.right { float:right;}
+ p.submit span.right {float:right;}
p.submit.sided { padding-left:30%;}
.errorExplanation {
margin-bottom:25px;
border:1px solid #EB2732;
background:#fff;
@@ -237,11 +280,11 @@
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;
@@ -258,11 +301,11 @@
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 {
@@ -277,26 +320,26 @@
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] { }
}
-
+
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}
dd a { color:inherit;}
dt.padding { padding-top:6px;}
}
-
+
dl.form {
margin-top:15px;
input.text { width:70%;}
a.button { margin-right:5px;}
}
-
+
}
-
+
.status-bar {
background:image-url('shoppe/square.svg') repeat-x 0 15px;
background-size:8px;
margin:45px 0;
overflow:hidden;
@@ -313,21 +356,21 @@
li.accepted h4 { color:#89BD2F;}
li.rejected { background-image:image-url('shoppe/statuses/rejected.svg')}
li.rejected h4 { color: #E33127}
}
}
-
+
.order_items {
table.data {
.money { text-align:right; width:8%}
.product { width:42%;}
.sku { width:18%;}
.qty {text-align:center; width:5%;}
}
}
}
-
+
//
// warning message
//
p.warning {
background:#ffffed;
@@ -336,11 +379,11 @@
font-size:1.1em;
font-weight:500;
margin-bottom:25px;
padding:15px;
}
-
+
//
// payments
//
fieldset.orderPayments {
h4 { font-weight:bold; text-transform:uppercase; color:#5B6270;}
@@ -368,19 +411,19 @@
color:#F67C00;
border:1px solid #F6B721;
margin-bottom:15px;
}
}
-
+
//
// order search
//
div.orderSearch {
overflow:hidden;
display:none;
dl.left, dl.right {
- float:left;
+ 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%;}
}
@@ -394,11 +437,11 @@
//
form.orderForm {
input[type=text].disabled { background:#f7f7f7; color:#888}
p.slaWarning {
background:#e5eaf4;
- padding:15px;
+ padding:15px;
border:1px solid #abb4c6;
border-top:0;
text-align:center;
}
table.orderItems {
@@ -417,23 +460,23 @@
tr.delivery td.none { background:#fff4f4; color:#e32828; font-weight:500;}
}
tfoot {
td input { width:100%;padding:3px; background:transparent; border:0; font-size:1.0em; color:#fff;}
}
-
+
}
}
-
-
+
+
}
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);
@@ -504,11 +547,11 @@
table.data {
td { padding:10px; border-width:0; border-right-width:1px; border-bottom-width:1px;}
td:last-child { border-right-width:0;}
tr:last-child td { border-bottom-width:0;}
}
- }
+ }
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%;}
@@ -537,6 +580,6 @@
display:inline-block;
color:inherit;
text-decoration:none;
}
}
-}
\ No newline at end of file
+}