@braineet/ui/dist/esm/components/notification/styles.js

Braineet design system

import styled, { css } from 'styled-components';
import { position, variant } from 'styled-system';
import Box from '../box';
import Button from '../button';
import Heading from '../heading';
import Icon from '../icon';
export var appareances = function appareances(color, theme) {
  var v = {
    default: theme.colors.black50,
    action: theme.colors.action,
    error: theme.colors.error,
    success: theme.colors.success,
    warning: theme.colors.warning
  };
  if (!v[color]) return color;
  return v[color];
};
export var Wrapper = styled(Box).withConfig({
  displayName: "styles__Wrapper",
  componentId: "sc-yqr45k-0"
})(["display:flex;justify-content:space-between;width:100%;width:320px;min-height:50px;height:100%;align-items:stretch;background:#ffffff;box-shadow:0px 8px 16px -8px rgba(42,45,74,0.32);border-radius:4px;", " ", ";"], variant({
  variants: {
    default: {
      padding: '0.5rem',
      cursor: 'pointer'
    },
    actions: {
      cursor: 'default',
      padding: 0
    }
  }
}), function (p) {
  return p.appareance !== 'default' && css(["&:before{content:'';position:absolute;left:0;top:0;bottom:0;height:100%;width:4px;background:", ";border-radius:4px 0 0 4px;}"], appareances(p.appareance, p.theme));
});
export var Wrap = styled.div.withConfig({
  displayName: "styles__Wrap",
  componentId: "sc-yqr45k-1"
})(["display:flex;flex-direction:column;line-height:1em;padding:4px;"]);
export var Title = styled(Heading).attrs(function () {
  return {
    size: 'xs'
  };
}).withConfig({
  displayName: "styles__Title",
  componentId: "sc-yqr45k-2"
})(["color:", ";", ""], function (p) {
  return p.theme.colors.black50;
}, variant({
  variants: {
    default: {},
    actions: {
      display: '-webkit-box',
      '-webkit-line-clamp': '1',
      '-webkit-box-orient': 'vertical',
      overflow: 'hidden',
      maxHeight: '40px'
    }
  }
}));
export var Description = styled.div.withConfig({
  displayName: "styles__Description",
  componentId: "sc-yqr45k-3"
})(["color:", ";font-size:12px;", ""], function (p) {
  return p.theme.colors.black50;
}, variant({
  variants: {
    default: {},
    actions: {
      display: '-webkit-box',
      '-webkit-line-clamp': '1',
      '-webkit-box-orient': 'vertical',
      overflow: 'hidden',
      maxHeight: '1rem'
    }
  }
}));
export var StyledIcon = styled(Icon).withConfig({
  displayName: "styles__StyledIcon",
  componentId: "sc-yqr45k-4"
})(["color:", ";margin:8px 12px 8px 4px;flex-shrink:0;", " ", ""], function (p) {
  return appareances(p.appareance, p.theme);
}, position, variant({
  variants: {
    default: {},
    actions: {
      marginLeft: '0.5rem'
    }
  }
}));
export var ActionWrapper = styled.div.withConfig({
  displayName: "styles__ActionWrapper",
  componentId: "sc-yqr45k-5"
})(["display:flex;flex-direction:", ";border-left:1px solid rgba(71,82,133,0.1);align-items:stretch;"], function (p) {
  return p.nbActions === 1 ? 'row' : 'column';
});
export var ActionButton = styled(Button).withConfig({
  displayName: "styles__ActionButton",
  componentId: "sc-yqr45k-6"
})(["font-size:12px;background:", ";border-radius:0 0 4px 0;box-shadow:none;", ""], function (p) {
  return p.styleType === 'ghost' && 'transparent';
}, function (p) {
  return p.isAlone ? css(["border-radius:0 4px 4px 0;"]) : css(["&:first-child{border-radius:0 4px 0 0;border-bottom:1px solid rgba(71,82,133,0.1);}"]);
});
export var Cross = styled(Button).attrs(function () {
  return {
    styleType: 'ghost',
    icon: 'cross',
    color: 'black'
  };
}).withConfig({
  displayName: "styles__Cross",
  componentId: "sc-yqr45k-7"
})(["align-self:center;"]);