diff --git a/css/backoffice/components/_panel.scss b/css/backoffice/components/_panel.scss index bc57d2cfb..12fd7dba5 100644 --- a/css/backoffice/components/_panel.scss +++ b/css/backoffice/components/_panel.scss @@ -107,22 +107,26 @@ $ibo-panel-colors: ( margin-left: $ibo-panel--icon--spacing--as-medallion; } - .ibo-panel--icon { - position: absolute; - bottom: $ibo-panel--icon--bottom--as-medallion; - left: 0; - overflow: hidden; - width: $ibo-panel--icon--size-as-medallion; - height: $ibo-panel--icon--size-as-medallion; - min-width: $ibo-panel--icon--size-as-medallion; - min-height: $ibo-panel--icon--size-as-medallion; - background-color: $ibo-panel--icon--background-color--as-medallion; - border: $ibo-panel--icon--border--as-medallion; - border-radius: $ibo-panel--icon--border-radius--as-medallion; - } - - .ibo-panel--titles { - padding-left: calc(#{$ibo-panel--icon--size-as-medallion} + #{$ibo-panel--icon--spacing--as-medallion}); + // Note: Direct child selector is mandatory, otherwise a panel within a panel with a medallion icon will have its icon as a medallion too (eg. dashboard in an object) + > .ibo-panel--header { + .ibo-panel--header-left { + .ibo-panel--icon { + position: absolute; + bottom: $ibo-panel--icon--bottom--as-medallion; + left: 0; + overflow: hidden; + width: $ibo-panel--icon--size-as-medallion; + height: $ibo-panel--icon--size-as-medallion; + min-width: $ibo-panel--icon--size-as-medallion; + min-height: $ibo-panel--icon--size-as-medallion; + background-color: $ibo-panel--icon--background-color--as-medallion; + border: $ibo-panel--icon--border--as-medallion; + border-radius: $ibo-panel--icon--border-radius--as-medallion; + } + .ibo-panel--titles { + padding-left: calc(#{$ibo-panel--icon--size-as-medallion} + #{$ibo-panel--icon--spacing--as-medallion}); + } + } } } } diff --git a/css/backoffice/layout/object/_object-details.scss b/css/backoffice/layout/object/_object-details.scss index ed96fafe0..c3068d78d 100644 --- a/css/backoffice/layout/object/_object-details.scss +++ b/css/backoffice/layout/object/_object-details.scss @@ -28,21 +28,24 @@ $ibo-object-details--tag--separator--border-radius: $ibo-border-radius-full !def /* Parent block overloads (!= than blocks integrations */ .ibo-object-details { &.ibo-has-icon.ibo-has-medallion-icon { - .ibo-panel--header-left { - margin-left: $ibo-object-details--icon--spacing--as-medallion; - padding-left: $ibo-object-details--icon--size; - } + // Note: Direct child selector is mandatory, otherwise a panel within a panel with a medallion icon will have its icon as a medallion too (eg. dashboard in an object) + > .ibo-panel--header { + .ibo-panel--header-left { + margin-left: $ibo-object-details--icon--spacing--as-medallion; + padding-left: $ibo-object-details--icon--size; - .ibo-panel--icon { - bottom: calc(-1 * #{$ibo-object-details--icon--size} / 2 + #{$ibo-object-details--icon--bottom--as-medallion}); - width: $ibo-object-details--icon--size; - height: $ibo-object-details--icon--size; - min-width: $ibo-object-details--icon--size; - min-height: $ibo-object-details--icon--size; - } + .ibo-panel--icon { + bottom: calc(-1 * #{$ibo-object-details--icon--size} / 2 + #{$ibo-object-details--icon--bottom--as-medallion}); + width: $ibo-object-details--icon--size; + height: $ibo-object-details--icon--size; + min-width: $ibo-object-details--icon--size; + min-height: $ibo-object-details--icon--size; + } - .ibo-panel--titles { - padding-left: $ibo-object-details--icon--spacing--as-medallion; + .ibo-panel--titles { + padding-left: $ibo-object-details--icon--spacing--as-medallion; + } + } } }