Liferay DXP 7.1 uses Bootstrap 4’s CSS rule syntax. Font Awesome icons have also
been moved, requiring changes to your imports. If your theme uses the Liferay JS
Theme Toolkit, the Gulp upgrade
task reports automatic CSS updates and
suggests manual updates. For example, here is part of the task log for the Lunar
Resort theme upgrade from 6.2 to 7.0. For each update performed and suggested,
the task reports a file name and line number range:
----------------------------------------------------------------
Bootstrap Upgrade (2 to 3)
----------------------------------------------------------------
File: src/css/_aui_variables.scss
Line 5: "$white" has been removed
Line 11: "$baseBorderRadius" has changed to "$border-radius-base"
Line 15: "$btnBackground" has changed to "$btn-default-bg"
Line 16: "$btnBackgroundHighlight" has been removed
Line 17: "$btnBorder" has changed to "$btn-default-border"
...
File: src/css/custom.css
Line 201: Padding no longer affects width or height, you may need to
change your rule (lines 201-227)
Line 207: Padding no longer affects width or height, you may need to
change your rule (lines 207-226)
Line 212: You would change height from "62px" to "82px"
...
Manually Updating CSS Rules
Follow these steps to update your theme’s CSS rules manually:
-
Since Bootstrap 3 adopted the
box-sizing: border-box
property for all elements and pseudo-elements (e.g.,:before
and:after
), padding no longer affects dimensions. Bootstrap’s documentation describes the box sizing changes. In all CSS rules that use padding, make sure to update the width and height. For example, examine theheight
value change in this CSS rule for the Lunar Resort theme’s_custom.scss
file:Original:
#reserveBtn { background-color: #00C4FB; border-radius: 10px; color: #FFF; font-size: 1.5em; height: 62px; margin: 30px; padding: 10px 0; ... }
Updated:
#reserveBtn { background-color: #00C4FB; border-radius: 10px; color: #FFF; font-size: 1.5em; height: 82px; margin: 30px; padding: 10px 0; ... }
-
The following variables are removed in Bootstrap 4. Remove any of these if they are used in your theme:
$line-height-computed $padding-base-horizontal $padding-base-vertical $padding-large-horizontal $padding-large-vertical $padding-small-horizontal $padding-small-vertical $padding-xs-horizontal $padding-xs-vertical $gray-base $gray-darker $gray-dark $gray $gray-light $gray-lighter $brand-primary $brand-success $brand-info $brand-warning $brand-danger $state-success-text $state-success-bg $state-success-border $state-info-text $state-info-bg $state-info-border $state-warning-text $state-warning-bg $state-warning-border $state-danger-text $state-danger-bg $state-danger-border
See the Migrating from 2.x to 3.0 guide for CSS rules that changed in Bootstrap 3. Likewise, you can refer to the Migrating to v4 guide for updating CSS rules to Bootstrap 4.
Updating Font Awesome Imports
Font Awesome icons were moved to their own file (font-awesome.scss
) to avoid
the IE9 CSS selector limitation. If you include these imports in your
_custom.scss
file, you must remove them:
@import "aui/alloy-font-awesome/scss/mixins-alloy";
@import "aui/alloy-font-awesome/scss/variables";