diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 67796f597..6ec75f7a7 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -422,7 +422,7 @@ pre code.hljs { &--small { padding-top: 5px; padding-bottom: 4px; - + &.btn--quad { padding: 4px 5px; } @@ -478,7 +478,7 @@ pre code.hljs { &.btn--slim { padding-left: 7px !important; padding-right: 7px !important; - + .btn-label { @include bidi-style(margin-left, 0, margin-right, 0); } @@ -504,11 +504,11 @@ pre code.hljs { &--active { background: hsl(204,7%,28%); color: white; - + &:active { background: hsla(0,0%,0%,.55); } - + .btn-inactive-icon { display: none; } @@ -523,7 +523,7 @@ pre code.hljs { background: hsla(200,100%,97%,0.15); border-color: hsl(250,7%,16%); color: white; - + .icon { opacity: 1; } @@ -532,7 +532,7 @@ pre code.hljs { // used in the sidebar &--onWhite { background: hsl(0,0%,98%); - + &:active { background: hsl(0,0%,96%); } @@ -541,7 +541,7 @@ pre code.hljs { &--primary { color: white; background: hsl(203,65%,55%); - + &:active { background: hsl(203,65%,45%); } @@ -583,7 +583,7 @@ pre code.hljs { &--danger { color: white; background: hsl(0,65%,55%); - + &:active { background: hsl(0,65%,45%); } @@ -742,7 +742,7 @@ pre code.hljs { .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; @@ -826,12 +826,12 @@ pre code.hljs { .btn { &:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } &:not(:last-child) { - border-top-right-radius: 0; + border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; } @@ -906,7 +906,7 @@ pre code.hljs { .status-fields { display: flex; max-width: 100%; - + .dropdown li { display: flex; align-items: center; @@ -916,7 +916,7 @@ pre code.hljs { .dropdown-menu .status-badge { margin-left: 10px; } - + .dropdown-menu .badge { margin-top: -2px; margin-right: 7px; @@ -953,10 +953,10 @@ pre code.hljs { &:first-child { border-radius: 5px 0 0 5px; @include rtl(border-radius, 0 5px 5px 0); - + .dropdown.open & { border-radius: 5px 0 0 0; - + @include rtl(border-radius, 0 5px 0 0); } } @@ -988,7 +988,7 @@ pre code.hljs { border-left: none; width: 34px; justify-content: center; - + .icon { fill: currentColor; } @@ -1177,7 +1177,7 @@ th.align-right { .table > tbody > tr > td { padding: 10px 10px 8px; border-color: hsl(0,0%,95%); - + &.no-side-padding { padding-left: 0; padding-right: 0; @@ -1310,7 +1310,7 @@ td .icon-trash { justify-content: center; position: relative; @extend .u-clickable; - + > .icon { vertical-align: middle; margin-top: -2px; @@ -1395,7 +1395,7 @@ td .icon-trash { input:focus ~ .icon-unchecked { border-radius: 100%; } - + > .icon { margin-top: -3px; } @@ -1405,7 +1405,7 @@ td .icon-trash { .table .radio-replacement { height: 40px; width: 40px; - + &.checkbox-replacement--fullscreen { width: 100%; height: 100%; @@ -1564,7 +1564,7 @@ label, text-align: start; padding: 0; /* user-select: none; disabled because of chrome51 https://github.com/martini/zammad/issues/183 */ - + h2 & { color: inherit !important; font-size: inherit; @@ -1676,7 +1676,7 @@ https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-h --background: hsl(0,0%,97%); border-radius: 4px; margin-bottom: 16px; - + > .form-group:last-child { margin-bottom: 0; } @@ -1817,7 +1817,7 @@ fieldset > .form-group { position: relative; display: flex; align-items: center; - + h2 & { padding: 0; margin: 0; @@ -1912,7 +1912,7 @@ fieldset > .form-group { .controls-label { margin: 11px 10px 0; flex-shrink: 0; - + .form-control--small + & { margin-top: 7px; } @@ -2075,7 +2075,7 @@ input.time.time--12 { textarea.form-control { height: 118px; - + &[rows] { height: auto; } @@ -2178,8 +2178,8 @@ input.has-error { .controls { flex: 1; - } - + } + .help-inline, .help-block { flex-basis: 100%; @@ -2236,7 +2236,7 @@ input.has-error { position: relative; border: 1px solid hsl(0, 0%, 90%); @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px); - + .icon { fill: hsl(0,0%,61%); } @@ -2334,7 +2334,7 @@ input.has-error { align-items: center; justify-content: center; flex: 1; - + .icon { @include bidi-style(margin-right, 14px, margin-left, 0); } @@ -2359,7 +2359,7 @@ input.has-error { .fullscreenMessage--placeholder { flex-direction: column; - + .icon { width: 100px; height: 100px; @@ -2503,7 +2503,7 @@ input.has-error { display: flex; justify-content: flex-end; border: 1px solid hsl(213,14%,91%); - + &--footer { justify-content: center; } @@ -2530,15 +2530,15 @@ input.has-error { position: relative; line-height: 1; display: block; - + .nav-pills > li > a & { align-self: center; } - + .icon { fill: currentColor; } - + .modified-icon-modifier { bottom: 0; right: 0; @@ -2546,7 +2546,7 @@ input.has-error { z-index: 1; fill: white; margin: 0 -2px -1px 0; - + .nav-pills > li:hover > a & { fill: #f2f2f3; } @@ -3047,7 +3047,7 @@ ol.tabs li { .tab { flex: none; - + &:nth-last-child(2) { @include bidi-style(border-right-width, 0, border-right-width, 1px); } @@ -3122,7 +3122,7 @@ ol.tabs li { flex-wrap: wrap; justify-content: space-between; margin-bottom: -10px; - + > form { width: calc(33.33% - 6px); } @@ -3236,7 +3236,7 @@ ol.tabs li { .icon-arrow-right { fill: black; opacity: 0.39; - + .btn--action & { opacity: 1; } @@ -3276,7 +3276,7 @@ ol.tabs li { .icon-draggable { opacity: .3; - + .table-draggable & { vertical-align: middle; } @@ -3406,7 +3406,7 @@ ol.tabs li { display: flex; flex-wrap: wrap; align-items: flex-end; - + .alert { flex-basis: 100%; } @@ -3415,7 +3415,7 @@ ol.tabs li { flex: 1 1 auto; margin-right: 6px; } - + .form-group:last-child { margin-bottom: 0; } @@ -3435,7 +3435,7 @@ ol.tabs li { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; - + fieldset { flex-basis: 100%; display: flex; @@ -3825,16 +3825,16 @@ footer { .call-widget { background: hsl(228,17%,91%); padding: 8px 10px; - + & + & { border-top: 1px solid hsl(228,10%,81%); } - + &-header { display: flex; color: inherit; margin-bottom: 3px; - + .label { color: inherit; margin: 0; @@ -3843,7 +3843,7 @@ footer { .btn--text { color: inherit; opacity: .5; - + &:hover { opacity: 1; } @@ -3878,7 +3878,7 @@ footer { padding: 0; margin-bottom: 9px; display: flex; - + .icon-holder .icon { width: 16px; height: 16px; @@ -4102,7 +4102,7 @@ footer { .state-badge { display: flex; align-items: center; - + .icon-task-state { @include bidi-style(margin-right, 2px, margin-left, 0); } @@ -4273,7 +4273,7 @@ footer { padding: 9px 15px 8px 0; margin-bottom: 7px; height: auto !important; - + .no-match & { display: none; } @@ -4657,7 +4657,7 @@ footer { &-header { margin-bottom: 7px; - + h2 { margin: 0; } @@ -4761,7 +4761,7 @@ footer { &: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); @@ -4836,7 +4836,7 @@ footer { .popover-content { padding: 0 17px; margin-bottom: 21px; - + .popover--has-horizontal-form & { padding: 10px 5px 15px 15px; margin-bottom: 0; @@ -5113,7 +5113,7 @@ footer { font-weight: normal; position: relative; padding: 0 24px; - + .tooltip { text-transform: none; width: 200px; @@ -5406,7 +5406,7 @@ footer { position: relative; height: 60px; flex: 1 1 auto; - + &.datetime { min-width: 140px; overflow: visible; // datepicker popup needs to be visible @@ -5684,7 +5684,7 @@ footer { vertical-align: top; margin: 2px 3px 0 0; @include rtl(margin, 2px 0 0 3px); - + &.icon-lock { margin: 0; } @@ -5696,29 +5696,29 @@ footer { .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%,.04); - + &:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } - + &--blank { background: hsl(212,14%,99%); color: hsl(198,16%,70%); - + .customer.ticket-article-item & { background: hsl(201,43%,96%); border-color: hsl(203,38%,92%); @@ -5897,7 +5897,7 @@ footer { font-weight: 500; text-transform: uppercase; padding: 0 7px; - + .badge { margin: -1px 0 0 5px; } @@ -5983,7 +5983,7 @@ footer { margin: 5px; display: none; @extend .fit; - + &--small { margin: 0; font-size: inherit; @@ -6432,13 +6432,13 @@ footer { left: 0; bottom: 0; } - + .attachmentUpload--standalone { position: relative; margin-bottom: 7px; padding-bottom: 2px; box-shadow: 0 -4px hsl(0,0%,90%) inset; - + &:last-child { margin-bottom: 0; } @@ -6786,7 +6786,7 @@ footer { &--warning { color: hsl(45,98%,17%); background: hsl(45,98%,63%); - + .btn { background: hsla(0,0%,100%,.2); } @@ -6803,7 +6803,7 @@ footer { .btn { margin-top: -4px; margin-bottom: -5px; - + &:last-child { margin-right: -5px; } @@ -7337,7 +7337,7 @@ footer { .modal { @extend .zIndex-10; - + &-loader { text-align: center; padding: 70px; @@ -7566,7 +7566,7 @@ footer { .dropdown-menu > li[disabled] { opacity: 0.33; - + &:hover, &.is-active { background: none; @@ -7839,7 +7839,7 @@ footer { .radio { font-size: 14px; padding: 0 6px; - + .form-group & { padding: 0 6px; list-style: none; @@ -7859,7 +7859,7 @@ footer { padding-left: 0; min-height: 0; } - + > label, &-child { margin-top: 5px; @@ -7869,7 +7869,7 @@ footer { text-transform: inherit; letter-spacing: 0; line-height: 1.2; - + &:first-child { margin-top: 0; } @@ -7877,22 +7877,22 @@ footer { &.is-disabled { cursor: default; touch-action: default; - + span { opacity: .33; } } - + &.additional-radio-controls { margin-top: 0; - + .controls { display: inline-flex; margin-left: 5px; } } } - + &-child { padding-left: 20px; } @@ -7924,7 +7924,7 @@ footer { text-transform: inherit; letter-spacing: 0; line-height: 1.2; - + &:first-child { margin-top: 0; } @@ -7932,13 +7932,13 @@ footer { &.is-disabled { cursor: default; touch-action: default; - + span { opacity: .33; } } } - + &-child { padding-left: 20px; } @@ -7998,7 +7998,7 @@ footer { width: 100%; padding-bottom: 100%; position: relative; - + img { width: 100%; height: 100%; @@ -8014,7 +8014,7 @@ footer { ~ .label-box { border-color: hsl(200,71%,59%); box-shadow: 0 0 0 3px hsl(201,62%,90%); - + .icon-checked { display: inline; } @@ -8107,7 +8107,7 @@ footer { position: relative; margin: 16px 0; text-align: center; - + &:before { content: ""; position: absolute; @@ -8118,7 +8118,7 @@ footer { height: 1px; background: hsla(0,0%,0%,.1); } - + span { position: relative; background: white; @@ -8130,7 +8130,7 @@ footer { .settings-entry { margin-bottom: 42px; max-width: 700px; - + &--stretched { max-width: none; } @@ -8538,7 +8538,7 @@ label + .wizard-buttonList { .fileUpload { position: relative; overflow: hidden; - + &.btn input:focus + label { text-decoration: none; } @@ -8864,7 +8864,7 @@ label + .wizard-buttonList { border: 1px solid hsl(201,19%,86%); border-radius: 5px; margin: 0 5px; - + > .form-group:last-child { margin-bottom: 0; } @@ -9185,7 +9185,7 @@ output { .ui-sortable-placeholder { visibility: visible !important; - + td { background: none; border-left-width: 0; @@ -9270,7 +9270,7 @@ output { .settings-list-control-cell { padding: 5px; - + .btn--text { margin: -5px; } @@ -9503,7 +9503,7 @@ output { h2 { margin-bottom: 0; - + .action-form-status .icon { margin-top: 0; } @@ -9533,7 +9533,7 @@ output { h3 { color: hsl(0,0%,60%); margin-top: 0; - + + .btn--text { margin-bottom: -4px; } @@ -10274,11 +10274,11 @@ output { &-group-label { opacity: 0.5; - + .filter-active & { display: none; } - + ~ .columnSelect-option { padding-left: 10px; } @@ -10688,7 +10688,7 @@ output { display: flex; align-items: center; min-width: 0; - + &-menu { display: flex; @include ltr(margin-left, auto); @@ -10814,14 +10814,14 @@ output { transition: letter-spacing 200ms; cursor: default; line-height: 40px; - + &:hover { letter-spacing: -2px; } span { display: none; - + &.is-active { display: block; } @@ -10835,11 +10835,11 @@ output { border: none; padding: 13px 20px 11px; outline: none; - + &::placeholder { color: hsl(234,2%,50%); } - + &:focus, &:hover { background: hsl(234,8%,30%); @@ -10851,13 +10851,13 @@ output { flex-wrap: wrap; padding: 10px; margin: 0; - + li { list-style: none; cursor: pointer; user-select: none; border-radius: 2px; - + &:hover, &.is-active { background: $highlight-color; @@ -10892,7 +10892,7 @@ output { width: 31px; height: 100%; position: relative; - + // unparsable color &[style=""]:before { content: ""; @@ -10913,7 +10913,7 @@ output { width: 380px; min-width: 0; } - + .open > & { display: flex; } @@ -10936,7 +10936,7 @@ output { cursor: image_url("/assets/images/colorcircle.gif") 8 8, auto; user-select: none; } - + &-lightness-plane, &-saturation-gradient { position: absolute; @@ -10945,7 +10945,7 @@ output { height: 100%; width: 100%; } - + &-circle { position: absolute; left: 0; @@ -10969,7 +10969,7 @@ output { width: 20px; background: red; } - + &-hue-gradient { height: 100%; width: 100%; @@ -10981,7 +10981,7 @@ output { top: 0; left: -7px; right: -7px; - + &-arrow { position: absolute; top: 0; @@ -10989,12 +10989,12 @@ output { 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; @@ -11027,12 +11027,12 @@ output { display: flex; border: 1px solid hsl(197,10%,90%); border-radius: 3px; - + &.is-active { border-color: hsl(200,71%,59%); box-shadow: 0 0 0 3px #d6eaf5; } - + &-preview { flex-grow: 1; display: flex; @@ -11069,13 +11069,13 @@ output { 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; } @@ -11083,11 +11083,11 @@ output { } @keyframes iconset-flash { - from { + from { background: hsl(210,15%,94%); color: hsl(210,10%,30%); } - to { + to { background: transparent; color: inherit; } @@ -11338,37 +11338,37 @@ span.is-disabled { padding: 5px 5px 5px 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 4px; - + &[data-state="published"] { color: $supergood-color; border-color: transparentize($supergood-color, .65); - + .btn { border-color: transparentize($supergood-color, .65); } } - + &[data-state="archived"] { border-color: hsl(0,0%,80%); - + .btn { border-color: hsl(0,0%,80%); } } - + &[data-state="internal"] { color: $highlight-color; border-color: transparentize($highlight-color, .65); - + .btn { border-color: transparentize($highlight-color, .65); } } - + .help-text & { margin-top: 4px; } - + .icon { color: inherit; fill: currentColor; @@ -11397,11 +11397,11 @@ span.is-disabled { background: hsl(210,14%,94%); border-bottom: 1px solid hsl(0,0%,90%); padding: 7px; - + .breadcrumb:not(:first-child) .breadcrumb-icon { width: 16px; height: 16px; - } + } } &-body { @@ -11419,17 +11419,17 @@ span.is-disabled { overflow: auto; transition: transform 500ms; @include bidi-style(border-left, 1px solid #e6e6e6, border-right, none); - + @include desktop { width: 28%; } - + &.hidden { display: block !important; visibility: visible !important; @include ltr(transform, translateX(100%)); @include rtl(transform, translateX(-100%)); - + + .knowledge-base-main { @include ltr(margin-right, 0); @include rtl(margin-left, 0); @@ -11441,13 +11441,13 @@ span.is-disabled { line-height: 1; } } - + &-main { @include ltr(transition, margin-right 500ms); @include ltr(margin-right, 280px); @include rtl(transition, margin-left 500ms); @include rtl(margin-left, 280px); - + @include desktop { @include ltr(margin-right, 28%); @include rtl(margin-left, 28%); @@ -11457,7 +11457,7 @@ span.is-disabled { form { flex-shrink: 0; } - + .richtext-content { word-break: break-all; } @@ -11496,7 +11496,7 @@ span.is-disabled { list-style: none; padding: 0; margin: 0 -10px; - + &:not(:empty) + &:not(:empty) { border-top: 1px solid hsl(0,0%,90%); margin-top: 20px; @@ -11539,11 +11539,11 @@ span.is-disabled { text-align: center; } } - + &[data-size="medium"] { .section { width: 25%; - + a { font-size: 14px; } @@ -11559,11 +11559,11 @@ span.is-disabled { } } } - + &[data-size="large"] { .section { width: 33.33%; - + a { font-size: 15px; } @@ -11626,7 +11626,7 @@ span.is-disabled { &-date { display: inline; color: hsl(0,0%,75%); - + &:after { content: " — "; color: hsl(60,1%,34%); @@ -11644,12 +11644,12 @@ span.is-disabled { &-icon { flex-shrink: 0; - + &-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); @@ -11676,7 +11676,7 @@ span.is-disabled { } } -.knowledge-base-article { +.knowledge-base-article { &-header { text-align: center; } @@ -11685,7 +11685,7 @@ span.is-disabled { display: block; text-align: center; } - + &-body { margin-top: 20px; background: white; @@ -11705,7 +11705,7 @@ span.is-disabled { &-nav { display: flex; - + &-link { padding: 15px; max-width: 50%; @@ -11739,7 +11739,7 @@ span.is-disabled { font-size: 12px; border: 1px solid hsl(0,0%,85%); border-radius: 3px; - + .column { list-style: none; padding: 0; @@ -11748,17 +11748,17 @@ span.is-disabled { height: 300px; overflow: auto; border-right: 1px solid hsl(0,0%,85%); - + &:last-child { border-right-width: 0; } - + &-item { display: flex; align-items: center; padding: 5px 10px; cursor: default; - + &:hover { background: hsl(0,0%,95%); } @@ -11766,17 +11766,17 @@ span.is-disabled { &.is-selected { background: hsl(0,0%,90%); } - + &--has-children { @extend %clickable; cursor: pointer; } - + span { @extend .u-textTruncate; margin-right: 10px; } - + > .icon:first-child, [data-font] { fill: currentColor; @@ -11799,7 +11799,7 @@ span.is-disabled { [data-theme="dark"] { background: hsl(232,11%,19%); - + label { color: white; }