1 files changed, 101 insertions, 6 deletions
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index d854d28807..ff858ef283 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -1,6 +1,101 @@
-.flex-0 {
-  flex: 0;
-}
-.flex-1 {
-  flex: 1;
-}
+.df { display: flex; }
+.ac { align-items: center; }
+.jc { justify-content: center; }
+
+.m-0 { margin: 0 !important; }
+.m-1 { margin: .125rem !important; }
+.m-2 { margin: .25rem !important; }
+.m-3 { margin: .5rem !important; }
+.m-4 { margin: 1rem !important; }
+.m-5 { margin: 2rem !important; }
+
+.ml-0 { margin-left: 0 !important; }
+.ml-1 { margin-left: .125rem !important; }
+.ml-2 { margin-left: .25rem !important; }
+.ml-3 { margin-left: .5rem !important; }
+.ml-4 { margin-left: 1rem !important; }
+.ml-5 { margin-left: 2rem !important; }
+
+.mr-0 { margin-right: 0 !important; }
+.mr-1 { margin-right: .125rem !important; }
+.mr-2 { margin-right: .25rem !important; }
+.mr-3 { margin-right: .5rem !important; }
+.mr-4 { margin-right: 1rem !important; }
+.mr-5 { margin-right: 2rem !important; }
+
+.mt-0 { margin-top: 0 !important; }
+.mt-1 { margin-top: .125rem !important; }
+.mt-2 { margin-top: .25rem !important; }
+.mt-3 { margin-top: .5rem !important; }
+.mt-4 { margin-top: 1rem !important; }
+.mt-5 { margin-top: 2rem !important; }
+
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: .125rem !important; }
+.mb-2 { margin-bottom: .25rem !important; }
+.mb-3 { margin-bottom: .5rem !important; }
+.mb-4 { margin-bottom: 1rem !important; }
+.mb-5 { margin-bottom: 2rem !important; }
+
+.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
+.mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
+.mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
+.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
+.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
+.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
+
+.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
+.my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
+.my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
+.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
+.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
+
+.p-0 { padding: 0 !important; }
+.p-1 { padding: .125rem !important; }
+.p-2 { padding: .25rem !important; }
+.p-3 { padding: .5rem !important; }
+.p-4 { padding: 1rem !important; }
+.p-5 { padding: 2rem !important; }
+
+.pl-0 { padding-left: 0 !important; }
+.pl-1 { padding-left: .125rem !important; }
+.pl-2 { padding-left: .25rem !important; }
+.pl-3 { padding-left: .5rem !important; }
+.pl-4 { padding-left: 1rem !important; }
+.pl-5 { padding-left: 2rem !important; }
+
+.pr-0 { padding-right: 0 !important; }
+.pr-1 { padding-right: .125rem !important; }
+.pr-2 { padding-right: .25rem !important; }
+.pr-3 { padding-right: .5rem !important; }
+.pr-4 { padding-right: 1rem !important; }
+.pr-5 { padding-right: 2rem !important; }
+
+.pt-0 { padding-top: 0 !important; }
+.pt-1 { padding-top: .125rem !important; }
+.pt-2 { padding-top: .25rem !important; }
+.pt-3 { padding-top: .5rem !important; }
+.pt-4 { padding-top: 1rem !important; }
+.pt-5 { padding-top: 2rem !important; }
+
+.pb-0 { padding-bottom: 0 !important; }
+.pb-1 { padding-bottom: .125rem !important; }
+.pb-2 { padding-bottom: .25rem !important; }
+.pb-3 { padding-bottom: .5rem !important; }
+.pb-4 { padding-bottom: 1rem !important; }
+.pb-5 { padding-bottom: 2rem !important; }
+
+.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
+.px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
+.px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
+.px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
+.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
+.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
+
+.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+.py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
+.py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
+.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
+.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }