From 1720ddf93fe9c6d9f9a022458623f8fe394b57d2 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 11 Aug 2014 22:49:58 -0400
Subject: [PATCH] Studio: refactoring font-size to use Sass mixin * moving
 font-size to use @include font-size() mixin * re-organizing vendor reset
 styling into _vendor.scss override rather than _reset.scss * initial rule
 re-organization and minor line-height tweaks

---
 cms/static/sass/_base.scss                    | 22 ++---
 cms/static/sass/_reset.scss                   | 91 +------------------
 cms/static/sass/assets/_graphics.scss         |  2 +-
 cms/static/sass/elements/_forms.scss          | 10 +-
 cms/static/sass/elements/_modal.scss          |  2 +-
 .../sass/elements/_system-feedback.scss       |  9 +-
 cms/static/sass/elements/_tender-widget.scss  | 10 +-
 cms/static/sass/elements/_vendor.scss         | 88 +++++++++++++++++-
 cms/static/sass/elements/_xmodules.scss       |  2 +-
 cms/static/sass/views/_assets.scss            |  2 +-
 cms/static/sass/views/_export-git.scss        |  6 +-
 cms/static/sass/views/_export.scss            | 14 +--
 cms/static/sass/views/_settings.scss          | 12 +--
 cms/static/sass/views/_static-pages.scss      |  8 +-
 cms/static/sass/views/_updates.scss           | 20 ++--
 common/static/sass/_mixins-inherited.scss     |  4 +-
 16 files changed, 150 insertions(+), 152 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 47b6db55db..6e117932a6 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -287,9 +287,9 @@ hr.divide {
 }
 
 .details {
+    @include font-size(14);
     display: none;
     margin-bottom: 30px;
-    font-size: 14px;
 }
 
 .window {
@@ -304,13 +304,13 @@ hr.divide {
   }
 
   .header {
+    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+    @include font-size(14);
     padding: 6px 14px;
     border-bottom: 1px solid $mediumGrey;
     border-radius: 2px 2px 0 0;
-    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
     background-color: $lightBluishGrey;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-    font-size: 14px;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
   }
 
@@ -324,9 +324,9 @@ hr.divide {
     }
 
     .description {
+      @include font-size(11);
       @extend %t-regular;
       display: block;
-      font-size: 11px;
       font-style: italic;
       line-height: 1.3;
       color: #999;
@@ -345,6 +345,8 @@ hr.divide {
 // system notifications
 .toast-notification {
   @include transition(all $tmg-f2 linear 0s);
+  @include font-size(13);
+  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
   display: none;
   position: fixed;
   top: 20px;
@@ -354,10 +356,8 @@ hr.divide {
   padding: 15px 20px 17px;
   border-radius: 3px;
   border: 1px solid #333;
-  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
   background-color: rgba(30, 30, 30, .92);
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
-  font-size: 13px;
   text-align: center;
   color: #fff;
 
@@ -366,37 +366,37 @@ hr.divide {
   }
 
   strong {
+    @include font-size(16);
     @extend %t-strong;
     display: block;
     margin-bottom: 10px;
-    font-size: 16px;
     text-align: center;
   }
 
   .close-button {
+    @include font-size(22);
     @extend %t-strong;
     position: absolute;
     top: 0;
     right: 0;
     width: 27px;
     height: 27px;
-    font-size: 22px;
     line-height: 25px;
     color: #aaa;
     text-align: center;
 
     .close-icon {
+      @include font-size(16);
       @extend %t-strong;
-      font-size: 16px;
     }
   }
 
   .action-button {
     @include blue-button;
     @include box-sizing(border-box);
+    @include font-size(12);
     width: 100%;
     margin-top: 10px;
-    font-size: 12px;
     text-align: center;
   }
 }
@@ -513,13 +513,13 @@ hr.divide {
   opacity: 0.0;
 
   &:after {
+    @include font-size(20);
     content: '▾';
     display: block;
     position: absolute;
     bottom: -14px;
     left: 50%;
     margin-left: -7px;
-    font-size: 20px;
     color: rgba(0, 0, 0, 0.85);
   }
 }
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index ba12a7f6c3..041a038d1d 100644
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -58,6 +58,7 @@ q:before, q:after {
 ins {
 	text-decoration: none;
 }
+
 del {
 	text-decoration: line-through;
 }
@@ -72,93 +73,3 @@ abbr[title] {
 	text-decoration: none;
 	cursor: help;
 }
-
-// ====================
-
-// grandfathered styles
-
-// 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;
-}
-
-.ui-tabs .ui-tabs-nav li {
-	margin: 0;
-	padding: 0;
-	border: none;
-	top: 0;
-	margin: 0;
-	float: none;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-}
-
-.ui-tabs-nav {
-
-	li {
-		top: 0;
-		margin: 0;
-	}
-	a {
-		@extend %t-regular;
-		float: none;
-	}
-}
-
-.ui-tabs .ui-tabs-panel {
-	padding: 0;
-}
-
-// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
-.problem-type-tabs {
-	border:none;
-	list-style-type: none;
-	width: 100%;
-	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-	//background-color: $lightBluishGrey;
-	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 {
-		opacity: 0.8;
-
-		&:ui-state-active {
-			@extend %t-regular;
-			background-color: rgba(255, 255, 255, .3);
-			opacity: 1.0;
-		}
-		a:focus {
-			outline: none;
-			border: 0px;
-		}
-	}
-}
diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss
index af0a467916..2b6dabc04f 100644
--- a/cms/static/sass/assets/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -156,9 +156,9 @@
 .draft-tag,
 .public-tag,
 .private-tag {
+	@include font-size(9);
 	@extend %t-strong;
 	margin-left: 3px;
-	font-size: 9px;
 	text-transform: uppercase;
 	color: #a4aab7;
 }
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 66ce3827c4..636eb7f149 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -6,15 +6,15 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 textarea.text {
-  padding: 6px 8px 8px;
+  @include font-size(11);
   @include box-sizing(border-box);
+  @include linear-gradient($gray-l5, $white);
+  padding: 6px 8px 8px;
   border: 1px solid $gray-l2;
   border-radius: 2px;
-  @include linear-gradient($gray-l5, $white);
   background-color: $gray-l5;
   box-shadow: inset 0 1px 2px $shadow-l1;
   font-family: 'Open Sans', sans-serif;
-  font-size: 11px;
   color: $baseFontColor;
   outline: 0;
 
@@ -382,7 +382,7 @@ input.search {
 }
 
 label {
-  font-size: 12px;
+  @include font-size(12);
 }
 
 code {
@@ -393,7 +393,7 @@ code {
 }
 
 .CodeMirror {
-  font-size: 13px;
+  @include font-size(13);
   background: #fff;
 }
 
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 532f747a95..5b6e718451 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -36,10 +36,10 @@
 	}
 
 	h2 {
+		@include font-size(19);
 		@extend %t-light;
 		margin: 0 10px 30px;
 		color: #646464;
-		font-size: 19px;
 		letter-spacing: 1px;
 		text-transform: uppercase;
 	}
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index cf0a54937b..585e671900 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -845,7 +845,9 @@ body.uxdesign.alerts {
 
 // artifact styles
 .main-wrapper {
+
   .alert {
+    @include font-size(14);
     padding: 15px 20px;
     margin-bottom: 30px;
     border-radius: 3px;
@@ -853,7 +855,6 @@ body.uxdesign.alerts {
     border-radius: 3px;
     background: #fbf6e1;
     // background: #edbd3c;
-    font-size: 14px;
     @include clearfix;
 
     .alert-message {
@@ -894,21 +895,21 @@ body.error {
   }
 
   h1 {
+    @include font-size(60);
     @extend %t-light;
     float: none;
     margin: 0;
-    font-size: 60px;
     color: $gray-d3;
   }
 
   .description {
+    @include font-size(21);
     margin-bottom: 50px;
-    font-size: 21px;
   }
 
   .back-button {
+    @include font-size(18);
     @include blue-button;
     padding: 14px 40px 18px;
-    font-size: 18px;
   }
 }
diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss
index bf35b5016b..802e6bc86d 100644
--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -65,7 +65,7 @@
 }
 
 .widget-layout .header h1 {
-  font-size: 22px;
+  @include font-size(22);
 }
 
 .widget-layout .content {
@@ -86,15 +86,15 @@
 }
 
 .widget-layout label {
+  @include font-size(14);
   @extend %t-strong;
-  font-size: 14px;
   margin-bottom: 5px;
   color: #4c4c4c;
 }
 
 .widget-layout input[type="text"], .widget-layout textarea {
+  @include font-size(16);
   padding: 10px;
-  font-size: 16px;
   color: rgb(0,0,0) !important;
   border: 1px solid #b0b6c2;
   border-radius: 2px;
@@ -177,10 +177,10 @@
 }
 
 .widget-layout #discussion_body:before {
+  @include font-size(14);
   @extend %t-strong;
   content: "What Question or Feedback Would You Like to Share?";
   display: block;
-  font-size: 14px;
   margin-bottom: 5px;
   color: #4c4c4c;
 }
@@ -214,11 +214,11 @@
 }
 
 .widget-layout .form-actions .btn-post_topic {
+  @include font-size(16);
   @extend %t-strong;
   display: block;
   width: 100%;
   height: auto !important;
-  font-size: 16px;
   -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
   box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 961f575d7b..78b94f96b2 100644
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -3,11 +3,11 @@
 
 // JQUI calendar
 .ui-datepicker {
+  @include font-size(12);
   border-color: $darkGrey;
   border-radius: 2px;
   background: #fff;
   font-family: $f-sans-serif;
-  font-size: 12px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
   z-index: 100000 !important;
 
@@ -72,3 +72,89 @@
   }
 }
 // ====================
+
+// 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 {
+  @include font-size(16);
+  font-family: 'Open Sans', sans-serif;
+}
+
+.ui-widget-header {
+  border:none;
+  background: none;
+}
+
+.ui-tabs .ui-tabs-nav {
+  padding: 0;
+}
+
+.ui-tabs .ui-tabs-nav li {
+  margin: 0;
+  padding: 0;
+  border: none;
+  top: 0;
+  margin: 0;
+  float: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui-tabs-nav {
+
+  li {
+    top: 0;
+    margin: 0;
+  }
+  a {
+    @extend %t-regular;
+    float: none;
+  }
+}
+
+.ui-tabs .ui-tabs-panel {
+  padding: 0;
+}
+
+// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
+.problem-type-tabs {
+  border:none;
+  list-style-type: none;
+  width: 100%;
+  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+  //background-color: $lightBluishGrey;
+  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 {
+    opacity: 0.8;
+
+    &:ui-state-active {
+      @extend %t-regular;
+      background-color: rgba(255, 255, 255, .3);
+      opacity: 1.0;
+    }
+    a:focus {
+      outline: none;
+      border: 0px;
+    }
+  }
+}
diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss
index 8bc2aa1971..246666bc22 100644
--- a/cms/static/sass/elements/_xmodules.scss
+++ b/cms/static/sass/elements/_xmodules.scss
@@ -191,12 +191,12 @@
     }
 
     .progress-bar {
+      @include font-size(18);
       display: block;
       height: 30px;
       margin: 10px 0;
       border: 1px solid $blue;
       text-align: center;
-      font-size: 1.14em;
 
       &.is-invisible {
         display: none;
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index fe16b85f26..f5b4d691f3 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -414,9 +414,9 @@
     }
 
     .choose-file-button {
+      @include font-size(17);
       @include blue-button;
       padding: 10px 82px 12px;
-      font-size: 17px;
     }
 
     .progress-bar {
diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss
index 81c152497a..473190aa31 100644
--- a/cms/static/sass/views/_export-git.scss
+++ b/cms/static/sass/views/_export-git.scss
@@ -23,20 +23,20 @@
   }
 
   h3 {
+    @include font-size(19);
     @extend %t-strong;
-    font-size: 19px;
   }
 
   .export-git-info-block {
 
     dt {
+      @include font-size(19);
       @extend %t-strong;
-      font-size: 19px;
       margin-top: 12px;
     }
 
     dd {
-      font-size: 17px;
+      @include font-size(17);
       margin-bottom: 20px;
     }
 
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 9a023d3f4b..88696b2672 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -90,14 +90,14 @@
 
   // OLD
   .description {
+    @include font-size(14);
     float: left;
     width: 62%;
     margin-right: 3%;
-    font-size: 14px;
 
     h2 {
+      @include font-size(19);
       @extend %t-strong;
-      font-size: 19px;
       margin-bottom: 20px;
     }
 
@@ -132,15 +132,15 @@
       text-align: center;
 
       h2 {
+        @include font-size(26);
         @extend %t-light;
         margin-bottom: 30px;
-        font-size: 26px;
       }
 
       .error-block {
+        @include font-size(13);
         display: none;
         margin-bottom: 15px;
-        font-size: 13px;
       }
 
       .error-block {
@@ -148,14 +148,14 @@
       }
 
       .button-export {
-        @include green-button;
+        @include green-button();
+        @include font-size(17);
         padding: 10px 50px 11px;
-        font-size: 17px;
       }
 
       .message-status {
+        @include font-size(12);
         margin-top: 10px;
-        font-size: 12px;
       }
 
       .progress-bar {
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 01cce38925..5af8e3deb6 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -17,8 +17,8 @@
 
   // messages - should be synced up with global messages in the future
   .message {
+    @include font-size(14);
     display: block;
-    font-size: 14px;
   }
 
   .message-status {
@@ -544,11 +544,11 @@
             position: relative;
 
             li {
+              @include font-size(9);
               position: absolute;
               top: 52px;
               width: 30px;
               margin-left: -15px;
-              font-size: 9px;
               text-align: center;
 
               &.increment-0 {
@@ -623,12 +623,12 @@
               }
 
               .remove-button {
+                @include font-size(10);
                 display: none;
                 position: absolute;
                 top: -17px;
                 right: 1px;
                 height: 17px;
-                font-size: 10px;
               }
 
               &:nth-child(1) {
@@ -653,17 +653,17 @@
               }
 
               .letter-grade {
+                @include font-size(16);
+                @include line-height(16);
                 @extend %t-strong;
                 display: block;
                 margin: 10px 15px 0 0;
-                font-size: 16px;
-                line-height: 14px;
               }
 
               .range {
+                @include font-size(10);
                 display: block;
                 margin-right: 15px;
-                font-size: 10px;
                 line-height: 12px;
               }
 
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index eee48d542f..e5b5a8056c 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -331,9 +331,9 @@
   }
 
   .xblock-student_view {
+    @include font-size(24);
     @include transition(background-color $tmg-s3 linear 0s);
     padding: 20px 20px 22px;
-    font-size: 24px;
     background: #fff;
   }
 
@@ -347,8 +347,8 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
     .page-name {
+      @include font-size(19);
       @extend %t-strong;
-      font-size: 19px;
     }
 
     .item-actions {
@@ -373,11 +373,12 @@
   }
 
   .page-display-name-input {
+    @include font-size(20);
     width: 100%;
-    font-size: 20px;
   }
 
   .page-contents {
+    @include font-size(13);
     @include box-sizing(border-box);
     @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
     width: 100%;
@@ -388,7 +389,6 @@
     background-color: #edf1f5;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
     font-family: Monaco, monospace;
-    font-size: 13px;
     color: #3c3c3c;
     outline: 0;
   }
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index d263d34032..a6a4fea715 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -54,15 +54,15 @@
     }
 
     h1 {
+      @include font-size(24);
       @extend %t-light;
       float: none;
-      font-size: 24px;
     }
 
     h2 {
+      @include font-size(14);
       @extend %t-strong;
       margin-bottom: 18px;
-      font-size: 14px;
       line-height: 30px;
       color: #646464;
       letter-spacing: 1px;
@@ -70,15 +70,15 @@
     }
 
     h3 {
+      @include font-size(16);
       @extend %t-strong;
       margin: 34px 0 11px;
-      font-size: 16px;
     }
   }
 
   .update-contents {
     p {
-      font-size: 16px;
+      @include font-size(16);
       line-height: 25px;
     }
 
@@ -111,10 +111,10 @@
     }
 
     pre {
+      @include font-size(16);
       margin: 1em 0;
       color: $baseFontColor;
       font-family: monospace, serif;
-      font-size: 1em;
       white-space: pre-wrap;
       word-wrap: break-word;
     }
@@ -143,13 +143,13 @@
     float: right;
 
     .edit-button,
-    .delete-button{
+    .delete-button {
+      @include font-size(12);
       @include white-button;
       @extend %t-regular;
       float: left;
       padding: 3px 10px 4px;
       margin-left: 7px;
-      font-size: 12px;
 
       .edit-icon,
       .delete-icon {
@@ -169,18 +169,18 @@
   background: $lightGrey;
 
   .title {
+    @include font-size(22);
     @extend %t-light;
     margin-bottom: 24px;
-    font-size: 22px;
   }
 
   .edit-button {
-    @include white-button;
+    @include white-button();
+    @include font-size(12);
     @extend %t-regular;
     float: right;
     padding: 3px 10px 4px;
     margin-left: 7px;
-    font-size: 12px;
 
     .edit-icon,
     .delete-icon {
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index abb0aecd0b..8f8538e51c 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -367,11 +367,11 @@
 
   .section-item {
     @include transition(background $tmg-avg ease-in-out 0);
+    @include font-size(13);
     position: relative;
     display: block;
     padding: 6px 8px 8px 16px;
     background: #edf1f5;
-    font-size: 13px;
 
     &:hover, &:focus {
       background: $blue-l5;
@@ -388,9 +388,9 @@
     .draft-item:after,
     .public-item:after,
     .private-item:after {
+      @include font-size(9);
       @extend %t-strong;
       margin-left: 3px;
-      font-size: 9px;
       text-transform: uppercase;
     }