From e29007bca98631655752ce0a1902223e7c0bfda0 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger <hello@saschaeggenberger.com> Date: Sun, 9 Jun 2024 23:34:53 +0200 Subject: [PATCH] Increase visibility of table sorting --- dist/css/base/gin.css | 30 ++++++++++++++++++++++++++++-- dist/css/theme/accent.css | 1 + dist/media/sprite.svg | Bin 33690 -> 33141 bytes styles/base/_table.scss | 29 +++++++++++++++++++++++------ styles/helpers/_svg-sprite.scss | 5 ----- styles/theme/accent.scss | 1 + 6 files changed, 53 insertions(+), 13 deletions(-) diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css index 258ae1820..0b6294f14 100644 --- a/dist/css/base/gin.css +++ b/dist/css/base/gin.css @@ -1439,6 +1439,10 @@ table.position-sticky thead { position: static; } +table.position-sticky.--is-processed thead { + pointer-events: none; +} + table.position-sticky.--is-processed thead tr { border-color: transparent; } @@ -1495,7 +1499,7 @@ table .draggable-table.tabledrag-disabled tr { table tr:hover, table .draggable-table.tabledrag-disabled tr:hover { color: var(--gin-color-text); - background: var(--gin-bg-item-hover); + background: var(--gin-bg-item); } table tr.selected:hover, @@ -1508,7 +1512,7 @@ table .draggable-table.tabledrag-disabled tr.selected:hover { } table tr.selected td { - background-color: var(--gin-color-primary-light); + background-color: var(--gin-bg-item-hover); } table td a { @@ -1549,11 +1553,33 @@ table td .group-label { } } +.sortable-heading.is-active > a::before, +.sortable-heading > a:hover::before { + width: 100%; +} + +[dir="ltr"] .sortable-heading.is-active > a::before, +[dir="ltr"] .sortable-heading > a:hover::before { + left: 0; +} + +[dir="rtl"] .sortable-heading.is-active > a::before, +[dir="rtl"] .sortable-heading > a:hover::before { + right: 0; +} + +.sortable-heading > a:hover::before { + border-bottom-width: 3px; +} + .sortable-heading.is-active > a, .sortable-heading.is-active > a:hover, .sortable-heading.is-active > a:active { color: var(--gin-color-primary-active); } .sortable-heading.is-active > a::before { + background-color: var(--gin-bg-item); + border-top-left-radius: var(--gin-border-s); + border-top-right-radius: var(--gin-border-s); border-bottom: .1875rem solid var(--gin-color-primary-active); } diff --git a/dist/css/theme/accent.css b/dist/css/theme/accent.css index 34a74bbea..9f7f9a9fd 100644 --- a/dist/css/theme/accent.css +++ b/dist/css/theme/accent.css @@ -2,6 +2,7 @@ --gin-color-primary: rgb(var(--gin-color-primary-rgb)); --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15); --gin-bg-app: rgb(var(--gin-bg-app-rgb)); + --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05); --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1); --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2); --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3); diff --git a/dist/media/sprite.svg b/dist/media/sprite.svg index 45c2b6466c7adb6c20d90f0254362b1121c9cad2..dc6af66074727233c3c526fc9abf586fb5001239 100644 GIT binary patch delta 321 zcmbQ$&h)j3X@h_A=8{ws#>t5eYLm~U$xIGSmE6pnevf(biZqSMoY@kSU!_THw$3(S zocth5Yx2|_@yQC=5|fYQykIn(ypUIQ@}*pf$!l{YHZ$c-V`4O(e2`Cd^1cG8$**$7 zC%-RvI(bHc+T>q_GLvr<h;P;{a%P--xln!b^kRw0qD2yuj~8E>Tv)6&d4GxQ<PF6V zo4=G;GBO&2jSVi7n0%*1d~;J7JL6<W1@*}r%H<|!mx)h)T7Hko%wqBbDb>lZDpV$) zEmxgvTzPTwkqYC<=2ha8`76aYr&fh9O=hW5n|!}UYO-II_-27xZAL~@u(^qK(vyGI zh;N=;x0aE~+#KxQ^ah#9)pZh^XE)d|PIhcioBX#?a&k+9_-5TEX~xOd8`UP~HA@Q` RnJ9pflD?gdesNj49RRhWfW80# delta 626 zcmey`#5Aj&X@h?<n{H-aQhvqci=_(nmU<=%Muy3H=6Yrdh9In91R{$K^(=KkQhH{( zhQ5Xt3Kq!*x`ujYx_V~1#(IXjhI$sdCVEEBhNgOk5FN&PW(r0MhDHiT#UK@WW*~V5 zLp_UNGX*m}69qGn5egu^dKL<%dPcg2dgcmd^&lh76%4_ALy&S^Lp=~}sbHX>XQXGS zXRK$WX98wffUHu`Gt4kF)-y^r)H6~r0BHb|mb!X|dWImvNLSBD&q!C#q*zzaL|4xO zWS*{}o~5&)g`R~1NUMUOg@Pg277GPNi^+_!EquxOxw)xD$*ItQsYx+og#^*Y6y439 z$ySVvW|KE6sZL&*A~X3<hScW!DR-GCyJu-mewraZxg$$_vv8&{<K(t%^~t$eQj?El zOHN*p^?Y)1p8Di<+2WHo=ZSB=lRcej@_i|_$usk$CV$KqpL{CsDWe70(5v|}le-JW zH**v?GfplpQlDH@C^30kk>upXg%>Atl&DXhT_iKvtwenDxgsmZ$tk63ll4j@Ca)|N z-yB=Q&d6vn`GJ(`<gQZr$*;;(CZ8?6$Y?%!Vu0G@qh%_SH7X<~A1LLW%vXMK@{}sI z$*dJBldn{XZ+55%VVW#fqc(Y0mDJ?$8u87qtF##z%_kq^Q=M#6BRx63PJDA-&05CE z8|&34JJrcd{!lNmxvb8Hak6rw+T<Jcl9M-viErj;kY;2uv6%c&N@cQVqqLxjg@TcZ Qf{}@mzMYMJaap<@01*4cv;Y7A diff --git a/styles/base/_table.scss b/styles/base/_table.scss index b09603d77..da5bd7194 100644 --- a/styles/base/_table.scss +++ b/styles/base/_table.scss @@ -74,11 +74,15 @@ table.position-sticky { position: static; } - &.--is-processed thead tr { - border-color: transparent; + &.--is-processed thead { + pointer-events: none; - .sortable-heading.is-active > a::before { - display: none; + tr { + border-color: transparent; + + .sortable-heading.is-active > a::before { + display: none; + } } } } @@ -130,7 +134,7 @@ table { &:hover { color: var(--gin-color-text); - background: var(--gin-bg-item-hover); + background: var(--gin-bg-item); } &.selected:hover { @@ -144,7 +148,7 @@ table { } td { - background-color: var(--gin-color-primary-light); + background-color: var(--gin-bg-item-hover); } } @@ -182,12 +186,25 @@ table { } } + &.is-active > a::before, + > a:hover::before { + width: 100%; + left: 0; + } + + > a:hover::before { + border-bottom-width: 3px; + } + &.is-active > a { &, &:hover, &:active { color: var(--gin-color-primary-active); } &::before { + background-color: var(--gin-bg-item); + border-top-left-radius: var(--gin-border-s); + border-top-right-radius: var(--gin-border-s); border-bottom: .1875rem solid var(--gin-color-primary-active); } } diff --git a/styles/helpers/_svg-sprite.scss b/styles/helpers/_svg-sprite.scss index 6f739eb81..349e0a6a7 100644 --- a/styles/helpers/_svg-sprite.scss +++ b/styles/helpers/_svg-sprite.scss @@ -59,7 +59,6 @@ $sprites: ( 'user': "../../media/sprite.svg#user-view", 'appearance': "../../media/sprite.svg#appearance-view", 'bat': "../../media/sprite.svg#bat-view", - 'commerce-inbox': "../../media/sprite.svg#commerce-inbox-view", 'commerce': "../../media/sprite.svg#commerce-view", 'config': "../../media/sprite.svg#config-view", 'content': "../../media/sprite.svg#content-view", @@ -320,10 +319,6 @@ $sizes: ( 'width': 24px, 'height': 24px ), - 'commerce-inbox': ( - 'width': 24px, - 'height': 24px - ), 'commerce': ( 'width': 24px, 'height': 24px diff --git a/styles/theme/accent.scss b/styles/theme/accent.scss index 8addb5a7a..2666422e2 100644 --- a/styles/theme/accent.scss +++ b/styles/theme/accent.scss @@ -2,6 +2,7 @@ --gin-color-primary: rgb(var(--gin-color-primary-rgb)); --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15); --gin-bg-app: rgb(var(--gin-bg-app-rgb)); + --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05); --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1); --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2); --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3); -- GitLab