MDL-64230 files: focus and hover css
authorDamyon Wiese <damyon@moodle.com>
Thu, 28 Feb 2019 03:14:05 +0000 (11:14 +0800)
committerJun Pataleta <jun@moodle.com>
Fri, 8 Mar 2019 06:48:50 +0000 (14:48 +0800)
Show the full filename when an element has focus or hover on the parent element.

theme/boost/scss/moodle/filemanager.scss
theme/boost/style/moodle.css
theme/bootstrapbase/less/moodle/filemanager.less
theme/bootstrapbase/style/moodle.css

index 1c9bd8f..18f4d49 100644 (file)
     position: absolute;
 }
 
-.fp-iconview .fp-filename-field:hover {
-    overflow: visible;
-    z-index: 1000;
+.fp-iconview .fp-file:focus,
+.fp-iconview .fp-file:hover {
+    // Undo truncating of text on hover.
+    .fp-filename-field {
+        overflow: visible;
+        z-index: 1000;
+    }
+    .fp-filename {
+        overflow: inherit;
+        white-space: normal;
+        text-overflow: inherit;
+    }
 }
 
 .fp-iconview .fp-filename-field .fp-filename {
     padding-top: 5px;
     padding-bottom: 12px;
     min-width: 112px;
-    // Undo truncating of text on hover.
-    &:hover {
-        overflow: inherit;
-        white-space: normal;
-        text-overflow: inherit;
-    }
 }
 // Table view (File Picker only)
 .file-picker .yui3-datatable table {
index c21b182..f50e221 100644 (file)
@@ -12736,19 +12736,22 @@ body.drawer-ease {
   overflow: hidden;
   position: absolute; }
 
-.fp-iconview .fp-filename-field:hover {
+.fp-iconview .fp-file:focus .fp-filename-field,
+.fp-iconview .fp-file:hover .fp-filename-field {
   overflow: visible;
   z-index: 1000; }
 
+.fp-iconview .fp-file:focus .fp-filename,
+.fp-iconview .fp-file:hover .fp-filename {
+  overflow: inherit;
+  white-space: normal;
+  text-overflow: inherit; }
+
 .fp-iconview .fp-filename-field .fp-filename {
   background: #fff;
   padding-top: 5px;
   padding-bottom: 12px;
   min-width: 112px; }
-  .fp-iconview .fp-filename-field .fp-filename:hover {
-    overflow: inherit;
-    white-space: normal;
-    text-overflow: inherit; }
 
 .file-picker .yui3-datatable table {
   border: 0 solid #bbb;
index e4c5b94..1bf70aa 100644 (file)
     overflow: hidden;
     position: absolute;
 }
-.fp-iconview .fp-filename-field:hover {
-    overflow: visible;
-    z-index: 1000;
+.fp-iconview .fp-file:focus,
+.fp-iconview .fp-file:hover {
+    // Undo truncating of text on hover of focus.
+    .fp-filename-field {
+        overflow: visible;
+        z-index: 1000;
+    }
+    .fp-filename {
+        overflow: inherit;
+        white-space: normal;
+        text-overflow: unset;
+    }
 }
 .fp-iconview .fp-filename-field .fp-filename {
     background: #fff;
     padding-top: 5px;
     padding-bottom: 12px;
     min-width: 112px;
-    // Undo truncating of text on hover.
-    &:hover {
-        overflow: inherit;
-        white-space: normal;
-        text-overflow: unset;
-    }
 }
 
 // Table view (File Picker only)
index 76e6706..5c57a11 100644 (file)
@@ -7371,21 +7371,23 @@ span.editinstructions {
   overflow: hidden;
   position: absolute;
 }
-.fp-iconview .fp-filename-field:hover {
+.fp-iconview .fp-file:focus .fp-filename-field,
+.fp-iconview .fp-file:hover .fp-filename-field {
   overflow: visible;
   z-index: 1000;
 }
+.fp-iconview .fp-file:focus .fp-filename,
+.fp-iconview .fp-file:hover .fp-filename {
+  overflow: inherit;
+  white-space: normal;
+  text-overflow: unset;
+}
 .fp-iconview .fp-filename-field .fp-filename {
   background: #fff;
   padding-top: 5px;
   padding-bottom: 12px;
   min-width: 112px;
 }
-.fp-iconview .fp-filename-field .fp-filename:hover {
-  overflow: inherit;
-  white-space: normal;
-  text-overflow: unset;
-}
 .file-picker .yui3-datatable table {
   border: 0 solid #bbb;
   width: 100%;