-
François Grand authored
fix: fish ladder table: right align inputs, prevent long (many digits) number to overlap neighbouring table cell refs #583
François Grand authoredfix: fish ladder table: right align inputs, prevent long (many digits) number to overlap neighbouring table cell refs #583
styles.scss 9.48 KiB
/* You can add global styles to this file, and also import other style files */
// @import "@angular/material/prebuilt-themes/indigo-pink.css";
// @import "@angular/material/prebuilt-themes/deeppurple-amber.css";
// @import "@angular/material/prebuilt-themes/pink-bluegrey.css";
// @import "@angular/material/prebuilt-themes/purple-green.css";
@import "./theme.scss";
html, body { height: 100%; }
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: #FAFAFA; // harmonize with app-content
}
button {
&:focus {
outline: 0;
}
}
.eight-em-bottom-padding {
padding-bottom: 8em;
}
// --------- bootstrap inspired styles ---------
h1 {
margin-top: 0;
margin-bottom: .5rem;
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
// debug << ?
field-set {
margin-bottom: 2em;
}
// hide elements having "hidden" attribute even if they have explicit "display:" property
[hidden] {
display: none !important;
}
// --------- override angular-material styles (to avoid using ::ng-deep) ---------
mat-dialog-container {
min-width: 280px;
.mat-dialog-actions {
margin-bottom: -5px;
}
}
.dialogMinWidth320px .mat-dialog-container {
min-width: 320px;
}
mat-error {
font-weight: 500;
font-size: 1.1em;
}
mat-form-field {
.mat-form-field-label {
font-size: 1.1em; line-height: 1.4em;
margin-top: -2px;
&.mat-form-field-empty {
font-size: 1em;
}
}
}
.file-input-field {
cursor: pointer;
}
.mat-tooltip {
&.linked-param-tooltip {
background-color: rgb(110, 110, 110); // to override the default alpha
font-size: .8em;
font-weight: 500;
line-height: 1.4em;
white-space: pre-line;
}
}
table.mat-table {
width: 100%;
}
mat-card-header.mat-card-header-text-margin-0 {
.mat-card-header-text {
margin: 0;
}
}
.radio-button-and-input-wrapper {
mat-radio-button[value="interpolate"] {
width: 100%;
label.mat-radio-label {
width: 100%;
> .mat-radio-label-content {
width: 100%;
.interpolation-bounds {
float: right;
color: #707070;
}
}
}
}
}
field-set {
mat-select#add-many-children {
width: 3em;
.mat-select-value, .mat-select-arrow {
color: #fff;
}
.mat-form-field-infix {
border-bottom: 2px solid #fff;
}
}
}
.qaFieldLineContainer {
.qaFieldLine {
.mat-button-toggle-label-content {
line-height: 24px !important;
}
}
ngparam-input {
height: 38px;
margin-top: 0;
}
param-values {
margin-top: 0;
}
param-link {
margin-top: 0;
.status-icons-container {
display: none;
}
}
mat-form-field {
.mat-form-field-wrapper {
padding-bottom: 5px;
}
input.form-control.mat-input-element {
width: 100%;
}
button.param-values-more {
display: none;
}
.mat-form-field-underline {
display: none;
}
mat-error.mat-error {
display: none;
}
}
}
.pab-data-table {
.editable-cell-bg {
@extend .bg-accent-extralight;
}
.selected-row-bg {
@extend .bg-accent-extralight;
}
.selected-cell-bg {
@extend .bg-accent-extralight;
}
.selected-editable-cell-bg {
@extend .bg-accent-verylight;
}
.invalid-cell-bg {
@extend .bg-error;
}
div {
table.p-datatable-table {
thead.p-datatable-thead {
> tr {
> th { font-size: .7em;
padding: 6px 8px;
text-align: center;
&.selectable-cell {
cursor: pointer;
}
&.selected-cell {
@extend .selected-cell-bg;
}
}
}
}
tbody.p-element.p-datatable-tbody {
> tr {
&.selected-row {
@extend .selected-row-bg;
> td {
&.editable-cell {
@extend .selected-editable-cell-bg;
}
}
}
> td {
&:nth-child(1) {
width: 12.5%;
min-width: 50px;
}
font-size: .7em;
&.readonly-cell {
cursor: default;
padding: 4px 8px;
}
&.editable-cell {
@extend .editable-cell-bg;
padding: 0;
> input.mat-input-element {
padding: 4px 8px;
}
&:focus-within {
@extend .bg-warn-extralight;
}
}
&.selectable-cell {
cursor: pointer;
}
&.selected-cell {
@extend .selected-cell-bg;
&.editable-cell {
@extend .selected-editable-cell-bg;
}
}
&.invalid-cell {
@extend .invalid-cell-bg;
}
&.basin_number {
text-align: center;
font-weight: bold;
}
> mat-select.mat-select {
padding: 0 8px;
}
> input[type="number"] {
-moz-appearance: textfield;
text-align: right;
width: 88%;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
}
}
}
}
}
}
mat-checkbox.wrapped-checkbox {
.mat-checkbox-label {
white-space: normal;
}
.mat-checkbox-inner-container {
margin-top: 4px;
}
}
param-computed, param-values {
mat-form-field {
input.mat-input-element {
width: calc(100% - 40px);
text-overflow: ellipsis;
}
}
}
param-computed, param-values, ngparam-input {
mat-form-field {
input.mat-input-element {
line-height: 1.3em;
}
}
}
#app-setup {
mat-form-field {
.mat-form-field-label {
font-size: 1.2em;
.mat-form-field-required-marker {
display: none;
}
}
}
}
mat-list {
&.mat-list-base {
padding-top: 0;
.mat-list-item {
height: 32px;
font-size: .9em;
.mat-list-item-content {
padding-left: 0;
mat-icon {
transform: scale(0.8);
margin-right: 5px;
} }
}
}
&#examples-list.mat-list.mat-list-base {
> .mat-list-item {
height: auto;
margin-bottom: .5em;
> .mat-list-item-content {
align-items: start;
> .mat-icon {
margin-top: -2px;
}
}
}
}
}
table.mat-table {
.material-icons {
font-size: 1.4em;
vertical-align: bottom;
margin-left: 4px;
color: #009ee0;
}
}
macrorugo-compound-results-table, pab-results-table, var-results {
table.mat-table {
.mat-header-cell {
font-size: 1em;
color: black;
padding: 5px;
}
}
}
macrorugo-compound-results-table, pab-results-table {
table.mat-table {
.mat-cell {
padding: 5px;
.inner-cell-line {
display: block;
white-space: nowrap;
line-height: 20px;
}
}
}
}
var-results {
table.mat-table {
.mat-cell {
padding: 5px;
border: none;
}
}
}
fixed-results, pb-cloison-results {
table.mat-table {
.mat-header-cell {
font-size: 1em;
color: black;
}
.mat-cell {
padding-top: 8px;
padding-bottom: 8px;
}
}
}
mat-select {
.mat-select-value {
> span {
> span {
line-height: 1.3em;
}
}
}
&#selectCalculator {
.mat-select-value {
.mat-select-placeholder {
color: white;
}
.mat-select-value-text {
display: block;
margin-top: 5px;
}
}
}
}