theme: Adds some general classes and fixes alignment for labeled flui…

…d buttons
inveniosoftware · Aug 2, 2023 · 1c29075 · 1c29075
1 parent 9af3f81
commit 1c29075
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/elements/button.overrides b/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/elements/button.overrides
@@ -114,7 +114,23 @@
     }
 
     @media all and (max-width: @largestMobileScreen) {
+      margin-right: 0;
       margin-bottom: .5rem;
     }
   }
 }
+
+
+.ui.fluid.fluid-computer-only {
+  @media all and (max-width: @largestTabletScreen) {
+    display: inline-block;
+    width: auto !important;
+  }
+}
+
+.ui.fluid.labeled.icon.button {
+  padding-left: @labeledIconWidth + @horizontalPadding !important;
+  &.compact {
+    padding-left: @labeledIconWidth + @compactHorizontalPadding !important;
+  }
+}
diff --git a/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/elements/image.overrides b/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/elements/image.overrides
@@ -15,3 +15,8 @@
     max-width: 100%;
   }
 }
+
+.ui.avatar.image {
+  min-width: @avatarSize;
+  min-height: @avatarSize;
+}
diff --git a/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/globals/site.overrides b/invenio_theme/assets/semantic-ui/less/invenio_theme/theme/globals/site.overrides
@@ -457,12 +457,14 @@ code {
   // [   COL1 (auto fill remaining space)  ] [  COL2 (max-content width)   ]
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: auto max-content;
+  grid-template-columns: auto max-content;
+  grid-auto-columns: max-content;
   align-items: center;
-  column-gap: 2rem;
+  column-gap: 1rem;
 
-  @media all and (max-width: @largestMobileScreen) {
+  @media all and (max-width: @largestTabletScreen) {
     grid-auto-flow: row;
+    grid-template-columns: minmax(100%, 100%);
     grid-auto-columns: 100%;
     align-items: flex-start;
     row-gap: 1rem;
@@ -483,6 +485,10 @@ code {
   justify-content: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .align-items-start {
   align-items: start;
 }