adastra-ui-comment/dist/CommentSection/components/styles.js

Testing locally 1) in this file - `npm i` install dependencies - `npm run build` or `npm run tsc` to build your module 2) in childApp - in package.json under dependencies add ui-astra-assets with file:(relativePathToRepo) - "ui-astra-a

import { AstraTheme } from 'Themes/themes';
var postion;
(function (postion) {
    postion["sticky"] = "sticky";
})(postion || (postion = {}));
export const inputStyle = {
    control: {
        fontSize: 14,
        backgroundColor: '#eee',
        borderRadius: '5px',
        border: 'none',
        borderBottomRightRadius: '0px',
        borderTopRightRadius: '0px',
    },
    highlighter: {
        padding: '12px 12px 10px',
        height: '40px',
        borderRadius: '50px',
    },
    input: {
        transition: AstraTheme.transitions.create(['background-color', 'box-shadow', 'border'], {
            duration: AstraTheme.transitions.duration.short,
        }),
        padding: '12px 12px 10px',
        height: '40px',
        borderRadius: '5px',
        border: 'none',
        borderBottomRightRadius: '0px',
        borderTopRightRadius: '0px',
        outlineWidth: 0,
    },
    mention: {
        backgroundColor: 'rgb(27,119,183,0.3)',
        borderTop: '5px solid',
        borderBottom: '5px solid',
        borderRadius: '5px',
    },
    suggestions: {
        list: {
            backgroundColor: 'white',
            fontSize: 14,
        },
        item: {
            padding: '5px 15px',
            borderBottom: '1px solid rgba(0,0,0,0.15)',
            '&focused': {
                backgroundColor: 'rgb(27,119,183,0.3)',
            },
        },
    },
};
export const commentStyling = {
    position: postion.sticky,
    zIndex: 10,
    transform: 'translate(0px, 0px)',
    bottom: '0px',
    width: '100vw',
    backgroundColor: '#fff',
    marginTop: 20,
};
export const dividerStyle = {
    maxWidth: 1250,
    width: '100%',
    margin: 'auto',
    height: 1,
    background: 'linear-gradient(to right, rgba(200,200,200,0) 0%, rgba(200,200,200,1) 5%, rgba(200,200,200,1) 95%, rgba(200,200,200,0) 100%)',
};
export const paperStyle = {
    maxWidth: 1200,
    width: '100%',
    padding: '20px 16px',
    margin: 'auto',
    boxShadow: '0px -12px 10px -10px rgba(0, 0, 0, 0.15)',
};
export const focusedStyle = focused => (focused ? {
    borderBottom: `2px solid ${AstraTheme.palette.primary.light}`,
    borderBottomLeftRadius: '0px',
    borderBottomRightRadius: '0px',
} : {
    borderBottom: 'none',
    borderBottomLeftRadius: '5px',
    borderBottomRightRadius: '0px',
});
export const focusedStyleButton = focused => (focused ? {
    borderBottom: `2px solid ${AstraTheme.palette.primary.light}`,
    borderBottomLeftRadius: '0px',
    borderBottomRightRadius: '0px',
    color: AstraTheme.palette.primary.light,
} : {
    borderBottom: 'none',
    borderBottomLeftRadius: '0px',
    borderBottomRightRadius: '5px',
    color: AstraTheme.palette.action.active,
});
export const buttonStyle = focused => (Object.assign({ height: '40px', width: '40px', borderRadius: '5px', borderTopLeftRadius: '0px', backgroundColor: '#eee' }, focusedStyleButton(focused)));
export const mentionInputStyle = focused => (Object.assign(Object.assign({}, inputStyle), { input: Object.assign(Object.assign({}, inputStyle.input), focusedStyle(focused)) }));
export const commentToolButtonStyle = {
    display: 'flex',
    alignItems: 'center',
    fontSize: 12,
    borderBottom: `1px solid ${AstraTheme.palette.text.secondary}`,
    borderRadius: 0,
    marginRight: 5,
    maxWidth: 40,
    minWidth: 40,
    padding: '3px 0',
    paddingBottom: 0.5,
};
//# sourceMappingURL=styles.js.map