}
}
-
@mixin ellipsis {
white-space: nowrap;
overflow: hidden;
line-height: $font-size;
overflow: hidden;
text-overflow: ellipsis;
+ /* Let space at right for dots */
+ position: relative;
+ margin-right: -1em;
+ padding-right: 1em;
+
+ /* Display dots if the max number of lines is exceeded */
+ &::before {
+ content: "...";
+ /* set position to right bottom corner of block */
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ }
+
+ /* Hide dots if the max number of lines is not exceeded */
+ &:after {
+ content: '';
+ background-color: var(--mainBackgroundColor);
+ /* set position to right bottom corner of text */
+ position: absolute;
+ right: 0;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ }
}
@mixin prefix($property, $parameters...) {
@mixin button-focus($color) {
&:focus,
&.focus-visible {
- box-shadow: 0 0 0 .2rem $color;
+ box-shadow: #{$focus-box-shadow-form} $color;
}
}
position: absolute;
&:focus + span {
- box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
}
& + span {
width: 18px;
min-width: 18px;
height: 18px;
- border: $border-width solid $fg-color;
+ border: $border-width solid #C6C6C6;
border-radius: 3px;
vertical-align: middle;
cursor: pointer;
height: max-content;
&:focus-within {
- box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
}
}
}
}
}
+
+@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;
+ }
+ }
+}
+
+@mixin admin-sub-header-responsive ($horizontal-margins) {
+ flex-direction: column;
+
+ .form-sub-title {
+ margin-right: 0px !important;
+ margin-bottom: 10px;
+ text-align: center;
+ }
+
+ .admin-sub-nav {
+ display: block;
+ overflow-x: auto;
+ white-space: nowrap;
+ height: 50px;
+ padding: 10px 0;
+ width: calc(100vw - #{$horizontal-margins*2});
+
+ a {
+ margin-left: 5px;
+ }
+ }
+}