Rich reporter field and video embed in moderation abuse list

[oweals/peertube.git] / client / src / sass / include / _mixins.scss

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 975072637b8a93e6be807cdede79e11908ecf043..3c420f547ba9b40dd37ec9c73a02417898171e75 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -796,3 +796,57 @@
     }
   }
 }
+
+@mixin chip {
+  $avatar-height: 1.2rem;
+
+  align-items: center;
+  border-radius: 5rem;
+  display: inline-flex;
+  font-size: 90%;
+  color: var(--mainForegroundColor);
+  height: $avatar-height;
+  line-height: .8rem;
+  margin: .1rem;
+  max-width: 320px;
+  overflow: hidden;
+  padding: .2rem .4rem;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  .avatar {
+    margin-left: -.4rem;
+    margin-right: .2rem;
+    height: $avatar-height;
+    width: $avatar-height;
+
+    border-radius: 50%;
+    display: inline-block;
+    line-height: 1.25;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  &.two-lines {
+    $avatar-height: 1.8rem;
+
+    height: $avatar-height;
+
+    .avatar {
+      height: $avatar-height;
+      width: $avatar-height;
+    }
+
+    div {
+      display: flex;
+      flex-direction: column;
+      font-size: 80%;
+      height: $avatar-height;
+      margin-left: .1rem;
+      margin-right: .1rem;
+      justify-content: center;
+    }
+  }
+}