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

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 {
@extend %toolbar-button;
@include themify() {

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

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

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

@ -47,11 +47,18 @@
}
.form__input {
width: #{360 / $base-font-size}rem;
width: 100%;
min-width: #{360 / $base-font-size}rem;
height: #{40 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
@include themify() {
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"] {
@extend %forms-button;
.form [type="submit"] {
@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 {
cursor: not-allowed;
.form--inline [type="submit"] {
margin: 0 0 0 #{24 / $base-font-size}rem;
}