@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
119 lines • 4.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ICON_HIGHLIGHTED_STYLES = void 0;
const size_1 = require("../../../../components/iconHighlighted/types/size");
const borders_1 = require("../../foundations/borders");
const sizes_1 = require("../../foundations/sizes");
const variants_1 = require("./variants");
exports.ICON_HIGHLIGHTED_STYLES = {
[variants_1.IconHighlightedVariantType.SQUARE]: {
[size_1.IconHighlightedSizeType.EXTRA_SMALL]: {
container: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
},
icon: {
width: sizes_1.SIZES.size_150,
height: sizes_1.SIZES.size_150,
},
},
[size_1.IconHighlightedSizeType.SMALL]: {
container: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
icon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
},
},
[size_1.IconHighlightedSizeType.MEDIUM]: {
container: {
width: sizes_1.SIZES.size_400,
height: sizes_1.SIZES.size_400,
},
icon: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
},
[size_1.IconHighlightedSizeType.LARGE]: {
container: {
width: sizes_1.SIZES.size_450,
height: sizes_1.SIZES.size_450,
},
icon: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
},
[size_1.IconHighlightedSizeType.EXTRA_LARGE]: {
container: {
width: sizes_1.SIZES.size_500,
height: sizes_1.SIZES.size_500,
},
icon: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
},
},
[variants_1.IconHighlightedVariantType.ROUND]: {
[size_1.IconHighlightedSizeType.EXTRA_SMALL]: {
container: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
border_radius: borders_1.RADIUS.radius_100,
},
icon: {
width: sizes_1.SIZES.size_150,
height: sizes_1.SIZES.size_150,
},
},
[size_1.IconHighlightedSizeType.SMALL]: {
container: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
border_radius: borders_1.RADIUS.radius_100,
},
icon: {
width: sizes_1.SIZES.size_250,
height: sizes_1.SIZES.size_250,
},
},
[size_1.IconHighlightedSizeType.MEDIUM]: {
container: {
width: sizes_1.SIZES.size_400,
height: sizes_1.SIZES.size_400,
border_radius: borders_1.RADIUS.radius_100,
},
icon: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
},
[size_1.IconHighlightedSizeType.LARGE]: {
container: {
width: sizes_1.SIZES.size_450,
height: sizes_1.SIZES.size_450,
border_radius: borders_1.RADIUS.radius_100,
},
icon: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
},
[size_1.IconHighlightedSizeType.EXTRA_LARGE]: {
container: {
width: sizes_1.SIZES.size_500,
height: sizes_1.SIZES.size_500,
border_radius: borders_1.RADIUS.radius_100,
},
icon: {
width: sizes_1.SIZES.size_300,
height: sizes_1.SIZES.size_300,
},
},
},
};
//# sourceMappingURL=styles.js.map