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

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

@ -1,48 +1,52 @@
%toolbar-button { %toolbar-button {
display: inline-block; @include themify() {
height: #{44 / $base-font-size}rem; display: inline-block;
width: #{44 / $base-font-size}rem; height: #{44 / $base-font-size}rem;
text-align: center; width: #{44 / $base-font-size}rem;
border-radius: 100%; text-align: center;
line-height: #{46 / $base-font-size}rem; border-radius: 100%;
cursor: pointer; line-height: #{46 / $base-font-size}rem;
border: none; cursor: pointer;
outline: none; border: none;
background-color: $light-button-background-color; outline: none;
color: $light-button-color; background-color: getThemifyVariable('toolbar-button-background-color');
& g { color: getThemifyVariable('toolbar-button-color');
fill: $light-toolbar-button-color;
}
&:hover {
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
& g { & g {
fill: $light-button-hover-color; fill: getThemifyVariable('toolbar-button-color');
} }
&:hover {
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color');
& g {
fill: getThemifyVariable('button-hover-color');
}
}
&--selected {
background-color: getThemifyVariable('button-background-hover-color');
& g {
fill: getThemifyVariable('button-hover-color');
}
}
} }
&--selected {
background-color: $light-button-background-hover-color;
& g {
fill: $light-button-hover-color;
}
}
} }
%icon { %icon {
background-color: transparent; @include themify() {
border: none; background-color: transparent;
cursor: pointer; border: none;
padding: 0; cursor: pointer;
color: $light-icon-color; padding: 0;
& g { color: getThemifyVariable('icon-color');
fill: $light-icon-color;
}
&:hover {
color: $light-icon-hover-color;
& g { & g {
opacity: 1; fill: getThemifyVariable('icon-color');
fill: $light-icon-hover-color; }
&:hover {
color: getThemifyVariable('icon-hover-color');
& g {
opacity: 1;
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');
padding: 0; background-color: getThemifyVariable('modal-button-background-color');
margin-bottom: #{28 / $base-font-size}rem; padding: 0;
line-height: #{50 / $base-font-size}rem; margin-bottom: #{28 / $base-font-size}rem;
& g { line-height: #{50 / $base-font-size}rem;
fill: $light-primary-text-color;
}
&:hover {
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
& g { & g {
fill: $light-button-hover-color; fill: getThemifyVariable('primary-text-color');
}
&:hover {
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color');
& g {
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,

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

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

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

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

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

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

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

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

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

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

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

@ -18,13 +18,15 @@
} }
.sidebar__add { .sidebar__add {
@extend %icon; @include themify() {
cursor: pointer; @extend %icon;
// height: #{26 / $base-font-size}rem; cursor: pointer;
// margin-right: #{16 / $base-font-size}rem; // height: #{26 / $base-font-size}rem;
// font-size: #{24 / $base-font-size}rem; // margin-right: #{16 / $base-font-size}rem;
.sidebar--contracted & { // font-size: #{24 / $base-font-size}rem;
display: none; .sidebar--contracted & {
display: none;
}
} }
} }
@ -91,12 +93,14 @@
} }
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@extend %icon; @include themify() {
display: none; @extend %icon;
position: absolute; display: none;
right: #{26 / $base-font-size}rem; position: absolute;
.sidebar__file-item--selected > .file-item__content & { right: #{26 / $base-font-size}rem;
display: inline-block; .sidebar__file-item--selected > .file-item__content & {
display: inline-block;
}
} }
} }
@ -128,26 +132,30 @@
} }
.sidebar__contract { .sidebar__contract {
@extend %icon; @include themify() {
margin-left: #{10 / $base-font-size}rem; @extend %icon;
height: #{14 / $base-font-size}rem; margin-left: #{10 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
} & svg {
.sidebar--contracted & { height: #{14 / $base-font-size}rem;
display: none; }
.sidebar--contracted & {
display: none;
}
} }
} }
.sidebar__expand { .sidebar__expand {
@extend %icon; @include themify() {
height: #{14 / $base-font-size}rem; @extend %icon;
& svg {
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
} & svg {
display: none; height: #{14 / $base-font-size}rem;
.sidebar--contracted & { }
display: inline-block; display: none;
.sidebar--contracted & {
display: inline-block;
}
} }
} }

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

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

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

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

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

@ -1,11 +1,13 @@
.toolbar__play-button { .toolbar__play-button {
@extend %toolbar-button; @include themify() {
margin-right: #{15 / $base-font-size}rem; @extend %toolbar-button;
&--selected { margin-right: #{15 / $base-font-size}rem;
@extend %toolbar-button--selected; &--selected {
} @extend %toolbar-button--selected;
& span { }
padding-left: #{2 / $base-font-size}rem; & span {
padding-left: #{2 / $base-font-size}rem;
}
} }
} }
@ -14,25 +16,25 @@
} }
.toolbar__stop-button { .toolbar__stop-button {
@extend %toolbar-button; @include themify() {
&--selected { @extend %toolbar-button;
@extend %toolbar-button--selected; &--selected {
@extend %toolbar-button--selected;
}
} }
} }
.toolbar__preferences-button { .toolbar__preferences-button {
@extend %toolbar-button; @include themify() {
line-height: #{50 / $base-font-size}rem; @extend %toolbar-button;
margin-left: auto; line-height: #{50 / $base-font-size}rem;
&--selected { margin-left: auto;
@extend %toolbar-button--selected; &--selected {
@extend %toolbar-button--selected;
}
} }
} }
.toolbar__shortcut-button {
}
.toolbar__logo { .toolbar__logo {
margin-right: #{30 / $base-font-size}rem; margin-right: #{30 / $base-font-size}rem;
} }