granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add styles to TableField

Browse source 
Added styles for numeric inputs, disabled inputs, and generally cleaning things up
This commit is contained in:
Justin Edmund 2023-06-18 00:03:32 -07:00
parent b4a841e8fd
commit 69c85e0ae9
1 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/common/TableField/index.scss
View file

@ -3,6 +3,7 @@
display: grid; display: grid;
gap: $unit-2x; gap: $unit-2x;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
min-height: $unit-6x;
justify-content: space-between; justify-content: space-between;
padding: $unit-half 0; padding: $unit-half 0;
width: 100%; width: 100%;
@ -17,7 +18,30 @@
color: var(--accent-blue); color: var(--accent-blue);
} }
&.Numeric .Right > .Input,
&.Numeric .Right > .Duration {
text-align: right;
max-width: $unit-12x;
width: $unit-12x;
}
&.Numeric .Right > .Duration {
justify-content: flex-end;
box-sizing: border-box;
}
&.Disabled {
&:hover .Left .Info h3 {
color: var(--text-tertiary);
}
.Left .Info h3 {
color: var(--text-tertiary);
}
}
.Left { .Left {
align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $unit; gap: $unit;
@ -59,7 +83,6 @@
color: var(--text-secondary); color: var(--text-secondary);
font-size: $font-small; font-size: $font-small;
line-height: 1.1; line-height: 1.1;
max-width: 300px;
&.jp { &.jp {
max-width: 270px; max-width: 270px;
@ -71,6 +94,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end;
gap: $unit-2x; gap: $unit-2x;
width: 100%; width: 100%;