Transfert des fichiers Reborn vers branche v8
This commit is contained in:
Raphaël Goetter
parent
f14b1294cf
commit
e3e57665a0
50 changed files with 2248 additions and 14990 deletions
|
|
@ -1,55 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Alerts */
|
||||
/* ----------------------------- */
|
||||
/* use .alert-- classes for variants */
|
||||
|
||||
.alert {
|
||||
padding: $spacer-small $spacer-small;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
color: $color-base;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .alert;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// alert state variants
|
||||
.alert {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Arrows */
|
||||
/* ----------------------------- */
|
||||
/* see https://knacss.com/styleguide.html#arrows */
|
||||
|
||||
[class*="icon-arrow--"] {
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: cover;
|
||||
background-color: $arrow-color;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow--down::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--up::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--right::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--left::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Badges */
|
||||
/* ----------------------------- */
|
||||
/* use .badge-- classes for variants */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $spacer-tiny;
|
||||
border-radius: 50%;
|
||||
color: $color-base;
|
||||
background-color: $color-muted;
|
||||
line-height: 1;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .badge;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// badge state variants
|
||||
.badge {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
85
sass/components/_burger.scss
Executable file
85
sass/components/_burger.scss
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
* component nav "burger" button
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
||||
* activate it with a JS toggle-class to .is-active
|
||||
* see doc : https: //www.knacss.com/doc.html#buttons
|
||||
*/
|
||||
|
||||
/*
|
||||
* burger variables (you can change them)
|
||||
*/
|
||||
|
||||
$burger-color : #333;
|
||||
$burger-background : transparent;
|
||||
$burger-hover-background : transparent;
|
||||
$burger-size : 2.6rem;
|
||||
$burger-weight : 5px; // size of stripes
|
||||
$burger-padding : 0;
|
||||
|
||||
/*
|
||||
* burger button styles
|
||||
*/
|
||||
|
||||
.burger-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.burger-button > * {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
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% $burger-weight;
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
}
|
||||
|
||||
.burger-button > *::before,
|
||||
.burger-button > *::after {
|
||||
content: "";
|
||||
height: $burger-weight;
|
||||
background: $burger-color;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
|
||||
.burger-button:hover > * {
|
||||
background-color: $burger-hover-background;
|
||||
}
|
||||
|
||||
.burger-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.burger-button.is-active > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.burger-button.is-active>*::before {
|
||||
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
|
||||
}
|
||||
|
||||
.burger-button.is-active>*::after {
|
||||
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
|
||||
}
|
||||
71
sass/components/_button.scss
Executable file
71
sass/components/_button.scss
Executable file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* basic button component
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* preferably use <button> for buttons !
|
||||
* use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
|
||||
*/
|
||||
|
||||
/*
|
||||
* button reset
|
||||
*/
|
||||
|
||||
%btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button {
|
||||
@extend %btn;
|
||||
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// button state variants
|
||||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Buttons styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* preferably use <button> for buttons !*/
|
||||
/* use .btn-- or .button-- classes for variants */
|
||||
|
||||
%btn {
|
||||
display: inline-block;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: $color-base;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button,
|
||||
[type="button"],
|
||||
button {
|
||||
@extend %btn;
|
||||
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend %btn;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken( $background-color, 10% );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// button state variants
|
||||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// nav "burger" button
|
||||
// activate it with a JS toggle-class to .is-active
|
||||
// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
||||
// see doc : https://knacss.com/styleguide.html#buttons
|
||||
.nav-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
& > * {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
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% $burger-weight;
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
height: $burger-weight;
|
||||
background: $burger-color;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > * {
|
||||
background-color: $burger-hover-background;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
& > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
transform: translateY(50%) rotate3d(0,0,1,45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
sass/components/_checkbox.scss
Normal file → Executable file
156
sass/components/_checkbox.scss
Normal file → Executable file
|
|
@ -1,119 +1,59 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Checkbox, radio, switch */
|
||||
/* ----------------------------- */
|
||||
/* use .checkbox class on input type=checkbox */
|
||||
/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
||||
/* use .radio class on input type=radio */
|
||||
/* recommended 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>
|
||||
/*
|
||||
* component checkbox
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <input type="checkbox" class="checkbox" id="c1">
|
||||
* <label for="c1">click here</label>
|
||||
*/
|
||||
|
||||
/*
|
||||
* checkbox variables (you can change them)
|
||||
*/
|
||||
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $color-alpha;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
|
||||
/*
|
||||
* checkbox styles
|
||||
*/
|
||||
|
||||
// common styles
|
||||
.checkbox {
|
||||
border-radius: $checkbox-border-radius;
|
||||
}
|
||||
|
||||
.switch {
|
||||
border-radius: $switch-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.switch,
|
||||
.checkbox,
|
||||
.radio {
|
||||
.checkbox {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& ~ label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
}
|
||||
|
||||
// switch styling
|
||||
.switch {
|
||||
width: $switch-size *2;
|
||||
height: $switch-size;
|
||||
line-height: $switch-size;
|
||||
font-size: 70%;
|
||||
box-shadow: inset -#{$switch-size} 0 0 $switch-background,
|
||||
inset 0 0 0 1px $switch-background;
|
||||
transition: box-shadow .15s;
|
||||
background-color: $switch-color;
|
||||
&::before,
|
||||
&::after {
|
||||
font-weight: bold;
|
||||
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;
|
||||
&::before {
|
||||
content: "✓";
|
||||
float: left;
|
||||
margin-left: $switch-size /3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox styling
|
||||
.checkbox {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-background;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $checkbox-color;
|
||||
transition: background-color .15s;
|
||||
&:checked {
|
||||
$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-background;
|
||||
}
|
||||
transition: background-color 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// radio styling
|
||||
.radio {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
background-size: 0% 0%;
|
||||
transition: background-size .15s;
|
||||
box-shadow: inset 0 0 0 1px $radio-color;
|
||||
background-color: $radio-background;
|
||||
&:checked {
|
||||
$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: $radio-background;
|
||||
}
|
||||
}
|
||||
.checkbox + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.checkbox:disabled + label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
||||
background-size: 60% 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-background;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="email"],
|
||||
[type="month"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="search"],
|
||||
[type="submit"],
|
||||
[type="tel"],
|
||||
[type="text"],
|
||||
[type="time"],
|
||||
[type="url"],
|
||||
[type="week"],
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 1px $forms-color inset;
|
||||
color: $color-base;
|
||||
vertical-align: middle;
|
||||
padding: $spacer-tiny $spacer-small;
|
||||
margin: 0;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="submit"] {
|
||||
background-color: $forms-color;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[readonly] {
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 2rem;
|
||||
border-radius: $border-radius;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
background-position: right .6rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* hiding IE11 arrow */
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
[type="search"] {
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Media object */
|
||||
/* ----------------------------- */
|
||||
/* 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: $tiny) {
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&-content {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
// vertical align image
|
||||
&-figure--center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// reverse variant
|
||||
&--reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
60
sass/components/_quote.scss
Executable file
60
sass/components/_quote.scss
Executable file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* component quote
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <blockquote>
|
||||
* <p>Lorem Elsass Ipsum mitt picon bière</p>
|
||||
* </blockquote>
|
||||
*/
|
||||
|
||||
/*
|
||||
* quotes variables (you can change them)
|
||||
*/
|
||||
|
||||
$blockquote-color: #454d5d;
|
||||
|
||||
/*
|
||||
* quotes styles
|
||||
*/
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: $blockquote-color;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.q {
|
||||
quotes: "“" "”" "‘" "’";
|
||||
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»" "“" "”";
|
||||
}
|
||||
}
|
||||
59
sass/components/_radio.scss
Executable file
59
sass/components/_radio.scss
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* component radio
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <input type="radio" class="radio" name="radio" id="r1">
|
||||
* <label for="r1">Click here</label>
|
||||
*/
|
||||
|
||||
/*
|
||||
* radio variables (you can change them)
|
||||
*/
|
||||
|
||||
$radio-color: $color-alpha;
|
||||
$radio-background: $white;
|
||||
$radio-size: 2rem;
|
||||
$radio-border-radius: 50%;
|
||||
|
||||
/*
|
||||
* radio styles
|
||||
*/
|
||||
|
||||
.radio {
|
||||
border-radius: $radio-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: $radio-size;
|
||||
height: $radio-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $radio-background;
|
||||
transition: background-size 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.radio:disabled + label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.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: 70% 70%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color-alpha;
|
||||
}
|
||||
19
sass/components/_select.scss
Executable file
19
sass/components/_select.scss
Executable file
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* basic select component
|
||||
*/
|
||||
/*
|
||||
HTML template example:
|
||||
<select>
|
||||
<option value="salade">salade</option>
|
||||
<option value="tomate">tomate</option>
|
||||
<option value="oignons">oignons</option>
|
||||
</select>
|
||||
*/
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
background-position: right 0.8rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.2rem;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==skip links */
|
||||
/* ----------------------------- */
|
||||
/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
|
||||
|
||||
/* styling skip links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
& a {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
border: 1px solid $table-border;
|
||||
background: $table-background;
|
||||
|
||||
&--zebra {
|
||||
& tbody tr:nth-child(odd) {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
& caption {
|
||||
caption-side: bottom;
|
||||
padding: $spacer-small;
|
||||
color: $table-caption-color;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
& td,
|
||||
& th {
|
||||
padding: 0.3rem 0.6rem;
|
||||
min-width: $spacer-medium;
|
||||
vertical-align: top;
|
||||
border: 1px $table-border dotted;
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& thead {
|
||||
color: $table-head-color;
|
||||
background: $table-head-background;
|
||||
}
|
||||
}
|
||||
|
||||
.table--auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tabs */
|
||||
/* ----------------------------- */
|
||||
/* see example on https://knacss.com/styleguide.html#tabs */
|
||||
/* NOTE : tabs need JavaScript to be activated */
|
||||
|
||||
.tabs-menu {
|
||||
border-bottom: 2px solid $tabs-border;
|
||||
|
||||
&-link {
|
||||
display: block;
|
||||
margin-bottom: -2px;
|
||||
padding: $spacer-tiny $spacer-medium-plus;
|
||||
border-bottom: 4px solid transparent;
|
||||
color: $tabs-color;
|
||||
background: $tabs-background;
|
||||
text-decoration: none;
|
||||
border-radius: $tabs-border-radius $tabs-border-radius 0 0;
|
||||
transition: .25s;
|
||||
transition-property: color, border, background-color;
|
||||
|
||||
&.is-active {
|
||||
border-bottom-color: $tabs-active-border;
|
||||
color: $tabs-active-color;
|
||||
background: $tabs-active-background;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: $tabs-active-border;
|
||||
color: $tabs-active-color;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $small) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-content-item {
|
||||
padding-top: $spacer-small;
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
@extend .visually-hidden;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tags */
|
||||
/* ----------------------------- */
|
||||
/* use .tag-- classes for variants */
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 3px $spacer-tiny;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
color: $color-base;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tag {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .tag;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tag state variants
|
||||
.tag {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue