From e5da1f532334a265e1b1c88d2a942e92654370d6 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sun, 13 Jun 2021 00:14:38 +0200 Subject: Replace the flex layout in favor of a grid layout This commit replaces the initial CSS flexbox layout for forms of the admin theme with a more elegant approach called "grid layout". :) Some interesting information: https://www.w3schools.com/css/css_grid.asp https://blog.logrocket.com/flexbox-vs-css-grid/ --- theme/admin/html/auth.php | 26 ++++--- theme/admin/html/database.php | 6 +- theme/admin/html/page/form.php | 86 +++++++++++---------- theme/admin/html/page/search.php | 6 +- theme/admin/html/post/form.php | 86 +++++++++++---------- theme/admin/html/post/search.php | 6 +- theme/admin/html/user/form.php | 98 +++++++++++++----------- theme/admin/rsrc/css/import/_responsive.scss | 19 ++--- theme/admin/rsrc/css/main.css | 108 +++++++++++---------------- theme/admin/rsrc/css/main.css.map | 2 +- theme/admin/rsrc/css/main.scss | 99 ++++++++++++------------ 11 files changed, 265 insertions(+), 277 deletions(-) (limited to 'theme') diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php index c1dedda..a7b8b74 100644 --- a/theme/admin/html/auth.php +++ b/theme/admin/html/auth.php @@ -14,21 +14,23 @@
-
-
-
-
-
+
+ + +
+
-
-
-
-
-
-
+ + + +
+
-
+ +
diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php index 5062ae1..b661a28 100644 --- a/theme/admin/html/database.php +++ b/theme/admin/html/database.php @@ -14,17 +14,17 @@
-
+
-
+
-
+
diff --git a/theme/admin/html/page/form.php b/theme/admin/html/page/form.php index d26b207..eee61bf 100644 --- a/theme/admin/html/page/form.php +++ b/theme/admin/html/page/form.php @@ -12,49 +12,55 @@ -
-
-
-
-
id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
+
+ + +
+ id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
-
-
-
-
- -
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
+ +
  • @@ -70,23 +76,23 @@
-
+
    $explanation):?>
-
+
-
+
-
+
diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php index a48f604..6506d34 100644 --- a/theme/admin/html/page/search.php +++ b/theme/admin/html/page/search.php @@ -2,10 +2,10 @@

text('search_page_desc')?>

-
+
-
+
@@ -14,4 +14,4 @@ -
\ No newline at end of file +
diff --git a/theme/admin/html/post/form.php b/theme/admin/html/post/form.php index e6966ea..58ac122 100644 --- a/theme/admin/html/post/form.php +++ b/theme/admin/html/post/form.php @@ -12,49 +12,55 @@ -
-
-
-
-
id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
+
+ + +
+ id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
-
-
-
-
- -
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
+ +
  • @@ -70,23 +76,23 @@
-
+
    $explanation):?>
-
+
-
+
-
+
diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php index 4476786..1289879 100644 --- a/theme/admin/html/post/search.php +++ b/theme/admin/html/post/search.php @@ -2,10 +2,10 @@

text('search_post_desc')?>

-
+
-
+
@@ -14,4 +14,4 @@ -
\ No newline at end of file +
diff --git a/theme/admin/html/user/form.php b/theme/admin/html/user/form.php index 970a6d9..7e370e5 100644 --- a/theme/admin/html/user/form.php +++ b/theme/admin/html/user/form.php @@ -12,55 +12,65 @@ -
-
-
-
-
id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
+
+ + +
+ id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
+ +
  • @@ -76,23 +86,23 @@
-
+
    $explanation):?>
