diff --git a/gulpfile.js b/gulpfile.js index e688c9a..6a9a40f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -37,7 +37,6 @@ async function html() { } async function css() { - console.log('restyling ...') return src(['./src/pages/**/*.css', './src/components/**/*.css']) .pipe(concat('styles.css')) .pipe(postcss([combineMq])) diff --git a/src/components/form/listbox/listbox.css b/src/components/form/listbox/listbox.css index 7270db1..2f7003b 100644 --- a/src/components/form/listbox/listbox.css +++ b/src/components/form/listbox/listbox.css @@ -1,4 +1,14 @@ .list-container{ display: flex; 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); } \ No newline at end of file diff --git a/src/components/form/listbox/listbox.html b/src/components/form/listbox/listbox.html index efea68e..8793f92 100644 --- a/src/components/form/listbox/listbox.html +++ b/src/components/form/listbox/listbox.html @@ -1,9 +1,9 @@
\ No newline at end of file diff --git a/src/pages/css/vars.css b/src/pages/css/vars.css index 4888d01..4edb78b 100644 --- a/src/pages/css/vars.css +++ b/src/pages/css/vars.css @@ -8,4 +8,9 @@ --def-radius: 4px; --def-border-color: #e5e7eb; + + --form-small-width: 132px; + --form-mid-width: 264px; + --form-big-width: 528px; + } \ No newline at end of file diff --git a/src/pages/example/example.html b/src/pages/example/example.html index 0094a3c..71bb256 100644 --- a/src/pages/example/example.html +++ b/src/pages/example/example.html @@ -8,7 +8,9 @@
-
+
+ @@include('../../components/form/listbox/listbox.html') +
\ No newline at end of file