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

clean up scss color variables, fix missing unthmeified variables

Browse source
This commit is contained in:
Cassie Tarakajian 2016-09-21 23:39:50 -04:00
parent 1e8165393b
commit f017dd8a76
6 changed files with 31 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,9 +28,12 @@ $themes: (
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee,
console-header-background-color: #d6d6d6,
console-header-color: #b1b1b1,
ide-border-color: #f4f4f4,
editor-gutter-color: #f7f7f7,
file-selected-color: #f4f4f4,
input-text-color: #333,
input-border-color: #979797,
),
dark: (
primary-text-color: $white,
@ -58,78 +61,14 @@ $themes: (
ide-border-color: #949494,
editor-gutter-color: #363636,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #979797,
)
);
$primary-text-color: #333;
$secondary-text-color: #6b6b6b;
$inactive-text-color: #b5b5b5;
$background-color: #fdfdfd;
$button-background-color: #f4f4f4;
$button-color: $black;
$button-border-color: #979797;
$toolbar-button-color: $p5js-pink;
$button-background-hover-color: $p5js-pink;
$button-background-active-color: #f10046;
$button-hover-color: $white;
$button-active-color: $white;
$modal-background-color: #f4f4f4;
$modal-button-background-color: #e6e6e6;
$modal-border-color: #B9D0E1;
$icon-color: #8b8b8b;
$icon-hover-color: #333;
$shadow-color: rgba(0, 0, 0, 0.16);
$console-background-color: #eee;
$console-header-background-color: #d6d6d6;
$ide-border-color: #f4f4f4;
// other variables i may or may not need later
$ide-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3;
$input-border-color: #979797;
$console-light-background-color: #eee;
$console-header-background-color: #d6d6d6;
$console-header-color: #b1b1b1;
$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;
$toast-background-color: #979797;
$toast-text-color: $white;
//light and dark colors
$light-primary-text-color: #333;
$light-secondary-text-color: #6b6b6b;
$light-inactive-text-color: #b5b5b5;
$light-background-color: #fdfdfd;
$light-button-background-color: #f4f4f4;
$light-button-color: $black;
$light-button-border-color: #979797;
$light-toolbar-button-color: $p5js-pink;
$light-button-background-hover-color: $p5js-pink;
$light-button-background-active-color: #f10046;
$light-button-hover-color: $white;
$light-button-active-color: $white;
$light-modal-background-color: #f4f4f4;
$light-modal-button-background-color: #e6e6e6;
$light-modal-border-color: #B9D0E1;
$light-icon-color: #8b8b8b;
$light-icon-hover-color: $light-primary-text-color;
$light-shadow-color: rgba(0, 0, 0, 0.16);
$dark-primary-text-color: $white;
$dark-secondary-text-color: #c2c2c2;
$dark-inactive-color: #7d7d7d;
$dark-background-color: #333;
$dark-button-background-color: $white;
$dark-button-color: $black;
$dark-toolbar-button-color: $p5js-pink;
$dark-button-background-hover-color: $p5js-pink;
$dark-button-background-active-color: #f10046;
$dark-button-hover-color: $white;
$dark-button-active-color: $white;

6
client/styles/base/_base.scss
View file

@ -36,11 +36,11 @@ input, button {
input {
padding: #{5 / $base-font-size}rem;
// border-radius: 2px;
border: 1px solid $input-border-color;
border: 1px solid;
padding: #{10 / $base-font-size}rem;
@include themify() {
color: $primary-text-color;
color: getThemifyVariable('input-text-color');
border-color: getThemifyVariable('input-border-color');
}
}

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

@ -39,8 +39,8 @@
.preview-console__header {
@include themify() {
background-color: getThemifyVariable('console-header-background-color');
color: getThemifyVariable('console-header-color');
}
color: $console-header-color;
padding: #{5 / $base-font-size}rem;
display: flex;
justify-content: space-between;

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

@ -51,17 +51,19 @@
}
.preference__subtitle {
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
width: 100%;
margin-bottom: #{10 / $base-font-size}rem;
margin-top: 0;
color: $light-inactive-text-color;
}
.preference__value {
@include themify() {
border: 2px solid getThemifyVariable('button-border-color');
background-color: getThemifyVariable('button-background-color');
color: $light-primary-text-color;
color: getThemifyVariable('input-text-color');
}
text-align: center;
border-radius: 0%;
@ -72,13 +74,15 @@
}
.preference__label {
@include themify() {
color: getThemifyColor('inactive-text-color');
&:hover {
color: getThemifyColor('inactive-text-color');
}
}
margin: 0;
line-height: #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
font-size: #{9 / $base-font-size}rem;
&:hover {
color: $light-inactive-text-color;
}
}
.preference__vertical-list {

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

@ -29,7 +29,10 @@
}
.sidebar__file-list {
border-top: 1px solid $ide-border-color;
@include themify() {
border-color: getThemifyVariable('ide-border-color')
}
border-top: 1px solid;
.sidebar--contracted & {
display: none;
}

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

@ -49,8 +49,9 @@
.toolbar__project-name-container {
@include themify() {
border-left: 2px dashed map-get($theme-map, 'inactive-text-color');
border-color: getThemifyVariable('inactive-text-color');
}
border-left: 2px dashed;
margin-left: #{10 / $base-font-size}rem;
padding-left: #{10 / $base-font-size}rem;
height: 70%;
@ -59,14 +60,13 @@
}
.toolbar__project-name {
color: $light-inactive-text-color;
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
}
}
cursor: pointer;
&:hover {
color: $light-primary-text-color;
}
&:focus {
color: $light-inactive-text-color;
}
.toolbar__project-name-container--editing & {
display: none;