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

Makes form CSS theme-aware

Browse source
This commit is contained in:
Andrew Nicolaou 2019-05-22 15:38:24 +02:00 committed by Cassie Tarakajian
parent 5e74be46fd
commit 067adb0052
7 changed files with 85 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -103,23 +103,25 @@
} }
%forms-button { %forms-button {
background-color: $form-button-background-color; @include themify() {
color: $form-button-color; background-color: getThemifyVariable('form-button-background-color');
color: getThemifyVariable('form-button-color');
cursor: pointer; cursor: pointer;
border: 2px solid $form-button-color; border: 2px solid getThemifyVariable('form-button-color');
border-radius: 2px; border-radius: 2px;
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem; padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
line-height: 1; line-height: 1;
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0; margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
&:enabled:hover { &:enabled:hover {
border-color: $form-button-background-hover-color; border-color: getThemifyVariable('form-button-background-hover-color');
background-color: $form-button-background-hover-color; background-color: getThemifyVariable('form-button-background-hover-color');
color: $form-button-hover-color; color: getThemifyVariable('form-button-hover-color');
} }
&:enabled:active { &:enabled:active {
border-color: $form-button-background-active-color; border-color: getThemifyVariable('form-button-background-active-color');
background-color: $form-button-background-active-color; background-color: getThemifyVariable('form-button-background-active-color');
color: $form-button-active-color; color: getThemifyVariable('form-button-active-color');
}
} }
} }

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

@ -64,7 +64,19 @@ $themes: (
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #d6d6d6, table-row-stripe-color: #d6d6d6,
codefold-icon-open: url(../images/down-arrow.svg), codefold-icon-open: url(../images/down-arrow.svg),
codefold-icon-closed: url(../images/right-arrow.svg) codefold-icon-closed: url(../images/right-arrow.svg),
form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: #b5b5b5,
form-input-text-color: #b5b5b5,
form-border-color: #b5b5b5,
form-button-background-color: $white,
form-button-color: #f10046,
form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
@ -114,7 +126,18 @@ $themes: (
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #3f3f3f, table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg), codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg) codefold-icon-closed: url(../images/right-arrow-white.svg),
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
form-button-background-color: $black,
form-button-color: #f10046,
form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -163,7 +186,18 @@ $themes: (
error-color: $p5-contrast-pink, error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f, table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg), codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg) codefold-icon-closed: url(../images/right-arrow-white.svg),
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
form-button-background-color: $black,
form-button-color: #f10046,
form-button-background-hover-color: $p5-contrast-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
) )
); );
@ -173,15 +207,5 @@ $console-error-color: #ff5f52;
$toast-background-color: #4A4A4A; $toast-background-color: #4A4A4A;
$toast-text-color: $white; $toast-text-color: $white;
$form-title-color: rgba(51, 51, 51, 0.87);
$secondary-form-title-color: #b5b5b5;
$form-button-background-color: $white;
$form-button-color: #f10046;
$form-button-background-hover-color: $p5js-pink;
$form-button-background-active-color: #f10046;
$form-button-hover-color: $white;
$form-button-active-color: $white;
$form-navigation-options-color: #999999;
$about-play-background-color: rgba(255, 255, 255, 0.7); $about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7); $about-button-border-color: rgba(151, 151, 151, 0.7);

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

@ -46,7 +46,9 @@
padding-left: #{20 / $base-font-size}rem; padding-left: #{20 / $base-font-size}rem;
width: #{720 / $base-font-size}rem; width: #{720 / $base-font-size}rem;
& a { & a {
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
} }

8
client/styles/components/_form-container.scss
View file

@ -35,7 +35,9 @@
.form-container__title { .form-container__title {
font-weight: normal; font-weight: normal;
color: $form-title-color; @include themify() {
color: getThemifyVariable('form-title-color')
}
} }
.form-container__context { .form-container__context {
@ -49,9 +51,9 @@
} }
.form-container__logo-button { .form-container__logo-button {
@extend %none-themify-icon; @include icon();
} }
.form-container__exit-button { .form-container__exit-button {
@extend %none-themify-icon-with-hover; @include icon();
} }

20
client/styles/components/_forms.scss
View file

@ -5,7 +5,7 @@
font-size: #{9 / $base-font-size}rem; font-size: #{9 / $base-font-size}rem;
text-align: left; text-align: left;
@include themify() { @include themify() {
color: getThemifyVariable('error-color') color: getThemifyVariable('error-color');
} }
} }
@ -22,7 +22,9 @@
.form__navigation-options { .form__navigation-options {
margin-top: #{16 / $base-font-size}rem; margin-top: #{16 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
.form__legend{ .form__legend{
@ -31,11 +33,13 @@
} }
.form__label { .form__label {
color: $secondary-form-title-color;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
margin-top: #{25 / $base-font-size}rem; margin-top: #{25 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem; margin-bottom: #{7 / $base-font-size}rem;
display: block; display: block;
@include themify() {
color: getThemifyVariable('form-secondary-title-color');
}
} }
.form__label--hidden { .form__label--hidden {
@ -45,8 +49,10 @@
.form__input { .form__input {
width: #{360 / $base-font-size}rem; width: #{360 / $base-font-size}rem;
height: #{40 / $base-font-size}rem; height: #{40 / $base-font-size}rem;
color: $icon-hover-color; @include themify() {
border-color: $secondary-form-title-color; color: getThemifyVariable('form-input-text-color');
border-color: getThemifyVariable('form-border-color');
}
} }
.form__context { .form__context {
@ -55,7 +61,9 @@
} }
.form__status { .form__status {
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
.form input[type="submit"] { .form input[type="submit"] {

4
client/styles/components/_new-password.scss
View file

@ -10,6 +10,8 @@
display: block; display: block;
margin-top: #{40 / $base-font-size}rem; margin-top: #{40 / $base-font-size}rem;
margin-bottom: #{80 / $base-font-size}rem; margin-bottom: #{80 / $base-font-size}rem;
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
} }

4
client/styles/components/_reset-password.scss
View file

@ -4,7 +4,9 @@
text-align: left; text-align: left;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
margin-top: #{10 / $base-font-size}rem; margin-top: #{10 / $base-font-size}rem;
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
padding-right: #{30 / $base-font-size}rem; padding-right: #{30 / $base-font-size}rem;
padding-left: #{39 / $base-font-size}rem; padding-left: #{39 / $base-font-size}rem;
.reset-password--submitted & { .reset-password--submitted & {