diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk new file mode 100644 index 0000000..60162ce --- /dev/null +++ b/source/screens/demo/examples/ui/form.njk @@ -0,0 +1,45 @@ +--- +title: Form +tags: + - demoExample + - ui +--- +{% extends "demo/_app.njk" %} + +{% block title %}{{ title }} +{% endblock %} + +{% block links %} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} + +
+
a
+
b
+
+{% endblock %} + +{%- block script %} + {{ super() }} + +{% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss new file mode 100644 index 0000000..265663c --- /dev/null +++ b/source/style/modules/ui/_form_module.scss @@ -0,0 +1,33 @@ +#form body { + margin: 0; + background-color: #808080; +} + +#head { + // display: flex; +} + +h1 { + margin: 0; +} + +#grid { + display: grid; + gap: 8px; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(64px, auto); +} + +#grid>div { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: aquamarine; +} + +#grid>div:first-child { + grid-column: 1 / 3; + background-color: violet; +} \ No newline at end of file diff --git a/source/style/ui.scss b/source/style/ui.scss index e6886e8..f74e666 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -194,4 +194,5 @@ $z-indexes: ( @import "modules/ui/new_module"; @import "modules/ui/settings_module"; -@import "modules/ui/drag_module"; \ No newline at end of file +@import "modules/ui/drag_module"; +@import "modules/ui/form_module"; \ No newline at end of file