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
Download patch file Download diff file Expand all files Collapse all files

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;
}
}

93
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;
// common styles
.switch,
.checkbox,
.radio {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
vertical-align: middle;
outline: 0;
cursor: pointer;
box-shadow: inset 0 0 0 1px $checkbox-color;
border-radius: $checkbox-border-radius;
background: #fff;
& ~ label {
display: flex;
~ label {
cursor: pointer;
user-select: none;
}
&: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: $border-radius;
box-shadow: 0 0 0 2px $color-checkbox inset;
transition: .25s background-color;
&::-ms-check {
display: none; // unstyle IE checkboxes
}
}
// 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;
}
}
&:checked ~ label:before {
}
// 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;
}