From 2c54a64e2f20415abd47cc85b9492fecf900dc69 Mon Sep 17 00:00:00 2001
From: Lukas Taegert-Atkinson <lukas.taegert-atkinson@tngtech.com>
Date: Mon, 17 Apr 2023 14:22:10 +0200
Subject: [PATCH] Reinstate global styles

---
 docs/repl/components/BundleOptions.vue | 15 ++++-----
 docs/repl/components/InputHeader.vue   |  2 +-
 docs/repl/components/OutputStatus.vue  |  6 ++--
 docs/repl/components/ReplInput.vue     |  4 +--
 docs/repl/components/ReplMain.vue      | 43 ++++++++------------------
 docs/repl/components/ReplModule.vue    | 20 ++++++------
 docs/repl/components/SelectOption.vue  |  1 +
 docs/repl/components/StatusMessage.vue |  2 +-
 8 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/docs/repl/components/BundleOptions.vue b/docs/repl/components/BundleOptions.vue
index cb5891e9eb2..bf8cb40f643 100644
--- a/docs/repl/components/BundleOptions.vue
+++ b/docs/repl/components/BundleOptions.vue
@@ -6,11 +6,11 @@
 					<a :href="getLinkForOption(option.name)">{{ option.name }}</a>
 					<button
 						v-if="option.removable"
-						class="remove"
+						class="repl-button remove"
 						@click="optionsStore.set(option.name, undefined)"
 					>
 						<span class="label">remove</span>
-						<span class="icon-cancel"></span>
+						<span class="repl-icon-cancel"></span>
 					</button>
 				</h3>
 				<SelectOption
@@ -66,7 +66,7 @@
 					{{ option }}
 				</option>
 			</select>
-			<span class="icon-plus"></span>
+			<span class="repl-icon-plus"></span>
 		</div>
 	</div>
 </template>
