mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Merge pull request #17 from AntoineBoulanger/master
Custom form elements base. Moved to generics instead of base.
This commit is contained in:
Mathieu Ducharme
@@ -63,3 +63,9 @@ No rows that contain floats, no twelve columns system; just the number of items
|
||||
- Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.
|
||||
|
||||
*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*
|
||||
|
||||
### Form
|
||||
|
||||
We included some basic CSS styles and resets to the form elements so we can easily have custom style form elements that work on every browsers.
|
||||
|
||||
*[Demo](http://codepen.io/AntoineBoulanger/pen/uBJmi)*
|
||||
|
||||
198
www/modules/boilerplate/assets/styles/dist/main.css
vendored
198
www/modules/boilerplate/assets/styles/dist/main.css
vendored
@@ -355,19 +355,32 @@ html {
|
||||
audio, canvas, iframe, img, svg, video {
|
||||
vertical-align: middle; }
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
textarea {
|
||||
resize: vertical; }
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: none; }
|
||||
|
||||
/* ==========================================================================
|
||||
Form Resets
|
||||
========================================================================== */
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
textarea {
|
||||
resize: vertical; }
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
/* ==========================================================================
|
||||
Fonts
|
||||
========================================================================== */
|
||||
@@ -437,71 +450,6 @@ h6, .h6, .zeta {
|
||||
line-height: 1.2;
|
||||
margin-top: 0; }
|
||||
|
||||
/* ==========================================================================
|
||||
Forms | http://codepen.io/AntoineBoulanger/pen/uBJmi
|
||||
========================================================================== */
|
||||
/* Input
|
||||
========================================================================== */
|
||||
.input, .select__input, .checkbox__check {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #000000;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
background-color: #cccccc;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
/* Select
|
||||
========================================================================== */
|
||||
.select {
|
||||
position: relative;
|
||||
display: block; }
|
||||
.select:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
background-color: #cccccc;
|
||||
background-image: url("../../images/select-arrow.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; }
|
||||
|
||||
.select__input {
|
||||
padding-right: 30px; }
|
||||
.select__input::-ms-expand {
|
||||
display: none; }
|
||||
|
||||
/* Checkbox
|
||||
========================================================================== */
|
||||
.checkbox {
|
||||
display: inline-block; }
|
||||
|
||||
.checkbox__input {
|
||||
display: none; }
|
||||
.checkbox__input:checked + .checkbox__check:after {
|
||||
visibility: visible; }
|
||||
|
||||
.checkbox__check {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px; }
|
||||
.checkbox__check:after {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
content: "";
|
||||
background-image: url("../../images/check.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; }
|
||||
|
||||
/* ==========================================================================
|
||||
Container
|
||||
========================================================================== */
|
||||
@@ -520,6 +468,110 @@ h6, .h6, .zeta {
|
||||
letter-spacing: normal;
|
||||
font-size: 0; }
|
||||
|
||||
/* ==========================================================================
|
||||
Form Styles
|
||||
========================================================================== */
|
||||
/* Label
|
||||
========================================================================== */
|
||||
.label, .checkbox-label, .radio-label {
|
||||
display: block;
|
||||
margin-bottom: 0.25em; }
|
||||
|
||||
/* Input
|
||||
========================================================================== */
|
||||
.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 {
|
||||
border-color: gray; }
|
||||
.input::-webkit-input-placeholder, .select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
|
||||
color: gray; }
|
||||
.input::-moz-placeholder, .select::-moz-placeholder, .textarea::-moz-placeholder {
|
||||
color: gray; }
|
||||
.input:-ms-input-placeholder, .select:-ms-input-placeholder, .textarea:-ms-input-placeholder {
|
||||
color: gray; }
|
||||
.input::placeholder, .select::placeholder, .textarea::placeholder {
|
||||
color: gray; }
|
||||
|
||||
/* Checkbox
|
||||
========================================================================== */
|
||||
.checkbox, .radio {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
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 {
|
||||
border-color: gray; }
|
||||
.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 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
padding-left: 28px; }
|
||||
.checkbox-label:before, .radio-label:before, .checkbox-label:after, .radio-label:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
margin-top: -9px;
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
content: ""; }
|
||||
.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");
|
||||
background-position: center;
|
||||
background-size: 13px;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0; }
|
||||
|
||||
/* Radio
|
||||
========================================================================== */
|
||||
.radio-label:before, .radio-label:after {
|
||||
border-radius: 50%; }
|
||||
.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; }
|
||||
|
||||
/* Select
|
||||
========================================================================== */
|
||||
.select {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 40px; }
|
||||
.select::-ms-expand {
|
||||
display: none; }
|
||||
|
||||
.select-wrap {
|
||||
position: relative; }
|
||||
.select-wrap: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");
|
||||
background-position: center;
|
||||
background-size: 10px;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
pointer-events: none; }
|
||||
|
||||
/* Textarea
|
||||
========================================================================== */
|
||||
.textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical; }
|
||||
|
||||
/* ==========================================================================
|
||||
Helpers
|
||||
========================================================================== */
|
||||
|
||||
@@ -15,18 +15,19 @@
|
||||
========================================================================== */
|
||||
, "generic/normalize"
|
||||
, "generic/generic"
|
||||
, "generic/form"
|
||||
|
||||
/* Base
|
||||
========================================================================== */
|
||||
, "base/fonts"
|
||||
, "base/base"
|
||||
, "base/headings"
|
||||
, "base/forms" //*
|
||||
|
||||
/* Objects
|
||||
========================================================================== */
|
||||
, "objects/container"
|
||||
, "objects/grid"
|
||||
, "objects/form"
|
||||
|
||||
/* Vendors
|
||||
========================================================================== */
|
||||
|
||||
@@ -1,102 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Forms | http://codepen.io/AntoineBoulanger/pen/uBJmi
|
||||
========================================================================== */
|
||||
|
||||
/* Input
|
||||
========================================================================== */
|
||||
.input {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
color: $black;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
background-color: #cccccc;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* Select
|
||||
========================================================================== */
|
||||
// Wrapper
|
||||
.select {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
// Select arrow
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
|
||||
background-color: #cccccc;
|
||||
background-image: url("../../images/select-arrow.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
// Select
|
||||
.select__input {
|
||||
padding-right: 30px;
|
||||
|
||||
@extend .input;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Checkbox
|
||||
========================================================================== */
|
||||
// Wrapper
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
}
|
||||
// Real input hidden
|
||||
.checkbox__input {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
+ .checkbox__check {
|
||||
&:after {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fake input visible
|
||||
.checkbox__check {
|
||||
display: inline-block;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
@extend .input;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
content: "";
|
||||
|
||||
background-image: url("../../images/check.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
23
www/modules/boilerplate/assets/styles/src/generic/_form.scss
Normal file
23
www/modules/boilerplate/assets/styles/src/generic/_form.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
/* ==========================================================================
|
||||
Form Resets
|
||||
========================================================================== */
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
@@ -18,17 +18,6 @@ video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
148
www/modules/boilerplate/assets/styles/src/objects/_form.scss
Normal file
148
www/modules/boilerplate/assets/styles/src/objects/_form.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
/* ==========================================================================
|
||||
Form Styles
|
||||
========================================================================== */
|
||||
|
||||
/* Label
|
||||
========================================================================== */
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
/* Input
|
||||
========================================================================== */
|
||||
.input {
|
||||
padding: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: lightgray;
|
||||
background-color: white;
|
||||
|
||||
&:focus {
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
/* Checkbox
|
||||
========================================================================== */
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
|
||||
&:focus {
|
||||
+ .checkbox-label {
|
||||
&:before, &:after {
|
||||
border-color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .checkbox-label {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
@extend .label;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
padding-left: (18px + 10px);
|
||||
|
||||
&:before, &:after {
|
||||
@extend .input;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
margin-top: -(18px / 2);
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&: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-position: center;
|
||||
background-size: 13px;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Radio
|
||||
========================================================================== */
|
||||
.radio {
|
||||
@extend .checkbox;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
@extend .checkbox-label;
|
||||
|
||||
&: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");
|
||||
background-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Select
|
||||
========================================================================== */
|
||||
.select {
|
||||
@extend .input;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 40px;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select-wrap {
|
||||
position: relative;
|
||||
|
||||
&: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");
|
||||
background-position: center;
|
||||
background-size: 10px;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Textarea
|
||||
========================================================================== */
|
||||
.textarea {
|
||||
@extend .input;
|
||||
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
Reference in New Issue
Block a user