yaroslav/webdev-vacancy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add component to example page

Browse Source
This commit is contained in:
yaroslav
2026-01-21 15:19:38 +02:00
parent c9660f4bd8
commit d833fdbcc2
5 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gulpfile.js
-1
View File
@@ -37,7 +37,6 @@ async function html() {
} }
async function css() { async function css() {
console.log('restyling ...')
return src(['./src/pages/**/*.css', './src/components/**/*.css']) return src(['./src/pages/**/*.css', './src/components/**/*.css'])
.pipe(concat('styles.css')) .pipe(concat('styles.css'))
.pipe(postcss([combineMq])) .pipe(postcss([combineMq]))
src/components/form/listbox/listbox.css
+10
View File
@@ -1,4 +1,14 @@
.list-container{ .list-container{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid var(--def-border-color);
border-radius: var(--def-radius);
padding: 2px;
width: var(--form-mid-width);
}
.list-option{
padding: 0.4rem 0.6rem;
cursor: pointer;
border-radius: var(--def-radius);
} }
src/components/form/listbox/listbox.html
+5 -5
View File
@@ -1,9 +1,9 @@
<div class="listbox"> <div class="listbox">
<ul class="list-container"> <ul class="list-container">
<li>New York</li> <li class="list-option">New York</li>
<li>Rome</li> <li class="list-option">Rome</li>
<li>London</li> <li class="list-option">London</li>
<li>Istanbul</li> <li class="list-option">Istanbul</li>
<li>Paris</li> <li class="list-option">Paris</li>
</ul> </ul>
</div> </div>
src/pages/css/vars.css
+5
View File
@@ -8,4 +8,9 @@
--def-radius: 4px; --def-radius: 4px;
--def-border-color: #e5e7eb; --def-border-color: #e5e7eb;
--form-small-width: 132px;
--form-mid-width: 264px;
--form-big-width: 528px;
} }
src/pages/example/example.html
+3 -1
View File
@@ -8,7 +8,9 @@
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<div class="preview"></div> <div class="preview">
@@include('../../components/form/listbox/listbox.html')
</div>
</div> </div>
</body> </body>
</html> </html>