Skip to content
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

Yui button inspired style #10061

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Yui button inspired style #10061

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
18d825a
[yui_button_inspired_style] add button yui styled
scherler Dec 16, 2024
72a6662
[yui_button_inspired_style] formating change
scherler Dec 16, 2024
f95810f
[yui_button_inspired_style] remove extra radius
scherler Dec 16, 2024
2c5f287
[yui_button_inspired_style] online add one new
scherler Dec 16, 2024
186d079
Merge branch 'master' into yui_button_inspired_style
scherler Dec 16, 2024
d823c78
Merge branch 'master' into yui_button_inspired_style
scherler Dec 17, 2024
6188712
[yui_button_inspired_style] add color specific outline support
scherler Dec 20, 2024
c41c2bb
Merge branch 'yui_button_inspired_style' of github.com:scherler/jenki…
scherler Dec 20, 2024
b41d99f
[yui_button_inspired_style] lint fix
scherler Dec 20, 2024
80665d4
Merge branch 'master' into yui_button_inspired_style
scherler Dec 20, 2024
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
60 changes: 60 additions & 0 deletions src/main/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,36 @@
}
}

.jenkins-button--outline {
color: var(--text-color) !important;
border: 2px solid var(--text-color);
font-weight: bold;
Copy link
Contributor

Choose a reason for hiding this comment

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

These props could be inherited from the base jenkins-button class.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Well but the original yui outline button had been bold, but if you want we can change it but IMHO it makes more sense bold.
image
vs
image

font-size: var(--font-size-xs);

&::before {
background: transparent !important;
}

&:not(:disabled) {
&:hover {
border: 2px solid var(--accent-color) !important;
Copy link
Contributor

@janfaracik janfaracik Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This wouldn't work if paired with colour modifiers. We've been using currentColor in our other button modifiers to inherit the colour from modifiers.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

hmm are you sure
image
however I added jenkins-button--outline[class*="color"]

Copy link
Contributor Author

Choose a reason for hiding this comment

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

jenkins-button jenkins-button--outline jenkins-!-success-color
image
:hover
image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

6188712

Copy link
Contributor

Choose a reason for hiding this comment

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

Heya, I'm travelling today but I'll take a look as soon as I can :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

good traveling and MCAAHNY

color: var(--accent-color) !important;
}

&:active,
&:focus-visible {
&::before {
opacity: 0.8;
}

&::after {
box-shadow: 0 0 0 0.33rem var(--accent-color);
opacity: 0.2;
}
}
}
}

.jenkins-button--tertiary {
&::before {
background: transparent;
Expand Down Expand Up @@ -117,6 +147,36 @@
}
}

.jenkins-button--outline[class*="color"] {
color: var(--color) !important;
border: 2px solid var(--color);

&::before {
background: var(--color) !important;
}

&:not(:disabled) {
&:hover {
border: 2px solid var(--background) !important;
color: var(--background) !important;
background: var(--color) !important;
opacity: 0.8;
}

&:active,
&:focus-visible {
&::before {
opacity: 0.8;
}

&::after {
box-shadow: 0 0 0 0.33rem var(--background);
opacity: 0.2;
}
}
}
}

.jenkins-button--primary[class*="color"] {
background: transparent;
color: var(--background) !important;
Expand Down
Loading