-
Removed node-sass package in favor of dart-sass.
-
Added support for CSS variables. Customization of your theme can now be done without using SASS.
-
Added
createColor()
function. It takes a color as a parameter and returns a formatted color based on the value of the$color-type
variable. Supported values are 'hsl', 'rgba' and 'hex'. This ensures consistency throughout the framework. -
Added
createHSLColor($color)
function. This accepts any CSS color value and returns the HSL equivalent. -
Added
createRGBAColor($color)
function. This accepts any CSS color value and returns the RGBA equivalent. -
Added
createHexColor($color)
function. This accepts any CSS color value and returns the HEX equivalent. -
Removed a handful of functions from _function.scss. See the deprecations section for a full list.
-
Added
$color-type
variable to _colors.scss. This variable controls the framework wide format for colors to be generated. Supported values are 'hsl', 'rgba' and 'hex'. -
Removed link and disabled from the
$color-palette
list. These colors still exist and can be referenced as per usual. -
Added new secondary color to the color palette.
-
CSS variables added for each color along with a lighter and darker version, a text color and an alert color.
-
Replaced most variables in _general.scss with CSS variables.
-
Added
has-no-transition
helper to the global helpers. It sets the transition property of an element to none. -
title and subtitle changed to heading and subheading. Variables updated to reflect this change.
-
Added the
is-subheading
modifier to replace thesubtitle
modifier. -
Controls for background and font color added to the hero__content and hero__footer element. Background color can no longer be set on the hero block.
-
Added a max width control to images within the top__brand element.
-
Various changes to the appearance of certain module elements.
-
Removed
color($key)
function. -
Removed
title-size($key)
function. -
Removed
has-bg-link
andhas-text-link
modifiers from the color module. -
Removed the set of
is-*-title
modifiers from the Typography module. -
Removed the
subtitle
modifier from the Typography module. -
Add CSS variable support to all modules. Refer to the documentation of each module for the list of CSS variables.
Variable | Module | Default value |
---|---|---|
$hero-background-color |
Hero | hsl(0deg, 0%, 100%, 1) |
$hero-color |
Hero | hsl(0deg, 0%, 22%, 1) |
$input-error-background |
Form | hsl(348deg, 100%, 58%, 0.2) |
$input-error-border-color |
Form | hsl(347deg, 100%, 58%, 1) |
$input-error-color |
Form | hsl(0deg, 0%, 22%, 1) |
$input-border-width |
Form | 1px |
$select-loading-speed |
Form | .8s |
$select-loading-width |
Form | 2px |
$select-loading-color |
Form | hsl(32deg, 12%, 82%, 1) |
$top-shadow |
Top (Navbar) | none |
$top-brand-color |
Top (Navbar) | inherit |
$top-brand-max-logo-width |
Top (Navbar) | 200px |
$top-link-background |
Top (Navbar) | hsl(0deg, 0%, 66%, 0.15) |
$top-social-hover-color |
Top (Navbar) | inherit |
$menu-list-background |
Menu | transparent |
$menu-list-hover-background |
Menu | hsl(0deg, 0%, 75%, 0.09) |
$menu-list-hover-color |
Menu | hsl(0deg, 0%, 22%, 1) |
$menu-divider-width |
Menu | 1px |
$menu-divider-color |
Menu | hsl(210deg, 16%, 92%, 1) |
$menu-expandable-border-width |
Menu | 1px |
$menu-expandable-border-color |
Menu | hsl(210deg, 16%, 92%, 1) |
$pagination-border-color |
Pagination | transparent |
$pagination-border-width |
Pagination | 1px |
$pagination-border-radius |
Pagination | 0 |
$pagination-hover-color |
Pagination | hsl(0deg, 0%, 22%, 1) |
$pagination-bordered-color |
Pagination | hsl(0deg, 0%, 22%, 1) |
$pagination-bordered-border-color |
Pagination | 4px |
$pagination-bordered-active-border-color |
Pagination | hsl(255deg, 73%, 58%, 1) |
$pagination-bordered-active-color |
Pagination | hsl(0deg, 0%, 100%, 1) |
$pagination-bordered-hover-background |
Pagination | hsl(0deg, 0%, 100%, 1) |
$pagination-bordered-hover-border-color |
Pagination | hsl(33, 12%, 72%, 1) |
$pagination-bordered-hover-color |
Pagination | hsl(0deg, 0%, 22%, 1) |
$accordion-border-width |
Accordion | 1px |
$accordion-border-color |
Accordion | hsl(0deg, 0%, 90%, 1) |
$accordion-title-background-color |
Accordion | transparent |
$accordion-content-color |
Accordion | hsl(0deg, 0%, 22%, 1) |
$accordion-content-background |
Accordion | hsl(0deg, 0%, 100%, 1) |
$alert-background-color |
Alert | hsl(0deg, 0%, 100%, 1) |
$alert-color |
Alert | hsl(0deg, 0%, 22%, 1) |
$button-hover-background |
Button | hsl(0deg, 0%, 100%, 1) |
$button-hover-color |
Button | hsl(0deg, 0%, 22%, 1) |
$button-rounded-radius |
Button | 6px |
$button-loading-speed |
Button | 0.8s |
$dropdown-color |
Dropdown | hsl(0deg, 0%, 22%, 1) |
$dropdown-border-width |
Dropdown | 1px |
$dropdown-border-color |
Dropdown | hsl(0deg, 0%, 80%, 0.34) |
$dropdown-link-hover-color |
Dropdown | inherit |
$image-thumb-border-width |
Image | 1px |
$image-thumb-border-color |
Image | hsl(33, 12%, 82%, 1) |
$modal-color |
Modal | hsl(0deg, 0%, 22%, 1) |
$table-background-color |
Table | hsl(0deg, 0%, 100%, 1) |
$table-color |
Table | hsl(0deg, 0%, 22%, 1) |
$tab-item-background |
Tabs | hsl(0deg, 0%, 100%, 1) |
$tab-item-active-background |
Tabs | hsl(0deg, 0%, 100%, 1) |
$tab-item-hover-color |
Tabs | hsl(234deg, 100%, 64%, 1) |
$tab-item-hover-background |
Tabs | hsl(0deg, 0%, 100%, 1) |
$tab-content-background |
Tabs | transparent |
$tab-content-color |
Tabs | hsl(0deg, 0%, 22%, 1) |
$secondary |
Colors | #ff5e82 |
$theme-font-color |
Base | hsl(0deg, 0%, 22%, 1) |
$theme-background-color |
Base | hsl(0deg, 0%, 100%, 1) |
Variable | Module | Replaced with |
---|---|---|
$select-arrow-height |
Form | - |
$input-border |
Form | $input-border-color $input-border-width |
$top-burger-height |
Top (Navbar) | - |
$menu-list-hover |
Menu | $menu-list-hover-background |
$menu-divider |
Menu | $menu-divider-color $menu-divider-width |
$menu-expandable-border |
Menu | $menu-expandable-border-color $menu-expandable-border-width |
$pagination-border |
Pagination | $pagination-border-color $pagination-border-width |
$pagination-rounded |
Pagination | $pagination-rounded-radius |
$pagination-bordered |
Pagination | $pagination-bordered-border-color |
$pagination-bordered-active |
Pagination | $pagination-bordered-active-background |
$pagination-bordered-hover |
Pagination | $pagination-bordered-hover-border-color |
$accordion-border |
Accordion | $accordion-border-color $accordion-border-width |
$button-border-style |
Button | - |
$button-text-align |
Button | - |
$button-loading-animation |
Button | $button-loading-speed |
$card-border-style |
Card | - |
$dropdown-border |
Dropdown | $dropdown-border-color $dropdown-border-width |
$dropdown-radius |
Dropdown | $dropdown-border-radius |
$dropdown-link-hover |
Dropdown | $dropdown-link-hover-background |
$image-thumb-border |
Image | $image-thumb-border-color $image-thumb-border-width |
$media-border-style |
Media | - |
$tag-border-style |
Tags | - |
$body-font-color |
Base | $theme-font-color |
Forgot to update version number in compiled css. This is a trivial patch - but it needs to be done.
Apologies for the necessary deprecations.
- Items within a list using the
is-inline-list
modifier will now wrap. - Added a top-margin of 0.3rem to
dt
elements that are preceded by add
element. This adds a little more breathing room. - Removed the _form.scss module. This should have been removed version 1.0.
- Removed bottom-margin from heading tags when used in a
top__brand
element. - Removed the redundant form/form.scss file.
- Removed absolute positioning from the
top__burger
element when theis-mobile-responsive
modifier is active. - Added 'square' to the
$image-square-sizes
list and removed the$image-square-size
variable. - Changed the default value of
$tab-border-radius
to 0. Previous value was 6px. - Added
is-loading
modifier to theis-select
container. - New form variable
$select-loading-animation
with value spinner .8s linear infinite. - New form variable
$select-loading-width
with value 2px. - New form variable
$select-loading-color
with value $light-grey.
- Tab list item padding was being applied to the
li
element instead of thea
element. All content within a tab list item must be placed within thea
element. - The
is-flex-start
grid modifier is now using thealign-items
CSS property instead ofalign-content
. - Menu list item padding was being applied to the
li
element instead of thea
element. All content within a menu list item must be placed within thea
element. - Removed the on hover underline for
a
elements inpagination
list items. - Pagination list item padding was being applied to the
li
element instead of thea
element. All content within a pagination list item must be placed within thea
element. - The
is-active
modifier now works ontop__burger
elements that do not have thehas-animate
modifier. - The
top__burger
element now appears vertically centered within the top bar. - The
is-mobile-response.is-open
modifier did not work on top elements with containers. This has been corrected. - Active list items within the
is-expandable
list now use the correct background color. - Button addon groups where taking up 100% width when nested within a button group. These have been corrected to auto width.
- Tag groups and addons now have 100% width.
- The
tabs__title
element will be removed this patch. Please use a regular list item or create your own title element. - The
tabs__item
element will be removed this patch. To create a tabs list item you only need a regularli
element within a list that contains thetabs__list
class. - The
has-borders
modifier in the tabs module has been replaced withhas-border
. - The
$tab-bar-color
variable will be removed and replaced with$tab-border-color
. The default value remains the same. - The
$tab-bar-width
variable will be removed and replaced with$tab-border-width
. The default value remains the same. - The
menu__slidedown
element will be removed this patch. Please use theis-expandable
modifier instead. - The
$menu-slidedown-border
variable will be removed this patch and replaced with$menu-expandable-border
. The default value remains the same. - The
$menu-slidedown-margin
variable will be removed this patch and replaced with$menu-expandable-margin
. The default value remains the same. - The
$menu-slidedown-padding-left
variable will be removed this patch and replaced with$menu-expandable-padding-left
. The default value remains the same. - The
$menu-slidedown-item-padding
variable will be removed this patch and replaced with$menu-expandable-item-padding
. The default value remains the same. - The
$image-square-size
variable has been removed. You can edit this value with the$image-square-sizes
variable instead.
- Add
$input-background-color
variable. Use this to override the default $white background color on form elements. - Add
$input-color
variable. Use this to override the default inherit text color on form elements.
- Corrected .top__links li element not applying by removing rogue comma.
- The
$top-link-hover-decoration
variable now applies to any nested link elements. .top__burger
now sits in the top right corner when the .is-mobile-responsive modifier is being used.
- Reorganised structure of the scss folder. Helpers have been moved into the base folder as these are all part of OrbitCSS's base core.
/helpers/general.scss
can now be found at/base/helpers.scss
.- An include all file has been added for each folder allowing developers to include the entire contents instead of each single file.
- The switch and slider elements have been separated into two modules independently from the general form module.
- The media module has been moved to the elements directory.
/navigation/navbar
has been renamed to/navigation/top
..has-start
,.has-centered
and.has-end
helpers have been added to the OrbitCSS global helpers. These will align child flex content using the CSSjustify-content
property.- Core functions and mixins moved to their own file at
/base/functions.scss
. - The
.has-padding-only-sides
global helper has been removed. Replace existing implementations withclass="has-no-padding-top has-no-padding-bottom"
. - New mixin
element-color
has been added. Read more about how to use it in the OrbitCSS documentation.
.has-centered
and.has-end
helpers have been removed from theul.is-inline-list
helper. As these are now global helpers, any previous use will function as normal and no changes are required.- All link elements now implement
text-decoration: underline;
on hover state. Previously this was controlled via use of the.is-hover-underline
helper. - Removed the
.is-hover-underline
helper.
- Form module has been split up unto three modules for the general form content, switch and slider.
- The
.is-small
helper for the switch module has been removed. If you still require this class you can copy the code from a previous version of OrbitCSS. - The
.upload
element has been removed. This should have never existed and predates initial OrbitCSS releases. Use the.is-file-input
element class instead.
.has-centered
and.has-end
helpers have been removed from the grid element. As these are now global helpers any previous use will function as normal and no changes are required.
.has-centered
and.has-end
helpers have been removed from the breadcrumb element. As this previously applied to the childul
element you will now have to add these helpers directly to theul
element. For example replace:
<nav class="breadcrumb has-centered">
<ul>...</ul>
</nav>
WITH
<nav class="breadcrumb">
<ul class="has-centered">...</ul>
</nav>
- Module renamed from navbar to top.
.has-centered
and.has-end
helpers have been removed from the top element. As this previously applied to the child.container
element (only when one was present) you will now have to add these helpers directly to the.container
element. For example replace:
<nav class="top has-centered">
<div class="container">...</div>
</nav>
WITH
<nav class="top">
<div class="container has-centered">...</div>
</nav>
- Added
$top-link-hover-decoration
variable. Allows you to add underline styling to top links. - Added
$top-link-hover-color
variable. Allows you to set a text color for links in the hover state. - Added
$top-link-active-background
variable. Allows you to set a background color for links that are in the active state via the is-active helper. - Moved the
.is-active
helper up to theli
element instead of the actuala
element. This allows for active styling to be applied to list items that are not actually links. - Removed the
.is-even
helper due to lack of browser support forjustify-content: space-evenly
. - Remove the
.is-neat
helper. It's use case was too specific. - Previously all
ul
elements would be hidden on small view ports. This is no longer the case and all elements are visible without the use of the.is-mobile-responsive
helper. - Added
$top-social-padding
variable. This is applied directly to the.top__social
element. - Overhauled the
.is-mobile-responsive
helper. All.top__links
and.top__social
elements will stack neatly when on small view port. Content can be triggered by adding.is-open
to the.top
element. - The
.top__burger
element has been overhauled. Only one span is required within the element:
<div class="top__burger">
<span></span>
</div>
- Added
$top-burger-padding
variable. This is applied directly to the.top__burger
element. - Removed the
$top-burger-bar-width
variable. - Added
$top-burger-bar-gap
variable. This defines the spacing between each of the bars in the burger. - Removed
.top__links--mobile
modifier. - Added the
.top__buttons
element. This will provide clean styling for buttons in the nav bar. - Added
$top-button-padding
variable. This is applied directly to the.top__buttons
element.
.has-centered
and.has-end
helpers have been removed from the pagination element. As these are now global helpers any previous use will function as normal and no changes are required.- Padding now applies to the
li
element instead of the nested link element.
- The
alert-color
mixin has been removed. Any implementation of it should now make use of the globalelement-color
mixin. - The
$alert-radius
has been updated to 0. This removes rounded corners on the alert element by default.
- The
button-color
mixin has been removed. Any implementation of it should now make use of the globalelement-color
mixin. .has-centered
and.has-end
helpers have been removed from the.is-button-group
and.is-addon-group
elements. As these are now global helpers any previous use will function as normal and no changes are required.
- The
.has-no-padding
helper has been removed from the card element. As this previously removed the padding from the child header, content and footer you will have to add.has-no-padding
to each of these elements individually. - Removed the
.card--modal
modifier. Card elements can now just be placed directly in the modal. - Removed the
.is-rounded
helper class and changed the default value of the$card-radius
variable to 0.
- The
$modal-overlay-background
variable can now be overridden. - Removed the
.card--modal
modifier. Card elements can now just be placed directly in the modal. - Removed the
.has-padding
helper from the.modal__content
element. Padding is now set as the default and can be overridden with the global.has-no-padding
helper. - Set the default value of the
$modal-radius
variable to 0.
.has-centered
and.has-end
helpers have been removed from the tabs element. As this previously applied to the child.tabs__list
element you will now have to add these helpers directly to the.tabs__list
element. For example replace:
<div class="tabs has-centered">
<ul class="tabs__list">...</ul>
</div>
WITH
<div class="tabs">
<ul class="tabs__list has-centered">...</ul>
</div>
- Remove the
.has-rounded-borders
helper from the.tabs__item
element. Border radius can now be controlled with the $tab-border-radius variable. - Added the
$tab-border-radius
variable with a default value of 0. This variable can be used to control the border radius of the tab list items.
- The
tag-color
mixin has been removed. Any implementation of it should now make use of the globalelement-color
mixin. .has-centered
and.has-end
helpers have been removed from the.is-tag-group
and.is-addon-group
elements. As these are now global helpers any previous use will function as normal and no changes are required.
- The
.link__list
a
styling has been moved to theli
element. This allows for list items that do not have links. The exception is.menu__slidedown
elements. The styling will isntead be inherited by the first child. - Remove the 100% width and no margin default that was applied to all buttons within a menu.
- Removed the
.is-open
modifier on the slide down menu. To trigger an open state; only the.is-active
modifier needs to be applied to the parent item. - Restructure to prevent nested content inheriting the properties of the core menu elements.
- Added
1rem
left & right padding to all 3 section sizes.
- Removed the
.is-open
modifier on the.accordion__content
element. To trigger an open state; the.is-active
modifier needs to be applied to a direct parent of the.accordion__content
element.
- Removed the
.has-scroll
helper. - Added
.is-table-container
element. Wrapping a table with this class will enable horizontal scrolling.
- Changed the default value of the
$dropdown-radius
variable to 0. - Removed the margin override from dropdown buttons.
- Flex is now only applied to elements with
.hero__content
who are a direct descendant of the.hero.is-full
element. - Using
.is-end
and.is-center
will only apply to direct descendants of the.card__footer
element and not all descendants. - Span and label styling is only applied to direct descendants of
.is-input-group
element. This was causing elements such as buttons using icons to display incorrectly.
- Corrected bottom margin when using multiple subtitles after a title element.
- Dropdown element arrow now calculating EMs based on font base size.
- Removed the margin on ul elements using the
.is-inline-list
helper. - Using the
.is-rounded
and.is-thumbnail
helpers together now forces the rounded border radius. - Avoid
.has-text-muted
being overriden by adding!important
.
- Added
.has-centered
and.has-end
alignment helpers for the ul element. - Added
.has-no-padding-left
and.has-no-padding-right
general helper classes. - Added pointer cursor to the burger menu.
- Changed the structure of the
.button--close
element to support color inheritance.
Variable | From | To |
---|---|---|
$button-cross-width
|
2px
|
1px
|
$button-cross-color
|
$white
|
inherit
|
$button-cross-height
variable.
$dropdown-radius
now actually changes the border radius for a dropdown element.$tag-addon-radius
now controls the border radius for tags in addon groups.$slider-track-height
now correctly sets the height for thesliderTrack()
mixin.- Remove redundant
$top-burger-bar-width
variable from the navbar module. $subtitle-color
now editable.- Burger menu now has the correct width when
.is-active
helper is active. - Labels and spans in input groups now resize correctly when the
$font-base
variable is changed. - Switches now resize correctly when the
$font-base
variable is changed. - Corrected padding on the dropdown element when the
.has-arrow
is active and the$font-base
variable has been changed. - Corrected positioning of select element's arrow when the
$font-base
variable has been changed.
- Removed
margin-right
from any button using the.is-full
helper in a button group. - Added the
$label-font-size
and$label-line-height
variables for form label customization.
Variable | From | To |
---|---|---|
$label-font-size
|
|
calculateRem(16)
|
$label-line-height
|
|
1.6
|
- The
.is-small
helper for the switch element will be removed in version 0.5.0. The small version of the switch does not benefit the framework and is too specific.
- Move the
a
element intotypography.scss
.
- Fix
.has-link-inherit
not applying to deeper nested links. - Correct typo in changelog for v0.4.1.
- Add
.is-active
helper to button element. - Add
.is-flex-start
helper to the grid element. - Add
.has-link-inherit
helper to force child link elements to inherit the text color of the parent. - Add
.is-hover-underline
helper. - New variable
$list-item-padding
to set the padding onli
elements in ordered and unordered lists. - Add
.is-inline-list
helper to the unordered list element. - Set burger bar color based on border color instead of background color.
- Make
$card-header-color
variable overridable. - Fix border display on focus state for form elements within an input group.
- Fix variable height bug for form elements within an input group in Chrome.
- Nested unordered lists no longer inherit the
list-style-type
styling of a parent unordered list with the.has-no-list-style
helper.
$top-burger-bar-width
variable.
Variable | From | To |
---|---|---|
$list-item-padding
|
|
0
|
$top-burger-bar-height
|
2px
|
1px
|
$top-burger-color
|
$white
|
inherit
|
Before upgrading check the use of the .is-{size}-only
and .is-{screen}-offset-{size}
helper classes throughout your code and update as per the below improvements.
- Change column offset responsive helpers to read
.is-offset-{screen}-{size}
instead of.is-{screen}-offset-{size}
. - Change all of the responsive
.is-{screen}-only
helpers to display only for the given view port (not larger). - Add
.is-tablet-up
helper to display on the medium and up viewport. - Add
.is-tablet-down
helper to display on the medium and small viewports. - Add
.is-desktop-up
helper to display on the large and up viewport. - Add
.is-desktop-down
helper to display on the large, medium and small viewports. - Add
.is-desktop-auto
helper. - Add
.is-desktop-x-auto
helper. - Create the
column-size()
mixin to make column sizing easier to manage. - Reduce overall size of
orbit.css
andorbit.min.css
.
- Fix typo in the column offset responsive helpers.
- Correct class name for the
.has-no-wrap
helper. - Add
padding-right
to select element to prevent text/arrow overlap.
- Add
.has-no-wrap
helper class. Applieswhite-space: nowrap
. - Add border radius to the
.card__header
and.card__footer
elements when the card block has the.is-rounded
modifier. - Add
$card-header-color
variable.
- Remove the
.is-reversed
grid modifier.
Variable | From | To |
---|---|---|
$breadcrumb-disabled-color
|
lighten($dark-grey, 35%)
|
$muted
|
$card-header-color
|
|
$black
|
- Fix the double scrolling issue when using cards in a modal.
- Add
!default
to all custom variables that are missing this.
- Add
position: relative
to.card__content
class. - Make the modal module mobile-first.
- Add the
$input-border-radius
variable for all input, textarea and select elements. - Improve the
.is-checkbox
and.is-radio
elements to prevent wrapping. - Make the grid module mobile-first.
- Add the
$pagination-background
variable. - Add the
$pagination-bordered-background
variable. - Make the pagination module mobile-first.
- Add
$medium
variable. - Add
$large
variable. - Add
$x-large
variable. - Add
.is-desktop-x-{size}
grid classes. - Add
.is-desktop-x-only
class. - Add
.is-tablet-only
class.
$medium-min
variable.$large-min
variable.
Variable | From | To |
---|---|---|
$small-max
|
768px
|
767px
|
- Correct the flex-flow for the
.tabs__list
element. - Correct the flex property for the
.grid .column
element. - Fix
.is-loading
spinner display issue on Chrome/Safari.
- Force 100% width for modals of all sizes on mobile viewport.
- Add the
$accordion-background
variable. - Add
$custom-palette
variable to support extending the$color-palette
variable.
- Improve flex properties for the
Card
element. - Add
.is-shrink
class to the.card
element. - Improve flex properties for the
Breadcrumb
element to ensure additionalul
elements are not inline. - Move the
.has-centered
and.has-end
from theul
element to the.breadcrumb
element. - Improve flex properties for the
Alert
element. - Add transparent background to buttons with the
.is-outline
helper class. - Improve flex properties for the
Grid
system. - Add
.is-mobile-auto
helper class to allow for equal width columns on smaller views. - Add flex properties to the
.is-checkbox
and.is-radio
elements. - Improve flex properties for the Hero element.
- Improve flex properties for the
Image
element. - Improve flex properties for the
Media
element. - Remove width property from
.menu
element. - Improve flex properties for the
Modal
element. - Improve flex properties for the
Top
element. - Improve flex properties for the
Tabs
element. - Reorder color variables to support simpler customization.
- Remove the $container-max-width variable.
Variable | From | To |
---|---|---|
$container-padding
|
10px
|
20px
|
Variable | From | To |
$menu-slidedown-border
|
1px solid #e9ecef
|
1px solid $light-grey
|
- Removed the previously depreciated class .is-mobile-column from grid.sccs.
- The
.is-outline
class for the.tabs__item
element has been removed.
- Fix put in place to correct the display issue for
.is-loading
buttons on mobile view.
- Added styling for
.tabs__item:hover
. - Removed the padding from
.containers
on mobile viewport. 100%
width has been added back to the.container
element.- Added the
.is-mobile-shrink
and.is-desktop-shrink
column classes. - Changed
.margin-top
property to-0.4em
for both.is-select::after
and.has-arrow::after
. - Changed
width
andheight
properties to0.625em
for.has-arrow::after
. - Flex properties added to the
.card
element to ensure.card__content
grows to available space. - Added
$white
background to all form elements. - The
.box-sizing: border-box
property has been applied to all elements.
- The
.is-outline
class for the.tabs__item
element will be removed in the next patch. Has currently been removed from the documentation.
Variable | From | To |
---|---|---|
$select-arrow-height
|
0.375em
|
0.625em
|
$select-arrow-width
|
0.375em
|
0.625em
|
- Reorder grid sizes to ensure desktop columns are given priority
- Remove 100% width from container
- Fix calcColWidth() function converting units to string.
- Set default input and select border radius to 0. Select elements had rounded borders on Safari.
- Move accordion.scss to to the elements directory.
- Added calcColWidth(int) function to the grid.
- Add column support for the desktop viewport.
- Added padding to the container element on small viewports.
- Added a default statement to the
$title-font-family
variable.
- Added support for a
.is-mobile-column
class. Prevents a column with no pre-defined size from taking on 100% width on mobile devices.
- Changed CSS ordering to prevent grid visibility overriding the helper visibility classes
- Fixed mobile only column display issue
- Added a
.has-no-list-style
class forul
elements. - Changed
$card-padding
variable to$card-header-padding
.