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

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

@ -103,23 +103,25 @@
}
%forms-button {
background-color: $form-button-background-color;
color: $form-button-color;
cursor: pointer;
border: 2px solid $form-button-color;
border-radius: 2px;
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
line-height: 1;
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
&:enabled:hover {
border-color: $form-button-background-hover-color;
background-color: $form-button-background-hover-color;
color: $form-button-hover-color;
}
&:enabled:active {
border-color: $form-button-background-active-color;
background-color: $form-button-background-active-color;
color: $form-button-active-color;
@include themify() {
background-color: getThemifyVariable('form-button-background-color');
color: getThemifyVariable('form-button-color');
cursor: pointer;
border: 2px solid getThemifyVariable('form-button-color');
border-radius: 2px;
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
line-height: 1;
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
&:enabled:hover {
border-color: getThemifyVariable('form-button-background-hover-color');
background-color: getThemifyVariable('form-button-background-hover-color');
color: getThemifyVariable('form-button-hover-color');
}
&:enabled:active {
border-color: getThemifyVariable('form-button-background-active-color');
background-color: getThemifyVariable('form-button-background-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,
table-row-stripe-color: #d6d6d6,
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: (
logo-color: $p5js-pink,
@ -114,7 +126,18 @@ $themes: (
error-color: $p5js-pink,
table-row-stripe-color: #3f3f3f,
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: (
logo-color: $yellow,
@ -163,7 +186,18 @@ $themes: (
error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f,
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-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-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;
width: #{720 / $base-font-size}rem;
& 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 {
font-weight: normal;
color: $form-title-color;
@include themify() {
color: getThemifyVariable('form-title-color')
}
}
.form-container__context {
@ -49,9 +51,9 @@
}
.form-container__logo-button {
@extend %none-themify-icon;
@include icon();
}
.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;
text-align: left;
@include themify() {
color: getThemifyVariable('error-color')
color: getThemifyVariable('error-color');
}
}
@ -22,7 +22,9 @@
.form__navigation-options {
margin-top: #{16 / $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{
@ -31,11 +33,13 @@
}
.form__label {
color: $secondary-form-title-color;
font-size: #{12 / $base-font-size}rem;
margin-top: #{25 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem;
display: block;
@include themify() {
color: getThemifyVariable('form-secondary-title-color');
}
}
.form__label--hidden {
@ -45,8 +49,10 @@
.form__input {
width: #{360 / $base-font-size}rem;
height: #{40 / $base-font-size}rem;
color: $icon-hover-color;
border-color: $secondary-form-title-color;
@include themify() {
color: getThemifyVariable('form-input-text-color');
border-color: getThemifyVariable('form-border-color');
}
}
.form__context {
@ -55,7 +61,9 @@
}
.form__status {
color: $form-navigation-options-color;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
.form input[type="submit"] {

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

@ -10,6 +10,8 @@
display: block;
margin-top: #{40 / $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;
font-size: #{12 / $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-left: #{39 / $base-font-size}rem;
.reset-password--submitted & {