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"?>
<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 -->
<title>play</title>
<!-- <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 {
display: inline-block;
height: #{44 / $base-font-size}rem;
width: #{44 / $base-font-size}rem;
text-align: center;
border-radius: 100%;
line-height: #{46 / $base-font-size}rem;
cursor: pointer;
border: none;
outline: none;
background-color: $light-button-background-color;
color: $light-button-color;
& g {
fill: $light-toolbar-button-color;
}
&:hover {
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
@include themify() {
display: inline-block;
height: #{44 / $base-font-size}rem;
width: #{44 / $base-font-size}rem;
text-align: center;
border-radius: 100%;
line-height: #{46 / $base-font-size}rem;
cursor: pointer;
border: none;
outline: none;
background-color: getThemifyVariable('toolbar-button-background-color');
color: getThemifyVariable('toolbar-button-color');
& 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 {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: $light-icon-color;
& g {
fill: $light-icon-color;
}
&:hover {
color: $light-icon-hover-color;
@include themify() {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: getThemifyVariable('icon-color');
& g {
opacity: 1;
fill: $light-icon-hover-color;
fill: getThemifyVariable('icon-color');
}
&:hover {
color: getThemifyVariable('icon-hover-color');
& g {
opacity: 1;
fill: getThemifyVariable('icon-hover-color');
}
}
}
}
@ -68,19 +72,21 @@
%preferences-button {
@extend %toolbar-button;
color: $light-primary-text-color;
background-color: $light-modal-button-background-color;
padding: 0;
margin-bottom: #{28 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem;
& g {
fill: $light-primary-text-color;
}
&:hover {
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
@include themify() {
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('modal-button-background-color');
padding: 0;
margin-bottom: #{28 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem;
& 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-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #f4f4f4,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-hover-color: $white,
@ -38,6 +39,7 @@ $themes: (
button-color: $black,
button-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #424242,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-hover-color: $white,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -10,9 +10,12 @@
}
.toast__close {
@extend %icon;
& g {
fill: $toast-text-color;
@include themify() {
@extend %icon;
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 {
@extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem;
&--selected {
@extend %toolbar-button--selected;
}
& span {
padding-left: #{2 / $base-font-size}rem;
@include themify() {
@extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem;
&--selected {
@extend %toolbar-button--selected;
}
& span {
padding-left: #{2 / $base-font-size}rem;
}
}
}
@ -14,25 +16,25 @@
}
.toolbar__stop-button {
@extend %toolbar-button;
&--selected {
@extend %toolbar-button--selected;
@include themify() {
@extend %toolbar-button;
&--selected {
@extend %toolbar-button--selected;
}
}
}
.toolbar__preferences-button {
@extend %toolbar-button;
line-height: #{50 / $base-font-size}rem;
margin-left: auto;
&--selected {
@extend %toolbar-button--selected;
@include themify() {
@extend %toolbar-button;
line-height: #{50 / $base-font-size}rem;
margin-left: auto;
&--selected {
@extend %toolbar-button--selected;
}
}
}
.toolbar__shortcut-button {
}
.toolbar__logo {
margin-right: #{30 / $base-font-size}rem;
}