Skip to content

Fix [Feature Request] Dropdown in ButtonGroup(#12815) #12819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ziyoung merged 12 commits into from
Sep 26, 2018
Merged

Fix [Feature Request] Dropdown in ButtonGroup(#12815) #12819

Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5b796f6
Merge pull request #1 from ElemeFE/dev
bluejfox May 12, 2017
325cc8e
Merge pull request #2 from ElemeFE/dev
bluejfox May 22, 2017
56f95e1
Merge pull request #4 from ElemeFE/dev
bluejfox Aug 17, 2017
73eb4ef
Merge pull request #5 from ElemeFE/dev
bluejfox Feb 5, 2018
86da2e4
Merge pull request #6 from ElemeFE/dev
bluejfox Apr 16, 2018
e990707
Merge pull request #10 from ElemeFE/dev
bluejfox May 29, 2018
b4ec306
Merge pull request #11 from ElemeFE/master
bluejfox Jul 3, 2018
4eb92bd
Merge pull request #12 from ElemeFE/dev
bluejfox Aug 10, 2018
0d75906
Merge pull request #14 from ElemeFE/dev
bluejfox Sep 19, 2018
6e95460
[Button]Support Dropdown in ButtonGroup(#12815)
bluejfox Sep 19, 2018
f5df006
[Button]Support Dropdown in ButtonGroup(#12815)
bluejfox Sep 19, 2018
74eebdc
[Button]Support Dropdown in ButtonGroup(#12815)
bluejfox Sep 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion packages/theme-chalk/src/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
display: inline-block;
vertical-align: middle;

& .el-button {
& > .el-button {
float: left;
position: relative;
& + .el-button {
Expand Down Expand Up @@ -232,6 +232,19 @@
z-index: 1;
}
}

& > .el-dropdown {
& > .el-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;

@each $type in (primary, success, warning, danger, info) {
Copy link
Contributor

@ziyoung ziyoung Sep 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary to use a loop?

border-left-color: rgba($--color-white, 0.5);

This also should work.

Copy link
Contributor Author

@bluejfox bluejfox Sep 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When Dropdown is the last child in ButtonGroup, the Button which in Dropdown isn't be considered the last child in the ButtonGroup, and the Dropdown is usually used as the last child in the ButtonGroup, so I add below loop style.

@each $type in (primary, success, warning, danger, info) {
  &.el-button--#{$type} {
    border-left-color: rgba($--color-white, 0.5);
  }
}

The capture when remove loop style definition
image

Copy link
Contributor

@ziyoung ziyoung Sep 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bluejfox I find this also works for me.

  & > .el-dropdown {
    & > .el-button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    border-left-color: rgba($--color-white, 0.5);
- 	 @each $type in (primary, success, warning, danger, info) {
-   	   &.el-button--#{$type} {
-		border-left-color: rgba($--color-white, 0.5);
- 	   }
      }
   }
}

image

Copy link
Contributor Author

@bluejfox bluejfox Sep 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ziyoung Sorry, I misunderstood your point.I had modified style source.Pls confirm it.

&.el-button--#{$type} {
border-left-color: rgba($--color-white, 0.5);
}
}
}
}

@each $type in (primary, success, warning, danger, info) {
.el-button--#{$type} {
Expand Down