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

start to integrate themes to placeholders

Browse source
This commit is contained in:
catarak 2016-09-13 16:42:06 -04:00 committed by Cassie Tarakajian
parent 103ebd2014
commit 19df6d6ee4
12 changed files with 155 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/images/play.svg
View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="16px" height="16px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>play</title> <title>play</title>
<!-- <desc>Created with Sketch.</desc> --> <!-- <desc>Created with Sketch.</desc> -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -1,4 +1,5 @@
%toolbar-button { %toolbar-button {
@include themify() {
display: inline-block; display: inline-block;
height: #{44 / $base-font-size}rem; height: #{44 / $base-font-size}rem;
width: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
@ -8,41 +9,44 @@
cursor: pointer; cursor: pointer;
border: none; border: none;
outline: none; outline: none;
background-color: $light-button-background-color; background-color: getThemifyVariable('toolbar-button-background-color');
color: $light-button-color; color: getThemifyVariable('toolbar-button-color');
& g { & g {
fill: $light-toolbar-button-color; fill: getThemifyVariable('toolbar-button-color');
} }
&:hover { &:hover {
background-color: $light-button-background-hover-color; background-color: getThemifyVariable('button-background-hover-color');
color: $light-button-hover-color; color: getThemifyVariable('button-hover-color');
& g { & g {
fill: $light-button-hover-color; fill: getThemifyVariable('button-hover-color');
} }
} }
&--selected { &--selected {
background-color: $light-button-background-hover-color; background-color: getThemifyVariable('button-background-hover-color');
& g { & g {
fill: $light-button-hover-color; fill: getThemifyVariable('button-hover-color');
}
} }
} }
} }
%icon { %icon {
@include themify() {
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
color: $light-icon-color; color: getThemifyVariable('icon-color');
& g { & g {
fill: $light-icon-color; fill: getThemifyVariable('icon-color');
} }
&:hover { &:hover {
color: $light-icon-hover-color; color: getThemifyVariable('icon-hover-color');
& g { & g {
opacity: 1; opacity: 1;
fill: $light-icon-hover-color; fill: getThemifyVariable('icon-hover-color');
}
} }
} }
} }
@ -68,19 +72,21 @@
%preferences-button { %preferences-button {
@extend %toolbar-button; @extend %toolbar-button;
color: $light-primary-text-color; @include themify() {
background-color: $light-modal-button-background-color; color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('modal-button-background-color');
padding: 0; padding: 0;
margin-bottom: #{28 / $base-font-size}rem; margin-bottom: #{28 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem; line-height: #{50 / $base-font-size}rem;
& g { & g {
fill: $light-primary-text-color; fill: getThemifyVariable('primary-text-color');
} }
&:hover { &:hover {
background-color: $light-button-background-hover-color; background-color: getThemifyVariable('button-background-hover-color');
color: $light-button-hover-color; color: getThemifyVariable('button-hover-color');
& g { & g {
fill: $light-button-hover-color; fill: getThemifyVariable('button-hover-color');
}
} }
} }
} }

2
client/styles/abstracts/_variables.scss
View file

@ -15,6 +15,7 @@ $themes: (
button-color: $black, button-color: $black,
button-border-color: #979797, button-border-color: #979797,
toolbar-button-color: $p5js-pink, toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #f4f4f4,
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046, button-background-active-color: #f10046,
button-hover-color: $white, button-hover-color: $white,
@ -38,6 +39,7 @@ $themes: (
button-color: $black, button-color: $black,
button-border-color: #979797, button-border-color: #979797,
toolbar-button-color: $p5js-pink, toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #424242,
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046, button-background-active-color: #f10046,
button-hover-color: $white, button-hover-color: $white,

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

@ -12,8 +12,10 @@
} }
.about__exit-button { .about__exit-button {
@include themify() {
@extend %icon; @extend %icon;
} }
}
.about__copy { .about__copy {
padding: #{20 / $base-font-size}rem; padding: #{20 / $base-font-size}rem;

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

@ -51,16 +51,20 @@
} }
.preview-console__collapse { .preview-console__collapse {
@include themify() {
@extend %icon; @extend %icon;
.preview-console--collapsed & { .preview-console--collapsed & {
display: none; display: none;
} }
} }
}
.preview-console__expand { .preview-console__expand {
@include themify() {
@extend %icon; @extend %icon;
display: none; display: none;
.preview-console--collapsed & { .preview-console--collapsed & {
display: inline-block; display: inline-block;
} }
} }
}

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

