naive-ui/es/cascader/src/styles/index.cssr.mjs

A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast

import { c, cB, cE, cM } from "../../../_utils/cssr/index.mjs";
import { fadeInScaleUpTransition } from "../../../_styles/transitions/fade-in-scale-up.cssr.mjs";
// vars:
// --n-menu-border-radius
// --n-menu-box-shadow
// --n-menu-height
// --n-menu-color
// --n-menu-divider-color
// --n-option-height
// --n-option-font-size
// --n-option-text-color
// --n-option-text-color-disabled
// --n-option-text-color-active
// --n-option-color-hover
// --n-option-check-mark-color
// --n-option-arrow-color
// --n-menu-mask-color
// --n-loading-color
export default c([cB('cascader-menu', `
 outline: none;
 position: relative;
 margin: 4px 0;
 display: flex;
 flex-flow: column nowrap;
 border-radius: var(--n-menu-border-radius);
 overflow: hidden;
 box-shadow: var(--n-menu-box-shadow);
 color: var(--n-option-text-color);
 background-color: var(--n-menu-color);
 `, [fadeInScaleUpTransition({
  transformOrigin: 'inherit',
  duration: '0.2s'
}), cE('empty', `
 display: flex;
 padding: 12px 32px;
 flex: 1;
 justify-content: center;
 `), cB('scrollbar', {
  // if width not set, cascader select menu's inner scroll area's width is
  // not correct, which won't change after select menu width is set
  width: '100%'
}), cB('base-menu-mask', {
  backgroundColor: 'var(--n-menu-mask-color)'
}), cB('base-loading', {
  color: 'var(--n-loading-color)'
}), cB('cascader-submenu-wrapper', `
 position: relative;
 display: flex;
 flex-wrap: nowrap;
 `), cB('cascader-submenu', `
 height: var(--n-menu-height);
 min-width: var(--n-column-width);
 position: relative;
 `, [cM('virtual', `
 width: var(--n-column-width);
 `), cB('scrollbar-content', {
  position: 'relative'
}), c('&:first-child', `
 border-top-left-radius: var(--n-menu-border-radius);
 border-bottom-left-radius: var(--n-menu-border-radius);
 `), c('&:last-child', `
 border-top-right-radius: var(--n-menu-border-radius);
 border-bottom-right-radius: var(--n-menu-border-radius);
 `), c('&:not(:first-child)', `
 border-left: 1px solid var(--n-menu-divider-color);
 `)]), cB('cascader-menu-action', `
 box-sizing: border-box;
 padding: 8px;
 border-top: 1px solid var(--n-menu-divider-color);
 `), cB('cascader-option', `
 height: var(--n-option-height);
 line-height: var(--n-option-height);
 font-size: var(--n-option-font-size);
 padding: 0 0 0 18px;
 box-sizing: border-box;
 min-width: 182px;
 background-color: #0000;
 display: flex;
 align-items: center;
 white-space: nowrap;
 position: relative;
 cursor: pointer;
 transition:
 background-color .2s var(--n-bezier),
 color 0.2s var(--n-bezier);
 `, [cM('show-prefix', {
  paddingLeft: 0
}), cE('label', `
 flex: 1 0 0;
 overflow: hidden;
 text-overflow: ellipsis;
 `), cE('prefix', {
  width: '32px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}), cE('suffix', {
  width: '32px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}), cB('cascader-option-icon-placeholder', {
  lineHeight: 0,
  position: 'relative',
  width: '16px',
  height: '16px',
  fontSize: '16px'
}, [cB('cascader-option-icon', [cM('checkmark', {
  color: 'var(--n-option-check-mark-color)'
}, [fadeInScaleUpTransition({
  originalTransition: 'background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier)'
})]), cM('arrow', {
  color: 'var(--n-option-arrow-color)'
})])]), cM('selected', {
  color: 'var(--n-option-text-color-active)'
}), cM('active', {
  color: 'var(--n-option-text-color-active)',
  backgroundColor: 'var(--n-option-color-hover)'
}), cM('pending', {
  backgroundColor: 'var(--n-option-color-hover)'
}), c('&:hover', {
  backgroundColor: 'var(--n-option-color-hover)'
}), cM('disabled', `
 color: var(--n-option-text-color-disabled);
 background-color: #0000;
 cursor: not-allowed;
 `, [cB('cascader-option-icon', [cM('arrow', {
  color: 'var(--n-option-text-color-disabled)'
})])])])]), cB('cascader', `
 z-index: auto;
 position: relative;
 width: 100%;
 `)]);