diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less index 304f7cefb36..766b2fe1eff 100644 --- a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less +++ b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less @@ -4,7 +4,7 @@ display: flex; flex-direction: column; height: @catalog-tile-pf-height; - margin: 0 20px @catalog-tile-pf-margin-bottom 0; + margin: 0 15px @catalog-tile-pf-margin-bottom 0; padding: 15px; width: @catalog-tile-pf-width; @@ -70,11 +70,11 @@ } .catalog-tile-view-pf-category { - margin: 10px 0; + margin: 10px 0 15px; } .catalog-tile-view-pf-category-header { - padding-right: 20px; + padding-right: 15px; } .catalog-tile-view-pf-category-header-title { diff --git a/packages/patternfly-3/patternfly-react-extensions/less/variables.less b/packages/patternfly-3/patternfly-react-extensions/less/variables.less index ad0c8c87744..c7b53d7e419 100644 --- a/packages/patternfly-3/patternfly-react-extensions/less/variables.less +++ b/packages/patternfly-3/patternfly-react-extensions/less/variables.less @@ -1,6 +1,6 @@ @catalog-tile-pf-height: 230px; @catalog-tile-pf-width: 220px; -@catalog-tile-pf-margin-bottom: 20px; +@catalog-tile-pf-margin-bottom: 15px; @catalog-tile-pf-total-height: ~"calc(@{catalog-tile-pf-height} + @{catalog-tile-pf-margin-bottom} - 2px)"; @vertical-tab-pf-color: initial; @vertical-tab-pf-active-color: @color-pf-blue-400; diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss index 69a05bd9c03..91849ef2f16 100644 --- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss +++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: column; height: $catalog-tile-pf-height; - margin: 0 20px $catalog-tile-pf-margin-bottom 0; + margin: 0 15px $catalog-tile-pf-margin-bottom 0; padding: 15px; width: $catalog-tile-pf-width; @@ -41,8 +41,8 @@ font-size: 16px; padding-left: 5px; - > .fa, - > .pficon { + >.fa, + >.pficon { vertical-align: top; } } @@ -70,11 +70,11 @@ } .catalog-tile-view-pf-category { - margin: 10px 0; + margin: 10px 0 15px; } .catalog-tile-view-pf-category-header { - padding-right: 20px; + padding-right: 15px; } .catalog-tile-view-pf-category-header-title { diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss index 32dc0bfe279..327629ffd1b 100644 --- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss +++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss @@ -1,6 +1,6 @@ $catalog-tile-pf-height: 230px; $catalog-tile-pf-width: 220px; -$catalog-tile-pf-margin-bottom: 20px; +$catalog-tile-pf-margin-bottom: 15px; $catalog-tile-pf-total-height: calc(#{$catalog-tile-pf-height} + #{$catalog-tile-pf-margin-bottom} - 2px); $vertical-tab-pf-color: initial; $vertical-tab-pf-active-color: $color-pf-blue-400; diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js index 5a3fc972c6e..cbf3efbb720 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js @@ -36,8 +36,8 @@ class CatalogTileViewCategory extends React.Component { rows = 2; } - const numShown = Math.floor(this.categoryContainer.clientWidth / 240) * rows; - const rightSpacerWidth = this.categoryContainer.clientWidth % 240; + const numShown = Math.floor(this.categoryContainer.clientWidth / 235) * rows; + const rightSpacerWidth = this.categoryContainer.clientWidth % 235; this.setState({ numShown, rightSpacerWidth }); } };