Tags: fluid-framework/Fluid
Tags
🎐 v0.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 ➕⚠️ Add Exporimental `.scrollbar` to add custom designer scrollbar ➕⚠️ Add is-loading for containers 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-border`with default value`shadow`✏️ Rename`\$design-solid-else-gradients`to`\$design-solid-or-gradients`with default value to`solid`✏️ Rename`\$enable-prefers-reduced-motion-media-query`to`\$enable-prefers-reduced-motion-mediaQuery`✏️ Rename`\$design-rounded-else-box`to`\$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 🔖
🎐 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 ➕
🎐 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 💅: 🆙 Update `.switch` control design 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 👨💻:↔️ Split Color variants onto separate block↔️ Split class level `cursor:pointer` style from elements
🎐 v0.16.1 Add: ➕ 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`↔️ Split %controls placeholder into fragments to remove unnecessary styles
🎐 v0.16.0 Added ➕ styles for <select> using class .input Fixes 🔨 IE form validation icons by change outer quote marks to `"` 🔨 Fix range styling for touch devices - Touch webkit devices does not trigger focus state that's why use active state and focus state for styling Changes ↪️rename fluid-sanitize-lease to fluid-bugs - to easier understand the purpose of file 🆙 encode < > # in svg background-image icons for compatibility 🆙 Apply readonly state styles only on <input> and <textarea> - to prevent triggering disabled styles on <select> in webkit browsers Removed 🔥 Unnecessary .input form validation specifiers 🔥 padding to expand range component to full width 🔥 readonly attribute specifiers 🔥 readonly .input box-shadow:none - to have universal similar looks like disabled styles Dev ➕ 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
🎐 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