grading - added in sub section controls

cms/static/sass/_courseware.scss

@@ -153,11 +153,12 @@ input.courseware-unit-search-input {
 				top: 0;
 				right: 2px;
 				display: none;
-				width: 105px;
-				padding: 10px 20px 10px 10px;
+				width: 100px;
+				padding: 10px 35px 10px 10px;
 				@include border-radius(3px);
 				background: $lightGrey;
 				color: $lightGrey;
+				text-align: right;
 				font-size: 12px;
 				font-weight: bold;
 				line-height: 16px;
@@ -178,7 +179,7 @@ input.courseware-unit-search-input {
 
 			.menu {
 				z-index: 1;
-				display: block;
+				display: none;
 				opacity: 0.0;
 				position: absolute;
 				top: -1px;
@@ -191,6 +192,7 @@ input.courseware-unit-search-input {
 				@include border-radius(4px);
 				@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
 				@include transition(opacity .15s);
+				@include transition(display .15s);
 
 
 				li {
@@ -223,6 +225,7 @@ input.courseware-unit-search-input {
 
 				.menu {
 					z-index: 1000;
+					display: block;
 					opacity: 1.0;
 				}
 
@@ -338,9 +341,10 @@ input.courseware-unit-search-input {
 						right: -5px;
 						display: none;
 						width: 110px;
-						padding: 5px 20px 5px 10px;
+						padding: 5px 40px 5px 10px;
 						@include border-radius(3px);
 						color: $lightGrey;
+						text-align: right;
 						font-size: 12px;
 						font-weight: bold;
 						line-height: 16px;
@@ -361,7 +365,7 @@ input.courseware-unit-search-input {
 
 					.menu {
 						z-index: 1;
-						display: block;
+						display: none;
 						opacity: 0.0;
 						position: absolute;
 						top: -1px;
@@ -407,6 +411,7 @@ input.courseware-unit-search-input {
 
 						.menu {
 							z-index: 1000;
+							display: block;
 							opacity: 1.0;
 						}
 

cms/static/sass/_subsection.scss

@@ -137,8 +137,7 @@
 
 	a {
 		font-size: 11px;
-		font-weight: 700;
-		line-height: 31px;
+		font-weight: bold;
 		text-transform: uppercase;
 	}
 
@@ -199,11 +198,11 @@
 			margin: 0;
 			padding: 0;
 			background: transparent;
-			color: $darkGrey;
+			color: $blue;
 			border: none;
-			font-size: 12px;
+			font-size: 11px;
 			font-weight: bold;
-			line-height: 16px;
+			text-transform: uppercase;
 		}
 
 		.menu-toggle {
@@ -221,10 +220,11 @@
 		}
 
 		.menu {
-			z-index: 10;
+			z-index: 1;
 			position: absolute;
 			top: -12px;
 			left: -7px;
+			display: none;
 			width: 100%;
 			margin: 0;
 			padding: 8px 12px;
@@ -246,10 +246,6 @@
 					margin-bottom: 0;
 					padding-bottom: 0;
 					border: none;
-
-					a {
-						color: $darkGrey;
-					}
 				}
 			}
 
@@ -265,11 +261,13 @@
 		&.is-active {
 
 			.menu {
+				z-index: 10000;
+				display: block;
 				opacity: 1.0;
 			}
 
 			.menu-toggle {
-				z-index: 10000;
+				z-index: 1000;
 			}
 		}
 

cms/templates/edit_subsection.html

@@ -86,7 +86,7 @@
       </div>
     
     <div class="row gradable">
-      <label>Graded? :</label>
+      <label>Graded as:</label>
       
       <div class="gradable-status">
         <h4 class="status-label">Not Graded</h4>

cms/templates/overview.html

@@ -175,7 +175,7 @@
               <h4 class="status-label">Not Graded</h4>
               
               <a class="menu-toggle" href="#">
-                <span class="ss-icon ss-standard">&#x2713;</span>
+                <span class="ss-icon ss-standard" data-tooltip="Holy Shit!">&#x2713;</span>
               </a>
                               
               <ul class="menu">