Convert skins to stylus

* Create central skin.styl for populating many common styles based on variables (if they are defined) * Simplify cactus skin * Remove excessive text shadows from cactus, sage, and slate skins * Remove squid skin
SitePen · Feb 15, 2015 · 9fcdac2 · 9fcdac2
1 parent 17b06f5
commit 9fcdac2
Show file tree

Hide file tree

Showing 17 changed files with 637 additions and 425 deletions.
diff --git a/css/skins/cactus.css b/css/skins/cactus.css
@@ -1,102 +1,82 @@
-.cactus .dgrid-content {
-	border: none;
-	background: #faffef;
-	color: #000;
+.cactus .dgrid {
+  background: #faffef;
+  color: #000;
 }
-
-.cactus .dgrid-header-row {
-	border-bottom: none;
-}
-
 .cactus .dgrid-header,
 .cactus .dgrid-footer {
-	color: #fff;
-	background: #333; /* Old browsers */
-	background: -moz-linear-gradient(top, #4e4e4e 0%, #555555 12%, #636363 25%, #505050 39%, #303030 49%, #000000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(12%,#555555), color-stop(25%,#636363), color-stop(39%,#505050), color-stop(49%,#303030), color-stop(50%,#000000), color-stop(60%,#1c1c1c), color-stop(76%,#292929), color-stop(91%,#1e1e1e), color-stop(100%,#141414)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top, #4e4e4e 0%,#555555 12%,#636363 25%,#505050 39%,#303030 49%,#000000 50%,#1c1c1c 60%,#292929 76%,#1e1e1e 91%,#141414 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top, #4e4e4e 0%,#555555 12%,#636363 25%,#505050 39%,#303030 49%,#000000 50%,#1c1c1c 60%,#292929 76%,#1e1e1e 91%,#141414 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top, #4e4e4e 0%,#555555 12%,#636363 25%,#505050 39%,#303030 49%,#000000 50%,#1c1c1c 60%,#292929 76%,#1e1e1e 91%,#141414 100%); /* IE10+ */
-	background: linear-gradient(top, #4e4e4e 0%,#555555 12%,#636363 25%,#505050 39%,#303030 49%,#000000 50%,#1c1c1c 60%,#292929 76%,#1e1e1e 91%,#141414 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
-}
-
-.cactus .dgrid-header th {
-	padding: 7px 3px;
-	font-weight: bold;
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0,0,0,.9);
-	border-color: #111;
-	text-transform: uppercase;
-}
-
-.cactus .dgrid-cell {
-	border-color: #bbc581;
-	border-top: none;
-	border-right: none;
-	border-left: none;
+  background: #333;
+  background-image: -webkit-linear-gradient(top, #4e4e4e 0%, #555 12%, #636363 25%, #505050 39%, #303030 49%, #000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%);
+  background-image: -moz-linear-gradient(top, #4e4e4e 0%, #555 12%, #636363 25%, #505050 39%, #303030 49%, #000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%);
+  background-image: -o-linear-gradient(top, #4e4e4e 0%, #555 12%, #636363 25%, #505050 39%, #303030 49%, #000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%);
+  background-image: -ms-linear-gradient(top, #4e4e4e 0%, #555 12%, #636363 25%, #505050 39%, #303030 49%, #000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%);
+  background-image: linear-gradient(to bottom, #4e4e4e 0%, #555 12%, #636363 25%, #505050 39%, #303030 49%, #000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 );
+  color: #fff;
 }
-
-.cactus .dgrid-row-even {
-	border-top: 1px solid #FFF;
+.cactus .dgrid-header {
+  text-transform: uppercase;
+}
+.cactus .dgrid-header .dgrid-cell {
+  border-color: #111;
+  font-weight: bold;
 }
-
 .cactus .dgrid-row-odd {
-	background: #9a6;
-	background-image: -moz-linear-gradient(top, rgba(185,203,127,1) 0%, rgba(143,160,91,1) 100%);
-	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(185,203,127,1)), color-stop(100%,rgba(143,160,91,1)));
-	background-image: -webkit-linear-gradient(top, rgba(185,203,127,1) 0%,rgba(143,160,91,1) 100%);
-	background-image: -o-linear-gradient(top, rgba(185,203,127,1) 0%,rgba(143,160,91,1) 100%);
-	background-image: -ms-linear-gradient(top, rgba(185,203,127,1) 0%,rgba(143,160,91,1) 100%);
-	background-image: linear-gradient(top, rgba(185,203,127,1) 0%,rgba(143,160,91,1) 100%);
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9cb7f', endColorstr='#8fa05b',GradientType=0 );
-	text-shadow: 0 1px 0 rgba(255,255,255,.9);
-	border-top: 1px solid #ccd595;
-	color: #FFF;
-	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-}
-
-.cactus .dgrid-row-odd .dgrid-cell {
-	border-top: 1px solid #e9efbd;
-}
-
-.cactus .dgrid-row:hover,
-.cactus .dgrid-row:hover .dgrid-cell {
-	background: #555;
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0,0,0,.9);
-	border-color: #555;
-}
-
-.cactus .dgrid-selected,
-.cactus .dgrid-selected .dgrid-cell {
-	background: #333;
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0,0,0,.9);
-	border-color: #333;
-}
-
+  background: #9a6;
+  background-image: -webkit-linear-gradient(top, #b9cb7f 0%, #8fa05b 100%);
+  background-image: -moz-linear-gradient(top, #b9cb7f 0%, #8fa05b 100%);
+  background-image: -o-linear-gradient(top, #b9cb7f 0%, #8fa05b 100%);
+  background-image: -ms-linear-gradient(top, #b9cb7f 0%, #8fa05b 100%);
+  background-image: linear-gradient(to bottom, #b9cb7f 0%, #8fa05b 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9cb7f', endColorstr='#8fa05b',GradientType=0 );
+  color: #fff;
+}
+.cactus .dgrid-row:hover {
+  background: none;
+  background-color: #555;
+  filter: none;
+  border-color: #555;
+  color: #fff;
+}
+.cactus .dgrid-selected {
+  background: none;
+  background-color: #333;
+  filter: none;
+  border-color: #333;
+  color: #fff;
+}
 .cactus .dgrid-selected:hover {
-	background: #333;
-	border-color: #333;
+  background: #333;
+  border-color: #333;
 }
-
 .cactus .dgrid-highlight {
-	background: #d6e5a5; /* background-color doesn't override CSS3 gradient */
-	filter: none; /* override gradient in IE */
-	color: #000;
-	text-shadow: none;
+  background: none;
+  background-color: #d6e5a5;
+  filter: none;
+  color: #000;
+}
+.cactus .dgrid-cell {
+  border-color: #bbc581;
+}
+.cactus .dgrid-cell {
+  border-left: none;
+  border-right: none;
 }
-
-/* need to use white-based image for sort arrow */
 .cactus .dgrid-sort-arrow {
-	background-image: url("../images/ui-icons_ffffff_256x240.png");
+  background-image: url("../images/ui-icons_ffffff_256x240.png");
 }
-
-/* for ColumnReorder */
 .cactus .dgrid-header .dojoDndItemBefore {
-	border-left: 2px dotted #fff !important;
+  border-left: 2px dotted #fff !important;
 }
 .cactus .dgrid-header .dojoDndItemAfter {
-	border-right: 2px dotted #fff !important;
-}
+  border-right: 2px dotted #fff !important;
+}
+.cactus .dgrid-header-row {
+  border-bottom: none;
+}
+.cactus .dgrid-header .dgrid-cell {
+  padding: 7px 3px;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
+}
+.cactus .dgrid-highlight {
+  text-shadow: none;
+}
diff --git a/css/skins/cactus.styl b/css/skins/cactus.styl
@@ -0,0 +1,65 @@
+@require 'nib/gradients';
+@require 'nib/vendor';
+
+$dgrid-background ?= #faffef;
+$dgrid-color ?= #000;
+
+$dgrid-header-background ?= #333;
+$dgrid-header-background-image ?= linear-gradient(top, #4e4e4e 0%,#555555 12%,#636363 25%,#505050 39%,#303030 49%,#000000 50%,#1c1c1c 60%,#292929 76%,#1e1e1e 91%,#141414 100%);
+$dgrid-header-filter ?= unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 )");
+$dgrid-header-color ?= #fff;
+$dgrid-header-cell-border-color ?= #111;
+$dgrid-header-cell-font-weight ?= bold;
+$dgrid-header-text-transform ?= uppercase;
+
+$dgrid-body-cell-border-color ?= #bbc581;
+
+$dgrid-body-row-odd-background ?= #9a6;
+$dgrid-body-row-odd-background-image ?= linear-gradient(top, rgba(185,203,127,1) 0%,rgba(143,160,91,1) 100%);
+$dgrid-body-row-odd-filter ?= unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9cb7f', endColorstr='#8fa05b',GradientType=0 )");
+$dgrid-body-row-odd-border ?= 1px solid #ccd595;
+$dgrid-body-row-odd-color ?= #fff;
+$dgrid-body-cell-odd-border ?= 1px solid #e9efbd;
+$dgrid-body-row-even-border ?= 1px solid #fff;
+
+$dgrid-body-row-hover-background ?= none;
+$dgrid-body-row-hover-background-color ?= #555;
+$dgrid-body-row-hover-filter ?= none;
+$dgrid-body-row-hover-color ?= #fff;
+$dgrid-body-row-hover-border-color ?= $dgrid-body-row-hover-background-color;
+
+$dgrid-selected-background ?= none;
+$dgrid-selected-background-color ?= #333;
+$dgrid-selected-filter ?= none;
+$dgrid-selected-border-color ?= $dgrid-selected-background-color;
+$dgrid-selected-color ?= #fff;
+
+$dgrid-selected-hover-background ?= $dgrid-selected-background-color;
+$dgrid-selected-hover-border-color ?= $dgrid-selected-border-color;
+
+$dgrid-highlight-background ?= none;
+$dgrid-highlight-background-color ?= #d6e5a5;
+$dgrid-highlight-filter ?= none;
+$dgrid-highlight-color ?= #000;
+
+$dgrid-use-white-sort-arrow ?= true;
+$dgrid-suppress-cell-borders ?= true;
+
+$dgrid-column-reorder-border ?= 2px dotted #fff !important;
+
+.cactus {
+	@import 'skin';
+
+	.dgrid-header-row {
+		border-bottom: none;
+	}
+
+	.dgrid-header .dgrid-cell {
+		padding: 7px 3px;
+		text-shadow: 0 -1px 0 rgba(0,0,0,.9);
+	}
+
+	.dgrid-highlight {
+		text-shadow: none;
+	}
+}
diff --git a/css/skins/claro.css b/css/skins/claro.css
@@ -1,64 +1,55 @@
 .claro .dgrid {
-	border: 1px solid #aaa;
-	background: #fff;
-	color: #000;
-}
-
-.claro .dgrid-header {
-	font-weight: bold;
+  background: #fff;
+  border-color: #aaa;
+  color: #000;
 }
 .claro .dgrid-header,
-.claro .dgrid-footer { 
-	background: #ebf0f5; /* Old browsers */
-	background: -moz-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf0f5), color-stop(100%,#d5e0ea)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%); /* IE10+ */
-	background: linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf0f5', endColorstr='#d5e0ea',GradientType=0 ); /* IE6-9 */
+.claro .dgrid-footer {
+  background: #ebf0f5;
+  background-image: -webkit-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%);
+  background-image: -moz-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%);
+  background-image: -o-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%);
+  background-image: -ms-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%);
+  background-image: linear-gradient(to bottom, #ebf0f5 0%, #d5e0ea 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf0f5', endColorstr='#d5e0ea',GradientType=0 );
 }
-.claro .dgrid-header .dgrid-cell:hover {
-	background: #ebf1f6; /* Old browsers */
-	background: -moz-linear-gradient(top, #ffffff 0%, #d2e0eb 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d2e0eb)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top, #ffffff 0%,#d2e0eb 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top, #ffffff 0%,#d2e0eb 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top, #ffffff 0%,#d2e0eb 100%); /* IE10+ */
-	background: linear-gradient(top, #ffffff 0%,#d2e0eb 100%); /* W3C */
+.claro .dgrid-header .dgrid-cell {
+  border-color: #bbb;
+  font-weight: bold;
 }
-
-.claro .dgrid-row { 
-	-webkit-transition-duration: 0.2s;
-	-moz-transition-duration: 0.2s;
-	-o-transition-duration: 0.2s;
-	transition-duration: 0.2s;
-	-webkit-transition-property: background-color, border-color;
-	-moz-transition-property: background-color, border-color;
-	-o-transition-property: background-color, border-color;
-	transition-property: background-color, border-color;
-	background: url("images/row_back.png") #fff repeat-x;
+.claro .dgrid-header .dgrid-cell:hover {
+  background: #ebf1f6;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #d2e0eb 100%);
+  background-image: -moz-linear-gradient(top, #fff 0%, #d2e0eb 100%);
+  background-image: -o-linear-gradient(top, #fff 0%, #d2e0eb 100%);
+  background-image: -ms-linear-gradient(top, #fff 0%, #d2e0eb 100%);
+  background-image: linear-gradient(to bottom, #fff 0%, #d2e0eb 100%);
+}
+.claro .dgrid-row {
+  background: #fff url("images/row_back.png") repeat-x;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-property: background-color, border-color;
+  -moz-transition-property: background-color, border-color;
+  -o-transition-property: background-color, border-color;
+  -ms-transition-property: background-color, border-color;
+  transition-property: background-color, border-color;
 }
 .claro .dgrid-row:hover {
-	background-color: #e9f2fe;
+  background-color: #e9f2fe;
 }
-
 .claro .dgrid-selected {
-	background-color: #cee6fa;
+  background-color: #cee6fa;
 }
-
 .claro .dgrid-selected:hover {
-	background-color: #9bc6f2;
+  background-color: #9bc6f2;
 }
-
 .claro .dgrid-highlight {
-	background-color: #ff6;
+  background-color: #ff6;
 }
-
 .claro .dgrid-cell {
-	border-color: #edc;
+  border-color: #edc;
 }
-
-.claro .dgrid-header .dgrid-cell {
-	border-color: #bbb;
-}
diff --git a/css/skins/claro.styl b/css/skins/claro.styl
@@ -0,0 +1,30 @@
+@require 'nib/gradients';
+@require 'nib/vendor';
+
+$dgrid-background ?= #fff;
+$dgrid-color ?= #000;
+$dgrid-border-color ?= #aaa;
+
+$dgrid-header-background ?= #ebf0f5;
+$dgrid-header-background-image ?= linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%);
+$dgrid-header-filter ?= unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf0f5', endColorstr='#d5e0ea',GradientType=0 )");
+$dgrid-header-cell-border-color ?= #bbb;
+$dgrid-header-cell-font-weight ?= bold;
+$dgrid-header-cell-hover-background ?= #ebf1f6;
+$dgrid-header-cell-hover-background-image ?= linear-gradient(top, #ffffff 0%,#d2e0eb 100%);
+
+$dgrid-body-cell-border-color ?= #edc;
+$dgrid-body-row-transition-duration ?= 0.2s;
+$dgrid-body-row-transition-property ?= unquote('background-color, border-color');
+$dgrid-body-row-background ?= #fff url('images/row_back.png') repeat-x;
+
+$dgrid-body-row-hover-background-color ?= #e9f2fe;
+
+$dgrid-selected-background-color ?= #cee6fa;
+$dgrid-selected-hover-background-color ?= #9bc6f2;
+
+$dgrid-highlight-background-color ?= #ff6;
+
+.claro {
+	@import 'skin';
+}