ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

forms

Browse Source
This commit is contained in:
Antoine Boulanger
2014-10-02 12:56:32 -04:00
parent df5d306088
commit ec67b2d4d6
5 changed files with 130 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
project-x/assets/images/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="#222" d="M13 1.4l-1.5-1.4-5 5.1-5.1-5.1-1.4 1.4 5.1 5.2-5.1 5 1.5 1.4 5-5 5 5 1.4-1.4-5-5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 194 B

1
project-x/assets/images/select-arrow.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="7.3" viewBox="0 0 13 7.3"><path fill="#3C3C3B" d="M6.5 7.3l3.3-3.7 3.2-3.6h-13l3.3 3.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 155 B

53
project-x/assets/styles/dist/main.css vendored
View File

@@ -601,8 +601,11 @@ h6, .h6, .zeta {
/* ========================================================================== /* ==========================================================================
Forms Forms
========================================================================== */ ========================================================================== */
.input, .select, .checkbox { /* Input
background-color: #cccccc; ========================================================================== */
.input, .select__input, .checkbox__check {
background-color: #ccc;
width: 100%;
display: block; display: block;
border: none; border: none;
outline: none; outline: none;
@@ -612,10 +615,50 @@ h6, .h6, .zeta {
-moz-appearance: none; -moz-appearance: none;
appearance: none; } appearance: none; }
/* Select
========================================================================== */
.select { .select {
min-width: 300px; } display: block;
position: relative; }
.select:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
display: block;
background-color: #ccc;
background-image: url("../../images/select-arrow.svg");
background-repeat: no-repeat;
background-position: center;
pointer-events: none; }
.select__input {
padding-right: 30px; }
.select__input::-ms-expand {
display: none; }
/* Checkbox
========================================================================== */
.checkbox { .checkbox {
display: inline-block; }
.checkbox__input {
display: none; }
.checkbox__input:checked + .checkbox__check:after {
visibility: visible; }
.checkbox__check {
display: inline-block; display: inline-block;
width: 30px; width: 25px;
height: 30px; } height: 25px; }
.checkbox__check:after {
content: "";
display: block;
background-image: url("../../images/check.svg");
background-repeat: no-repeat;
background-position: center;
width: 25px;
height: 25px;
visibility: hidden; }

73
project-x/assets/styles/src/base/_forms.scss
View File

@@ -1,9 +1,12 @@
/* ========================================================================== /* ==========================================================================
Forms Forms | http://codepen.io/AntoineBoulanger/pen/uBJmi
========================================================================== */
/* Input
========================================================================== */ ========================================================================== */
.input { .input {
background-color: #cccccc; background-color: #ccc;
//width: 100%; width: 100%;
display: block; display: block;
border: none; border: none;
outline: none; outline: none;
@@ -14,14 +17,72 @@
appearance: none; appearance: none;
} }
/* Select
========================================================================== */
// Wrapper
.select { .select {
display: block;
position: relative;
// Select arrow
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
display: block;
background-color: #ccc;
background-image: url('../../images/select-arrow.svg');
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
}
}
// Select
.select__input {
@extend .input; @extend .input;
min-width: 300px; padding-right: 30px;
&::-ms-expand {
display: none;
}
} }
/* Checkbox
========================================================================== */
// Wrapper
.checkbox { .checkbox {
display: inline-block;
}
// Real input hidden
.checkbox__input {
display: none;
&:checked {
+ .checkbox__check {
&:after {
visibility: visible;
}
}
}
}
// Fake input visible
.checkbox__check {
@extend .input; @extend .input;
display: inline-block; display: inline-block;
width: 30px; width: 25px;
height: 30px; height: 25px;
&:after {
content: "";
display: block;
background-image: url('../../images/check.svg');
background-repeat: no-repeat;
background-position: center;
width: 25px;
height: 25px;
visibility: hidden;
}
} }

20
project-x/index.html
View File

@@ -15,14 +15,20 @@
<input class="input" type="text"> <input class="input" type="text">
<br><br> <br><br>
<input class="checkbox" type="checkbox"> <label class="checkbox">
<input class="checkbox" type="checkbox"> <input class="checkbox__input" type="checkbox">
<span class="checkbox__check"></span>
</label>
<br><br> <br><br>
<select class="select" name="" id=""> <label class="select">
<option value="">sdfds</option> <select class="select__input" name="" id="">
<option value="">sdf</option> <option value="">sdfds</option>
<option value="">sdfds</option> <option value="">sdf</option>
</select> <option value="">sdfds</option>
</select>
</label>
<script src="assets/scripts/dist/main.js"></script> <script src="assets/scripts/dist/main.js"></script>
</body> </body>