diff --git a/css/backoffice/components/_panel.scss b/css/backoffice/components/_panel.scss index d9a7d70e2..0b69dc597 100644 --- a/css/backoffice/components/_panel.scss +++ b/css/backoffice/components/_panel.scss @@ -55,43 +55,43 @@ $ibo-panel--collapsible-toggler--font-size: $ibo-font-size-250 !default; $ibo-panel--collapsible-toggler--color: $ibo-color-grey-700 !default; $ibo-panel-colors: ( - 'primary': $ibo-color-primary-600, - 'secondary': $ibo-color-secondary-600, - 'neutral': $ibo-color-grey-600, - 'information': $ibo-color-information-600, - 'success': $ibo-color-success-600, - 'failure': $ibo-color-danger-600, - 'warning': $ibo-color-warning-600, - 'danger': $ibo-color-danger-600, - 'grey' : $ibo-color-grey-600, - 'blue-grey': $ibo-color-blue-grey-600, - 'blue': $ibo-color-blue-800, - 'cyan': $ibo-color-cyan-600, - 'green': $ibo-color-green-600, - 'orange' : $ibo-color-orange-600, - 'red': $ibo-color-red-600, - 'pink': $ibo-color-pink-600, + 'primary': $ibo-color-primary-600, + 'secondary': $ibo-color-secondary-600, + 'neutral': $ibo-color-grey-600, + 'information': $ibo-color-information-600, + 'success': $ibo-color-success-600, + 'failure': $ibo-color-danger-600, + 'warning': $ibo-color-warning-600, + 'danger': $ibo-color-danger-600, + 'grey' : $ibo-color-grey-600, + 'blue-grey': $ibo-color-blue-grey-600, + 'blue': $ibo-color-blue-800, + 'cyan': $ibo-color-cyan-600, + 'green': $ibo-color-green-600, + 'orange' : $ibo-color-orange-600, + 'red': $ibo-color-red-600, + 'pink': $ibo-color-pink-600, ) !default; @each $sColor, $sColorValue in $ibo-panel-colors { - .ibo-panel.ibo-is-#{$sColor} > .ibo-panel--body::before { - position: absolute; - top: 0; - left: 0; - display: block; + .ibo-panel.ibo-is-#{$sColor} > .ibo-panel--body::before { + position: absolute; + top: 0; + left: 0; + display: block; - background-color: $sColorValue; - content: ""; + background-color: $sColorValue; + content: ""; - width: $ibo-panel--highlight--width; - height: $ibo-panel--highlight--height; - padding-bottom: $ibo-panel--highlight--padding-bottom; - } + width: $ibo-panel--highlight--width; + height: $ibo-panel--highlight--height; + padding-bottom: $ibo-panel--highlight--padding-bottom; + } } /* Rules */ .ibo-panel + .ibo-panel { - margin-top: $ibo-panel--spacing-top; + margin-top: $ibo-panel--spacing-top; } .ibo-panel { @@ -123,6 +123,7 @@ $ibo-panel-colors: ( 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}); } @@ -152,7 +153,6 @@ $ibo-panel-colors: ( min-height: $ibo-panel--icon--size; } - .ibo-panel--icon-background { width: 100%; height: 100%; @@ -187,17 +187,17 @@ $ibo-panel-colors: ( } .ibo-panel--body { - position: relative; - padding: $ibo-panel--body--padding-top $ibo-panel--body--padding-x $ibo-panel--body--padding-bottom $ibo-panel--body--padding-x; - background-color: $ibo-panel--body--background-color; - border: solid $ibo-panel--body--border-size $ibo-panel--body--border-color; - border-radius: $ibo-panel--body--border-radius; - overflow: hidden; /* To force highlight color to be cropped by the border radius */ + position: relative; + padding: $ibo-panel--body--padding-top $ibo-panel--body--padding-x $ibo-panel--body--padding-bottom $ibo-panel--body--padding-x; + background-color: $ibo-panel--body--background-color; + border: solid $ibo-panel--body--border-size $ibo-panel--body--border-color; + border-radius: $ibo-panel--body--border-radius; + overflow: hidden; /* To force highlight color to be cropped by the border radius */ - @extend %ibo-font-ral-nor-200; + @extend %ibo-font-ral-nor-200; } -.ibo-panel--collapsible-toggler{ +.ibo-panel--collapsible-toggler { display: inline-block; margin-right: $ibo-panel--collapsible-toggler--margin-right; font-size: $ibo-panel--collapsible-toggler--font-size; @@ -205,22 +205,25 @@ $ibo-panel-colors: ( cursor: pointer; } -.ibo-panel--collapsible-toggler--opened{ +.ibo-panel--collapsible-toggler--opened { display: block; } -.ibo-panel--collapsible-toggler--closed{ +.ibo-panel--collapsible-toggler--closed { display: none; } +/* Collapsible rules */ .ibo-panel:not(.ibo-is-opened) { - .ibo-panel--collapsible-toggler--closed{ + .ibo-panel--collapsible-toggler--closed { display: block; } - .ibo-panel--collapsible-toggler--opened{ + + .ibo-panel--collapsible-toggler--opened { display: none; } - .ibo-panel--body{ + + .ibo-panel--body { display: none; } } \ No newline at end of file