From a58bf7ad60555ae8dd60a62968d8e198e35ee4c4 Mon Sep 17 00:00:00 2001
From: Cichol <cichol@live.cn>
Date: Thu, 2 Jul 2015 17:36:02 +0800
Subject: [PATCH] refactor scss

---
 shenmegui.gemspec |  2 +-
 static/style.css  | 35 +++++++++++++++---------------
 static/style.scss | 54 +++++++++++++++++++++++++++++------------------
 3 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/shenmegui.gemspec b/shenmegui.gemspec
index 578f066..8268a38 100644
--- a/shenmegui.gemspec
+++ b/shenmegui.gemspec
@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name        = 'shenmegui'
-  s.version     = '0.3.4'
+  s.version     = '0.3.5'
   s.date        = '2015-04-23'
   s.summary     = "什么鬼!"
   s.description = "a simple HTML GUI for Ruby"
diff --git a/static/style.css b/static/style.css
index 2fd462a..4df4fe5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -3,25 +3,25 @@ body {
   -webkit-font-smoothing: none;
   -moz-osx-font-smoothing: none;
   font-size: 12px;
-  font-family: Tahoma, Verdana, Simhei;
-  color: #070707;
+  font-family: Tahoma, Verdana, Simhei, sans-serif;
+  color: #000;
   padding: 36px 50px 0;
   box-sizing: border-box; }
 
 .form {
   border: 1px solid;
-  border-top-color: #dfdfdf;
-  border-left-color: #dfdfdf;
+  border-top-color: #ffffff;
+  border-left-color: #ffffff;
   border-right-color: #808080;
   border-bottom-color: #808080;
-  box-shadow: 1px 1px 0 0 #000;
+  box-shadow: -1px -1px 0 0 #bfbfbf, 1px 1px 0 0 #404040;
   background: #bfbfbf;
   cursor: default;
   float: left;
   margin-right: 30px;
   margin-bottom: 20px; }
   .form .content {
-    padding: 7px 10px; }
+    padding: 11px 9px; }
   .form .title {
     margin: 2px 2px 0;
     padding: 2px;
@@ -50,17 +50,16 @@ body {
 
 button {
   border: 1px solid;
-  border-top-color: #dfdfdf;
-  border-left-color: #dfdfdf;
+  border-top-color: #ffffff;
+  border-left-color: #ffffff;
   border-right-color: #808080;
   border-bottom-color: #808080;
-  box-shadow: 1px 1px 0 0 #000;
+  box-shadow: 1px 1px 0 0 #404040;
   height: 25px;
   font-size: inherit;
   font-family: inherit;
   color: inherit;
-  background: #bfbfbf;
-  text-align: center;
+  background: inherit;
   outline: none;
   padding: 4px;
   cursor: default; }
@@ -68,16 +67,16 @@ button {
     box-shadow: 1px 1px 0 0 #000 inset;
     border-top-color: #808080;
     border-left-color: #808080;
-    border-right-color: #dfdfdf;
-    border-bottom-color: #dfdfdf; }
+    border-right-color: #ffffff;
+    border-bottom-color: #ffffff; }
 
 input[type="text"], textarea, select, .image, .progress, .table {
-  box-shadow: -1px -1px 0 0 #808080, 1px 1px 0 0 #fff;
   border: 1px solid;
-  border-top-color: #000;
-  border-left-color: #000;
-  border-right-color: #dfdfdf;
-  border-bottom-color: #dfdfdf;
+  border-top-color: #404040;
+  border-left-color: #404040;
+  border-right-color: #bfbfbf;
+  border-bottom-color: #bfbfbf;
+  box-shadow: -1px -1px 0 0 #808080, 1px 1px 0 0 #fff;
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
diff --git a/static/style.scss b/static/style.scss
index f3dde86..f696b6d 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -1,29 +1,42 @@
+//$background-color: #d4d0c8;
+$background-color: #bfbfbf;
+
 //凹边框
 @mixin concave {
-	box-shadow: -1px -1px 0 0 #808080, 1px 1px 0 0 #fff;
 	border: 1px solid;
-	border-top-color: #000;
-	border-left-color: #000;
-	border-right-color: #dfdfdf;
-	border-bottom-color: #dfdfdf;
+	border-top-color: #404040;
+	border-left-color: #404040;
+	border-right-color: $background-color;
+	border-bottom-color: $background-color;
+	box-shadow: -1px -1px 0 0 #808080, 1px 1px 0 0 #fff;
 }
 
 //凸边框
-@mixin convex {
+@mixin convex-form {
+	border: 1px solid;
+	border-top-color: #ffffff;
+	border-left-color: #ffffff;
+	border-right-color: #808080;
+	border-bottom-color: #808080;
+	box-shadow: -1px -1px 0 0 $background-color, 1px 1px 0 0 #404040;
+}
+
+//按钮的凸边框，和窗体的有点点不同
+@mixin convex-button {
 	border: 1px solid;
-	border-top-color: #dfdfdf;
-	border-left-color: #dfdfdf;
+	border-top-color: #ffffff;
+	border-left-color: #ffffff;
 	border-right-color: #808080;
 	border-bottom-color: #808080;
-	box-shadow: 1px 1px 0 0 #000;
+	box-shadow: 1px 1px 0 0 #404040;
 }
 
-@mixin convex-reverse {
+@mixin convex-button-invert {
 	box-shadow: 1px 1px 0 0 #000 inset;
 	border-top-color: #808080;
 	border-left-color: #808080;
-	border-right-color: #dfdfdf;
-	border-bottom-color: #dfdfdf;
+	border-right-color: #ffffff;
+	border-bottom-color: #ffffff;
 }
 
 body {
@@ -31,15 +44,15 @@ body {
 	-webkit-font-smoothing: none;
 	-moz-osx-font-smoothing: none;
 	font-size: 12px;
-	font-family: Tahoma, Verdana, Simhei;
-	color: #070707;
+	font-family: Tahoma, Verdana, Simhei, sans-serif;
+	color: #000;
 	padding: 36px 50px 0;
 	box-sizing: border-box;
 }
 
 .form {
-	@include convex;
-	background: #bfbfbf;
+	@include convex-form;
+	background: $background-color;
 	cursor: default;
 	//多个窗体
 	float: left;
@@ -47,7 +60,7 @@ body {
 	margin-bottom: 20px;
 
 	.content {
-		padding: 7px 10px;
+		padding: 11px 9px;
 	}
 
 	.title {
@@ -87,18 +100,17 @@ body {
 
 //按钮
 button {
-	@include convex;
+	@include convex-button;
 	height: 25px;
 	font-size: inherit;
 	font-family: inherit;
 	color: inherit;
-	background: #bfbfbf;
-	text-align: center;
+	background: inherit;
 	outline: none;
 	padding: 4px;
 	cursor: default;
 	&:active {
-		@include convex-reverse;
+		@include convex-button-invert;
 	}
 }