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

Merge pull request #1366 from elit-altum/center-toolbar-icons

Browse source 
fix(toolbar): centered the toolbar icons
This commit is contained in:
Cassie Tarakajian 2020-04-09 16:51:41 -04:00 committed by GitHub
commit 65cd912ef3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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: #{20 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
} }
} }
@ -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: #{20 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
}
} }
.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: #{20 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
} }
} }