refactor(@clayui/modal) - Adjust pagginds on smaller screens and zooming

[ilzamcmed]

Jira issue: https://liferay.atlassian.net/browse/LPS-196712

[ilzamcmed]

Hey @pat270
Can you review it?
Thanks!

[pat270]

We don't need to make any modifications to /bootstrap/. We don't have any use cases of it in 7.4. This gets me thinking, we should remove it from the source.

[pat270]

@ilzamcmed This will be a more complicated fix unfortunately. I want to leverage

clay/packages/clay-css/src/scss/mixins/_grid.scss

Lines 203 to 261 in b1cf8c4

	@mixin clay-generate-media-breakpoints($map, $mixin: 'clay-css') {
	@if (type-of($map) == 'map') {
	@if (map-get($map, media-breakpoint-up)) {
	$media-breakpoint-up: map-get($map, media-breakpoint-up);
	@each $breakpoint in map-keys($media-breakpoint-up) {
	$breakpoint-up: map-get($media-breakpoint-up, $breakpoint);
	@include media-breakpoint-up($breakpoint) {
	@if ($mixin == 'clay-css') {
	@include clay-css($breakpoint-up);
	} @else if ($mixin == 'clay-button-variant') {
	@include clay-button-variant($breakpoint-up);
	} @else if ($mixin == 'clay-input-group-variant') {
	@include clay-input-group-variant($breakpoint-up);
	} @else if ($mixin == 'clay-input-group-text-variant') {
	@include clay-input-group-text-variant($breakpoint-up);
	} @else if ($mixin == 'clay-dropdown-menu-variant') {
	@include clay-dropdown-menu-variant($breakpoint-up);
	} @else if ($mixin == 'clay-menubar-vertical-variant') {
	@include clay-menubar-vertical-variant($breakpoint-up);
	} @else if ($mixin == 'clay-select-variant') {
	@include clay-select-variant($breakpoint-up);
	}
	}
	}
	}
	@if (map-get($map, media-breakpoint-down)) {
	$media-breakpoint-down: map-get($map, media-breakpoint-down);
	@each $breakpoint in map-keys($media-breakpoint-down) {
	$breakpoint-down: map-get($media-breakpoint-down, $breakpoint);
	@include media-breakpoint-down($breakpoint) {
	@if ($mixin == 'clay-css') {
	@include clay-css($breakpoint-down);
	} @else if ($mixin == 'clay-button-variant') {
	@include clay-button-variant($breakpoint-down);
	} @else if ($mixin == 'clay-input-group-variant') {
	@include clay-input-group-variant($breakpoint-down);
	} @else if ($mixin == 'clay-input-group-text-variant') {
	@include clay-input-group-text-variant(
	$breakpoint-down
	);
	} @else if ($mixin == 'clay-dropdown-menu-variant') {
	@include clay-dropdown-menu-variant($breakpoint-down);
	} @else if ($mixin == 'clay-menubar-vertical-variant') {
	@include clay-menubar-vertical-variant(
	$breakpoint-down
	);
	} @else if ($mixin == 'clay-select-variant') {
	@include clay-select-variant($breakpoint-down);
	}
	}
	}
	}
	}
	}

and

clay/packages/clay-css/src/scss/mixins/_globals.scss

Lines 370 to 396 in b1cf8c4

	@mixin clay-map-to-css($map) {
	@include clay-css($map);
	@each $key, $value in $map {
	@if not clay-is-map-unset($value) {
	@if (type-of($value) == 'map') {
	$valid-prefixes: '#', '&', '.', '>', '@', '~', '+', '[';
	$selector: if(
	index($valid-prefixes, str-slice($key, 1, 1)),
	$key,
	str-insert($key, '.', 1)
	);
	@if (starts-with($selector, '@media ')) {
	@media #{clay-str-replace('#{$selector}', '@media ', '')} {
	@include clay-map-to-css($value);
	}
	} @else {
	#{$selector} {
	@include clay-map-to-css($value);
	}
	}
	}
	}
	}
	}

.

Let me know if you're up for it or I can send an update to this one.

[ilzamcmed]

Hey @pat270
I believe it's better if you update this one, it will be quicker.
But I will be following to see the changes you made and learn something.
Thanks! 🚀