kkt_shoppe 1.1.0

data/app/assets/stylesheets/kkt_shoppe/application.scss

@@ -0,0 +1,601 @@
+/*
+ *= require kkt_shoppe/reset
+ *= require kkt_shoppe/elements
+ *= require kkt_shoppe/chosen
+ *= require nifty/dialog
+ *= require kkt_shoppe/dialog
+ *= require_self
+ */
+
+@import 'variables';
+
+html { font-family:$font; font-size:12px; color:#000; -webkit-font-smoothing:antialiased; background-color:#f7f9fc; overflow-y:scroll}
+
+nav.sidebar {
+	width:200px;
+	background:#40454D;
+	position:fixed;
+	top:0;
+	bottom:0;
+	header.logo {
+		height:57px;
+		background:image-url('kkt_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('kkt_shoppe/kkt_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 10px; 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.05);
+				}
+				&.active {
+					font-weight:bold;
+					color:#fff;
+					background:rgba(0,0,0,0.08);
+				}
+			}
+		}
+	}
+}
+
+header.main {
+	position:fixed;
+	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;}
+	h2.products { background-image:image-url('kkt_shoppe/icons/tags.svg')}
+	h2.orders { background-image:image-url('kkt_shoppe/icons/bag.svg'); background-position: 0 3px;}
+	h2.delivery_services { background-image:image-url('kkt_shoppe/icons/box.svg'); background-position: 0 3px; background-size:20px;}
+	h2.tax_rates { background-image:image-url('kkt_shoppe/icons/currency.svg'); background-position: 0 2px; background-size:22px;}
+	h2.users { background-image:image-url('kkt_shoppe/icons/id.svg'); background-position: 0 2px; background-size:22px;}
+	h2.countries { background-image:image-url('kkt_shoppe/icons/globe.svg'); background-position: 0 2px; background-size:22px;}
+	h2.settings { background-image:image-url('kkt_shoppe/icons/toolbox.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;}
+	}
+
+
+	//
+	// 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('kkt_shoppe/statuses/shipped.svg'); }
+		&.accepted { color:#89BD2F; background-image:image-url('kkt_shoppe/statuses/accepted.svg'); }
+		&.rejected { color:#E33127; background-image:image-url('kkt_shoppe/statuses/rejected.svg'); }
+		&.received { color:#909091; background-image:image-url('kkt_shoppe/statuses/received.svg'); }
+	}
+
+	//
+	// fieldset
+	//
+	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;}
+		&.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.cleared {
+				margin-top:15px;
+				clear:both;
+			}
+
+			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 {
+				}
+				dd select { width:100%;}
+				dd textarea { height:80px;	}
+				dd p.help { margin-top:15px; color:#333; background:image-url('kkt_shoppe/icons/support.svg') no-repeat 0 3px; line-height:1.5; background-size:13px; padding-left:18px; opacity:0.7;}
+				dd.checkbox { margin-top:14px; font-size:1.1em; color:#999;}
+				dd.checkbox input { float:left; margin-right:10px; margin-top:2px; }
+				dd div.radios {
+					padding-top:4px;
+					input,label { margin-right:10px;}
+				}
+				dd.space { margin-bottom:5px;}
+				dd.space:last-child { margin-bottom:0;}
+				&.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%;}
+				}
+
+				&.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, 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%;
+					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('kkt_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('kkt_shoppe/table-tear-off.png') repeat-x 0 0;
+					height:5px;
+					padding:0;
+				}
+				td {
+					border:1px solid #ddd;
+					font-size:0.9em;
+					width:auto;
+				}
+			}
+
+			//
+			// category's children table
+			//
+			table.categoryChildren {
+				@extend table.importExample;
+				a { color:#000; }
+				tr:nth-last-child(2) td {
+					border: 1px solid #ddd;
+				}
+			}
+		}
+		p.submit {margin:0; background:#fff; border:1px solid #dce2eb; padding:25px; }
+		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.sided { padding-left:30%;}
+		.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('kkt_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 & customer summary pages
+	//
+	#order, #customer {
+		.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] {  }
+			}
+
+			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('kkt_shoppe/square.svg') repeat-x 0 15px;
+			background-size:8px;
+			margin:45px 0;
+			overflow:hidden;
+			ul {
+				li { width:33%;float:left; text-align:center; background:image-url('kkt_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('kkt_shoppe/statuses/paid.svg')}
+				li.payment h4 { color:#3DB3E2;}
+				li.received { background-image:image-url('kkt_shoppe/statuses/received.svg')}
+				li.received h4 { color:#909091;}
+				li.accepted { background-image:image-url('kkt_shoppe/statuses/accepted.svg')}
+				li.accepted h4 { color:#89BD2F;}
+				li.rejected { background-image:image-url('kkt_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;
+		border:1px solid #ed7c04;
+		color:#ed7c04;
+		font-size:1.1em;
+		font-weight:500;
+		margin-bottom:25px;
+		padding:15px;
+	}
+
+	//
+	// payments
+	//
+	fieldset.orderPayments {
+		h4 { font-weight:bold; text-transform:uppercase; color:#5B6270;}
+		.table {
+			margin-bottom:20px;
+			table td.refund { width:10%; text-align:center;}
+			table td.confirmed { width:5%; text-align:center;}
+		}
+		form {
+			overflow:hidden;
+			background:#F7F9FC;
+			border:1px solid #DCE2EB;
+			padding:15px;
+			dl {
+				width:23%;float:left;
+				dt {  margin-bottom:4px; font-size:0.9em;color:#A9AEB5; font-weight:500;}
+				&.text { width:27%;margin-right:2%;}
+				&.amount { width:25%;}
+				&.submit { width:15%; text-align:right; margin-top:15px;}
+			}
+		}
+		p.notice {
+			background:#fffff3;
+			padding:10px;
+			color:#F67C00;
+			border:1px solid #F6B721;
+			margin-bottom:15px;
+		}
+	}
+
+	//
+	// order search
+	//
+	div.orderSearch, div.customerSearch {
+		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;
+		}
+	}
+
+	//
+	// new order form
+	//
+	form.orderForm {
+		input[type=text].disabled { background:#f7f7f7; color:#888}
+		p.slaWarning {
+			background:#e5eaf4;
+			padding:15px;
+			border:1px solid #abb4c6;
+			border-top:0;
+			text-align:center;
+		}
+		table.orderItems {
+			thead {
+				th.product { width:40%;}
+				th.qty, th.stock { width:5%; text-align:center;}
+				th.price, th.tax, th.total, th.weight { width:50px;}
+			}
+			tbody {
+				td.qty input { text-align:center;}
+				td.stock { text-align:center;}
+				td input { width:100%; font-size:1.0em; padding:3px; background:#f7f7f7;}
+				td.product select {width:400px;}
+				tr.item.new td { background:#f7f7f7;}
+				td.stock.oos { background:#fff4f4; color:#e32828;}
+				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);
+			padding:12px 20px;
+			font-size:1.1em;
+			text-decoration:none;
+		}
+	}
+}
+
+span.boolean span.true { color:#96BF48}
+span.boolean span.false { color:#c04a4a}
+
+.float-right { float:right;}
+
+div.field_with_errors { display:inline;}
+
+//
+// money input box
+//
+div.moneyInput {
+	overflow:hidden;
+	div.currency {float:left; background:#f3f6ec; color:#74884a; padding:5px; width:20px; text-align:center;border:1px solid #c5ceb1; font-size:1.1em; border-right:0;}
+	input {  width:100px; font-size:1.1em;}
+}
+
+//
+// standard text input box
+//
+input.text, textarea.text {
+	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;}
+}
+
+//
+// data table
+//
+div.table {
+	p.info {
+		overflow:hidden;
+		margin-bottom:10px;
+		color:#40454D;
+	}
+}
+
+table.data {
+	width:100%;
+	th, td { padding:10px; vertical-align:middle;}
+	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('kkt_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 td.table {
+		padding:0;
+		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%;}
+		td.adjustment input[type=text] { width:50px; margin-right:5px;}
+	}
+	tfoot td { background:#5B6270; color:#fff; border:1px solid #5B6270; font-weight:bold; font-size:1.1em;}
+}
+
+//
+// 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;
+		}
+	}
+}