Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reinstate global styles #4941

Merged
merged 2 commits into from Apr 18, 2023
Merged

Reinstate global styles #4941

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
195abbb
Reinstate global styles
lukastaegert Apr 17, 2023
d604817
Merge branch 'master' into fix-repl-styling
lukastaegert Apr 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 8 additions & 7 deletions docs/repl/components/BundleOptions.vue
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -66,7 +66,7 @@
{{ option }}
</option>
</select>
<span class="icon-plus"></span>
<span class="repl-icon-plus"></span>
</div>
</div>
</template>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -195,6 +195,7 @@ button.remove {
button.remove .label {
opacity: 0;
transition: all 0.2s;
padding-right: 0.2em;
}

button.remove:hover,
Expand Down
2 changes: 1 addition & 1 deletion docs/repl/components/InputHeader.vue
View file
Open in desktop
Expand Up @@ -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>

Expand Down
6 changes: 3 additions & 3 deletions docs/repl/components/OutputStatus.vue
View file
Open in desktop
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions docs/repl/components/ReplInput.vue
View file
Open in desktop
Expand Up @@ -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>
Expand Down
43 changes: 13 additions & 30 deletions docs/repl/components/ReplMain.vue
View file
Open in desktop
Expand Up @@ -44,8 +44,9 @@ onUnmounted(() => {
});
</script>

<style scoped>
button {
<style>
/* global styles */
.repl-button {
font-family: inherit;
font-size: inherit;
border: none;
Expand All @@ -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%;
Expand All @@ -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;
Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions docs/repl/components/ReplModule.vue
View file
Open in desktop
Expand Up @@ -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">
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions docs/repl/components/SelectOption.vue
View file
Open in desktop
Expand Up @@ -3,6 +3,7 @@
<button
v-for="value in values"
:key="String(value)"
class="repl-button"
:class="{ selected: value === selected }"
@click="emit('select', value)"
>
Expand Down
2 changes: 1 addition & 1 deletion docs/repl/components/StatusMessage.vue
View file
Open in desktop
@@ -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 }}
Expand Down