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

fix #370 by moving icon placeholder to a mixin

Browse source
This commit is contained in:
Cassie Tarakajian 2017-06-26 17:46:47 -04:00
parent 1359a72f2d
commit 080e9aa823
10 changed files with 35 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/styles/abstracts/_mixins.scss
View file

@ -17,3 +17,23 @@
} }
} }
} }
@mixin icon() {
@include themify() {
color: getThemifyVariable('icon-color');
& g {
fill: getThemifyVariable('icon-color');
}
&:hover {
color: getThemifyVariable('icon-hover-color');
& g {
opacity: 1;
fill: getThemifyVariable('icon-hover-color');
}
}
}
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
}

20
client/styles/abstracts/_placeholders.scss
View file

@ -31,26 +31,6 @@
} }
} }
%icon {
@include themify() {
color: getThemifyVariable('icon-color');
& g {
fill: getThemifyVariable('icon-color');
}
&:hover {
color: getThemifyVariable('icon-hover-color');
& g {
opacity: 1;
fill: getThemifyVariable('icon-hover-color');
}
}
}
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
}
%icon-toast{ %icon-toast{
@include themify() { @include themify() {
color: $toast-text-color color: $toast-text-color

4
client/styles/components/_about.scss
View file

@ -25,9 +25,7 @@
} }
.about__exit-button { .about__exit-button {
@include themify() { @include icon();
@extend %icon;
}
} }
.about__logo { .about__logo {

8
client/styles/components/_console.scss
View file

@ -72,9 +72,7 @@
.preview-console__collapse { .preview-console__collapse {
padding-top: #{3 / $base-font-size}rem; padding-top: #{3 / $base-font-size}rem;
@include themify() { @include icon();
@extend %icon;
}
.preview-console--collapsed & { .preview-console--collapsed & {
display: none; display: none;
} }
@ -82,9 +80,7 @@
.preview-console__expand { .preview-console__expand {
padding-top: #{3 / $base-font-size}rem; padding-top: #{3 / $base-font-size}rem;
@include themify() { @include icon();
@extend %icon;
}
display: none; display: none;
.preview-console--collapsed & { .preview-console--collapsed & {
display: inline-block; display: inline-block;

12
client/styles/components/_editor.scss
View file

@ -187,9 +187,7 @@
width: 14px; width: 14px;
height: 14px; height: 14px;
@include themify() { @include icon();
@extend %icon;
}
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -231,9 +229,7 @@
margin-left: #{8 / $base-font-size}rem; margin-left: #{8 / $base-font-size}rem;
@include themify() { @include icon();
@extend %icon;
}
background: transparent url(../images/exit.svg) no-repeat; background: transparent url(../images/exit.svg) no-repeat;
} }
@ -249,9 +245,7 @@
} }
.editor__options-button { .editor__options-button {
@include themify() { @include icon();
@extend %icon;
}
position: absolute; position: absolute;
top: #{10 / $base-font-size}rem; top: #{10 / $base-font-size}rem;
right: #{2 / $base-font-size}rem; right: #{2 / $base-font-size}rem;

4
client/styles/components/_error-modal.scss
View file

@ -12,9 +12,7 @@
} }
.error-modal__exit-button { .error-modal__exit-button {
@include themify() { @include icon();
@extend %icon;
}
} }
.error-modal__content { .error-modal__content {

8
client/styles/components/_modal.scss
View file

@ -22,9 +22,7 @@
} }
.modal__exit-button { .modal__exit-button {
@include themify() { @include icon();
@extend %icon;
}
} }
.modal__header { .modal__header {
@ -96,9 +94,7 @@
} }
.keyboard-shortcuts__close { .keyboard-shortcuts__close {
@include themify() { @include icon();
@extend %icon;
}
} }
.keyboard-shortcut-item { .keyboard-shortcut-item {

4
client/styles/components/_preferences.scss
View file

@ -17,9 +17,7 @@
} }
.preferences__exit-button { .preferences__exit-button {
@include themify() { @include icon();
@extend %icon;
}
padding-top: #{5 / $base-font-size}rem; padding-top: #{5 / $base-font-size}rem;
margin-right: #{-6 / $base-font-size}rem; margin-right: #{-6 / $base-font-size}rem;
} }

14
client/styles/components/_sidebar.scss
View file

@ -25,9 +25,7 @@
} }
.sidebar__add { .sidebar__add {
@include themify() { @include icon();
@extend %icon;
}
.sidebar--contracted & { .sidebar--contracted & {
display: none; display: none;
} }
@ -124,8 +122,8 @@
} }
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@include icon();
@include themify() { @include themify() {
@extend %icon;
padding: #{4 / $base-font-size}rem 0; padding: #{4 / $base-font-size}rem 0;
background-color: map-get($theme-map, 'file-selected-color'); background-color: map-get($theme-map, 'file-selected-color');
padding-right: #{6 / $base-font-size}rem; padding-right: #{6 / $base-font-size}rem;
@ -183,9 +181,7 @@
} }
.sidebar__expand { .sidebar__expand {
@include themify() { @include icon();
@extend %icon;
}
position: absolute; position: absolute;
top: #{7 / $base-font-size}rem; top: #{7 / $base-font-size}rem;
left: #{1 / $base-font-size}rem; left: #{1 / $base-font-size}rem;
@ -200,9 +196,7 @@
} }
.sidebar__contract { .sidebar__contract {
@include themify() { @include icon();
@extend %icon;
}
position: absolute; position: absolute;
top: #{7 / $base-font-size}rem; top: #{7 / $base-font-size}rem;
left: #{34 / $base-font-size}rem; left: #{34 / $base-font-size}rem;

4
client/styles/components/_sketch-list.scss
View file

@ -68,9 +68,7 @@
} }
.sketch-list__exit-button { .sketch-list__exit-button {
@include themify() { @include icon();
@extend %icon;
}
margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem; margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
} }