Add 'divided block' style

eea · Oct 7, 2020 · 65945e5 · 65945e5
1 parent 518c84f
commit 65945e5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -25,7 +25,7 @@ export default (props) => {
   return (
     <div
       className={cx(
-        'align',
+        'block align',
         style?.cssClass,
         {
           center: !Boolean(align),

diff --git a/src/index.js b/src/index.js
@@ -68,6 +68,16 @@ export const installDemoStyles = (config) => {
       ),
       // TODO: support also editComponent ?
     },
+    {
+      id: 'borderBlock',
+      title: 'Border',
+      cssClass: 'border-block',
+    },
+    {
+      id: 'dividedBlock',
+      title: 'Divided',
+      cssClass: 'divided-block',
+    },
   ];
 
   return config;

diff --git a/src/styles.less b/src/styles.less
@@ -43,3 +43,16 @@
   box-shadow: 0 0 11px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
 }
+
+.border-block {
+  border: 1px solid rgba(0,0,0, 0.2);
+  padding: 0.7rem;
+  p {margin-bottom: 0!important;}
+}
+
+.divided-block {
+  border-top: 1px solid rgba(0,0,0, 0.2);
+  border-bottom: 1px solid rgba(0,0,0, 0.2);
+  padding: 0.3rem;
+  p {margin-bottom: 0!important;}
+}