overrode jquery UI styles in reset.scss then reapplied relevant tab styling for problem menu

cms/envs/common.py

@@ -207,7 +207,7 @@ PIPELINE_CSS = {
     'base-style': {
         'source_filenames': [
             'js/vendor/CodeMirror/codemirror.css',
-            'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css',
+            'css/vendor/ui-lightndess/jquery-ui-1.8.22.custom.css',
             'css/vendor/jquery.qtip.min.css',
             'sass/base-style.scss'
         ],

cms/static/sass/_reset.scss

@@ -54,4 +54,129 @@ del {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+}
+
+/* Reset styles to remove ui-lightness jquery ui theme 
+from the tabs component (used in the add component problem tab menu) 
+*/
+
+.ui-tabs {
+	padding: 0;
+	white-space: normal;
+}
+
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	border-top-right-radius: 0;
+	border-top-left-radius: 0;
+}
+
+.ui-widget-content {
+	border: 0;
+	background: none;
+}
+.ui-widget {
+	font-family: 'Open Sans', sans-serif;
+	font-size: 16px;
+}
+
+.ui-widget-header {
+	border:none;
+	background: none;
+}
+
+.ui-tabs .ui-tabs-nav {
+	padding: 0;
+	top: 0;
+	margin: 0;
+	float: none;
+	li {
+		padding: 0;
+	}
+}
+
+.ui-tabs-nav {
+
+	li {
+		white-space: normal;
+		top: 0;
+		margin: 0;
+		white-space: none;
+	}
+	a {
+		float: none;
+	}
+}
+.ui-tabs .ui-tabs-panel {
+	padding: 0;
+}
+
+.ui-helper-reset {
+	line-height: 25.6;
+}
+
+.ui-state-default, {
+    border: none;
+    background: none;
+    color: none;
+    font-weight: 400;
+}
+
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
+    border: 0;
+    background: none;
+    font-weight: normal;
+    color: #1C94C4;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
+    border: 0;
+    background: none;
+    color: #fff;
+}
+
+/* reapplying the tab styles from unit.scss after 
+removing jquery ui ui-lightness styling 
+*/
+
+.problem-type-tabs {
+	list-style-type: none;
+	width: 100%;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+	//background-color: $lightBluishGrey;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+
+	li:first-child {
+		margin-left: 20px;
+	}
+	li {
+		&:ui-state-active {
+			background-color: rgba(255, 255, 255, .3)
+		}
+	}
+/*
+	li {
+		float:left;
+		display:inline-block;
+		text-align:center;
+		width: auto;
+		//@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+		//background-color: tint($lightBluishGrey, 20%);
+		//@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+		opacity:.8;
+
+		&:hover {
+		  opacity:1;
+		}
+
+		&.current {
+		  border: 0px;
+		  //@include active;
+		  opacity:1;
+		}
+	}
+*/
 }
\ No newline at end of file

cms/static/sass/_unit.scss

@@ -183,21 +183,16 @@
 
         .problem-type-tabs {
           list-style-type: none;
+          border-radius: 0;
           width: 100%;
-          border-top-left-radius: 3px;
-          border-top-right-radius: 3px;
           @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
           background-color: $lightBluishGrey;
           @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
 
           li:first-child {
-            border-top-left-radius: 3px;
             margin-left: 20px;
           }
 
-          li:last-child {
-            border-top-right-radius: 3px;
-          }
           li {
             float:left;
             display:inline-block;
@@ -212,7 +207,7 @@
               opacity:1;
             }
 
-            &.current {
+            &.ui-state-active {
               border: 0px;
               @include active;
               opacity:1;
@@ -271,7 +266,6 @@
 
             .name {
               float: left;
-              @include transition(opacity .15s);
 
               .ss-icon {
                 @include transition(opacity .15s);