@kaspersky/components/src/select/selectCss.js

Kaspersky Design System UI Kit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SelectWrapper = exports.DropdownContent = void 0;
exports.getSelectGlobalStyles = getSelectGlobalStyles;
exports.selectCss = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _getFromProps = require("../../helpers/getFromProps.js");
var _theme = require("../../design-system/theme/index.js");
var _tokens = require("../../design-system/tokens/index.js");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const fromProps = (0, _getFromProps.getFromProps)();
const selectTextSizes = (0, _tokens.getTextSizes)(_tokens.textLevels.BTR3);
const SelectWrapper = exports.SelectWrapper = _styledComponents.default.div.withConfig({
  displayName: "selectCss__SelectWrapper",
  componentId: "sc-k1ndjm-0"
})(["width:100%;"]);
const selectCss = exports.selectCss = (0, _styledComponents.css)(["width:100%;.ant-select-selector{font-family:", ";font-size:", ";line-height:", ";font-weight:", ";font-style:", ";letter-spacing:", ";.ant-select-selection-overflow{gap:", "px;padding:3px 0;.ant-tag{margin-right:0;}}> .ant-select-selection-search > .ant-select-selection-search-input{height:100%;}}&.ant-select-single{.ant-select-selector{padding:6px 36px 6px 12px;}&.ant-select-show-arrow{.ant-select-selection-placeholder,.ant-select-selection-item{padding-right:0;}}}&.ant-select-multiple{.ant-select-selector{padding:0 64px 0 12px;}.ant-select-selection-search{margin-inline-start:0;line-height:20px;}&.ant-select-focused,&.ant-select-open{.ant-select-selector{border:none;box-shadow:", ";background-color:", ";}}}&&:not(.ant-select-customize-input){&:not(.ant-select-disabled){.ant-select-selector{background-color:", ";border:1px solid ", ";}.ant-select-selection-search-input{color:", ";}.ant-select-selection-item{color:", ";opacity:1;}.ant-select-selection-placeholder{color:", ";}.select-chevron,.ant-select-arrow{color:", ";}.ant-select-clear{background-color:", ";}&.ant-select-error .ant-select-selector{border-color:", ";}&.ant-select-focused .ant-select-selector{box-shadow:", ";background-color:", ";}&.ant-select-open .ant-select-selector{box-shadow:", ";background-color:", ";}&:hover .ant-select-selector{border-color:", ";}}&.ant-select-disabled{.ant-select-selector{background-color:", ";border:1px solid transparent;.ant-select-selection-item{color:", ";}}.ant-select-selection-placeholder{color:", ";}}.select-chevron{color:", ";}}.ant-select-selector{border-radius:", "px !important;> .ant-select-selection-placeholder{opacity:1;line-height:20px;}> .ant-select-selection-item{&::first-letter{text-transform:capitalize;}display:flex;align-items:center;}}&.ant-select-open .ant-select-arrow{transform:rotate(0.5turn);}> .ant-select-arrow{width:16px;height:16px;right:12px;margin-top:0;transform:none;top:8px;}> .ant-select-clear{opacity:1;right:32px;top:8px;bottom:1px;width:16px;height:16px;border-radius:", "px;margin-top:0;}.dropdown-custom{background-color:", ";border-radius:", "px;box-shadow:", ";&.dropdown-loading{min-height:64px;}}.ant-select-selection-overflow-item-rest .ant-select-selection-item{background:none;border:none;margin:0;padding:0;}"], selectTextSizes.fontFamily, selectTextSizes.fontSize, selectTextSizes.lineHeight, selectTextSizes.fontWeight, selectTextSizes.fontStyle, selectTextSizes.letterSpacing, _theme.SPACES[2], fromProps('focus.boxShadow'), fromProps('normal.background'), fromProps('normal.background'), fromProps('normal.borderColor'), fromProps('normal.color'), fromProps('normal.color'), fromProps('normal.placeholder.color'), fromProps('normal.color'), fromProps('normal.background'), fromProps('error.borderColor'), fromProps('focus.boxShadow'), fromProps('normal.background'), fromProps('focus.boxShadow'), fromProps('normal.background'), fromProps('hover.borderColor'), fromProps('disabled.background'), fromProps('disabled.color'), fromProps('disabled.placeholder.color'), fromProps('disabled.color'), _theme.BORDER_RADIUS[4], _theme.BORDER_RADIUS[4], fromProps('normal.dropdown.background'), _theme.BORDER_RADIUS[2], fromProps('normal.dropdown.boxShadow'));
const DropdownContent = exports.DropdownContent = _styledComponents.default.div.withConfig({
  shouldForwardProp: prop => !['cssConfig', 'isMultiSelect'].includes(prop)
}).withConfig({
  displayName: "selectCss__DropdownContent",
  componentId: "sc-k1ndjm-1"
})([".ant-select-item-option{color:", ";position:relative;padding-right:30px;.ant-select-item-option-state{color:", " !important;position:absolute;height:16px;width:16px;top:50%;right:13px;transform:translateY(-50%);}.ant-select-item-option-content::first-letter{text-transform:capitalize;}.ant-select-item-option-content{display:flex;align-items:center;}&:focus-visible{background-color:", ";outline:none;}}.ant-select-item-option-selected:not(.ant-select-item-option-disabled){background-color:", ";color:", ";font-weight:", ";}.ant-select-item-option-active:not(.ant-select-item-option-disabled):not(.ant-select-item-option-selected){&,&:hover{background-color:", ";}}.ant-select-item-option-selected{color:", ";background-color:", ";}.ant-select-item-option-disabled{color:", ";}", "}"], fromProps('normal.option.color'), fromProps('normal.option.color'), fromProps('hover.option.background'), fromProps('selected.option.background'), fromProps('selected.option.color'), selectTextSizes.fontWeight, fromProps('hover.option.background'), fromProps('hover.option.color'), fromProps('selected.option.background'), fromProps('disabled.option.color'), props => props.isMultiSelect && `
    .ant-select-item-option-state {
      display: none;
    }
    
    .ant-select-item {
      order: 1;

      &:not([label]) {
        order: 2;
        color: ${fromProps('normal.addButton.color')(props)};

        &:not(.ant-select-item-option-selected) .ant-select-item-option-content:before {
          content: "Add:  ‟";
        }
        
        &.ant-select-item-option-selected .ant-select-item-option-content:before {
          content: "Remove: ‟";
        }

        .ant-select-item-option-content:after {
          content: "”";
        }
      }
    }
    `);
function getSelectGlobalStyles(cssConfig, rootHashClass) {
  return `
  .${rootHashClass} {
    background-color: ${cssConfig.normal.dropdown.background};
    border-radius: ${_theme.BORDER_RADIUS[2]}px;
    box-shadow: ${cssConfig.normal.dropdown.boxShadow};
  }
  
  .${rootHashClass}.dropdown-loading {
    min-height: 64px;
  }
  `;
}