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

Unifies button styles for forms and app

Browse source
This commit is contained in:
Andrew Nicolaou 2019-05-24 11:09:41 +02:00 committed by Cassie Tarakajian
parent ac1afd53ef
commit a6d7ea409a
3 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -102,29 +102,6 @@
} }
} }
%forms-button {
@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');
}
}
}
%preferences-button { %preferences-button {
@extend %toolbar-button; @extend %toolbar-button;
@include themify() { @include themify() {

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

@ -42,12 +42,18 @@ input {
} }
} }
button[type="submit"],
input[type="submit"] { input[type="submit"] {
@include themify() { @include themify() {
@extend %button; @extend %button;
} }
} }
button[type="submit"]:disabled,
input[type="submit"]:disabled {
cursor: not-allowed;
}
button { button {
@include themify() { @include themify() {
@extend %link; @extend %link;

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

@ -47,11 +47,18 @@
} }
.form__input { .form__input {
width: #{360 / $base-font-size}rem; width: 100%;
min-width: #{360 / $base-font-size}rem;
height: #{40 / $base-font-size}rem; height: #{40 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('form-input-text-color'); color: getThemifyVariable('form-input-text-color');
border-color: getThemifyVariable('form-border-color'); }
}
.form__input::placeholder {
@include themify() {
color: getThemifyVariable('form-input-placeholder-text-color');
} }
} }
@ -66,10 +73,12 @@
} }
} }
.form input[type="submit"] { .form [type="submit"] {
@extend %forms-button; @extend %button;
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
} }
.form input[type="submit"]:disabled { .form--inline [type="submit"] {
cursor: not-allowed; margin: 0 0 0 #{24 / $base-font-size}rem;
} }