feat(ui): style screens

lemredd · Dec 22, 2022 · 0608152 · 0608152
1 parent d6918d0
commit 0608152
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/src/components/CalculatorContainer.vue b/src/components/CalculatorContainer.vue
@@ -46,15 +46,29 @@ function evaluateExpression(valueToAppend: PossibleButtonValues) {
 
 <template>
 	<div class="screens">
-		<EvaluationScreen :value-to-display="evaluationValue" />
-		<EntryScreen :value-to-display="entryValue" />
+		<EvaluationScreen
+			class="screen"
+			:value-to-display="evaluationValue"
+		/>
+		<EntryScreen
+			class="screen"
+			:value-to-display="entryValue"
+		/>
 	</div>
 	<DigitalButton :value="1" @append-to-screen="appendToEntryScreen" />
 	<OperationalButton value="+" @append-to-screen="appendToEvaluationScreen" />
 	<EvaluationButton value="=" @append-to-screen="evaluateExpression" />
 </template>
 
 <style lang="scss">
+	.screen {
+		direction: rtl;
+
+		&.entry-screen {
+			@apply text-2xl;
+		}
+	}
+
 	button {
 		@apply m-[1px] px-2 py-1;
 		@apply bg-slate-200 rounded-sm;
@@ -63,4 +77,8 @@ function evaluateExpression(valueToAppend: PossibleButtonValues) {
 </style>
 
 <style scoped lang="scss">
+	.screen {
+		width: 100%;
+
+	}
 </style>