Release Notes v1.4.1
Announcing the next version of the Pro framework – Propeller Pro V 1.4.1. This version includes SCSS Enhancements and few bug fixes.
Below is the list of major highlights from Propeller Pro 1.4.1:
Highlights:
SCSS
- Added the variables
$display2-letter-spacing
,$display1-letter-spacing
to set the letter spacing property in the.pmd-display1
and.pmd-display2
classes. - Added
.pmd-caption
class in the typography component. - Added the variables
$pmd-icon-circle-size, $pmd-icon-circle-size-xs, $pmd-icon-circle-size-sm, $pmd-icon-circle-size-md, $pmd-icon-circle-size-lg, $pmd-icon-circle-size-xl
to set the size of the circles around the icons based on the size of the icon. - Added the variable
$nav-tabs-link-active-bar-height
to set the height of the active bar. - Added the variables
$navbar-toggler-icon-height, $navbar-toggler-icon-width, $navbar-toggler-icon-font-size
and$navbar-toggler-bg
to set the height, width, font size and background color of the Hamburger icon respectively. - Added the variables
$sidebar-scrollbar-bg, $sidebar-scrollbar-width, $sidebar-scrollbar-border-radius, $sidebar-scrollbar-thumb-bg
and$sidebar-scrollbar-thumb-border-radius
to set the background color, width, border-radius of the scrollbar and the thumb in a sidebar respectively. - Added the variables
$list-group-item-line-height
to set the line height of the list item. - Added the variables
$accordion-heading-color, $accordion-heading-font-size
and$accordion-heading-font-weight
to set the color, font size and font weight of the accordion headings respectively. - Updated the default value of
$card-spacer-y
,$card-spacer-x
and$card-spacer
from$space16
to$space24
for the desktop device. So now the by default card spacing is 24px instead of 16px in the desktop view. And added the variables$card-spacer-y-sm, $card-spacer-x-sm
and$card-spacer-sm
to set the spacing in the mobile view. - Changed the Rating component CSS to SCSS.
- Fixed the issue of images getting squeezed in the Rating with Different Icons in Mobile Device.
- Changed CSS to SCSS of the card examples - Progress Card and Image Overlay
- Added variables to set the
$pmd-title-separator-margin-top, $pmd-title-separator-margin-bottom
and$card-title-separator-border-radius
to set the margin-top, margin-bottom and border radius of the.pmd-title-separator
and.pmd-title-separator-right
class in the card component. - Added variables
$pmd-floating-icon-bg, $pmd-floating-icon-height, $pmd-floating-icon-width, $pmd-floating-icon-padding, $pmd-floating-icon-font-size, $pmd-floating-icon-size, $pmd-floating-icon-bottom, $pmd-floating-icon-right, $pmd-floating-icon-left
and$pmd-floating-icon-top
to set the background-color, height, width, padding, font-size, icon-size and the position of the floating icon in a card. - Added variable
$pmd-floating-content-spacer
to set the position of the.pmd-floating-content-{tc,tl,tr,bc,br,bl}
in the.pmd-floating-content-wrapper.
- Added variables
$social-icon-top-margin, $social-icon-margin-x, $social-svg-icon-color, $social-svg-icon-width
and$social-svg-icon-hover-color
to set the top margin, horizontal-margin, color, width and hover color of the social svg icons used in the card component. - Added variables
$pmd-list-bullet-icon, $pmd-list-bullet-icon-padding-left
and$pmd-list-bullet-icon-opacity
to create a list with bullet icons.
Added
SCSS
- Added the variables
$display2-letter-spacing
,$display1-letter-spacing
to set the letter spacing property in the.pmd-display1
and.pmd-display2
classes. - Added
.pmd-caption
class in the typography component. - Added the variables
$pmd-icon-circle-size, $pmd-icon-circle-size-xs, $pmd-icon-circle-size-sm, $pmd-icon-circle-size-md, $pmd-icon-circle-size-lg, $pmd-icon-circle-size-xl
to set the size of the circles around the icons based on the size of the icon. - Added the variable
$nav-tabs-link-active-bar-height
to set the height of the active bar. - Added the variables
$navbar-toggler-icon-height, $navbar-toggler-icon-width, $navbar-toggler-icon-font-size
and$navbar-toggler-bg
to set the height, width, font size and background color of the Hamburger icon respectively. - Added the variables
$sidebar-scrollbar-bg, $sidebar-scrollbar-width, $sidebar-scrollbar-border-radius, $sidebar-scrollbar-thumb-bg
and$sidebar-scrollbar-thumb-border-radius
to set the background color, width, border-radius of the scrollbar and the thumb in a sidebar respectively. - Added the variables
$list-group-item-line-height
to set the line height of the list item. - Added the variables
$accordion-heading-color, $accordion-heading-font-size
and$accordion-heading-font-weight
to set the color, font size and font weight of the accordion headings respectively. - Added variables to set the
$pmd-title-separator-margin-top, $pmd-title-separator-margin-bottom
and$card-title-separator-border-radius
to set the margin-top, margin-bottom and border radius of the.pmd-title-separator
and.pmd-title-separator-right
class in the card component. - Added variables
$pmd-floating-icon-bg, $pmd-floating-icon-height, $pmd-floating-icon-width, $pmd-floating-icon-padding, $pmd-floating-icon-font-size, $pmd-floating-icon-size, $pmd-floating-icon-bottom, $pmd-floating-icon-right, $pmd-floating-icon-left
and$pmd-floating-icon-top
to set the background-color, height, width, padding, font-size, icon-size and the position of the floating icon in a card. - Added variable
$pmd-floating-content-spacer
to set the position of the.pmd-floating-content-{tc,tl,tr,bc,br,bl}
in the.pmd-floating-content-wrapper.
- Added variables
$social-icon-top-margin, $social-icon-margin-x, $social-svg-icon-color, $social-svg-icon-width
and$social-svg-icon-hover-color
to set the top margin, horizontal-margin, color, width and hover color of the social svg icons used in the card component. - Added variables
$pmd-list-bullet-icon, $pmd-list-bullet-icon-padding-left
and$pmd-list-bullet-icon-opacity
to create a list with bullet icons.
Fixed
SCSS
- Updated the default value of
$card-spacer-y
,$card-spacer-x
and$card-spacer
from$space16
to$space24
for the desktop device. So now the by default card spacing is 24px instead of 16px in the desktop view. And added the variables$card-spacer-y-sm, $card-spacer-x-sm
and$card-spacer-sm
to set the spacing in the mobile view. - Changed the Rating component CSS to SCSS.
- Fixed the issue of images getting squeezed in the Rating with Different Icons in Mobile Device.
- Changed CSS to SCSS of the card examples - Progress Card and Image Overlay
Docs
- Added the example of
.pmd-caption
class in the typography page.