Unverified Commit a2918f28 authored by Lyza Gardner's avatar Lyza Gardner Committed by GitHub

Merge pull request #1595 from hypothesis/consolidate-forms-scss

Consolidate some form and button styles
parents 9c933098 111afa49
...@@ -37,14 +37,14 @@ ...@@ -37,14 +37,14 @@
h-branding="accentColor">mire</a> h-branding="accentColor">mire</a>
</div> </div>
<!-- Tags --> <!-- Tags -->
<div class="annotation-body form-field" ng-if="vm.editing()"> <div class="annotation-body" ng-if="vm.editing()">
<tag-editor tags="vm.state().tags" <tag-editor tags="vm.state().tags"
on-edit-tags="vm.setTags(tags)"></tag-editor> on-edit-tags="vm.setTags(tags)"></tag-editor>
</div> </div>
<tag-list <tag-list
annotation="vm.annotation" annotation="vm.annotation"
tags="vm.state().tags" tags="vm.state().tags"
></tag-list> ></tag-list>
<!-- / Tags --> <!-- / Tags -->
......
@use "mixins/forms"; @use "mixins/forms";
@use "variables" as var; @use "variables" as var;
// Common form styles.
.form-field {
@include forms.pie-clearfix;
clear: both;
margin-bottom: 0.75em;
}
.form-input { .form-input {
@include forms.form-input;
width: 100%; width: 100%;
display: block; display: block;
}
.form-input {
@include forms.form-input;
&:focus, &:focus,
&.js-focus { &.js-focus {
...@@ -28,62 +17,3 @@ ...@@ -28,62 +17,3 @@
max-width: 100%; max-width: 100%;
resize: vertical; resize: vertical;
} }
.form-actions {
@include forms.pie-clearfix;
margin-top: 0.75em;
}
.btn {
@include forms.btn;
&:hover,
&:focus,
&:active {
@include forms.btn-hover;
}
&:focus {
@include forms.focus-outline;
}
&:active {
@include forms.btn-active;
}
&[disabled] {
@include forms.btn-disabled;
}
}
.btn-clean {
border: none;
&,
&:focus,
&:hover,
&:active,
&[disabled] {
box-shadow: none;
background: none;
}
&:focus,
&:hover,
&:active {
color: var.$link-color;
}
&:active {
color: var.$link-color-hover;
}
&[disabled] {
color: var.$text-color;
}
}
.btn-icon {
display: inline-block;
font-size: 16px;
}
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
} }
@mixin focus-outline { @mixin focus-outline {
border-color: #51a7e8; border-color: var.$color-focus-outline;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset, box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset,
0px 0px 5px rgba(81, 167, 232, 0.5); 0px 0px 5px var.$color-focus-shadow;
} }
@mixin form-input { @mixin form-input {
...@@ -35,12 +35,12 @@ ...@@ -35,12 +35,12 @@
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
font-weight: normal; font-weight: normal;
color: var.$grey-5; color: var.$grey-5;
background-color: #fafafa; background-color: var.$grey-0;
} }
@mixin form-input-focus { @mixin form-input-focus {
outline: none; outline: none;
background-color: #fff; background-color: var.$white;
@include focus-outline; @include focus-outline;
@include placeholder { @include placeholder {
...@@ -48,50 +48,12 @@ ...@@ -48,50 +48,12 @@
} }
} }
@mixin form-input-error {
color: var.$error-color;
border-color: var.color-weight(var.$error-color, 300);
background-color: var.color-weight(var.$error-color, 50);
@include placeholder {
color: var.tint(var.$error-color, 5%);
}
}
@mixin btn {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background: linear-gradient(var.$button-background-gradient);
display: inline-block;
font-weight: bold;
color: var.$button-text-color;
text-shadow: 0 1px 0 #fff;
border-radius: 2px;
border: 1px solid var.$grey-semi;
padding: 0.5em 0.9em;
}
@mixin btn-hover { @mixin btn-hover {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
outline: none; outline: none;
color: var.$button-text-color; color: var.$button-text-color;
background: var.$button-background-start; background: var.$button-background-start;
border-color: #bababa; border-color: var.$grey-4;
}
@mixin btn-active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
background: var.$button-background-end;
color: #424242;
border-color: #bababa;
}
@mixin btn-disabled {
box-shadow: none;
cursor: default;
background: #f0f0f0;
border-color: #cecece;
color: var.$grey-semi;
} }
@mixin primary-action-btn { @mixin primary-action-btn {
......
@use "../../mixins/buttons";
@use "../../mixins/forms"; @use "../../mixins/forms";
@use "../../variables" as var; @use "../../variables" as var;
......
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
$white: #fff !default; $white: #fff !default;
// Interim color variable for migration purposes.
// Used as very-subtle background color for form fields. $grey-1 is too dark.
$grey-0: #fafafa;
$grey-1: #f2f2f2; $grey-1: #f2f2f2;
$grey-2: #ececec; $grey-2: #ececec;
...@@ -34,6 +38,9 @@ $black: #000 !default; ...@@ -34,6 +38,9 @@ $black: #000 !default;
$brand: #bd1c2b; $brand: #bd1c2b;
$highlight: #58cef4; $highlight: #58cef4;
$color-focus-outline: #51a7e8;
$color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);
$button-text-color: $grey-mid !default; $button-text-color: $grey-mid !default;
$button-background-start: $white !default; $button-background-start: $white !default;
$button-background-end: #f0f0f0 !default; $button-background-end: #f0f0f0 !default;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment