Skip to content

Commit 66ce23d

Browse files
antfuantfu
committed
fix: use a more explicit class name for icon-btn 
1 parent ee634ca commit 66ce23d

9 files changed

Lines changed: 43 additions & 43 deletions

File tree

‎demo/starter/slides.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ Presentation slides for developers
3636
</div>
3737

3838
<div class="abs-br m-6 flex gap-2">
39-
<button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
39+
<button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
4040
<carbon:edit />
4141
</button>
4242
<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
43-
class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
43+
class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
4444
<carbon-logo-github />
4545
</a>
4646
</div>

‎packages/client/internals/DrawingControls.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,25 +32,25 @@ function setBrushColor(color: typeof brush.color) {
3232
:initial-x="10"
3333
:initial-y="10"
3434
>
35-
<button class="icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
35+
<button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
3636
<carbon:pen />
3737
</button>
38-
<button class="icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
38+
<button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
3939
<svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
4040
<path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
4141
</svg>
4242
</button>
43-
<button class="icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
43+
<button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
4444
<carbon:arrow-up-right />
4545
</button>
46-
<button class="icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
46+
<button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
4747
<carbon:radio-button />
4848
</button>
49-
<button class="icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
49+
<button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
5050
<carbon:checkbox />
5151
</button>
5252
<!-- TODO: not sure why it's not working! -->
53-
<!-- <button class="icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
53+
<!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
5454
<carbon:erase />
5555
</button> -->
5656

@@ -59,7 +59,7 @@ function setBrushColor(color: typeof brush.color) {
5959
<button
6060
v-for="color of brushColors"
6161
:key="color"
62-
class="icon-btn"
62+
class="slidev-icon-btn"
6363
:class="brush.color === color ? 'active' : 'shallow'"
6464
@click="setBrushColor(color)"
6565
>
@@ -72,24 +72,24 @@ function setBrushColor(color: typeof brush.color) {
7272

7373
<VerticalDivider />
7474

75-
<button class="icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
75+
<button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
7676
<carbon:undo />
7777
</button>
78-
<button class="icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
78+
<button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
7979
<carbon:redo />
8080
</button>
81-
<button class="icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
81+
<button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
8282
<carbon:delete />
8383
</button>
8484

8585
<VerticalDivider />
86-
<button class="icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
86+
<button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
8787
<carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
8888
<carbon:pin v-show="!drawingPinned" />
8989
</button>
9090
<button
9191
v-if="drawingEnabled"
92-
class="icon-btn"
92+
class="slidev-icon-btn"
9393
:class="{ shallow: !drawingEnabled }"
9494
@click="drawingEnabled = !drawingEnabled"
9595
>

‎packages/client/internals/Editor.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,21 +137,21 @@ throttledWatch(
137137
>
138138
<div class="flex pb-2 text-xl -mt-1">
139139
<div class="mr-4 rounded flex">
140-
<button class="icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
140+
<button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
141141
<carbon:account />
142142
</button>
143-
<button class="icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
143+
<button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
144144
<carbon:align-box-bottom-right />
145145
</button>
146146
</div>
147147
<span class="text-2xl pt-1">
148148
{{ tab === 'content' ? 'Slide' : 'Notes' }}
149149
</span>
150150
<div class="flex-auto" />
151-
<button class="icon-btn" @click="openInEditor()">
151+
<button class="slidev-icon-btn" @click="openInEditor()">
152152
<carbon:launch />
153153
</button>
154-
<button class="icon-btn" @click="close">
154+
<button class="slidev-icon-btn" @click="close">
155155
<carbon:close />
156156
</button>
157157
</div>

‎packages/client/internals/NavControls.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,26 +51,26 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
5151
:class="barStyle"
5252
@mouseleave="onMouseLeave"
5353
>
54-
<button v-if="!isEmbedded" class="icon-btn" @click="toggleFullscreen">
54+
<button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
5555
<carbon:minimize v-if="isFullscreen" />
5656
<carbon:maximize v-else />
5757
</button>
5858

59-
<button class="icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
59+
<button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
6060
<carbon:arrow-left />
6161
</button>
6262

63-
<button class="icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
63+
<button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
6464
<carbon:arrow-right />
6565
</button>
6666

67-
<button v-if="!isEmbedded" class="icon-btn" title="Slides overview" @click="toggleOverview()">
67+
<button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
6868
<carbon:apps />
6969
</button>
7070

7171
<button
7272
v-if="!isColorSchemaConfigured"
73-
class="icon-btn"
73+
class="slidev-icon-btn"
7474
title="Toggle dark mode"
7575
@click="toggleDark()"
7676
>
@@ -88,7 +88,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
8888

8989
<button
9090
v-if="isPresenter"
91-
class="icon-btn"
91+
class="slidev-icon-btn"
9292
title="Show presenter cursor"
9393
@click="showPresenterCursor = !showPresenterCursor"
9494
>
@@ -98,7 +98,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
9898
</template>
9999

100100
<template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
101-
<button class="icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
101+
<button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
102102
<carbon:pen />
103103
<div
104104
v-if="drawingEnabled"
@@ -110,26 +110,26 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
110110
</template>
111111

112112
<template v-if="!isEmbedded">
113-
<RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
113+
<RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
114114
<carbon:presentation-file />
115115
</RouterLink>
116-
<RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
116+
<RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
117117
<carbon:user-speaker />
118118
</RouterLink>
119119

120-
<button v-if="__DEV__ && !isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
120+
<button v-if="__DEV__ && !isPresenter" class="slidev-icon-btn <md:hidden" @click="showEditor = !showEditor">
121121
<carbon:text-annotation-toggle />
122122
</button>
123123
</template>
124124
<template v-if="!__DEV__">
125-
<button v-if="configs.download" class="icon-btn" @click="downloadPDF">
125+
<button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
126126
<carbon:download />
127127
</button>
128128
</template>
129129

130130
<button
131131
v-if="!isPresenter && configs.info && !isEmbedded"
132-
class="icon-btn"
132+
class="slidev-icon-btn"
133133
@click="showInfoDialog = !showInfoDialog"
134134
>
135135
<carbon:information />
@@ -138,7 +138,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
138138
<template v-if="!isPresenter && !isEmbedded">
139139
<MenuButton>
140140
<template #button>
141-
<button class="icon-btn">
141+
<button class="slidev-icon-btn">
142142
<carbon:settings-adjust />
143143
</button>
144144
</template>

‎packages/client/internals/NotesView.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,14 @@ function decreaseFontSize() {
5656
</div>
5757
<div class="flex-none border-t border-gray-400 border-opacity-20">
5858
<div class="flex gap-1 items-center px-6 py-3">
59-
<button class="icon-btn" @click="toggleFullscreen">
59+
<button class="slidev-icon-btn" @click="toggleFullscreen">
6060
<carbon:minimize v-if="isFullscreen" />
6161
<carbon:maximize v-else />
6262
</button>
63-
<button class="icon-btn" @click="increaseFontSize">
63+
<button class="slidev-icon-btn" @click="increaseFontSize">
6464
<carbon:zoom-in />
6565
</button>
66-
<button class="icon-btn" @click="decreaseFontSize">
66+
<button class="slidev-icon-btn" @click="decreaseFontSize">
6767
<carbon:zoom-out />
6868
</button>
6969
<div class="flex-auto" />

‎packages/client/internals/RecordingControls.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ onMounted(() => {
3535
<template>
3636
<button
3737
v-if="currentCamera !== 'none'"
38-
class="icon-btn <md:hidden"
38+
class="slidev-icon-btn <md:hidden"
3939
:class="{ 'text-green-500': Boolean(showAvatar && streamCamera) }"
4040
title="Show camera view"
4141
@click="toggleAvatar"
@@ -44,7 +44,7 @@ onMounted(() => {
4444
</button>
4545

4646
<button
47-
class="icon-btn"
47+
class="slidev-icon-btn"
4848
:class="{ 'text-red-500': recording }"
4949
title="Recording"
5050
@click="toggleRecording"
@@ -54,7 +54,7 @@ onMounted(() => {
5454
</button>
5555
<MenuButton :disabled="recording">
5656
<template #button>
57-
<button class="icon-btn h-full !text-sm !px-0">
57+
<button class="slidev-icon-btn h-full !text-sm !px-0">
5858
<carbon:chevron-up class="opacity-50" />
5959
</button>
6060
</template>

‎packages/client/internals/SlidesOverview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ watchEffect(() => {
101101
</div>
102102
</div>
103103
</div>
104-
<button v-if="value" class="fixed text-2xl top-4 right-4 icon-btn text-gray-400" @click="close">
104+
<button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
105105
<carbon:close />
106106
</button>
107107
</template>

‎packages/client/styles/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,22 @@ html {
1515
background: transparent;
1616
}
1717

18-
.icon-btn {
18+
.slidev-icon-btn {
1919
@apply inline-block cursor-pointer select-none !outline-none;
2020
@apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
2121
@apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
2222
@apply md:p-2;
2323
}
2424

25-
.icon-btn.shallow {
25+
.slidev-icon-btn.shallow {
2626
@apply opacity-30
2727
}
2828

29-
.icon-btn.active {
29+
.slidev-icon-btn.active {
3030
@apply opacity-100
3131
}
3232

33-
.icon-btn.disabled {
33+
.slidev-icon-btn.disabled {
3434
@apply opacity-25 pointer-events-none;
3535
}
3636

‎packages/slidev/template.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Presentation slides for developers
2727
</div>
2828

2929
<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
30-
class="abs-br m-6 text-xl icon-btn opacity-50 !border-none !hover:text-white">
30+
class="abs-br m-6 text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
3131
<carbon-logo-github />
3232
</a>
3333

0 commit comments

Comments
 (0)