dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

renommage des variables de composants

Browse source
This commit is contained in:
Raphael Goetter 2017-09-26 11:42:46 +02:00
parent c5b27ac2d3
commit f45ea52562
13 changed files with 225 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
changelog.md
View file

@ -9,7 +9,7 @@
- ajout des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
- ajout des alertes, avec possibilités de variantes (primary, success, warning, etc.)
- ajout d'un bouton de navigation .button-burger
- ajout des checkbox et radio stylés
- ajout des checkbox, radio et bouton "switch" stylés
- ajout des onglets (tabs)
- ajout des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
- refonte des styles de formulaires
@ -20,6 +20,7 @@
- automatisation des classes utilitaires via Sass
- ajout de `* {min-width: 0}` pour éviter la valeur `auto` sur les flex-items et grid-items
- renommage des variables couleur de projets
- renommage des variables de composants
# changelog v6.1.2 (21 juin 2017)
- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
@ -33,11 +34,11 @@
# changelog v6.1.0 (3 mars 2017)
- passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
- ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`
- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$color-link`, etc.
- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$link-color`, etc.
- typo fix
# changelog v6.0.8 (10 janvier 2017)
- application de `$color-link-hover` uniquement si différent de `$color-link`
- application de `$link-color-hover` uniquement si différent de `$link-color`
# changelog v6.0.7 (7 décembre 2016)
- application de `$font-stack-headings` uniquement si différent de `$font-stack-common`

154
css/knacss-unminified.css
View file

@ -24,7 +24,6 @@
- Forms
- Buttons
- Checkbox
- Radio
- Tabs
- Badges
- Alerts
@ -516,10 +515,6 @@ a {
color: #333;
}
a:focus, a:hover, a:active {
color: #000;
}
/* Headings */
h1, .h1-like {
font-size: 2.8rem;
@ -1108,7 +1103,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
}
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden, .checkbox, .radio, .tabs-content-item[aria-hidden="true"] {
.visually-hidden, .tabs-content-item[aria-hidden="true"] {
position: absolute !important;
border: 0 !important;
height: 1px !important;
@ -2267,80 +2262,107 @@ button:focus {
}
/* ----------------------------- */
/* ==Checkbox */
/* ==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> */
.checkbox ~ label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* use .radio class on input type=radio */
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
/* use .switch class on input type=checkbox */
.switch,
.checkbox,
.radio {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.checkbox ~ label:before {
content: "";
display: inline-block;
vertical-align: baseline;
-webkit-transform: translateY(0.2rem);
transform: translateY(0.2rem);
margin-right: .5rem;
width: 1.1em;
height: 1.1em;
border: 0;
-webkit-box-shadow: inset 0 0 0 1px #727e96;
box-shadow: inset 0 0 0 1px #727e96;
border-radius: 3em;
background: #fff;
border-radius: 0;
-webkit-box-shadow: 0 0 0 2px #727e96 inset;
box-shadow: 0 0 0 2px #727e96 inset;
-webkit-transition: .25s background-color;
transition: .25s background-color;
}
.checkbox:checked ~ label:before {
.switch ~ label,
.checkbox ~ label,
.radio ~ label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.switch::-ms-check,
.checkbox::-ms-check,
.radio::-ms-check {
display: none;
}
.switch {
width: 6rem;
height: 3rem;
line-height: 3rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 60%;
-webkit-box-shadow: inset -3rem 0 0 #727e96, inset 0 0 0 1px #727e96;
box-shadow: inset -3rem 0 0 #727e96, inset 0 0 0 1px #727e96;
-webkit-transition: -webkit-box-shadow .15s;
transition: -webkit-box-shadow .15s;
transition: box-shadow .15s;
transition: box-shadow .15s, -webkit-box-shadow .15s;
}
.switch::before, .switch::after {
color: #fff;
}
.switch::before {
content: "off";
float: right;
}
.switch:checked {
-webkit-box-shadow: inset 3rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C;
box-shadow: inset 3rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C;
}
.switch:checked::before {
content: "on";
float: left;
}
.checkbox {
width: 3rem;
height: 3rem;
-webkit-transition: background-color .15s;
transition: background-color .15s;
}
.checkbox:checked {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
background-color: #727e96;
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
/* ----------------------------- */
/* ==Rdio */
/* ----------------------------- */
/* use .radio class on input type=radio */
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
.radio ~ label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
}
.radio ~ label:before {
content: "";
display: inline-block;
vertical-align: baseline;
-webkit-transform: translateY(0.2rem);
transform: translateY(0.2rem);
margin-right: .5rem;
width: 1.1em;
height: 1.1em;
border: 0;
background: #fff;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 2px #727e96 inset;
box-shadow: 0 0 0 2px #727e96 inset;
-webkit-transition: .25s background;
transition: .25s background;
}
.radio:checked ~ label:before {
background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
background-color: #727e96;
}
.radio {
width: 3rem;
height: 3rem;
-webkit-transition: background-color .15s;
transition: background-color .15s;
}
.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-position: center;
background-repeat: no-repeat;
pointer-events: none;
background-color: #727e96;
}
/* ----------------------------- */

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

52
sass/_config/_variables.scss
View file

@ -47,25 +47,27 @@ $color-muted : #F7F7F7;
// colors used in project
$color-base : $color-dark;
$background-base : $color-light;
$color-link : $color-gray1;
$color-link-hover: $color-dark;
$color-forms : $color-gray3;
$link-color : $color-gray1;
$link-color-hover: $color-dark;
$forms-color : $color-gray3;
// quotes
$color-quote : $color-gray5;
$quote-color : $color-gray5;
// arrows
$color-arrow : $color-dark;
$arrow-color : $color-dark;
// checkboxes, radios
$color-checkbox : $color-gray3;
$checkbox-color : $color-gray3;
$checkbox-size: 3rem;
$checkbox-border-radius: 3em;
// tables
$border-table : $color-gray4;
$color-table-caption : $color-gray3;
$color-table-head : $color-base;
$background-table : transparent;
$background-table-head : transparent;
$table-border : $color-gray4;
$table-caption-color : $color-gray3;
$table-head-color : $color-base;
$table-background : transparent;
$table-head-background : transparent;
// buttons, badges, alerts color variants list
// name - background-color - color - border
@ -80,21 +82,21 @@ $variants-list: (
);
// tabs
$border-tabs : $color-gray5;
$border-tabs-active : $color-gray3;
$color-tabs : $color-base;
$color-tabs-active : $color-gray3;
$background-tabs : transparent;
$background-tabs-active : transparent;
$border-radius-tabs : 0;
$tabs-border : $color-gray5;
$tabs-active-border : $color-gray3;
$tabs-color : $color-base;
$tabs-active-color : $color-gray3;
$tabs-background : transparent;
$tabs-active-background : transparent;
$tabs-border-radius : 0;
// nav burger button
$color-burger : $color-gray1;
$background-burger : transparent;
$background-burger-hover : transparent;
$size-burger : 2.6rem;
$weight-burger : 5px; // size of stripes
$padding-burger : 0;
$burger-color : $color-gray1;
$burger-background : transparent;
$burger-hover-background : transparent;
$burger-size : 2.6rem;
$burger-weight : 5px; // size of stripes
$burger-padding : 0;
// spacings (choose unit you prefer)
$tiny-value : .5rem ; // tiny value for margins / paddings
@ -113,7 +115,7 @@ $ultra-large-plus-value : 20rem ; // ultra large value for margins / paddings
// grid gutters (for .has-gutter-* classes)
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// border-radius
// global border-radius
$border-radius: 0;
// Responsive breakpoints variables

8
sass/_library/_base.scss
View file

@ -40,15 +40,15 @@ body {
/* Links */
a {
color: $color-link;
color: $link-color;
// No styling on focus/hover if there's no effect.
@if variable_exists(color-link-hover) and
( null == index( ($color-link, null, false), $color-link-hover) ) {
( null == index( ($link-color, null, false), $link-color-hover) ) {
&:focus,
&:hover,
&:active {
color: $color-link-hover;
color: $link-color-hover;
}
}
}
@ -294,7 +294,7 @@ blockquote::before {
font-size: 5em;
height: .4em;
line-height: .9;
color: $color-quote;
color: $quote-color;
}
blockquote > footer {

2
sass/components/_arrows.scss
View file

@ -9,7 +9,7 @@
width: 1em;
height: 1em;
mask-size: cover;
background-color: $color-arrow;
background-color: $arrow-color;
line-height: 1;
vertical-align: baseline;
}

18
sass/components/_buttons.scss
View file

@ -109,15 +109,15 @@ button {
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: $size-burger;
width: $size-burger;
padding: $padding-burger;
background-color: $background-burger;
background-image: linear-gradient($color-burger, $color-burger);
height: $burger-size;
width: $burger-size;
padding: $burger-padding;
background-color: $burger-background;
background-image: linear-gradient($burger-color, $burger-color);
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
background-size: 100% $weight-burger;
background-size: 100% $burger-weight;
transition: .25s;
transition-property: transform, background;
will-change: transform, background;
@ -125,8 +125,8 @@ button {
&::before,
&::after {
content: "";
height: $weight-burger;
background: $color-burger;
height: $burger-weight;
background: $burger-color;
transition: .25s;
transition-property: transform, top;
will-change: transform, top;
@ -135,7 +135,7 @@ button {
&:hover {
& > * {
background-color: $background-burger-hover;
background-color: $burger-hover-background;
}
}

95
sass/components/_checkbox.scss
View file

@ -1,36 +1,89 @@
/* ----------------------------- */
/* ==Checkbox */
/* ==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> */
/* use .radio class on input type=radio */
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
/* use .switch class on input type=checkbox */
// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
.checkbox {
@extend .visually-hidden;
& ~ label {
display: flex;
// common styles
.switch,
.checkbox,
.radio {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
vertical-align: middle;
outline: 0;
cursor: pointer;
&:before {
content: "";
display: inline-block;
vertical-align: baseline;
transform: translateY(.2rem);
margin-right: .5rem;
width: 1.1em; height: 1.1em;
border: 0;
box-shadow: inset 0 0 0 1px $checkbox-color;
border-radius: $checkbox-border-radius;
background: #fff;
border-radius: $border-radius;
box-shadow: 0 0 0 2px $color-checkbox inset;
transition: .25s background-color;
~ label {
cursor: pointer;
user-select: none;
}
&::-ms-check {
display: none; // unstyle IE checkboxes
}
}
&:checked ~ label:before {
// switch styling
.switch {
width: $checkbox-size *2;
height: $checkbox-size;
line-height: $checkbox-size;
padding-left: $checkbox-size /4;
padding-right: $checkbox-size /4;
font-size: 60%;
box-shadow: inset -#{$checkbox-size} 0 0 $checkbox-color, inset 0 0 0 1px $checkbox-color;
transition: box-shadow .15s;
&::before, &::after {
color: #fff;
}
&::before {
content: "off";
float: right;
}
&:checked {
box-shadow: inset #{$checkbox-size} 0 0 $color-success, inset 0 0 0 1px $color-success;
&::before {
content: "on";
float: left;
}
}
}
// checkbox styling
.checkbox {
width: $checkbox-size;
height: $checkbox-size;
transition: background-color .15s;
&:checked {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
background-color: $color-checkbox;
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
background-color: $checkbox-color;
}
}
// radio styling
.radio {
width: $checkbox-size;
height: $checkbox-size;
transition: background-color .15s;
&: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-position: center;
background-repeat: no-repeat;
background-color: $checkbox-color;
}
}

4
sass/components/_forms.scss
View file

@ -44,7 +44,7 @@ textarea {
font-family: inherit;
font-size: inherit;
border: 0;
box-shadow: 0 0 0 1px $color-forms inset;
box-shadow: 0 0 0 1px $forms-color inset;
color: $color-base;
vertical-align: middle;
padding: $tiny-value $small-value;
@ -58,7 +58,7 @@ textarea {
}
[type="submit"] {
background-color: $color-forms;
background-color: $forms-color;
color: $color-light;
cursor: pointer;
}

35
sass/components/_radio.scss
View file

@ -1,35 +0,0 @@
/* ----------------------------- */
/* ==Rdio */
/* ----------------------------- */
/* use .radio class on input type=radio */
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
.radio {
@extend .visually-hidden;
& ~ label {
display: flex;
cursor: pointer;
&:before {
content: "";
display: inline-block;
vertical-align: baseline;
transform: translateY(.2rem);
margin-right: .5rem;
width: 1.1em; height: 1.1em;
border: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px $color-checkbox inset;
transition: .25s background;
}
}
&:checked ~ label:before {
background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
background-color: $color-checkbox;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
}

12
sass/components/_tables.scss
View file

@ -14,8 +14,8 @@ table,
.table {
display: table;
border: 1px solid $border-table;
background: $background-table;
border: 1px solid $table-border;
background: $table-background;
&--zebra {
& tbody tr:nth-child(odd) {
@ -26,7 +26,7 @@ table,
& caption {
caption-side: bottom;
padding: $small-value;
color: $color-table-caption;
color: $table-caption-color;
font-style: italic;
text-align: right;
}
@ -36,13 +36,13 @@ table,
padding: 0.3rem 0.6rem;
min-width: $medium-value;
vertical-align: top;
border: 1px $border-table dotted;
border: 1px $table-border dotted;
text-align: left;
cursor: default;
}
& thead {
color: $color-table-head;
background: $background-table-head;
color: $table-head-color;
background: $table-head-background;
}
}

18
sass/components/_tabs.scss
View file

@ -6,30 +6,30 @@
.tabs-menu {
border-bottom: 2px solid $border-tabs;
border-bottom: 2px solid $tabs-border;
&-link {
display: block;
margin-bottom: -2px;
padding: $tiny-value $medium-plus-value;
border-bottom: 4px solid transparent;
color: $color-tabs;
background: $background-tabs;
color: $tabs-color;
background: $tabs-background;
text-decoration: none;
border-radius: $border-radius-tabs $border-radius-tabs 0 0;
border-radius: $tabs-border-radius $tabs-border-radius 0 0;
transition: .25s;
transition-property: color, border, background-color;
&.is-active {
border-bottom-color: $border-tabs-active;
color: $color-tabs-active;
background: $background-tabs-active;
border-bottom-color: $tabs-active-border;
color: $tabs-active-color;
background: $tabs-active-background;
outline: 0;
}
&:focus {
border-bottom-color: $border-tabs-active;
color: $color-tabs-active;
border-bottom-color: $tabs-active-border;
color: $tabs-active-color;
outline: 0;
}

4
sass/knacss.scss
View file

@ -25,7 +25,6 @@
- Forms
- Buttons
- Checkbox
- Radio
- Tabs
- Badges
- Alerts
@ -56,8 +55,7 @@
@import "components/_tables.scss"; // data tables consistency
@import "components/_forms.scss"; // forms consistency and styles
@import "components/_buttons.scss"; // buttons styles
@import "components/_checkbox.scss"; // checkbox styles
@import "components/_radio.scss"; // radio styles
@import "components/_checkbox.scss"; // checkbox, radio, switch styles
@import "components/_tabs.scss"; // tabs styles
@import "components/_arrows.scss"; // arrows styles
@import "components/_badges.scss"; // badges styles