mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 00:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix

Browse source
This commit is contained in:
Adrian Ortiz 2024-09-07 12:57:00 -06:00
parent be0302771d
commit 4886332ff5
2 changed files with 66 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

130
src/tools/border-generator/border-generator.vue
View file

@ -72,71 +72,6 @@ border-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRi
}); });
</script> </script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.square {
width: 250px;
height: 250px;
background-color: #f3f3f3;
}
.controls {
width: 100%;
}
.radius-controls,
.border-controls {
display: flex;
justify-content: space-around;
align-items: center;
gap: 20px;
}
.half-slider,
.border-width-slider {
position: relative;
padding: 10px 0;
width: 60%;
}
.half-slider span,
.border-width-slider span {
position: absolute;
right: 0;
top: 30px;
background-color: #fff;
padding: 2px 6px;
border-radius: 5px;
font-size: 0.9em;
color: #333;
}
.border-style-select {
width: 30%;
}
n-slider {
width: calc(100% - 60px);
}
.controls .n-form-item__label {
min-width: 70px;
text-align: right;
}
n-select,
n-color-picker {
width: 100%;
}
</style>
<template> <template>
<div class="container"> <div class="container">
<div class="square" :style="styleObject" /> <div class="square" :style="styleObject" />
@ -212,3 +147,68 @@ n-color-picker {
</NCard> </NCard>
</div> </div>
</template> </template>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.square {
width: 250px;
height: 250px;
background-color: #f3f3f3;
}
.controls {
width: 100%;
}
.radius-controls,
.border-controls {
display: flex;
justify-content: space-around;
align-items: center;
gap: 20px;
}
.half-slider,
.border-width-slider {
position: relative;
padding: 10px 0;
width: 60%;
}
.half-slider span,
.border-width-slider span {
position: absolute;
right: 0;
top: 30px;
background-color: #fff;
padding: 2px 6px;
border-radius: 5px;
font-size: 0.9em;
color: #333;
}
.border-style-select {
width: 30%;
}
n-slider {
width: calc(100% - 60px);
}
.controls .n-form-item__label {
min-width: 70px;
text-align: right;
}
n-select,
n-color-picker {
width: 100%;
}
</style>

2
src/tools/index.ts
View file

@ -211,5 +211,5 @@ export const toolsByCategory: ToolCategory[] = [
export const tools = toolsByCategory.flatMap(({ components }) => components); export const tools = toolsByCategory.flatMap(({ components }) => components);
export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) => export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
components.map((tool) => ({ category: name, ...tool })), components.map(tool) => ({ category: name, ...tool }),
); );