@ -62,12 +62,14 @@
} }
.editor__options-button { .editor__options-button {
@include themify() {
@extend %icon; @extend %icon;
position: absolute; position: absolute;
top: #{5 / $base-font-size}rem; top: #{5 / $base-font-size}rem;
right: #{5 / $base-font-size}rem; right: #{5 / $base-font-size}rem;
z-index: 1; z-index: 1;
} }
}
.editor__options { .editor__options {
display: none; display: none;

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

@ -21,8 +21,10 @@
} }
.modal__exit-button { .modal__exit-button {
@include themify() {
@extend %icon; @extend %icon;
} }
}
.modal__header { .modal__header {
display: flex; display: flex;
@ -88,8 +90,10 @@
} }
.keyboard-shortcuts__close { .keyboard-shortcuts__close {
@include themify() {
@extend %icon; @extend %icon;
} }
}
.keyboard-shortcut-item { .keyboard-shortcut-item {
display: flex; display: flex;

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

@ -13,9 +13,11 @@
} }
.preferences__exit-button { .preferences__exit-button {
@include themify() {
@extend %icon; @extend %icon;
padding-top: #{5 / $base-font-size}rem; padding-top: #{5 / $base-font-size}rem;
} }
}
.preference__plus-button { .preference__plus-button {
@extend %preferences-button; @extend %preferences-button;

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

@ -18,6 +18,7 @@
} }
.sidebar__add { .sidebar__add {
@include themify() {
@extend %icon; @extend %icon;
cursor: pointer; cursor: pointer;
// height: #{26 / $base-font-size}rem; // height: #{26 / $base-font-size}rem;
@ -27,6 +28,7 @@
display: none; display: none;
} }
} }
}
.sidebar__file-list { .sidebar__file-list {
border-top: 1px solid $ide-border-color; border-top: 1px solid $ide-border-color;
@ -91,6 +93,7 @@
} }
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@include themify() {
@extend %icon; @extend %icon;
display: none; display: none;
position: absolute; position: absolute;
@ -99,6 +102,7 @@
display: inline-block; display: inline-block;
} }
} }
}
.sidebar__file-item-options { .sidebar__file-item-options {
@extend %modal; @extend %modal;
@ -128,6 +132,7 @@
} }
.sidebar__contract { .sidebar__contract {
@include themify() {
@extend %icon; @extend %icon;
margin-left: #{10 / $base-font-size}rem; margin-left: #{10 / $base-font-size}rem;
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
@ -138,8 +143,10 @@
display: none; display: none;
} }
} }
}
.sidebar__expand { .sidebar__expand {
@include themify() {
@extend %icon; @extend %icon;
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
& svg { & svg {
@ -150,6 +157,7 @@
display: inline-block; display: inline-block;
} }
} }
}
.sidebar__icons { .sidebar__icons {
display: flex; display: flex;

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

@ -30,5 +30,7 @@
} }
.sketch-list__exit-button { .sketch-list__exit-button {
@include themify() {
@extend %icon; @extend %icon;
} }
}

3
client/styles/components/_toast.scss
View file

@ -10,9 +10,12 @@
} }
.toast__close { .toast__close {
@include themify() {
@extend %icon; @extend %icon;
color: $toast-text-color;
& g { & g {
fill: $toast-text-color; fill: $toast-text-color;
} }
margin-left: #{10 / $base-font-size}rem; margin-left: #{10 / $base-font-size}rem;
} }
}

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

@ -1,4 +1,5 @@
.toolbar__play-button { .toolbar__play-button {
@include themify() {
@extend %toolbar-button; @extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem; margin-right: #{15 / $base-font-size}rem;
&--selected { &--selected {
@ -8,19 +9,23 @@
padding-left: #{2 / $base-font-size}rem; padding-left: #{2 / $base-font-size}rem;
} }
} }
}
.toolbar__play-sketch-button { .toolbar__play-sketch-button {
@extend %hidden-element; @extend %hidden-element;
} }
.toolbar__stop-button { .toolbar__stop-button {
@include themify() {
@extend %toolbar-button; @extend %toolbar-button;
&--selected { &--selected {
@extend %toolbar-button--selected; @extend %toolbar-button--selected;
} }
} }
}
.toolbar__preferences-button { .toolbar__preferences-button {
@include themify() {
@extend %toolbar-button; @extend %toolbar-button;
line-height: #{50 / $base-font-size}rem; line-height: #{50 / $base-font-size}rem;
margin-left: auto; margin-left: auto;
@ -28,9 +33,6 @@
@extend %toolbar-button--selected; @extend %toolbar-button--selected;
} }
} }
.toolbar__shortcut-button {
} }
.toolbar__logo { .toolbar__logo {