MDL-53172 core: adjust CSS for inplace_editable

lib/templates/inplace_editable.mustache

@@ -56,7 +56,7 @@
         {{^ linkeverything }}{{{displayvalue}}}{{/ linkeverything }}
         <a href="#" class="quickeditlink" data-inplaceeditablelink="1" title="{{edithint}}">
             {{# linkeverything }}{{{displayvalue}}}{{/ linkeverything }}
-            <span class="quickediticon">{{#pix}}t/editstring,core,{{edithint}}{{/pix}}</span>
+            <span class="quickediticon visibleifjs">{{#pix}}t/editstring,core,{{edithint}}{{/pix}}</span>
         </a>
 </span>
 {{#js}}

theme/base/style/core.css

@@ -751,7 +751,7 @@ span.flagged-tag a,
 tr.flagged-tag a {color:#FF0000;}
 .tag-management-table td,
 .tag-management-table th {vertical-align: middle;padding: 4px;}
-.tag-management-table span.inplaceeditable.inplaceeditingon input {width: 150px;}
+.tag-management-table .inplaceeditable.inplaceeditingon input {width: 150px;}
 .tag_feed .media, .tag_feed .media-body {overflow: hidden;}
 .tag_feed.media-list .media .itemimage {float: left;}
 .dir-rtl .tag_feed.media-list .media .itemimage {float: right;}
@@ -2332,32 +2332,34 @@ body.lockscroll {
     display: inline-block;
 }
 
-span.inplaceeditable.inplaceeditingon {
+.inplaceeditable.inplaceeditingon {
     position: relative;
 }
-span.inplaceeditable.inplaceeditingon span.editinstructions {
+.inplaceeditable.inplaceeditingon .editinstructions {
     margin-top: -30px;
     font-weight: normal;
     margin-right: -300px;
     margin-left: 0;
 }
-.dir-rtl span.inplaceeditable.inplaceeditingon span.editinstructions {
+.dir-rtl .inplaceeditable.inplaceeditingon .editinstructions {
     margin-left: -300px;
     margin-right: 0;
 }
-span.inplaceeditable .quickeditlink img {
+.inplaceeditable .quickeditlink .quickediticon img {
     opacity: 0.2;
 }
-span.inplaceeditable a.quickeditlink {
+.inplaceeditable a.quickeditlink {
     color: inherit;
     text-decoration: inherit;
 }
-span.inplaceeditable.inplaceeditable-toggle .quickeditlink img,
-span.inplaceeditable:hover .quickeditlink img,
-span.inplaceeditable .quickeditlink:focus img {
+.inplaceeditable:hover .quickeditlink .quickediticon img,
+.inplaceeditable .quickeditlink:focus .quickediticon img {
     opacity: 1;
 }
-span.inplaceeditable.inplaceeditingon input {
+.inplaceeditable.inplaceeditable-toggle .quickediticon {
+    display: none;
+}
+.inplaceeditable.inplaceeditingon input {
     width: 330px;
     height: 16px;
     vertical-align: text-bottom;

theme/bootstrapbase/less/moodle/core.less

@@ -826,7 +826,7 @@ tr.flagged-tag a {
     vertical-align: middle;
     padding: 4px;
 }
-.tag-management-table span.inplaceeditable.inplaceeditingon input {
+.tag-management-table .inplaceeditable.inplaceeditingon input {
     width: 150px;
 }
 .path-tag .tag-relatedtags {
@@ -2452,47 +2452,58 @@ span.inplaceeditable.inplaceeditingon span.editinstructions {
     margin-left: -300px;
     margin-right: 0;
 }
-span.inplaceeditable .quickeditlink img {
-    opacity: 0.2;
-}
-span.inplaceeditable a.quickeditlink {
-    color: inherit;
-    text-decoration: inherit;
-}
-span.inplaceeditable.inplaceeditable-toggle .quickeditlink img,
-span.inplaceeditable:hover .quickeditlink img,
-span.inplaceeditable .quickeditlink:focus img {
-    opacity: 1;
-}
-span.inplaceeditable.inplaceeditingon input {
-    width: 330px;
-    height: 16px;
-    vertical-align: text-bottom;
-    margin-bottom: 0;
-}
-span.inplaceeditable select {
-    margin-bottom: 0;
-}
-h3.sectionname span.inplaceeditable.inplaceeditingon span.editinstructions {
-    margin-top: -20px;
-}
-
-
-.jsenabled {
-    .inplaceeditable {
-        .quickediticon {
-            display: inline;
-        }
-        &.inplaceeditable-toggle {
-            .quickediticon {
-                display: none;
-            }
-        }
-    }
-}
 
 .inplaceeditable {
-    .quickediticon {
+
+    &.inplaceeditingon {
+        position: relative;
+
+        .editinstructions {
+            margin-top: -30px;
+            font-weight: normal;
+            margin-right: -300px;
+            margin-left: 0;
+        }
+
+        input {
+            width: 330px;
+            height: 16px;
+            vertical-align: text-bottom;
+            margin-bottom: 0;
+        }
+
+        select {
+            margin-bottom: 0;
+        }
+    }
+
+    .quickediticon img {
+        opacity: 0.2;
+    }
+
+    .quickeditlink {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    &:hover .quickeditlink .quickediticon img,
+    .quickeditlink:focus .quickediticon img {
+        opacity: 1;
+    }
+
+    &.inplaceeditable-toggle .quickediticon {
         display: none;
     }
 }
+
+.dir-rtl .inplaceeditable {
+    &.inplaceeditingon {
+        .editinstructions {
+            margin-left: -300px;
+            margin-right: 0;
+        }
+    }
+}
+h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
+    margin-top: -20px;
+}