style: tighten calculator sample layout spacing
This commit is contained in:
@@ -47,14 +47,14 @@ body {
|
|||||||
.app-shell {
|
.app-shell {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
align-items: start;
|
||||||
|
justify-items: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator {
|
.calculator {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 100%;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -151,11 +151,9 @@ body {
|
|||||||
|
|
||||||
.display-buttons-panel {
|
.display-buttons-panel {
|
||||||
grid-area: display-buttons;
|
grid-area: display-buttons;
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
align-self: start;
|
align-self: start;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.display-buttons-grid {
|
.display-buttons-grid {
|
||||||
@@ -227,27 +225,12 @@ body {
|
|||||||
color: #eef2f7;
|
color: #eef2f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keypad-panel {
|
.keypad-panel,
|
||||||
grid-area: keypad;
|
.functions-panel,
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.functions-panel {
|
|
||||||
grid-area: functions;
|
|
||||||
padding: 10px;
|
|
||||||
align-self: start;
|
|
||||||
min-height: 0;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trigo-panel {
|
.trigo-panel {
|
||||||
grid-area: trigo;
|
padding: 8px;
|
||||||
padding: 10px;
|
|
||||||
align-self: start;
|
align-self: start;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-bar {
|
.status-bar {
|
||||||
@@ -410,7 +393,6 @@ button:active {
|
|||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.display-button-symbol {
|
.display-button-symbol {
|
||||||
min-width: 1.28em;
|
min-width: 1.28em;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
|
|||||||
Reference in New Issue
Block a user