Basic styles look MUCH better now
This commit is contained in:
ポール ウェッブ
parent
df02f2fbd9
commit
574a6daa55
8 changed files with 289 additions and 97 deletions
sass/form
|
|
@ -1,108 +1,184 @@
|
|||
form {
|
||||
// setting the font size here sizes everything within
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--spacing-s);
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
height: var(--spacing-l);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="text"] {
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
[type="button"],
|
||||
[type="submit"] {
|
||||
color: $lbry-white;
|
||||
padding-right: var(--spacing-m);
|
||||
padding-left: var(--spacing-m);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $lbry-black;
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-teal-3;
|
||||
border-color: $lbry-teal-5;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-top: 1px solid $lbry-gray-1;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-m);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
&:not([type="button"]):not([type="radio"]):not([type="submit"]) {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
transition: border 0.2s;
|
||||
fieldset-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&:not(:focus) {
|
||||
border-top-color: $lbry-black;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $lbry-black;
|
||||
border-left-color: $lbry-black;
|
||||
}
|
||||
fieldset-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
&:focus {
|
||||
border-top-color: $lbry-teal-5;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $lbry-teal-5;
|
||||
border-left-color: $lbry-teal-5;
|
||||
}
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset-group &,
|
||||
.fieldset-group & {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $lbry-gray-4;
|
||||
display: inline-block;
|
||||
font-size: smaller;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
&:not(:focus) {
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
|
||||
&[type="button"],
|
||||
&[type="submit"] {
|
||||
color: $lbry-white;
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $lbry-black;
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-teal-3;
|
||||
border-color: $lbry-teal-5;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $lbry-teal-5;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
border: 1px solid $lbry-gray-1;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--spacing-s);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
check {
|
||||
width: 1.5rem; height: 1.5rem;
|
||||
top: 0; left: 0;
|
||||
input-submit {
|
||||
display: flex;
|
||||
|
||||
border: 2px solid;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: border 0.2s;
|
||||
z-index: 5;
|
||||
[type="email"],
|
||||
[type="text"] {
|
||||
flex: 1;
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
&:not(:focus) {
|
||||
border-top-color: $lbry-black;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $lbry-black;
|
||||
border-left-color: $lbry-black;
|
||||
}
|
||||
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: scale(0.6);
|
||||
transition: background-color 0.2s;
|
||||
&:focus {
|
||||
border-top-color: $lbry-teal-5;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $lbry-teal-5;
|
||||
border-left-color: $lbry-teal-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
radio {
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
checkbox-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
color: $lbry-teal-4;
|
||||
}
|
||||
|
||||
check {
|
||||
checkbox-toggle,
|
||||
.checkbox-toggle {
|
||||
border-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
padding-left: 0.5rem;
|
||||
transition: color 0.2s;
|
||||
input {
|
||||
&[type="checkbox"] {
|
||||
width: 0; height: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:not(:checked) {
|
||||
+ label + checkbox-toggle::before,
|
||||
+ label + .checkbox-toggle::before {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-toggle {
|
||||
@include tick-toggle;
|
||||
|
||||
&::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 130%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
radio-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
radio-toggle,
|
||||
.radio-toggle {
|
||||
border-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -111,7 +187,8 @@ radio {
|
|||
visibility: hidden;
|
||||
|
||||
&:not(:checked) {
|
||||
+ label + check::before {
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -121,7 +198,8 @@ radio {
|
|||
color: $lbry-teal-4;
|
||||
}
|
||||
|
||||
+ label + check::before {
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
|
|
@ -129,20 +207,53 @@ radio {
|
|||
}
|
||||
}
|
||||
|
||||
radio-toggle {
|
||||
@include tick-toggle;
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.check {
|
||||
@extend check;
|
||||
|
||||
// Custom elements are apparently difficult to use in React, so use classes
|
||||
|
||||
.checkbox-element {
|
||||
@extend checkbox-element;
|
||||
}
|
||||
|
||||
.checkbox-toggle {
|
||||
@extend checkbox-toggle;
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
@extend fieldset;
|
||||
}
|
||||
|
||||
.fieldset-group {
|
||||
@extend fieldset-group;
|
||||
}
|
||||
|
||||
.fieldset-section {
|
||||
@extend fieldset-section;
|
||||
}
|
||||
|
||||
.form {
|
||||
@extend form;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
@extend radio;
|
||||
.input-submit {
|
||||
@extend input-submit;
|
||||
}
|
||||
|
||||
.radio-element {
|
||||
@extend radio-element;
|
||||
}
|
||||
|
||||
.radio-toggle {
|
||||
@extend radio-toggle;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue