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.