Skip to content

Add position attribute on button #7542

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
merged 7 commits into from
Oct 19, 2021
Merged

Add position attribute on button #7542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a859fd7
Add position attribute on button
Oct 6, 2021
60c569a
Merge branch 'master' into bug/7481-align-copy-icons-firefox
GhBogdan97 Oct 9, 2021
2d7d916
Merge branch 'master' into bug/7481-align-copy-icons-firefox
char0n Oct 11, 2021
81f2903
Add flex and SVG improvements
GhBogdan97 Oct 11, 2021
76d1133
Merge branch 'bug/7481-align-copy-icons-firefox' of https://github.co…
GhBogdan97 Oct 11, 2021
365a044
Merge branch 'master' into bug/7481-align-copy-icons-firefox
GhBogdan97 Oct 13, 2021
a666823
Merge branch 'master' into bug/7481-align-copy-icons-firefox
char0n Oct 19, 2021
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
12 changes: 8 additions & 4 deletions src/style/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,9 @@ button
.copy-to-clipboard
{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 10px;
right: 100px;
width: 30px;
Expand All @@ -181,10 +184,11 @@ button

button
{
padding-left: 25px;
flex-grow: 1;
Copy link
Contributor

@char0n char0n Oct 19, 2021

Choose a reason for hiding this comment

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

Note:

An element with a flex-shrink value of 1 will shrink, but not smaller than it’s content.
When we set a flex-grow value of 1 or larger, we are telling our element to grow to take up the available space

flex-shrink: 1;
border: none;
height: 25px;
background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' aria-hidden='true'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></svg>") center center no-repeat;
background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill='#ffffff' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></g></svg>") center center no-repeat;
}
}

Expand All @@ -195,9 +199,9 @@ button
right: 10px;
width: 20px;
height: 20px;

button
{
padding-left: 18px;
height: 18px
height: 18px;
}
}
3 changes: 3 additions & 0 deletions src/style/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,6 +717,9 @@
color: white;
font-size: 14px;
height: 30px;
justify-content: center;
align-items: center;
display: flex;
}

.scheme-container
Expand Down