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

@ -16,4 +16,24 @@
$theme-map: null !global;
}
}
}
@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{
@include themify() {
color: $toast-text-color

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

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

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

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

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

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

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

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

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

@ -17,9 +17,7 @@
}
.preferences__exit-button {
@include themify() {
@extend %icon;
}
@include icon();
padding-top: #{5 / $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 {
@include themify() {
@extend %icon;
}
@include icon();
.sidebar--contracted & {
display: none;
}
@ -124,8 +122,8 @@
}
.sidebar__file-item-show-options {
@include icon();
@include themify() {
@extend %icon;
padding: #{4 / $base-font-size}rem 0;
background-color: map-get($theme-map, 'file-selected-color');
padding-right: #{6 / $base-font-size}rem;
@ -183,9 +181,7 @@
}
.sidebar__expand {
@include themify() {
@extend %icon;
}
@include icon();
position: absolute;
top: #{7 / $base-font-size}rem;
left: #{1 / $base-font-size}rem;
@ -200,9 +196,7 @@
}
.sidebar__contract {
@include themify() {
@extend %icon;
}
@include icon();
position: absolute;
top: #{7 / $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 {
@include themify() {
@extend %icon;
}
@include icon();
margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
}