Skip to content

Commit 9d7da0d

Browse files
author
cchaos
committed
WIP: Updating icon button and removing more amsterdam overrides
1 parent 3ae838c commit 9d7da0d

11 files changed

Lines changed: 240 additions & 375 deletions

File tree

‎src/components/button/_button.scss‎

Lines changed: 70 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
&.euiButton--small {
2121
height: $euiButtonHeightSmall;
2222
line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
23+
border-radius: $euiBorderRadius * (2 / 3);
2324
}
2425

2526
// &:not([class*='isDisabled']) {
@@ -59,77 +60,77 @@
5960
}
6061

6162
// Create button modifiers based upon the map.
62-
@each $name, $color in $euiButtonTypes {
63-
.euiButton--#{$name} {
64-
@if ($name == 'ghost') {
65-
// Ghost is unique and ALWAYS sits against a dark background.
66-
color: $color;
67-
} @else if ($name == 'text') {
68-
// The default color is lighter than the normal text color, make the it the text color
69-
color: $euiTextColor;
70-
} @else {
71-
// Other colors need to check their contrast against the page background color.
72-
color: makeHighContrastColor($color, $euiPageBackgroundColor);
73-
}
74-
75-
border-color: $color;
76-
77-
&.euiButton--fill {
78-
background-color: $color;
79-
border-color: $color;
80-
81-
// The function makes that hexes safe for theming
82-
$fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
83-
84-
color: $fillTextColor;
85-
86-
&:not([class*='isDisabled']) {
87-
&:hover,
88-
&:focus,
89-
&:focus-within {
90-
background-color: darken($color, 5%);
91-
border-color: darken($color, 5%);
92-
}
93-
}
94-
}
95-
96-
&:not([class*='isDisabled']) {
97-
$shadowColor: $euiShadowColor;
98-
@if ($name == 'ghost') {
99-
$shadowColor: $euiColorInk;
100-
} @else if (lightness($euiTextColor) < 50) {
101-
// Only if this is the light theme do we use the button variant color to colorize the shadow
102-
$shadowColor: desaturate($color, 60%);
103-
}
104-
105-
@include euiSlightShadow($shadowColor);
106-
107-
&:hover,
108-
&:focus,
109-
&:focus-within {
110-
@include euiSlightShadowHover($shadowColor);
111-
background-color: transparentize($color, .9);
112-
}
113-
}
114-
}
115-
}
63+
// @each $name, $color in $euiButtonTypes {
64+
// .euiButton--#{$name} {
65+
// @if ($name == 'ghost') {
66+
// // Ghost is unique and ALWAYS sits against a dark background.
67+
// color: $color;
68+
// } @else if ($name == 'text') {
69+
// // The default color is lighter than the normal text color, make the it the text color
70+
// color: $euiTextColor;
71+
// } @else {
72+
// // Other colors need to check their contrast against the page background color.
73+
// color: makeHighContrastColor($color, $euiPageBackgroundColor);
74+
// }
75+
76+
// border-color: $color;
77+
78+
// &.euiButton--fill {
79+
// background-color: $color;
80+
// border-color: $color;
81+
82+
// // The function makes that hexes safe for theming
83+
// $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
84+
85+
// color: $fillTextColor;
86+
87+
// &:not([class*='isDisabled']) {
88+
// &:hover,
89+
// &:focus,
90+
// &:focus-within {
91+
// background-color: darken($color, 5%);
92+
// border-color: darken($color, 5%);
93+
// }
94+
// }
95+
// }
96+
97+
// &:not([class*='isDisabled']) {
98+
// $shadowColor: $euiShadowColor;
99+
// @if ($name == 'ghost') {
100+
// $shadowColor: $euiColorInk;
101+
// } @else if (lightness($euiTextColor) < 50) {
102+
// // Only if this is the light theme do we use the button variant color to colorize the shadow
103+
// $shadowColor: desaturate($color, 60%);
104+
// }
105+
106+
// @include euiSlightShadow($shadowColor);
107+
108+
// &:hover,
109+
// &:focus,
110+
// &:focus-within {
111+
// @include euiSlightShadowHover($shadowColor);
112+
// background-color: transparentize($color, .9);
113+
// }
114+
// }
115+
// }
116+
// }
116117

117118
// Fix ghost/disabled look specifically
118-
.euiButton.euiButton-isDisabled.euiButton--ghost {
119-
&,
120-
&:hover,
121-
&:focus,
122-
&:focus-within {
123-
@include euiSlightShadow($euiColorInk);
124-
color: $euiButtonColorGhostDisabled;
125-
border-color: $euiButtonColorGhostDisabled;
126-
}
127-
128-
&.euiButton--fill {
129-
background-color: $euiButtonColorGhostDisabled;
130-
color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
131-
}
132-
}
119+
// .euiButton.euiButton-isDisabled.euiButton--ghost {
120+
// &,
121+
// &:hover,
122+
// &:focus,
123+
// &:focus-within {
124+
// @include euiSlightShadow($euiColorInk);
125+
// color: $euiButtonColorGhostDisabled;
126+
// border-color: $euiButtonColorGhostDisabled;
127+
// }
128+
129+
// &.euiButton--fill {
130+
// background-color: $euiButtonColorGhostDisabled;
131+
// color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
132+
// }
133+
// }
133134

