|
@@ -14,7 +14,7 @@
|
|
|
</div>
|
|
|
</template> -->
|
|
|
</toggle-dialog-render>
|
|
|
- <div class="flex flex-1 flex-wrap score-list">
|
|
|
+ <div class="flex flex-1 flex-wrap score-list" :class="{ 'dialog-score-list': dialogMode }">
|
|
|
<div
|
|
|
v-for="scoreItem in scoreList"
|
|
|
:key="scoreItem"
|
|
@@ -54,10 +54,10 @@
|
|
|
</toggle-dialog-render>
|
|
|
</div>
|
|
|
<toggle-dialog-render dialog>
|
|
|
- <div class="grid radius-base dialog-score" :class="{ 'score-valid-fail': scoreValidFail }">
|
|
|
+ <div class="grid dialog-score" :class="{ 'score-valid-fail': scoreValidFail }">
|
|
|
<input
|
|
|
ref="refInput2"
|
|
|
- class="score-input"
|
|
|
+ class="score-input radius-base"
|
|
|
:value="currentScore"
|
|
|
@focus="onInputFocus"
|
|
|
@blur="onBlur"
|
|
@@ -335,6 +335,9 @@ const onToggleClick = () => {
|
|
|
font-size: $BaseFont;
|
|
|
margin-bottom: -8px;
|
|
|
// margin-left: 8px;
|
|
|
+ &.dialog-score-list {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
.score-span {
|
|
|
width: 46px;
|
|
|
height: 32px;
|
|
@@ -381,20 +384,26 @@ const onToggleClick = () => {
|
|
|
}
|
|
|
|
|
|
.dialog-score {
|
|
|
- width: 80px;
|
|
|
- place-items: center;
|
|
|
- background: $color--primary;
|
|
|
+ // width: 80px;
|
|
|
+ width: 70px;
|
|
|
+ // place-items: center;
|
|
|
+ // background: $color--primary;
|
|
|
color: $color--white;
|
|
|
- font-size: 32px;
|
|
|
+ // font-size: 32px;
|
|
|
outline: none;
|
|
|
margin-left: 6px;
|
|
|
overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ top: -2px;
|
|
|
.score-input {
|
|
|
background: inherit;
|
|
|
color: inherit;
|
|
|
font-size: inherit;
|
|
|
width: 100% !important;
|
|
|
- height: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ background: $color--primary;
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
|