diff --git a/.stylelintrc.json b/.stylelintrc.json index 6fe824721b..7fc88b02f9 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -3,6 +3,7 @@ "plugins": ["stylelint-scss"], "rules": { "at-rule-no-unknown": null, + "property-no-unknown": null, "at-rule-empty-line-before": [ "always", { @@ -28,7 +29,7 @@ "scss/at-import-no-partial-leading-underscore": true, "scss/at-mixin-argumentless-call-parentheses": "always", "scss/at-mixin-parentheses-space-before": "never", - "scss/at-rule-no-unknown": true, + "scss/at-rule-no-unknown": null, "scss/declaration-nested-properties-no-divided-groups": true, "scss/declaration-nested-properties": "never", "scss/dollar-variable-colon-space-after": "always", diff --git a/packages/common-css/src/_common-mixins.scss b/packages/common-css/src/_common-mixins.scss index aa8fd02cbc..f23ecc7f14 100644 --- a/packages/common-css/src/_common-mixins.scss +++ b/packages/common-css/src/_common-mixins.scss @@ -341,46 +341,6 @@ @content; } -// Content paddings -@mixin sap-set-content-paddings($type, $value) { - @if ($type == 'home') { - padding-left: map-get($sap-content-paddings-home, $value) !important; - padding-right: map-get($sap-content-paddings-home, $value) !important; - } @else if ($type == 'container') { - padding-left: map-get($sap-content-paddings-container, $value) !important; - padding-right: map-get($sap-content-paddings-container, $value) !important; - } @else { - padding-left: map-get($sap-content-paddings-nav, $value) !important; - padding-right: map-get($sap-content-paddings-nav, $value) !important; - } -} - -@mixin sap-set-dynamic-content-paddings($type) { - @include sap-media-sm() { - @include sap-set-content-paddings($type, 'sm'); - } - - @include sap-media-md() { - @include sap-set-content-paddings($type, 'md'); - } - - @include sap-media-lg() { - @include sap-set-content-paddings($type, 'lg'); - } - - @include sap-media-xl() { - @include sap-set-content-paddings($type, 'xl'); - } -} - -@mixin sap-content-paddings($type: home, $size: default) { - @if ($size == default) { - @include sap-set-dynamic-content-paddings($type); - } @else { - @include sap-set-content-paddings($type, $size); - } -} - // Flex @mixin sap-flex($direction: row) { display: flex; @@ -659,6 +619,60 @@ } } +@mixin sap-media-from($width) { + @media screen and (min-width: $width) { + @content; + } +} + +@mixin sap-media-until($width) { + @media screen and (max-width: $width) { + @content; + } +} + +// Container Queries +@mixin sap-container-type($type: normal) { + container-type: $type; + @content; +} + +@mixin sap-container-query-from($width) { + @container (min-width: $width) { + @content; + } +} + +@mixin sap-container-query-until($width) { + @container (max-width: $width) { + @content; + } +} + +@mixin sap-container-query-sm() { + @container (max-width: 599px) { + @content; + } +} + +@mixin sap-container-query-md() { + @container (600px <= width <= 1023px) { + @content; + } +} + +@mixin sap-container-query-lg() { + @container (1024px <= width <= 1439px) { + @content; + } +} + +@mixin sap-container-query-xl() { + @container (min-width: 1440px) { + @content; + } +} + // Paddings @mixin sap-set-padding-all($value: 0) { padding: $value; @@ -763,6 +777,68 @@ } } +@mixin sap-padding-container-responsive() { + @include sap-container-query-sm() { + @include sap-padding(small, x); + @include sap-padding(0, y); + } + + @include sap-container-query-md() { + @include sap-padding(medium, x); + @include sap-padding(0, y); + } + + @include sap-container-query-lg() { + @include sap-padding(medium, x); + @include sap-padding(0, y); + } + + @include sap-container-query-xl() { + @include sap-padding(large, x); + @include sap-padding(0, y); + } +} + +// Content paddings +@mixin sap-set-content-paddings($type, $value) { + @if ($type == 'home') { + padding-left: map-get($sap-content-paddings-home, $value) !important; + padding-right: map-get($sap-content-paddings-home, $value) !important; + } @else if ($type == 'container') { + padding-left: map-get($sap-content-paddings-container, $value) !important; + padding-right: map-get($sap-content-paddings-container, $value) !important; + } @else { + padding-left: map-get($sap-content-paddings-nav, $value) !important; + padding-right: map-get($sap-content-paddings-nav, $value) !important; + } +} + +@mixin sap-set-dynamic-content-paddings($type) { + @include sap-container-query-sm() { + @include sap-set-content-paddings($type, 'sm'); + } + + @include sap-container-query-md() { + @include sap-set-content-paddings($type, 'md'); + } + + @include sap-container-query-lg() { + @include sap-set-content-paddings($type, 'lg'); + } + + @include sap-container-query-xl() { + @include sap-set-content-paddings($type, 'xl'); + } +} + +@mixin sap-content-paddings($type: home, $size: default) { + @if ($size == default) { + @include sap-set-dynamic-content-paddings($type); + } @else { + @include sap-set-content-paddings($type, $size); + } +} + // Shadows @mixin sap-set-box-shadow($value) { box-shadow: $value; diff --git a/packages/common-css/src/sap-container-type.scss b/packages/common-css/src/sap-container-type.scss new file mode 100644 index 0000000000..33c45273f9 --- /dev/null +++ b/packages/common-css/src/sap-container-type.scss @@ -0,0 +1,20 @@ +@import 'common-settings'; +@import 'common-mixins'; + +$block: #{$sap-namespace}-container-type; + +.#{$block} { + @include sap-container-type(normal); + + &-normal { + @include sap-container-type(normal); + } + + &-size { + @include sap-container-type(size); + } + + &-inline-size { + @include sap-container-type(inline-size); + } +} diff --git a/packages/common-css/src/sap-padding.scss b/packages/common-css/src/sap-padding.scss index 17281dc7cf..fecbef09b1 100644 --- a/packages/common-css/src/sap-padding.scss +++ b/packages/common-css/src/sap-padding.scss @@ -16,6 +16,10 @@ $block: #{$sap-namespace}-padding; @include sap-padding-responsive(); } + &-responsive-container { + @include sap-padding-container-responsive(); + } + &-none { @include sap-padding(0); } diff --git a/packages/common-css/stories/container-queries/container-queries.stories.js b/packages/common-css/stories/container-queries/container-queries.stories.js new file mode 100644 index 0000000000..9a62914170 --- /dev/null +++ b/packages/common-css/stories/container-queries/container-queries.stories.js @@ -0,0 +1,69 @@ +import containerQueriesExampleExampleHtml from './container-queries.story.description.html?raw'; + +export default { + title: 'Container Queries', + parameters: { + description: `Container queries are similar to media queries, but they allow you to apply styles to an element based on the dimensions of the element's container rather than the device’s viewport. For more information please visit the MDN website. +


+

Containment Context

+ To define a container, you need to specify the container-type property on the element. The container-type can accept three options: size, inline-size, and normal.
+ + + + + + + + + + + + + + + + + + + + + +
normalthe element is not a query container for any container size, but it can be used to apply styles to the element.sap-container-type-normal@include sap-container-type(normal)
sizethe container will not assume the position it has on the viewport, you must explicitly set the height and width of the container.sap-container-type-size@include sap-container-type(size)
inline-sizethe element assumes the position it has on the viewport.sap-container-type-inline-size@include sap-container-type(inline-size)
+
+

Mixins

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinContainer width
@include sap-container-query-sm()max-width: 599px
@include sap-container-query-md()600px <= width <= 1023px
@include sap-container-query-lg()1024px <= width <= 1439px
@include sap-container-query-xl()min-width: 1440px
@include sap-container-query-from($width)user defined
@include sap-container-query-until($width)user defined
+ `, + } +}; + + +export const UsingTheMixins = () => containerQueriesExampleExampleHtml; diff --git a/packages/common-css/stories/container-queries/container-queries.story.description.html b/packages/common-css/stories/container-queries/container-queries.story.description.html new file mode 100644 index 0000000000..de2c372c6c --- /dev/null +++ b/packages/common-css/stories/container-queries/container-queries.story.description.html @@ -0,0 +1,13 @@ +
+    .article-container {
+        @include sap-container-type(inline-size);
+    }
+
+   
+    @include sap-container-query-from(640px) {
+        .article {
+            font-size: 20px;
+        }
+    }
+    
+
\ No newline at end of file diff --git a/packages/common-css/stories/content-paddings/content-paddings.stories.js b/packages/common-css/stories/content-paddings/content-paddings.stories.js index 281d14bc6f..4e26467834 100644 --- a/packages/common-css/stories/content-paddings/content-paddings.stories.js +++ b/packages/common-css/stories/content-paddings/content-paddings.stories.js @@ -1,4 +1,6 @@ import '../../src/sap-content-paddings.scss'; +import '../../src/sap-container-type.scss'; + export default { title: 'Content Paddings', parameters: { @@ -23,8 +25,10 @@ const localStyles = ` `; export const HomeExample = () => `${localStyles}

Responsive

-
-
+
+
+
+

Size SM

@@ -65,28 +69,28 @@ HomeExample.parameters = { SM - max-widtd: 599px + max-width: 599px padding-left: 0.5rem;
padding-right: 0.5rem; .sap-content-paddings-home-sm @include sap-content-paddings(home, sm); MD - min-widtd: 600px,
max-widtd: 1023px + min-width: 600px,
max-width: 1023px padding-left: 2rem;
padding-right: 2rem; .sap-content-paddings-home-md @include sap-content-paddings(home, md); LG - min-widtd: 1024px,
max-widtd: 1439px + min-width: 1024px,
max-width: 1439px padding-left: 2rem;
padding-right: 2rem; .sap-content-paddings-home-lg @include sap-content-paddings(home, lg); XL - min-widtd: 1440px + min-width: 1440px padding-left: 3rem;
padding-right: 3rem; .sap-content-paddings-home-xl @include sap-content-paddings(home, xl); @@ -106,8 +110,10 @@ HomeExample.parameters = { export const ContainerExample = () => `${localStyles}

Responsive

-
-
+
+
+
+

Size SM

diff --git a/packages/common-css/stories/media-queries/meta-queries.story.description.html b/packages/common-css/stories/media-queries/meta-queries.story.description.html index 68f8202f4c..ff7eeab5d7 100644 --- a/packages/common-css/stories/media-queries/meta-queries.story.description.html +++ b/packages/common-css/stories/media-queries/meta-queries.story.description.html @@ -42,7 +42,28 @@

Media Queries with Custom Breakpoints

+ +

+ +

Media Queries From/Until

+ + + + + + + + + + + + + + +
From@include sap-media-from($width) {...}@media screen and (min-width: $width) { @content; }
Until@include sap-media-until($width) {...}@media screen and (max-width: $width) { @content; }
+

+

Orientation

diff --git a/packages/common-css/stories/padding/padding.stories.js b/packages/common-css/stories/padding/padding.stories.js index 012c7c8261..4b9f1be308 100644 --- a/packages/common-css/stories/padding/padding.stories.js +++ b/packages/common-css/stories/padding/padding.stories.js @@ -108,7 +108,7 @@ ResponsivePadding.storyName = 'Responsive Paddings'; ResponsivePadding.parameters = { docs: { description: { - story: `The responsive padding class adds a double sided padding inside a container based on its width.
+ story: `The responsive padding class adds a double sided padding inside a container based on screen width.
CSS Class: .sap-padding-responsive
Mixin: @include sap-padding-responsive()
@@ -137,6 +137,46 @@ ResponsivePadding.parameters = { } }; +export const ResponsivePaddingContainer = () => `${localStyles} +
+
+
+
+
+`; +ResponsivePaddingContainer.storyName = 'Responsive Container Paddings'; +ResponsivePaddingContainer.parameters = { + docs: { + description: { + story: `The responsive padding class adds a double sided padding inside a container based on its width.
+ CSS Class: .sap-padding-responsive-container
+ Mixin: @include sap-padding-container-responsive() +
+ + + + + + + + + + + + + + + + + + + + +
Container SizeCSS
SMpadding: 0 1rem !important;
MDpadding: 0 2rem !important;
LGpadding: 0 2rem !important;
XLpadding: 0 3rem !important;
` + } + } +}; + export const NoPadding = () => `${localStyles}