Releases: fluid-framework/Fluid
0.20.2
Added :
➕ Add fillout button
➕ Animate the movement of menu-trigger
's caret
➕ Unstyle .menu-item
➕ Add font-sizing function make control font where mixin cant be used
➕ Add reverse-responsive
key in generate-stlye
to reverse responsive media query
➕ Add heading classes for font sizing similar to h1 h2 h3 h4 h5 h6
➕ Add is-unstyle
.button and .input classes
➕ Add .grid.is-adjust
class to add negative margins on grid column
➕ Add responsive position Classes
➕ Add auto Utility for z-index
➕ Add more z-index utilities to have fine grain control over z-index
➕ Add two different variables to independently control how the breakpoints are prefixed
➕ 🔖 Add variable $enable-experimental-css
to disable experimental css features
➕ 🔖 Add $menu-item-border-direction
and $menu-item-themes-generate
➕ 🔖 Add font-family to control button font
➕ .scrollbar
to add custom designer scrollbar
➕
Update :
🆙 convert grid offset to utility offset
🏇 simplify .btn.is-out.is-(color)
style
🆙 %controls placeholder no longer overide color
property this allows controls like .btn.is-min
.btn.is-out
to inherit color from their parent resulting in more flexible layout designing
🆙 add background color in scrollbar to make its scrollbar area visible
🆙 Use $light
background color for group .addon
🆙 Use white background for body
and lyt-main
🆙 Use $fontweight-bold
for headings
🆙 Disabled Color
🆙 Tweak dark Color in theme
🆙 Better approach for .btn.is-circle
🆙 Increase hr line opacity
🆙 use txt-(left|right) utility to align text in divider
🔨 .divider
::before and ::after height should be 100%
Removed :
🔥 remove never used function str-capitalize
🔥 remove testing code
🔥 Remove heading color
Fixes :
🔨 remove unknown constant from expression
🔨 do not override menu-trigger
display property
🔨 🆙 selector-max-class
value from 4 to 5
🔨 Align breadcrumb items in center
🔨 shrink .column to only available space when no width is defined
🔨 Fix inconsistant naming convention
🔨 Fix .input focus color not differentiating
🔨 fix .dropdown.is-top
to .dropdown.is-up
🔨 Fix uneven round spinner in loading animation
Design :
💅 darken gray-100
💅 use lighter color for pre > code
💅 Use transparency on .menu-items
for better UI attachment
Dev :
✏️ Rename $breakpoints-readable-else-short
to \$breakpoints-short-or-readable
with default value short
✏️ Rename $design-rounded-else-sharp
to $design-rounded-or-sharp
with default value rounded
✏️ Rename $design-shadow-else-border to
$design-shadow-or-borderwith default value
shadow✏️ Rename
$design-solid-else-gradientsto
$design-solid-or-gradientswith default value to
solid✏️ Rename
$enable-prefers-reduced-motion-media-queryto
$enable-prefers-reduced-motion-mediaQuery✏️ Rename
$design-rounded-else-boxto
$design-rounded-else-sharp`
v0.20.0
Breaking Changes:
💥 Change Spacing Classes
Added:
➕ New Vertical Divider using utility is-y
➕ Add .file
control validation
➕ Add color transition in .btn.is-min
bottom border this will allow bottom border to slowly transit even when clr utility is used over .btn
➕ reset vertical align from svg inside .icon
Changes:
🆙 .divider
component no longer override color
and line-height
🆙 shorten screen-reader object to sr
🆙 Use on for events
e.g on-hover
for css modifier in dropdown
🆙 use li
element instead of .list-item
class
Removed:
🔥 New divider already have its spacing so no need to override in menu
Design:
💅 Update Divider design
💅 darken light
theme color
Fixes:
🔨 Use inline-flex instead of flex in menu-trigger
and dropdown-trigger
to avoid glitching with other elements
🔨 remove un-necessary .dropdown-items
selector
🔨 Use !optional
in group placeholder because mixin doesn't exist when $design-rounded-else-box
is set to false
🔨 Fix Overlay z-index
v0.19.0
Breaking changes:
🆙 💥 Use class .Label
instead of label element to style controls like radio, switch, file and input floating labels for better web standards and web accessibility
Removed:
🔥 Remove padding from lyt-sidebar
to let user have control over it properly
🔥 remove custom padding from .menu
🔥 Remove unnecessary .btn.is-min
theme variant style
Fix:
🔨 Fix .lyt-header.is-collapsed
not working
🔨 .menu-items
not inheriting font-size
🔨 not inheriting color in .menu
when using color utilities
🔨 Add padding in nested menu items to prevent text from going into overflow area
Added:
➕ 🚀 Add NEW dropdown menu component
➕ Add border-hide
utility to hide border using transparent color
➕ Add border-(direction)-none
utilities to remove border from specific direction
➕ Change header and sidebar color based on $design-theme
➕ Add active state of btn.is-min
Updated:
🆙 Set text-align:start
on root to support RTL languages
🆙 🔀 Rearrange Theme colors to change there cascading priority
🆙 include all src and dist files in NPM package
🆙 Align icon in center when parent has display:flex
🆙 Flexible header height and flex wrap
🆙 Update From bootstrap reboot (twbs/bootstrap#29455)
🆙 override styles instead of increasing specificity, to make style overridable
🆙 lyt-sidebar
are static by default, they can be made fixed using using fixed
utility class.
🆙 Lighten .menu-item Background color
🆙 inherit text-align
value in menu-item rather than explicit overriding
🆙 Use display:block
on menu-items instead of flex to support text-align
utility
🆙 Apply animation on menu items only if they were with .menu-trigger
🆙 Apply nested menu styles on direct child this will allow menu style to stop conflicting inside other components and universal selector *
to be limited to direct children
🆙 Decrease nested menu animation duration
🆙 Increase before border-color transition duration in .menu-item
to shorten and decrease chances of user specifies value more than transition duration
🆙 use scale to flip caret in menu instead of rotate
Design:
💅 Don't override text color
in menu-item
Dev:
➕ Add fill-direction
parameter for @mixin animation
🔖 Add variables $menu-trigger-caret-color
and $menu-divider-padding
🔖 Add variables for nested Menu animation duration $$nestedMenu-animationduration
🔖 rename variable $nestedMenu-marginleft
to $nestedMenu-indent
🔖 rename $button-transition-minimal
to $button-transition-minimal-before
to be more specific in naming convention
🔖 🔨 Fix variable name from bg to background
🔖 🔀 Arrange and reorder setting variables in menu
➕ ✅ Test for invalid @function clr-step
values
🆙 Make Triangle shape size equal to the size specified preventing extra style to used to align middle
📦 Update package find-unused-sass-variables
v0.18.0
Breaking Changes:
💥 grid column classes now use standard width utilities to control their sizing
💥 Serve .addon
as a standalone to be used as just as "controls like" wrapper
💥 Use has
for grid gap utility
💥 Use border
in border utilities instead of brdr
💥 Use is
for visibility styles
Added:
➕ Add responsive width sizing classes
➕ Add Responsive flex-direction Utility
➕ Variable $main-background
➕ Add Variable $disabled
to globally control disabled color
➕ Add Variable $pre-code-borderleft
➕ 🚀 Add Support for constant property value in $properties for generate-style
➕ Support multiple
and size
attribute on .select
Dropped:
💧 Drop Styling anchor addon in favor of btn and other styling classes
Remove:
🔥 Remove Unnecessary opacity: inherit
🔥 Remove Unnecessary !important
from disabled controls like radio, switch and checkbox
🔥 Remove Unnecessary placeholder %controls-disabled
from label
🔥 remove Unnecessary placeholder %controls-hover
in .input
🔥 Remove Unnecessary Temporary variable
🔥 Remove Unnecessary need for %clearfix
placeholder
🔥 Remove Unnecessary transition in .btn.is-min
🔥 Remove bugs placeholder as they doesn't offer much improvement
Fixes:
🔨 Fix .menu
default color theme
🔨 Fix input.has-icon.is-(theme)
padding inside group
🔨 Fix width issue when controls like radio and checkbox placed inside group addon
🔨 Fix rounded corner of .input.is-min
in group > control
🔨 Fix various variable naming inconsistency
🔨 Fix missing content inside source maps
🔨 Remove blue background from .select:focus
in IE
Changes:
🆙 do not override input background in has-floating-label
🆙 Use Placeholders in .group
to combine selectors
🆙 change radio
and switch
visual appearance only when value changes
🆙 Change .column
to use width
instead of max-width
🆙 Override label margin-bottom for .file
🆙 Use quoted string value for selector in utilities
🆙 Use %placeholders to combine various single property styles
🆙 Use important for .float
display property …
Design:
💅 Tweak Input icon position
💅 Slightly tweak checkbox checked arrow position
v0.17.0
Changes:
🆙 Update Animation name from pulse
and pulse solid
to ripple
and ripple-gray
respectively
🆙 Improve .Switch
Control
🆙 Use correct variable for padding-left
in %controls-label
🆙 Remove margin-bottom
from label
when used with .control
🆙 Use Display Flex to center align range thumb on its track
🆙 add margin-left to divider only if it has some content
🆙 Align .divider
using Flex properties
🆙 👨💻 Use convert-unit for calculation in .btn.is-min
🆙 👨💻 Use internal @function font size
Removed:
🔥 Remove margin from %controls
🔥 Remove RFS fluid font implementation
Design:
💅 Redesign .switch
control
Added:
➕ Add Menu Component
➕ Add default font size variable to Options
➕ Add fallback property work-wrap
in code
and .text-break
for IE
➕ 👨💻 Add Variable $border-radius-circle
Fixes:
🔨 Fix .btn.is-circle
shape In React
🔨 .divider
line opacity
🔨 Fix .input.is-min height
🔨 work around to fix source maps content not showing in debugger
🔨 ↪️ Revert hr element to bootstrap (inconsistent size still exist)
Dev:
cursor:pointer
style from elements
v0.16.1
Added:
➕ Divider Object
➕ Support for file inputs
➕ align .input content in center when used on other than input tag
➕ Grid column spacing/gap classes to modify spacing/gap between column on fly
Updates:
🆙 Do not override property value from animations
🆙 do not add border-radius to .is-min styles controls
🆙 btn min redesign
🆙 support disabled state on every anchor tag
🆙 reset before transform on loading elements so that loading animation is not effected by it
🆙 align feedback triangle shape by top rather than bottom
🆙 align label::before in middle
🆙 Center align content in .addon
🆙 Apply states to addon only if its a anchor tag
🆙 decrease icon size to 1em so that layout is not affected when placed inside component e.g button
🆙 Add cursor pointer for select tag
🆙 improve .switch style and visual appearance accessibility
🆙 apply cursor: pointer
to .control only if its a label tag this prevents misleading user to interactable area of the control without wrapped in label
🆙 tweak icon caret-down
path
🆙 Use data attribute instead of custom fluid attribute
🆙 tweak checkbox-checked-arrow-top position
🆙 make %controls-label ::after and ::before align to label position
🆙 Set IE clear field button color so that it is not affected by .input color
🆙 Add padding only when label is not empty
Fixes:
🔨 missing opacity 0 utility class
🔨 .input hover state box-shadow transition
🔨 hover boxshadow not showing on .has-floating-label
🔨 Fix inconsistent hr size when used with size attribute
Remove/Drop:
🔥 height: 100% from %controls-labels (#e9e4cb6)
💧 .input.unstyle
class
💧 🔥 remove 30% spacing classes
Dev Changes :
➕ @function convert-unit to handle units conversion
➕ $enable-debugging
Variable to suppress @debug and @warn messages
➕ Shadows Variables to control shadows globally
➕ ✅ when keyframe name exist but not its keyframes value🔀 move nuke margin style from sanitize to elements
➕ Add caret-down icon source file
🆙 avoid overiding extra css properties in triangle shape
🆙 separate has-floating-label styles to have an effect in IE 11
🆙 avoid adding extra box-shadow override in .btn.is-sld
🆙 ✅ show name of the keyframe whose value is not found
🆙 Use Correct .group margin dependent variable
🔀 move .control base styles at top
🔀 move feedback style out of .control context
🔀 move style to their relative context
↪️ rename variable $icon-size to $icon-area
↪️ rename icon variables caret
to caret-down
v0.16.0
# Added ➕ styles for select tag using class .input # Fixes 🔨 IE form validation icons by change outer quote marks to `"` 🔨 Fix range styling for touch devices # Changes ↪️rename fluid-sanitize-lease to fluid-bugs 🆙 encode < > # in svg background-image icons for compatibility 🆙 Apply readonly state styles only on input tag and textarea tag # Removed 🔥 Unnecessary .input form validation specifiers 🔥 padding to expand range component to full width 🔥 readonly attribute specifiers 🔥 readonly .input box-shadow:none # Devs ➕ add `-moz-appearance` property to test correctly on Browser stack 🆙 @function str-replace can search and replace using Maps 🔀 place %input-state with controls placeholder as %controls-validation-icon 🔀 Use select caret styles onto element directly 🔀 import icons at last to inherit %controls variables 🔀 rearrange .input styles ↪️ Rename icon variables to there respective shape
v0.15.0
Addition
➕ range component (#45)
➕ New switch input by using .switch class on checkbox type inputs
➕ Checkbox form validation
➕ add padding right for inline controls to add extra spacing in inline inputs
Fixes:
➕🔨 Sanitize: Inherit correct box sizing in IE and EDGE Range input
➕🔨 Sanitize: Remove the dropdown arrow in Chrome from inputs built with datalists
🔨 disabled opacity on %controls-label in IE
🔨 resizing %controls-label (checkbox,switch,radio) not work in IE
🔨 fix pulse animation in %controls-label (radio, checkbox, switch)
🔨 tweak switch circle size
Updates:
🆙 Use Cascading for active styles instead of !important in %controls (button, input, group-addon, range)
🆙 em units in checkbox and radio
Dropped:
🔥 remove unique disabled style from checkbox