}
/* search input */
- & + .dropdown {
+ & + .dropdown, & + input[type="text"] {
display: block;
margin-top: 20px;
}
.aclPermissionList {
margin-top: 40px;
position: relative;
+ display: grid;
+ column-gap: 1px;
+ grid-template-columns: 10px auto repeat(3, 60px);
+ grid-template-rows: auto;
- &::after,
- &::before {
- min-width: 60px;
- position: absolute;
- text-align: center;
- top: -5px;
- transform: translateY(-100%);
+ > div {
+ grid-column: 1 / span 5;
+ transition: background-color 0.2s;
- @include wcfFontSmall;
- }
+ &:not(:last-child):not(:first-child) {
+ border-bottom: 1px solid var(--wcfContentBorderInner);
+ }
- &::after {
- content: attr(data-deny);
- right: 0;
- }
+ &:nth-child(2) {
+ border-top: 1px solid var(--wcfContentBorder);
+ }
+
+ &:last-child {
+ border-bottom: 1px solid var(--wcfContentBorder);
+ }
+
+ &:hover {
+ background-color: var(--wcfTabularBoxBackgroundActive);
+ }
- &::before {
- content: attr(data-grant);
- right: 80px;
- }
- > li {
&.aclCategory {
padding: 20px 10px 10px 0;
}
&:not(.aclCategory) {
- display: flex;
padding: 10px 0;
+ display: grid;
+ grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
}
- > span {
- flex: 1 1 auto;
- padding-left: 10px;
+ &.aclHeader {
+ display: grid;
+ grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
+
+ > span {
+ text-align: center;
+ @include wcfFontSmall;
+
+ &.inherited {
+ grid-column-start: 3;
+ }
+
+ &.grant {
+ grid-column-start: 4;
+ }
+
+ &.deny {
+ grid-column-start: 5;
+ }
+ }
+
+ &:hover {
+ background-color: transparent;
+ }
}
- > label {
- cursor: pointer;
- flex: 0 0 auto;
- padding: 0 20px;
+ &:not(.aclHeader) {
+ > span {
+ grid-column: span 2;
+ grid-column-start: 2;
+ }
- & + label {
- margin-left: 20px;
+ > label {
+ text-align: center;
+ cursor: pointer;
}
}
}