fixed deprecated api when migrating to sass 3 (#549)

This commit is contained in:
Hoan Luu Huu
2025-07-15 19:27:02 +07:00
committed by GitHub
parent c0a40dd784
commit 6e4d663337
10 changed files with 34 additions and 23 deletions

9
package-lock.json generated
View File

@@ -10,7 +10,7 @@
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
"@jambonz/ui-kit": "^0.0.21",
"@jambonz/ui-kit": "^0.0.22",
"@stripe/react-stripe-js": "^2.6.2",
"@stripe/stripe-js": "^3.2.0",
"dayjs": "^1.11.10",
@@ -1033,9 +1033,10 @@
"dev": true
},
"node_modules/@jambonz/ui-kit": {
"version": "0.0.21",
"resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz",
"integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==",
"version": "0.0.22",
"resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.22.tgz",
"integrity": "sha512-kaO094hexaBojrfN94Tm4NvuVi2I04hFnjcCYqQNl+y2h/Q64Gg/bHuqFetG+nVf4/fDQHSny6rLggs84fM2nQ==",
"license": "MIT",
"engines": {
"node": ">= 14"
},

View File

@@ -41,7 +41,7 @@
"deploy": "npm i && npm run build && npm run pm2"
},
"dependencies": {
"@jambonz/ui-kit": "^0.0.21",
"@jambonz/ui-kit": "^0.0.22",
"@stripe/react-stripe-js": "^2.6.2",
"@stripe/stripe-js": "^3.2.0",
"dayjs": "^1.11.10",

View File

@@ -25,7 +25,6 @@
}
select {
@include ui-mixins.m();
appearance: none;
padding: ui-vars.$px01 ui-vars.$px02;
border-radius: ui-vars.$px01;
@@ -33,6 +32,7 @@
background-color: ui-vars.$white;
width: 100%;
max-width: vars.$widthinput;
@include ui-mixins.m();
&:focus {
border-color: ui-vars.$dark;

View File

@@ -28,7 +28,6 @@
}
@mixin typeahead-input {
@include ui-mixins.m();
appearance: none;
padding: ui-vars.$px01 ui-vars.$px02;
border-radius: ui-vars.$px01;
@@ -37,6 +36,7 @@
max-width: vars.$widthtypeaheadinput;
transition: border-color 0.2s ease;
font-family: inherit;
@include ui-mixins.m();
&:focus {
border-color: ui-vars.$dark;
@@ -84,7 +84,6 @@
}
@mixin typeahead-dropdown {
@include ui-mixins.m();
position: absolute;
top: 100%;
left: 0;
@@ -93,6 +92,7 @@
border: 1px solid ui-vars.$dark;
max-height: 200px;
overflow-y: auto;
@include ui-mixins.m();
}
@mixin typeahead-option {
@@ -126,8 +126,8 @@
width: 100%;
input {
@include typeahead-input();
width: 100%;
@include typeahead-input();
}
span {
@@ -135,8 +135,8 @@
}
.typeahead-dropdown {
@include typeahead-dropdown();
z-index: 1000;
@include typeahead-dropdown();
}
.typeahead-option {
@@ -149,10 +149,10 @@
width: auto;
input {
@include typeahead-input();
height: 34px;
min-width: 370px;
font-size: var(--mxs-size);
@include typeahead-input();
}
span {
@@ -160,13 +160,13 @@
}
.typeahead-dropdown {
@include typeahead-dropdown();
width: 100%;
@include typeahead-dropdown();
}
.typeahead-option {
@include typeahead-option();
font-size: var(--mxs-size);
@include typeahead-option();
}
.pointerevents {

View File

@@ -4,7 +4,6 @@
.barGroup {
border-radius: ui-vars.$px01;
@include mixins.code();
text-align: left;
padding: ui-vars.$px03;
color: ui-vars.$pink;
@@ -13,6 +12,7 @@
margin-top: ui-vars.$px02;
overflow-x: auto;
overflow-y: scroll;
@include mixins.code();
@media (max-width: 600px) {
padding: 15px;
@@ -72,7 +72,6 @@
.spanDetailsWrapper {
border-radius: ui-vars.$px01;
@include mixins.code();
text-align: left;
padding: ui-vars.$px01;
background-color: ui-vars.$white;
@@ -82,6 +81,7 @@
max-width: ui-vars.$width-tablet-2;
max-height: 500px;
overflow-y: scroll;
@include mixins.code();
&__detailsWrapper {
height: 100%;

View File

@@ -7,12 +7,12 @@ input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
@include ui-mixins.m();
padding: ui-vars.$px01 ui-vars.$px02;
border-radius: ui-vars.$px01;
border: 2px solid ui-vars.$grey;
background-color: ui-vars.$white;
color: inherit;
@include ui-mixins.m();
&:focus {
border-color: ui-vars.$dark;
@@ -110,11 +110,11 @@ fieldset {
}
label {
@include ui-mixins.m();
@include ui-mixins.font-medium();
display: flex;
align-items: center;
flex-wrap: wrap;
@include ui-mixins.font-medium();
@include ui-mixins.m();
span {
color: ui-vars.$jambonz;

View File

@@ -21,10 +21,10 @@
}
&__row {
@include ui-mixins.m();
display: grid;
padding: ui-vars.$px03;
align-items: center;
@include ui-mixins.m();
@include mixins.small() {
padding: ui-vars.$px02;

View File

@@ -30,11 +30,11 @@
}
&__title {
@include ui-mixins.p();
display: flex;
align-items: center;
grid-gap: ui-vars.$px02;
color: ui-vars.$jambonz;
@include ui-mixins.p();
+ .item__meta {
@include mixins.small() {

View File

@@ -1,3 +1,4 @@
@use "sass:color";
@use "./forms";
// @use "./cards";
@use "./lists";
@@ -68,7 +69,7 @@ details {
&.ok {
color: ui-vars.$teal;
border: 2px solid ui-vars.$teal;
background-color: mix(ui-vars.$white, ui-vars.$teal, 95%);
background-color: color.mix(ui-vars.$white, ui-vars.$teal, 95%);
}
&.not-tested {
@@ -77,8 +78,8 @@ details {
}
summary {
@include ui-mixins.m();
cursor: pointer;
@include ui-mixins.m();
+ * {
margin-top: ui-vars.$px02;
@@ -160,7 +161,6 @@ details {
/** Used for recent-calls */
.pre-grid {
@include mixins.code();
display: grid;
grid-template-columns: auto 1fr;
grid-row-gap: ui-vars.$px01;
@@ -171,6 +171,7 @@ details {
background-color: ui-vars.$dark;
border-radius: ui-vars.$px01;
margin-top: ui-vars.$px02;
@include mixins.code();
}
.pre-grid-white {

View File

@@ -15,6 +15,15 @@ export default defineConfig(() => {
src: path.resolve(__dirname, "src"),
},
},
// Configure Sass to use the modern API
css: {
preprocessorOptions: {
scss: {
api: "modern-compiler",
},
},
},
};
return config;