Skip to content

Commit

Permalink
[RFC] Change checkbox component (#121)
Browse files Browse the repository at this point in the history 
* checkbox component updated

* update checkbox styles

* changes according Joaquim reviews

* bower updated

* changes according code review
  • Loading branch information
@niceoutput
niceoutput authored and Telma Antunes committed Apr 20, 2017
1 parent cb4e603 commit 4a3582e
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 89 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "uniq",
"version": "2.3.5",
"version": "2.4.0",
"description": "Internal CSS Framework/Toolkit used @ Uniplaces",
"main": [
"src/styles/**/*",
Expand Down
9 changes: 0 additions & 9 deletions src/images/check-icon.svg
View file

This file was deleted.

4 changes: 4 additions & 0 deletions src/images/checkbox-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 17 additions & 53 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,61 +196,28 @@
<div class="button button--extra-small button--full-width button--alternative ">Add living room</div>

<div class="subheader">Which amenities does your property have?</div>
<div class="input-container input-container--bordered input-container--focused">
<div class="checkbox checkbox--checked">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="11.9px" viewBox="0 0 15 11.9" style="enable-background:new 0 0 15 11.9;" xml:space="preserve">
<polygon class="st0" points="12.9,0.2 5.5,8 2.4,5 0.7,6.7 5.5,11.5 14.7,1.9 " fill="#FFFFFF"/>
</svg>
</div>
<label for="">WiFi</label>
</div>
<div class="input-container input-container--bordered">
<div class="checkbox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="11.9px" viewBox="0 0 15 11.9" style="enable-background:new 0 0 15 11.9;" xml:space="preserve">
<polygon class="st0" points="12.9,0.2 5.5,8 2.4,5 0.7,6.7 5.5,11.5 14.7,1.9 " fill="#FFFFFF"/>
</svg>
</div>
<label for="">Cable TV</label>
</div>
<div class="input-container input-container--bordered">
<div class="checkbox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="11.9px" viewBox="0 0 15 11.9" style="enable-background:new 0 0 15 11.9;" xml:space="preserve">
<polygon class="st0" points="12.9,0.2 5.5,8 2.4,5 0.7,6.7 5.5,11.5 14.7,1.9 " fill="#FFFFFF"/>
</svg>
</div>
<label for="">Heating</label>
</div>
<div class="input-container input-container--bordered">
<div class="checkbox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="11.9px" viewBox="0 0 15 11.9" style="enable-background:new 0 0 15 11.9;" xml:space="preserve">
<polygon class="st0" points="12.9,0.2 5.5,8 2.4,5 0.7,6.7 5.5,11.5 14.7,1.9 " fill="#FFFFFF"/>
</svg>
</div>
<label for="">Air conditioning</label>
<input type="checkbox" id="elevator" class="checkbox checkbox--use-background" checked>
<label for="elevator">Elevator</label>
</div>
<div class="input-container input-container--bordered">
<div class="checkbox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="11.9px" viewBox="0 0 15 11.9" style="enable-background:new 0 0 15 11.9;" xml:space="preserve">
<polygon class="st0" points="12.9,0.2 5.5,8 2.4,5 0.7,6.7 5.5,11.5 14.7,1.9 " fill="#FFFFFF"/>
</svg>
</div>
<label for="">Outdoor area (terrace, balcony)</label>
<div class="input-container input-container--bordered input-container--focused">
<input type="checkbox" id="wifi" class="checkbox checkbox--error">
<label for="wifi">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 10">
<path fill="#fff" d="M11.08.31L3.71 7.19l-2-2a1.12 1.12 0 0 0-1.47 0 1.12 1.12 0 0 0 0 1.47L3 9.39a1.06 1.06 0 0 0 .74.37 1.74 1.74 0 0 0 .74-.25l8.1-7.61a.92.92 0 0 0 0-1.47c-.52-.49-1.14-.61-1.5-.12z"/>
</svg>
WiFi
</label>
</div>
<div class="input-container input-container--bordered">
<div class="checkbox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="11.9px" viewBox="0 0 15 11.9" style="enable-background:new 0 0 15 11.9;" xml:space="preserve">
<polygon class="st0" points="12.9,0.2 5.5,8 2.4,5 0.7,6.7 5.5,11.5 14.7,1.9 " fill="#FFFFFF"/>
</svg>
</div>
<label for="">Elevator</label>
<input type="checkbox" id="cabletv" class="checkbox checkbox--disabled">
<label for="cabletv">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 10">
<path fill="#fff" d="M11.08.31L3.71 7.19l-2-2a1.12 1.12 0 0 0-1.47 0 1.12 1.12 0 0 0 0 1.47L3 9.39a1.06 1.06 0 0 0 .74.37 1.74 1.74 0 0 0 .74-.25l8.1-7.61a.92.92 0 0 0 0-1.47c-.52-.49-1.14-.61-1.5-.12z"/>
</svg>
Cable TV
</label>
</div>

<div class="subheader">Does the property have gas installation?</div>
<div class="input-container input-container--bordered">
<div class="radio-button">
Expand Down Expand Up @@ -803,9 +770,6 @@
$('#toggle-menu').on('click', function () {
$(this).toggleClass('header__wrapper__mobile-buttons--active');
});
$('.checkbox').on('click', function () {
$(this).toggleClass('checkbox--checked');
});
$('#userToggleDropdown').on('click', function () {
$('#userDropdown').toggleClass('header__nav__dropdown--active');
});
Expand Down
84 changes: 58 additions & 26 deletions src/styles/_components/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ $checkbox-size: 32px;
@include align-items-center();
@include height-modifiers();
margin-bottom: 20px;
border-radius: 4px;
overflow: hidden;
white-space: nowrap;
will-change: border;
Expand Down Expand Up @@ -209,45 +208,78 @@ $checkbox-size: 32px;
}
}

// BASIC CHECKBOX STYLES
@mixin checkbox() {
@include flex();
@include align-items-center();
@include justify-content-center();
width: $checkbox-size;
height: $checkbox-size;
border: 1px solid color('input', 'border');
margin-right: 20px;
border-radius: 4px;
will-change: background-color;

svg {
display: none;
fill: color('primary');
}
display: none;

& + label {
@include flex();
height: $checkbox-size;
line-height: $checkbox-size;
@include font("IntervalNextReg");
font-size: em(18px);
font-size: em(16px);
color: color('text', 'body');
will-change: color;
}
cursor: pointer;
position: relative;

&:focus,
&:checked,
&--checked {
border: 1px solid color('primary');
background-color: color('primary');
&:before {
content: "";
width: $checkbox-size;
height: $checkbox-size;
border: 2px solid color('input', 'border');
background: color('primary', 'highlight');
border-radius: 4px;
margin-right: 20px;
}

svg {
display: block;
fill: color('background');
display: none;
position: absolute;
left: 8px;
top: calc(50% - 6px);
fill: color('primary', 'highlight');
width: 17px;
}
}

&:focus,
&:checked {
& + label {
color: color('primary');

svg {
display: block;
}

&:before {
background: color('primary');
border: 2px solid color('primary');
border-radius: 4px;
}
}
}

&--use-background {
&:focus,
&:checked {
& + label:before {
background: color('primary') url("../images/checkbox-icon.svg") center/65% no-repeat;
}
}
}

&--disabled {
+ label {
pointer-events: none;
cursor: default;
opacity: 0.3;
}
}

&--error {
+ label {
&:before {
border: 2px solid color('feedback','error');
}
}
}
}
Expand Down

0 comments on commit 4a3582e

Please sign in to comment.