diff --git a/css/backoffice/layout/activity-panel/_activity-entry.scss b/css/backoffice/layout/activity-panel/_activity-entry.scss index 7f7cc71df8..3497edb40c 100644 --- a/css/backoffice/layout/activity-panel/_activity-entry.scss +++ b/css/backoffice/layout/activity-panel/_activity-entry.scss @@ -165,6 +165,11 @@ $ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default; padding: $ibo-activity-entry--main-information--padding-y $ibo-activity-entry--main-information--padding-x; background-color: $ibo-activity-entry--main-information--background-color; border-radius: $ibo-activity-entry--main-information--border-radius; + + /* Avoid pre (code snippets) to overflow outside the entry */ + pre{ + white-space: pre-wrap; + } } .ibo-activity-entry--sub-information{ margin-top: $ibo-activity-entry--sub-information--margin-top; diff --git a/css/backoffice/layout/activity-panel/_activity-panel.scss b/css/backoffice/layout/activity-panel/_activity-panel.scss index 4a727b55cf..0be1585ed2 100644 --- a/css/backoffice/layout/activity-panel/_activity-panel.scss +++ b/css/backoffice/layout/activity-panel/_activity-panel.scss @@ -104,10 +104,10 @@ $ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default; } } /* - Specific decoration regarding the case log rank */ -@for $iIdx from 1 through 5 { - .ibo-activity-panel--tab-for-caselog-#{$iIdx}{ +@each $sColor in $ibo-activity-panel--tab--caselog-highlight-colors { + .ibo-activity-panel--tab-for-caselog-#{index($ibo-activity-panel--tab--caselog-highlight-colors, $sColor)}{ .ibo-activity-panel--tab-decoration{ - background-color: nth($ibo-activity-panel--tab--caselog-highlight-colors, $iIdx); + background-color: $sColor; } } } diff --git a/css/backoffice/layout/activity-panel/_caselog-entry.scss b/css/backoffice/layout/activity-panel/_caselog-entry.scss index 0a67f9138c..76b65ed621 100644 --- a/css/backoffice/layout/activity-panel/_caselog-entry.scss +++ b/css/backoffice/layout/activity-panel/_caselog-entry.scss @@ -22,27 +22,32 @@ $ibo-caselog-entry--main-information--decoration--width: 3px !default; /* Main information */ .ibo-caselog-entry{ + /* Highlight color */ .ibo-activity-entry--main-information::before{ content: ""; position: absolute; top: 0; bottom: 0; - left: 0; width: $ibo-caselog-entry--main-information--decoration--width; - border-top-left-radius: $ibo-activity-entry--main-information--border-radius; - border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius; } - &:last-child{ + /* - User specific (current or not) */ + &:not(.ibo-is-current-user){ .ibo-activity-entry--main-information::before{ - border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius--for-tip; + left: 0; + border-top-left-radius: $ibo-activity-entry--main-information--border-radius; + border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius; + } + &:last-child{ + .ibo-activity-entry--main-information::before{ + border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius--for-tip; + } } } - &.ibo-is-current-user{ .ibo-activity-entry--main-information::before{ - left: initial; right: 0; - border-radius: 0 $ibo-activity-entry--main-information--border-radius $ibo-activity-entry--main-information--border-radius 0; + border-top-right-radius: $ibo-activity-entry--main-information--border-radius; + border-bottom-right-radius: $ibo-activity-entry--main-information--border-radius; } &:last-child{ .ibo-activity-entry--main-information::before{ @@ -50,12 +55,25 @@ $ibo-caselog-entry--main-information--decoration--width: 3px !default; } } } -} -/* - Specific decoration regarding the case log rank */ -@for $iIdx from 1 through 5 { - .ibo-caselog-entry--entry-for-caselog-#{$iIdx}{ - .ibo-activity-entry--main-information::before{ - background-color: nth($ibo-caselog-entry--highlight-colors, $iIdx); + /* - Closed entry placeholder specific */ + &.ibo-is-closed{ + &.ibo-is-current-user{ + .ibo-activity-entry--main-information::after{ + margin-left: $ibo-caselog-entry--main-information--decoration--width; + } + } + &:not(.ibo-is-current-user){ + .ibo-activity-entry--main-information::after{ + margin-right: $ibo-caselog-entry--main-information--decoration--width; + } + } + } +} +/* - Specific decoration regarding the case log rank */ +@each $sColor in $ibo-caselog-entry--highlight-colors { + .ibo-caselog-entry--entry-for-caselog-#{index($ibo-caselog-entry--highlight-colors, $sColor)}{ + .ibo-activity-entry--main-information::before{ + background-color: $sColor; } } } diff --git a/css/backoffice/utils/variables/_color.scss b/css/backoffice/utils/variables/_color.scss index 2a9c118495..1040a75d1e 100644 --- a/css/backoffice/utils/variables/_color.scss +++ b/css/backoffice/utils/variables/_color.scss @@ -235,7 +235,7 @@ $ibo-caselog-highlight-color-2: $ibo-color-pink-700 !default; $ibo-caselog-highlight-color-3: $ibo-color-blue-600 !default; $ibo-caselog-highlight-color-4: $ibo-color-orange-400 !default; $ibo-caselog-highlight-color-5: $ibo-color-cyan-200 !default; -$ibo-caselog-highlight-colors: $ibo-caselog-highlight-color-1, $ibo-caselog-highlight-color-2, $ibo-caselog-highlight-color-3, $ibo-caselog-highlight-color-4, $ibo-caselog-highlight-color-5 !default; +$ibo-caselog-highlight-colors: ($ibo-caselog-highlight-color-1, $ibo-caselog-highlight-color-2, $ibo-caselog-highlight-color-3, $ibo-caselog-highlight-color-4, $ibo-caselog-highlight-color-5) !default; :root{ --ibo-color-primary-100: #{$ibo-color-primary-100};