@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
216 lines • 8.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SUMMARY_DETAILS_STYLES = void 0;
// fundations
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const sizes_1 = require("../../foundations/sizes");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../variants");
const variants_2 = require("./variants");
exports.SUMMARY_DETAILS_STYLES = {
// Add the same border than OPTION SIDE_MENU_LEVEL_1
[variants_2.SummaryDetailsVariantType.SIDE_MENU]: {
container: { width: '100%' },
header: {
cursor: 'pointer',
display: 'flex',
flex_direction: 'column',
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
padding_top: spacings_1.SPACINGS.spacing_250,
padding_right: spacings_1.SPACINGS.spacing_300,
padding_left: `calc(${spacings_1.SPACINGS.spacing_300} + ${borders_1.BORDERS.border_200})`,
firstChild: {
display: 'flex',
flex_direction: 'row',
justify_content: 'space-between',
align_items: 'center',
gap: '0.5rem',
},
lastChild: {
border_style: 'none',
padding_bottom: spacings_1.SPACINGS.spacing_250,
},
},
leftIconContainer: {
display: 'flex',
flex_direction: 'row',
align_items: 'center',
gap: spacings_1.SPACINGS.spacing_150,
},
leftOpenIcon: {
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
},
leftClosedIcon: {
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
},
title: {
font_variant: variants_1.TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
titleContainer: {
width: '100%',
},
rightIconContainer: {
allowRotate: true,
},
rightOpenIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
rightClosedIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
body: {
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
padding_top: spacings_1.SPACINGS.spacing_150,
padding_left: spacings_1.SPACINGS.spacing_300,
},
lineSeparatorVariant: variants_1.LineSeparatorLineVariantType.LINE_DEFAULT,
hasLineSeparator: false,
},
[variants_2.SummaryDetailsVariantType.ACCORDION]: {
container: { width: '100%' },
header: {
cursor: 'pointer',
display: 'flex',
flex_direction: 'column',
padding_top: spacings_1.SPACINGS.spacing_150,
firstChild: {
display: 'flex',
flex_direction: 'row',
border_bottom_style: 'solid',
border_bottom_width: borders_1.BORDERS.border_50,
border_bottom_color: colors_1.COLORS.SECONDARY.color_secondary_bg_100,
align_items: 'end',
},
},
leftIconContainer: {
allowRotate: true,
display: 'flex',
flex_direction: 'row',
align_items: 'center',
height: sizes_1.SIZES.size_400,
width: sizes_1.SIZES.size_400,
max_width: sizes_1.SIZES.size_400,
max_height: sizes_1.SIZES.size_400,
background_color: colors_1.COLORS.SECONDARY.color_secondary_bg_100,
margin_right: spacings_1.SPACINGS.spacing_300,
justify_content: 'center',
},
leftOpenIcon: {
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
leftClosedIcon: {
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
title: {
font_variant: variants_1.TextVariantType.HEADING_H3_EXPANDED,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
titleContainer: {
width: '100%',
},
rightIconContainer: {
allowRotate: true,
},
rightOpenIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
rightClosedIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
body: {
padding_top: spacings_1.SPACINGS.spacing_150,
padding_left: spacings_1.SPACINGS.spacing_300,
},
lineSeparatorVariant: variants_1.LineSeparatorLineVariantType.LINE_DEFAULT,
hasLineSeparator: false,
},
[variants_2.SummaryDetailsVariantType.ACCORDION_NO_PADDING]: {
container: { width: '100%' },
header: {
cursor: 'pointer',
display: 'flex',
flex_direction: 'column',
padding_top: spacings_1.SPACINGS.spacing_150,
firstChild: {
display: 'flex',
flex_direction: 'row',
border_bottom_style: 'solid',
border_bottom_width: borders_1.BORDERS.border_50,
border_bottom_color: colors_1.COLORS.SECONDARY.color_secondary_bg_100,
align_items: 'end',
},
},
leftIconContainer: {
allowRotate: true,
display: 'flex',
flex_direction: 'row',
align_items: 'center',
height: sizes_1.SIZES.size_400,
width: sizes_1.SIZES.size_400,
max_width: sizes_1.SIZES.size_400,
max_height: sizes_1.SIZES.size_400,
background_color: colors_1.COLORS.SECONDARY.color_secondary_bg_100,
margin_right: spacings_1.SPACINGS.spacing_300,
justify_content: 'center',
},
leftOpenIcon: {
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
leftClosedIcon: {
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
title: {
font_variant: variants_1.TextVariantType.HEADING_H3_EXPANDED,
color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
titleContainer: {
width: '100%',
},
rightIconContainer: {
allowRotate: true,
},
rightOpenIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
rightClosedIcon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
},
body: {
padding_top: spacings_1.SPACINGS.spacing_300,
padding_left: spacings_1.SPACINGS.spacing_0,
},
lineSeparatorVariant: variants_1.LineSeparatorLineVariantType.LINE_DEFAULT,
hasLineSeparator: false,
},
};
//# sourceMappingURL=styles.js.map