mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Merge pull request #32 from AntoineBoulanger/form
Update form: better & cleaner
This commit is contained in:
Antoine Boulanger
@@ -371,23 +371,38 @@ button {
|
||||
outline: none;
|
||||
background-color: none; }
|
||||
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
resize: vertical; }
|
||||
|
||||
fieldset {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
select {
|
||||
text-transform: none;
|
||||
/*&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000000; // Text :focus color
|
||||
}*/ }
|
||||
select::-ms-expand {
|
||||
display: none; }
|
||||
select::-ms-value {
|
||||
background: none;
|
||||
color: inherit; }
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical; }
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
@@ -465,13 +480,13 @@ h6, .h6, .zeta {
|
||||
display: block;
|
||||
margin-bottom: 0.25em; }
|
||||
|
||||
.input, .checkbox-label:before, .radio-label:before, .checkbox-label:after, .radio-label:after, .select, .textarea {
|
||||
.input, .checkbox-label::before, .radio-label::before, .checkbox-label::after, .radio-label::after, .select, .textarea {
|
||||
padding: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: lightgray;
|
||||
background-color: white; }
|
||||
.input:focus, .checkbox-label:focus:before, .radio-label:focus:before, .checkbox-label:focus:after, .radio-label:focus:after, .select:focus, .textarea:focus {
|
||||
.input:focus, .checkbox-label:focus::before, .radio-label:focus::before, .checkbox-label:focus::after, .radio-label:focus::after, .select:focus, .textarea:focus {
|
||||
border-color: gray; }
|
||||
.input::-webkit-input-placeholder, .select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
|
||||
color: gray; }
|
||||
@@ -484,11 +499,11 @@ h6, .h6, .zeta {
|
||||
|
||||
.checkbox, .radio {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
width: 0;
|
||||
opacity: 0; }
|
||||
.checkbox:focus + .checkbox-label:before, .radio:focus + .checkbox-label:before, .checkbox:focus + .radio-label:before, .radio:focus + .radio-label:before, .checkbox:focus + .checkbox-label:after, .radio:focus + .checkbox-label:after, .checkbox:focus + .radio-label:after, .radio:focus + .radio-label:after {
|
||||
.checkbox:focus + .checkbox-label::before, .radio:focus + .checkbox-label::before, .checkbox:focus + .radio-label::before, .radio:focus + .radio-label::before {
|
||||
border-color: gray; }
|
||||
.checkbox:checked + .checkbox-label:after, .radio:checked + .checkbox-label:after, .checkbox:checked + .radio-label:after, .radio:checked + .radio-label:after {
|
||||
.checkbox:checked + .checkbox-label::after, .radio:checked + .checkbox-label::after, .checkbox:checked + .radio-label::after, .radio:checked + .radio-label::after {
|
||||
opacity: 1; }
|
||||
|
||||
.checkbox-label, .radio-label {
|
||||
@@ -496,7 +511,7 @@ h6, .h6, .zeta {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
padding-left: 28px; }
|
||||
.checkbox-label:before, .radio-label:before, .checkbox-label:after, .radio-label:after {
|
||||
.checkbox-label::before, .radio-label::before, .checkbox-label::after, .radio-label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@@ -506,7 +521,7 @@ h6, .h6, .zeta {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
content: ""; }
|
||||
.checkbox-label:after, .radio-label:after {
|
||||
.checkbox-label::after, .radio-label::after {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
||||
@@ -515,10 +530,10 @@ h6, .h6, .zeta {
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0; }
|
||||
|
||||
.radio-label:before, .radio-label:after {
|
||||
.radio-label::before, .radio-label::after {
|
||||
border-radius: 50%; }
|
||||
|
||||
.radio-label:after {
|
||||
.radio-label::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-size: 8px; }
|
||||
|
||||
@@ -526,20 +541,16 @@ h6, .h6, .zeta {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 40px; }
|
||||
.select::-ms-expand {
|
||||
display: none; }
|
||||
|
||||
.select-wrap {
|
||||
position: relative; }
|
||||
.select-wrap:after {
|
||||
.select-wrap::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0 15px;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23424242%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: 10px;
|
||||
@@ -548,18 +559,17 @@ h6, .h6, .zeta {
|
||||
pointer-events: none; }
|
||||
|
||||
.textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical; }
|
||||
min-height: 100px; }
|
||||
|
||||
.vertical-center {
|
||||
height: 100%;
|
||||
text-align: center; }
|
||||
font-size: 0; }
|
||||
.vertical-center:before {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
content: "";
|
||||
vertical-align: middle; }
|
||||
.vertical-center > * {
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
|
||||
|
||||
@@ -1,23 +1,42 @@
|
||||
// ==========================================================================
|
||||
// Form resets
|
||||
// ==========================================================================
|
||||
input, select, textarea {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select {
|
||||
text-transform: none;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-ms-value {
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Remove Firefox :focus dotted outline, breaks color inherit
|
||||
/*&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000000; // Text :focus color
|
||||
}*/
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
|
||||
// Input
|
||||
// ==========================================================================
|
||||
$input-icon-color: 424242; // No #
|
||||
|
||||
.input {
|
||||
padding: 10px;
|
||||
border-width: 1px;
|
||||
@@ -29,14 +31,17 @@
|
||||
|
||||
// Checkbox
|
||||
// ==========================================================================
|
||||
$checkbox: 18px;
|
||||
$checkbox-icon-color: $input-icon-color;
|
||||
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus {
|
||||
+ .checkbox-label {
|
||||
&:before, &:after {
|
||||
&::before {
|
||||
border-color: gray;
|
||||
}
|
||||
}
|
||||
@@ -44,7 +49,7 @@
|
||||
|
||||
&:checked {
|
||||
+ .checkbox-label {
|
||||
&:after {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -57,26 +62,26 @@
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
padding-left: (18px + 10px);
|
||||
padding-left: ($checkbox + 10px);
|
||||
|
||||
&:before, &:after {
|
||||
&::before, &::after {
|
||||
@extend .input;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
margin-top: -(18px / 2);
|
||||
margin-top: (-$checkbox / 2);
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: $checkbox;
|
||||
height: $checkbox;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: 13px;
|
||||
background-repeat: no-repeat;
|
||||
@@ -86,6 +91,8 @@
|
||||
|
||||
// Radio
|
||||
// ==========================================================================
|
||||
$radio-icon-color: $input-icon-color;
|
||||
|
||||
.radio {
|
||||
@extend .checkbox;
|
||||
}
|
||||
@@ -93,43 +100,40 @@
|
||||
.radio-label {
|
||||
@extend .checkbox-label;
|
||||
|
||||
&:before, &:after {
|
||||
&::before, &::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Select
|
||||
// ==========================================================================
|
||||
$select-icon: 40px;
|
||||
$select-icon-color: $input-icon-color;
|
||||
|
||||
.select {
|
||||
@extend .input;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 40px;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
padding-right: $select-icon;
|
||||
}
|
||||
|
||||
.select-wrap {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0 15px;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23424242%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
||||
width: $select-icon;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: 10px;
|
||||
background-repeat: no-repeat;
|
||||
@@ -144,5 +148,4 @@
|
||||
@extend .input;
|
||||
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user