-
+
-
+
-
+
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index a8275bf..2d3d62a 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -12,19 +12,6 @@ # Responsive Level #2 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { - .flex.flex-responsive { - display: block; - width: auto; - - > .flex-item { - width: 100%; - - + .flex-item { - border-top: 0.05rem solid #AAA; - } - } - } - #main-navi { font-size: 1rem; @@ -43,10 +30,14 @@ } } - .flex-emoticons { + #emoticon-list-wrapper { display: none; } + .form-grid { + grid-template-columns: auto auto; + } + .actions { float: none; display: flex; diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css index d440684..2677f19 100644 --- a/theme/admin/rsrc/css/main.css +++ b/theme/admin/rsrc/css/main.css @@ -476,79 +476,63 @@ table, td { } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form flex-box +# Grids ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -form { - border: 0.05rem solid #AAA; -} - -.flex { - display: flex; - width: 100%; - justify-content: center; - overflow: hidden; - box-sizing: border-box; -} -.flex + .flex { - border-top: 0.05rem solid #AAA; -} - -.flex > .flex-item { - border-right: 0.05rem solid #AAA; - display: flex; - width: 100%; +.form-grid { + display: grid; + grid-template-columns: 8rem auto 8rem auto; + border-left: 0.05rem solid #AAA; + border-bottom: 0.05rem solid #AAA; } -.flex > .flex-item:last-child { - border-right: none; +.form-grid.two-columns { + grid-template-columns: auto auto; } -.flex > .flex-item > div { +.form-grid > label { display: flex; align-items: center; - padding: 0.5rem; - box-sizing: border-box; + background: #DDD; } -.flex > .flex-item > div + div { - border-left: 0.05rem solid #AAA; +.form-grid > label .fa { + margin-left: 0.5rem; + margin-right: 1rem; } - -.flex.flex-responsive > .flex-item { - width: 50%; -} - -.form-icon-flex { - background: #DDD; - width: 10%; - justify-content: center; +.form-grid-item, +.form-grid > label { + padding: 0.5rem; + border-top: 0.05rem solid #AAA; + border-right: 0.05rem solid #AAA; } -.form-label-flex { - background: #DDD; - width: 30%; - border-left: none !important; +.form-border-box { + border: 0.05rem solid #AAA; } - -.form-field-flex { - width: 60%; +.form-border-box.padding { + padding: 0.5rem; } - -.background { +.form-border-box.background { background: #DDD; } - -.flex-padding { - padding: 0.5rem; +.form-border-box.nobordertop { + border-top: none; } - -.flex-direction-column { - flex-direction: column; +.form-border-box + .form-border-box { + border-top: none; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form buttons ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#emoticon-list-wrapper { + display: flex; + width: 100%; + justify-content: center; + box-sizing: border-box; +} + #button-list-wrapper { border-bottom: 0.05rem solid #AAA; background: #EEE; + overflow: hidden; } .button-list { @@ -585,6 +569,9 @@ form { border: none; margin: 0; } +#content-editor-wrapper { + border-top: none; +} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form elements @@ -606,7 +593,7 @@ input:focus, select:focus, textarea:focus { textarea { font-family: "Kadwa", "sans-serif"; box-sizing: border-box; - display: inline-block; + display: block; resize: vertical; min-height: 15rem; line-height: 1.2rem; @@ -692,17 +679,6 @@ label:after { # Responsive Level #2 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { - .flex.flex-responsive { - display: block; - width: auto; - } - .flex.flex-responsive > .flex-item { - width: 100%; - } - .flex.flex-responsive > .flex-item + .flex-item { - border-top: 0.05rem solid #AAA; - } - #main-navi { font-size: 1rem; } @@ -716,10 +692,14 @@ label:after { padding: 0.5rem; } - .flex-emoticons { + #emoticon-list-wrapper { display: none; } + .form-grid { + grid-template-columns: auto auto; + } + .actions { float: none; display: flex; diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map index 4f2ac93..3c7b8ab 100644 --- a/theme/admin/rsrc/css/main.css.map +++ b/theme/admin/rsrc/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AC5tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;AAAA;EAEC;EACA;EACA;;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;;;AC9tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;ACpEF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss index c60f354..e00c60a 100644 --- a/theme/admin/rsrc/css/main.scss +++ b/theme/admin/rsrc/css/main.scss @@ -527,83 +527,72 @@ table, td { } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form flex-box +# Grids ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -form { - border: 0.05rem solid #AAA; -} - -.flex { - display: flex; - width: 100%; - justify-content: center; - overflow: hidden; - box-sizing: border-box; +.form-grid { + display: grid; + grid-template-columns: 8rem auto 8rem auto; - + .flex { - border-top: 0.05rem solid #AAA; - } -} - -.flex > .flex-item { - border-right: 0.05rem solid #AAA; - display: flex; - width: 100%; + border-left: 0.05rem solid #AAA; + border-bottom: 0.05rem solid #AAA; - &:last-child { - border-right: none; + &.two-columns { + grid-template-columns: auto auto; } - > div { + > label { display: flex; align-items: center; - padding: 0.5rem; - box-sizing: border-box; + background: #DDD; - + div { - border-left: 0.05rem solid #AAA; + .fa { + margin-left: 0.5rem; + margin-right: 1rem; } } -} -.flex.flex-responsive > .flex-item { - width: 50%; -} - -.form-icon-flex { - background: #DDD; - width: 10%; - justify-content: center; + &-item, + > label { + padding: 0.5rem; + border-top: 0.05rem solid #AAA; + border-right: 0.05rem solid #AAA; + } } -.form-label-flex { - background: #DDD; - width: 30%; - border-left: none !important; -} +.form-border-box { + border: 0.05rem solid #AAA; -.form-field-flex { - width: 60%; -} + &.padding { + padding: 0.5rem; + } -.background { - background: #DDD; -} + &.background { + background: #DDD; + } -.flex-padding { - padding: 0.5rem; -} + &.nobordertop { + border-top: none; + } -.flex-direction-column { - flex-direction: column; + +.form-border-box { + border-top: none; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form buttons ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#emoticon-list-wrapper { + display: flex; + width: 100%; + justify-content: center; + box-sizing: border-box; +} + #button-list-wrapper { border-bottom: 0.05rem solid #AAA; background: #EEE; + overflow: hidden; } .button-list { @@ -641,6 +630,10 @@ form { #content-editor { border: none; margin: 0; + + &-wrapper { + border-top: none; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -664,7 +657,7 @@ input, select, textarea { textarea { font-family: "Kadwa", "sans-serif"; box-sizing: border-box; - display: inline-block; + display: block; resize: vertical; min-height: 15rem; line-height: 1.2rem; -- cgit v1.2.3