134135
.euiButton--fullWidth {
135136
display: block;

‎src/components/button/button_empty/_button_empty.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
.euiButtonEmpty {
77
@include euiButton;
8+
border-radius: $euiBorderRadius;
89

910
// border-color: transparent;
1011
// background-color: transparent;
@@ -26,21 +27,23 @@
2627

2728
&.euiButtonEmpty--small {
2829
height: $euiButtonHeightSmall;
30+
border-radius: $euiBorderRadius * .667;
2931
}
3032

3133
&.euiButtonEmpty--xSmall {
3234
height: $euiButtonHeightXSmall;
33-
font-size: $euiFontSizeS;
35+
border-radius: $euiBorderRadius * .667;
36+
font-size: $euiFontSizeXS;
3437
}
3538

3639
&:disabled {
3740
@include euiButtonContentDisabled;
3841

39-
color: $euiButtonColorDisabledText;
42+
// color: $euiButtonColorDisabledText;
4043

41-
&:focus {
42-
background-color: transparent;
43-
}
44+
// &:focus {
45+
// background-color: transparent;
46+
// }
4447

4548
&:hover,
4649
&:focus {

‎src/components/button/button_group/_button_group.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818

1919
.euiButtonGroup__buttons {
20-
@include euiSlightShadow;
20+
// @include euiSlightShadow;
2121
border-radius: $euiBorderRadius + 1px; // Simply for the box-shadow
2222
max-width: 100%;
2323
display: flex;

‎src/components/button/button_group/_button_group_button.scss‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -35,69 +35,69 @@
3535
&:hover,
3636
&:focus,
3737
&:focus-within {
38-
background-color: transparentize($euiColorPrimary, .9);
38+
// background-color: transparentize($euiColorPrimary, .9);
3939
text-decoration: underline;
4040
}
4141
}
4242

4343
&.euiButtonGroupButton-isDisabled {
4444
@include euiButtonContentDisabled;
45-
color: $euiButtonColorDisabledText;
46-
47-
&.euiButtonGroupButton-isSelected {
48-
color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
49-
background-color: $euiButtonColorDisabled;
50-
border-color: $euiButtonColorDisabled;
51-
52-
&:hover,
53-
&:focus,
54-
&:focus-within {
55-
background-color: $euiButtonColorDisabled;
56-
border-color: $euiButtonColorDisabled;
57-
}
58-
}
45+
// color: $euiButtonColorDisabledText;
46+
47+
// &.euiButtonGroupButton-isSelected {
48+
// color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
49+
// background-color: $euiButtonColorDisabled;
50+
// border-color: $euiButtonColorDisabled;
51+
52+
// &:hover,
53+
// &:focus,
54+
// &:focus-within {
55+
// background-color: $euiButtonColorDisabled;
56+
// border-color: $euiButtonColorDisabled;
57+
// }
58+
// }
5959
}
6060

61-
@each $name, $color in $euiButtonTypes {
62-
&.euiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
63-
@if ($name == 'ghost') {
64-
// Ghost is unique and ALWAYS sits against a dark background.
65-
// Compressed styles don't support ghost color, it defaults to the text color
66-
color: $color;
67-
} @else if ($name == 'text') {
68-
// The default color is lighter than the normal text color, make the it the text color
69-
color: $euiTextColor;
70-
} @else {
71-
// Other colors need to check their contrast against the page background color.
72-
color: makeHighContrastColor($color, $euiPageBackgroundColor);
73-
}
74-
75-
&.euiButtonGroupButton-isSelected {
76-
background-color: $color;
77-
border-color: $color;
78-
79-
// The function makes that hexes safe for theming
80-
$fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
81-
82-
color: $fillTextColor;
83-
84-
&:hover,
85-
&:focus,
86-
&:focus-within {
87-
$darkHighlightBg: darken($color, 5%);
88-
89-
background-color: $darkHighlightBg;
90-
border-color: $darkHighlightBg;
91-
}
92-
}
93-
94-
&:hover,
95-
&:focus,
96-
&:focus-within {
97-
background-color: transparentize($color, .9);
98-
}
99-
}
100-
}
61+
// @each $name, $color in $euiButtonTypes {
62+
// &.euiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
63+
// @if ($name == 'ghost') {
64+
// // Ghost is unique and ALWAYS sits against a dark background.
65+
// // Compressed styles don't support ghost color, it defaults to the text color
66+
// color: $color;
67+
// } @else if ($name == 'text') {
68+
// // The default color is lighter than the normal text color, make the it the text color
69+
// color: $euiTextColor;
70+
// } @else {
71+
// // Other colors need to check their contrast against the page background color.
72+
// color: makeHighContrastColor($color, $euiPageBackgroundColor);
73+
// }
74+
75+
// &.euiButtonGroupButton-isSelected {
76+
// background-color: $color;
77+
// border-color: $color;
78+
79+
// // The function makes that hexes safe for theming
80+
// $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
81+
82+
// color: $fillTextColor;
83+
84+
// &:hover,
85+
// &:focus,
86+
// &:focus-within {
87+
// $darkHighlightBg: darken($color, 5%);
88+
89+
// background-color: $darkHighlightBg;
90+
// border-color: $darkHighlightBg;
91+
// }
92+
// }
93+
94+
// &:hover,
95+
// &:focus,
96+
// &:focus-within {
97+
// background-color: transparentize($color, .9);
98+
// }
99+
// }
100+
// }
101101
}
102102

103103
.euiButtonGroupButton__textShift {

0 commit comments

Comments
 (0)