Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-10 06:58:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

make tables tabable

Browse Source
This commit is contained in:
Dennis Eichhorn 2020-05-31 18:03:29 +02:00
parent 312f19715a
commit 1dfe21d6e8
6 changed files with 97 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
button.scss
View File

@ -19,7 +19,7 @@ button, input[type="submit"], input[type="button"], a.button {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:hover { &:hover, &:focus {
background: var(--button-colored-background-hover); background: var(--button-colored-background-hover);
} }
} }

4
input.scss
View File

@ -66,7 +66,7 @@ input[type="datetime-local"] {
border: none; border: none;
box-shadow: none; box-shadow: none;
&:hover { &:hover, &:focus {
background: var(--button-colored-background-hover); background: var(--button-colored-background-hover);
} }
} }
@ -219,7 +219,7 @@ input[type="range"] {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
&:hover { &:hover, &:focus {
background: var(--button-colored-background-hover); background: var(--button-colored-background-hover);
} }
} }

73
nav.scss
View File

@ -63,7 +63,7 @@ body > nav {
padding: .5rem 1rem .5rem 1rem; padding: .5rem 1rem .5rem 1rem;
border-left: 3px solid transparent; border-left: 3px solid transparent;
&:hover { &:hover, &:focus {
background: var(--nav-sub-background-hover); background: var(--nav-sub-background-hover);
border-left: 3px solid var(--nav-sub-background-highlight); border-left: 3px solid var(--nav-sub-background-highlight);
} }
@ -74,8 +74,10 @@ body > nav {
background: var(--nav-sub-background); background: var(--nav-sub-background);
} }
&:hover, &.active { a {
background: var(--nav-category-background-hover); &:hover, &.active, &:focus {
background: var(--nav-category-background-hover);
}
} }
} }
@ -116,51 +118,52 @@ body > nav {
display: block; display: block;
> li { > li {
box-shadow: 0 0 10px 3px rgba(90, 71, 114, 0.1);
margin-right: .5rem;
> a { > a {
box-shadow: 0 0 10px 3px rgba(90, 71, 114, 0.1);
margin-right: .5rem;
display: inline-block; display: inline-block;
padding: 10px 10px; padding: 10px 10px;
} }
} }
li { li {
background: #fff;
display: inline-block; display: inline-block;
position: relative; a {
cursor: pointer; background: #fff;
position: relative;
cursor: pointer;
&:hover, &.active { &:hover, &.active, &:focus {
background: var(--nav-content-hover); background: var(--nav-content-hover);
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
> ul {
display: block;
opacity: 1;
visibility: visible;
}
}
> ul { > ul {
display: block; padding: 0;
opacity: 1; z-index: 5;
visibility: visible; position: absolute;
} top: 36px;
} left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
> ul { li {
padding: 0; display: block;
z-index: 5; color: #000;
position: absolute; padding: 7px;
top: 36px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
li { &:hover, &:focus {
display: block; color: #252525;
color: #000; background: var(--nav-content-hover);
padding: 7px; }
&:hover {
color: #252525;
background: var(--nav-content-hover);
} }
} }
} }

90
styles.css
View File

@ -3622,7 +3622,7 @@ input[type="datetime-local"] {
height: auto; height: auto;
border: none; border: none;
box-shadow: none; } box-shadow: none; }
.inputWrapper .textWrapper + input[type=submit]:hover, .inputWrapper .textWrapper + input[type=button]:hover, .inputWrapper .textWrapper + button:hover { .inputWrapper .textWrapper + input[type=submit]:hover, .inputWrapper .textWrapper + input[type=submit]:focus, .inputWrapper .textWrapper + input[type=button]:hover, .inputWrapper .textWrapper + input[type=button]:focus, .inputWrapper .textWrapper + button:hover, .inputWrapper .textWrapper + button:focus {
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover); }
.inputWrapper .textWrapper { .inputWrapper .textWrapper {
flex: 1; flex: 1;
@ -3739,7 +3739,7 @@ input[type="range"] {
vertical-align: middle; vertical-align: middle;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; } flex-shrink: 0; }
.input button:hover { .input button:hover, .input button:focus {
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover); }
.input input { .input input {
box-sizing: border-box; box-sizing: border-box;
@ -3904,7 +3904,7 @@ button, input[type="submit"], input[type="button"], a.button {
box-shadow: none; box-shadow: none;
justify-content: center; justify-content: center;
align-items: center; } align-items: center; }
button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover { button:hover, button:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, a.button:hover, a.button:focus {
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover); }
.unseen { .unseen {
@ -3969,12 +3969,12 @@ body > nav {
display: block; display: block;
padding: .5rem 1rem .5rem 1rem; padding: .5rem 1rem .5rem 1rem;
border-left: 3px solid transparent; } border-left: 3px solid transparent; }
#nav-side > li a:hover { #nav-side > li a:hover, #nav-side > li a:focus {
background: var(--nav-sub-background-hover); background: var(--nav-sub-background-hover);
border-left: 3px solid var(--nav-sub-background-highlight); } border-left: 3px solid var(--nav-sub-background-highlight); }
#nav-side > li li:not(:first-child) { #nav-side > li li:not(:first-child) {
background: var(--nav-sub-background); } background: var(--nav-sub-background); }
#nav-side > li li:hover, #nav-side > li li.active { #nav-side > li li a:hover, #nav-side > li li a.active, #nav-side > li li a:focus {
background: var(--nav-category-background-hover); } background: var(--nav-category-background-hover); }
#nav-side > li li:first-child { #nav-side > li li:first-child {
border-bottom: 1px solid #212628; } border-bottom: 1px solid #212628; }
@ -3996,41 +3996,41 @@ body > nav {
user-select: none; user-select: none;
margin-top: 1rem; margin-top: 1rem;
display: block; } display: block; }
.nav-top > li { .nav-top > li > a {
box-shadow: 0 0 10px 3px rgba(90, 71, 114, 0.1); box-shadow: 0 0 10px 3px rgba(90, 71, 114, 0.1);
margin-right: .5rem; } margin-right: .5rem;
.nav-top > li > a {
display: inline-block;
padding: 10px 10px; }
.nav-top li {
background: #fff;
display: inline-block; display: inline-block;
position: relative; padding: 10px 10px; }
cursor: pointer; } .nav-top li {
.nav-top li:hover, .nav-top li.active { display: inline-block; }
background: var(--nav-content-hover); .nav-top li a {
color: var(--text-on-background-color-2); } background: #fff;
.nav-top li:hover > ul, .nav-top li.active > ul { position: relative;
display: block; cursor: pointer; }
opacity: 1; .nav-top li a:hover, .nav-top li a.active, .nav-top li a:focus {
visibility: visible; } background: var(--nav-content-hover);
.nav-top li > ul { color: var(--text-on-background-color-2); }
padding: 0; .nav-top li a:hover > ul, .nav-top li a.active > ul, .nav-top li a:focus > ul {
z-index: 5; display: block;
position: absolute; opacity: 1;
top: 36px; visibility: visible; }
left: 0; .nav-top li a > ul {
width: 150px; padding: 0;
display: none; z-index: 5;
opacity: 0; position: absolute;
visibility: hidden; } top: 36px;
.nav-top li > ul li { left: 0;
display: block; width: 150px;
color: #000; display: none;
padding: 7px; } opacity: 0;
.nav-top li > ul li:hover { visibility: hidden; }
color: #252525; .nav-top li a > ul li {
background: var(--nav-content-hover); } display: block;
color: #000;
padding: 7px; }
.nav-top li a > ul li:hover, .nav-top li a > ul li:focus {
color: #252525;
background: var(--nav-content-hover); }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
#nav-trigger:not(:checked) + nav { #nav-trigger:not(:checked) + nav {
@ -4247,12 +4247,14 @@ section > h2 {
font-size: 0.9em; font-size: 0.9em;
user-select: none; user-select: none;
cursor: pointer; } cursor: pointer; }
.tabview .tab-links label:hover { .tabview .tab-links label:hover, .tabview .tab-links label:focus {
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover);
.tabview .tab-links .active label:hover { outline: none; }
.tabview .tab-links .active label:hover, .tabview .tab-links .active label:focus {
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover);
outline: none; }
.tabview .tab-links .active a { .tabview .tab-links .active a {
cursor: default; } cursor: default; }
.tabview .tab-links li { .tabview .tab-links li {
@ -4353,12 +4355,14 @@ table.default {
background: var(--table-row-background); } background: var(--table-row-background); }
table.default tbody tr:nth-of-type(2n+1) td { table.default tbody tr:nth-of-type(2n+1) td {
background: var(--table-row-background-alt); } background: var(--table-row-background-alt); }
table.default tbody tr:hover td { table.default tbody tr:hover td, table.default tbody tr:focus td {
background: var(--table-row-background-hover); } background: var(--table-row-background-hover); }
table.default tbody tr td, table.default tbody tr th { table.default tbody tr td, table.default tbody tr th {
border-bottom: 1px solid var(--box-border); } border-bottom: 1px solid var(--box-border); }
table.default tbody tr:last-child td, table.default tbody tr:last-child th { table.default tbody tr:last-child td, table.default tbody tr:last-child th {
border: none; } border: none; }
table.default tbody tr:focus {
outline: none; }
table.default tbody th { table.default tbody th {
background: var(--table-head-background); } background: var(--table-head-background); }
table.default thead { table.default thead {

6
tab.scss
View File

@ -8,15 +8,17 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover, &:focus {
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
background: var(--button-colored-background-hover); background: var(--button-colored-background-hover);
outline: none;
} }
} }
.active label:hover { .active label:hover, .active label:focus {
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
background: var(--button-colored-background-hover); background: var(--button-colored-background-hover);
outline: none;
} }
.active a { .active a {

6
table.scss
View File

@ -63,7 +63,7 @@ table.default {
background: var(--table-row-background-alt); background: var(--table-row-background-alt);
} }
&:hover td { &:hover td, &:focus td {
background: var(--table-row-background-hover); background: var(--table-row-background-hover);
} }
@ -74,6 +74,10 @@ table.default {
&:last-child td, &:last-child th { &:last-child td, &:last-child th {
border: none; border: none;
} }
&:focus {
outline: none;
}
} }
th { th {