mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-21 06:54:25 +00:00
50c1d638d7
# Which Problems Are Solved - In Firefox there's an issue with mat-calendar. The header for days of the week has a height that fills the entire space making dates to overlap. This happens for both Personal Access Tokens and Keys dialogs.  # How the Problems Are Solved - In FF there seems to be a problem with the following style in tables.scss. If I remove that style in FF everything works fine: ``` th, td { padding: 0 0.5rem !important; } ``` Although I tried to override it or remove !important I didn't like the idea of having side effects all around the tables. As the issue was the height for the header I tried to add a fixed height for the th elements using a new specific selector in the tables.scss file. That way FF seems to calculate the right height for the header and dates are shown correctly. If @peintnermax agrees maybe an issue can be opened for a future work to remove as many !important properties as possible Here's a screenshot for FF  And another one for Chrome  Maybe it's not too elegant but as it seems a bug on Firefox I think it's a contained solution. # Additional Context - Closes #7877 Co-authored-by: Livio Spring <[email protected]>
157 lines
3.2 KiB
SCSS
157 lines
3.2 KiB
SCSS
@mixin table-theme($theme) {
|
|
$primary: map-get($theme, primary);
|
|
$primary-color: map-get($primary, 500);
|
|
$is-dark-theme: map-get($theme, is-dark);
|
|
$foreground: map-get($theme, foreground);
|
|
$background: map-get($theme, background);
|
|
|
|
.mat-mdc-table,
|
|
.mat-mdc-paginator {
|
|
background-color: inherit !important;
|
|
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
|
|
.table-wrapper {
|
|
overflow: auto;
|
|
|
|
.table,
|
|
.paginator {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
th {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
|
|
&.mat-mdc-header-cell {
|
|
color: map-get($foreground, text);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
tr {
|
|
&.mat-mdc-header-row {
|
|
height: 40px !important;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
&.highlight {
|
|
&:hover {
|
|
td {
|
|
transition: background 0.1s ease;
|
|
background: map-get($background, hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cnsl-table-action {
|
|
visibility: hidden;
|
|
transition: color 0.2s ease;
|
|
|
|
&:active,
|
|
&:hover,
|
|
&:focus,
|
|
&:focus-within {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.cnsl-table-action {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0 0.5rem !important;
|
|
}
|
|
|
|
.mat-calendar-table-header tr th {
|
|
height: 14px;
|
|
}
|
|
|
|
td .mat-mdc-checkbox,
|
|
th .mat-checkbox {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.no-content-row {
|
|
background-color: if($is-dark-theme, #ffffff10, #f4f4f470);
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
.selection {
|
|
width: 80px;
|
|
max-width: 80px;
|
|
|
|
.checkbox {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
th .selection {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.state {
|
|
border-radius: 50vw;
|
|
padding: 2px 0.5rem;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4);
|
|
box-shadow: 0 0 3px #0000001a;
|
|
|
|
&.active {
|
|
background-color: if($is-dark-theme, map-get($background, state-active), #cbf4c9);
|
|
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
|
}
|
|
|
|
&.inactive {
|
|
color: if($is-dark-theme, #ffc1c1, #620e0e);
|
|
background-color: if($is-dark-theme, map-get($background, state-inactive), #ffc1c1);
|
|
}
|
|
}
|
|
|
|
.bg-state {
|
|
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4) !important;
|
|
|
|
&.active {
|
|
background-color: if($is-dark-theme, map-get($background, state-active), #cbf4c9) !important;
|
|
color: if($is-dark-theme, #cbf4c9, #0e6245) !important;
|
|
}
|
|
|
|
&.inactive {
|
|
color: if($is-dark-theme, #ffc1c1, #620e0e) !important;
|
|
background-color: if($is-dark-theme, map-get($background, state-inactive), #ffc1c1) !important;
|
|
}
|
|
}
|
|
|
|
.color-shadow {
|
|
border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
|
|
box-shadow: 0 0 3px #0000001a;
|
|
}
|
|
}
|