diff --git a/uw-frame-components/css/buckyless/md-generated.less b/uw-frame-components/css/buckyless/md-generated.less index 704076eee..80f89315f 100644 --- 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; + } + } } \ No newline at end of file diff --git a/uw-frame-components/css/buckyless/widget.less b/uw-frame-components/css/buckyless/widget.less index 3215c3a83..467925bda 100644 --- 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 index 45a885c9a..2a48716b4 100644 --- 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) {