mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 00:49:39 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity
997cafaeae
ant-design/components/dropdown/style/index.less
二货机器人 b4730281a9
refactor: Dropdown cssinjs support (#35214) 
* chore: init

* chore: dropdown style

* chore: more style

* chore: icon style

* chore: more style

* chore: diff shows the cache path

* chore: motion support

* chore: more style

* feat: status

* chore: sub menu style

* chore: all dropdown style

* fix: ts

* chore: update snapshot

* Update components/dropdown/style/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* chore: update style

Co-authored-by: MadCcc <1075746765@qq.com>
2022-04-25 10:54:00 +08:00

395 lines
11 KiB
Plaintext
Raw Blame History

// @import '../../style/themes/index';
// @import '../../style/mixins/index';
// @import './status';
// @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
// .@{dropdown-prefix-cls} {
// .reset-component();
// position: absolute;
// top: -9999px;
// left: -9999px;
// z-index: @zindex-dropdown;
// display: block;
// &::before {
// position: absolute;
// top: -@popover-distance + @popover-arrow-width;
// right: 0;
// bottom: -@popover-distance + @popover-arrow-width;
// left: -7px;
// z-index: -9999;
// opacity: 0.0001;
// content: ' ';
// }
// &-wrap {
// position: relative;
// .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
// font-size: 10px;
// }
// .@{iconfont-css-prefix}-down::before {
// transition: transform @animation-duration-base;
// }
// }
// &-wrap-open {
// .@{iconfont-css-prefix}-down::before {
// transform: rotate(180deg);
// }
// }
// &-hidden,
// &-menu-hidden,
// &-menu-submenu-hidden {
// display: none;
// }
// // Offset the popover to account for the dropdown arrow
// &-show-arrow&-placement-topLeft,
// &-show-arrow&-placement-top,
// &-show-arrow&-placement-topRight {
// padding-bottom: @popover-distance;
// }
// &-show-arrow&-placement-bottomLeft,
// &-show-arrow&-placement-bottom,
// &-show-arrow&-placement-bottomRight {
// padding-top: @popover-distance;
// }
// // Arrows
// // .popover-arrow is outer, .popover-arrow:after is inner
// &-arrow {
// position: absolute;
// z-index: 1; // lift it up so the menu wouldn't cask shadow on it
// display: block;
// width: @popover-arrow-width;
// height: @popover-arrow-width;
// background: linear-gradient(
// 135deg,
// transparent 40%,
// @popover-bg 40%
// ); // Use linear-gradient to prevent arrow from covering text
// .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
// }
// &-placement-top > &-arrow,
// &-placement-topLeft > &-arrow,
// &-placement-topRight > &-arrow {
// bottom: @popover-arrow-width * sqrt((1 / 2)) + 2px;
// box-shadow: 3px 3px 7px -3px fade(@black, 10%);
// transform: rotate(45deg);
// }
// &-placement-top > &-arrow {
// left: 50%;
// transform: translateX(-50%) rotate(45deg);
// }
// &-placement-topLeft > &-arrow {
// left: 16px;
// }
// &-placement-topRight > &-arrow {
// right: 16px;
// }
// &-placement-bottom > &-arrow,
// &-placement-bottomLeft > &-arrow,
// &-placement-bottomRight > &-arrow {
// top: (@popover-arrow-width + 2px) * sqrt((1 / 2));
// box-shadow: 2px 2px 5px -2px fade(@black, 10%);
// transform: rotate(-135deg) translateY(-0.5px);
// }
// &-placement-bottom > &-arrow {
// left: 50%;
// transform: translateX(-50%) rotate(-135deg) translateY(-0.5px);
// }
// &-placement-bottomLeft > &-arrow {
// left: 16px;
// }
// &-placement-bottomRight > &-arrow {
// right: 16px;
// }
// &-menu {
// position: relative;
// margin: 0;
// padding: @dropdown-edge-child-vertical-padding 0;
// text-align: left;
// list-style-type: none;
// background-color: @dropdown-menu-bg;
// background-clip: padding-box;
// border-radius: @border-radius-base;
// outline: none;
// box-shadow: @box-shadow-base;
// &-item-group-title {
// padding: 5px @control-padding-horizontal;
// color: @text-color-secondary;
// transition: all @animation-duration-slow;
// }
// &-submenu-popup {
// position: absolute;
// z-index: @zindex-dropdown;
// background: transparent;
// box-shadow: none;
// transform-origin: 0 0;
// ul,
// li {
// list-style: none;
// }
// ul {
// margin-right: 0.3em;
// margin-left: 0.3em;
// }
// }
// // ======================= Item Content =======================
// &-item {
// position: relative;
// display: flex;
// align-items: center;
// }
// &-item-icon {
// min-width: 12px;
// margin-right: 8px;
// font-size: @font-size-sm;
// }
// &-title-content {
// flex: auto;
// > a {
// color: inherit;
// transition: all @animation-duration-slow;
// &:hover {
// color: inherit;
// }
// &::after {
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// content: '';
// }
// }
// }
// // =========================== Item ===========================
// &-item,
// &-submenu-title {
// clear: both;
// margin: 0;
// padding: @dropdown-vertical-padding @control-padding-horizontal;
// color: @text-color;
// font-weight: normal;
// font-size: @dropdown-font-size;
// line-height: @dropdown-line-height;
// cursor: pointer;
// transition: all @animation-duration-slow;
// &:first-child {
// & when (@dropdown-edge-child-vertical-padding = 0) {
// border-radius: @border-radius-base @border-radius-base 0 0;
// }
// }
// &:last-child {
// & when (@dropdown-edge-child-vertical-padding = 0) {
// border-radius: 0 0 @border-radius-base @border-radius-base;
// }
// }
// &-selected {
// color: @dropdown-selected-color;
// background-color: @dropdown-selected-bg;
// }
// &:hover,
// &&-active {
// background-color: @item-hover-bg;
// }
// &-disabled {
// color: @disabled-color;
// cursor: not-allowed;
// &:hover {
// color: @disabled-color;
// background-color: @dropdown-menu-submenu-disabled-bg;
// cursor: not-allowed;
// }
// a {
// pointer-events: none;
// }
// }
// &-divider {
// height: 1px;
// margin: 4px 0;
// overflow: hidden;
// line-height: 0;
// background-color: @border-color-split;
// }
// .@{dropdown-prefix-cls}-menu-submenu-expand-icon {
// position: absolute;
// right: @padding-xs;
// .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
// margin-right: 0 !important;
// color: @text-color-secondary;
// font-size: 10px;
// font-style: normal;
// }
// }
// }
// &-item-group-list {
// margin: 0 8px;
// padding: 0;
// list-style: none;
// }
// &-submenu-title {
// padding-right: @control-padding-horizontal + @font-size-sm;
// }
// &-submenu-vertical {
// position: relative;
// }
// &-submenu-vertical > & {
// position: absolute;
// top: 0;
// left: 100%;
// min-width: 100%;
// margin-left: 4px;
// transform-origin: 0 0;
// }
// &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
// &,
// .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
// color: @disabled-color;
// background-color: @dropdown-menu-submenu-disabled-bg;
// cursor: not-allowed;
// }
// }
// // https://github.com/ant-design/ant-design/issues/19264
// &-submenu-selected &-submenu-title {
// color: @primary-color;
// }
// }
// &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom,
// &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottom,
// &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
// &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
// animation-name: antSlideUpIn;
// }
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-top,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-top,
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
// animation-name: antSlideDownIn;
// }
// &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottom,
// &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
// animation-name: antSlideUpOut;
// }
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-top,
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
// animation-name: antSlideDownOut;
// }
// }
// .@{dropdown-prefix-cls}-trigger,
// .@{dropdown-prefix-cls}-link,
// .@{dropdown-prefix-cls}-button {
// > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
// font-size: 10px;
// vertical-align: baseline;
// }
// }
// .@{dropdown-prefix-cls}-button {
// white-space: nowrap;
// &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
// &-loading,
// &-loading + .@{ant-prefix}-btn {
// cursor: default;
// pointer-events: none;
// }
// &-loading + .@{ant-prefix}-btn::before {
// display: block;
// }
// &:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
// padding-right: @padding-xs;
// padding-left: @padding-xs;
// }
// }
// }
// // https://github.com/ant-design/ant-design/issues/4903
// .@{dropdown-prefix-cls}-menu-dark {
// &,
// .@{dropdown-prefix-cls}-menu {
// background: @menu-dark-bg;
// }
// .@{dropdown-prefix-cls}-menu-item,
// .@{dropdown-prefix-cls}-menu-submenu-title,
// .@{dropdown-prefix-cls}-menu-item > a,
// .@{dropdown-prefix-cls}-menu-item > .@{iconfont-css-prefix} + span > a {
// color: @text-color-secondary-dark;
// .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
// color: @text-color-secondary-dark;
// }
// &:hover {
// color: @text-color-inverse;
// background: transparent;
// }
// }
// .@{dropdown-prefix-cls}-menu-item-selected {
// &,
// &:hover,
// > a {
// color: @text-color-inverse;
// background: @primary-color;
// }
// }
// }
// @import './rtl';
Reference in New Issue View Git Blame Copy Permalink