Panel: Fix panel icon being wrongly displayed as medallion when within a panel with in fact a medallion icon

This commit is contained in:
Molkobain
2021-03-05 12:53:03 +01:00
parent 085855cdc5
commit 256c01dff4
2 changed files with 36 additions and 29 deletions

View File

@@ -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});
}
}
}
}
}

View File

@@ -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;
}
}
}
}