Merge pull request #331 from thevoiceofzeke/widgets

Add styles for widget action tooltips
uPortal-Attic · Oct 6, 2016 · df3e87a · df3e87a
2 parents 01bd6aa + 088bf74
commit df3e87a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 37 deletions.
diff --git a/uw-frame-components/css/buckyless/md-generated.less b/uw-frame-components/css/buckyless/md-generated.less
@@ -84,4 +84,20 @@ md-menu-content.mascot-menu-content {
       }
     }
   }
+}
+
+md-tooltip.widget-action-tooltip {
+  max-width: 250px;
+  .md-content {
+    background: rgba(0,0,0,0.7);
+    white-space: normal;
+    height: auto;
+    line-height: 18px;
+    font-size: 12px;
+    padding: 4px 8px;
+    @media (max-width: 600px) {
+      line-height: 20px;
+      padding: 4px 8px;
+    }
+  }
 }
diff --git a/uw-frame-components/css/buckyless/widget.less b/uw-frame-components/css/buckyless/widget.less
@@ -100,45 +100,27 @@
   }
 }
 
-
-
-
-.list-content .widget-info,
-.list-content .widget-remove,
-.widget-frame .widget-info,
-.widget-frame .widget-remove {
-  display:none;
-  .tooltip-inner {
-    max-width:200px;
-    width:200px;
-  }
-}
-.list-content:hover,
-.widget-frame:hover {
-  .widget-info {
-    display:inline;
-    position:absolute;
-    left:8px;
-    top:3px;
-    i {
-      color:@grayscale6;
-      &:hover {
-        cursor:pointer;
-        color:@grayscale8;
-      }
+.list-content, .widget-frame {
+  .widget-action {
+    position: absolute;
+    display: inline;
+    opacity: 0;
+    top: 0;
+    margin: 0;
+    transition: @opacity-transition;
+    &.widget-info {
+      left: 0;
+    }
+    &.widget-remove {
+      right: 0;
+    }
+    .material-icons {
+      font-size: 18px;
     }
   }
-}
-.widget-remove {
-  display:inline;
-  position:absolute;
-  right:8px;
-  top:3px;
-  i {
-    color:@grayscale6;
-    &:hover {
-      cursor:pointer;
-      color:@grayscale8;
+  &:hover {
+    .widget-action {
+      opacity: 1;
     }
   }
 }

diff --git a/uw-frame-components/css/themes/common-variables.less b/uw-frame-components/css/themes/common-variables.less
@@ -33,6 +33,7 @@
 @link-hover-transition: color .4s cubic-bezier(.25,.8,.25,1);
 @background-transition: background-color .4s cubic-bezier(.25,.8,.25,1);
 @mascot-transition: all .4s cubic-bezier(.25,.8,.25,1);
+@opacity-transition: opacity .4s cubic-bezier(.25,.8,.25,1);
 
 /* Custom mix-ins */
  .border (@color: @grayscale3, @size: 1px) {