Skip to content

Commit

Permalink
chore: fix sass warnings (#1366)
Browse files Browse the repository at this point in the history
Sass has breaking changes with the migration to Dart.
https://sass-lang.com/documentation/breaking-changes/

 - use the migration scripting to fix up the color space changes
 - stop using @import and replace with @use
 - migrate the color variables to use namespaces because use is always
   namespaced
  • Loading branch information
yanfali authored Oct 23, 2024
1 parent bc49f2a commit 9bb6471
Show file tree
Hide file tree
Showing 10 changed files with 1,128 additions and 854 deletions.
12 changes: 11 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,8 @@ export default {
};
</script>
<style lang="scss">
@import '@/scss/style.scss';
@use '@/scss/style.scss';
#app {
display: grid;
grid-template: 1fr / minmax(1000px, 1300px);
Expand All @@ -208,6 +209,7 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.embedded-tutorial {
position: fixed;
bottom: 20px;
Expand Down Expand Up @@ -250,19 +252,23 @@ export default {
0% {
transform: scale(1);
}
10%,
20% {
transform: scale(0.9) rotate(-8deg);
}
30%,
50%,
70% {
transform: scale(1.3) rotate(8deg);
}
40%,
60% {
transform: scale(1.3) rotate(-8deg);
}
80%,
100% {
transform: scale(1) rotate(0);
Expand All @@ -274,19 +280,23 @@ export default {
.faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite;
}
.faa-tada.animated.faa-fast,
.faa-tada.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
animation: tada 1s linear infinite;
}
.faa-tada.animated.faa-slow,
.faa-tada.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
animation: tada 3s linear infinite;
}
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
animation: tada 3s linear infinite;
}
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
animation: tada 3s linear infinite;
}
Expand Down
57 changes: 28 additions & 29 deletions src/components/BaseKey.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,10 @@
<template>
<!-- prettier-ignore -->
<div
draggable
:id="myid"
class="key"
:class="myclasses"
:style="mystyles"
:title="myTitle"
@click="clicked"
@dragstart="dragstart"
@dragend="dragend"
@drop.stop="dropped"
@dragleave.prevent="dragleave"
@dragover.prevent="dragover"
@dragenter.prevent="dragenter"
>{{ displayName }}<font-awesome-icon v-if="icon" size="2x" :icon="icon" /><template
v-if="visible">
<div
v-if="visible"
class="remove"
@click.stop="remove"
>x</div>
<div draggable :id="myid" class="key" :class="myclasses" :style="mystyles" :title="myTitle" @click="clicked"
@dragstart="dragstart" @dragend="dragend" @drop.stop="dropped" @dragleave.prevent="dragleave"
@dragover.prevent="dragover" @dragenter.prevent="dragenter">{{ displayName }}<font-awesome-icon v-if="icon"
size="2x" :icon="icon" /><template v-if="visible">
<div v-if="visible" class="remove" @click.stop="remove">x</div>
</template></div>
</template>
<script>
Expand Down Expand Up @@ -336,24 +320,20 @@ export default {
};
</script>
<style lang="scss">
@import '../scss/gmk-abs';
@import '../scss/sp-abs';
@import '../scss/sp-pbt';
@import '../scss/mt3-pbt';
@import '../scss/mt3-abs';
@import '../scss/pantone';
@import '../scss/qmk_colors';
@import '../scss/colorways';
@use '../scss/colorways';
.key.overme {
border-radius: 4px;
}
.key.swapme {
transform: scale(0.8);
}
.key.smaller {
font-size: var(--default-smaller-key-font-size);
}
.key {
border-radius: 6px;
font-family: 'Montserrat', sans-serif;
Expand All @@ -374,51 +354,67 @@ export default {
(var(--default-key-y-spacing) - var(--default-key-height))
);
}
.k125u {
--unit-width: 1.25;
}
.k15u {
--unit-width: 1.5;
}
.k175u {
--unit-width: 1.75;
}
.k2u {
--unit-width: 2;
}
.k225u {
--unit-width: 2.25;
}
.k275u {
--unit-width: 2.75;
}
.k3u {
--unit-width: 3;
}
.k4u {
--unit-width: 4;
}
.k6u {
--unit-width: 6;
}
.k625u {
--unit-width: 6.25;
}
.k7u {
--unit-width: 7;
}
.k125uh {
--unit-height: 1.25;
}
.k15uh {
--unit-height: 1.5;
}
.k175uh {
--unit-height: 1.75;
}
.k2uh {
--unit-height: 2;
}
.kiso {
width: calc(0.5 * var(--default-key-x-spacing) + var(--default-key-width));
height: var(--default-key-height);
Expand All @@ -428,6 +424,7 @@ export default {
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0px 2px inset,
rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
}
.kiso::after {
background: inherit;
position: absolute;
Expand All @@ -442,6 +439,7 @@ export default {
box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 0px 2px inset,
rgba(0, 0, 0, 0.3) 0px 2px 0px 1px;
}
.kbae {
width: calc(0.5 * var(--default-key-x-spacing) + var(--default-key-width));
height: calc(1.1 * var(--default-key-height));
Expand All @@ -450,6 +448,7 @@ export default {
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0px 2px inset,
rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
}
.kbae::after {
background: inherit;
position: absolute;
Expand Down
7 changes: 5 additions & 2 deletions src/scss/colorways.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
@import 'colorways/gmk', 'colorways/jtk', 'colorways/keyreative',
'colorways/mt3', 'colorways/sp';
@use 'colorways/gmk';
@use 'colorways/jtk';
@use 'colorways/keyreative';
@use 'colorways/mt3';
@use 'colorways/sp';
Loading

0 comments on commit 9bb6471

Please sign in to comment.