beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Checkbox and radio component rework

Browse source
This commit is contained in:
Angelos Chalaris 2016-12-06 10:58:54 +02:00
parent 628983f159
commit 9dc0cdf486
6 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
dist/mini-default.css vendored
View file

@ -752,22 +752,20 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
margin-left: 21.25px; }
margin-left: 20px; }
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
box-sizing: border-box;
display: inline-block;
position: absolute;
top: 0;
bottom: 3px;
left: 0;
width: 17px;
height: 17px;
width: 16px;
height: 16px;
content: '';
border: 1px solid #bdbdbd;
border-radius: 1px;
background: #f5f5f5;
color: #212121;
margin-left: -21.25px;
vertical-align: text-bottom; }
margin-left: -20px; }
.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:active:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:active:before, .input-group [type="radio"] + label:focus:before {
border-color: #0288d1; }
.input-group [type="checkbox"]:focus + label:before, .input-group [type="radio"]:focus + label:before {
@ -779,12 +777,12 @@ input[type="file"] {
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
opacity: 0.75; }
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
margin-left: -21px;
margin-left: -20px;
position: absolute;
top: 4px;
bottom: 7px;
left: 4px;
width: 9px;
height: 9px;
width: 10px;
height: 10px;
background: #212121;
content: ''; }

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

5
docs/v2/DEVLOG.md
View file

@ -600,3 +600,8 @@
- Added `inverse` `button` style to the list of `button` styles.
- Removed the `custom` `button` demo that was still lingering in the current flavor.
- Updated colors and stuff for `button` color variants. They should be consistent now.
## 20161206
- Tweaks to the `checkbox` and `radio` components. Added a lot of customization and recalculated their values from the ground up. This should fix problems with displaying them on different screens.

5
docs/v2/playground.html
View file

@ -80,12 +80,13 @@
<button class="large">large</button>
<button class="inverse">button</button>
<p>Use rows and columns for normal alignment, use input-groups in rows without columns for unaligned but just vertical forms or predesigned forms etc.</p>
<p>Add align-items:center hack style</p>
<form>
<fieldset>
<legend>Aligned form (using <code>width</code> and grid - no container):</legend>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">
<label for="website" style="vertical-align: text-top;">Website</label>
<label for="website">Website</label>
</div>
<div class="col-sm-12 col-md">
<input type="text" value="" id="website" placeholder="website" style="width:85%;">
@ -107,7 +108,7 @@
</div>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">
<label for="weburl" style="vertical-align: text-top;">URL</label>
<label for="weburl">URL</label>
</div>
<div class="col-sm-12 col-md">
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">

6
src/flavors/mini-default.scss
View file

@ -265,12 +265,14 @@ $button-style2-border-style: 0; // Border style for button style 2
$button-style2-border-radius: 4px; // Border radius for button style 2
$button-style2-padding: 12px 18px; // Padding for button style 2
$button-style2-margin: 10px 8px; // Margin for button style 2
$checkbox-size: 17px; // Size for checkbox/radio [2]
$checkbox-size: 16px; // Size for checkbox/radio [2]
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
$checkbox-border-style: $input-border-style; // Border style for checkbox/radio
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
$checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
// Notes:
// [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way

19
src/mini/_input_control.scss
View file

@ -325,27 +325,24 @@ $hide-file-inputs: true !default;
// Label styling based on the specifics of the checkbox/radio variables.
[type="checkbox"] + label, [type="radio"] + label {
position: relative;
margin-left: $checkbox-size + ($checkbox-size * 0.25);
margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
// Styling for checkbox/radio box part.
&:before {
box-sizing: border-box;
//box-sizing: border-box;
display: inline-block;
position: absolute;
top: 0;
bottom: $checkbox-bottom-spacing;
left: 0;
width: $checkbox-size;
height: $checkbox-size;
content: '';
@if $checkbox-border-style != 0 {
border: $checkbox-border-style;
}
border: $checkbox-border-thickness solid $checkbox-border-color;
@if $checkbox-border-radius != 0 {
border-radius: $checkbox-border-radius;
}
background: $checkbox-back-color;
color: $checkbox-fore-color;
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
vertical-align: text-bottom;
}
// Hover, focus, active styling.
&:hover, &:active, &:focus {
@ -375,10 +372,10 @@ $hide-file-inputs: true !default;
&:after {
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
position: absolute;
top: ($checkbox-size - floor($checkbox-size * 0.55))/2;
left: ($checkbox-size - floor($checkbox-size * 0.55))/2;
width: floor($checkbox-size * 0.55);
height: floor($checkbox-size * 0.55);
bottom: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
left: floor($checkbox-size * 0.25);
width: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
height: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
background: $checkbox-fore-color;
content: '';
}