@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
180 lines • 7.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ACTION_BOTTOM_SHEET_STYLES = void 0;
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const shadow_1 = require("../../foundations/shadow");
const sizes_1 = require("../../foundations/sizes");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../popover/variants");
const variants_2 = require("../text/variants");
const variants_3 = require("./variants");
const ACTION_BUTTON_SHEET_TOKENS = {
container: {
width: '20rem',
box_shadow: shadow_1.SHADOW.shadow_10,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
border_radius: `${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_00} ${borders_1.RADIUS.radius_00}`,
padding: `${spacings_1.SPACINGS.spacing_150} ${spacings_1.SPACINGS.spacing_250} ${spacings_1.SPACINGS.spacing_250}`,
display: 'flex',
flex_direction: 'column',
overflow_y: 'auto',
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
width: '100%',
border_radius: `${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_00} ${borders_1.RADIUS.radius_00}`,
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
width: '100%',
border_radius: `${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_00} ${borders_1.RADIUS.radius_00}`,
},
},
closeIconContainer: {
justify_content: 'flex-end',
margin_bottom: spacings_1.SPACINGS.spacing_300,
},
closeIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
header: {
display: 'flex',
flex_direction: 'column',
padding: spacings_1.SPACINGS.spacing_300,
padding_top: '0',
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
margin_bottom: spacings_1.SPACINGS.spacing_250,
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
margin_bottom: spacings_1.SPACINGS.spacing_250,
},
},
controlContainer: {
display: 'flex',
justify_content: 'space-between',
width: '100%',
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
padding_top: spacings_1.SPACINGS.spacing_400,
},
titleContainer: {
margin_bottom: spacings_1.SPACINGS.spacing_300,
},
titleContainerFont: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
text_align: typography_1.TEXT_ALIGN.left,
},
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
text_align: typography_1.TEXT_ALIGN.center,
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
text_align: typography_1.TEXT_ALIGN.center,
},
},
title: {
font_weight: typography_1.FONT_WEIGHT.font_weight_600,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
font_variant: variants_2.TextVariantType.HEADING_H4_EXTENDED,
},
content: {
max_height: '100vh',
},
dragIconContainer: {
display: 'flex',
justify_content: 'center',
},
};
exports.ACTION_BOTTOM_SHEET_STYLES = {
[variants_3.ActionBottomSheetVariantType.DEFAULT]: {
popoverVariant: variants_1.PopoverVariantType.ACTION_BOTTOM_SHEET,
...ACTION_BUTTON_SHEET_TOKENS,
},
[variants_3.ActionBottomSheetVariantType.INPUT_SEARCH]: {
popoverVariant: variants_1.PopoverVariantType.ACTION_BOTTOM_SHEET,
container: {
width: '100%',
box_shadow: shadow_1.SHADOW.shadow_10,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
display: 'flex',
flex_direction: 'column',
overflow_y: 'auto',
},
closeIconContainer: {
justify_content: 'flex-end',
margin_bottom: spacings_1.SPACINGS.spacing_100,
},
closeIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
header: {
display: 'flex',
flex_direction: 'column',
margin_top: spacings_1.SPACINGS.spacing_300,
padding_left: spacings_1.SPACINGS.spacing_300,
padding_right: spacings_1.SPACINGS.spacing_300,
},
titleContainer: {
margin_bottom: spacings_1.SPACINGS.spacing_400,
},
titleContainerFont: {
text_align: typography_1.TEXT_ALIGN.center,
},
title: {
font_variant: variants_2.TextVariantType.PARAGRAPH_LARGE_EXTENDED,
font_weight: typography_1.FONT_WEIGHT.font_weight_500,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
},
content: {
max_height: '100vh',
overflow_y: 'auto',
padding_top: spacings_1.SPACINGS.spacing_300,
},
},
[variants_3.ActionBottomSheetVariantType.INPUT_DROPDOWN_DEFAULT]: {
popoverVariant: variants_1.PopoverVariantType.ACTION_BOTTOM_SHEET,
container: {
width: '100%',
box_shadow: shadow_1.SHADOW.shadow_10,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
display: 'flex',
flex_direction: 'column',
overflow_y: 'auto',
},
closeIconContainer: {
justify_content: 'flex-end',
margin_bottom: spacings_1.SPACINGS.spacing_100,
},
closeIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
header: {
display: 'flex',
flex_direction: 'column',
margin_top: spacings_1.SPACINGS.spacing_300,
padding_left: spacings_1.SPACINGS.spacing_300,
padding_right: spacings_1.SPACINGS.spacing_300,
},
titleContainer: {
margin_bottom: spacings_1.SPACINGS.spacing_400,
},
titleContainerFont: {
text_align: typography_1.TEXT_ALIGN.center,
},
title: {
font_variant: variants_2.TextVariantType.PARAGRAPH_LARGE_EXTENDED,
font_weight: typography_1.FONT_WEIGHT.font_weight_500,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
},
content: {
max_height: '100vh',
overflow_y: 'auto',
padding_top: spacings_1.SPACINGS.spacing_300,
},
},
};
//# sourceMappingURL=styles.js.map