@kaspersky/components/src/button/buttonCss.js

Kaspersky Design System UI Kit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.groupCss = exports.buttonCss = void 0;
var _styledComponents = require("styled-components");
var _getFromProps = require("../../helpers/getFromProps.js");
var _variables = require("../../design-system/theme/themes/variables.js");
const fromProps = (0, _getFromProps.getFromProps)();
const groupCss = exports.groupCss = (0, _styledComponents.css)(["gap:6px;&.ant-btn-group > .ant-btn:first-child:not(:last-child){border-radius:7px 0 0 7px;}&.ant-btn-group > .ant-btn:not(:last-child):not(:first-child){border-radius:0;}&.ant-btn-group > .ant-btn:last-child:not(:first-child){border-radius:0 7px 7px 0;}"]);
const buttonCss = exports.buttonCss = (0, _styledComponents.css)(["&.ant-btn{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;gap:", "px;outline:none;height:", ";min-width:", ";max-width:100%;padding:", ";border-radius:", ";background-color:", ";color:", ";border:", ";box-shadow:none;.kl-components-button-text{max-width:100%;text-overflow:ellipsis;overflow:hidden;font-family:", ";font-size:", ";line-height:", ";font-weight:", ";font-style:", ";letter-spacing:", ";}&:not([disabled]) > span[role=\"img\"] > svg{color:", ";}&:focus-visible{box-shadow:", ";}&:hover,&:hover:focus{color:", ";background-color:", ";}&:active,&:active:focus{background-color:", ";border:", ";transition-duration:.02s;}&[disabled],&.ant-btn-loading{&,&:hover,&:active,&:focus{background-color:", ";color:", ";border:", ";box-shadow:none;cursor:not-allowed;svg{color:", ";}}}&.ant-btn-loading{& > span:not(.ant-btn-loading-icon){visibility:", ";overflow:hidden;transition:visibility 0.3s;}}.ant-btn-loading-icon{position:absolute;left:50%;top:50%;margin-top:-8px;margin-left:-8px;transition:opacity 0.3s;color:", ";svg{width:16px;height:16px;}span{padding-right:0;}}.anticon{line-height:0;}&::before{opacity:0;}&.icon-only{width:", ";min-width:", ";padding:unset;line-height:unset;}}&[ant-click-animating-without-extra-node=true]::after,.ant-click-animating-node{display:none;}"], _variables.SPACES[2], fromProps('height'), fromProps('minWidth'), fromProps('padding'), fromProps('borderRadius'), _ref => {
  let {
    isPressed
  } = _ref;
  return fromProps(`${isPressed ? 'active' : 'normal'}.background`);
}, fromProps('normal.color'), fromProps('normal.border'), fromProps('fontFamily'), fromProps('fontSize'), fromProps('lineHeight'), fromProps('fontWeight'), fromProps('fontStyle'), fromProps('letterSpacing'), fromProps('normal.color'), fromProps('focus.boxShadow'), fromProps('hover.color'), fromProps('hover.background'), fromProps('active.background'), fromProps('active.border'), fromProps('disabled.background'), fromProps('disabled.color'), fromProps('disabled.border'), fromProps('disabled.color'), props => props.loading ? 'hidden' : 'visible', fromProps('disabled.color'), fromProps('height'), fromProps('height'));