studio - adding in info icon to page intro help and making icon classes…

studio - adding in info icon to page intro help and making icon classes consistent in all new references

cms/static/sass/_base.scss

@@ -248,6 +248,13 @@ h1 {
         width: flex-grid(4,12);
         display: block;
         text-align: right;
+
+        .icon {
+          @include font-size(14);
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: ($baseline/4);
+        }
       }
     }
   }

cms/static/sass/_static-pages.scss

@@ -28,8 +28,9 @@
     border-radius: 0;
 
     &.new-component-item {
-      margin-top: 20px;
       background: transparent;
+      border: none;
+      @include box-shadow(none);
     }
   }
 

cms/templates/course_info.html

@@ -53,7 +53,7 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class=" button new-button new-update-button"><i class="ss-icon ss-symbolicons-standard icon-create">&#x002B;</i> New Update</a>
+            <a href="#" class=" button new-button new-update-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Update</a>
           </li>
         </ul>
       </nav>

cms/templates/edit-tabs.html

@@ -27,7 +27,7 @@
       <h3 class="sr">Page Actions</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="button new-button new-tab"><i class="ss-icon ss-symbolicons-standard icon-create">&#x002B;</i> New Page</a>
+          <a href="#" class="button new-button new-tab"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Page</a>
         </li>
       </ul>
     </nav>
@@ -41,7 +41,7 @@
       <nav class="nav-introduction-supplementary">
         <ul>
           <li class="nav-item">
-            <a rel="modal" href="#preview-lms-staticpages">How do Static Tabs look to students in my course?</a>
+            <a rel="modal" href="#preview-lms-staticpages"><i class="ss-icon ss-symbolicons-block icon icon-information">&#x2753;</i>How do Static Tabs look to students in my course?</a>
           </li>
         </ul>
       </nav>
@@ -76,7 +76,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <i class="ss-icon ss-symbolicons-block icon-close icon">&#x2421;</i>
     <span class="label">close modal</span>
   </a>
 </div>

cms/templates/howitworks.html

@@ -28,7 +28,7 @@
             <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
             <figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
             <span class="action-zoom">
-              <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+              <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
             </span>
           </a>
         </figure>
@@ -62,7 +62,7 @@
           <img src="/static/img/thumb-hiw-feature2.png" alt="Learning is More than Just Lectures" />
           <figcaption class="sr">Learning is More than Just Lectures</figcaption>
           <span class="action-zoom">
-            <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+            <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
           </span>
         </a>
         </figure>
@@ -96,7 +96,7 @@
             <img src="/static/img/thumb-hiw-feature3.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
             <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
             <span class="action-zoom">
-              <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+              <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
             </span>
           </a>
         </figure>
@@ -152,7 +152,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
     <span class="label">close modal</span>
   </a>
 </div>
@@ -165,7 +165,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
     <span class="label">close modal</span>
   </a>
 </div>
@@ -178,7 +178,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
     <span class="label">close modal</span>
   </a>
 </div>

cms/templates/overview.html

@@ -131,7 +131,7 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
+            <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block icon">up</i> <span class="label">Collapse All Sections</span></a>
           </li>
           <li class="nav-item">
             <a href="#" class="button new-button new-courseware-section-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Section</a>