(editorElRef.current = el)} />
+ <>
+
(editorElRef.current = el)} />
(bubbleMenuRef.current = el)} />
(floatingMenuRef.current = el)} />
-
+ >
)
}
diff --git a/src/components/Views/Create.module.scss b/src/components/Views/Create.module.scss
new file mode 100644
index 00000000..5db21e07
--- /dev/null
+++ b/src/components/Views/Create.module.scss
@@ -0,0 +1,21 @@
+.articlePreview {
+ border: 2px solid #e8e8e8;
+ min-height: 10em;
+ padding: 1rem 1.2rem;
+}
+
+.saveBlock {
+ background: #f1f1f1;
+ line-height: 1.4;
+ margin-top: 6.4rem;
+ padding: 1.6rem 3.2rem;
+ text-align: center;
+
+ @include media-breakpoint-up(md) {
+ padding: 3.2rem 8rem;
+ }
+
+ .button {
+ margin: 0 divide($container-padding-x, 2);
+ }
+}
diff --git a/src/components/Views/Create.tsx b/src/components/Views/Create.tsx
index 6a3506eb..81fa710e 100644
--- a/src/components/Views/Create.tsx
+++ b/src/components/Views/Create.tsx
@@ -1,6 +1,8 @@
import { lazy, Suspense } from 'solid-js'
import { Loading } from '../_shared/Loading'
import { useLocalize } from '../../context/localize'
+import { clsx } from 'clsx'
+import styles from './Create.module.scss'
const Editor = lazy(() => import('../Editor/Editor'))
@@ -9,7 +11,96 @@ export const CreateView = () => {
return (
}>
-
+
)
}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index deb5dcc3..9c63e997 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -316,12 +316,22 @@ button {
}
}
-.button--submit {
+.button--submit,
+.button--outline {
@include font-size(2rem);
-
padding: 1.6rem 2rem;
}
+.button--outline {
+ background: none;
+ box-shadow: inset 0 0 0 2px #000;
+ color: #000;
+
+ &:hover {
+ box-shadow: inset 0 0 0 2px #ccc;
+ }
+}
+
form {
.pretty-form__item {
position: relative;
@@ -335,6 +345,30 @@ form {
}
}
+ .pretty-form__item--with-button {
+ margin-bottom: 1.6rem;
+
+ @include media-breakpoint-up(sm) {
+ display: flex;
+ }
+
+ input {
+ flex: 1;
+
+ @include media-breakpoint-up(sm) {
+ margin-bottom: 0 !important;
+ }
+ }
+
+ *:first-child {
+ flex: 1;
+
+ @include media-breakpoint-up(sm) {
+ margin-right: 1em;
+ }
+ }
+ }
+
input[type='text'],
input[type='email'],
input[type='password'],