@@ -102,7 +102,7 @@ const getLinkForOption = (option: string) =>
 }
 
 h3 {
-	padding: 0 0.5rem;
+	padding: 0 0 0 0.5rem;
 	margin: 6px 0 2px;
 	font-size: 14px;
 	font-weight: 500;
@@ -167,10 +167,10 @@ select {
 	appearance: none;
 	background: var(--vp-c-bg);
 	padding-right: 20px;
-	width: 100px;
+	width: 94px;
 }
 
-.icon-plus {
+.repl-icon-plus {
 	font-size: 0.8em;
 	position: absolute;
 	right: 0;
@@ -181,7 +181,7 @@ button.remove {
 	font-family: inherit;
 	font-size: 14px;
 	font-weight: 500;
-	padding: 0.2em;
+	padding: 0.2em 0 0.2em 0.2em;
 	margin: 0;
 	background-color: transparent;
 	border: none;
@@ -195,6 +195,7 @@ button.remove {
 button.remove .label {
 	opacity: 0;
 	transition: all 0.2s;
+	padding-right: 0.2em;
 }
 
 button.remove:hover,
diff --git a/docs/repl/components/InputHeader.vue b/docs/repl/components/InputHeader.vue
index b5ea42c64f8..a7414813587 100644
--- a/docs/repl/components/InputHeader.vue
+++ b/docs/repl/components/InputHeader.vue
@@ -6,7 +6,7 @@
 				{{ example.title }}
 			</option>
 		</select>
-		<button class="start-over" @click="startOver">Start over</button>
+		<button class="repl-button start-over" @click="startOver">Start over</button>
 	</header>
 </template>
 
diff --git a/docs/repl/components/OutputStatus.vue b/docs/repl/components/OutputStatus.vue
index 099ea2b74fe..f71f5221040 100644
--- a/docs/repl/components/OutputStatus.vue
+++ b/docs/repl/components/OutputStatus.vue
@@ -4,12 +4,12 @@
 		:class="waiting ? 'waiting' : error ? 'error' : warnings.length > 0 ? 'warnings' : 'success'"
 	>
 		<span v-if="waiting">
-			<span class="icon icon-attention"></span>
+			<span class="repl-icon-attention"></span>
 			Loading Rollup...
 		</span>
 		<StatusMessage v-else-if="error" :message="error" isError />
 		<span v-else-if="warnings.length > 0">
-			<span class="icon icon-attention" />
+			<span class="repl-icon-attention" />
 			Rollup completed with warnings:
 			<ul class="warning-list">
 				<li v-for="(warning, i) in warnings" :key="i" class="warning">
@@ -18,7 +18,7 @@
 			</ul>
 		</span>
 		<span v-else>
-			<span class="icon icon-ok"></span>
+			<span class="repl-icon-ok"></span>
 			Rollup successful!
 		</span>
 	</div>
diff --git a/docs/repl/components/ReplInput.vue b/docs/repl/components/ReplInput.vue
index 821b9137c31..7cd6ba96beb 100644
--- a/docs/repl/components/ReplInput.vue
+++ b/docs/repl/components/ReplInput.vue
@@ -13,8 +13,8 @@
 		/>
 	</div>
 
-	<button class="new-module" @click="createModule">
-		<span class="icon icon-plus"></span>
+	<button class="repl-button new-module" @click="createModule">
+		<span class="repl-icon-plus"></span>
 		add module
 	</button>
 </template>
diff --git a/docs/repl/components/ReplMain.vue b/docs/repl/components/ReplMain.vue
index 976810a77d3..d9298a18d58 100644
--- a/docs/repl/components/ReplMain.vue
+++ b/docs/repl/components/ReplMain.vue
@@ -44,8 +44,9 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
-button {
+<style>
+/* global styles */
+.repl-button {
 	font-family: inherit;
 	font-size: inherit;
 	border: none;
@@ -56,14 +57,10 @@ button {
 	white-space: nowrap;
 }
 
-button:disabled {
+.repl-button:disabled {
 	cursor: default;
 }
 
-.icon {
-	font-size: 0.8em;
-}
-
 input {
 	display: block;
 	width: 100%;
@@ -86,8 +83,8 @@ input {
 	font-style: normal;
 }
 
-[class^='icon-']:before,
-[class*=' icon-']:before {
+[class^='repl-icon-']:before,
+[class*=' repl-icon-']:before {
 	font-family: 'fontello';
 	font-style: normal;
 	font-weight: normal;
@@ -98,49 +95,35 @@ input {
 	width: 1em;
 	margin-right: 0.2em;
 	text-align: center;
-	/* opacity: .8; */
 
 	/* For safety - reset parent styles, that can break glyph codes*/
 	font-variant: normal;
 	text-transform: none;
 
-	/* fix buttons height, for twitter bootstrap */
-	line-height: 1em;
-
-	/* Animation center compensation - margins should be symmetric */
-	/* remove if not needed */
-	margin-left: 0.2em;
-
-	/* you can be more comfortable with increased icons size */
-	/* font-size: 120%; */
-
 	/* Font smoothing. That was taken from TWBS */
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-
-	/* Uncomment for 3D effect */
-	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.icon-pencil:before {
+.repl-icon-pencil:before {
 	content: '\e800';
 } /* '' */
-.icon-cancel:before {
+.repl-icon-cancel:before {
 	content: '\e801';
 } /* '' */
-.icon-plus:before {
+.repl-icon-plus:before {
 	content: '\e802';
 } /* '' */
-.icon-minus:before {
+.repl-icon-minus:before {
 	content: '\e803';
 } /* '' */
-.icon-ok:before {
+.repl-icon-ok:before {
 	content: '\e804';
 } /* '' */
-.icon-error:before {
+.repl-icon-error:before {
 	content: '\e805';
 } /* '' */
-.icon-attention:before {
+.repl-icon-attention:before {
 	content: '\e806';
 } /* '' */
 </style>
diff --git a/docs/repl/components/ReplModule.vue b/docs/repl/components/ReplModule.vue
index 7f73b68f333..767868d6079 100644
--- a/docs/repl/components/ReplModule.vue
+++ b/docs/repl/components/ReplModule.vue
@@ -4,14 +4,14 @@
 		<header>
 			<span v-if="editableHeader">
 				<input ref="input" v-model="module.name" @focus="selectName" placeholder="foo.js" />
-				<button class="remove" @click="emit('remove')">
+				<button class="repl-button remove" @click="emit('remove')">
 					<span class="label">remove</span>
-					<span class="icon-cancel"></span>
+					<span class="repl-icon-cancel"></span>
 				</button>
-				<button class="toggle-entry" @click="module.isEntry = !module.isEntry">
+				<button class="repl-button toggle-entry" @click="module.isEntry = !module.isEntry">
 					<span class="label">(entry&nbsp;module)</span>
-					<span v-if="module.isEntry" class="icon-minus"></span>
-					<span v-else class="icon-plus"></span>
+					<span v-if="module.isEntry" class="repl-icon-minus"></span>
+					<span v-else class="repl-icon-plus"></span>
 				</button>
 			</span>
 			<span v-else-if="showHeader" class="module-name">
@@ -161,11 +161,11 @@ button .label {
 	opacity: 1;
 }
 
-.entry-module button.toggle-entry .icon-minus {
+.entry-module button.toggle-entry .repl-icon-minus {
 	opacity: 0.6;
 }
 
-.entry-module button.toggle-entry:hover .icon-minus {
+.entry-module button.toggle-entry:hover .repl-icon-minus {
 	opacity: 1;
 }
 
@@ -178,9 +178,9 @@ button:active .label {
 	opacity: 1;
 }
 
-.icon-cancel,
-.icon-plus,
-.icon-minus {
+.repl-icon-cancel,
+.repl-icon-plus,
+.repl-icon-minus {
 	font-size: 0.8em;
 	transition: all 0.2s;
 }
diff --git a/docs/repl/components/SelectOption.vue b/docs/repl/components/SelectOption.vue
index 4ff2236a02c..e43e4bfd812 100644
--- a/docs/repl/components/SelectOption.vue
+++ b/docs/repl/components/SelectOption.vue
@@ -3,6 +3,7 @@
 		<button
 			v-for="value in values"
 			:key="String(value)"
+			class="repl-button"
 			:class="{ selected: value === selected }"
 			@click="emit('select', value)"
 		>
diff --git a/docs/repl/components/StatusMessage.vue b/docs/repl/components/StatusMessage.vue
index afe7bc809c7..956cf9eb403 100644
--- a/docs/repl/components/StatusMessage.vue
+++ b/docs/repl/components/StatusMessage.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="message">
 		<span v-if="isError">
-			<span class="icon icon-error" />
+			<span class="repl-icon icon-error" />
 			<strong>{{ ' ' + message.name }}:</strong>
 		</span>
 		{{ message.message }}