diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less index 77eba94b6d..5158d32304 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less @@ -11,4 +11,5 @@ animation: fadeIn; margin-top: 15px; pointer-events: none; + border-radius: 3px; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less index 2a4a3be2e4..84cfe04263 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less @@ -15,21 +15,35 @@ border-radius: 3px; } -.umb-content-grid__item.-selected { - &::before { - content: ""; - position: absolute; - z-index:2; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - border: 2px solid @ui-selected-border; - border-radius: 5px; - box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); - pointer-events: none; +.umb-content-grid__item { + &.-selected, &:hover { + &::before { + content: ""; + position: absolute; + z-index: 2; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid @ui-selected-border; + border-radius: 5px; + box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); + pointer-events: none; + } + + } +} + + +.umb-content-grid__item:hover { + &::before { + opacity: .33; + } +} +.umb-content-grid__item.-selected:hover { + &::before { + opacity: .75; } - } .umb-content-grid__icon-container { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less index ffdd4d9322..6a93a10e9f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less @@ -27,7 +27,12 @@ .umb-folder-grid__folder.-selected { color:@ui-selected-type; - + &:hover { + color:@ui-selected-type-hover; + } +} + +.umb-folder-grid__folder.-selected, .umb-folder-grid__folder:hover { &::before { content: ""; position: absolute; @@ -41,9 +46,15 @@ box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); pointer-events: none; } - - &:hover { - color:@ui-selected-type-hover; +} +.umb-folder-grid__folder:hover { + &::before { + opacity: .33; + } +} +.umb-folder-grid__folder.-selected:hover { + &::before { + opacity: .75; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less index 7a6cd043a4..83692d468f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less @@ -38,12 +38,12 @@ } .umb-media-grid__item.-selected { - - //background: @ui-selected; color:@ui-selected-type; - //border-color: @ui-selected-border; - //box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20); - + .umb-media-grid__item-overlay { + color: @ui-selected-type; + } +} +.umb-media-grid__item.-selected, .umb-media-grid__item:hover { &::before { content: ""; position: absolute; @@ -57,12 +57,16 @@ box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); pointer-events: none; } - - .umb-media-grid__item-overlay { - color: @ui-selected-type; - //background: @ui-selected-border; +} +.umb-media-grid__item:hover { + &::before { + opacity: .33; + } +} +.umb-media-grid__item.-selected:hover { + &::before { + opacity: .75; } - } .umb-media-grid__item-file-icon > span { @@ -158,6 +162,9 @@ .umb-media-grid__item:hover .umb-media-grid__item-overlay { opacity: 1; + i { + text-decoration: none; + } } .umb-media-grid__item-name { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less index 15cb007a01..6674e01475 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less @@ -96,12 +96,34 @@ input.umb-table__input { min-height: 52px; } .umb-table-body .umb-table-row.-selectable { - cursor: pointer; - +} +.umb-table-row.-selected, +.umb-table-body .umb-table-row.-selectable:hover { + &::before { + content: ""; + position: absolute; + z-index:1; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border: 2px solid @ui-selected-border; + pointer-events: none; + } +} +.umb-table-body .umb-table-row.-selectable { &:hover { - //background-color: @ui-option-hover; - + &::before { + opacity:.33; + } + } +} +.umb-table-body .umb-table-row.-selected.-selectable { + &:hover { + &::before { + opacity:.66; + } } } @@ -176,7 +198,7 @@ input.umb-table__input { } // Show checkmark when checked, hide file icon -.umb-table-row--selected { +.umb-table-row.-selected { .umb-table-body__fileicon { display: none; @@ -185,18 +207,6 @@ input.umb-table__input { display: inline-block; } - &::before { - content: ""; - position: absolute; - z-index:1; - top: 1px; - left: 1px; - right: 1px; - bottom: 1px; - border: 2px solid @ui-selected-border; - box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%); - pointer-events: none; - } } // Table Row Styles diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less index 190f977880..3bc431e01f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less @@ -21,7 +21,7 @@ .umb-user-card.-selectable { cursor: pointer; } -.umb-user-card.-selected { +.umb-user-card.-selected, .umb-user-card.-selectable:hover { &::before { content: ""; position: absolute; @@ -30,10 +30,20 @@ left: -2px; right: -2px; bottom: -2px; - border: 2px solid @ui-selected-border; border-radius: 5px; - box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); pointer-events: none; + border: 2px solid @ui-selected-border; + box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); + } +} +.umb-user-card.-selectable:hover { + &::before { + opacity: .33; + } +} +.umb-user-card.-selected:hover { + &::before { + opacity: .75; } } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html index 317b0f9684..55d7bd0744 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html @@ -63,7 +63,7 @@