aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_mixins.scss54
1 files changed, 54 insertions, 0 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 975072637..3c420f547 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -796,3 +796,57 @@
796 } 796 }
797 } 797 }
798} 798}
799
800@mixin chip {
801 $avatar-height: 1.2rem;
802
803 align-items: center;
804 border-radius: 5rem;
805 display: inline-flex;
806 font-size: 90%;
807 color: var(--mainForegroundColor);
808 height: $avatar-height;
809 line-height: .8rem;
810 margin: .1rem;
811 max-width: 320px;
812 overflow: hidden;
813 padding: .2rem .4rem;
814 text-decoration: none;
815 text-overflow: ellipsis;
816 vertical-align: middle;
817 white-space: nowrap;
818
819 .avatar {
820 margin-left: -.4rem;
821 margin-right: .2rem;
822 height: $avatar-height;
823 width: $avatar-height;
824
825 border-radius: 50%;
826 display: inline-block;
827 line-height: 1.25;
828 position: relative;
829 vertical-align: middle;
830 }
831
832 &.two-lines {
833 $avatar-height: 1.8rem;
834
835 height: $avatar-height;
836
837 .avatar {
838 height: $avatar-height;
839 width: $avatar-height;
840 }
841
842 div {
843 display: flex;
844 flex-direction: column;
845 font-size: 80%;
846 height: $avatar-height;
847 margin-left: .1rem;
848 margin-right: .1rem;
849 justify-content: center;
850 }
851 }
852}