Upgrade to 2.0.0
Removed SASS breakpoints
helper
Usage of breakpoints
helper for layouts
Remove the current @use
from your SASS:
_10@use '@kickstartds/core/source/core/breakpoint';_10_10.content {_10 @include breakpoint.media('>xl') {_10 --ks-spacing-xl: 8em;_10 }_10}
Replace it with a standard media query for this: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Like this:
_10@media (min-width: 75em) {_10 .content {_10 --ks-spacing-xl: 8em;_10 }_10}
Where xl
in our case equates to 75em
. You can use the CSS Properties generated for you, to help still writing maintainable media queries.
For example:
_10--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em"}';
Usage of breakpoints
helper for components
Remove the current @use
from your SASS:
_24@use '@kickstartds/core/source/core/breakpoint';_24_24.l-section {_24 --section-dark--headline-color: var(--color-white);_24 --section-dark--text-color: var(--color-grey-1);_24_24 --section--background-light: var(--color-grey);_24_24 &__container {_24 --l-section_col--min-width: 16rem;_24_24 .content & {_24 --l-section_col--min-width: 10rem;_24_24 @include breakpoint.media('>s') {_24 --l-section_col--min-width: 9rem;_24 }_24_24 @include breakpoint.media('>l') {_24 --l-section_col--min-width: 12rem;_24 }_24 }_24 }_24}
Replace it with:
_26@use '@kickstartds/core/source/core/container' with (_26 $name: 'section-content'_26);_26_26.l-section {_26 --section-dark--headline-color: var(--color-white);_26 --section-dark--text-color: var(--color-grey-1);_26_26 --section--background-light: var(--color-grey);_26_26 &__container {_26 --l-section_col--min-width: 16rem;_26_26 .content & {_26 --l-section_col--min-width: 10rem;_26_26 @include container.size('≥', 640px) {_26 --l-section_col--min-width: 9rem;_26 }_26_26 @include container.size('≥', 1024px) {_26 --l-section_col--min-width: 12rem;_26 }_26 }_26 }_26}
Or:
Search:
_10import { createContext, useContext } from 'react';_10/* ... */_10export const Consumption = (props) => {_10 const Component = useContext(ConsumptionContext);_10 return <Component {...props} />;_10};
and:
_10@use '@kickstartds/core/source/core/breakpoint';
Replace:
_10import { createContext } from 'react';_10import { withContainer } from '@kickstartds/core/lib/container';_10/* ... */_10export const Consumption = withContainer('consumption', ConsumptionContext);
and:
_10@use '@kickstartds/core/source/core/container' with (_10 $name: 'consumption'_10);