v1.3.3
This release continues refining the soft launched shellbar
and also include enhancements and bug fixes.
Shell improvements
- The
shell
layout container replaces theui
- Height and background colors are global vars —
$fd-shell-header-height
,$fd-shell-header-background-color
- Same
--fixed
variants available
- Height and background colors are global vars —
- Button variant
$fd-button--shell
added for shell component buttons product-menu
shellbar component structure adds__control
wrapper and removes__titletext
and__titlearrow
elements- A
--shell
variant added tosearch-input
- Many
shellbar
updates- Logo can now be applied via CSS or an image, default is markup, CSS replacement should use modifier
--image-replaced
and the width and height must be set - Action classes simplified, use
fd-shellbar__action--collapsible
to set actions that should collapse for mobile, use--show-always
if the action should always show
- Logo can now be applied via CSS or an image, default is markup, CSS replacement should use modifier
CSS vars
- New
$fd-support-css-var-fallback
flag that can be enabled to output HEX value fallbacks for all CSS colors- Default is
false
- Apps that need IE11 support must generate their own CSS to use in their projects
- Default is
- Color mixin added
@mixin fd-var-color($property, $value, $var:null)
- Use like
@include fd-var-color("color", $fd-button-color, --fd-button-color);
- Use like
Enhancements
- Project workflow updated to gulp4
- Better RTL support for
button-group
- Identifiers now available in 7 sizes
Additions
- Indeterminate state for checkboxes
- Identifiers support background image
- A
counter
component to show unread or filtered counts - Lots of new helpers
- No border none on any side,
fd-has-border-bottom-none
, fd-has-border-begin-none` - Border color,
fd-has-border-color-accent-10
,fd-has-border-color-shell-1
- Flex
fd-has-align-items-flex-end
- Table text align nth cols,
fd-has-first-child-text-align-right
,fd-has-nth-child-9-text-align-right
- No border none on any side,