From 24247dc0b93205e68305286bd7316366d0371ead Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Fri, 5 Oct 2012 10:29:36 -0400
Subject: [PATCH] cross-browser css3

---
 cms/static/sass/_assets.scss     |  3 ++-
 cms/static/sass/_base.scss       | 29 ++++++++++++++++------------
 cms/static/sass/_cms_mixins.scss | 33 ++++++++++++++++----------------
 cms/static/sass/_courseware.scss |  7 ++++---
 cms/static/sass/_dashboard.scss  |  2 +-
 cms/static/sass/_header.scss     | 10 +++++-----
 cms/static/sass/_login.scss      |  6 +++---
 cms/static/sass/_modal.scss      |  3 ++-
 cms/static/sass/_unit.scss       | 31 ++++++++++++++++--------------
 9 files changed, 68 insertions(+), 56 deletions(-)

diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/_assets.scss
index 54ad25c0a3..82df497c9b 100644
--- a/cms/static/sass/_assets.scss
+++ b/cms/static/sass/_assets.scss
@@ -28,7 +28,8 @@
       }
 
       thead th {
-        background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
+        @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+        background-color: #ced2db;
         font-size: 12px;
         font-weight: 700;
         text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 312d066078..008e742bc2 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -16,7 +16,7 @@ body {
 a {
     text-decoration: none;
     color: $blue;
-    -webkit-transition: color .15s;
+    @include transition(color .15s);
 
     &:hover {
         color: #cb9c40;
@@ -53,7 +53,7 @@ h1 {
     background: #fff;
     border: 1px solid $darkGrey;
     border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 }
 
 .sidebar {
@@ -78,24 +78,27 @@ input[type="text"],
 input[type="email"],
 input[type="password"] {
     padding: 6px 8px 8px;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border: 1px solid #b0b6c2;
     border-radius: 2px;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+    background-color: #edf1f5;
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
     font-family: 'Open Sans', sans-serif;
     font-size: 11px;
     color: #3c3c3c;
     outline: 0;
 
-    &::-webkit-input-placeholder {
+    &::-webkit-input-placeholder,
+    &:-moz-placeholder,
+    &:-ms-input-placeholder {
         color: #979faf;
     }
 }
 
 input.search {
     padding: 6px 15px 8px 30px;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border: 1px solid $darkGrey;
     border-radius: 20px;
     background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
@@ -116,10 +119,11 @@ label {
     width: 100%;
     min-height: 80px;
     padding: 10px;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border: 1px solid #b0b6c2;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)) #edf1f5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+    background-color:  #edf1f5;
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
     font-family: Monaco, monospace;
 }
 
@@ -167,8 +171,9 @@ label {
         padding: 6px 14px;
         border-bottom: 1px solid #cbd1db;
         border-radius: 3px 3px 0 0;
-        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
-        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
+        @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
+        background-color: #edf1f5;
+        @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
         font-size: 14px;
         font-weight: 600;
     }
diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index 8ca737f33d..ffc3a0e722 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -13,11 +13,11 @@
 	padding: 4px 20px 6px;
 	font-size: 14px;
 	font-weight: 700;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
-	-webkit-transition: background-color .15s, box-shadow .15s;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
+	@include transition(background-color .15s, box-shadow .15s);
 
 	&:hover {
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
+		@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
 	}
 }
 
@@ -25,7 +25,8 @@
 	@include button;
 	border: 1px solid #437fbf;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: $blue;
 	color: #fff;
 
 	&:hover {
@@ -38,8 +39,9 @@
 	@include button;
 	border: 1px solid $darkGrey;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
+	background-color: #dfe5eb;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
 	color: #5d6779;
 
 	&:hover {
@@ -52,8 +54,9 @@
 	@include button;
 	border: 1px solid #bda046;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
+	background-color: #edbd3c;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
 	color: #3c3c3c;
 
 	&:hover {
@@ -66,8 +69,9 @@
 	@include button;
 	border: 1px solid $darkGrey;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: #d1dae3;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
 	color: #6d788b;
 
 	&:hover {
@@ -80,8 +84,9 @@
 	padding: 15px 20px;
 	border-radius: 3px;
 	border: 1px solid #5597dd;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #5597dd;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+	background-color: #5597dd;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
 
 	label {
 		color: #fff;
@@ -165,10 +170,6 @@
 		.has-new-draft-item {
 			color: #9f7d10;
 		}
-
-		.item-actions {
-			// display: none;
-		}
 	}
 
 	a {
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
index 020548e08a..f135328b62 100644
--- a/cms/static/sass/_courseware.scss
+++ b/cms/static/sass/_courseware.scss
@@ -22,7 +22,7 @@ input.courseware-unit-search-input {
 	border-radius: 3px;
 	margin: 10px 0;
 	padding-bottom: 12px;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+	@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 
 	&:first-child {
 		margin-top: 0;
@@ -90,7 +90,8 @@ input.courseware-unit-search-input {
 	}
 
 	.list-header {
-		background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
+		@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+		background-color: #ced2db;
 		border-radius: 3px 3px 0 0;
 	}
 
@@ -129,7 +130,7 @@ input.courseware-unit-search-input {
 	left: 110px;
 	z-index: 9999;
 	border: 1px solid #3C3C3C;
-	box-shadow: 0 1px 15px rgba(0, 0, 0, .2);	
+	@include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
 }
 
 .unit-name-input {
diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss
index 2abf769923..652d7f9d66 100644
--- a/cms/static/sass/_dashboard.scss
+++ b/cms/static/sass/_dashboard.scss
@@ -3,7 +3,7 @@
 	border-radius: 3px;
 	border: 1px solid $darkGrey;	
 	background: #fff;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+	@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 
 	li {
 		border-bottom: 1px solid $mediumGrey;
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index 0fa4f2eddd..84e3ba1588 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -8,10 +8,10 @@ body.no-header {
 	width: 100%;
 	height: 36px;
 	border-bottom: 1px solid #2c2e33;
-	background: -webkit-linear-gradient(top, #686b76, #54565e);
+	@include linear-gradient(top, #686b76, #54565e);
 	font-size: 13px;
 	color: #fff;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset;
+	@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
 
 	.drop-icon {
 		margin-left: 5px;
@@ -38,15 +38,15 @@ body.no-header {
 	}
 
 	a {
-		box-shadow: 1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44;
+		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
 
 		&:hover {
 			background: rgba(255, 255, 255, .1);
 		}
 
 		&.active {
-			background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
-			box-shadow: 0 2px 8px rgba(0, 0, 0, .7) inset;
+			@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
+			@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
 		}
 	}
 }
\ No newline at end of file
diff --git a/cms/static/sass/_login.scss b/cms/static/sass/_login.scss
index 48216636d0..3cc7551249 100644
--- a/cms/static/sass/_login.scss
+++ b/cms/static/sass/_login.scss
@@ -8,9 +8,9 @@
 		height: 36px;
 		border-radius: 3px 3px 0 0;
 		border: 1px solid #2c2e33;
-		background: -webkit-linear-gradient(top, #686b76, #54565e);
+		@include linear-gradient(top, #686b76, #54565e);
 		color: #fff;
-		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset;
+		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset);
 
 		h1 {
 			margin: 5px 0;
@@ -26,7 +26,7 @@
 		border-top-width: 0;
 		border-radius: 0 0 3px 3px;
 		background: #fff;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 	}
 
 	label {
diff --git a/cms/static/sass/_modal.scss b/cms/static/sass/_modal.scss
index a60d5629e3..854d1e1045 100644
--- a/cms/static/sass/_modal.scss
+++ b/cms/static/sass/_modal.scss
@@ -28,7 +28,8 @@
 
 	.modal-actions {
 		height: 60px;
-		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #d1dae3;
+		@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+		background-color: #d1dae3;
 	}
 
 	h2 {
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 0cc855a56f..2062548b08 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -22,8 +22,9 @@
   .breadcrumbs {
     border-radius: 3px 3px 0 0;
     border-bottom: 1px solid #cbd1db;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
+    @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
+    background-color: #edf1f5;
+    @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
     @include clearfix;
 
     li {
@@ -56,7 +57,7 @@
       border: 1px solid #d1ddec;
       border-radius: 3px;
       background: #fff;
-      -webkit-transition: border-color .15s;
+      @include transition(border-color .15s);
 
       &:hover {
         border-color: #6696d7;
@@ -94,7 +95,7 @@
         position: absolute;
         top: 4px;
         right: 4px;
-        -webkit-transition: opacity .15s;
+        @include transition(opacity .15s);
       }
 
       .edit-button,
@@ -107,7 +108,7 @@
         background: #d1ddec;
         font-size: 12px;
         color: #fff;
-        -webkit-transition: all .15s;
+        @include transition(all .15s);
 
         &:hover {
           background-color: $blue;
@@ -132,16 +133,17 @@
         border: 1px solid #d1ddec;
         background: url(../img/drag-handles.png) center no-repeat #d1ddec;
         cursor: move;
-        -webkit-transition: all .15s;
+        @include transition(all .15s);
       }
 
       &.new-component-item {
         padding: 0;
         border: 1px solid #8891a1;
         border-radius: 3px;
-        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
-        box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-        -webkit-transition: background-color .15s, border-color .15s;
+        @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+        background-color: #d1dae3;
+        @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
+        @include transition(background-color .15s, border-color .15s);
 
         &.adding {
           background-color: $blue;
@@ -182,8 +184,8 @@
             line-height: 14px;
             color: #fff;
             text-align: center;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
-            -webkit-transition: background-color .15s;
+            @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
+            @include transition(background-color .15s);
 
             &:hover {
               background-color: rgba(255, 255, 255, .2);
@@ -195,7 +197,7 @@
               left: 0;
               width: 100%;
               padding: 10px;
-              box-sizing: border-box;
+              @include box-sizing(border-box);
             }
           }
         }
@@ -225,7 +227,8 @@
     display: none;
     padding: 20px;
     border-radius: 0 0 3px 3px;
-    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
+    @include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+    background-color: $blue;
     color: #fff;
 
     .metadata_edit {
@@ -360,7 +363,7 @@
   .url {
     width: 100%;
     margin-bottom: 10px;
-    box-shadow: none;
+    @include box-shadow(none);
   }
 
   .window-contents > ol {