mirror of
https://github.com/status-im/consul.git
synced 2025-01-10 05:45:46 +00:00
d0405ba8b9
* Move almost everything to use %frames * Fix pill styles of ACL types * Remove horizontal scrollbars from dom recycling scroller component * Make text areas look ok in Firefox * Remove ember-bulma-css * New form elements, break out %toggle * %button design tweaks * %form-element design tweaks * Better hashicorp logo * Small screen CSS improvements (#4624) 1. Reduce header size when there are no breadcrumbs 2. Make the filters toggleable, closed by default 3. Reduce the size of the footer on small screens 4. Hide all non-primary columns for forms 5. Slightly change the layout of various items, mainly buttons within forms 6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small screens
157 lines
2.7 KiB
SCSS
157 lines
2.7 KiB
SCSS
@import './icons/index';
|
|
td.folder {
|
|
@extend %with-folder;
|
|
}
|
|
td dt.passing {
|
|
@extend %with-passing;
|
|
}
|
|
td dt.warning {
|
|
@extend %with-warning;
|
|
}
|
|
td dt.critical {
|
|
@extend %with-critical;
|
|
}
|
|
td span.zero {
|
|
@extend %with-no-healthchecks;
|
|
display: block;
|
|
text-indent: 20px;
|
|
color: $ui-gray-400;
|
|
}
|
|
table:not(.sessions) tr {
|
|
cursor: pointer;
|
|
}
|
|
th,
|
|
td {
|
|
border-bottom: $decor-border-100;
|
|
}
|
|
td dt.passing,
|
|
td dt.passing + dd {
|
|
color: $ui-color-success;
|
|
}
|
|
td dt.warning,
|
|
td dt.warning + dd {
|
|
color: $ui-color-alert;
|
|
}
|
|
td dt.critical,
|
|
td dt.critical + dd {
|
|
color: $ui-color-failure;
|
|
}
|
|
th {
|
|
color: $ui-gray-400 !important;
|
|
}
|
|
th {
|
|
border-color: $keyline-dark;
|
|
}
|
|
td {
|
|
border-color: $keyline-mid;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
}
|
|
td button {
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
th.actions input {
|
|
display: none;
|
|
}
|
|
th.actions {
|
|
text-align: right;
|
|
}
|
|
td.actions .with-confirmation.confirming {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
table th {
|
|
padding-bottom: 0.6em;
|
|
}
|
|
table td,
|
|
table td a {
|
|
padding: 0.9em 0;
|
|
}
|
|
table th,
|
|
table td:not(.actions),
|
|
table td a {
|
|
padding-right: 0.9em;
|
|
}
|
|
table:not(.sessions) td:first-child {
|
|
padding: 0;
|
|
}
|
|
table td a {
|
|
display: block;
|
|
}
|
|
tbody {
|
|
/* important required as ember-collection will inline an overflow: visible*/
|
|
overflow-x: hidden !important;
|
|
}
|
|
th,
|
|
td:not(.actions),
|
|
td:not(.actions) a {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
// TODO: this isn't specific to table
|
|
td dl {
|
|
height: 100%;
|
|
}
|
|
td dl {
|
|
display: flex;
|
|
}
|
|
td dl > * {
|
|
display: block;
|
|
}
|
|
td dt.zero {
|
|
display: none;
|
|
}
|
|
td dd.zero {
|
|
visibility: hidden;
|
|
}
|
|
td dt {
|
|
text-indent: -9000px;
|
|
}
|
|
td dt.warning {
|
|
overflow: visible;
|
|
}
|
|
td dt.warning::before {
|
|
top: 7px;
|
|
}
|
|
td dt.warning::after {
|
|
left: -2px;
|
|
top: -1px;
|
|
}
|
|
td dd {
|
|
box-sizing: content-box;
|
|
margin-left: 22px;
|
|
padding-right: 10px;
|
|
}
|
|
/* hide actions on narrow screens, you can always click in do everything from there */
|
|
@media #{$--lt-wide-table} {
|
|
tr > .actions {
|
|
display: none;
|
|
}
|
|
}
|
|
/* ideally these would be in route css files, but left here as they */
|
|
/* accomplish the same thing (hide non-essential columns for tables) */
|
|
@media #{$--lt-wide-table} {
|
|
html.template-intention.template-list tr > :nth-last-child(2) {
|
|
display: none;
|
|
}
|
|
html.template-service.template-list tr > :last-child {
|
|
display: none;
|
|
}
|
|
html.template-node.template-show #services tr > :last-child {
|
|
display: none;
|
|
}
|
|
html.template-node.template-show #lock-sessions tr >
|
|
:not(:first-child):not(:last-child) {
|
|
display: none;
|
|
}
|
|
html.template-node.template-show #lock-sessions td:last-child {
|
|
padding: 0;
|
|
}
|
|
html.template-node.template-show #lock-sessions td:last-child button {
|
|
float: right;
|
|
}
|
|
}
|