$high-priority-color: hsl(360, 71%, 60%); $low-priority-color: hsl(200, 68%, 73%); $minWidth: 1024px; $sidebarWidth: 280px; $desktopSidebarWidth: 360px; $navigationWidth: 260px; $mobileNavigationWidth: 50px; $mobileNavigationWidthOpen: 220px; :root { --button-action-color: hsl(0, 0%, 60%); --button-background: white; --button-background-active: hsl(0, 0, 98%); --button-active: hsl(204, 7%, 28%); --button-active-active: hsla(0, 0%, 0%, 0.55); --button-primary-text: var(--text-inverted); --button-primary-background: hsl(203, 65%, 55%); --button-primary-background-active: hsl(203, 65%, 45%); --header-primary: hsl(202, 8%, 28%); --header-secondary: hsl(198, 10%, 69%); --text-normal: hsl(60, 1%, 34%); --text-muted: hsl(213, 3%, 64%); --text-muted-highlight: hsl(205, 90%, 90%); --text-muted-alt: hsl(197, 16%, 65%); --text-link: hsl(204, 72%, 50%); --text-inverted: white; --text-active: white; --text-nav: hsl(204, 72%, 50%); --text-button-primary: var(--button-primary-background); --text-button-primary-active: var(--button-primary-background-active); --text-button-secondary: var(--interactive-muted); --nav-icon: hsl(0, 0%, 50%); --highlight: hsl(205, 90%, 60%); --interactive-primary: black; --interactive-muted: hsl(210, 3%, 71%); --interactive-muted-active: hsl(210, 4%, 71%); --interactive-muted-alt: hsl(197, 19%, 78%); --interactive-muted-alt-selected: hsl(206, 7%, 37%); --background-primary: hsl(210, 17%, 98%); --background-primary-alt: hsl(197, 16%, 94%); --background-secondary: white; --background-secondary-hover: hsl(239, 4%, 95%); --background-tertiary: hsl(233, 9%, 19%); --background-quaternary: hsl(231, 9%, 16%); --background-quaternary-alt: hsl(228, 17%, 91%); --background-popover: white; --background-active: hsl(233, 9%, 19%); --background-highlight: hsl(200, 100%, 91%); --background-article-meta: hsl(212, 14%, 99%); --background-article-customer: hsl(201, 46%, 93%); --background-article-customer-meta: hsl(201, 43%, 96%); --background-modifier-accent: hsla(0, 0%, 0%, 0.04); --background-modifier-accent-light: hsla(0, 0%, 0%, 0.02); --background-modifier-accent-dark: hsla(0, 0%, 0%, 0.3); --background-modifier-lighter: hsla(0, 0%, 100%, 0.06); --background-modifier-border: hsla(0, 0%, 0%, 0.1); --background-modifier-hover: hsla(240, 3%, 50%, 0.1); --backdrop-clue-start: hsla(202, 68%, 54%, 0.1); --backdrop-clue-end: hsla(202, 68%, 54%, 0.9); --border: hsl(0, 0%, 90%); --border-alt: hsl(198, 18%, 86%); --border-highlight: hsl(200, 71%, 59%); --border-internal: hsl(18, 91%, 89%); --border-internal-stripe: hsl(18, 94%, 95%); --border-article-customer: hsl(199, 38%, 90%); --border-article-customer-selected: hsl(199, 44%, 85%); --shadow-highlight: hsl(201, 62%, 90%); --supergood-color: hsl(145, 51%, 45%); --good-color: hsl(62, 45%, 46%); --ok-color: hsl(41, 100%, 49%); --bad-color: hsl(30, 93%, 50%); --superbad-color: hsl(19, 90%, 51%); --ghost-color: hsl(0, 0%, 74%); --danger-color: hsl(0, 65%, 55%); --pending-color: hsl(206, 7%, 28%); --elevation-stroke: 0 1px hsl(210, 7%, 94%); --elevation-low: 0 1px 5px hsla(205, 30%, 30%, 0.1); --elevation-high: 0 1px 14px hsla(208, 95%, 3%, 0.25); --highlighter-yellow: hsl(48, 81%, 82%); --highlighter-green: hsl(105, 54%, 80%); --highlighter-blue: hsl(207, 92%, 85%); --highlighter-pink: hsl(338, 90%, 82%); --highlighter-purple: hsl(288, 62%, 86%); --file-icon-background: white; --file-icon-color: hsl(198, 18%, 86%); --tag-text: hsl(198, 5%, 41%); --tag-background: hsl(198, 19%, 92%); --fullscreen-background: var(--background-tertiary); --fullscreen-text: var(--text-muted); --fullscreen-text-link: var(--text-inverted); --fullscreen-text-muted: hsl(233, 7%, 26%); --fullscreen-drop-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); --menu-text: hsl(0, 0%, 74%); --menu-text-active: white; --menu-text-open: white; --menu-text-closed: white; --menu-text-escalating: white; --menu-background-active: var(--button-primary-background); --menu-icon: hsl(206, 5%, 42%); --menu-icon-secondary: hsl(0, 0%, 30%); --menu-icon-secondary-hover-background: var(--text-inverted); --menu-switch-background: hsl(0, 0%, 5%); --menu-switch-pointer: var(--background-tertiary); --menu-switch-pointer-active: var(--menu-text-active); --menu-background-primary: var(--background-quaternary); --menu-background-primary-hover: hsla(0, 0%, 0%, 0.3); --menu-background-secondary: var(--background-tertiary); --menu-close-tab-background: var(--background-tertiary); --menu-close-tab-opacity: 0.3; --menu-border: none; --menu-border-secondary: none; } // dark mode [data-theme='dark'] { --button-action-color: hsl(0, 0%, 80%); --button-background: hsla(0, 0%, 100%, 0.03); --button-background-active: hsla(0, 0%, 100%, 0.015); --button-active: hsla(0, 0%, 100%, 0.1); --button-active-active: hsla(0, 0%, 100%, 0.08); --header-primary: white; --header-secondary: hsl(198, 5%, 73%); --text-normal: hsl(205, 1%, 86%); --text-muted: hsl(213, 3%, 60%); --text-muted-alt: hsl(213, 8%, 61%); --text-link: hsl(202, 72%, 50%); --text-nav: hsl(205, 1%, 84%); --nav-icon: hsl(0, 0%, 50%); --highlight: hsl(205, 90%, 60%); --interactive-primary: white; --interactive-muted: hsl(213, 3%, 64%); --interactive-muted-active: hsl(213, 3%, 35%); --interactive-muted-alt: hsl(209, 5%, 35%); --interactive-muted-alt-selected: hsl(205, 4%, 75%); --background-primary: hsl(230, 5%, 19%); --background-primary-alt: hsl(230, 5%, 21%); --background-secondary: hsl(230, 5%, 23%); --background-secondary-hover: hsl(230, 5%, 20%); --background-tertiary: hsl(230, 7%, 17%); --background-quaternary: hsl(230, 7%, 13%); --background-quaternary-alt: hsl(230, 4%, 30%); --background-popover: hsl(216, 3%, 30%); --background-active: var(--highlight); --background-highlight: hsl(205, 30%, 27%); --background-article-meta: hsl(230, 7%, 25%); --background-article-customer: hsl(218, 8%, 32%); --background-article-customer-meta: hsl(218, 6%, 30%); --background-modifier-accent: hsla(0, 0%, 0%, 0.12); --background-modifier-accent-light: hsla(0, 0%, 0%, 0.06); --background-modifier-accent-dark: hsla(0, 0%, 0%, 0.3); --background-modifier-lighter: hsla(0, 0%, 100%, 0.08); --background-modifier-border: hsla(0, 0%, 0%, 0.17); --background-modifier-hover: hsla(230, 5%, 36%, 0.4); --backdrop-clue-start: hsla(202, 68%, 54%, 0.1); --backdrop-clue-end: hsla(202, 68%, 54%, 0.9); --border: hsl(230, 4%, 17%); --border-alt: hsl(230, 7%, 18%); --border-highlight: hsl(205, 70%, 50%); --border-internal: hsl(18, 30%, 39%); --border-internal-stripe: hsl(18, 30%, 30%); --border-article-customer: hsl(209, 6%, 30%); --border-article-customer-selected: hsl(199, 10%, 33%); --shadow-highlight: hsl(205, 42%, 36%); --supergood-color: hsl(145, 51%, 45%); --good-color: hsl(62, 45%, 46%); --ok-color: hsl(41, 100%, 49%); --bad-color: hsl(30, 93%, 50%); --superbad-color: hsl(19, 90%, 51%); --ghost-color: hsl(0, 0%, 50%); --danger-color: hsl(0, 82%, 59%); --pending-color: hsl(205, 1%, 44%); --elevation-stroke: 0 1px hsla(0, 0%, 0%, 0.13); --elevation-low: 0 1px 5px hsla(0, 0%, 0%, 0.15); --elevation-high: 0 1px 14px hsla(0, 0%, 0%, 0.25); --highlighter-yellow: hsl(48, 34%, 30%); --highlighter-green: hsl(105, 34%, 27%); --highlighter-blue: hsl(207, 41%, 30%); --highlighter-pink: hsl(338, 28%, 30%); --highlighter-purple: hsl(288, 22%, 36%); --file-icon-background: hsl(216, 5%, 77%); --file-icon-color: hsl(230, 7%, 21%); --tag-text: var(--text-normal); --tag-background: hsl(230, 5%, 32%); } @mixin dark { [data-theme='dark'] & { @content; } } @mixin desktop { @media screen and (min-width: 1260px) { @content; } } @mixin small-desktop { @media screen and (max-width: 1260px) { @content; } } @mixin tablet { @media screen and (min-width: 768px) { @content; } } @mixin phone { #app.navigation-collapsed & { @content; } @media screen and (max-width: 767px) { @content; } } /* sets LTR and RTL within the same style call */ @mixin bidi-style($prop, $value, $inverse-prop, $default-value) { #{$prop}: $value; html[dir='rtl'] & { #{$inverse-prop}: $value; #{$prop}: $default-value; } } /* adds a property only in RTL */ @mixin rtl($prop, $value) { html[dir='rtl'] & { #{$prop}: $value; } } /* adds a property only in LTR */ @mixin ltr($prop, $value) { html[dir='ltr'] & { #{$prop}: $value; } } %clickable { cursor: pointer; user-select: none; touch-action: manipulation; } html { height: 100%; } body { font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-variant-ligatures: none; line-height: 1.45; background: var(--background-primary); height: 100%; color: var(--text-normal); word-wrap: break-word; overflow-wrap: break-word; display: flex; flex-direction: column; } /* prevent clickable <use xlink:href="#icon-abc"></use> */ use { pointer-events: none; } p { margin: 12px 0; &.subtle { color: var(--text-muted); } &.description { color: var(--text-muted); } } h3 + .description { margin-top: 0; } strong { font-weight: 500; } hr { border-top-color: var(--background-modifier-border); } .inherit-color { color: inherit; } .text-muted { color: var(--text-muted); } .text-placeholder { color: var(--interactive-muted); } .text-small { font-size: 12px; } .u-highlight { color: var(--text-link); } .u-dontfold { flex-shrink: 0; } .u-invisible { opacity: 0; pointer-events: none; position: absolute !important; } [data-dir='ltr'] { direction: ltr; } [data-dir='rtl'] { direction: rtl; } a { outline: none !important; @extend .u-highlight; &.is-disabled, &[disabled] { pointer-events: none; cursor: not-allowed !important; opacity: 0.33; } } a.create { color: hsl(145, 51%, 45%); text-decoration: underline; } small { color: var(--text-muted); font-size: 12px; } blockquote { font-size: inherit; } ol, ul { padding-inline-start: 20px; } #app { display: flex; flex: 1; min-width: $minWidth; overflow: auto; -webkit-overflow-scrolling: touch; @include phone { min-width: auto; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } } .u-unclickable { pointer-events: none; } .u-low-opacity { opacity: 60%; } .u-clickable { @extend %clickable; } .u-unselectable { pointer-events: none; user-select: none; } .u-no-userselect { user-select: none; } .u-textTruncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-positionOrigin { position: relative; } .u-inlineBlock { display: inline-block; } .u-inlinePad { margin: 0 5px; } .u-notAllowed { cursor: not-allowed; } .u-overflow-wrap { word-break: break-word; @supports (overflow-wrap: anywhere) { overflow-wrap: anywhere; word-break: unset; } } .u-breakNormal.u-breakNormal { word-break: normal; @supports (overflow-wrap: normal) { overflow-wrap: normal; } } .u-breakWords.u-breakWords { word-break: break-word; @supports (overflow-wrap: break-word) { overflow-wrap: break-word; word-break: unset; } } .zIndex-1 { z-index: 100; } .zIndex-2 { z-index: 200; } .zIndex-3 { z-index: 300; } .zIndex-4 { z-index: 400; } .zIndex-5 { z-index: 500; } .zIndex-6 { z-index: 600; } .zIndex-7 { z-index: 700; } .zIndex-8 { z-index: 800; } .zIndex-9 { z-index: 900; } .zIndex-10 { z-index: 1000; } .zIndex-11 { z-index: 1100; } .zIndex-12 { z-index: 1200; } .clickCatcher { top: 0; left: 0; width: 100%; height: 100%; position: absolute; cursor: default; } .debug .clickCatcher { background: hsla(0, 100%, 50%, 0.13); } .debug .clickCatcher + .clickCatcher { background: hsla(50, 100%, 50%, 0.13); } .clearfix::after { visibility: hidden; display: block; font-size: 0; content: ' '; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \ */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ /* Avoid too broad selectors, since they can affect unintended elements in third-party extensions (#5073). */ [contenteditable='true'], .richtext-content[contenteditable] { display: block; outline-style: none; border-radius: 3px; /* needed to make empty tags editable, otherwise no focus can be set */ min-height: 10px; min-width: 20px; &:hover, &:focus { background: var(--background-primary); } &:focus { text-overflow: clip !important; } &.invalid { background: #f92; } & > .placeholder { color: var(--text-muted); } p { margin: 0; } } /* fix for placeholder */ .Medium-placeholder { position: relative; } .close, .close:hover { float: none; opacity: 1; } #app > nav { position: relative; z-index: 1; } code { background: var(--background-modifier-accent); border-radius: 3px; box-decoration-break: clone; } code, .hljs { padding: 2px 4px; font-size: 0.88em; } .hljs { background: none; @include dark { filter: invert(1); } } pre code.hljs { font-size: 1em; } pre { display: block; padding: 9.5px; margin: 0 0 20px; font-size: 13px; line-height: 1.42857143; word-break: break-all; word-wrap: break-word; background: var(--background-secondary); border: 1px solid var(--border); border-radius: 3px; } .modal-content pre { background: var(--background-modifier-accent); border-color: var(--background-modifier-border); } pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background: none; border-radius: 0; border: none; overflow-x: auto; &.hljs { padding: 0; background: none; } } .textarea::placeholder, .form-control::placeholder, .token-input::placeholder, .u-placeholder { color: var(--ghost-color); } .btn { display: inline-block; font-size: 14px; padding: 10px 24px 9px; color: var(--text-normal); background: var(--button-background); border: 1px solid var(--border); outline: none !important; border-radius: 4px; text-align: center; white-space: nowrap; vertical-align: middle; text-decoration: none; @extend %clickable; @include phone { padding-left: 12px; padding-right: 12px; } .icon { vertical-align: middle; margin-top: -2px; @include bidi-style(margin-right, 5px, margin-right, -2px); @include bidi-style(margin-left, -2px, margin-right, 5px); flex-shrink: 0; &.icon-arrow-up { margin-top: -3px; } } span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; } &--only-icon .icon, &--icon-only .icon { margin-left: 0 !important; margin-right: 0 !important; } &--icon--last .icon { @include bidi-style( margin-left, 5px, margin-right, 0 ); // so far only used in ticket_zoom secondaryAction dropup } &:focus { box-shadow: 0 0 0 3px var(--shadow-highlight); } &--small { padding-top: 5px; padding-bottom: 4px; &.btn--quad { padding: 4px 5px; } } &--slim { padding-left: 12px; padding-right: 12px; } &--fullWidth { width: 100%; text-align: center; justify-content: center; } &.is-disabled, &[disabled], &:disabled { pointer-events: none; cursor: not-allowed; opacity: 0.33; } &:active { box-shadow: none; background: var(--button-background-active); } &--capitalized { text-transform: capitalize; } &--action { text-transform: uppercase; color: var(--button-action-color); font-size: 12px; letter-spacing: 0.05em; height: 31px; padding: 0 11px !important; display: inline-flex; align-items: center; min-width: 0; .icon { @include ltr(margin, -2px 5px 0 -2px); @include rtl(margin, -2px -2px 0 5px); } .icon:only-child { margin: 0 !important; } &.btn--slim { padding-left: 7px !important; padding-right: 7px !important; .btn-label { @include bidi-style(margin-left, 0, margin-right, 0); } &.btn--small { padding-left: 5px !important; padding-right: 5px !important; } } &.btn--small { height: 26px; font-size: 11px; padding-left: 8px !important; padding-right: 8px !important; } } &-active-icon { display: none; } &--active { background: var(--button-active); color: var(--text-inverted); &:active { background: var(--button-active-active); } .btn-inactive-icon { display: none; } .btn-active-icon { display: inline; } } // used in .recipientList-controls &--onDark { background: var(--background-modifier-lighter); border-color: var(--background-modifier-accent-dark); color: var(--text-inverted); .icon { opacity: 1; } } &--primary { color: var(--button-primary-text); background: var(--button-primary-background); &:active { background: var(--button-primary-background-active); } .icon { opacity: 1; fill: currentColor; } } &--secondary { color: var(--button-primary-background); } &--positive, &--create, &--success { color: var(--text-inverted); background: hsl(145, 51%, 45%); &:active { background: hsl(145, 51%, 35%); } &.btn--secondary { background: var(--background-secondary); color: hsl(145, 51%, 45%); &:active { background: var(--button-background-active); } } &.btn--text { color: var(--supergood-color); } } &--danger { color: var(--text-inverted); background: var(--danger-color); &:active { background: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1)), linear-gradient(var(--danger-color), var(--danger-color)); } &.btn--secondary { background: var(--background-secondary); color: var(--danger-color); &:active { background: var(--button-background-active); } } } &--text { display: inline-flex; align-items: center; font-size: inherit; margin: -10px; padding: 10px; color: var(--text-button-primary); border: none; background: none; vertical-align: baseline; text-align: start; .table & { margin: 0; min-height: 38px; } &.no-padding { padding: 0; margin: 0; min-height: auto; } .icon { opacity: 1; @include bidi-style(margin-left, -2px, margin-right, 6px); @include bidi-style(margin-right, 6px, margin-right, -2px); width: 16px; max-height: 16px; object-fit: contain; } &.btn--icon--last .icon { @include bidi-style(margin-left, 6px, margin-right, -2px); @include bidi-style(margin-right, -2px, margin-right, 6px); } &:active { color: var(--text-button-primary-active); background: none; } &.btn--secondary { color: var(--text-button-secondary); text-decoration: underline; &:active { opacity: 0.75; } } &.btn--positive { color: hsl(145, 51%, 45%); &:active { color: hsl(145, 51%, 30%); background: none; } } &.btn--danger { color: var(--danger-color); &:active { color: hsl(0, 65%, 40%); background: none; } } &.btn--subtle { text-decoration: underline; color: var(--text-button-secondary); &:active { opacity: 0.75; } } &.space-left { @include bidi-style(margin-left, 0, margin-right, -10px); } &.space-right { @include bidi-style(margin-right, 0, margin-left, -10px); } } &--large { &.btn--text { margin: 0; } } &--quad { padding: 10px 12px 9px; .icon { margin: -1px; } } &--split--first { @include bidi-style(border-radius, 3px 0 0 3px, border-radius, 0 3px 3px 0); } &--split, &--split--last { border-radius: 0; @include bidi-style(border-left-width, 0, border-right-width, 1px); @include ltr(margin-left, 0 !important); @include rtl(margin-right, 0 !important); .icon { margin-left: 2px !important; margin-right: 2px !important; } } &--split--last { @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px); } &--dropdown { position: relative; select { opacity: 0; width: 100%; height: 100%; left: 0; top: 0; position: absolute; @extend %clickable; } } } .btn + .btn:not(.btn--no-margin), .btn + .buttonDropdown, .buttonDropdown + .buttonDropdown { @include bidi-style(margin-left, 10px, margin-right, 0); } .btn + .btn.align-right { @include bidi-style(margin-left, auto, margin-right, 0); } .btn.align-right ~ .btn { @include bidi-style(margin-left, 15px, margin-right, 0); } .vertical > .btn:not(.hidden) + .btn { @include bidi-style(margin-left, 0, margin-right, 0); margin-top: 10px; &--text { @include bidi-style(margin-left, -10px, margin-right, -10px); margin-top: 0; } } .btn--download .icon-download { margin-right: 6px; @include rtl(margin-right, -10px); margin-top: 4px; margin-left: -10px; @include rtl(margin-left, 6px); vertical-align: top; fill: var(--text-inverted); } .btn-label { @include bidi-style(margin-left, 7px, margin-right, 0); } .btn-show-all { &[aria-expanded='false'] [data-show='collapsed'], &[aria-expanded='true'] [data-show='open'] { display: none; } .icon { margin-left: 0; margin-right: 0; } } .visibility-change { /* Interactive Visibility Change Classes: <div class="visibility-change"> <svg class="icon-marker" data-visible="active"><use xlink:href="#icon-marker" /></svg> </div> Important: HTML Order active > hover > normal */ [data-visible='active'], [data-visible='hover'] { display: none; } &.is-active [data-visible='active'] { display: block; & ~ [data-visible='normal'] { display: none; } } &:hover [data-visible='hover'] { display: block; & ~ [data-visible='normal'] { display: none; } } } .btn-group { display: inline-flex; flex-wrap: wrap; &--full { display: flex; } & + .btn-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .btn { &:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } &:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; } + .btn { @include bidi-style(margin-left, 0, margin-right, 10px); } } .btn--text { padding: 6px 10px 5px; /* reporting main.eco */ display: inline-block; border-radius: 3px; &.is-selected { background: var(--button-primary-background); color: var(--text-inverted); } } } .buttonDropdown { display: flex; align-items: center; position: relative; user-select: none; .dropdown-menu { margin-bottom: 0; } &.is-open .dropdown-menu { display: block; } .btn--text { padding-left: 13px; padding-right: 13px; } .dropdown-menu-accessories { cursor: pointer; &:focus { outline: none; .dropdown-menu { display: block; } .btn--split--last { box-shadow: 0 0 0 3px var(--shadow-highlight); pointer-events: initial; } } .btn--split--last { pointer-events: none; &:focus { box-shadow: none; pointer-events: none; } &:active { background-color: #429ed7; } } } button[disabled] ~ .dropdown-menu-accessories button { opacity: 0.33; } } .dropdown-menu-right { @include rtl(right, auto); @include rtl(left, 0); } .dropdown-menu-left { @include rtl(left, auto); @include rtl(right, 0); } .status-fields { display: flex; max-width: 100%; @include phone { display: block; } .dropdown li { display: flex; align-items: center; padding: 0 10px; } .dropdown-menu .status-badge { margin-left: 10px; } .dropdown-menu .badge { margin-top: -2px; margin-right: 7px; background: hsla(0, 0%, 0%, 0.5); } } .status-field { border: 1px solid var(--border); background: var(--button-background); display: flex; height: 34px; flex-shrink: 1; min-width: 20px; padding: 5px 0; align-items: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @include phone { border-bottom-width: 0; } &.is-active { background: var(--button-primary-background); color: var(--text-inverted); border-color: var(--button-primary-background-active); box-shadow: 1px 0 var(--button-primary-background-active); position: relative; @extend %clickable; .icon { fill: currentColor; opacity: 1; } } &:not(:last-child, :only-child) { @include bidi-style(border-right-width, 0, border-left-width, 1px); @include phone { border-right-width: 1px !important; } } &:first-child { border-radius: 5px 0 0 5px; @include rtl(border-radius, 0 5px 5px 0); @include phone { border-radius: 5px 5px 0 0 !important; .dropdown & { flex: 1; border-top-right-radius: 0 !important; border-right-width: 0 !important; } } .dropdown.open & { border-radius: 5px 0 0; @include rtl(border-radius, 0 5px 0 0); @include phone { border-radius: 5px 0 0 !important; } } } &:last-child { border-radius: 0 5px 5px 0; @include rtl(border-radius, 5px 0 0 5px); @include phone { border-radius: 0 0 5px 5px !important; border-bottom-width: 1px; } } &:only-child { border-radius: 5px; @include phone { border-radius: 5px !important; } } .badge { @include bidi-style(margin, 0 7px 0 10px, margin, 0 10px 0 7px); background: hsla(210, 50%, 10%, 0.24); } .status-badge { width: 32px; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; } &--arrow { @extend %clickable; border-left: none; width: 34px; justify-content: center; @include phone { border-top-right-radius: 5px !important; } } &--spacer { padding-left: 16px; padding-right: 2px; } } .status-badge { display: inline-block; } .info-badge { fill: currentColor; padding: 3px 6px 1px; line-height: 12px; opacity: 0.5; position: relative; /* border in its own layer to make it more translucend but still depend on the currentColor */ &::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 1px solid currentColor; opacity: 0.5; border-radius: 100%; } } @keyframes pulsate { to { filter: brightness(1.2); } } .badge { display: inline-block; min-width: 18px; padding: 3px 5px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-inverted); text-align: center; white-space: nowrap; vertical-align: top; border-radius: 9px; background: var(--border-alt); @include bidi-style(margin-right, 3px, margin-left, 0); flex-shrink: 0; &:empty { display: none; } &.badge--big { min-width: 22px; font-size: 14px; border-radius: 11px; padding: 5px 7px 3px; } &.badge--text { min-width: 0; padding: 0; margin-right: 0; @include bidi-style(margin-right, 0, margin-left, 0); font-size: inherit; font-weight: inherit; text-align: inherit; line-height: inherit; color: var(--text-muted); background: none; border-radius: 0; vertical-align: baseline; } &.badge--primary { background: var(--highlight); } } .key-value { td:first-child { @include bidi-style(padding-right, 10px, padding-left, 0); color: var(--text-muted); } } table { table-layout: fixed; } .scroll-table-container { overflow: hidden; overflow-y: scroll; max-height: 244px; table > thead > tr > th { @extend .zIndex-2; top: 0; position: sticky; } } .table { display: table; small { color: inherit; } &-icon { max-width: 20px; max-height: 20px; object-fit: contain; vertical-align: middle; fill: hsla(0, 0%, 0%, 0.3); } &-buttons { padding-top: 0 !important; padding-bottom: 0 !important; height: 38px; display: flex; align-items: center; justify-content: flex-end; text-align: right; } } .table--light { color: var(--text-muted); } .table-fluid { table-layout: auto; } .table .table-row { display: table-row; } .table.table--placeholder { th { text-align: center; } td { height: 40px; } > thead > tr > th { background: var(--background-modifier-accent); } } .table th:not(.noTruncate) .table-column-title, .table td:not(.noTruncate) { @extend .u-textTruncate; } .table > thead > tr > th { padding: 12px 9px 10px; border-bottom: none; border-top: 1px solid #ececec; background: var(--background-primary-alt); color: var(--text-normal); font-weight: normal; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; position: relative; user-select: none; } .table-column-head { display: flex; @extend %clickable; &-unclickable { cursor: default; } } .table-column-sortIcon { @include bidi-style(margin-left, auto, margin-right, 0); } th.align-right { .table-column-title { @include bidi-style(margin-left, auto, margin-right, 0); } .table-column-sortIcon { @include bidi-style(margin-left, 0, margin-right, 0); } } td.align-right { @include bidi-style(text-align, right, text-align, left); } .table-striped > tbody > tr:nth-child(2n + 1) { background-color: var(--background-secondary); } .table > tbody > tr > td { padding: 10px 10px 8px; border-color: var(--background-modifier-accent); &.no-side-padding { padding-left: 0; padding-right: 0; text-align: center; } } .table.table--no-borders > tbody > tr:not(:first-child) > td { border-color: transparent; } .table > tbody > tr.u-center > td { vertical-align: middle; } .table-hover > tbody > tr:hover, .table-hover > tbody > tr.is-hover { background: var(--background-secondary); } .table-hover-in-modal > tbody > tr:hover > td { background-color: var(--background-primary); } .table-hover > tbody > tr:hover > th { background: rgba(0, 8, 14, 0.015); } .table-col-resize { position: absolute; @include bidi-style(right, 0, left, auto); top: 0; height: 100%; cursor: col-resize; padding: 10px; @include bidi-style(margin-right, -10px, margin-left, 0); z-index: 1; &::after { content: ''; display: block; width: 1px; height: 100%; background: var(--border); } } .table > thead:first-child > tr:first-child > th.no-padding, .table > thead > tr > th.no-padding, .table > tbody > tr > td.no-padding { padding: 0; } .table tr.is-inactive, .table tr td span.is-inactive { color: var(--text-muted); text-decoration: line-through; a { color: inherit; } } .table tr.is-grayed-out { color: var(--text-muted); .icon:not(.u-highlight), .btn span { opacity: 0.33; } .avatar { opacity: 0.5; } .avatar--unique { background: var(--background-secondary-hover); text-shadow: none; opacity: initial; } } td .icon { vertical-align: middle; margin-top: -3px; } td .icon-draggable, td .icon-trash { vertical-align: middle; } td .prefix-icon > .icon { vertical-align: top; } td .icon-cog { width: 16px; } .table-checkbox, .table-radio { padding: 0 !important; .icon { margin-top: 0; } } .table .table-sort-arrow { opacity: 1; width: 8px; height: 8px; @include bidi-style(margin-left, 3px, margin-right, 0); margin-top: -2px; vertical-align: middle; } .item { &--high-priority { a { color: $high-priority-color; } } &--low-priority { a { color: $low-priority-color; } } } .checkbox-list { list-style: none; margin-bottom: 15px; padding: 3px 12px; font-size: 14px; line-height: 25px; color: var(--text-normal); background: var(--background-secondary); border: 1px solid var(--border); border-radius: 3px; } .checkbox-replacement, .radio-replacement { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; @extend .u-clickable; > .icon { vertical-align: middle; margin-top: -2px; fill: var(--button-background); @include dark { fill: transparent; } } .icon-checked { color: var(--interactive-primary); } .icon-unchecked { color: var(--text-muted); } .icon-indeterminate { display: none; color: var(--text-muted); } &.is-disabled { cursor: not-allowed; } &.checkbox-replacement--fullscreen, &.radio-replacement--fullscreen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } &.checkbox-replacement--inline, &.radio-replacement--inline { display: inline-flex; @include bidi-style(margin-right, 3px, margin-left, 0); } input[type='checkbox'], input[type='radio'] { position: absolute; opacity: 0; cursor: pointer; &:disabled { cursor: not-allowed; ~ .icon { opacity: 0.33; fill: none; } } &:not(:checked) ~ .icon-checked, &:checked ~ .icon-unchecked { display: none; } &:focus:not(.is-active) ~ .icon-checked, &:focus:not(.is-active) ~ .icon-unchecked { box-shadow: 0 0 0 2px var(--border-highlight), 0 0 0 3px var(--shadow-highlight); } } + .label-text { @include bidi-style(margin-left, 0, margin-right, 3px); } } .checkbox-replacement { &:indeterminate { ~ .icon-checked, ~ .icon-unchecked { display: none; } ~ .icon-indeterminate { display: block; } } } .checkbox-replacement-readonly { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; > .icon { vertical-align: middle; margin-top: -2px; } .icon-checkbox-checked-readonly.icon { fill: var(--text-muted); color: var(--background-primary); } .icon-checkbox-readonly.icon { fill: var(--text-muted); } } .radio-replacement { input:focus ~ .icon-checked, input:focus ~ .icon-unchecked { border-radius: 100%; } > .icon { margin-top: -3px; } } .table .checkbox-replacement, .table .checkbox-replacement-readonly, .table .radio-replacement { height: 40px; width: 40px; &.checkbox-replacement--fullscreen { width: 100%; height: 100%; } } .table-overview tbody .icon-checkbox, .table-overview tbody .icon-radio, .table-overview tbody .icon-checkbox-checked, .table-overview tbody .icon-radio-checked { fill: transparent; } .table .table-cell { vertical-align: top; display: table-cell; border-bottom: 1px solid var(--background-primary-alt); } .hero-two { width: 100%; } .hero-two .hero-left { width: 50%; float: left; } .hero-two .hero-right { width: 50%; float: right; } .max-size-scroll { max-height: 240px; overflow-y: scroll; } /* #content > *:not(.active) { display: none !important; } */ h1, h2, h3, h4, h5, h6 { font-weight: normal; color: var(--header-primary); } h1 { font-size: 24px; line-height: 30px; } h2, h2.popover-title { font-size: 20px; line-height: 25px; } h3 { font-size: 16px; margin: 20px 0 8px; font-weight: normal; .subtitle { display: inline; font-size: 12px; text-transform: none; color: var(--text-muted); letter-spacing: initial; } } h4 { font-size: 13px; text-transform: uppercase; } h5 { font-size: 13px; font-weight: bold; } label, .checkbox.form-group label, .label { text-transform: uppercase; color: var(--text-muted); display: block; font-size: 13px; font-weight: normal; letter-spacing: 0.05em; margin-bottom: 4px; text-align: start; padding: 0; &.input-group-addon { color: var(--text-muted); } /* user-select: none; disabled because of chrome51 https://github.com/martini/zammad/issues/183 */ h2 & { color: inherit !important; font-size: inherit; font-weight: inherit; letter-spacing: 0; margin-bottom: 0; padding: 0 !important; text-transform: inherit; } } /* circumventing the label:not(.inline-label) selector because it's too strong */ .inline-label, .label-success, .label-warning, .label-danger { font-size: inherit; font-weight: inherit; text-align: inherit; color: inherit; letter-spacing: 0; margin: 0; text-transform: none; display: inline; } table { .inline-label, .label-success, .label-warning, .label-danger { white-space: nowrap; /* for labels in tables that might get crushed view: calendar_subscriptions */ } } .label-text { @include bidi-style(margin-left, 3px, margin-right, 0); @extend %clickable; } .label-success, .label-warning, .label-danger { background: none; } .label-success { color: var(--supergood-color); } .label-highlight { color: var(--highlight); } .label-warning { color: var(--ok-color); } .label-danger { color: var(--superbad-color); } .label-subtle { color: var(--ghost-color); } .state-archived, .state-draft { color: hsl(0, 0%, 68%); } .state-published { color: var(--supergood-color); } .state-internal { color: var(--highlight); } fieldset { margin: 0 -4px; @extend .clearfix; @include phone { width: calc(100% + 8px); } h2, .help-text { margin-left: 4px; margin-right: 4px; } } .form-field-group { padding: 20px; background: var(--background-secondary); border-radius: 4px; margin-bottom: 16px; border: 1px solid var(--border); .modal-body & { background: var(--background-primary); } > .form-group:last-child { margin-bottom: 0; } } fieldset > .form-group { padding: 0 4px; } .form-group { margin-bottom: 16px; &.form-group--inactive { opacity: 0.5; } &.is-readonly .controls:not(.ignore-readonly) { pointer-events: none; cursor: not-allowed !important; input:read-only.form-control:not(.js-input, .js-objectSelect) { pointer-events: auto; cursor: auto; } } &.form-group--nested { @include bidi-style(padding-left, 30px, padding-right, 30px); } &.form-group--wide { @include bidi-style(margin-left, -30px, margin-right, -30px); } } .date.form-group .controls { position: relative; } .form-group + .form-group { margin-top: 0; } .merge-group { display: flex; align-items: stretch; &.merge-group--header { h2 { margin-bottom: 0; } label { display: inline; } .merge-source, .merge-target { border-bottom: 1px solid var(--border); } } .merge-target, .merge-source { flex: 1; width: 33%; display: flex; flex-direction: column; justify-content: flex-end; } .merge-source, .merge-target { padding-bottom: 3px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 7px 13px; } &:first-of-type { margin-top: 6px; .merge-source, .merge-target { border-top: 1px solid var(--border); border-radius: 3px 3px 0 0; } } &:last-of-type { margin-bottom: 6px; .merge-source, .merge-target { border-bottom: 1px solid var(--border); border-radius: 0 0 3px 3px; } } .merge-value { margin-bottom: 3px; } .form-group { padding: 0; } .form-control { margin: 0 !important; } &.merge-group--multi { .merge-value + .merge-value { margin-top: 12px; } } } .merge-controls { flex: 1; align-self: flex-end; } .merge-control { margin-bottom: 5px; height: 31px; text-align: center; display: flex; flex: 1; justify-content: space-between; align-items: center; align-self: flex-end; } .merge-control-input { flex: 1; } .merge-arrow { margin: 0 12px; display: flex; align-items: center; justify-content: center; .line-arrow { fill: var(--border); } } .formGroup-label { padding: 0 2px; margin-bottom: 5px; position: relative; display: flex; align-items: center; h2 & { padding: 0; margin: 0; } label { margin: 0; } a[data-toggle='collapse'] > label { cursor: pointer; color: var(--text-link); } a[data-toggle='collapse'] { &:focus, &:active { text-decoration: underline; } &.collapsed { & svg { &.icon-arrow-right { display: inline; } &.icon-arrow-down { display: none; } } } &:not(.collapsed) { & svg { &.icon-arrow-right { display: none; } &.icon-arrow-down { display: inline; } } } } .bookmark.icon { margin-bottom: -1px; } .formGroup-metaControl { @extend .u-clickable; padding: 6px 4px; margin: -6px 0 -6px auto; font-size: 20px; line-height: 1; color: var(--interactive-muted); } } .formGroup-bookmark { @extend .u-clickable; display: flex; align-items: center; flex-direction: row-reverse; width: 30px; height: 30px; position: absolute; right: 0; top: -10px; } .form-group .controls .richtext { position: relative; height: auto; } .form-group .help-message { cursor: help; color: var(--interactive-muted); top: -2px; position: relative; @include bidi-style(margin-left, auto, margin-right, 0); .icon-help { display: block; } } .form-group:not(.formGroup--halfSize) { clear: left; } .form-group.formGroup--halfSize { width: 50%; float: left; @include phone { width: auto; float: none; } .form-control { min-width: initial; } } .formGroup--standalone .form-control { margin-bottom: 0; } .controls--select { position: relative; } .controls--datetime { position: relative; display: flex; } .controls--date { position: relative; } .controls--datetime { position: relative; display: flex; } .controls--date { position: relative; } .controls--grow { flex-grow: 1; } .controls-label { margin: 11px 10px 0; flex-shrink: 0; .form-control--small + & { margin-top: 7px; } } /* do not show safari auto fill icon - see issue #962 */ input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; } input[type='radio'], input[type='checkbox'] { margin: 0; } input[type='text'], input[type='password'], input[type='email'], input[type='date'], input[type='url'], textarea, .form-control, .form-group .checkbox, .form-group .radio { display: block; padding: 7px 12px; width: 100%; height: 41px; font-size: 14px; font-weight: normal; line-height: 25px; color: var(--text-normal); background: var(--background-secondary); border: 1px solid var(--border); border-radius: 3px; transition: none; box-shadow: none; outline: none; appearance: none; @include phone { font-size: 16px; } .modal-body &, .box &, .sidebar &, .hero-unit &, .form-field-group &, .popover & { background: var(--background-primary); } .modal-body .form-field-group &, .formset-inset & { background: var(--background-secondary); } &.form-control--small { padding: 5px 8px 4px; height: 30px; line-height: 20px; &[multiple] { height: auto; } &.form-control--multiline { min-height: 30px; } } &.form-control--inline { display: inline-block; width: auto; } &.form-control--multiline { height: auto; min-height: 41px; } &:focus, &:focus-within, &.focus { border-color: var(--border-highlight); box-shadow: 0 0 0 3px var(--shadow-highlight); } &.is-disabled, // .is-disabled should not be used - legacy support &[disabled], &[readonly] { background: var(--background-secondary); opacity: 0.38; &:focus, &.focus { border-color: var(--border-highlight); } } &.is-disabled, // .is-disabled should not be used &[disabled] { cursor: not-allowed; } } input[type='url'] { min-width: 400px; } .sidebar-content input[type='url'] { min-width: inherit; } .user-select.form-control { padding-right: 35px; min-width: 300px; } input[type='time'] { width: auto; padding-left: 6px; padding-right: 6px; } input.timeframe, input.time { box-sizing: content-box; padding: 0 6px; height: 39px; line-height: 42px; flex-shrink: 0; &.form-control--small { line-height: 20px; padding-top: 0; padding-bottom: 0; } } input.timeframe { width: 5.5ch; } input.time { width: 4.5ch; } input.time.time--12 { width: 7.5ch; } .tokenfield.focus { border-color: var(--border-highlight); box-shadow: 0 0 0 3px var(--shadow-highlight); } .richtext.form-control { padding: 0; } .richtext.form-control [contenteditable] { height: auto; min-height: 82px; background: none; padding: 7px 12px 35px; } .richtext.form-control [contenteditable='false'] { cursor: not-allowed; opacity: 0.38; border-color: var(--border); padding: unset; &:focus, &.focus { border-color: var(--border-highlight); } } .richtext.is-readonly [contenteditable='false'] { cursor: default; opacity: 1; padding: 7px 12px; } .richtext.form-control .attachments.attachments--list:not(:empty) { border-top: 1px solid var(--background-modifier-border); white-space: normal; margin: 0 -12px -28px; padding: 25px 20px 21px 72px; position: relative; line-height: 1; } .richtext-controls { display: flex; margin: 7px 7px 0; padding: 3px 5px 10px; border-bottom: 1px solid var(--background-modifier-border); @include phone { flex-wrap: nowrap; } } textarea.form-control { height: 118px; resize: vertical; &[rows] { height: auto; } } select.form-control:not([multiple]) { @include bidi-style(padding-right, 34px, padding-left, 12px); word-wrap: normal; } .form-control.is-hidden { display: none; } .form-control.form-control--borderless { border: none; padding: 0; line-height: inherit; height: auto; &:focus { box-shadow: none; } } select[multiple], select[multiple]:focus { option:checked { color: var(--interactive-primary); background: var(--ghost-color); } } .select.form-group, .user_autocompletion.form-group { .form-control:not([multiple]) { @include ltr(padding-right, 21px); } } .form-control + .icon-arrow-down, .dropdown-arrow { position: absolute; @include bidi-style(right, 12px, left, auto); top: 50%; margin-top: -3px; width: 13px; height: 7px; @extend .u-unclickable; } .dropdown-clear { position: absolute; padding: 1px; @include bidi-style(right, 12px, left, auto); &--with-arrow-icon { @include bidi-style(right, 35px, left, auto); } top: 50%; margin-top: -7px; border: 1px solid transparent; .icon-diagonal-cross { display: block; width: 10px; height: 10px; fill: var(--interactive-muted); } &:focus { outline: none; border-radius: 3px; border-color: var(--border-highlight); box-shadow: 0 0 0 3px var(--shadow-highlight); } } select::-ms-expand { display: none; } .has-error .form-control, .has-error .form-control:focus, .has-error .form-control.focus { box-shadow: none; border-color: var(--danger-color) !important; } input.has-error { box-shadow: none; border-color: var(--danger-color) !important; } .help-inline:not(:empty) { color: var(--danger-color); padding: 2px; font-size: 13px; } .zammad-form-modal-body { background: var(--background-primary) !important; } /* use on input[type=radio] */ .primary-email-switch { display: none; & + label { font-size: 11px; color: var(--interactive-muted); margin: 0; @extend %clickable; } &:checked + label { color: var(--highlight); } } .primary-email-switch-label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .primary-email-switch + label { align-self: stretch; padding: 0 5px; display: flex; align-items: center; } .controls--button { display: flex; flex-wrap: wrap; .controls { flex: 1; } .help-inline, .help-block { flex-basis: 100%; } input, .form-control { flex: 1 1 0%; @include bidi-style(border-right-width, 0, border-left-width, 1px); @include bidi-style( border-top-right-radius, 0, border-top-left-radius, 3px ); @include bidi-style( border-bottom-right-radius, 0, border-bottom-left-radius, 3px ); &:focus + .controls-button { .controls-button-inner { border-color: var(--border-highlight); } /* fake the form-control outline */ &::before { content: ''; position: absolute; left: 0; @include rtl(left, -3px); top: -3px; right: -3px; @include rtl(right, 0); bottom: -3px; background: var(--shadow-highlight); @include bidi-style( border-radius, 0 7px 7px 0, border-radius, 7px 0 0 7px ); } } } } .controls-button { position: relative; display: flex; &.is-active .icon { fill: var(--highlight); } } .controls-button-inner { display: flex; justify-content: center; align-items: center; padding: 0 10px; background: var(--background-secondary); position: relative; border: 1px solid var(--border); @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px); .icon { fill: var(--text-muted); } &:hover .icon { fill: currentColor; } } .searchfield { position: relative; margin-bottom: 20px; .icon-magnifier, .search-loader { @include bidi-style(left, 15px, right, auto); top: 12px; width: 17px; height: 17px; position: absolute; fill: var(--text-muted); transition: 0.1s 0s; pointer-events: none; } .search-loader { z-index: 2; opacity: 0; .icon { width: 17px; height: 17px; } } input[type='search'] { appearance: textfield; border-radius: 19px; padding: 0 17px 0 42px; @include rtl(padding, 0 42px 0 17px); will-change: transform; &.is-empty ~ .empty-search, &:placeholder-shown ~ .empty-search { visibility: hidden; } &.loading { ~ .search-loader { opacity: 1; transition: 0.2s 0.5s; } ~ .icon-magnifier { opacity: 0; transition: 0.2s 0.5s; } } } input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } .empty-search { height: 100%; width: 50px; visibility: visible; .icon { width: 13px; height: 13px; fill: var(--text-muted); opacity: 0.5; } } } .content { overflow: auto; -webkit-overflow-scrolling: touch; position: relative; background-color: var(--background-primary); @include phone { @include bidi-style(margin-left, $mobileNavigationWidth, margin-right, 0); -webkit-overflow-scrolling: touch; .navigation.is-not-collapsed ~ & { transform: translateX( #{$mobileNavigationWidthOpen - $mobileNavigationWidth} ); @include rtl( transform, translateX(-#{$mobileNavigationWidthOpen - $mobileNavigationWidth}) ); } } } .content.fit { padding: 10px; background: var(--background-tertiary); z-index: 501; } .fullscreenMessage { padding: 22px; display: flex; align-items: center; justify-content: center; flex: 1; .icon { @include bidi-style(margin-right, 14px, margin-left, 0); } .icon-error { margin-top: -2px; width: 19px; height: 19px; } .icon-checkmark { width: 21px; height: 18px; margin-right: 11px; margin-top: -2px; } h2 { margin: 0; } } .fullscreenMessage--placeholder { flex-direction: column; .icon { width: 100px; height: 100px; } h2 { margin: 15px; color: var(--text-muted); } } .selected-clue { position: relative; @extend .zIndex-11; pointer-events: none; } .modal--clue { @extend .zIndex-6; display: flex; align-items: center; justify-content: center; .modal-backdrop { bottom: 0; width: 200%; height: 200%; left: -100%; top: -100%; background: radial-gradient( var(--backdrop-clue-start), var(--backdrop-clue-end) ); } .modal-spacer { position: absolute; opacity: 0; padding: 18px; @extend .zIndex-11; } .modal-arrow { background: inherit; width: 20px; height: 20px; position: absolute; margin: -10px 0 53px -10px; left: 0; top: 50%; transform: rotate(45deg); } .modal-spacer[data-position='above'] .modal-arrow { left: 50%; top: 100%; background: var(--background-primary); } .modal-spacer[data-position='below'] .modal-arrow { left: 50%; top: 0; } .modal-spacer[data-position='left'] .modal-arrow { left: 100%; top: 50%; } .modal-content { border: none; width: 300px; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05); @include phone { width: 280px; } } .modal-controls { background: var(--background-primary); margin: 23px 0 0; padding: 10px; display: flex; align-items: center; justify-content: space-between; } .modal-control { padding-left: 14px; padding-right: 14px; .btn.is-disabled { color: var(--text-normal); } &:only-child { @include ltr(margin-left, auto); @include rtl(margin-right, auto); } } .modal-header { padding-bottom: 7px; font-size: 18px; } .modal-body { max-width: 340px; } } .knowledge-base-content-can-be-published-dialog-current { margin-bottom: 20px; text-align: center; } .knowledge-base-content-can-be-published-dialog { display: flex; .side-panel { flex-grow: 1; width: 300px; } .call-to-action { display: flex; align-items: center; justify-content: center; } } .kb-sidebar-block-content { & .kb-item--invisible { opacity: 0.5; } & .kb-item--missing-translation, & .kb-item--missing-translation:active, & .kb-item--missing-translation:focus { color: hsl(45, 98%, 63%); } } .kb-menu-preview { margin-bottom: 1em; &-container { display: flex; flex-wrap: wrap; justify-content: flex-end; border: 1px solid var(--border-alt); &--footer { justify-content: center; } } a, span { font-size: 14px; padding: 0.5em 1em; white-space: nowrap; text-decoration: none; line-height: 2em; } a { color: inherit; } .label { text-transform: none; } } .modified-icon { position: relative; line-height: 1; display: block; .nav-pills > li > a & { align-self: center; } .modified-icon-modifier { bottom: 0; right: 0; position: absolute; z-index: 1; fill: var(--background-primary); margin: 0 -2px -1px 0; .nav-pills > li > a & { fill: var(--background-secondary); } .nav-pills > li:hover > a & { fill: var(--background-secondary-hover); } } .icon-knowledge-base-answer + .modified-icon-modifier { margin: 0 -1px 2px 0; } .icon-published-modifier { display: none; } } kbd { background: var(--background-modifier-accent); border-radius: 3px; border: 1px solid var(--background-modifier-border); box-shadow: var(--elevation-stroke); display: inline-block; font-size: 12px; margin: 0 1px; padding: 0 4px; vertical-align: top; } .form-stacked .checkbox label { color: inherit; font-size: 13px; text-transform: inherit; vertical-align: baseline; letter-spacing: inherit; } .pagination { margin: 0 0 0 19px; @include rtl(margin, 0 19px 0 0); display: flex; } .pagination-counter { margin: 0 0 0 19px; @include rtl(margin, 0 19px 0 0); line-height: 33px; color: var(--text-muted); } .page-header { margin: 0 0 15px; padding: 0; display: flex; align-items: center; flex-wrap: wrap; width: 100%; @include phone { align-items: flex-start; flex-wrap: nowrap; } } .page-header--center { justify-content: center; } .page-header-title { display: flex; align-items: center; .zammad-switch { @include bidi-style(margin-right, 9px, margin-left, 0); } h1, h2 { margin-top: 9px; margin-bottom: 7px; @include phone { margin-top: 4px; } } .suffix { margin-left: 5px; margin-top: 6px; display: inline-block; @include phone { margin-top: 4px; } } } .page-header-center { justify-self: center; @include bidi-style(padding-left, 9px, padding-right, 0); margin: 0 auto; & + .page-header-meta { @include bidi-style(margin-left, 0, margin-right, auto); flex: none; } } .page-header-meta { @include bidi-style(margin-left, auto, margin-right, 0); @include bidi-style(padding-left, 20px, padding-right, 0); display: flex; justify-content: flex-end; flex: 1; min-width: 0; /* firefox flexbug */ @include phone { flex: 0 1 auto; min-width: auto; } .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @include phone { flex-shrink: 0; } } .btn + .btn { @include bidi-style(margin-left, 9px, margin-right, 0); } } .page-content { .formGroup-label label, .label { color: var(--header-secondary); } .content-controls-align-right { display: flex; justify-content: flex-end; } } .page-body--two-column { display: flex; } .page-aside { @include bidi-style(padding-right, 20px, padding-left, 0); @include bidi-style(border-right, 1px solid var(--border), border-left, none); @include bidi-style(margin-right, 20px, margin-left, 0); width: 240px; flex-shrink: 0; flex-grow: 0; } .page-main { flex: 1; } .page-loading { min-height: 500px; flex-grow: 1; display: flex; align-items: center; justify-content: center; } .popover .page-loading { min-height: 100px; } .page-loading-label { @include bidi-style(margin-left, 10px, margin-right, 0); margin-top: 1px; } .dropdown-menu .count { padding-top: 1px; @include bidi-style(margin-left, 10px, margin-right, 0); } .help-text, .help-block { color: var(--text-muted); } .help-block { margin: 0; font-size: 13px; &.help-block--center { text-align: center; } } .help-block:not(:empty) { margin: 8px 2px 0; } /* replace music icon with attachment */ .icon-attachment { background-position: -24px 0; } /* * hero-unit (used on getstarted, login, signup) */ .hero-unit { width: 500px; margin: 10px 0; padding: 23px 25px; border: 1px solid var(--border); color: var(--text-normal); background-color: var(--background-secondary); border-radius: 6px; box-shadow: var(--fullscreen-drop-shadow); @include phone { width: auto; padding: 12px 15px; } .inline-label { font-size: inherit; } } .hero-unit h1, .hero-unit h2 { margin-top: 0; } .getstarted, .reset_password, .request_admin_password_auth, .signup, .darkBackground, .login { padding: 10px; background: var(--fullscreen-background); } .content.getstarted { padding: 0; .main { padding: 20px 10px; } } .login, .reset_password, .request_admin_password_auth, .signup { padding: 24px; color: var(--fullscreen-text); a { color: var(--fullscreen-text-link); &.text-muted { color: inherit; } } } .login { .form-controls { flex-direction: column; .btn { width: 100%; } .btn--text { display: block; overflow: hidden; text-overflow: ellipsis; margin: initial; text-align: center; } .btn + .btn:not(.align-right) { margin-left: initial; margin-right: initial; } } .help-text { margin-top: 10px; text-align: left; } } .login .hero-unit { width: 430px; margin: 0 0 28px; @include phone { width: auto; } } .login .company-logo { max-height: 100px; max-width: 200px; margin: 20px auto 42px; display: block; @include phone { margin: 15px auto 28px; } } .login p, .reset_password p, .signup p { margin: 0 auto 22px; max-width: 400px; text-align: center; @include phone { margin: 0 auto 15px; } } .reset_password p, .signup p { padding-top: 28px; } .login hr { margin: 0 auto 22px; width: 100%; max-width: 400px; } .login p a, .reset_password p a, .signup p a { text-decoration: underline; } .poweredBy { display: flex; align-items: center; justify-content: center; color: var(--fullscreen-text-muted); margin: 34px 0 10px -16px; @include rtl(margin, 34px -16px 10px 0); cursor: default; a { color: inherit; } .icon-logo { @include bidi-style(margin-right, 8px, margin-left, 0); margin-top: -11px; } .logotype { @include bidi-style(margin-left, 7px, margin-left, 0); margin-top: -3px; } } .fullscreen { @extend .fit; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; min-height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } .fullscreen p { color: var(--fullscreen-text); } .fullscreen-center { margin: auto; } .fullscreen-body { text-align: start; display: inline-block; } ol.tabs { list-style: decimal inside; } ol.tabs li { display: list-item; } .tabs { display: flex; flex-flow: wrap; padding: 0; margin-bottom: 20px; color: var(--interactive-muted); border: 1px solid var(--border); border-right: 0; border-bottom: 0; border-radius: 3px; background: var(--background-secondary); @include phone { overflow: auto; -webkit-overflow-scrolling: touch; } } .tabs-condensed .tab { padding-left: 5px; padding-right: 5px; } .progress-tabs .tab { cursor: default; } .tab { color: inherit; height: 35px; padding: 8px 20px; display: flex; justify-content: center; align-items: center; min-width: 0; flex-grow: 1; @extend .u-clickable; @include phone { flex-shrink: 0; display: block; text-align: center; } &.active { color: var(--text-inverted); background: var(--button-active); box-shadow: none; flex-shrink: 0; } &-name { min-width: 20px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &-badge { flex-shrink: 0; @include bidi-style(margin-left, 6px, margin-right, 0); font-size: 13px; margin-right: -7px; background: var(--background-modifier-accent); min-width: 21px; padding: 0 7px; height: 21px; line-height: 21px; white-space: nowrap; text-align: center; display: inline-block; border-radius: 999px; } } .tab-dropdown { position: relative; display: flex; align-items: center; justify-content: center; .arrow { @include bidi-style(margin-left, 10px, margin-right, 0); opacity: 0.75; } .icon { fill: var(--text-muted); } &.active { background: var(--background-secondary); .icon { opacity: 1; } } } .tab:nth-child(n) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .tabs.tabs--inline { display: inline-flex; margin-left: 0; margin-right: 0; .tab { flex: none; &:nth-last-child(2) { @include bidi-style(border-right-width, 0, border-right-width, 1px); } } } .tabs--big { margin: 28px auto; font-size: 14px; border-radius: 8px; @include phone { margin: 5px auto 28px; } .tab { height: auto; padding: 10px 23px 9px; @include phone { padding: 8px 20px; } &:first-child { border-radius: 8px 0 0 8px; @include rtl(border-radius, 0 8px 8px 0); } &:last-child { border-radius: 0 8px 8px 0; @include rtl(border-radius, 8px 0 0 8px); } &:only-child { border-radius: 8px; } } .tab-dropdown { padding-left: 18px; padding-right: 15px; @include rtl(padding-left, 15px); @include rtl(padding-right, 18px); } } .dashboard .tabs--big { width: 50%; @include phone { width: auto; } } .separator { margin: 20px 0; position: relative; text-align: center; } .separator::before { content: ''; position: absolute; width: 100%; height: 1px; top: 50%; left: 0; background: var(--border); } .separator-text { padding: 0 10px; color: var(--text-muted); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; background: var(--background-secondary); display: inline-block; position: relative; } .auth-providers { display: flex; flex-wrap: wrap; padding: 7px; margin: -14px; > form { display: flex; flex-grow: 1; min-width: 50%; } } .auth-provider { height: 40px; padding: 0 10px 0 7px; margin: 7px; color: white !important; line-height: 23px; border-radius: 4px; display: flex; flex-grow: 1; justify-content: center; align-items: center; text-decoration: none; border: none; text-align: initial; white-space: nowrap; overflow: hidden; @extend %clickable; &.auth-provider--wide { padding-right: 25px; } &.auth-provider--facebook { background: #4f699c; } &.auth-provider--google { background: hsl(0, 0%, 93%); color: hsl(0, 0%, 46%) !important; } &.auth-provider--twitter { background: #2daee1; } &.auth-provider--email { background: #ffd22e; } &.auth-provider--linkedin { background: #006087; } &.auth-provider--github { background: hsl(0, 0%, 27%); } &.auth-provider--gitlab { background: hsl(10, 78%, 53%); } &.auth-provider--microsoft { background: hsl(0, 0%, 93%); color: hsl(0, 0%, 46%) !important; } &.auth-provider--weibo { background: hsl(0, 0%, 27%); } &.auth-provider--saml { background: hsl(0, 0%, 27%); } &.auth-provider--sso { background: #454545; } .provider-icon { width: 29px; height: 24px; flex-shrink: 0; @include bidi-style(margin-right, 10px, margin-left, 0); } .provider-name { overflow: hidden; text-overflow: ellipsis; } } /* global icon definitions ======================= */ [data-font] { font-style: normal; text-rendering: auto; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; } [data-font='FontAwesome'] { font-size: 14px; } [data-font='material'] { font-size: 18px; } [data-font='ionicons'] { font-size: 18px; } .icon { fill: currentColor; &--md { width: 2rem; height: 2rem; } } [class*='icon-file-'] { color: var(--file-icon-background); fill: var(--file-icon-color); } .icon-arrow-down, .icon-arrow-up, .icon-arrow-left, .icon-arrow-right { fill: var(--text-muted); opacity: 0.39; .btn--action & { opacity: var(--interactive-primary); } .btn--success & { fill: var(--text-inverted); opacity: 1; } } .icon-arrow-left, .icon-arrow-right { &.arrow--x2 { width: 14px; height: 26px; } } .icon-arrow-left, .icon-arrow-right, .icon-line-left-arrow, .icon-line-right-arrow, .icon-long-arrow-right { @include rtl(transform, scaleX(-1)); } .arrow--disabled { opacity: 0.23; } .icon-checkmark { fill: var(--supergood-color); } .icon-error { fill: var(--superbad-color); } .icon-danger { color: hsl(41, 100%, 49%); .alert.alert--warning & { color: inherit; } } .icon-draggable { opacity: 0.3; .table-draggable & { vertical-align: middle; cursor: move; } } .loading.icon { display: inline-block; width: 30px; height: 30px; background: hsl(145, 51%, 45%); animation: rotateplane 1.2s infinite ease-in-out; } .small.loading.icon { width: 20px; height: 20px; } .tiny.loading.icon { width: 12px; height: 12px; } .loading.icon.muted { background: var(--ghost-color); } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .icon-spinner-medium { animation: spinIcon 0.9s steps(12) infinite; } .icon-spinner-small { animation: spinIcon 0.9s steps(8) infinite; } @keyframes spinIcon { to { transform: rotate(-1turn); } } .color-swatch { padding: 2px; margin: -2px 0 -4px; @extend %clickable; /* :after technique for bigger click area */ &::after { content: ''; display: inline-block; height: 11px; width: 11px; border-radius: 100%; background: currentColor; } } .icon-status { fill: var(--ok-color); &.inline { margin-top: -3px; vertical-align: middle; } &.inactive { fill: var(--ghost-color); } &.ok { fill: var(--supergood-color); } &.error { fill: var(--superbad-color); } &.neutral { fill: var(--ok-color); } } .icon-status-modified-inner-circle { position: absolute; left: 50%; top: 0; will-change: opacity; transform: translate3d(-50%, 0, 0); animation: fade 1.8s ease-in-out infinite; } @keyframes fade { 54% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 1; } } .icon-checkbox, .icon-checkbox-checked, .icon-checkbox-indeterminate { fill: var(--text-inverted); } .icon-sso-button { fill: var(--text-inverted); } /* * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs */ .form { margin: 0; &--flexibleWidth .controls { display: table; } &--horizontal { display: flex; flex-wrap: wrap; align-items: flex-end; .alert { flex-basis: 100%; } fieldset { flex: 1 1 auto; margin-right: 6px; } .form-group:last-child { margin-bottom: 0; } .form-buttons { margin: 10px 10px 0 auto; } .controls { min-width: 250px; } } &--grid { display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; @include phone { display: block; } fieldset { flex-basis: 100%; display: flex; flex-wrap: wrap; } .alert { width: 100%; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 0; } .form-group { display: block; padding: 0 10px; width: 100%; $sizes: '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5', '4/5'; @each $size in $sizes { &[data-width='#{$size}'] { width: calc(#{$size} * 100%); @include phone { width: 100%; } } } } } } .form-controls { @extend .clearfix; display: flex; align-items: center; margin-top: 10px; .btn + .btn:not(.align-right) { @include bidi-style(margin-left, 20px, margin-right, 10px); } &--inline { margin-top: 0; & > * { @include bidi-style(margin-right, 10px, margin-left, 10px); } } } .form-buttons { display: flex; } form a.standalone { line-height: 40px; margin: 0 5px; } form a.standalone.align-right { @include bidi-style(margin-left, auto, margin-right, 0); } footer { clear: both; padding-top: 10px; padding-left: 10px; padding-right: 22px; @include rtl(padding-left, 22px); @include rtl(padding-right, 10px); } .overviews { .sidebar { @include small-desktop { display: none; } } .table > tbody > tr > td { user-select: none; } } .overview-header { position: relative; margin: 20px 0 32px; height: 41px; display: none; align-items: center; @include phone { margin-top: 0; } .tabsHolder { flex: 1; @include bidi-style(margin-right, 20px, margin-left, 0); min-width: 0; /* Firefox bug fix */ } .tabs { margin: 0; position: relative; @include phone { overflow: visible; } } .tab { @include phone { flex-shrink: 1; } } .tabs-clone { right: 0; } .dropdown { min-width: 0; width: 336px; @include phone { left: -1px; right: auto; width: calc(100vw - 70px); } } @include small-desktop { display: flex; } } .table-overview { @include phone { margin-left: -10px; margin-right: -10px; } } .tableOverview-edit { @extend .u-clickable, .u-highlight; } .bulkAction { position: fixed; bottom: 0; @include bidi-style(left, $sidebarWidth + $navigationWidth, right, 0); @include bidi-style(right, 0, left, $sidebarWidth + $navigationWidth); min-width: $minWidth - $sidebarWidth - $navigationWidth; background: var(--background-secondary); z-index: 1; box-shadow: 0 -1px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.03), 0 -3px rgba(0, 0, 0, 0.01); @include small-desktop { @include bidi-style(left, $navigationWidth, right, 0); @include bidi-style(right, 0, left, $navigationWidth); min-width: $minWidth - $sidebarWidth; } @include desktop { @include bidi-style(left, $sidebarWidth + $navigationWidth, right, 0); @include bidi-style(right, 0, left, $sidebarWidth + $navigationWidth); min-width: $minWidth - $sidebarWidth; } &.no-sidebar { @include bidi-style(left, $navigationWidth, right, 0); @include bidi-style(right, 0, left, $navigationWidth); min-width: $minWidth - $navigationWidth; @include small-desktop { min-width: $minWidth; } } @include phone { @include bidi-style(left, $mobileNavigationWidth, right, 0); @include bidi-style(right, 0, left, $mobileNavigationWidth); min-width: 0; .navigation.is-not-collapsed ~ .content & { @include bidi-style(left, 0, right, 0); } } } .bulkAction-firstStep { display: flex; align-items: center; @include phone { flex-direction: column; align-items: flex-end; } .form-group.tree_select { overflow: visible; } } .bulkAction-firstStep .has-error { border-color: red !important; border: 1px solid; } .bulkAction-secondStep { display: flex; flex-direction: column; &-bottom { display: flex; @include phone { display: block; } } } .bulkAction .btn { margin: 0 16px; @include phone { margin: 10px; } } .bulkAction .btn--text { @include bidi-style(margin-right, 0, margin-left, 16px); } .bulkAction-controls { margin-top: 10px; @include bidi-style(margin-left, auto, margin-right, 0); @include phone { margin-top: 0; display: flex; justify-content: space-between; } } .panel { box-shadow: none; background: var(--background-secondary); color: var(--text-normal); } .panel-default { border-color: var(--border-alt); } .panel-default > .panel-heading { padding-bottom: 8px; font-weight: normal; text-transform: uppercase; font-size: 12px; line-height: 17px; letter-spacing: 0.05em; color: inherit; background: var(--background-primary-alt); border-color: var(--border-alt); + .panel-collapse > .panel-body { border-top-color: var(--border-alt); } } .panel-title { font-size: inherit; } .panel-group .panel-heading { display: block; } .panel-body ul { list-style: none; padding: 0; margin: 0; } .well { background: var(--background-secondary); border: 1px solid var(--border); border-radius: 3px; padding: 10px; } .well-muted { background-color: var(--background-secondary); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .merged, .merge:hover { text-decoration: line-through; } .translation { border: 1px dotted #f92; border-radius: 3px; cursor: text; } .translation[contenteditable='true'] { display: inline; } .translation[contenteditable='true']:hover, .translation[contenteditable='true']:focus { background: none; } .translation .icon-edit { display: none; } .translation:hover .icon-edit { display: inline-block; } .translationOverview .btn + .btn { margin: -10px; } .sub_attribute .control-label { width: 60px; } .sub_attribute .controls { @include bidi-style(margin-left, 80px, margin-right, 0); } .splash { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--background-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-normal); .icon { @include bidi-style(margin-right, 10px, margin-left, 0); } } .navigation { width: $navigationWidth; background: var(--menu-background-primary); border: var(--menu-border); position: relative; container-name: navigation; container-type: inline-size; @include phone { position: absolute; @include bidi-style(left, 0, right, auto); top: 0; left: 0; width: $mobileNavigationWidth; height: 100%; z-index: 499; &:empty { display: none !important; } &.is-not-collapsed { width: $mobileNavigationWidthOpen; .menu-item-name { display: block; padding-left: 15px; } } } } @container navigation (width = 50px) { .icon-double-arrow-left { display: none; } } @container navigation (width > 50px) { .icon-double-arrow-right { display: none; } } .menu { padding: 0; margin: 0; list-style: none; flex-shrink: 0; } .menu .badge { background: var(--ok-color); color: hsl(233, 10%, 16%); @include bidi-style(margin-right, 8px, margin-left, 0); } .menu .zammad-switch { height: 22px; } .menu .dropdown-menu { left: 10px; right: 15px; min-width: 0; } .menu-item { padding: 0 15px; height: 48px; color: var(--menu-text); border-bottom: 1px solid hsla(230, 4%, 84%, 0.05); text-decoration: none; display: flex; align-items: center; @extend %clickable; @include phone { padding: 0 13px; position: relative; } .icon { fill: var(--menu-icon); &.accessory-icon { opacity: 0.7; } } &:hover { background: var(--menu-background-primary-hover); border-bottom-color: hsla(230, 4%, 84%, 0.1); } &.is-active, &.is-hovered { background: var(--menu-background-active); color: var(--menu-text-active); } &.is-active .menu-item-icon, &.is-active .dropdown-icon, &.is-hovered .menu-item-icon { fill: currentColor; } &.is-active .zammad-switch { input:not(:checked) + label { // switch background background: var(--button-primary-background-active); } label::after { background: var(--menu-switch-pointer-active); } } .dropdown-icon { fill: currentColor; } .zammad-switch { @include phone { .navigation:not(:hover, :active, .is-not-collapsed) & { position: absolute; right: 12px; top: 12px; width: auto; height: auto; border-radius: 0; input:checked + label { background: var(--supergood-color); } label { width: 8px; height: 8px; background: red; border-radius: 100%; transition: none; &::after { display: none; } } } } } &-navigation-toggle-button { justify-content: center; border-top: 1px solid rgba(213, 213, 216, 0.05); border-bottom: none; @include desktop { display: none; } @container navigation (width > 50px) { justify-content: flex-end; } } } .menu-item-icon { @include bidi-style(margin-right, 15px, margin-left, 0); width: 24px; height: 24px; @include phone { @include bidi-style(margin-right, 0, margin-left, 0); } } .menu-item-name { flex: 1; margin-top: 2px; @include phone { display: none; } } .call-widgets { overflow-y: auto; max-height: 30vh; } .call-widget { background: var(--background-quaternary-alt); padding: 8px 10px; & + & { border-top: 1px solid var(--background-modifier-border); } &-header { display: flex; color: inherit; margin-bottom: 3px; .label { color: inherit; margin: 0; } .btn--text { color: inherit; opacity: 0.5; &:hover { opacity: 1; } } .icon-diagonal-cross { width: 9px; height: 9px; margin-top: -5px; } } } .tasks { background: var(--menu-background-secondary); border-right: var(--menu-border-secondary); flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; @include phone { overflow-x: hidden; min-height: 60px; } } .tasks.tasks--standalone { background: none; margin: 8px 0 0; padding: 0; overflow: visible; } .tasks--standalone .task { padding: 0; margin-bottom: 9px; display: flex; .icon-holder { &:first-child .icon-task-state { margin-left: -2px; } .icon { width: 16px; height: 16px; vertical-align: middle; margin-top: -3px; @include bidi-style(margin-right, 4px, margin-left, 0); } } } .tasks--standalone .task-text { flex: 1; min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */ } .tasks--standalone .task-id { &::after { content: ' - '; } } .tasks--standalone .name { @extend .u-highlight, .u-textTruncate; display: block; } .tasks--standalone .time { color: var(--text-muted); } .tasks--standalone .btn-show-all { margin-bottom: 9px; } .nav-tab { @include bidi-style(padding, 10px 15px 9px 0, padding, 10px 0 9px 15px); position: relative; color: var(--menu-text); display: flex; align-items: center; @extend .u-clickable; @include phone { width: $mobileNavigationWidthOpen; } } .tasks-navigation .nav-tab { height: 40px; border-bottom: 1px solid hsla(230, 4%, 84%, 0.05); } .tasks-navigation .nav-tab:not(.is-active):hover { background: var(--menu-background-primary); border-bottom-color: hsla(230, 4%, 84%, 0.1); } .navigation .nav-tab-name { text-align: start; &.is-inactive { text-decoration: line-through; opacity: 0.73; } } .tasks-navigation .nav-tab-icon .error { transform: scale(0.85); } .nav-tab.is-active, .nav-tab.nav-tab--search:hover, .nav-tab.nav-tab--search.is-hover { background: var(--menu-background-active); color: var(--menu-text-active); .nav-tab-icon .icon { fill: currentColor; } } .nav-tab.ui-sortable-helper { border-bottom-color: transparent; } .nav-tab.nav-tab--search { height: 30px; padding-top: 9px; &.is-inactive { text-decoration: line-through; opacity: 0.73; } } .nav-tab-icon { margin-top: -3px; display: flex; align-items: center; justify-content: center; position: relative; width: 30px; } .nav-tab-icon .icon { max-width: 18px; max-height: 18px; fill: var(--nav-icon); } .nav-tab-icon .icon-diagonal-cross { fill: #f35910; width: 12px; height: 12px; } .nav-tab-icon .icon.icon-loading { animation: rotateplane 1.2s infinite ease-in-out; fill: var(--supergood-color); /* Safari font rendering bugfix while animating http://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running */ @extend .zIndex-5; // stay beneath .global-search-menu position: relative; } .nav-tab-close { position: absolute; @include bidi-style(right, 0, left, auto); top: 0; height: 100%; @include bidi-style(padding-right, 16px, padding-left, 0); visibility: hidden; @extend .u-clickable; display: flex; align-items: center; @include phone { visibility: visible; } } .nav-tab:hover .nav-tab-close { visibility: visible; } .nav-tab-close-inner { width: 19px; height: 19px; background-color: var(--menu-close-tab-background); border-radius: 100%; display: flex; align-items: center; justify-content: center; } .nav-tab-close:hover .nav-tab-close-inner { background-color: #972e29; } .nav-tab-close svg { width: 9px; height: 9px; fill: var(--text-inverted); opacity: var(--menu-close-tab-opacity); } .nav-tab-close:hover svg { opacity: 1; } .icon-task-state { vertical-align: middle; } .nav-tab-icon .icon-task-state { margin: 0; } .nav-tab.task-state-open.is-active { background-color: var(--ok-color); color: var(--menu-text-open); } .task-state-open-color { color: var(--ok-color); } .icon-task-state.open { fill: var(--ok-color); } .nav-tab.task-state-closed.is-active { background-color: var(--supergood-color); color: var(--menu-text-closed); } .task-state-closed-color { color: var(--supergood-color); } .icon-task-state.closed { fill: var(--supergood-color); } .nav-tab.task-state-escalating.is-active { background-color: var(--superbad-color); color: var(--menu-text-escalating); } .task-state-escalating-color { color: var(--superbad-color); } .icon-task-state.escalating { fill: var(--superbad-color); } // TODO: rename to knowledgebase icon when it's available .icon-task-state.archived { fill: var(--superbad-color); } .icon-task-state.published { fill: var(--supergood-color); } .icon-task-state.draft { fill: var(--ghost-color); } // pending: stays blue // .nav-tab.task-state-pending.is-active { // background-color: var(--pending-color); // } .task-state-pending-color { color: var(--text-muted); } .icon-task-state.pending { fill: var(--pending-color); } .state-badge { display: flex; align-items: center; .icon-task-state { @include bidi-style(margin-right, 2px, margin-left, 0); } } .search { padding: 11px 5px 4px 10px; @include rtl(padding, 11px 10px 4px 0); border-bottom: 1px solid rgba(240, 250, 255, 0.05); flex-shrink: 0; display: flex; align-items: flex-start; background-color: inherit; @include phone { padding: 10px 5px 5px; @include rtl(padding, 10px 5px 5px); display: block; } } .search-holder { flex: 1; border-radius: 15px; position: relative; transition: margin-right 120ms; will-change: margin-right; @include phone { transition: none; will-change: initial; } } .empty-search { position: absolute; @include bidi-style(right, 0, left, auto); top: 0; height: 30px; width: 40px; z-index: 1; visibility: hidden; display: flex; align-items: center; justify-content: center; @extend %clickable; } .search .empty-search .icon-diagonal-cross { fill: var(--text-inverted); opacity: 0.5; } .filled.search .empty-search { visibility: visible; } .search input[type='search'] { width: 100%; padding: 5px 33px; height: 30px; color: var(--menu-text); background: var(--menu-background-secondary); line-height: 20px; outline: none; border: none; border-radius: 15px; position: relative; z-index: 1; appearance: textfield; @include phone { padding: 5px 33px; font-size: 16px; } } .navigation:not(.is-not-collapsed) .search:not(.filled, .focused) input[type='search'] { @include phone { padding: 0; } } input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } .search .search-loader { position: absolute; top: 8px; left: 10px; z-index: 2; opacity: 0; transition: 0.1s 0s; pointer-events: none; .icon { fill: var(--text-inverted); opacity: 0.5; } } .search.loading .search-loader { opacity: 1; transition: 0.2s 0.5s; } .search .icon-magnifier { position: absolute; top: 8px; left: 10px; @include bidi-style(left, 10px, right, auto); z-index: 2; fill: var(--menu-icon); transition: opacity 0.1s; pointer-events: none; } .search.loading .icon-magnifier { opacity: 0; transition: 0.2s 0.5s; } .search.focused .search-holder { transition: margin-right 240ms; @include bidi-style(margin-right, -59px, margin-left, 0); @include phone { margin: 0 !important; } } .search.focused .logo { opacity: 0; z-index: -1; @include phone { opacity: 1; z-index: initial; } } .search.filled { .search-holder { @include phone { .navigation:not(:hover, :active, .is-not-collapsed) & { width: 210px; } } } .logo { @include phone { opacity: 0; } } } .search .logo { display: inline-block; position: relative; @extend .u-clickable, .zIndex-3; margin: -4px 10px 0 12px; transition: 240ms; @include phone { margin: 10px 0 0; } } .search .logo .icon-logo { position: relative; @include phone { width: 35px; height: 30px; margin-left: 4px; } } .search .logo .activity-counter { min-width: 21px; position: absolute; right: -3px; bottom: 2px; padding: 0 4px; font-size: 12px; font-weight: 300; line-height: 16px; text-align: center; color: var(--text-inverted); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.21); background: hsl(360, 71%, 60%); border-radius: 10px; border: 2px solid var(--menu-background-primary); } .search .logo .activity-counter:empty { display: none; } .global-search-menu { @extend .zIndex-7; background: var(--menu-background-primary); position: absolute; left: 0; right: 0; bottom: 0; top: 53px; display: none; overflow: auto; -webkit-overflow-scrolling: touch; .divider { height: 1px; background: var(--menu-background-secondary); margin: 14px 0 17px; } } .search.open .global-search-menu { display: block; } .global-search-detail-link { padding: 9px 15px 8px 0; margin-bottom: 7px; height: auto !important; .no-match & { display: none; } .nav-tab-icon { width: 18px; margin-left: 10px; margin-right: 10px; .icon { width: 18px; height: 14px; } } .nav-tab-name { .icon { fill: currentColor; margin: -2px 0 0 3px; vertical-align: middle; } } } .global-search-result { margin: 0; padding: 0; list-style: none; } .global-search-detail-no-result { margin: 0 10px; .icon { width: 30px; height: 29px; } } .user-menu { padding: 0; margin: 0; list-style: none; position: relative; flex-shrink: 0; display: flex; @include phone { flex-direction: column; } } .user-menu > li { flex: 1; background: var(--menu-background-primary); } .user-menu .list-button { height: 60px; position: relative; text-decoration: none; @extend .u-clickable; display: flex; align-items: center; justify-content: center; @include phone { height: 46px; } } .user-menu .list-button *:not(.dropdown-nose, .icon-crown), .user-menu .list-button *:not(.dropdown-nose, .icon-crown-silver) { position: relative; } .user-menu > li:hover .list-button::before, .user-menu > li.open .list-button::before, .user-menu > li.is-active .list-button::before, .user-menu > li.is-hovered .list-button::before { content: ''; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; background: var(--menu-icon-secondary-hover-background); } .user-menu > li.is-active .list-button::before { background: var(--highlight); } .user-menu li.add:hover .list-button::before, .user-menu li.add.is-active .list-button::before, .user-menu li.add.is-hovered .list-button::before { background: #38ae6a; } .user-menu-icon { width: 20px; height: 20px; fill: var(--menu-icon-secondary); } .user-menu-icon.icon-plus { fill: hsl(145, 51%, 45%); } .user-menu > li:hover .user-menu-icon { fill: var(--menu-background-primary); } .user-menu > li.is-active .user-menu-icon { fill: var(--text-inverted); } .user-menu > li.add:hover .user-menu-icon.icon-plus, .user-menu > li.add.is-hovered .user-menu-icon.icon-plus, .user-menu > li.add.is-active .user-menu-icon.icon-plus { fill: var(--text-inverted); } .user-menu > li:not(:last-child) { border-right: 1px solid var(--background-modifier-accent); @include phone { border: none; } } .dropdown-nose { position: absolute; border: 7px solid transparent; border-bottom: none; border-top: 7px solid var(--background-secondary); left: 50%; margin-left: -7px; top: -6px; display: none; } li.add .dropdown-nose { border-top-color: #38af6e; } .open.dropdown .dropdown-nose, .open.dropup .dropdown-nose { display: block; } .user-menu .dropdown-menu { padding: 0; border-radius: 0; margin-bottom: 5px; min-width: 0; left: 10px; right: 15px; width: 235px; box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28); &.selected-clue { position: absolute; } } .user-menu li.add .dropdown-menu { background-color: #38af6e; } .user-menu li.add .dropdown-menu li > a { color: var(--text-inverted); } .user-menu li.add .dropdown-menu .divider { background: #4cb77c; } .user-menu .dropdown-menu .divider { margin: 0; } .user-menu .dropdown-menu > li > a { display: flex; } .avatar { width: 40px; height: 40px; background-size: cover; background-position: center; border-radius: 100%; display: inline-block; vertical-align: bottom; position: relative; flex-shrink: 0; @include phone { width: 30px; height: 30px; } a { color: inherit; } &.size-30 { width: 30px; height: 30px; @include phone { width: 22px; height: 22px; } } .icon-crown, .icon-crown-silver { position: absolute; width: 28px; left: 50%; margin-left: -14px; top: -15px; @include phone { width: 20px; margin-left: -10px; } } .icon-crown { fill: hsl(47, 100%, 59%); } &-status { position: absolute; right: -4px; bottom: -4px; border-radius: 999px; background: var(--background-tertiary); fill: var(--text-inverted); width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; } &.size-50 { width: 50px; height: 50px; @include phone { width: 36px; height: 36px; } .icon-crown, .icon-crown-silver { width: 36px; margin-left: -18px; @include phone { width: 26px; margin-left: -13px; } } } &.size-80 { width: 82px; height: 82px; @include phone { width: 60px; height: 60px; } .icon-crown, .icon-crown-silver { width: 64px; margin-left: -32px; top: -16px; @include phone { width: 46px; margin-left: -43px; top: -15px; } } } &--vacation { filter: grayscale(70%); opacity: 1; } &--idle { filter: grayscale(100%); opacity: 0.5; } &--inactive { filter: grayscale(100%); opacity: 0.2; } &--organization { background: var(--background-modifier-accent); color: var(--text-muted); } &--unique { background-image: image_url('/assets/images/avatar-bg.png'); background-size: 300px 226px; color: var(--text-inverted); line-height: 40px; text-align: center; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 1px rgba(0, 0, 0, 0.2); @include phone { line-height: 30px; } &.size-30 { font-size: 10px; line-height: 32px; background-size: 225px 170px; @include phone { line-height: 22px; } } &.size-50 { font-size: 16px; line-height: 52px; background-size: 375px 283px; @include phone { line-height: 38px; } } &.size-80 { font-size: 26px; line-height: 84px; background-size: 600px 452px; @include phone { line-height: 62px; } } } &--not-linked { cursor: default; } &--organization { display: flex; align-items: center; justify-content: center; .icon-organization { fill: currentColor; } &.size-80 { .icon-inactive-organization, .icon-organization { width: 32px; height: 32px; } } } &--group { overflow: hidden; .icon { fill: var(--text-inverted); position: absolute; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; bottom: -8px; } &.size-30 .icon { width: 33px; height: 33px; bottom: -6px; } &.size-50 .icon { width: 55px; height: 55px; bottom: -10px; } &.size-80 .icon { width: 88px; height: 88px; bottom: -15px; } &-color-0 { background: hsl(192, 100%, 38%); } &-color-1 { background: hsl(148, 100%, 38%); } &-color-2 { background: hsl(57, 100%, 37%); } } .icon-logo { width: 100%; height: 100%; } } .sidebar { position: relative; width: 280px; padding: 20px; color: var(--text-normal); background: var(--background-secondary); @include bidi-style(border-right, 1px solid var(--border), border-left, none); overflow: auto; -webkit-overflow-scrolling: touch; @include small-desktop { &.optional { display: none; } } h2 { margin-top: 0; } h3 { margin: 0; font-weight: normal; font-size: 16px; text-transform: initial; letter-spacing: 0; } } .sidebar-block { margin: 20px 0; &:first-child { margin-top: 0; } &-actions { margin-bottom: 7px; } &-header { margin-bottom: 7px; h2 { margin: 0; } } [contenteditable='true'] { white-space: normal; // do no u-textTruncate, we want to edit it inline } .btn-list { margin-bottom: 5px; } &-button { .sidebar-block-header + &.text-muted { margin-top: 3px; } } } .sidebar-git-issue-delete { text-align: right; @include rtl(text-align, left); float: right; @include rtl(float, left); } .sidebar-git-issue-content { width: 90%; } .main + .sidebar { border-right: none; border-left: 1px solid var(--border); @include dark { border-left: none; } } .NavBarAdmin.sidebar, .NavBarProfile.sidebar { width: $sidebarWidth; @include phone { width: 50px; padding-left: 10px; padding-right: 10px; &:hover, &:active { width: 165px; padding-left: 15px; padding-right: 15px; } } h2 { margin: 21px 0 12px; @include phone { white-space: nowrap; } } h2:first-child { margin-top: 0; } } .nav-stacked > li + li { margin-top: 0; } .nav-pills > li > a, .nav-pills > li > a:focus, .nav-pills > li > a:active, .nav-pills .nav-pills-placeholder { color: var(--text-nav); border-radius: 0; background: transparent; /* a:focus, a:active with bg: transparent fixes gray focus bg in IE 10 */ display: flex; @extend .u-textTruncate; } .nav-pills.nav-stacked > li > a, .nav-pills.nav-stacked > li > a:focus, .nav-pills.nav-stacked > li > a:active, .nav-pills.nav-stacked .nav-pills-placeholder { padding: 0; height: 40px; line-height: 39px; border-top: 1px solid var(--background-modifier-border); } .nav-pills.nav-stacked .nav-pills-placeholder { display: block; border-top: none; @extend .label-subtle; @extend .u-textTruncate; } .nav-pills > li:hover > a { background: var(--background-secondary-hover); } .nav-pills.nav-stacked > li:hover > a, .nav-pills.nav-stacked > li.active + li:not(.active) > a, .nav-pills.nav-stacked > li:hover + li:not(.active) > a { border-color: transparent; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: var(--text-active); background: var(--background-active); border-color: var(--background-modifier-border); } .nav-pills.nav-stacked > li:hover > a, .nav-pills.nav-stacked > li.active > a, .nav-pills.nav-stacked > li.active > a:hover, .nav-pills.nav-stacked > li.active > a:focus { padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; } .sidebar:not(.NavBarAdmin) .nav-pills > li:first-child > a { border-top: none; } .nav-pills > li > a > .icon { fill: currentColor; flex-shrink: 0; align-self: center; margin-top: -2px; &:first-child { @include bidi-style(margin-right, 5px, margin-left, 0); &[data-font] { @include bidi-style(margin-right, 10px, margin-left, 0); @include bidi-style(margin-left, 5px, margin-right, 0); } } } .nav-pills > li > a > .badge { margin-left: auto; margin-right: 5px; @include bidi-style(padding-left, 10px, padding-right, 0); @include rtl(margin-left, 5px); @include rtl(margin-right, auto); } a.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: var(--text-active); background: none; } .main { padding: 10px 20px; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; @include phone { padding: 10px; } &--large-padding { padding: 30px 40px; } } .main--tabs, .main.no-padding { padding: 0; } .tooltip { font-family: inherit; } .tooltip-inner { max-width: 400px; } .popover { @extend .zIndex-12; position: absolute; font-family: inherit; width: 372px; max-width: 9999px; border-radius: 0; margin: 0 5px; background: var(--background-popover); border: none; box-shadow: var(--elevation-high); @include rtl(text-align, right); @include phone { width: auto; } > .arrow::after { border-color: var(--background-popover); } } .popover--has-horizontal-form { width: auto; } .popover-body { overflow: auto; -webkit-overflow-scrolling: touch; } .popover-title { display: flex; align-items: center; border: none; background: none; padding: 21px 17px 4px; .is-inactive { text-decoration: line-through; color: var(--interactive-muted); } h2 { margin: 0; } .popover-avatar { @include bidi-style(margin-right, 8px, margin-left, 0); } .popover-headline { display: flex; flex-direction: column; } } .popover-content { padding: 0 17px; margin-bottom: 21px; .popover--has-horizontal-form & { padding: 10px 5px 15px 15px; margin-bottom: 0; } } .popover.right { margin-left: 4px; } .popover.right > .arrow { border-right: none; left: -9px; } .popover.top { margin-bottom: 9px; } .popover.top > .arrow { border-top: none; bottom: -9px; } .popover.left { margin-right: 9px; margin-left: 0; } .popover.left > .arrow { border-left: none; right: -9px; } .popover.bottom { margin-top: 9px; } .popover.bottom > .arrow { border-bottom: none; top: -9px; } .popover > .arrow::after { border-width: 8px; } .popover .priority.icon::after { background: var(--background-secondary); } .popover .person .organization { color: var(--text-muted); } .popover .person { &.is-inactive { text-decoration: line-through; color: var(--ghost-color); } } .popover .user-organization { @extend .u-textTruncate; &.is-inactive { text-decoration: line-through; color: var(--ghost-color); } } .popover-block { @extend .sidebar-block; margin: 10px 0; } .popover hr { margin: 8px 0; } .popover .person .organization::before { content: '('; } .popover .person .organization::after { content: ')'; } .popover label { font-size: 13px; color: var(--header-secondary); font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; } .popover .two-columns, .popover .three-columns { margin-top: -8px; } .popover .column label { margin: 8px 0 1px; } .popover .column { margin-top: 8px; } .popover--notifications { padding: 0; left: $navigationWidth; @include rtl(right, $navigationWidth); margin: 8px 2px; max-height: calc(100% - 16px); width: auto; max-width: 400px; min-width: 350px; flex-direction: column; @extend .zIndex-10; @include phone { left: $mobileNavigationWidth; @include rtl(right, $mobileNavigationWidth); min-width: auto; width: calc(100% - #{$mobileNavigationWidth} - 8px); } &.is-visible { display: flex; } &.is-empty .popover-notificationsHeader { box-shadow: none; } .arrow { top: 23px !important; left: -11px; @include rtl(left, 408px); @include rtl(transform, rotate(180deg)); @include phone { top: 61px !important; } } .popover-content { padding-left: 0; padding-right: 0; margin-bottom: 0; overflow-y: auto; } .popover-notificationsHeader { border-bottom: 1px solid var(--background-modifier-accent); padding-bottom: 14px; flex-shrink: 0; .btn { padding-top: 3px; padding-bottom: 5px; } } .activity-placeholder { margin-bottom: 21px; } } .popover-notificationsHeader { padding-bottom: 8px; margin: 21px 17px 0; .popover-title { @extend h1; padding: 0; line-height: 1; } .btn { margin-top: 3px; } } .popover-notificationsCounter { color: #e25253; @include bidi-style(padding-left, 3px, padding-right, 0); } .user-popover, .ticket-popover, .organization-popover { @extend .u-clickable; } .user-card { padding: 2px 0 0 50px; position: relative; min-height: 40px; padding-right: 48px; display: flex; flex-direction: column; justify-content: center; min-width: 192px; .avatar { position: absolute; left: 0; top: 0; } .user-popover.is-inactive { text-decoration: line-through; opacity: 0.73; } .btn.js-newTicket { position: absolute; right: 0; } } .stat-icon { position: relative; } .mood-icon { width: 60px; height: 59px; } .stopwatch-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .stat-stopwatch { width: 77px; height: 83px; position: relative; } .stat-channel-icon { width: 16px; height: 16px; fill: var(--text-muted); } .total-tickets { height: 83px; width: 48px; @include bidi-style(margin-right, 4px, margin-left, 0); margin-bottom: -9px; fill: hsl(196, 19%, 89%); color: var(--background-secondary); @include dark { fill: hsl(196, 9%, 70%); } } .one-ticket { width: 48px; height: 10px; margin-top: -7px; margin-bottom: 2px; position: relative; } .stat-tickets { height: 100px; color: var(--background-secondary); } .in-process-icon { width: 64px; height: 64px; } .reopening-icon { width: 68px; height: 47px; } .supergood-color { fill: var(--supergood-color); } .good-color { fill: var(--good-color); } .ok-color { fill: var(--ok-color); } .bad-color { fill: var(--bad-color); } .superbad-color { fill: var(--superbad-color); } .danger-color { color: var(--danger-color); } .u-high-priority-color { fill: $high-priority-color; } .u-low-priority-color { fill: $low-priority-color; } .stat-widgets { margin: -7px -7px 20px; } .stat-widget { height: 200px; padding: 10px 10px 8px; text-align: center; line-height: 20px; } .dashboard .stat-widget { margin: 7px; background: var(--background-secondary); border: 1px solid var(--border); border-radius: 1px; box-shadow: var(--elevation-low); } .stat-title { font-size: 13px; margin: 2px 0 8px; text-transform: uppercase; font-weight: normal; position: relative; padding: 0 24px; .tooltip { text-transform: none; width: 200px; } } .stat-icon-help { position: absolute; right: 3px; top: 1px; cursor: help; fill: var(--interactive-muted); } .notification-icon-help { fill: var(--interactive-muted); } .stat-label { @extend .u-textTruncate; } .stat-detail { color: var(--text-muted); @extend .u-textTruncate; } .stat-graphic { flex: 1; display: flex; justify-content: center; align-items: center; user-select: none; } .time.stat-widget .stat-amount { margin-top: 12px; text-align: center; font-size: 30px; color: var(--text-inverted); text-shadow: 0 2px rgba(0, 8, 14, 0.2); position: relative; cursor: default; } .time.stat-widget .stat-dial { position: absolute; top: 21px; left: 14px; width: 52px; height: 52px; } .stats-row { padding: 8px 0 7px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; flex: 0 1 38px; height: 100%; .icon { display: block; } } .stats-row:hover { background: rgba(0, 8, 14, 0.03); } .stats-row .stat-bars { flex: 1; margin: 10px 0 13px; padding: 2px 5px; width: 100%; background: linear-gradient( to top, var(--background-modifier-accent), var(--background-modifier-accent) 1px, transparent 1px ); background-position: center bottom; background-size: 100% 12px; display: flex; align-items: flex-end; justify-content: center; } .stat-bars .stat-bar { border-radius: 5px; max-width: 10px; flex: 1; color: #a9bcc4; background: #a9bcc4; &--outbound { opacity: 0.38; color: #a9bcc4; background: #a9bcc4; } } .stat-legend { margin-top: 30px; @include bidi-style(margin-left, auto, margin-right, 0); display: flex; } .stat-legendEntry { font-size: 11px; line-height: 1; @include bidi-style(margin-left, 20px, margin-right, 0); background: none !important; } .stat-circle { margin-bottom: -1px; @include bidi-style(margin-right, 3px, margin-left, 0); width: 10px; height: 10px; border-radius: 100%; display: inline-block; } .ticket_channel_distribution { .stat-graphic { align-items: stretch; } .stats-row { margin-bottom: -4px; position: relative; } } .frequency.stat-widget { .stat-bars { margin-top: 0; } .stats-row { margin-bottom: 0; } .stat-label { color: var(--text-muted); } .primary { color: hsl(145, 51%, 45%); background: hsl(145, 51%, 45%); } } .activity.sidebar { width: 370px; padding: 0; border-left: 1px solid var(--border); } .activity h2 { margin-left: 19px; margin-bottom: 15px; margin-right: 26px; @include rtl(margin-right, 19px); @include rtl(margin-left, 26px); } .activity-entries { margin: 0 -17px; } .activity-placeholder { @extend .u-textTruncate; padding: 0 17px; } .activity-entry { display: flex; padding: 0 17px; &.is-inactive { opacity: 0.5; } &.is-hover { background-color: var(--background-primary); } &.activity-entry--removeable { @include bidi-style(padding-right, 0, margin-left, 17px); } &:not(:hover) .activity-remove { opacity: 0; } &:not(:last-child) .activity-body::after { content: ''; position: absolute; bottom: 0; right: 0; left: 0; border-bottom: 1px solid var(--background-modifier-accent); } &.activity-entry--removeable:not(:last-child) .activity-body::after { right: 17px; @include bidi-style(right, 17px, left, 0); } } .activity-avatar { padding: 16px 2px 0; @include bidi-style(margin-right, 10px, margin-left, 0); flex-shrink: 0; } .activity-body { padding: 16px 0 16px 2px; @include rtl(padding, 16px 2px 16px 0); position: relative; display: flex; flex: 1; min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */ color: inherit; } .activity-message { color: inherit; flex: 1; min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */ &:hover .activity-text { text-decoration: underline; } } .activity-time { margin-top: 2px; color: var(--text-muted); display: block; } .activity-remove { display: flex; align-items: center; justify-content: center; @extend %clickable; padding-left: 10px; padding-right: 27px; @include rtl(padding-left, 27px); @include rtl(padding-right, 10px); .activity-remove-icon-holder { width: 19px; height: 19px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background: var(--ghost-color); } .icon { fill: var(--text-inverted); width: 9px; height: 9px; } &:hover { .activity-remove-icon-holder { background: #972e29; } .icon { opacity: 1; } } } .form-inline { display: flex; @include phone { flex-wrap: wrap; .alert { flex-basis: 100%; } } } .form-inline .input-group-addon, .form-inline .form-control:not(textarea) { background: var(--background-secondary); border: none; line-height: 1; } .form-inline .form-group { overflow: hidden; position: relative; height: 60px; flex: 1 1 auto; @include phone { width: 50%; margin-bottom: 0; } &.datetime { min-width: 140px; overflow: visible; // datepicker popup needs to be visible } } .form-group.is-changed { position: relative; } .form-group.is-changed::before { content: ''; position: absolute; top: 23px; left: -12px; bottom: 0; width: 3px; background: repeating-linear-gradient( 45deg, var(--background-modifier-border), var(--background-modifier-border) 5px, transparent 5px, transparent 9px ) repeat center; background-size: 11px 11px; } .form-inline .form-group.is-changed::before { width: 100%; height: 3px; top: 0; left: 0; bottom: auto; } .form-group.is-changed label { color: var(--text-muted); position: relative; } .form-group.is-changed label::before { position: absolute; content: ''; left: -10px; width: 5px; height: 5px; top: 50%; margin-top: -3px; border-radius: 100%; background: var(--interactive-muted-alt); } .form-inline .form-group .btn { margin: 10px; } .form-inline .form-group:not(:last-child), .form-inline.form-inline--enclosed .form-group { border-right: 1px solid var(--border); } .form-inline .form-group, .form-inline.form-inline--enclosed .form-group { @include phone { border-bottom: 1px solid var(--border); &:nth-child(even) { border-right-width: 0; } } } .form-inline .input-group-addon { width: auto; padding: 0; margin: 10px 18px 0; font-size: 13px; letter-spacing: 0.05em; display: inline-block; position: relative; } .form-inline .form-control:not(textarea) { width: 100%; height: 100%; left: 0; top: 0; position: absolute; padding: 28px 5px 12px 20px; float: none; display: block; border-radius: 0; } .form-inline { .formGroup-label { z-index: 1; pointer-events: none; } .controls--datetime, .controls--date, .controls--select { position: static; } .controls--datetime { position: absolute; bottom: 12px; left: 0; padding: 0 5px 0 20px; width: 100%; .controls-label { display: none; } .form-control { width: 70px; line-height: inherit; position: static; padding: 0; height: auto; &.time { margin-left: 5px; width: 38px; } } } } .bulkAction-secondStep .form-group { min-width: 140px; @include phone { min-width: 0; &.textarea { border-bottom-width: 0; } } } .bulkAction-secondStep .form-inline .textarea.form-group { padding: 5px 10px; height: auto; } .bulkAction-secondStep .form-inline .textarea.form-group .input-group-addon { margin-left: 8px; margin-right: 8px; margin-bottom: 5px; } .bulkAction-secondStep .form-inline textarea.form-control { display: block; width: 100%; resize: vertical; } .bulkAction-secondStep .form-inline .textarea .controls { margin: 0 6px; } .bulkAction-secondStep .form-inline textarea.form-control:not(:focus) { border-color: #f0f0f0; } .ticketZoom { background: var(--background-primary); } .ticketZoom-controls { display: flex; justify-content: flex-end; align-items: center; padding: 28px 0 0; @include bidi-style(margin-right, -40px, margin-left, 0); @include phone { padding: 10px; @include bidi-style(margin-right, 0, margin-left, 0); } } .icon-marker { fill: hsl(0, 0%, 61%); width: 17px; height: 19px; } .ticketNumberCopy-icon { vertical-align: top; fill: currentColor; } .ticketZoom .ticketZoom-header { margin-top: 6px; padding: 0; @include phone { margin-top: 10px; } } .ticketZoom .ticket-article { margin-top: 55px; @include phone { margin-top: 40px; } } .ticketZoom > .overview-navigator { margin-top: 32px; @include bidi-style(padding-left, 20px, padding-right, 0); } .scrollPageAlert { @extend .zIndex-5; position: absolute; top: 0; left: 0; right: 0; transform: translateY(0); border-bottom: 1px solid var(--border); & > .alert { margin-bottom: 0; border-radius: 0; text-align: center; } } .ticket-article, .article-new { max-width: 1080px; margin: 0 auto; padding: 0 21px; @include phone { padding: 0 10px; } } .ticket-title { max-width: 1080px; padding: 0 81px; @include phone { padding: 0 10px; } } .ticket-title-update { @extend h1; white-space: normal; margin-top: 15px; margin-bottom: 8px; padding: 0 7px; text-align: center; .ticketZoom-header & { &:hover, &:focus { background: var(--background-modifier-hover); } } } .ticket-meta-highlighted { color: var(--header-primary); } .ticket-meta-checklist-details { display: block; margin-top: 8px; .ticket-meta-checklist-icon { width: 14px; height: 12.25px; position: relative; top: 2px; } .ticket-meta-checklist-entry { display: inline-block; } .ticket-meta-checklist-entry + .ticket-meta-checklist-entry { @include bidi-style(padding-left, 14px, padding-right, 0); } } .task-subline { text-align: center; display: block; } .ticket-article-item { padding-bottom: 33px; position: relative; z-index: 1; // fixed chrome 49 + flex issue, not shown article .avatar { position: absolute; right: 0; top: 5px; @include phone { position: static; margin: 0 5px 7px; } } &.agent .avatar { right: auto; left: 0; } } /* clip the article-meta to not stand out on the other side of the textBubble if the text bubble is small */ .article-meta-clip { overflow: hidden; position: relative; height: 100%; margin: 0 55px; @include phone { margin: 0; } } .article-content { color: var(--text-normal); position: relative; z-index: 1; padding: 0 55px; @include phone { padding: 0; } &.article-actions { justify-content: space-around; } } .article-reaction { position: absolute; bottom: -12px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--background-article-customer-meta); border: 1px solid var(--border-alt); border-radius: 5px; cursor: default; @include ltr(right, 7px); @include rtl(left, 7px); span { width: 14px; height: 14px; font-size: 14px; line-height: 14px; } } .article-content-meta { position: absolute; width: 100%; } .article-meta { background: var(--background-tertiary); color: var(--text-inverted); padding: 21px 25px 11px; margin: 0 12px; @include phone { margin: 0 5px; padding: 10px 10px 5px; } } .article-meta.bottom { padding-top: 17px; padding-bottom: 8px; @include phone { padding-top: 10px; padding-bottom: 5px; } } .article-meta-row { margin-bottom: 5px; } .article-meta-key { width: 20%; text-transform: uppercase; flex-shrink: 0; @include phone { width: 50px; } } .article-meta-value { @include bidi-style(margin-left, 8px, margin-right, 0); overflow: hidden; text-overflow: ellipsis; span { white-space: nowrap; } } .article-meta-icon { fill: var(--text-inverted); vertical-align: top; margin: 2px 3px 0 0; @include rtl(margin, 2px 0 0 3px); &.icon-lock, &.icon-encryption-error { margin: 0; } } .article-meta-permanent { margin: 0 55px; + .article-content .textBubble { border-top-left-radius: 0; border-top-right-radius: 0; border-top-width: 0; } .alert { margin-bottom: 0; padding-left: 20px; padding-right: 20px; border-radius: 0; box-shadow: 0 0 0 1px inset hsla(0, 0%, 0%, 0.04); &:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } &--blank { background: var(--background-article-meta); color: var(--text-muted-alt); border: 1px solid var(--border-alt); .customer.ticket-article-item & { background: var(--background-article-customer-meta); border-color: var(--border-article-customer); } .customer.state--folde-out & { border-color: var(--border-article-customer-selected); } } .icon { fill: currentColor; margin: 2px 6px 0 0; vertical-align: top; width: 14px; height: 14px; } .icon-lock { margin-top: 1px; width: 16px; height: 16px; } } } .internal-border { padding: 5px; border-radius: 5px; margin: -5px; } .is-internal .internal-border { background: repeating-linear-gradient( 45deg, var(--border-internal), var(--border-internal) 5px, var(--border-internal-stripe) 5px, var(--border-internal-stripe) 10px ); background-size: 14px 14px; background-position: -1px; } .is-internal .bubble-arrow { display: none; } .article-visibility-text-wrapper { padding: 0 55px; opacity: 0; height: 0; .article-visibility-text { margin-bottom: 17px; &.is-hidden { display: none; } } } .textBubble { padding: 10px 20px; background: var(--background-secondary); border-radius: 2px; border: 1px solid var(--border-alt); box-shadow: 0 0 1px rgba(0, 0, 0, 0.06) inset; position: relative; @include phone { padding: 10px; } /* email css reset */ p { margin: 0; } .is-internal & { border-color: var(--border-internal) !important; } } .textBubble-content { overflow: hidden; position: relative; } .textBubble-footer { display: flex; justify-content: space-between; align-items: center; margin: 0 -12px -28px; padding: 6px 12px; border-radius: 0 0 4px 4px; } .textBubble-footer:has(+ .attachments .attachment) { margin-bottom: -10px; } .textBubble-footer:not(.is-open .textBubble-footer) { visibility: hidden; } .textBubble-control { display: flex; } .textBubble-letterCount:not(.label-danger, .label-warning) { color: var(--ghost-color); } .textBubble-overflowContainer { position: absolute; bottom: 0; left: 0; right: 0; background: var(--background-secondary); &.is-open { &::before { display: none; } } .btn { padding-top: 15px; padding-bottom: 15px; font-size: 10px; } &::before { content: ''; position: absolute; left: 0; right: 0; top: -30px; height: 30px; background: linear-gradient( rgba(255, 255, 255, 0), var(--background-secondary) ); pointer-events: none; } } .customer .textBubble-overflowContainer { background: var(--background-article-customer); &::before { background: linear-gradient( hsla(199, 44%, 93%, 0), var(--background-article-customer) ); } } .customer.ticket-article-item .textBubble { background: var(--background-article-customer); border-color: var(--border-article-customer); box-shadow: none; } .customer .richtext-content blockquote { border-left: 5px solid var(--background-modifier-border); } .customer.ticket-article-item.state--folde-out .textBubble { border-color: var(--border-article-customer-selected); } .bubble-arrow { position: absolute; width: 6px; height: 9px; left: -6px; top: 15px; overflow: hidden; @include phone { left: 14px !important; top: -5px; width: 9px; height: 6px; } } .bubble-arrow::after { content: ''; position: absolute; top: -1px; left: 1px; width: 11px; height: 11px; background: var(--background-secondary); border: 1px solid var(--border-alt); box-shadow: 0 0 1px rgba(0, 0, 0, 0.06) inset; transform: rotate(-45deg); @include phone { top: 2px; left: -1px; } } .customer.ticket-article-item .bubble-arrow { left: auto; right: -6px; @include phone { left: 14px; right: auto; top: -4px; } } .customer.ticket-article-item .bubble-arrow::after { background: var(--background-article-customer); left: auto; right: 2px; border-color: var(--border-article-customer); box-shadow: none; @include phone { left: -1px; right: auto; } } .customer.ticket-article-item.state--folde-out .bubble-arrow::after { border-color: var(--border-article-customer-selected); } .remote-content-message { border-top: 1px solid var(--background-modifier-border); white-space: normal; margin: 10px -20px -10px; padding: 10px 20px 10px 40px; text-indent: -20px; position: relative; font-size: 13px; cursor: pointer; &:hover { background-color: var(--background-modifier-hover); } .icon-danger { vertical-align: text-bottom; color: var(--text-normal); } @include phone { margin-left: -10px; margin-right: -10px; padding: 10px 15px 10px 30px; } } .attachments.attachments--list:not(:empty) { border-top: 1px solid var(--background-modifier-border); white-space: normal; margin: 10px -20px 0; padding: 26px 20px 7px 72px; position: relative; @include phone { margin-left: -10px; margin-right: -10px; padding: 20px 15px 7px 30px; } &.attachments--wo-body { border-top: none; margin-top: 0; padding-top: 12px; } } .attachments.attachments--list .attachments-title { font-size: 13px; font-weight: 500; text-transform: uppercase; padding: 0 7px; .badge { margin: -1px 0 0 5px; } } .attachments > .icon:first-child { position: absolute; left: 33px; top: 27px; fill: var(--ghost-color); @include phone { width: 16px; height: 16px; left: 12px; top: 20px; } } .attachments-block { margin-bottom: 12px; &:last-child { margin-bottom: 0; } &-headline { font-size: 13px; color: var(--text-normal); font-weight: 500; text-transform: uppercase; margin: 0 7px; } } .ticket-article-item .task-subline { margin-top: 7px; } .article-action { padding: 5px 16px; margin-top: 5px; color: var(--interactive-muted); font-size: 12px; text-align: center; @extend .u-clickable; } .article-action:hover { color: var(--text-primary); text-decoration: none; } .article-action-icon { @include bidi-style(margin-right, 5px, margin-left, 0); vertical-align: top; width: 17px; height: 17px; fill: currentColor; } .article-action-name { @media screen and (max-width: 1080px) { display: none; } @media screen and (max-width: 1358px) { .main:not(.is-closed) & { display: none; } } } .article-add { position: relative; z-index: 1; // fixed chrome 49 + flex issue, not shown article } .article-new { margin-top: auto; margin-bottom: 36px; } .dropArea { background: var(--background-secondary); border: 5px solid; color: hsl(202, 66%, 55%); font-size: 20px; margin: 5px; display: none; @extend .fit; &--small { margin: 0; font-size: inherit; border-width: 3px; min-height: 38px; } } .is-dropTarget .dropArea { display: block; } .dropContainer { position: relative; } .dropArea-inner { @extend .fit; display: flex; align-items: center; justify-content: center; } .shortcut .dropdown-menu > .is-active > a { background: none; } .shortcut > .dropdown-menu { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; max-width: 100%; min-width: 0; } .editControls { position: absolute; left: 0; top: 5px; @include phone { position: static; margin: 0 0 10px; display: flex; align-items: center; } } .article-add[data-type='email'] .editControls { top: 159px; } .editControls-item { position: absolute; top: 43px; @extend .u-clickable, .zIndex-4; @include phone { position: relative; z-index: initial; top: 0 !important; transform: none !important; opacity: 1 !important; } &.is-hidden { display: none; @include phone { display: block; } } } .editControls-item:nth-child(2) { @include phone { z-index: 1; } } .editControls-item:nth-child(3) { top: 79px; } .editControls-item:nth-child(4) { top: 115px; } .editControls-item:not(:last-child) { border-bottom: 1px solid var(--border); @include phone { border-bottom: 0; border-right: 1px solid var(--border); } } .editControls-iconHolder { width: 38px; height: 35px; display: flex; align-items: center; justify-content: center; @include phone { width: 48px; height: 32px; } } .editControls-icon { @include phone { line-height: 0.7; } } .editControls-icon .icon { fill: var(--interactive-muted); } .pop-selector { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: var(--elevation-low); @include phone { top: -4px; left: 7px; } &.is-hidden { display: none; } } .pop-selectable { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; @extend .u-clickable; background: var(--background-tertiary); } .pop-selectable:hover { background: var(--highlight); } .pop-selectable:first-child { @include bidi-style(border-radius, 4px 0 0 4px, border-radius, 0 4px 4px 0); } .pop-selectable:last-child { @include bidi-style(border-radius, 0 4px 4px 0, border-radius, 4px 0 0 4px); } .pop-selectable:only-child { border-radius: 4px; } .pop-selectable:hover .pop-selectable-icon { fill: var(--text-inverted); } .article-add .icon-internal { fill: hsl(18, 87%, 65%); } .article-add.is-public .icon-internal, .article-add.is-internal .icon-public { display: none; } .article-new .textBubble { border-radius: 5px; padding-left: 12px; padding-right: 12px; cursor: text; } .articleNewEdit-body { width: 100%; position: relative; min-height: 20px; vertical-align: bottom; border: none; outline: none; resize: none; height: auto; @include phone { font-size: 16px; } } .article-new .bubble-arrow::after { box-shadow: none; } .article-attachment { position: absolute; bottom: -4px; left: 10px; right: 10px; height: 42px; padding: 10px 0; color: var(--text-muted); overflow: hidden; @extend .u-textTruncate; } .attachments:not(:empty) { padding: 9px 5px; border-top: 1px solid var(--background-modifier-border); margin: 6px -12px 30px; } .ticket-create .attachments:not(:empty) { margin-left: 0; margin-right: 0; margin-bottom: 56px; } .ticket-create .attachment--row { line-height: 1.45; } .attachment.attachment--row { font-size: 13px; padding: 1px 10px 1px 7px; @include rtl(padding, 1px 7px 1px 10px); cursor: default; position: relative; display: flex; } .attachment.attachment--preview { display: flex; font-size: 13px; padding: 9px 4px; position: relative; min-height: 42px; color: inherit; align-items: flex-start; border-bottom: 1px solid var(--background-modifier-border); &:last-child { border-bottom: none; } } .attachment-icon { margin-top: 2px; width: 38px; text-align: center; flex-shrink: 0; .icon { vertical-align: bottom; } img { width: 30px; height: 30px; object-fit: cover; } } .attachment--preview { .attachment-text { margin: 0 4px; } } .attachment--preview .attachment-name { min-width: 0; display: block; @extend .u-highlight; word-break: break-all; } .attachment--preview .attachment-size { white-space: nowrap; font-size: 11px; color: var(--text-muted); } .attachment--preview .attachment-delete { color: var(--interactive-muted); text-decoration: underline; display: none; white-space: nowrap; @include bidi-style(margin-left, auto, margin-right, 0); @extend .u-clickable; @include phone { display: block; } } .attachment:hover .attachment--preview .attachment-delete { padding: 0 10px 0 30px; float: right; display: block; position: absolute; right: 0; background: linear-gradient( to right, transparent, var(--background-secondary-hover) 20px ); } .attachment--preview .attachment-delete .icon { fill: var(--interactive-muted); width: 9px; height: 9px; @include bidi-style(margin-right, 5px, margin-left, 0); } .attachment:hover { background: var(--background-secondary-hover); } .attachment--row .attachment-name { @include bidi-style(margin-right, 5px, margin-left, 0); min-width: 0; @extend .u-highlight; } .attachment--row .attachment-size { white-space: nowrap; float: right; @include bidi-style(margin-right, 10px, margin-left, 0); } .attachment--row .attachment-delete { color: var(--interactive-muted); text-decoration: underline; display: none; white-space: nowrap; @include bidi-style(margin-left, auto, margin-right, 0); @extend %clickable; } .attachment:hover.attachment--row .attachment-delete { padding: 0 10px 0 30px; float: right; display: block; position: absolute; right: 0; background: linear-gradient( to right, transparent, var(--background-secondary-hover) 20px ); } .attachment--row .attachment-delete .icon { width: 9px; height: 9px; @include bidi-style(margin-right, 5px, margin-left, 0); } .attachmentPlaceholder-inputHolder { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; pointer-events: auto; @extend .u-highlight; &:has(input[type='file'][disabled]) { color: var(--text-muted-alt); pointer-events: none; } } .attachmentUpload { color: var(--text-muted); } .attachmentUpload-cancel { @extend .u-clickable; @include bidi-style(margin-left, auto, margin-right, 0); text-decoration: underline; } .attachmentUpload .icon { fill: var(--interactive-muted); width: 9px; height: 9px; @include bidi-style(margin-right, 5px, margin-left, 0); } .attachmentUpload-progressBar { position: absolute; height: 4px; background: hsl(202, 66%, 55%); left: 0; bottom: 0; } .attachmentUpload--standalone { position: relative; margin-bottom: 7px; padding-bottom: 2px; box-shadow: 0 -4px var(--border) inset; &:last-child { margin-bottom: 0; } .attachmentUpload-cancel { padding: 0 2px 0 7px; } } .attachmentUploadContainer { .attachmentUpload-progressBar { position: inherit; } } .tabsSidebar-tabsSpacer { @include bidi-style(padding-right, 62px !important, padding-left, 0); /* force div to show scrollbars because we offset the sidebar tabs when the os shows scrollbars */ overflow-x: hidden; overflow-y: scroll; @include phone { @include bidi-style(padding-right, 0 !important, padding-left, 0); } } .tabsSidebar-sidebarSpacer { @include bidi-style(margin-right, $sidebarWidth, margin-left, 0); transition: margin-right 500ms; @include rtl(transition, margin-left 500ms); @include desktop { @include bidi-style(margin-right, $desktopSidebarWidth, margin-left, 0); } } .tabsSidebar-sidebarSpacer.is-closed { margin-right: 0; @include rtl(margin-left, 0); } .tabsSidebar-holder { overflow: hidden; position: relative; flex: 1; display: flex; flex-direction: column; } .tabsSidebar .sidebar { width: $sidebarWidth; border-left: 1px solid var(--border); padding: 0; margin-bottom: 1px; @include desktop { width: $desktopSidebarWidth; } } .tabsSidebar .sidebar > hr { margin: 20px; } .tabsSidebar .sidebar-header { display: flex; align-content: stretch; position: relative; margin: 0 20px; + hr { margin-top: 0; } } .sidebar-header-headline { padding: 33px 8px 17px 25px; @include rtl(padding, 33px 25px 17px 8px); margin: 0 0 0 -20px; @include rtl(margin, 0 -20px 0 0); line-height: 1; @extend .u-clickable, .u-textTruncate; } .sidebar-header-actions { flex: 1; @include bidi-style(margin-right, 5px, margin-left, 0); display: flex; align-items: center; .dropdown { flex: 1; position: static; } .dropdown-toggle { padding-top: 38px; padding-bottom: 24px; } } .tabsSidebar-close { padding: 27px 35px 12px 0; margin: 0 -20px 0 0; @extend .u-clickable; display: flex; align-items: center; justify-content: center; .icon { fill: var(--interactive-primary); } } .tabsSidebar .sidebar-content { padding: 0 20px 20px; } .sidebar.bottom-form-shadow { box-shadow: 0 -1px rgba(0, 0, 0, 0.005) inset, 0 -2px rgba(0, 0, 0, 0.005) inset, 0 -3px rgba(0, 0, 0, 0.005) inset, 0 -4px rgba(0, 0, 0, 0.005) inset; } .tabsSidebar { position: absolute; @include bidi-style(right, 0, left, auto); top: 0; bottom: 0; transition: 500ms; z-index: 300; &.tabsSidebar--attributeBarSpacer { bottom: 60px; } } .tabsSidebar.is-closed { transform: translateX($sidebarWidth); @include rtl(transform, translateX(-$sidebarWidth)); @include desktop { transform: translateX($desktopSidebarWidth); @include rtl(transform, translateX(-$desktopSidebarWidth)); } } .tabsSidebar-tabs { display: flex; flex-direction: column; justify-content: center; position: absolute; @include bidi-style(left, -56px, right, auto); top: 0; bottom: 0; pointer-events: none; @include phone { @include bidi-style(left, -47px, right, auto); } } .test { position: absolute; width: 100%; } .tabsSidebar-tab { width: 56px; height: 60px; background: var(--background-primary-alt); position: relative; border-top: 1px solid var(--border-alt); @extend .u-clickable; pointer-events: auto; display: flex; align-items: center; justify-content: center; @include phone { width: 47px; height: 50px; } } .tabsSidebar-tab.is-changed::before { position: absolute; content: ''; left: -3px; width: 6px; height: 6px; top: 50%; margin-top: -3px; border-radius: 100%; background: var(--interactive-muted-alt); box-shadow: 0 0 0 2px var(--background-primary); } .tabsSidebar-tab:first-child { @include bidi-style(border-top-left-radius, 8px, border-top-right-radius, 0); border-top: none; } .tabsSidebar-tab:last-child { @include bidi-style( border-bottom-left-radius, 8px, border-bottom-right-radius, 0 ); } .tabsSidebar-tab .icon { width: 24px; height: 24px; fill: var(--interactive-muted-alt); } .tabsSidebar-tab.active { .tabsSidebar-tab-count { background: var(--interactive-muted-alt-selected); &::after { border-right-color: var(--interactive-muted-alt-selected); } &.tabsSidebar-tab-count--info { background: var(--button-primary-background); opacity: 1; &::after { border-right-color: var(--button-primary-background); } } &.tabsSidebar-tab-count--success { background: hsl(145, 51%, 45%); opacity: 1; &::after { border-right-color: hsl(145, 51%, 45%); } } &.tabsSidebar-tab-count--warning { background: hsl(45, 98%, 63%); opacity: 1; &::after { border-right-color: hsl(45, 98%, 63%); } } &.tabsSidebar-tab-count--danger { background: hsl(11, 85%, 48%); opacity: 1; &::after { border-right-color: hsl(11, 85%, 48%); } } } .icon { fill: var(--interactive-muted-alt-selected); } } .tabsSidebar-tab-count { position: absolute; left: 9px; top: 5px; background: var(--interactive-muted-alt); width: 16px; height: 13px; text-align: center; border-radius: 2px; font-size: 9px; line-height: 14px; color: var(--background-primary-alt); @include phone { left: 4px; top: 4px; } [data-tab='organization'] & { left: 7px; + .icon { margin-left: 3px; } } + .icon { margin-top: 6px; } &::after { content: ''; position: absolute; top: 100%; right: 20%; border-bottom: 3px solid transparent; border-right: 5px solid var(--interactive-muted-alt); } &.tabsSidebar-tab-count--info { background: var(--button-primary-background); opacity: 0.5; &::after { border-right-color: var(--button-primary-background); } } &.tabsSidebar-tab-count--success { background: hsl(145, 51%, 45%); opacity: 0.5; &::after { border-right-color: hsl(145, 51%, 45%); } } &.tabsSidebar-tab-count--warning { background: hsl(45, 98%, 63%); opacity: 0.5; &::after { border-right-color: hsl(45, 98%, 63%); } } &.tabsSidebar-tab-count--danger { background: hsl(11, 85%, 48%); opacity: 0.5; &::after { border-right-color: hsl(11, 85%, 48%); } } } .alert { padding: 10px 15px 8px; border-radius: 3px; color: var(--text-inverted); border: none; background: hsla(0, 0%, 0%, 0.3); .icon { @include bidi-style(margin-right, 10px, margin-left, 0); fill: currentColor; } .btn { background: hsla(0, 0%, 0%, 0.2); border-color: hsla(0, 0%, 0%, 0.1); color: inherit; } &--info { background: var(--button-primary-background); } &--success { &, &[contenteditable]:hover, &[contenteditable]:focus { background: hsl(145, 51%, 45%); } } &--warning { color: hsl(45, 98%, 17%); background: hsl(45, 98%, 63%); .btn { background: hsla(0, 0%, 100%, 0.2); } } &--danger { background: hsl(11, 85%, 48%); } &--square { border-radius: 0; } &.horizontal .btn { margin-top: -5px; margin-bottom: -4px; &:last-child { margin-right: -5px; } } &-row { margin: 3px 0; + .btn { margin-top: 3px; } } } .tags, .links, .time-units, .link_kb_answers { margin: 20px 0; } .tags { margin-top: 10px; } .userNotifications label + .btn { margin-top: 1px; } .list { padding: 0; margin-bottom: 5px; } .list-title { margin-top: 7px; margin-bottom: 4px; text-transform: uppercase; color: var(--ghost-color); display: block; font-size: 12px; font-weight: normal; letter-spacing: 0.05em; } .list-item { display: flex; align-items: center; border-bottom: 1px solid var(--background-modifier-border); } .list-item-name { flex: 1; padding: 4px 1px; } .list-item-delete { padding: 0 10px; @include bidi-style(margin-right, -3px, margin-left, 0); display: flex; align-items: center; justify-content: center; align-self: stretch; @extend .u-clickable; .icon { width: 9px; height: 9px; fill: var(--interactive-muted); } } .list-item-delete:hover .icon { fill: hsl(1, 77%, 47%); } li.list-item-none { list-style-type: none; } .ticket-id { color: var(--text-inverted); background: var(--interactive-muted-alt); font-size: 11px; border-radius: 7px; padding: 0 5px; @include bidi-style(margin-right, 2px, margin-left, 0); } .attributeBar { background: var(--background-secondary); transition: margin 250ms; flex-shrink: 0; border-top: 1px solid var(--border); &.is-closed { margin-bottom: -60px; } @include phone { &-reset { flex-shrink: 5; } .btn, .buttonDropdown { min-width: 20px; &--only-icon { min-width: 36px; } } } &-inner { height: 60px; display: flex; align-items: center; justify-content: flex-end; padding: 10px; } &-avatars { margin-right: 10px; } &-draft-spacer { width: 1px; height: 60px; margin-right: 15px; background: var(--background-modifier-accent); } &-avatars:empty + &-draft-spacer { display: none; } &--border { border-top: 1px solid var(--border); } &--spacer-after { margin-right: auto; } } .newTicket { padding: 14px 34px; @include phone { padding: 0; } } .newTicket .sidebar { width: 290px; } .newTicket .form-control { border-color: var(--border); &:focus, &.focus { border-color: var(--border-highlight); } } .newTicket .article-form-top { margin-top: 15px; } .newTicket--chatTicket { flex: 1; display: flex; padding: 0; height: 100%; & > .icon { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); } & > .box { width: calc(50% - 47px); margin: 34px; } .chatHistory { display: flex; flex-direction: column; } .boxFade { width: 94px; top: 34px; height: 100%; position: absolute; @include bidi-style(margin-left, -34px, margin-right, 0); z-index: 1; } } .box { background: var(--background-secondary); margin: 20px 0; border: 1px solid var(--border); padding: 20px 24px; } .box.box--newTicket { max-width: 1080px; margin-left: auto; margin-right: auto; @include phone { margin: 0; border: none; padding: 15px; } } .box .page-header { text-align: center; margin-bottom: 12px; } .box--paper { background-image: linear-gradient( transparent 30px, var(--background-modifier-border) 31px ); background-size: 100% 31px; line-height: 31px; padding-top: 31px; padding-bottom: 31px; h1, h2, h3 { margin: 0; line-height: inherit; } h3:not(:first-child) { margin-top: 31px; } } .box h1 { margin-top: 10px; margin-bottom: 12px; color: var(--text-normal); flex: 1; } .box h2 { margin-top: 12px; } .box .two-columns { margin-left: -4px; margin-right: -4px; } .box .two-columns .column { margin-left: 4px; margin-right: 4px; width: calc(50% - 8px); @include phone { width: auto; } } .box-controls { margin-top: 20px; display: flex; align-items: center; } .box--yellow { background: hsl(47, 100%, 93%); border-color: hsl(47, 100%, 75%); color: hsl(47, 20%, 67%); h1, h2 { color: hsl(47, 3%, 28%); } } .box-progress { display: flex; align-items: center; justify-content: center; } .box-progress-title { color: hsl(47, 3%, 28%); } .box-progress-body { flex: 1; @include bidi-style(margin-left, 24px, margin-right, 0); display: flex; align-items: center; justify-content: center; progress { width: 100%; } } .horizontal > .box { margin-top: 4px; margin-bottom: 4px; & + .box { border-left-width: 0; } } .formset-inset { margin: 34px -24px 24px; padding: 19px 24px 24px; background: var(--background-primary-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .type-tabs { @include phone { overflow: hidden; -webkit-overflow-scrolling: none; } } .type-tabs .tab { height: 40px; line-height: 42px; padding: 0 12px; list-style: none; align-items: flex-start; @include phone { display: block; text-align: center; flex-shrink: 1; } } .type-tabs .tab-icon { width: 17px; height: 17px; fill: var(--interactive-muted); vertical-align: top; @include bidi-style(margin-right, 9px, margin-left, 0); margin-top: 11px; transform: scale(1.2); flex-shrink: 0; } .type-tabs .tab.active .tab-icon { fill: var(--text-inverted); } .token { @include ltr(padding, 0 0 0 10px); margin: 0 5px 6px 0; height: 26px; color: var(--tag-text); border-radius: 3px; background: var(--tag-background); border: none; float: none; display: inline-flex; align-items: center; cursor: default; max-width: 100%; &.active { background: var(--highlight); color: var(--text-inverted); .close, .token-close { opacity: 1; } } } /* selector needs to be stronger than .token-input in order to override input[type=text] */ .tokenfield .token-input { vertical-align: top; padding: 0 10px 7px 5px; margin: 0; min-width: 60px; height: 32px; display: inline-block; border: none; background: none; box-shadow: none; outline: none; flex: 1; &:focus { box-shadow: none; } &[disabled] { background: none; } } .tokenfield .token ~ .token-input { padding: 0 5px 7px 0; } .token-label { padding: 0; @include rtl(padding, 0 10px 0 0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tokenfield.form-control { padding: 7px 7px 0; height: auto; display: flex; flex-wrap: wrap; } .token .close, .token-close { margin: 0; padding: 0 9px 1px 6px; font-family: inherit; font-weight: 100; font-size: 28px; line-height: 1; color: inherit; text-shadow: none; opacity: 0.5; outline: none; height: auto; @extend %clickable; } .token .close:hover, .token-close:hover { opacity: 0.5; } /* allow/show autocomplete in modal dialog */ .ui-autocomplete.ui-widget-content { @extend .zIndex-11; position: absolute; max-height: 380px; overflow: auto; -webkit-overflow-scrolling: touch; } .ui-menu { background: var(--background-tertiary); border: none; color: var(--text-inverted); font-family: inherit; font-size: inherit; .ui-menu-item { padding: 9px 15px; list-style-image: none; &.is-inactive { text-decoration: line-through; opacity: 0.73; } &:not(:first-child) { box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset; } &.ui-state-focus { margin: 0; border: none; background: var(--highlight); color: inherit; + li { box-shadow: none; } } } } .drox { color: var(--text-muted); } .drox .drox-header { padding-bottom: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--background-modifier-border); } .drox a.create { margin-top: 2px; display: inline-block; } .drox .form-group { margin-bottom: 22px; } .drox .drox-body p:first-child { margin-top: 20px; } .newTicket .templates { border-bottom: 1px solid var(--background-modifier-border); padding-bottom: 14px; } .templates-manage fieldset { margin: 0; } .template-attributes { margin: 17px 0 19px; } .template-attribute { height: 24px; line-height: 25px; @include bidi-style(padding-left, 10px, padding-right, 0); margin-bottom: 2px; font-size: 13px; color: var(--text-muted-alt); background: var(--background-primary-alt); border: 1px solid var(--border); border-radius: 3px; } .template-attribute .key { text-transform: uppercase; @include bidi-style(margin-right, 3px, margin-left, 0); } .template-attribute .value { @include bidi-style(margin-left, 3px, margin-right, 0); } .template-attribute .delete { padding: 0 7px; margin-top: 4px; line-height: 19px; font-size: 28px; font-weight: 300; opacity: 0.4; } .customer-name { color: var(--text-normal); } .customer-email { margin-top: 5px; margin-bottom: 20px; display: block; } .table.user-list { tr:hover .switchView { visibility: visible; } td .list { margin-top: -4px; } .switchView { visibility: hidden; display: block; text-overflow: ellipsis; overflow: hidden; } .btn { margin: 3px 5px 0; } } .switchBackToUser { display: flex; align-items: center; background: hsl(200, 87%, 45%); color: var(--text-inverted); height: 45px; padding: 0 17px; /* top: -45px !important; */ border-bottom: 5px solid hsl(205, 90%, 60%); } .switchBackToUser-icon { width: 19px; height: 18px; } .switchBackToUser-text { @include bidi-style(margin-left, 10px, margin-right, 0); } .switchBackToUser-close { width: 40px; height: 40px; @include bidi-style(margin-right, -10px, margin-left, 0); display: flex; align-items: center; justify-content: center; svg { fill: var(--text-inverted); } } .modal { @extend .zIndex-11; &-loader { text-align: center; padding: 70px; } &-backdrop--local { background: var(--background-primary-alt); } } .modal-dialog { width: auto; max-width: 660px; margin-top: 35px; margin-bottom: 35px; @extend .zIndex-11; @include phone { max-width: calc(100% - 20px) !important; margin: 10px; } &.wizard { margin: 35px auto; } } .modal--veryLarge .modal-dialog { max-width: 990px; } .modal--large .modal-dialog { max-width: 740px; } .modal--small .modal-dialog { max-width: 440px; } .modal--dynamicSize .modal-dialog { max-width: 100%; width: max-content; padding: 0 35px; @include phone { padding: 0; margin: 10px; } } .modal-dialog.wizard { max-width: 460px; } .modal-content { border-radius: 0; border: 1px solid var(--border); box-shadow: none; color: var(--text-normal); background: var(--background-secondary); } .modal-header { padding: 30px 23px 23px; border: none; @include phone { padding: 14px 15px; } &--empty { padding: 0; } } .modal-header h1 { text-align: center; @include phone { text-align: initial; line-height: 1.2; } } .modal-close { padding: 23px; position: absolute; z-index: 1; right: 0; color: var(--interactive-muted); @include rtl(right, auto); @include rtl(left, 0); top: 0; @extend .u-clickable; @include phone { position: static; padding: 21px; margin: -14px -15px 0 0; float: right; } &:active { color: var(--interactive-muted-active); } .icon-diagonal-cross { fill: currentColor; } } .modal-alerts-container { padding: 0 23px; } .modal-body { padding: 0 23px; clear: both; @include phone { padding: 0 15px; } h2:first-child { margin-top: 0; } p:first-child, .alert.hidden:first-child + p { margin-top: 0; } .table > thead > tr > th { background: var(--background-primary-alt); } } .modal-footer { padding: 23px 23px 20px; border: none; display: flex; @include rtl(text-align, left); @include phone { padding: 15px; } .btn--text + .btn--text { margin-bottom: -10px; } } .modal-leftFooter, .modal-centerFooter, .modal-rightFooter { display: flex; align-items: center; /* because of btn--text btn--subtle being thinner than the rest */ flex: 1; } .modal.modal--local { display: block; padding: 0 40px; @extend .zIndex-11; @include bidi-style(padding-left, 40px, padding-right, 0); @include phone { padding: 0 !important; } .modal-dialog { box-shadow: 0 0 40px hsla(210, 17%, 40%, 0.34); @include dark { box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.34); } } } .caret { position: absolute; top: 50%; margin-top: -3px; right: 10px; } .dropdown-backdrop { @extend .zIndex-5; // has to be behind dropdown-menu } .dropdown-menu { @extend .zIndex-6; // has to be behind modal windows and beneath notifications (popover) margin: 0; padding: 0; min-width: 100%; color: var(--text-inverted); text-transform: initial; letter-spacing: 0; background: var(--background-tertiary); border-radius: 0; border: none; box-shadow: none; overflow: hidden; @include rtl(text-align, right); overscroll-behavior: contain; } .dropdown-menu .divider { background: var(--background-modifier-border); } .dropdown-menu kbd { background: none; color: inherit; padding: 2px 5px; @include bidi-style(margin-left, 7px, margin-right, 0); line-height: 1; vertical-align: baseline; opacity: 0.5; } .dropdown-toggle { display: flex; align-items: center; @extend .u-clickable; } .dropdown-icon { width: 16px; height: 16px; } .dropdown-menu.dropdown-menu--light { background: var(--background-secondary); color: var(--text-muted); } .dropdown-menu.dropdown-menu--light > li { color: var(--text-nav); &.dropdown-header { color: var(--text-muted); } } .dropdown-menu.dropdown-menu--light > li > a:hover { background: var(--background-secondary-hover); } .user-menu li.add .dropdown-menu.dropdown-menu--light li > a:hover { color: var(--text-normal); } .dropdown-menu.dropdown-menu--light li:hover { background: none; } .dropdown-menu.dropdown-menu--light li.is-active { color: var(--text-inverted); } .dropdown ul { margin: 0; padding: 0; } .dropdown li, .dropup li { height: 39px; line-height: 39px; padding: 0 15px; @extend %clickable; white-space: nowrap; &:focus { outline: none; } &.is-active { small { color: var(--text-muted-highlight); } } } .dropdown.dropdown--actions li.with-category { height: 39px; padding: 2.5px 15px; display: block; } .dropdown li:not(:first-child) { box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset; } .dropdown li.label { box-shadow: none; + li { box-shadow: none; } } .dropdown li:hover, .dropdown li.is-active { background: var(--highlight); + li { box-shadow: none; } } .dropdown-menu > li.danger:hover, .dropdown-menu > li.danger.is-active { background: var(--danger-color); } .dropdown-menu > li.create:hover, .dropdown-menu > li.create.is-active { background: hsl(145, 51%, 45%); } .dropdown-menu > li[disabled] { opacity: 0.33; &:hover, &.is-active { background: none; cursor: default; } } .dropdown-menu > li > a { color: inherit; padding: 0 15px; margin: 0 -15px; line-height: inherit; } .dropdown-menu > li > a:hover { color: inherit; background: none; } .dropdown-menu > li > a span { display: block; } .dropdown-menu > li > a.is-hovered { color: var(--text-inverted); text-decoration: none; background: var(--menu-background-active); } .dropdown-menu .badge--text { @include bidi-style(padding-left, 10px, padding-right, 0); } .dropdown.dropdown--actions { li { line-height: initial; height: auto; padding: 11px 15px; display: flex; align-items: center; word-break: break-all; } .dropdown-iconSpacer, .dropdown-selectedSpacer { display: flex; align-items: center; } .dropdown-iconSpacer { width: 25px; } .dropdown-selectedSpacer { width: 34px; @include bidi-style(margin-left, auto, margin-right, 0); justify-content: flex-end; opacity: 0; .icon { fill: var(--text-inverted); } &.is-selected { opacity: 1; } } a { @extend .u-clickable; display: flex; flex: 1; padding: 0 18px; } li.dropdown-highlight-list { padding: 0 10px; a { padding: 11px 18px; } } } .dropdown.dropdown--wide { li { padding-top: 12px; padding-bottom: 12px; } } li.dropdown-header { line-height: 34px; height: 30px; color: var(--text-muted); box-shadow: none !important; pointer-events: none; } .dropdown-menu--has-submenu { overflow: hidden; background: none; ul { background: var(--background-tertiary); } } .dropdown-submenu { position: absolute; top: 0; left: 0; width: 100%; } .dropdown.dropdown--actions .dropdown-controls { @extend .u-clickable; display: flex; .icon { fill: var(--text-inverted); @include bidi-style(margin-right, 10px, margin-left, 0); flex-shrink: 0; } } .dropdown-title { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-detail { opacity: 0.5; } .dropdown { .dropdown-menu-full-height { li { padding: 0; } a { padding: 11px 18px; margin: 0; } } } .recipientList, .recipientList-organizationMembers { list-style: none; padding: 0; } .recipientList-entry { display: flex; align-items: center; @extend .u-clickable; &.is-inactive { .recipientList-name { text-decoration: line-through; opacity: 0.73; } } } .recipientList-entry .recipientList-iconSpacer { width: 20px; @include bidi-style(margin-left, -5px, margin-right, 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .recipientList-icon { width: 16px; height: 16px; fill: var(--text-inverted); opacity: 0.2; } .recipientList--new, .recipientList-entry:hover, .recipientList-entry.is-active { .recipientList-icon { opacity: 1; } } .recipientList-name { color: var(--text-inverted); @include bidi-style(margin-left, 10px, margin-right, 0); flex: 1; @extend .u-textTruncate; } .recipientList-status { opacity: 0.5; margin: 0 10px; flex-shrink: 1; &:last-child { margin-right: 0; } } .recipientList-arrow { fill: var(--text-inverted); opacity: 0.39; } .recipientList-entry:hover .recipientList-arrow { opacity: 1; } .recipientList-detail { opacity: 0.5; &.is-inactive > span { text-decoration: line-through; } } .recipientList-icon.plus { @include bidi-style(margin-left, 13px, margin-right, 0); } .recipientList--new { background: hsl(145, 51%, 45%); } .dropdown .recipientList--new:hover { background: hsl(147, 52%, 43%); } .recipientList-controls { @extend .u-clickable; padding: 0 10px !important; .dropdown &:hover { background: var(--supergood-color); .icon-arrow-left { fill: var(--text-inverted); } } & + li { box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset; } } .recipientList-organizationMembers { position: absolute; top: 0; left: 0; right: 0; } .organizationInfo-avatar, .userInfo-avatar { float: right; @include rtl(float, left); position: relative; } .userList { list-style: none; padding: 0; .userList-entry { margin: 10px 0; display: flex; align-items: center; &:last-child { margin-bottom: 0; } } .userList-name { @extend .u-textTruncate; @include bidi-style(margin-left, 7px, margin-right, 0); } } .checkbox, .radio { font-size: 14px; padding: 0 6px; .form-group & { padding: 10px 12px; margin: 0; list-style: none; height: auto; display: flex; flex-direction: column; align-items: flex-start; background: var(--background-secondary); border: 1px solid var(--border); } .checkbox-replacement { display: inline-block; } label { padding-left: 0; min-height: 0; } > label, &-child { margin-top: 5px; font-family: inherit; font-size: 14px; color: inherit; text-transform: inherit; letter-spacing: 0; line-height: 1.2; &:first-child { margin-top: 0; } &.is-disabled { cursor: default; touch-action: default; span { opacity: 0.33; } } &.additional-radio-controls { margin-top: 0; .controls { display: inline-flex; margin-left: 5px; } } } &-child { padding-left: 20px; } .help-text { display: table; font-size: 0.92em; margin: 2px 0 3px 18px; } } .checkbox.form-group .checkbox--list, .radio.form-group .radio--list { margin-top: 0; margin-bottom: 15px; height: auto; padding-top: 3px; padding-bottom: 3px; } .checkbox, .radio { &.form-group .controls label { padding: 2px 0; font: inherit; margin-bottom: 0; color: inherit; text-transform: inherit; letter-spacing: 0; line-height: 1.2; &:first-child { margin-top: 0; } &.is-disabled { cursor: default; touch-action: default; span { opacity: 0.33; } } } &-child { padding-left: 20px; } } .radio_graphic .selections-container { display: grid; grid-gap: 10px; // fit as many as possible in one line, they must at least be 112px wide grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); label { margin-top: 0; position: relative; } .icon { flex-shrink: 0; } .icon-checked { display: none; } .label-box { display: block; background: var(--background-secondary); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .label-row { display: flex; align-items: center; padding: 5px 10px; } .label-text { display: block; margin-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio-illustration { display: block; width: 100%; padding-bottom: 100%; position: relative; img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; } } input { &:checked { ~ .label-box { border-color: var(--border-highlight); box-shadow: 0 0 0 3px var(--shadow-highlight); .icon-checked { display: inline; } .icon-unchecked { display: none; } } } } } .userSearch-label { margin-top: 11px; @include bidi-style(margin-right, 10px, margin-left, 0); } .userSearch .tab:not(.active) { background: var(--background-secondary); } .userSearch { margin: 0 0 20px; } .userSearch .tabs { margin: 0; } .nav { list-style: none; padding: 0; margin: 0; } .nav a { padding: 10px 15px; display: block; } .nav-tabs { display: flex; margin: 10px -20px 20px; padding: 0 20px 0 21px; /* margin-left: -1px */ @include rtl(padding, 0 21px 0 20px); position: relative; } .nav-tabs li { margin: 0; color: var(--interactive-muted); border: 1px solid var(--border); margin-left: -1px; background: var(--background-secondary); position: relative; &:first-child { border-radius: 7px 0 0 7px; @include rtl(border-radius, 0 7px 7px 0); } &:last-child { border-radius: 0 7px 7px 0; @include rtl(border-radius, 7px 0 0 7px); } &:only-child { border-radius: 7px; } &.active { color: var(--text-inverted); background: var(--button-active); } a { padding: 10px 24px 8px; color: inherit; color: inherit; } } .tab-content { h2:first-child { margin-top: 0; } } .or-divider { position: relative; margin: 16px 0; text-align: center; &::before { content: ''; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -1px; height: 1px; background: hsla(0, 0%, 0%, 0.1); } span { position: relative; background: var(--background-secondary); padding: 0 10px; .modal-body & { background: var(--background-primary); } } } .settings-entry { margin-bottom: 42px; max-width: 700px; @include phone { overflow: auto; -webkit-overflow-scrolling: touch; } &--stretched { max-width: none; } } .setting-controls { margin-top: 14px; display: flex; justify-content: flex-end; } .form-item .form-group { margin-bottom: 0; } .form-item .form-group + .form-group { margin-top: 15px; } .form-item + .btn { @include bidi-style(margin-left, 23px, margin-right, 0); } .scrollPageHeader { @extend .zIndex-5; display: flex; align-items: center; background: var(--background-secondary); border-bottom: 1px solid var(--border); height: 64px; top: 0; left: 0; right: 0; padding: 0 22px; position: absolute; transform: translateY(-100%); @include phone { height: 50px; padding: 0 6px; overflow: hidden; &.is-closed { overflow: visible; } } } .scrollPageHeader small { color: var(--text-muted-alt); @include phone { margin-top: 1px; @include bidi-style(margin-left, 3px, margin-right, 0); } } .scrollPageHeader .ticket-title { max-width: initial; padding: 0; min-width: 0; flex: 1; } .scrollPageHeader h1 { font-size: 19px; margin: 0 15px; @extend .u-textTruncate; @include phone { font-size: 17px; margin: 0 5px; } } .wizard { margin: auto; // makes sure that the wizard is scrollable } .wizard-logo { fill: var(--text-inverted); @include bidi-style(margin-left, -25px, margin-right, 0); margin-bottom: 5px; } .wizard-slide { @extend .hero-unit; display: flex; flex-direction: column; width: 400px; padding-bottom: 18px; margin-bottom: 20px; &.wizard-slide--large { width: 460px; } &.wizard-slide--very-large { width: auto; max-width: 990px; } } .wizard h2 { text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.13); padding-bottom: 8px; margin-bottom: 16px; & + p { margin-top: 0; } } .wizard-body { flex: 1; padding-bottom: 15px; @include phone { width: 100%; } .form-control { min-width: 0; } } .wizard-controls { display: flex; margin-top: 15px; height: 39px; } .wizard-buttonList { margin-top: 15px; min-width: 200px; } p + .wizard-buttonList, label + .wizard-buttonList { margin-top: 5px; } .wizard-loadingText { text-align: center; margin: 0; } .wizard-loadingText .loading { vertical-align: middle; @include bidi-style(margin-right, 10px, margin-left, 0); } .wizard-aside { padding-top: 15px; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.13); } .setup.wizard .wizard-body { min-height: 140px; & > p:first-child { margin-top: 0; } } .setup.wizard .logo-preview, .branding .logo-preview { display: block; height: 0; max-width: 200px; max-height: 100px; &[src=''] { visibility: hidden; } + .logo-preview-placeholder { height: 100px; color: var(--text-muted); background: var(--background-modifier-accent); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; } } .setup.wizard .logo-preview:not([src='']) { margin: 0 auto 15px; height: auto; + .logo-preview-placeholder { display: none; } } .setup.wizard .base-outbound-settings { margin-top: 15px; } .branding .logo-preview:not([src='']) { margin: 20px auto 12px; height: auto; + .logo-preview-placeholder { display: none; } } .branding.login { padding: 24px 24px 0; } .import.wizard .wizard-slide { min-height: 300px; } .import-source { border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.13); height: 50px; margin: 5px 0; @extend .u-clickable; } .input-feedback { position: absolute; @include bidi-style(padding-left, 10px, padding-right, 0); right: 1px; top: 1px; bottom: 1px; width: 52px; border-radius: 0 5px 5px 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), white 33%); &--no-background { background: none; } } .input-group-addon { color: inherit; } .input-feedback--no-background { background: none; } .input-feedback .icon { display: none; } .input-feedback[data-state='loading'] .loading.icon, .input-feedback[data-state='error'] .icon-error, .input-feedback[data-state='success'] .icon-checkmark { display: block; } .progressTable { width: 100%; margin: 0 auto; } .progressTable td { padding: 8px; overflow: auto; -webkit-overflow-scrolling: touch; width: 33%; } .progressTable tr:not(:last-child) { border-bottom: 1px solid #eee; } .progressTable td:first-child { text-align: end; } .progressTable progress { width: 100%; min-width: 60px; display: block; } .progressTable .icon-checkmark { @include bidi-style(margin-left, 10px, margin-right, 0); opacity: 0; } .progressTable tr.is-done .icon-checkmark { opacity: 1; } .channelList { flex: 1; display: flex; flex-direction: column; background: var(--background-secondary); border-radius: 2px; margin: 5px 0 20px; box-shadow: var(--elevation-low); } .channelList, .channelList-controls, .channelList-controlEntry { border: 1px solid var(--border); } .channelList-entry { display: flex; cursor: default; padding: 5px 8px; &:not(:last-child) { border-bottom: 1px solid var(--border); } } .channelList-label { margin: 0 10px; flex: 1; & > * { @extend .u-textTruncate; } } .channelList-status { font-size: 12px; color: var(--text-muted); } .channelList-placeholder { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); } .channelList-controls { margin-top: auto; display: flex; background: var(--background-quaternary-alt); border-left: none; border-right: none; border-bottom: none; } .channelList-controlEntry { display: flex; justify-content: center; width: 26px; height: 26px; border-left: none; border-top: none; border-bottom: none; position: relative; [data-toggle='dropdown'] { position: relative; } .icon { opacity: 0.8; } } .avatar-gallery { display: flex; flex-wrap: wrap; } .avatar-holder { display: inline-block; position: relative; margin: 0 32px 32px 0; border-radius: 100%; box-shadow: 0 0 0 4px var(--background-secondary); .avatar { @extend .u-clickable; &.is-active { box-shadow: 0 0 0 4px var(--border-highlight); } } } .avatar--new { background: hsl(145, 51%, 45%); @extend .u-clickable; } .avatar-holder .avatar-delete { position: absolute; right: -15px; top: -15px; width: 40px; height: 40px; pointer-events: none; visibility: hidden; background: var(--background-secondary); display: flex; align-items: center; justify-content: center; border-radius: 100%; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); @extend .u-clickable; svg { opacity: 0.5; fill: var(--interactive-primary); } &:hover svg { opacity: 1; } } .avatar-holder:hover .avatar-delete { visibility: visible; pointer-events: auto; } .camera video { position: absolute; visibility: hidden; pointer-events: none; } .camera-preview { display: block; margin: 0 auto; } .camera-flash { @extend .fit; background: var(--background-secondary); opacity: 0; @extend .u-unclickable; } .camera-flash.is-active { animation: flash 500ms ease; } @keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .fileUpload { position: relative; overflow: hidden; &.btn input:focus + label { text-decoration: none; } } .fileUpload label { font-size: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; display: inline; margin: 0; } .fileUpload input { position: absolute; right: 0; top: 0; font-size: 118px; margin: 0; padding: 0; @extend %clickable; opacity: 0; &:focus + label { text-decoration: underline; } } .imagePreview { margin-top: 45px; @include phone { margin-top: 0; } img { width: auto !important; max-width: 100% !important; max-height: calc(100vh - 218px) !important; } } .imageCropper p { margin: 0; } .imageCropper-holder { height: 340px; margin: 15px 0; } .imageCropper-image { max-width: 100%; max-height: 100%; opacity: 0; } .imageCropper-preview { width: 40px; height: 40px; border-radius: 100%; overflow: hidden; margin: 0 10px; } .cropper-container { /* prevent cropper.js's centering – we center via flex */ left: 0 !important; } .profile { padding: 60px; overflow: auto; -webkit-overflow-scrolling: touch; flex: 1; @include phone { padding: 0; margin: 0; } h1 { margin: 18px 0 0; } .tabs { margin-top: 2px; margin-bottom: 25px; } } .profile-window { color: var(--text-normal); background: var(--background-secondary); max-width: 660px; margin: 0 auto; border: 1px solid var(--border); } .profile-section { padding: 20px 50px; @include phone { padding: 10px; } &.profile-memberSection { margin-bottom: 10px; } } .profile-section:not(:last-child) { border-bottom: 1px solid var(--background-modifier-border); } .profile-action { @include bidi-style(margin-right, -20px, margin-left, 0); @include phone { @include bidi-style(margin-right, 0, margin-left, 0); } .dropdown-toggle { margin-top: -20px; @include bidi-style(margin-right, -30px, margin-left, 0); margin-bottom: 8px; padding: 26px 40px 2px; @include phone { margin-top: -5px; padding: 10px 0 5px; @include bidi-style(margin-right, 0, margin-left, 0); } } label { margin: 0 8px; padding: 0; cursor: inherit; } } .profile-subtitle { font-size: 16px; @extend .u-highlight; } .profile-details { @include bidi-style(margin-left, -50px, margin-right, 0); } .profile-ticketsPlaceholder { flex: 1; margin: 8px 0 22px; color: var(--text-muted); .stat-icon { margin-bottom: 10px; } } .profile-detailsEntry { margin: 8px 0; @include bidi-style(padding-left, 50px, padding-right, 0); width: 50%; } .profile-detailsEntry label { padding: 0; margin-bottom: 2px; display: block; } .profile-organizationMember { @extend .profile-detailsEntry; display: flex; align-items: center; .avatar { @include bidi-style(margin-right, 10px, margin-left, 0); } } .profile-ticketLists { display: flex; margin: 0 -25px; @include phone { display: block; margin: 0; } } .profile-ticketList { display: flex; flex-direction: column; flex: 1 1 50%; padding: 0 25px; min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */ @include phone { padding: 0; margin-bottom: 10px; &:last-child { margin-bottom: 0; } } .tasks { margin-bottom: 10px; display: flex; flex-basis: auto; flex-direction: column; } } .profile .frequency.stat-widget { height: 230px; @include phone { display: none; } .stat-bars { height: 100px; } } .highlighter { display: flex; } [data-highlightcolor='Yellow']::selection { background: var(--highlighter-yellow); } .highlight-Yellow { background: var(--highlighter-yellow); } [data-highlightcolor='Green']::selection { background: var(--highlighter-green); } .highlight-Green { background: var(--highlighter-green); } [data-highlightcolor='Blue']::selection { background: var(--highlighter-blue); } .highlight-Blue { background: var(--highlighter-blue); } [data-highlightcolor='Pink']::selection { background: var(--highlighter-pink); } .highlight-Pink { background: var(--highlighter-pink); } [data-highlightcolor='Purple']::selection { background: var(--highlighter-purple); } .highlight-Purple { background: var(--highlighter-purple); } .translationOverview { tbody > tr > td { padding: 20px 0 0 10px; } .translationOverview-itemContainer { padding: 10px 0 10px 10px; } .translationOverview-source { width: 25%; } .translationOverview-target { width: 35%; } .translationOverview-initial { width: 25%; } .translationOverview-item { width: 100%; } } .overview-navigator { display: flex; } .overview-navigator .pagination { margin: 0 0 0 10px; @include rtl(margin, 0 10px 0 0); } .empty-space { padding: 50px; svg { width: 200px; height: auto; } .empty-space-tagline { color: var(--text-muted); margin-top: 15px; font-size: 18px; } } .horizontal-filters-alert { margin-bottom: 10px; } .horizontal-filters { margin-bottom: 20px; &--with-switch { margin-bottom: 10px; } .alert { margin-top: 10px; margin-bottom: 10px; } .alert + .horizontal-filter { border-radius: 4px 4px 0 0; } .alert + .horizontal-filter:last-child { border-radius: 4px; } } .horizontal-filter { position: relative; display: flex; background: var(--background-primary-alt); padding: 7px; border: 1px solid var(--border-alt); &:first-child { border-radius: 4px 4px 0 0; } &:last-child { border-radius: 0 0 4px 4px; } &:only-child { border-radius: 4px; } & + .horizontal-filter { border-top: none; } &-attribute { max-width: 250px; .modal--veryLarge & { max-width: 400px; } } select, input { border-color: var(--border-alt); } input[type='text'] { width: 100%; } input[data-item='time'] { width: 4.5ch; } &[data-level] { padding-left: 54px; @include rtl(padding-left, 7px); @include rtl(padding-right, 54px); } &[data-level='1'] { padding-left: 0; @include rtl(padding-left, 7px); @include rtl(padding-right, 0); } &[data-level='2'] { padding-left: 27px; @include rtl(padding-left, 7px); @include rtl(padding-right, 27px); } &[data-level]::before { content: ''; background-color: var(--border-alt); width: 54px; position: absolute; top: 0; left: 0; bottom: 0; @include rtl(right, 0); } &[data-level='1']::before { width: 0; } &[data-level='2']::before { width: 27px; } .draggable { display: flex; align-items: center; justify-content: center; width: 36px; height: 39px; vertical-align: middle; cursor: move; } .ui-sortable-helper & { border-color: transparent; border-radius: none; background: var(--background-modifier-lighter); &[data-level]::before { background-color: transparent; } } &.ui-sortable-placeholder { visibility: visible !important; background: var(--background-primary-alt); &[data-level]::before { background-color: var(--border-highlight); } } } .horizontal-filter-body { display: flex; flex: 1; min-width: 100px; @include phone { display: block; margin-right: 5px; } > .controls, > input { @include bidi-style(margin-right, 5px, margin-left, 0); @include phone { margin: 0 0 5px !important; } > .controls-label { margin-left: 0; margin-right: 5px; @include rtl(margin-left, 5px); @include rtl(margin-right, 0); } .horizontal-filter-value { max-width: 100%; } } > .controls > .controls { max-width: 100%; + .controls { @include bidi-style(margin-left, 5px, margin-right, 0); } } } .horizontal-filter-group { padding: 10px; background: var(--background-secondary); border: 1px solid var(--border-alt); border-radius: 5px; margin: 0 5px; > .form-group:last-child { margin-bottom: 0; } } .horizontal-filter-value { max-width: 60%; flex-grow: 1; margin-bottom: 0; @include phone { max-width: 100%; } // lower the min-width of url input fields (normally 400px) so that it fits in input[type='url'] { min-width: 200px; } .dropdown:only-child { flex-grow: 1; } } .horizontal-filters-switch { display: flex; justify-content: flex-end; & > label { display: flex; align-items: center; margin-bottom: 0; .zammad-switch { margin-top: 0; margin-left: 10px; @include rtl(margin-left, 0); @include rtl(margin-right, 10px); } } &--align-start { justify-content: flex-start; & > label { flex-direction: row-reverse; .zammad-switch { margin-left: 0; margin-right: 10px; @include rtl(margin-right, 0); @include rtl(margin-left, 10px); } } } & + .js-preview h3 { margin-top: 0; } } .output-input { margin: 0 0 14px; output { margin: 0; border-radius: 3px 3px 0 0; border: 1px solid var(--border-highlight); border-bottom: none; display: block; } input { flex: 1; border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; &:focus { border-color: var(--border); box-shadow: none; } } } output { border-bottom: 1px solid var(--border-highlight); margin: 0 0 19px; display: inline-block; padding: 10px 12px 8px; color: inherit; background: var(--background-article-customer); &[disabled] { border-color: hsl(358, 53%, 56%); background: hsl(358, 53%, 76%); color: var(--text-inverted); } p { margin: 0; } } .zammad-switch { overflow: hidden; width: 50px; height: 30px; border-radius: 15px; &.zammad-switch--small { width: 40px; height: 24px; border-radius: 12px; } &.zammad-switch--tiny { width: 30px; height: 18px; border-radius: 9px; } &.zammad-switch--dark { label { background: var(--menu-switch-background); } label::after { background: var(--menu-switch-pointer); } } &.zammad-switch--green input:checked + label { background: var(--supergood-color); } } .zammad-switch label { margin: 0; position: relative; width: 100%; height: 100%; border-radius: inherit; outline: none; background: var(--background-secondary); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; transition: background 200ms; @extend %clickable; &::after { content: ''; position: absolute; transition: transform 200ms; width: calc(60% - 2px); height: calc(100% - 2px); border-radius: inherit; left: 1px; top: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2); background: var(--background-secondary); @include rtl(transform, translateX(70%)); } } .dropdown-menu.dropdown-menu--light .zammad-switch input:not(:checked) + label { background: var(--background-primary); } .zammad-switch input { display: none; &[disabled] + label { cursor: not-allowed; opacity: 0.38; border-color: var(--border); } &[disabled] + label::after { background: hsl(210, 17%, 97%); } &:focus + label { transition: none; background: var(--border-highlight); box-shadow: 0 0 0 3px var(); } &:checked + label { background: var(--highlight); } &:checked + label::after { transform: translateX(70%); @include rtl(transform, none); } } .zammad-switch-inline-label { @extend .inline-label; display: flex; align-items: center; .zammad-switch { @include bidi-style(margin-left, 8px, margin-right, 0); } } .controls .zammad-switch { margin-top: 10px; } .horizontal-filter-text { @include bidi-style(margin-right, 5px, margin-left, 0); } .filter-controls { display: flex; margin: 5.5px 0; } .filter-control { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-shadow: 0 0 0 1px var(--border-alt) inset; border-radius: 100%; background: var(--background-secondary); @extend %clickable; &:hover:not(.is-disabled) { .icon { fill: var(--interactive-primary); } } &.is-disabled { cursor: not-allowed; opacity: 0.5; } &:not(:last-child) { @include bidi-style(margin-right, 7px, margin-left, 0); } .icon { fill: var(--interactive-muted); } } .filter-preview { margin: 20px 0; } .day-name { text-align: center; margin-bottom: 0; color: inherit; white-space: nowrap; } .form-group.day-time { padding: 10px 5px 6px; margin: 0; label { text-align: center; } .form-control { margin-left: auto; margin-right: auto; margin-bottom: 8px; } } .settings-row { margin-bottom: 10px; } .settings-list { border-collapse: separate; color: var(--text-normal); table-layout: auto; margin-bottom: 20px; & > caption { color: var(--text-normal); } &.is-invalid { border-radius: 3px; box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 4px hsl(0, 90%, 70%); } &.settings-list--fixed { table-layout: fixed; } &.settings-list--stretch { width: 100%; } &:not(:last-child) { margin-bottom: 34px; } .form-group & { margin-bottom: 0; } &.settings-list--toggleRow { tr:not(.is-active) td > *:not(.dont-grey-out) { opacity: 0.33; } } &.settings-list--toggleColumn { td:not(.is-active) * { opacity: 0.33; } } &.settings-list--placeholder { th { text-align: center; border-bottom: 1px solid var(--border-alt); border-radius: 4px; } td { height: 40px; } } .settings-list--deleted { td { text-decoration: line-through; } } th, td { vertical-align: top; padding: 10px; border: 1px solid var(--border-alt); background: var(--background-secondary); } th { font-weight: normal; text-transform: uppercase; font-size: 12px; line-height: 17px; letter-spacing: 0.05em; background: var(--background-primary-alt); border-bottom: none; word-break: normal; } td { word-break: break-word; > fieldset { margin: 0; > .form-group { margin-left: 0; margin-right: 0; } > .checkbox, > .radio { margin: 7px 0; } } } td.empty-cell { border-top: none; } .settings-list-separator { @include bidi-style(border-left-width, 3px, border-right-width, 1px); } .text-muted { text-transform: none; font-size: 10px; letter-spacing: 0; color: var(--text-muted-alt); } .inline-label { color: inherit; } th:not(:last-child), td:not(:last-child) { @include bidi-style(border-right-width, 0, border-left-width, 1px); } .ui-sortable-placeholder { visibility: visible !important; td { background: none; border-left-width: 0; border-right-width: 0; } } .ui-sortable-helper td { border-bottom-width: 1px !important; } tr:not(:last-child) td, & > tbody:not(:last-child) tr td { border-bottom-width: 0; } tr.is-inactive td { color: hsl(199, 19%, 80%); text-decoration: line-through; } & > thead > tr > th:first-child { @include bidi-style( border-top-left-radius, 4px, border-top-right-radius, 0 ); } & > thead > tr > th:last-child { @include bidi-style( border-top-right-radius, 4px, border-top-left-radius, 0 ); } & > tbody:last-child > tr:last-child > td:first-child, & > tfoot:last-child > tr:last-child > td:first-child { @include bidi-style( border-bottom-left-radius, 4px, border-bottom-right-radius, 0 ); } & > tbody:last-child > tr:last-child > td:last-child, & > tfoot:last-child > tr:last-child > td:last-child { @include bidi-style( border-bottom-right-radius, 4px, border-bottom-left-radius, 0 ); } p { margin: 0; } .settings-list-action-cell { @extend .u-clickable; text-align: center; color: var(--interactive-muted); background: linear-gradient( hsla(0, 0%, 100%, 0.02), hsla(0, 0%, 100%, 0.02) ), linear-gradient( var(--background-primary-alt), var(--background-primary-alt) ); line-height: 1; padding-top: 11px; padding-bottom: 9px; &:hover { color: var(--text-normal); } .icon { fill: currentColor; vertical-align: top; margin-top: -2px; } } .settings-list-controls { padding: 0; & > div, & > a { display: flex; min-height: 40px; } .settings-list-control { display: flex; align-items: center; justify-content: center; padding: 0 10px; @extend %clickable; .icon { fill: currentColor; } } } .settings-list-control-cell { padding: 5px; .btn--text { margin: -5px; } & ~ .settings-list-row-control { padding-bottom: 7px; } } .settings-list-checkbox-cell, .settings-list-radio-cell { vertical-align: middle; padding-left: 8px; } .settings-list-radio-cell { text-align: center; } .settings-list-wrapping-cell { display: flex; align-items: center; flex-wrap: wrap; } .settings-list--bottom-button { margin-top: 10px; } .settings-list-middle { vertical-align: middle; } } .settings-list--roles-permissions { margin-left: 18px; margin-right: 18px; margin-top: 10px; th:first-child { min-width: 150px; } } .select-boxes { display: flex; align-items: flex-start; } .select-box { display: flex; flex-wrap: wrap; margin: 0 14px; background: var(--background-secondary); color: var(--text-normal); @include bidi-style( border-right, 1px solid var(--border-alt), border-left, none ); border-bottom: 1px solid var(--border-alt); border-radius: 3px 3px 0 0; &.select-box--vertical .select-value { flex-basis: 100%; } &.select-box--four .select-value { flex-basis: 25%; } &.select-box--six .select-value { flex-basis: calc(100% / 6); } .select-box-header { @extend label; margin: 0; color: inherit; display: flex; align-items: center; padding: 8px 10px; flex-basis: 100%; white-space: nowrap; background: var(--background-primary-alt); @include bidi-style( border-left, 1px solid var(--border-alt), border-right, none ); border-top: 1px solid var(--border-alt); border-radius: 3px 3px 0 0; } .select-value { display: flex; align-items: center; justify-content: center; min-height: 34px; background-clip: content-box; box-shadow: 1px 0 var(--border-alt) inset, 0 1px var(--border-alt) inset; @extend %clickable; &.is-selected { background-color: var(--highlight); box-shadow: none; color: var(--text-inverted); } } &:first-child { @include bidi-style(margin-left, 0, margin-left, 14px); } &:last-child { @include bidi-style(margin-right, 0, margin-left, 14px); } } .searchableSelect { position: relative; .form-control { padding-right: 37px; @include bidi-style(padding-right, 37px, padding-left, 12px); } .searchableSelect-main { position: relative; line-height: 19px; &--with-clear-button { padding-right: 60px; @include bidi-style(padding-right, 60px, padding-left, 12px); } &.form-control--small ~ .searchableSelect-autocomplete { top: 6px; left: 9px; } } .searchableSelect-shadow { position: absolute; @include bidi-style(left, -9999px, right, -9999px); } .dropdown-menu { margin-top: -3px; max-width: 100%; } &-option-text { flex: 1 1 0%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; & + .icon { @include bidi-style(margin-left, 10px, margin-right, 0); } &.is-inactive { opacity: 0.33; cursor: not-allowed; } } &.dropdown li { &.has-inactive { cursor: unset; } &.is-selected { @include bidi-style( border-left, 5px solid var(--highlight), border-right, 5px solid var(--highlight) ); } &.js-enter:hover, &.js-enter.is-active { background: none; + li { box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset; } } &.js-enter.is-highlighted { span.searchableSelect-option-text { background: var(--highlight); } } &.js-back:hover, &.js-back.is-active { background: var(--supergood-color); .icon-arrow-left, .icon-arrow-right { opacity: 1; } } &.is-hidden { display: none; } &.js-enter { padding: 0; span.searchableSelect-option-text { padding: 11px 15px; } span.searchableSelect-option-arrow { padding: 11px 15px; cursor: pointer; &:hover { background: var(--supergood-color); .recipientList-arrow { opacity: 1; } } } } span.searchableSelect-option-text { letter-spacing: -0.02rem; &:hover { background: var(--highlight); } } } li:not(.is-active):hover + li { box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset; } .searchableSelect-autocomplete { position: absolute; left: 13px; top: 11px; right: 37px; white-space: nowrap; overflow: hidden; display: flex; pointer-events: none; white-space: pre; line-height: 19px; } .searchableSelect-autocomplete-invisible { color: transparent; } .searchableSelect-autocomplete-visible { color: hsl(0, 0%, 33%); background: hsl(201, 61%, 90%); } .loading.icon { position: absolute; right: 11px; top: 11px; display: none; } &.is-loading { .loading.icon { display: block; } .icon-arrow-down { display: none; } } } .action { background: var(--background-secondary); border: 1px solid var(--border); box-shadow: var(--elevation-stroke); display: flex; flex-wrap: wrap; padding: 10px; margin-bottom: 17px; &.is-inactive { background: none; box-shadow: none; position: relative; top: 2px; border-color: var(--border-alt); & > *:not(.action-controls) { opacity: 0.33; } } &--placeholder { padding: 30px; align-items: center; justify-content: center; color: hsl(206, 9%, 69%); box-shadow: none; background: none; border-style: dashed; font-style: italic; } &-alert { width: calc(100% + 20px); margin: -10px -10px 10px; } &-flow { display: flex; flex-wrap: wrap; &.action-flow--noWrap { flex-wrap: nowrap; } &.action-flow--row { flex-basis: 100%; } &.action-flow--vertically-centered { align-items: center; } } &-separator { width: 1px; background: hsl(0, 0%, 97%); margin: 0 10px; } .table { margin-left: -9px; margin-right: -9px; } h2 { margin-bottom: 0; .action-form-status .icon { margin-top: 0; } } &-block, &-controls, &-row { padding: 10px; h2:first-child, h3:first-child { margin-top: 0; } } &-block { &.action-block--flex { flex: 1; } } &-row { flex-basis: 100%; } h3 { color: var(--text-muted); margin-top: 0; + .btn--text { position: relative; top: -1px; } } &-label { background: var(--background-primary-alt); border: 1px solid var(--border-alt); align-self: flex-start; padding: 5px 10px; margin: -4px 0 -5px auto; @include rtl(margin, -4px auto -5px 0); color: var(--text-muted-alt); cursor: default; } &-flow-icon { width: 15px; height: 24px; margin-top: 16px; /* compensate for h3 height */ margin-left: 20px; margin-right: 20px; } &-controls { display: flex; @include bidi-style(margin-left, auto, margin-right, 0); align-self: flex-end; .btn { align-self: center; } } } /* datepicker resets some css it potentially inherits when its rendered inside a table */ .datepicker { background: var(--background-tertiary); color: var(--text-inverted); padding: 0 14px 11px; position: absolute; min-width: 0; cursor: default; &.datepicker-rtl { left: auto; right: 0; } .datepicker-switch { padding: 12px 0; font-weight: bold; font-size: 15px; text-align: center; letter-spacing: 0; line-height: 1.5; text-transform: none; @extend %clickable; &:hover { background: hsl(240, 10%, 14%); } } th { background: none; font-weight: 500; } th, td { border: none; } .next, .prev { padding: 12px 9px 0; vertical-align: top; text-align: center; @extend %clickable; .icon { margin-top: 4px; fill: var(--text-inverted); opacity: 1; } &:hover { background: hsl(240, 10%, 14%); } } .dow { text-transform: uppercase; font-size: 12px; padding: 0; text-align: center; vertical-align: inherit; } td.cw { // background: 1px gap on the right towards the days + 1px border background: linear-gradient( to right, var(--background-modifier-lighter), var(--background-modifier-lighter) calc(100% - 2px), transparent calc(100% - 2px), var(--background-modifier-accent) calc(100% - 1px), transparent calc(100% - 1px) ); padding: 0 5px 0 3px !important; text-align: center; border-radius: 0; } tbody td { width: 27px; height: 27px; border-radius: 14px; padding: 1px 0 0 !important; background-color: inherit; vertical-align: inherit; } .month, .year { float: left; width: 23%; margin: 1%; padding: 5px 0; } .day, .month, .year { text-align: center; &:not(.disabled) { @extend %clickable; } &.disabled, &.old, &.new { color: hsl(0, 0%, 33%); } &.today { background: #777; } &.focused { box-shadow: 0 0 0 1px hsl(207, 82%, 64%) inset; } &.active { color: var(--text-inverted); background: hsl(207, 82%, 64%); } } .today, .clear { text-align: center; padding: 2px 0 0; @extend %clickable; &.hidden { display: none; } } .datepicker-footer-buttons { display: flex; justify-content: space-between; gap: 20px; align-items: stretch; height: 31px; margin-top: 15px; div { flex-grow: 1; border: 1px solid #56575e; border-radius: 3px; display: flex; align-items: center; justify-content: center; } } } #notify { position: absolute; top: 10px; left: 0; right: 0; @extend .zIndex-9; pointer-events: none; .noty_bar { max-width: 500px; text-align: center; margin: 0 auto 10px; .noty_message { pointer-events: auto; display: inline-block; background: rgba(0, 0, 0, 0.75); padding: 10px 15px 8px; border-radius: 3px; color: var(--text-inverted); } .icon { vertical-align: middle; margin-top: -3px; @include bidi-style(margin-right, 5px, margin-left, 0); } a { color: inherit; text-decoration: none; } } } .animated { animation-duration: 300ms; animation-fill-mode: both; } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -50%, 0); } to { opacity: 1; transform: none; } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 50%, 0); } } .loading-placeholder { display: flex; align-items: center; justify-content: center; height: 133px; .loading-text { @include bidi-style(margin-left, 10px, margin-right, 0); } } .chat { flex: 1; display: flex; flex-direction: column; padding: 0 14px; @include phone { padding: 0; } .page-header { margin: 15px 0 5px; padding: 0 6px; @include phone { flex-wrap: wrap; margin: 0; padding: 5px 8px; } } .page-header-title { @include phone { order: 1; } } .page-header-center { @include phone { flex-basis: 100%; padding: 0; order: 3; } } .page-header-meta { @include phone { order: 2; @include bidi-style(margin-left, auto, margin-right, auto); padding-top: 4px; @include bidi-style(padding-left, 10px, padding-right, 0); } } } .chat-workspace { display: flex; flex-wrap: wrap; padding: 0 0 10px; margin: 0 -4px; flex: 1; @include phone { margin: 0; padding: 0; flex-wrap: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; scroll-snap-mode: x mandatory; } } .chat-window { flex: 0 1 0; overflow: hidden; display: flex; flex-direction: column; transition-duration: 500ms; transition-property: transform, flex, padding; transform: scale(0); @include phone { min-width: calc(100vw - #{$mobileNavigationWidth} - 16px); scroll-snap-align: center; } &.is-open { flex: 1 0 25%; transform: scale(1); padding: 10px; @include phone { padding: 8px; } } &.is-offline { .chat-controls { opacity: 0.5; } } } .chat-header { background: var(--background-primary-alt); border: 1px solid var(--border-alt); border-radius: 3px 3px 0 0; height: 43px; line-height: 13px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; } .chat-name { margin: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .status-badge { @include bidi-style(margin-left, 2px, margin-right, 0); vertical-align: middle; height: 100%; } } .chat-status { @include bidi-style(margin-left, 10px, margin-right, 0); &[data-status='online'] .icon { fill: var(--supergood-color); } &[data-status='offline'] .icon { fill: var(--superbad-color); } .icon-status-modified-inner-circle, .icon-status-modified-outer-circle { display: none; } &.is-modified { .icon-status { display: none; } .icon-status-modified-inner-circle, .icon-status-modified-outer-circle { display: block; } } } .chat-status-holder { position: relative; } .chat-disconnect, .chat-close { @extend %clickable; padding: 10px; .btn { min-width: 80px; justify-content: center; } } .chat-disconnect.is-hidden, .chat-close.is-hidden { display: none; } .chat-scroll-hint { background: var(--background-primary); display: flex; align-items: center; border: 1px solid var(--border-alt); border-top: none; padding: 7px 10px 6px; color: var(--text-muted); @extend %clickable; &.is-hidden { display: none; } .icon { fill: hsl(210, 5%, 78%); @include bidi-style(margin-right, 8px, margin-left, 0); } } .chat-body-holder { flex: 1; background: var(--background-secondary); font-size: 13px; line-height: 18px; overflow: auto; -webkit-overflow-scrolling: touch; border-left: 1px solid var(--border-alt); border-right: 1px solid var(--border-alt); position: relative; } .chat-body-holder--standalone { border-top: 1px solid var(--border-alt); border-bottom: 1px solid var(--border-alt); } .chat-body { padding: 10px; display: flex; flex-direction: column; align-items: flex-start; position: absolute; width: 100%; top: 0; left: 0; } .chat-timestamp, .chat-notice-message { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; align-self: center; word-break: break-word; } .chat-timestamp-label { font-weight: 500; } .chat-message { max-width: 90%; background: var(--background-primary); padding: 6px 12px; border-radius: 16px; margin-bottom: 4px; } .chat-message img { @extend %clickable; } .chat-message--customer.chat-message--new { font-weight: bold; } .chat-message--agent { @include bidi-style(margin-left, auto, margin-right, 0); background: var(--background-article-customer); align-self: flex-end; } .chat-message--agent + .chat-message--customer, .chat-message--customer + .chat-message--agent { margin-top: 10px; } .chat-status-message { align-self: center; background: var(--background-primary-alt); padding: 6px 12px; margin: 4px 0 10px; border-radius: 3px; } .chat-loader { @include bidi-style(margin-right, -4px, margin-left, 0); .icon { width: 12px; height: 12px; fill: var(--border); @include bidi-style(margin-left, -4px, margin-right, 0); vertical-align: middle; animation: ease-in-out load-fade 600ms infinite alternate; } .icon + .icon { animation-delay: 0.13s; } .icon + .icon + .icon { animation-delay: 0.26s; } } @keyframes load-fade { 0% { opacity: 0.5; transform: scale(0.6); } 67% { opacity: 1; transform: scale(1); } } .chat-footer { border-top: 1px solid var(--border-alt); padding: 10px 10px 0; display: flex; justify-content: center; align-self: stretch; margin: 0 -10px; } .chat-controls { display: flex; align-items: flex-start; padding: 10px; background: var(--background-primary-alt); border: 1px solid var(--border-alt); border-radius: 0 0 3px 3px; flex-shrink: 0; } .chat-input { @include bidi-style(margin-right, 10px, margin-left, 0); flex-grow: 1; position: relative; .form-control { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 50vh; } } .manage-chat-jquery-switch-container { display: flex; flex-direction: row; align-items: center; .zammad-switch { @include bidi-style(margin-right, 8px, margin-left, 8px); } } .browser { margin: 0 0 20px; position: relative; &[data-size] { padding-bottom: 65%; // 16:10 aspect ratio; .browser-ratio { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: width 500ms; display: flex; flex-direction: column; } .browser-body { padding: 0; } } &[data-size='mobile'] .browser-ratio { width: 375px; } &-ratio { border: 1px solid var(--border); border-radius: 5px; } } /* stylelint-disable media-query-no-invalid */ @media screen and (min-width: #{1280 + $sidebarWidth + $navigationWidth}) { // hide 1:1 button when it gets inrelevant [data-size='1:1'] { display: none; } .browser[data-size='mobile'] .browser-ratio { width: 500px; } } /* stylelint-enable media-query-no-invalid */ .browser-body { flex: 1; position: relative; overflow: hidden; padding: 20px; &-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .browser-website { position: relative; height: 100%; transform-origin: right bottom; transition: 500ms; overflow: hidden; &.is-picking { cursor: image_url('/assets/images/eyedropper.gif') 0 15, auto; } &-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; } } } .browser-head { display: flex; padding: 10px; border-bottom: 1px solid var(--border); .browser-input { position: relative; flex: 1; @include bidi-style(margin-right, 10px, margin-left, 0); input { min-width: 0; @include bidi-style(padding-right, 40px, padding-left, 12px); &.is-loading + .loading.icon { display: block; } } .loading.icon { position: absolute; @include bidi-style(right, 11px, left, auto); top: 10px; display: none; } } .help-block { margin-bottom: -3px; } } .browser-inline-form { width: 300px; &.no-css { all: initial; * { all: unset; } input, textarea, button { padding: 2px; background: var(--background-secondary); border: 1px solid; font: 400 11px system-ui; } button { padding: 2px 6px 3px; background-color: buttonface; border: 2px outset buttonface; } } } .chat-demo { .zammad-chat { position: absolute; transform-origin: right bottom; transition: 500ms; user-select: none; will-change: transform; &.is-fullscreen { right: 0; width: 100%; height: 100%; border-radius: 0 !important; .zammad-chat-header { border-radius: 0 !important; box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13); } .zammad-chat-controls { border-radius: 0 0 5px 5px; } } &.no-transition { transition: none; } .zammad-chat-welcome { display: block !important; } .zammad-chat-header-icon-open { display: inline !important; } .zammad-chat-agent-status, .zammad-chat-header-icon-close, .zammad-chat-agent { display: none !important; } &.is-open { .zammad-chat-agent { display: block !important; } .zammad-chat-header-icon-close, .zammad-chat-agent-status { display: inline-block !important; } .zammad-chat-welcome, .zammad-chat-header-icon-open { display: none !important; } } &.is-fullscreen { height: 100%; .zammad-chat-controls { border-radius: 0 0 5px 5px; } } } .zammad-chat-header { pointer-events: auto; } .chat-demo-animationHolder { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; animation: slide-up 500ms; pointer-events: none; } } @keyframes slide-up { from { transform: translateY(100%); } } .todo { position: relative; display: block; &:not(a) { cursor: default !important; } .icon { fill: var(--ghost-color) !important; vertical-align: middle; margin: -2px 3px 0 0; } &.is-done .icon { fill: var(--supergood-color) !important; } } .columnSelect { height: 234px; display: flex; padding: 0; line-height: 22px; &-shadow { display: none; } &-column--selected { flex: 1 1 66%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 7px; } &-column--sidebar { flex-basis: 33%; flex-shrink: 1; border-left: 1px solid var(--border); background: var(--background-modifier-accent); display: flex; flex-direction: column; min-width: 0; .columnSelect-option:hover { background: var(--background-modifier-hover); } } &-pool { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 7px; } &-option { @extend %clickable; padding: 0 5px; border-radius: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; &:hover { background: var(--background-modifier-hover); } } &-group-label { opacity: 0.5; .filter-active & { display: none; } ~ .columnSelect-option { padding-left: 10px; } } .is-hidden, .is-filtered { display: none; } &-search { position: relative; .icon-magnifier { left: 7px; top: 5px; position: absolute; opacity: 0.3; } &-clear { position: absolute; right: 0; top: 0; padding: 6px 7px 4px; @extend %clickable; line-height: 1; .icon { opacity: 0.6; } } input { width: 100%; padding: 2px 30px 1px; border: none; outline: none; border-bottom: 1px solid var(--border); background: none; } } } .pulsate-animation { animation: pulsate 667ms ease-in-out infinite alternate; } .richtext-content { overflow-x: auto; &[contenteditable] { &, &:hover, &:focus { background: none; } } h1, h2, h3, h4 { &:first-child { margin-top: 6px; } } table, pre, blockquote { margin-bottom: 16px; } & > p, & > table, & > pre, & > blockquote { &:first-child { margin-top: 6px; } &:last-child { margin-bottom: 6px; } } table { table-layout: auto; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; word-break: keep-all; col { width: auto; } span, p, a { overflow-wrap: anywhere; } } blockquote { padding: 8px 12px; border-left: 5px solid var(--background-primary-alt); } code { border: none; white-space: pre-wrap; } pre { padding: 12px 15px; font-size: 13px; line-height: 1.45; background: var(--background-modifier-accent-light); white-space: pre-wrap; border-radius: 3px; border: none; overflow: auto; -webkit-overflow-scrolling: touch; } hr { margin-top: 6px; margin-bottom: 6px; border: 0; border-top: 1px solid var(--background-modifier-border); } @include dark { // remove custom backgrounds and colors [style*='background'] { background: none !important; } [style*='color'] { color: inherit !important; } } } .detail-search-header { margin: 20px 0 32px; } .batch-overlay { @extend .fit, .zIndex-1; color: var(--text-inverted); text-transform: uppercase; text-align: center; letter-spacing: 0.07em; font-size: 0.95em; line-height: 1.3; display: none; will-change: display; cursor: grabbing; overflow: hidden; user-select: none; &.is-visible { display: block; } &-backdrop { @extend .fit; background: hsla(231, 20%, 8%, 0.8); opacity: 0; will-change: opacity; } &-circle { margin: 35px auto; background: hsl(207, 7%, 29%); border-radius: 100%; border: 4px solid var(--background-secondary); width: 140px; height: 140px; padding: 20px 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: absolute; left: 0; right: 0; will-change: transform, opacity; visibility: hidden; &--top { top: 0; } &--bottom { bottom: 0; } .icon { fill: currentColor; opacity: 1; } &-label { width: 80%; margin: 10px 0; } } &-cancel { background: hsla(0, 0%, 100%, 0.21); background-clip: padding-box; border: 2px dashed hsla(0, 0%, 100%, 0.3); border-radius: 8px; padding: 28px; margin: auto 200px; position: absolute; left: 0; right: 0; max-height: 100px; visibility: hidden; will-change: opacity; display: flex; justify-content: center; align-items: center; } &-box { background: hsl(232, 9%, 17%); width: 100%; position: absolute; visibility: hidden; will-change: opacity, transition; &-inner { margin: 37px 25px; display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden; } } &-assign { padding-bottom: 50px; bottom: -50px; // extra space for bounce animation .batch-overlay-box-inner { max-height: 40vh; } &-group { box-shadow: 0 0 35px hsla(0, 0%, 0%, 0.5); .batch-overlay-box-inner { margin-top: 42px; margin-bottom: 10px; } &-name { position: absolute; left: 0; right: 0; top: 0; padding: 11px 13px 8px; line-height: 1; position: absolute; background: hsl(233, 10%, 15%); } } &-entry { padding: 13px; width: 116px; height: 155px; &.is-hovered { .avatar { border-color: var(--highlight); transform: scale(1.05); } } .avatar { border: 4px solid hsl(231, 5%, 30%); margin-bottom: 10px; box-sizing: content-box; transition: transform 120ms; cursor: inherit; z-index: 1; } &-name { max-height: 34px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; } &-detail { color: gray; } } } &-macro { padding-top: 50px; top: -50px; // extra space for bounce animation .batch-overlay-box-inner { max-height: 55vh; margin: 24px 12px; } &-entry { margin: 13px; border: 4px solid hsl(231, 5%, 30%); background: hsl(233, 9%, 24%); border-radius: 100%; height: 120px; width: 120px; padding: 13px 13px 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9em; &.is-hovered { border-color: var(--highlight); transform: scale(1.05); } &.small { @include small-desktop { height: 80px; width: 80px; padding: 11px 11px 8px; } } } &-error-message { margin: 13px; height: 120px; padding: 13px 13px 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9em; } } } .batch-dragger { position: absolute; left: 0; top: 0; pointer-events: none; width: 250px; height: 40px; will-change: transform; @extend .zIndex-10; &-item { position: absolute; left: 0; width: 100%; background: var(--background-highlight); border-radius: 4px; display: flex; align-items: center; padding: 11px 0 9px 11px; box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28); will-change: transform; a { color: inherit; } td:not(:first-child) { display: block; padding: 0 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; &:nth-child(3) { flex-shrink: 1; } &:nth-child(n + 4) { display: none; } } .checkbox-replacement > .icon, .radio-replacement > .icon { fill: none; } } &-counter { position: absolute; right: -8px; bottom: -8px; width: 25px; height: 25px; border-radius: 99px; z-index: 1; color: var(--text-inverted); background: var(--highlight); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28); will-change: transform; &:empty { display: none; } } } /* ------------- breadcrumbs ------------- */ .breadcrumbs { display: flex; align-items: center; min-width: 88px; @include phone { overflow: hidden; } &-menu { display: flex; @include ltr(margin-left, auto); @include rtl(margin-right, auto); @include bidi-style(padding-left, 20px, padding-right, 0); @include phone { @include bidi-style(padding-left, 10px, padding-right, 0); } } } .breadcrumb { position: relative; padding-top: 11px; padding-bottom: 8px; @include ltr(padding-right, 21px); @include ltr(padding-left, 13px); @include rtl(padding-left, 21px); @include rtl(padding-right, 13px); color: inherit; cursor: pointer; @extend .u-textTruncate; @include phone { flex-shrink: 0; } &::before, &::after { content: ''; position: absolute; width: 1px; height: 50%; background: currentColor; opacity: 0.33; @include ltr(right, 0); @include rtl(left, 0); top: 0; transform-origin: bottom; @include ltr(transform, rotate(-37deg)); @include rtl(transform, rotate(37deg)); } &::after { top: 50%; transform-origin: top; @include ltr(transform, rotate(37deg)); @include rtl(transform, rotate(-37deg)); } &:last-child { &::before, &::after { display: none; } } .modified-icon { @include bidi-style(margin-right, 3px, margin-left, 0); display: inline-block; vertical-align: middle; line-height: 1; margin-top: -3px; } &-icon { fill: currentColor; width: 20px; height: 20px; object-fit: contain; } .modified-icon-modifier { fill: var(--background-primary-alt); } } /* --------------------- iconfont icon picker --------------------- */ .icon_picker { .dropdown-menu { max-height: 500px; width: 420px; min-width: 0; overflow-y: auto; } .controls { position: relative; } &-shadow { display: none; } .dropdown-grid { &:empty { padding: 0; & + .dropdown-filter-placeholder { display: block; } } li:hover:not(.is-active) { background: none; } .icon { width: 40px; line-height: 40px; text-align: center; } } .dropdown-filter-placeholder { display: none; padding: 10px; text-align: center; text-rendering: auto; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: letter-spacing 200ms; cursor: default; line-height: 40px; &:hover { letter-spacing: -2px; } span { display: none; &.is-active { display: block; } } } .dropdown-filter { background: none; width: 100%; background: var(--background-modifier-accent); border: none; padding: 13px 20px 11px; outline: none; } .dropdown-grid { display: flex; flex-wrap: wrap; padding: 10px; margin: 0; li { list-style: none; cursor: pointer; user-select: none; border-radius: 2px; &:hover, &.is-active { background: var(--highlight); } } } } /* -------------- color picker -------------- */ .color { .controls { position: relative; } .controls-button { align-self: stretch; } .controls-button-inner { padding: 4px; } .color-field { width: 31px; height: 100%; position: relative; // unparsable color &[style='']::before { content: ''; position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; background: var(--background-primary-alt); animation: rotateplane 1.2s infinite ease-in-out; } } } .colorpicker { &.dropdown-menu { box-sizing: content-box; width: 380px; min-width: 0; } .open > & { display: flex; } &-hue-saturation { flex-grow: 1; width: 200px; height: 150px; margin: 14px; @include ltr(margin-right, 0); @include rtl(margin-left, 0); $i: 0; $rainbow: (); @while $i <= 360 { $rainbow: append($rainbow, unquote('hsl(#{$i},100%,50%)'), comma); $i: $i + 60; } background: linear-gradient(to right, $rainbow); position: relative; overflow: hidden; cursor: image_url('/assets/images/colorcircle.gif') 8 8, auto; user-select: none; } &-lightness-plane, &-saturation-gradient { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } &-circle { position: absolute; left: 0; top: 0; border: 1px solid black; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 100%; } &-lightness { height: 150px; margin: 14px; position: relative; user-select: none; } &-hue-plane { height: 100%; width: 20px; background: red; } &-hue-gradient { height: 100%; width: 100%; background: linear-gradient(white, transparent, black); } &-slider { position: absolute; top: 0; left: -7px; right: -7px; &-arrow { position: absolute; top: 0; margin-top: -4px; border: 4px solid transparent; border-left: 7px solid hsl(240, 8%, 100%); border-right: 7px solid hsl(240, 8%, 100%); &--left { left: 0; border-right: none; } &--right { right: 0; border-left: none; } } } } /* ---------------- iconset picker ---------------- */ .iconset_picker { .controls input { display: none; } } .icon-sets { margin: 0 -10px; } .icon-set { margin: 10px; display: flex; border: 1px solid var(--border); border-radius: 3px; &.is-active { border-color: var(--border-highlight); box-shadow: 0 0 0 3px var(--shadow-highlight); } &-preview { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; user-select: none; height: 250px; border-radius: 0 3px 3px 0; border-left: 1px solid var(--border); background: var(--background-primary); color: var(--text-muted); position: relative; } &-meta { flex-basis: 197px; order: -1; display: flex; flex-direction: column; flex-shrink: 0; padding: 10px; background: var(--background-secondary); border-radius: 3px 0 0 3px; } &-version { color: var(--text-muted); } &-website { margin-top: auto; display: block; } .icon { width: 50px; line-height: 50px; text-align: center; font-size: 18px; &:not(.loading).do-flash { animation: iconset-flash 0.7s ease-out; } } } @keyframes iconset-flash { from { background: var(--background-modifier-hover); color: var(--text-normal); } to { background: transparent; color: inherit; } } /* ----------------------------- generic flex layout classes ----------------------------- */ .horizontal, .vertical, .centered { display: flex; } .horizontal.hide, .vertical.hide, .centered.hide { display: none; } .horizontal { flex-direction: row; } .horizontal.multiline { flex-wrap: wrap; } .horizontal.reverse { flex-direction: row-reverse; } .vertical { flex-direction: column; } .vertical.reverse { flex-direction: column-reverse; } .vertical.stretch > *, .horizontal.stretch > * { flex: 1; } .stretch { align-self: stretch; } .relative { position: relative; } .fit { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } body.fit { margin: 0; } .scrollable { overflow: auto; -webkit-overflow-scrolling: touch; } .flex { flex: 1; } .margin-bottom-5 { margin-bottom: 5px; } /* Firefox minimum content bugfix https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored "By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property." */ .flex-shrink-horizontal { min-width: 0; } .flex-full { flex: 1 1 100%; } .flex-auto { flex: 1 1 auto; } .flex-shrink { flex: 0 1 auto; } .flex-no-shrink { flex-shrink: 0; } .flex-none { flex: none; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .justify-start { justify-content: flex-start; } .justified { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .start { align-items: flex-start; } .center { align-items: center; } .baseline { align-items: baseline; } .centered { align-items: center; justify-content: center; } .end { align-items: flex-end; } .self-start { align-self: start; } .self-end { align-self: end; } .span-width { flex-basis: 100%; } .two-columns, .three-columns, .wrap { flex-wrap: wrap; } .two-columns, .three-columns { @include phone { display: block; } } .two-columns > .column { width: 50%; @include phone { width: auto; } } .three-columns > .column { width: 33.33%; @include phone { width: auto; } } .align-left { @include bidi-style(margin-right, auto, margin-left, 0); } .align-right { @include bidi-style(margin-left, auto, margin-right, 0); } .space-left { @include bidi-style(margin-left, 10px, margin-right, 0); } .space-right { @include bidi-style(margin-right, 10px, margin-left, 0); } .half-space-left { @include bidi-style(margin-left, 5px, margin-right, 0); } .half-space-right { @include bidi-style(margin-right, 5px, margin-left, 0); } .align-center { margin-left: auto; margin-right: auto; } .flex-space-after { @include bidi-style(margin-right, auto, margin-left, 0); } .flex-space-before { @include bidi-style(margin-left, auto, margin-right, 0); } .half-spacer { width: 5px; height: 5px; } .spacer { width: 10px; height: 10px; } .double-spacer { width: 20px; height: 20px; } .flex-spacer { flex: 1; } span.is-disabled { cursor: not-allowed; opacity: 0.5; } .inline-label + .scheduled-widget { margin-left: 18px; } .scheduled-widget { display: flex; align-items: center; padding: 5px 5px 5px 10px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; &[data-state='published'] { color: var(--supergood-color); border-color: currentColor; .btn { border-color: currentColor; } } &[data-state='archived'] { border-color: var(--ghost-color); .btn { border-color: var(--ghost-color); } } &[data-state='internal'] { color: var(--highlight); border-color: currentColor; .btn { border-color: currentColor; } } .help-text & { margin-top: 4px; } .icon { color: inherit; fill: currentColor; vertical-align: middle; } &-label { margin: 0 10px 0 6px; } .icon-diagonal-cross { width: 10px; height: 10px; } .btn { color: inherit; } } .knowledge-base { &-navigation { display: flex; align-items: center; color: var(--interactive-muted); background: var(--background-primary-alt); border-bottom: 1px solid var(--border); padding: 7px; @include phone { flex-shrink: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .breadcrumb:not(:first-child) .breadcrumb-icon { width: 16px; height: 16px; } } &-body { position: relative; overflow-x: hidden; @include phone { flex-direction: column-reverse; overflow: visible; } } &-sidebar { position: absolute; @include ltr(right, 0); @include rtl(left, 0); top: 0; width: 280px; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; transition: transform 500ms; @include bidi-style( border-left, 1px solid var(--border), border-right, none ); @include phone { width: auto; position: static; @include bidi-style(border-left, none, border-right, none); border-top: 1px solid var(--border); overflow: visible; } @include desktop { width: 28%; } &.hidden { display: block !important; visibility: visible !important; @include ltr(transform, translateX(100%)); @include rtl(transform, translateX(-100%)); @include phone { transform: none !important; display: none !important; } + .knowledge-base-main { @include ltr(margin-right, 0); @include rtl(margin-left, 0); } } h2 { font-size: 17px; line-height: 1; } } &-main { width: 100%; @include ltr(transition, margin-right 500ms); @include ltr(margin-right, 280px); @include rtl(transition, margin-left 500ms); @include rtl(margin-left, 280px); @include phone { margin: 0 0 10px !important; } @include desktop { @include ltr(margin-right, 28%); @include rtl(margin-left, 28%); } } form { flex-shrink: 0; } .richtext-content { word-break: break-word; word-wrap: anywhere; } .page-header { margin: 1px 0 3px; flex-shrink: 0; } } .modal-manage-attachments { input:focus + label { text-decoration: none; } } .modal-knowledge-base-server-snippet { label.radio-replacement:first-child { padding-left: 0; } } .container { max-width: 960px; width: 100%; margin: 20px auto; } .sections { list-style: none; padding: 0; margin: 0 -10px; &:not(:empty) + &:not(:empty) { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 20px; } &--grid { display: flex; flex-wrap: wrap; .section { a { padding-bottom: 72%; position: relative; line-height: 1.3; } [data-font] { font-size: 60px; } .modified-icon { margin: 10px 0 20px; } &--subsection { display: none; } &-inner { position: absolute; padding: 10px; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center; flex-direction: column; text-align: center; .title { display: -webkit-box; overflow: auto; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } } } &[data-size='medium'] { .section { width: 25%; @include phone { width: 100%; } a { font-size: 14px; } [data-font] { font-size: 42px; } .modified-icon-modifier { width: 18px; height: 18px; margin: 0 -6px -2px 0; } } } &[data-size='large'] { .section { width: 33.33%; @include phone { width: 100%; } a { font-size: 15px; } .modified-icon-modifier { width: 22.5px; height: 22.5px; margin: 0 -8px -5px 0; } } } } &--list { .section-detail { margin-left: 0.2em; } } } .section { &.kb-item--invisible { opacity: 0.5; } &.kb-item--missing-translation, &.kb-item--missing-translation:active, &.kb-item--missing-translation:focus { color: hsl(45, 98%, 63%); } a { display: block; text-decoration: none; color: inherit; } &-title { color: #444a4f; } &-detail { color: #b4b7b9; } } .section-inner { position: relative; display: flex; align-items: flex-start; padding: 10px 14px; margin: 10px; background: var(--background-secondary); border-radius: 3px; border: 1px solid var(--border); box-shadow: var(--elevation-low); @include phone { margin: 5px; } &:active { box-shadow: none; } &-title { font-weight: 500; font-size: 15px; line-height: 1.15; } &-date { display: inline; color: hsl(0, 0%, 75%); &::after { content: ' — '; color: var(--text-normal); } &:only-child::after { content: ''; } } &-detail { display: block; margin-top: 5px; } &-icon { flex-shrink: 0; vertical-align: middle; &-holder { @include ltr(margin-right, 11px); @include rtl(margin-left, 11px); margin-top: 1px; .nav-pills & { @include ltr(margin-right, 7px); @include rtl(margin-left, 7px); } } &[data-font] { font-size: 16px; line-height: 1; } &.icon { fill: currentColor; width: 16px; height: 16px; object-fit: contain; object-position: center top; } } em { font-style: normal; background: hsla(205, 90%, 60%, 0.75); } } .knowledge-base-article { &-header { text-align: center; } &-meta { display: block; text-align: center; > * { &:first-child { text-transform: capitalize; } &::after { content: ' · '; } &:last-child::after { display: none; } } } &-body { margin-top: 20px; background: var(--background-secondary); border-radius: 2px; padding: 50px 50px 10px; border: 1px solid var(--border); @include phone { padding: 15px 15px 5px; } } &-content { margin-bottom: 40px; @include phone { margin-bottom: 10px; } } &-attachments, &-tags, &-linked-tickets { margin: 0 -30px; @include phone { margin: 0 -5px; } } .tasks { @include bidi-style(margin-left, 7px, margin-right, 0); } &-tags--container { padding: 6px 5px 11px; display: flex; flex-wrap: wrap; .tag { margin: 2px; display: inline-block; background: #0f94d6; color: var(--text-inverted); border-radius: 999px; padding: 2px 12px 1px; &:hover { background: hsl(200deg, 87%, 34%); } } } &-nav { display: flex; &-link { padding: 15px; max-width: 50%; display: flex; align-items: center; .knowledge-base-article > & { margin-top: -10px; } .spacer { width: 5px; } .icon { flex-shrink: 0; fill: currentColor; opacity: 1; vertical-align: top; } &--next { @include bidi-style(margin-left, auto, margin-right, inherit); } &-title { @extend .u-textTruncate; } } } } .miller-columns { display: flex; font-size: 12px; border: 1px solid var(--border); border-radius: 3px; .column { list-style: none; padding: 0; margin: 0; flex: 1 1 33%; height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; border-right: 1px solid var(--border); &:last-child { border-right-width: 0; } &-item { display: flex; align-items: center; padding: 5px 10px; cursor: default; &:hover { background: var(--background-modifier-accent-light); } &.is-selected { background: var(--background-secondary-hover); } &--has-children { @extend %clickable; cursor: pointer; } span { @extend .u-textTruncate; margin-right: 10px; } > .icon:first-child, [data-font] { fill: currentColor; margin-right: 8px; vertical-align: middle; flex-shrink: 0; } .icon-arrow-right { margin-left: auto; flex-shrink: 0; } .btn { margin-left: auto; } } } } .highlight-emulator { background-color: highlight; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn-manage-public-menu-edit { margin-top: 0; } .kb-menu-settings-entry { margin-bottom: 12px; } .text-modules-box { max-height: 40vh; } .sla_times { .sla_radio_container { padding-top: 0.5em; padding-left: 0.5em; } } .calendar-preview { .calendar-events { margin-top: 12px; p { margin: 0; } h2 { margin-bottom: 24px; } h4 { margin-bottom: 4px; } section.description { margin: 24px 0 0; padding: 4px; } .event-row { display: flex; div { width: 50%; margin-bottom: 4px; } } } div.divider { margin-top: 18px; margin-bottom: 6px; border-top: 1px solid #dfdfdf; &:last-of-type { display: none; } } } .reporting { .legend > div { background: var(--background-secondary) !important; } .legendColorBox { padding-right: 4px; } } .duplicate-ticket-detection { position: relative; margin-bottom: 0; .close { position: absolute; top: 2px; opacity: 0.39; @include bidi-style(right, 0, left, 0); &:hover { opacity: 1; } svg { width: 9px; height: 9px; } } h4 { text-transform: none; font-size: 16px; } p { word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; } p, ul { margin-bottom: 6px; } .btn { font-size: 10px; color: var(--text-link); background: none; } } .profile-settings-notifications-content { .zammad-switch { float: left; margin-right: 10px; } .profile-groups-limit-settings { min-height: 1px; } .settings-list { margin-bottom: 0; } .profile-groups-all-unchecked { margin-bottom: 10px; } } .profile-two-factor { table { margin-bottom: 16px; } .recovery-codes { p { margin: 12px 0; } p:last-of-type { margin: 0; } } } .two-factor-auth { .loading { display: block; margin: 25px auto; } &-method-buttons { display: flex; flex-direction: column; max-width: 382px; margin: 25px auto 0; } &-method { display: flex; flex-direction: column; margin-bottom: 15px; } .is-disabled { opacity: 0.33; } .method-form .form-group { margin-bottom: 4px; } .authenticator-app { --width: 306px; --height: 306px; position: relative; width: var(--width); margin: 0 auto; .qr-code-canvas { width: var(--width); height: var(--height); cursor: pointer; } .secret { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background: rgba(0, 0, 0, 0.9); color: var(--text-inverted); font-family: monospace; display: flex; justify-content: center; align-items: center; cursor: pointer; } } } .history-row-list { padding-left: 10px; span { text-decoration: underline; } } .btn--split--last.js-securitySign { .icon { @include ltr(margin, -2px 5px 0 -2px !important); @include rtl(margin, -2px -2px 0 5px !important); } } .overlap-x-6 { @include ltr(margin-left, -6px); @include rtl(margin-right, -6px); } div.accounted-time-value { &-container { display: flex; flex-direction: column; } &-row { display: flex; flex-direction: row; } &-item { padding: 1px; flex: 0 0 auto; } &-item:first-child { flex: 1 1 auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @include bidi-style(margin-right, 6px, margin-left, 0); } } .checklistShowRowContent { display: flex; align-items: stretch; .checklistItemTicketTitle, .checklistItemValue { flex-grow: 1; padding-left: 4px; padding-right: 4px; padding-top: 10px; padding-bottom: 5px; // make sure the value is aligned vertically with the checkbox and the dropdown menu word-wrap: break-word; overflow-wrap: break-word; &.edit-widget-active { padding-top: 5px; padding-bottom: 3px; @include bidi-style(padding-left, 0, padding-right, 4px); } } .checkbox-replacement-readonly, .checkbox-replacement { width: 40px; flex-shrink: 0; } .checklistItemTicketStateIndicator { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .checklistShowRowDisplayValue { display: flex; flex-grow: 1; } .draggable { width: 40px; height: 28px; text-align: center; cursor: move; flex-shrink: 0; display: flex; align-items: start; justify-content: center; margin-top: 12px; } .draggable:not(.hide) + .checklistItemTicketStateIndicator, .draggable:not(.hide) + .checkbox-replacement-readonly { width: 20px; } .dropdown-container { flex-shrink: 0; .icon-checkmark { fill: white; } } } .checklistShow .table { margin-bottom: 0; &:not(.table--no-borders) { border-bottom: 1px solid var(--background-modifier-accent); } > thead > tr > th { height: 40px; vertical-align: middle; padding-top: 4px; padding-bottom: 3px; } > tbody > tr > td { vertical-align: middle; &.checklistShowRowContentCell { height: 40px; padding: 0; } &.checklistShowRowContentCellNoItems { height: 40px; font-size: 12px; text-transform: uppercase; text-align: center; } .icon { margin-top: 0; } } } .checklistShowButtons { display: flex; justify-content: space-between; padding: 5px; .btn { margin: 0; } .btn--create { @include ltr(margin-left, auto); @include rtl(margin-right, auto); } } .input-group--small { height: 30px; .input-group-btn { .btn--action { padding: 0 9px !important; } .btn--icon-only { height: 30px; width: 30px; .icon { height: 10px; width: 10px; } } } } .checklistItemEdit, .checklistTitleEdit { flex-grow: 1; } .checklistStart { display: flex; flex-direction: column; row-gap: 8px; } .checklist-item-container { .checklist-item { display: flex; flex: 0 1 auto; align-items: center; margin-bottom: 4px; padding-left: 6px; padding-right: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--background-modifier-accent); &-draggable { cursor: move; margin-right: 8px; margin-left: 8px; padding-top: 6px; } &-text { @include ltr(margin-right, 8px); @include rtl(margin-left, 8px); } } } .checklist-item-add-container { display: flex; flex-direction: row; margin-top: 5px; padding-left: 13px; padding-right: 13px; .checklist-item-add-item-text { flex: 1 1 0%; @include ltr(margin-right, 8px); @include rtl(margin-left, 8px); } } .checklist_item .controls .help-inline { padding-left: 13px; padding-right: 13px; } .checklist-item-template { display: flex; flex: 0 1 auto; align-items: center; margin-bottom: 4px; } #form-checklist-template .form-group { margin-bottom: 10px; } #keyboard-shortcut { &-switches { margin-bottom: 20px; } &-areas { transition: opacity 0.1s; &.is-disabled { opacity: 0.33; } } }