index-pure.less 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import './status';
  4. @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
  5. .@{dropdown-prefix-cls} {
  6. .reset-component();
  7. position: absolute;
  8. top: -9999px;
  9. left: -9999px;
  10. z-index: @zindex-dropdown;
  11. display: block;
  12. &::before {
  13. position: absolute;
  14. top: -@popover-distance + @popover-arrow-width;
  15. right: 0;
  16. bottom: -@popover-distance + @popover-arrow-width;
  17. left: -7px;
  18. z-index: -9999;
  19. opacity: 0.0001;
  20. content: ' ';
  21. }
  22. &-wrap {
  23. position: relative;
  24. .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
  25. font-size: 10px;
  26. }
  27. .@{iconfont-css-prefix}-down::before {
  28. transition: transform @animation-duration-base;
  29. }
  30. }
  31. &-wrap-open {
  32. .@{iconfont-css-prefix}-down::before {
  33. transform: rotate(180deg);
  34. }
  35. }
  36. &-hidden,
  37. &-menu-hidden,
  38. &-menu-submenu-hidden {
  39. display: none;
  40. }
  41. // Offset the popover to account for the dropdown arrow
  42. &-show-arrow&-placement-topCenter,
  43. &-show-arrow&-placement-topLeft,
  44. &-show-arrow&-placement-topRight {
  45. padding-bottom: @popover-distance;
  46. }
  47. &-show-arrow&-placement-bottomCenter,
  48. &-show-arrow&-placement-bottomLeft,
  49. &-show-arrow&-placement-bottomRight {
  50. padding-top: @popover-distance;
  51. }
  52. // Arrows
  53. // .popover-arrow is outer, .popover-arrow:after is inner
  54. &-arrow {
  55. position: absolute;
  56. z-index: 1; // lift it up so the menu wouldn't cask shadow on it
  57. display: block;
  58. width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
  59. height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
  60. background: transparent;
  61. border-style: solid;
  62. border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2);
  63. transform: rotate(45deg);
  64. }
  65. &-placement-topCenter > &-arrow,
  66. &-placement-topLeft > &-arrow,
  67. &-placement-topRight > &-arrow {
  68. bottom: @popover-distance - @popover-arrow-width + 2.2px;
  69. border-color: transparent @popover-bg @popover-bg transparent;
  70. box-shadow: 3px 3px 7px fade(@black, 7%);
  71. }
  72. &-placement-topCenter > &-arrow {
  73. left: 50%;
  74. transform: translateX(-50%) rotate(45deg);
  75. }
  76. &-placement-topLeft > &-arrow {
  77. left: 16px;
  78. }
  79. &-placement-topRight > &-arrow {
  80. right: 16px;
  81. }
  82. &-placement-bottomCenter > &-arrow,
  83. &-placement-bottomLeft > &-arrow,
  84. &-placement-bottomRight > &-arrow {
  85. top: @popover-distance - @popover-arrow-width + 2px;
  86. border-color: @popover-bg transparent transparent @popover-bg;
  87. box-shadow: -2px -2px 5px fade(@black, 6%);
  88. }
  89. &-placement-bottomCenter > &-arrow {
  90. left: 50%;
  91. transform: translateX(-50%) rotate(45deg);
  92. }
  93. &-placement-bottomLeft > &-arrow {
  94. left: 16px;
  95. }
  96. &-placement-bottomRight > &-arrow {
  97. right: 16px;
  98. }
  99. &-menu {
  100. position: relative;
  101. margin: 0;
  102. padding: @dropdown-edge-child-vertical-padding 0;
  103. text-align: left;
  104. list-style-type: none;
  105. background-color: @dropdown-menu-bg;
  106. background-clip: padding-box;
  107. border-radius: @border-radius-base;
  108. outline: none;
  109. box-shadow: @box-shadow-base;
  110. &-item-group-title {
  111. padding: 5px @control-padding-horizontal;
  112. color: @text-color-secondary;
  113. transition: all @animation-duration-slow;
  114. }
  115. &-submenu-popup {
  116. position: absolute;
  117. z-index: @zindex-dropdown;
  118. background: transparent;
  119. box-shadow: none;
  120. transform-origin: 0 0;
  121. ul,
  122. li {
  123. list-style: none;
  124. }
  125. ul {
  126. margin-right: 0.3em;
  127. margin-left: 0.3em;
  128. }
  129. }
  130. // ======================= Item Content =======================
  131. &-item {
  132. position: relative;
  133. display: flex;
  134. align-items: center;
  135. }
  136. &-item-icon {
  137. min-width: 12px;
  138. margin-right: 8px;
  139. font-size: @font-size-sm;
  140. }
  141. &-title-content {
  142. flex: auto;
  143. white-space: nowrap;
  144. > a {
  145. color: inherit;
  146. transition: all @animation-duration-slow;
  147. &:hover {
  148. color: inherit;
  149. }
  150. &::after {
  151. position: absolute;
  152. top: 0;
  153. right: 0;
  154. bottom: 0;
  155. left: 0;
  156. content: '';
  157. }
  158. }
  159. }
  160. // =========================== Item ===========================
  161. &-item,
  162. &-submenu-title {
  163. clear: both;
  164. margin: 0;
  165. padding: @dropdown-vertical-padding @control-padding-horizontal;
  166. color: @text-color;
  167. font-weight: normal;
  168. font-size: @dropdown-font-size;
  169. line-height: @dropdown-line-height;
  170. cursor: pointer;
  171. transition: all @animation-duration-slow;
  172. &:first-child {
  173. & when (@dropdown-edge-child-vertical-padding = 0) {
  174. border-radius: @border-radius-base @border-radius-base 0 0;
  175. }
  176. }
  177. &:last-child {
  178. & when (@dropdown-edge-child-vertical-padding = 0) {
  179. border-radius: 0 0 @border-radius-base @border-radius-base;
  180. }
  181. }
  182. &-selected {
  183. color: @dropdown-selected-color;
  184. background-color: @dropdown-selected-bg;
  185. }
  186. &:hover {
  187. background-color: @item-hover-bg;
  188. }
  189. &-disabled {
  190. color: @disabled-color;
  191. cursor: not-allowed;
  192. &:hover {
  193. color: @disabled-color;
  194. background-color: @dropdown-menu-submenu-disabled-bg;
  195. cursor: not-allowed;
  196. }
  197. a {
  198. pointer-events: none;
  199. }
  200. }
  201. &-divider {
  202. height: 1px;
  203. margin: 4px 0;
  204. overflow: hidden;
  205. line-height: 0;
  206. background-color: @border-color-split;
  207. }
  208. .@{dropdown-prefix-cls}-menu-submenu-expand-icon {
  209. position: absolute;
  210. right: @padding-xs;
  211. .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
  212. margin-right: 0 !important;
  213. color: @text-color-secondary;
  214. font-size: 10px;
  215. font-style: normal;
  216. }
  217. }
  218. }
  219. &-item-group-list {
  220. margin: 0 8px;
  221. padding: 0;
  222. list-style: none;
  223. }
  224. &-submenu-title {
  225. padding-right: @control-padding-horizontal + @font-size-sm;
  226. }
  227. &-submenu-vertical {
  228. position: relative;
  229. }
  230. &-submenu-vertical > & {
  231. position: absolute;
  232. top: 0;
  233. left: 100%;
  234. min-width: 100%;
  235. margin-left: 4px;
  236. transform-origin: 0 0;
  237. }
  238. &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
  239. &,
  240. .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
  241. color: @disabled-color;
  242. background-color: @dropdown-menu-submenu-disabled-bg;
  243. cursor: not-allowed;
  244. }
  245. }
  246. // https://github.com/ant-design/ant-design/issues/19264
  247. &-submenu-selected &-submenu-title {
  248. color: @primary-color;
  249. }
  250. }
  251. &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
  252. &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
  253. &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter,
  254. &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter,
  255. &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
  256. &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
  257. animation-name: antSlideUpIn;
  258. }
  259. &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
  260. &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
  261. &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter,
  262. &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter,
  263. &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
  264. &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
  265. animation-name: antSlideDownIn;
  266. }
  267. &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
  268. &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter,
  269. &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
  270. animation-name: antSlideUpOut;
  271. }
  272. &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
  273. &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter,
  274. &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
  275. animation-name: antSlideDownOut;
  276. }
  277. }
  278. .@{dropdown-prefix-cls}-trigger,
  279. .@{dropdown-prefix-cls}-link,
  280. .@{dropdown-prefix-cls}-button {
  281. > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
  282. font-size: 10px;
  283. vertical-align: baseline;
  284. }
  285. }
  286. .@{dropdown-prefix-cls}-button {
  287. white-space: nowrap;
  288. &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
  289. &-loading,
  290. &-loading + .@{ant-prefix}-btn {
  291. cursor: default;
  292. pointer-events: none;
  293. }
  294. &-loading + .@{ant-prefix}-btn::before {
  295. display: block;
  296. }
  297. &:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
  298. padding-right: @padding-xs;
  299. padding-left: @padding-xs;
  300. }
  301. }
  302. }
  303. // https://github.com/ant-design/ant-design/issues/4903
  304. .@{dropdown-prefix-cls}-menu-dark {
  305. &,
  306. .@{dropdown-prefix-cls}-menu {
  307. background: @menu-dark-bg;
  308. }
  309. .@{dropdown-prefix-cls}-menu-item,
  310. .@{dropdown-prefix-cls}-menu-submenu-title,
  311. .@{dropdown-prefix-cls}-menu-item > a,
  312. .@{dropdown-prefix-cls}-menu-item > .@{iconfont-css-prefix} + span > a {
  313. color: @text-color-secondary-dark;
  314. .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
  315. color: @text-color-secondary-dark;
  316. }
  317. &:hover {
  318. color: @text-color-inverse;
  319. background: transparent;
  320. }
  321. }
  322. .@{dropdown-prefix-cls}-menu-item-selected {
  323. &,
  324. &:hover,
  325. > a {
  326. color: @text-color-inverse;
  327. background: @primary-color;
  328. }
  329. }
  330. }
  331. @import './rtl';