From 8f03c2aea7910aaf00c7cc47f4f9cf4c9ac56a29 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Fri, 2 Sep 2022 12:57:30 +0200
Subject: [PATCH] Add some handy css classes

---
 app/static/css/helpers.scss | 31 +++++++++++++++++++++++++++++++
 app/static/css/style.css    | 11 ++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 app/static/css/helpers.scss

diff --git a/app/static/css/helpers.scss b/app/static/css/helpers.scss
new file mode 100644
index 00000000..b7595c26
--- /dev/null
+++ b/app/static/css/helpers.scss
@@ -0,0 +1,31 @@
+/*
+ * Spacing
+ */
+$spacing-shortcuts: ("margin": "mg", "padding": "pd");
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l");
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto);
+
+@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
+  @each $spacing-name, $spacing-value in $spacing-values {
+    // All directions
+    .#{$spacing-shortcut-value}-#{$spacing-name} {
+      #{$spacing-shortcut-name}: $spacing-value !important;
+    }
+    // Horizontal axis
+    .#{$spacing-shortcut-value}x-#{$spacing-name} {
+      #{$spacing-shortcut-name}-left: $spacing-value !important;
+      #{$spacing-shortcut-name}-right: $spacing-value !important;
+    }
+    // Vertical axis
+    .#{$spacing-shortcut-value}y-#{$spacing-name} {
+      #{$spacing-shortcut-name}-top: $spacing-value !important;
+      #{$spacing-shortcut-name}-bottom: $spacing-value !important;
+    }
+    // Cardinal directions
+    @each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
+      .#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
+        #{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
+      }
+    }
+  }
+}
diff --git a/app/static/css/style.css b/app/static/css/style.css
index 0a6c575a..e0c288b5 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -49,5 +49,14 @@ h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons, .tab
 .nopaque-icons.service-icon[data-service="spacy-nlp-pipeline"]:empty:before {content: "G";}
 .nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
 
-.hoverable {cursor: pointer;}
+.clickable {
+  cursor: pointer !important;
+  pointer-events: all !important;
+}
 .chip.s-attr .chip.p-attr {background-color: inherit;}
+
+
+.width-25 {width: 25%;}
+.width-50 {width: 50%;}
+.width-75 {width: 75%;}
+.width-100 {width: 100%;}