m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

updated responsive props for border radius (#16510)

Browse Source 
* updated responsive props for border radius

* updated responsive prop

* added responsive border radius story

* fixed box structure in story

* fixed console issue

* updated display constants

* updated constants
This commit is contained in:
Nidhi Kumari 2022-11-19 03:13:38 +05:30 committed by GitHub
parent e11203c2cd
commit ad4db57a4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ui/components/ui/box/box.scss
View File

@ -128,64 +128,19 @@ $attributesToApplyExtraProperties: margin;
}
}
}
&--rounded-none {
border-radius: 0;
// border-radius
@each $radius, $value in design-system.$border-radius {
&--rounded-#{$radius} {
border-radius: $value;
}
}
&--rounded-xs {
border-radius: 2px;
}
&--rounded-sm {
border-radius: 4px;
}
&--rounded-md {
border-radius: 6px;
}
&--rounded-lg {
border-radius: 8px;
}
&--rounded-xl {
border-radius: 12px;
}
&--rounded-pill {
border-radius: 9999px;
}
&--rounded-full {
border-radius: 50%;
}
// breakpoint classes
@each $breakpoint, $min-width in $screen-sizes-map {
@media screen and (min-width: $min-width) {
&--#{$breakpoint}\:rounded-none {
border-radius: 0;
}
&--#{$breakpoint}\:rounded-xs {
border-radius: 0.125rem;
}
&--#{$breakpoint}\:rounded-sm {
border-radius: 0.25rem;
}
&--#{$breakpoint}\:rounded-md {
border-radius: 0.375rem;
}
&--#{$breakpoint}\:rounded-lg {
border-radius: 0.5rem;
}
&--#{$breakpoint}\:rounded-xl {
border-radius: 0.75rem;
@each $radius, $value in design-system.$border-radius {
@media screen and (min-width: $min-width) {
&--#{$breakpoint}\:rounded-#{$radius} {
border-radius: $value;
}
}
}
}

34
ui/components/ui/box/box.stories.js
View File

@ -582,8 +582,12 @@ export const ResponsiveProps = () => {
marginBottom={[0]}
padding={[2, 4]}
gap={[2, 4]}
display={['flex', null, null, 'none']}
flexDirection={['column', 'row']}
display={[DISPLAY.FLEX, null, null, DISPLAY.NONE]}
flexDirection={[
FLEX_DIRECTION.COLUMN,
FLEX_DIRECTION.COLUMN,
FLEX_DIRECTION.ROW,
]}
borderColor={COLORS.BORDER_DEFAULT}
>
<Box
@ -607,6 +611,32 @@ export const ResponsiveProps = () => {
>
example
</Box>
<Box
padding={[4, 8]}
borderRadius={[
BORDER_RADIUS.XS,
BORDER_RADIUS.SM,
BORDER_RADIUS.MD,
BORDER_RADIUS.LG,
]}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_MUTED}
>
Responsive Border Radius 1
</Box>
<Box
padding={[4, 8]}
borderRadius={[
BORDER_RADIUS.XL,
BORDER_RADIUS.PILL,
BORDER_RADIUS.NONE,
BORDER_RADIUS.FULL,
]}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_MUTED}
>
Responsive Border Radius 2
</Box>
</Box>
</>
);

9
ui/css/design-system/attributes.scss
View File

@ -48,6 +48,15 @@ $overflow-wrap: normal, break-word;
$font-weight: bold, medium, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900;
$font-style: normal, italic, oblique;
$font-size: 10px, 12px;
$border-radius: (
xs: 2px,
md: 4px,
lg: 8px,
xl: 12px,
full: 50%,
pill: 9999px,
none: 0,
);
// textarea
$resize: none, both, horizontal, vertical, initial, inherit;