diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css index 0599c81e6..cdce9d11b 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css +++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css @@ -850,6 +850,7 @@ table .group-actions { }*/ /* Layout 1 */ /* Layout 7 */ + /* Layout 5 & 7 */ .mosaic-group-item { display: inline-block; width: 32%; @@ -892,6 +893,18 @@ table .group-actions { max-height: 40px; font-size: 10px; } + .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image { + display: table-cell; + width: 65px; + padding-left: 5px; + padding-right: 10px; + } + .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img { + max-width: 65px; + /* Equals parent element width */ + max-height: 100px; + /* Equals parent element height */ + } } @media (min-width: 992px) { /* Layout 5 & 7 */ @@ -902,14 +915,14 @@ table .group-actions { font-size: 40px; } .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image { - display: table-cell; width: 105px; - padding-left: 5px; padding-right: 18px; } .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img { max-width: 105px; /* Equals parent element width */ + max-height: 100px; + /* Equals parent element height */ } .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name { font-size: 12px; @@ -927,6 +940,10 @@ table .group-actions { /* Must be .mosaic-item absolute height (in px) */ /* overflow hidden inherited */ } + .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img { + max-height: 120px; + /* Equals parent element height */ + } } /* Helper classes to remove margin depending on the screen size */ @media (min-width: 768px) and (max-width: 992px) { diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss index 6eee5f572..7d2260ab3 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss +++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss @@ -934,7 +934,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ } .mosaic-item:hover, .mosaic-item:focus{ - background-color: $combodo-orange; + background-color: $brand-primary; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20); } @@ -970,6 +970,19 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ max-height: 40px; font-size: 10px; } + /* Layout 5 & 7 */ + .mosaic-item-layout-5 .mosaic-item-image, + .mosaic-item-layout-7 .mosaic-item-image{ + display: table-cell; + width: 65px; + padding-left: 5px; + padding-right: 10px; + } + .mosaic-item-layout-5 .mosaic-item-image > img, + .mosaic-item-layout-7 .mosaic-item-image > img{ + max-width: 65px; /* Equals parent element width */ + max-height: 100px; /* Equals parent element height */ + } } @media (min-width: 992px) { .mosaic-item{ @@ -982,14 +995,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ /* Layout 5 & 7 */ .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image{ - display: table-cell; width: 105px; - padding-left: 5px; padding-right: 18px; } .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img{ max-width: 105px; /* Equals parent element width */ + max-height: 100px; /* Equals parent element height */ } .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name{ @@ -1008,6 +1020,11 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ max-height: 120px; /* Must be .mosaic-item absolute height (in px) */ /* overflow hidden inherited */ } + + .mosaic-item-layout-5 .mosaic-item-image > img, + .mosaic-item-layout-7 .mosaic-item-image > img{ + max-height: 120px; /* Equals parent element height */ + } } /* Helper classes to remove margin depending on the screen size */