-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Separate grid and table layout styles from
item-table
- Loading branch information
Showing
4 changed files
with
117 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,42 @@ | ||
| // HostGroup- and -ServiceGroupGrid styles | ||
| .content.full-width { | ||
| ul.item-table { | ||
| &.group-grid { | ||
|
|
||
| margin-left: 1em; | ||
| grid-template-columns: repeat(auto-fit, 15em); | ||
| column-gap: 2em; | ||
|
|
||
| li.group-grid-cell { | ||
| .title { | ||
| border: unset; | ||
| align-items: center; | ||
|
|
||
| > .visual { | ||
| margin-right: 1em; | ||
|
|
||
| .state-badge { | ||
| width: 2.5em; | ||
| height: 2.5em; | ||
| padding: unset; | ||
| line-height: 2.5; | ||
|
|
||
| &.state-empty { | ||
| background-color: @gray-light; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > .content a { | ||
| line-height: 2; | ||
| display: inline-block; | ||
| max-width: 10em; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| text-align: center; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > li.table-row::before, | ||
| > li.table-row::after { | ||
| padding: unset; | ||
| content: unset; | ||
| ul.item-table.group-grid { | ||
| grid-template-columns: repeat(auto-fit, 15em); | ||
| grid-gap: 1em 2em; | ||
|
|
||
| .table-row { | ||
| margin: -.25em; | ||
| padding: .25em; | ||
| border-radius: .5em; | ||
| } | ||
|
|
||
| li.group-grid-cell { | ||
| .title { | ||
| align-items: center; | ||
| } | ||
|
|
||
| .visual { | ||
| margin-right: 1em; | ||
| } | ||
|
|
||
| .content { | ||
| line-height: 1; | ||
|
|
||
| a { | ||
| display: inline-block; | ||
| max-width: 10em; | ||
| text-align: center; | ||
| } | ||
| } | ||
|
|
||
| .state-badge { | ||
| width: 2.5em; | ||
| height: 2.5em; | ||
| line-height: 2; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .content.full-width ul.item-table.group-grid { | ||
| margin: 0 1em; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| // HostGroup- and -ServiceGroupTable styles | ||
|
|
||
| .item-table.table-layout { | ||
| --columns: 1; | ||
| } | ||
|
|
||
| ul.item-table.table-layout { | ||
| grid-template-columns: 1fr repeat(var(--columns), auto); | ||
|
|
||
| > li { | ||
| display: contents; | ||
|
|
||
| &:hover, | ||
| &.active { | ||
| .col, &::before, &::after { | ||
| // The li might get a background on hover. Though, this won't be visible | ||
| // as it has no box model since we apply display:contents to it. | ||
| background-color: inherit; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| li:not(:last-of-type) { | ||
| .col { | ||
| border-bottom: 1px solid @gray-light; | ||
| } | ||
|
|
||
| .visual { | ||
| border-bottom: 1px solid @default-bg; | ||
| } | ||
| } | ||
|
|
||
| > .table-row { | ||
| &:not(:last-of-type) .title .visual { | ||
| margin-bottom: ~"calc(-.5em - 1px)"; | ||
| } | ||
|
|
||
| .col { | ||
| padding: .5em 0; | ||
| } | ||
|
|
||
| .col:not(:last-child) { | ||
| padding-right: 1em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .content.full-width ul.item-table.table-layout { | ||
| // Again, since the li has no box model, it cannot have padding. So the first | ||
| // and last child need to get the left and right padding respectively. | ||
| // But we don't want to have a border that spans to the very right or left, | ||
| // so pseudo elements are required. We could add empty cells instead, but | ||
| // that would require hard coding the width here, which I'd like to avoid. | ||
|
|
||
| grid-template-columns: ~"auto 1fr repeat(calc(var(--columns) + 1), auto)"; | ||
|
|
||
| > li.table-row { | ||
| &::before, &::after { | ||
| display: inline-block; | ||
| content: '\00a0'; | ||
| margin-bottom: 1px; | ||
| } | ||
|
|
||
| &::before { | ||
| padding-left: inherit; | ||
| } | ||
|
|
||
| &::after { | ||
| padding-right: inherit; | ||
| } | ||
| } | ||
| } |