mise à jour des styles, et variables des checkbox, radio et switches
This commit is contained in:
Raphael Goetter
parent
acbfc58573
commit
c59a02ff10
8 changed files with 74 additions and 45 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "7.0.4",
|
||||
"version": "7.0.5",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# changelog v7.0.5 (25 mai 2018)
|
||||
- mise à jour des styles, SVG, et variables des checkbox, radio et switches
|
||||
|
||||
# changelog v7.0.4 (04 avril 2018)
|
||||
- ajout de `::placeholder` cf. issue #276
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* www.KNACSS.com v7.0.4 (april, 4 2018) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.0.5 (mai, 25 2018) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -760,7 +760,7 @@ kbd {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
/* blocks that need to be placed under floats */
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -1843,7 +1843,7 @@ ul.is-unstyled, ul.unstyled {
|
|||
/* ----------------------------- */
|
||||
/* ==Media object */
|
||||
/* ----------------------------- */
|
||||
/* recommanded HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
|
||||
/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
@media (min-width: 480px) {
|
||||
.media {
|
||||
|
|
@ -2306,9 +2306,9 @@ button:focus {
|
|||
/* ==Checkbox, radio, switch */
|
||||
/* ----------------------------- */
|
||||
/* use .checkbox class on input type=checkbox */
|
||||
/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
||||
/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
||||
/* use .radio class on input type=radio */
|
||||
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
|
||||
/* recommended HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
|
||||
/* use .switch class on input type=checkbox */
|
||||
.checkbox {
|
||||
border-radius: 4px;
|
||||
|
|
@ -2331,8 +2331,6 @@ button:focus {
|
|||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 1px #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.switch ~ label,
|
||||
|
|
@ -2351,9 +2349,10 @@ button:focus {
|
|||
width: 4rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
font-size: 60%;
|
||||
font-size: 70%;
|
||||
box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
|
||||
transition: box-shadow .15s;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.switch::before, .switch::after {
|
||||
|
|
@ -2380,11 +2379,14 @@ button:focus {
|
|||
.checkbox {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
box-shadow: inset 0 0 0 1px #333;
|
||||
background-color: #fff;
|
||||
transition: background-color .15s;
|
||||
}
|
||||
|
||||
.checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E");
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E");
|
||||
background-size: 60% 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -2394,15 +2396,18 @@ button:focus {
|
|||
.radio {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
transition: background-color .15s;
|
||||
background-size: 0% 0%;
|
||||
transition: background-size .15s;
|
||||
box-shadow: inset 0 0 0 1px #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.radio:checked {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
|
||||
background-size: 80% 80%;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23333333%22/%3E%3C/svg%3E");
|
||||
background-size: 90% 90%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "7.0.4",
|
||||
"version": "7.0.5",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": [
|
||||
|
|
|
|||
|
|
@ -168,12 +168,16 @@ $quote-color : $gray-200;
|
|||
$arrow-color : $black;
|
||||
|
||||
// Components: checkboxes, radios, switches
|
||||
$checkbox-color : $gray-800;
|
||||
$checkbox-size : 2rem;
|
||||
$checkbox-border-radius : 4px;
|
||||
$switch-color : $gray-800;
|
||||
$switch-size : 2rem;
|
||||
$switch-border-radius : 3em;
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $gray-800;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
$radio-color: $gray-800;
|
||||
$radio-background: $white;
|
||||
$switch-color: $white;
|
||||
$switch-background: $gray-800;
|
||||
$switch-size: 2rem;
|
||||
$switch-border-radius: 3em;
|
||||
|
||||
// Component: tables
|
||||
$table-border : $gray-500;
|
||||
|
|
|
|||
|
|
@ -28,8 +28,6 @@
|
|||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-color;
|
||||
background: #fff;
|
||||
|
||||
& ~ label {
|
||||
cursor: pointer;
|
||||
|
|
@ -45,24 +43,24 @@
|
|||
width: $switch-size *2;
|
||||
height: $switch-size;
|
||||
line-height: $switch-size;
|
||||
font-size: 60%;
|
||||
box-shadow: inset -#{$switch-size} 0 0 $switch-color, inset 0 0 0 1px $switch-color;
|
||||
font-size: 70%;
|
||||
box-shadow: inset -#{$switch-size} 0 0 $switch-background,
|
||||
inset 0 0 0 1px $switch-background;
|
||||
transition: box-shadow .15s;
|
||||
|
||||
&::before, &::after {
|
||||
background-color: $switch-color;
|
||||
&::before,
|
||||
&::after {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
color: $switch-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "✕";
|
||||
float: right;
|
||||
margin-right: $switch-size /3;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
box-shadow: inset #{$switch-size} 0 0 $color-success, inset 0 0 0 1px $color-success;
|
||||
|
||||
box-shadow: inset #{$switch-size} 0 0 $color-success,
|
||||
inset 0 0 0 1px $color-success;
|
||||
&::before {
|
||||
content: "✓";
|
||||
float: left;
|
||||
|
|
@ -71,19 +69,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// checkbox styling
|
||||
.checkbox {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-background;
|
||||
background-color: $checkbox-color;
|
||||
transition: background-color .15s;
|
||||
|
||||
&:checked {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E");
|
||||
$red: red($checkbox-color);
|
||||
$green: green($checkbox-color);
|
||||
$blue: blue($checkbox-color);
|
||||
$rgb: rgb($red, $green, $blue);
|
||||
$slice: str-slice(ie-hex-str($rgb), 4);
|
||||
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23";
|
||||
$last: "%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E";
|
||||
$combo: "#{$first}#{$slice}#{$last}";
|
||||
background-image: url($combo);
|
||||
background-size: 60% 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-color;
|
||||
background-color: $checkbox-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,13 +98,23 @@
|
|||
.radio {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
transition: background-color .15s;
|
||||
|
||||
background-size: 0% 0%;
|
||||
transition: background-size .15s;
|
||||
box-shadow: inset 0 0 0 1px $radio-color;
|
||||
background-color: $radio-background;
|
||||
&:checked {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
|
||||
background-size: 80% 80%;
|
||||
$red: red($radio-color);
|
||||
$green: green($radio-color);
|
||||
$blue: blue($radio-color);
|
||||
$rgb: rgb($red, $green, $blue);
|
||||
$slice: str-slice(ie-hex-str($rgb), 4);
|
||||
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23";
|
||||
$last: "%22/%3E%3C/svg%3E";
|
||||
$combo: "#{$first}#{$slice}#{$last}";
|
||||
background-image: url($combo);
|
||||
background-size: 90% 90%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-color;
|
||||
background-color: $radio-background;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com v7.0.4 (april, 4 2018) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.0.5 (mai, 25 2018) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue