r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fix(toolbar): centered the toolbar icons

Browse source
This commit is contained in:
elit-altum 2020-04-06 20:24:39 +05:30
parent a47245b289
commit 1d1aaccc8e
1 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/styles/components/_toolbar.scss
View file

@ -1,6 +1,9 @@
.toolbar__play-button {
@include themify() {
@extend %toolbar-button;
display: flex;
justify-content: center;
align-items: center;
&--selected {
@extend %toolbar-button--selected;
}
@ -18,8 +21,13 @@
}
}
margin-right: #{15 / $base-font-size}rem;
& span {
padding-left: #{3 / $base-font-size}rem;
span {
padding-left: #{4 / $base-font-size}rem;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
}
@ -30,16 +38,29 @@
.toolbar__stop-button {
@include themify() {
@extend %toolbar-button;
display: flex;
justify-content: center;
align-items: center;
margin-right: #{15 / $base-font-size}rem;
&--selected {
@extend %toolbar-button--selected;
}
}
span {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
}
.toolbar__preferences-button {
@include themify() {
@extend %toolbar-button;
display: flex;
justify-content: center;
align-items: center;
line-height: #{52 / $base-font-size}rem;
&--selected {
@extend %toolbar-button--selected;
@ -50,6 +71,11 @@
margin-left: auto;
& span {
padding-left: #{1 / $base-font-size}rem;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
}