edx.org - resolved (in a dirty way) iframed buttons picking up style in IE and…

edx.org - resolved (in a dirty way) iframed buttons picking up style in IE and added in coming soon style treatment

lms/static/sass/_shame.scss

@@ -16,11 +16,12 @@
     display: block;
     padding: $baseline/2 $baseline*2.5;
     text-transform: lowercase;
-    color: $white !important;
+    color: $white;
     letter-spacing: 0.1rem;
     cursor: pointer;
     text-align: center;
     border: none !important;
+    text-decoration: none;
     text-shadow: none;
     letter-spacing: 0.1rem;
     font-size: 17px;
@@ -63,23 +64,24 @@
     }
   }
 
-  // register actions
   .action {
 
-  }
-
-  // not registered (default)
-  .action-register {
-    @extend .btn-primary;
-  }
+    // not registered (default)
+    &.action-register {
+      @extend .btn-primary;
+    }
 
-  // not signed in
-  .is-not-signedin {
-    @extend .btn-primary;
-  }
+    // not open for registration/coming soon
+    &.isnot-open {
+      @extend .btn-secondary;
+      color: #d8d9dc;
+      pointer-events: none !important;
+      outline: none;
+    }
 
-  // already registered
-  .is-registered {
-    @extend .btn-secondary;
+    // already registered
+    &.is-registered {
+      @extend .btn-secondary;
+    }
   }
 }

lms/static/sass/base/_base.scss

@@ -88,7 +88,7 @@ a:link, a:visited {
   width: flex-grid(12);
   margin: 0 auto;
   padding-bottom: ($baseline*2);
-  background: rgb(255,255,255);  
+  background: rgb(255,255,255);
 }
 
 .container {
@@ -210,4 +210,4 @@ mark {
 
 .sr {
   @include text-sr();
-}
\ No newline at end of file
+}

lms/templates/courseware/mktg_coming_soon.html

@@ -23,7 +23,7 @@
 
   <ul class="list-actions register">
     <li class="item">
-      <a class="action action-register is-registered" href="#">Coming Soon</a>
+      <a class="action action-register isnot-open" href="">Coming Soon</a>
     </li>
   </ul>
 

lms/templates/courseware/mktg_course_about.html

@@ -69,11 +69,11 @@
             <a class="action action-register is-registered" href="${course_target}">Registered for <strong>${course.number}</strong></a>
           %else:
           <!-- signed in, not registered -->
-            <a href="" class="action action-register register">Register for ${course.number}</a> <div id="register_message"></div>
+            <a href="" class="action action-register">Register for ${course.number}</a> <div id="register_message"></div>
           %endif
         %else:
         <!-- not signed in -->
-            <a class="action action-register is-not-signedin" href="${reverse('register_user')}">Register for <strong>${course.number}</strong></a>
+            <a class="action action-register" href="${reverse('register_user')}">Register for <strong>${course.number}</strong></a>
         %endif
     </li>
   </ul>

lms/templates/mktg_iframe.html

@@ -24,6 +24,14 @@
   % if not course:
   <%include file="google_analytics.html" />
   % endif
+
+  <!-- repeated button styles needed for IE (copied from _shame.scss) -->
+  <style type="text/css" media="screen">
+
+    .view-partial-mktgregister{background:transparent}.view-partial-mktgregister .wrapper-view{overflow:hidden}.view-partial-mktgregister .btn,.view-partial-mktgregister .btn-primary,.view-partial-mktgregister .action.action-register,.view-partial-mktgregister .btn-secondary,.view-partial-mktgregister .action.isnot-open,.view-partial-mktgregister .action.is-registered{display:block;padding:10px 50px;text-transform:lowercase;color:#fff;letter-spacing:0.1rem;cursor:pointer;text-align:center;border:none !important;text-decoration:none;text-shadow:none;letter-spacing:0.1rem;font-size:17px;font-weight:300;box-shadow:0 !important}.view-partial-mktgregister .btn strong,.view-partial-mktgregister .btn-primary strong,.view-partial-mktgregister .action.action-register strong,.view-partial-mktgregister .btn-secondary strong,.view-partial-mktgregister .action.isnot-open strong,.view-partial-mktgregister .action.is-registered strong{font-weight:400}.view-partial-mktgregister .btn-primary,.view-partial-mktgregister .action.action-register{background-color:#4697ec;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #4697ec),color-stop(95%, #4880bb));background-image:-webkit-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:-moz-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:-ms-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:-o-linear-gradient(top, #4697ec 5%,#4880bb 95%);background-image:linear-gradient(top, #4697ec 5%,#4880bb 95%)}.view-partial-mktgregister .btn-secondary,.view-partial-mktgregister .action.isnot-open,.view-partial-mktgregister .action.is-registered{background-color:#999;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #999),color-stop(95%, #666));background-image:-webkit-linear-gradient(top, #999 5%,#666 95%);background-image:-moz-linear-gradient(top, #999 5%,#666 95%);background-image:-ms-linear-gradient(top, #999 5%,#666 95%);background-image:-o-linear-gradient(top, #999 5%,#666 95%);background-image:linear-gradient(top, #999 5%,#666 95%)}.view-partial-mktgregister .list-actions{list-style:none;margin:0;padding:0}.view-partial-mktgregister .list-actions .item{margin:0}.view-partial-mktgregister .action.isnot-open{color:#d8d9dc;pointer-events:none !important;outline:none}
+
+
+  </style>
 </head>
 
 <body class="<%block name='bodyclass'></%block>">