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