GuerillaStudio/vanillalist
GuerillaStudio/vanillalist
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/vanillalist.git synced 2024-10-22 17:37:29 +00:00
Code Issues Activity

Update dependencies

Browse source
This commit is contained in:
Tixie 2022-01-03 14:14:31 +01:00
parent 0772d59c6f
commit b3d4e6f9f8
45 changed files with 3214 additions and 10302 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
.stylelintrc.json Normal file
View file

@ -0,0 +1,28 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-rational-order"
],
"plugins": [
"stylelint-scss"
],
"overrides": [
{
"files": [
"src/sass/**/*.scss"
],
"customSyntax": "postcss-scss",
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"selector-class-pattern": null,
"value-list-max-empty-lines": 1,
"scss/comment-no-loud": true,
"max-line-length": null,
"no-descending-specificity": null,
"number-leading-zero": "never",
"declaration-block-no-redundant-longhand-properties": null
}
}
]
}

12744
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

15
package.json
View file

@ -13,13 +13,12 @@
"build": "npm-run-all build:sass build:eleventy" "build": "npm-run-all build:sass build:eleventy"
}, },
"dependencies": { "dependencies": {
"@11ty/eleventy": "^0.11.1", "@11ty/eleventy": "^0.12.1",
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cssnano": "^4.1.10", "cssnano": "^5.0.14",
"eleventy-plugin-sharp": "0.0.3", "eleventy-plugin-sharp": "0.0.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.2.6",
"postcss-cli": "^8.3.1", "postcss-cli": "^8.3.1",
"sass": "^1.32.7", "sass": "^1.32.7",
"sifter": "^0.0.5" "sifter": "^0.0.5"
@ -31,8 +30,12 @@
"devDependencies": { "devDependencies": {
"glob": "^7.1.6", "glob": "^7.1.6",
"glob-promise": "^4.0.1", "glob-promise": "^4.0.1",
"stylelint": "^13.11.0", "postcss": "^8.4.5",
"stylelint-config-rational-order": "^0.1.2", "postcss-import": "^14.0.2",
"stylelint-order": "^4.1.0" "postcss-scss": "^4.0.2",
"stylelint": "^14.2.0",
"stylelint-config-rational-order": "^0.0.4",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0"
} }
} }

10
src/sass/1-core/_01-reset.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == reset */ // == reset
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
html { html {
box-sizing: border-box; box-sizing: border-box;
@ -35,9 +35,9 @@ img {
border-style: none; border-style: none;
} }
/* fix input no style on Safari */ // fix input no style on Safari
input[type='search'] { input[type="search"] {
appearance: none; appearance: none;
} }

8
src/sass/1-core/_02-typography.scss
View file

@ -1,10 +1,10 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == typography */ // == typography
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
html { html {
font-size: 62.5%; font-size: 62.5%;
/* IE9-11 calculation fix */ // IE9-11 calculation fix
font-size: calc(1em * .625); font-size: calc(1em * .625);
} }

12
src/sass/1-core/_03-helpers.scss
View file

@ -1,11 +1,9 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == helpers */ // == helpers
/* ----------------------------------------------------------- */ // -----------------------------------------------------------// screen readers
// --------------------------------------------------------------
/* screen readers // Hide only visually, but have it available for screen readers (from HTML5 Boilerplate)
-------------------------------------------------------------- */
/* Hide only visually, but have it available for screen readers (from HTML5 Boilerplate) */
.visually-hidden { .visually-hidden {
position: absolute; position: absolute;

12
src/sass/1-core/_04-layout.scss
View file

@ -1,8 +1,8 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == layout */ // == layout
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* BFC to the rescue */ // BFC to the rescue
.mod { .mod {
overflow: hidden; overflow: hidden;
@ -14,14 +14,14 @@
clear: both; clear: both;
} }
/* blocks that must contain floats */ // blocks that must contain floats
.clearfix::after, .clearfix::after,
.line::after, .line::after,
.mod::after { .mod::after {
display: table; display: table;
clear: both; clear: both;
content: ''; content: "";
} }
.inbl { .inbl {

33
src/sass/1-core/_05-flexgrid.scss
View file

@ -3,24 +3,20 @@
.grid { .grid {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
} }
.grid > * { .grid > * {
display: block; /* IE fix */ display: block; // IE fix
flex: 0 0 auto; flex: 0 0 auto;
} }
// equal grid // equal grid
@mixin grid($number:$number, $gutter:$default-gutter, $mb:$gutter) { @mixin grid($number:$number, $gutter:$default-gutter, $mb:$gutter) {
// equal grid no gutter // equal grid no gutter
@if $gutter == 0 { @if $gutter == 0 {
& { & {
margin-bottom: -$mb; margin-bottom: -$mb;
} }
@ -33,7 +29,6 @@
// one column mode // one column mode
@if $number == 1 { @if $number == 1 {
& { & {
margin-bottom: -$mb; margin-bottom: -$mb;
margin-left: 0; margin-left: 0;
@ -48,9 +43,8 @@
// with gutter (avoid percentage since it doesn't work well with margin bottom) // with gutter (avoid percentage since it doesn't work well with margin bottom)
@if $number>1 and $gutter>0 { @if $number>1 and $gutter>0 {
& { & {
margin-bottom: -$mb; /* avoid unwanted margin on last line */ margin-bottom: -$mb; // avoid unwanted margin on last line
margin-left: -$gutter; margin-left: -$gutter;
} }
@ -67,14 +61,15 @@
// no gutter (when gutter = 0) // no gutter (when gutter = 0)
@if $gutter == 0 { @if $gutter == 0 {
& > *:nth-child(odd) { & > *:nth-child(odd) {
$size : ($column1 * 100%) / ($column1 + $column2); $size : ($column1 * 100%) / ($column1 + $column2);
width: calc(#{$size}); width: calc(#{$size});
} }
& > *:nth-child(even) { & > *:nth-child(even) {
$size : ($column2 * 100%) / ($column1 + $column2); $size : ($column2 * 100%) / ($column1 + $column2);
width: calc(#{$size}); width: calc(#{$size});
} }
} }
@ -83,41 +78,43 @@
@else { @else {
$g : $gutter / 2; $g : $gutter / 2;
&> * { & > * {
margin-bottom: $mb; margin-bottom: $mb;
} }
& > *:nth-child(odd) { & > *:nth-child(odd) {
$size : ($column1 * 100%) / ($column1 + $column2); $size : ($column1 * 100%) / ($column1 + $column2);
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
} }
& > *:nth-child(even) { & > *:nth-child(even) {
$size : ($column2 * 100%) / ($column1 + $column2); $size : ($column2 * 100%) / ($column1 + $column2);
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
margin-left: $gutter; margin-left: $gutter;
} }
} }
} }
/* vertical align // vertical align
-------------------------------------------------------------- */ // --------------------------------------------------------------
[class*='grid-top'] { [class*="grid-top"] {
align-items: flex-start; align-items: flex-start;
} }
[class*='grid-bottom'] { [class*="grid-bottom"] {
align-items: flex-end; align-items: flex-end;
} }
[class*='grid-center'] { [class*="grid-center"] {
align-items: center; align-items: center;
} }
/* helpers // helpers
-------------------------------------------------------------- */ // --------------------------------------------------------------
[class*='grid-'].grid-noMargin > * { [class*="grid-"].grid-noMargin > * {
margin-bottom: 0; margin-bottom: 0;
} }

35
src/sass/1-core/_06-rwd.scss
View file

@ -1,8 +1,8 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == rwd */ // == rwd
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */ // responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/
.responsive-iframe { .responsive-iframe {
position: relative; position: relative;
@ -22,68 +22,59 @@
height: 100%; height: 100%;
} }
// utilities
/* utilities // --------------------------------------------------------------
-------------------------------------------------------------- */
.hidden { .hidden {
display: none; display: none;
} }
@media (min-width: ($large + 1)) { @media (min-width: ($large + 1)) {
[class*="-l+"][class*="hidden-"]:not([class*="up"]) {
[class*='-l+'][class*='hidden-']:not([class*='up']) {
display: none !important; display: none !important;
} }
} }
@media (min-width: ($medium + 1)) and (max-width: $large) { @media (min-width: ($medium + 1)) and (max-width: $large) {
[class*="-l"][class*="hidden-"]:not([class*="up"]) {
[class*='-l'][class*='hidden-']:not([class*='up']) {
display: none !important; display: none !important;
} }
} }
@media (min-width: ($small + 1)) and (max-width: $medium) { @media (min-width: ($small + 1)) and (max-width: $medium) {
[class*="-m"][class*="hidden-"]:not([class*="up"]) {
[class*='-m'][class*='hidden-']:not([class*='up']) {
display: none !important; display: none !important;
} }
} }
@media (min-width: ($xsmall + 1)) and (max-width: $small) { @media (min-width: ($xsmall + 1)) and (max-width: $small) {
[class*="-s"][class*="hidden-"]:not([class*="up"]) {
[class*='-s'][class*='hidden-']:not([class*='up']) {
display: none !important; display: none !important;
} }
} }
@media (max-width: $xsmall) { @media (max-width: $xsmall) {
[class*="-xs"][class*="hidden-"]:not([class*="up"]) {
[class*='-xs'][class*='hidden-']:not([class*='up']) {
display: none !important; display: none !important;
} }
} }
@media (min-width: $small) { @media (min-width: $small) {
.hidden-s-up { .hidden-s-up {
display: none !important; display: none !important;
} }
} }
@media (min-width: $xsmall) { @media (min-width: $xsmall) {
.hidden-xs-up { .hidden-xs-up {
display: none !important; display: none !important;
} }
} }
/* xsmall // xsmall
-------------------------------------------------------------- */ // --------------------------------------------------------------
@media (max-width: $xsmall) { @media (max-width: $xsmall) {
.mod { .mod {
display: block !important; display: block !important;
float: none !important; float: none !important;

35
src/sass/1-core/_debug.scss
View file

@ -1,38 +1,29 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == debug */ // == debug
/* ----------------------------------------------------------- */ // -----------------------------------------------------------// * Generates a random color
// *
/*
* Generates a random color
*
*/
@mixin randomColor { @mixin randomColor {
$red: round(random()*222); $red: round(random() *222);
$green: round(random()*222); $green: round(random() *222);
$blue: round(random()*222); $blue: round(random() *222);
} }
// * Easily debug an element
/* // *
* Easily debug an element
*
*/
@mixin debug() { @mixin debug() {
@include randomColor; @include randomColor;
background-color: rgba($red, $green, $blue, 30%); background-color: rgba($red, $green, $blue, 30%);
border: .3rem dotted rgb($red, $green, $blue); border: .3rem dotted rgb($red, $green, $blue);
} }
// * Display grid for vertical rhythm
/* // *
* Display grid for vertical rhythm
*
*/
@mixin debug-rythm($bh: $line-height) { @mixin debug-rythm($bh: $line-height) {
background: linear-gradient(to bottom, #ba9b9a .1em, transparent .1em ) !important; background: linear-gradient(to bottom, #ba9b9a .1em, transparent .1em) !important;
background-size: 100% ($bh + em) !important; background-size: 100% ($bh + em) !important;
} }

14
src/sass/2-helpers/_alignment.scss
View file

@ -1,9 +1,7 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == alignment */ // == alignment
/* ----------------------------------------------------------- */ // -----------------------------------------------------------// block
// --------------------------------------------------------------
/* block
-------------------------------------------------------------- */
.left { .left {
float: left; float: left;
@ -18,8 +16,8 @@
margin-left: auto; margin-left: auto;
} }
/* text/inline // text/inline
-------------------------------------------------------------- */ // --------------------------------------------------------------
.txtright { .txtright {
text-align: right; text-align: right;

6
src/sass/2-helpers/_colors.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == colors */ // == colors
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.color-primary { .color-primary {
color: $color-primary; color: $color-primary;

6
src/sass/2-helpers/_spacing.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == spacings */ // == spacings
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.ma0 { .ma0 {
margin: 0; margin: 0;

6
src/sass/2-helpers/_state.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == state */ // == state
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.is-disabled { .is-disabled {
cursor: not-allowed; cursor: not-allowed;

14
src/sass/2-helpers/_text.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == text */ // == text
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.bold { .bold {
font-weight: bold; font-weight: bold;
@ -10,8 +10,8 @@
font-style: italic; font-style: italic;
} }
/* font size // font size
-------------------------------------------------------------- */ // --------------------------------------------------------------
.txtsmaller { .txtsmaller {
@include flow($base-font - 4); @include flow($base-font - 4);
@ -29,8 +29,8 @@
@include flow($base-font + 4); @include flow($base-font + 4);
} }
/* transformations // transformations
-------------------------------------------------------------- */ // --------------------------------------------------------------
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;

32
src/sass/2-helpers/_width.scss
View file

@ -1,31 +1,31 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == width */ // == width
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.w10 { width: 10%; } .w10 { width: 10%; }
.w20 { width: 20%; } .w20 { width: 20%; }
.w25 { width: 25%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w30 { width: 30%; }
.w33 { width: 33.3333%; } .w33 { width: 33.3333%; }
.w40 { width: 40%; } .w40 { width: 40%; }
.w50 { width: 50%; } .w50 { width: 50%; }
.w60 { width: 60%; } .w60 { width: 60%; }
.w66 { width: 66.6666%; } .w66 { width: 66.6666%; }
.w70 { width: 70%; } .w70 { width: 70%; }
.w75 { width: 75%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w80 { width: 80%; }
.w90 { width: 90%; } .w90 { width: 90%; }
.w100 { width: 100%; } .w100 { width: 100%; }

27
src/sass/3-components/_buttons.scss
View file

@ -1,12 +1,6 @@
/** // -----------------------------------------------------------
* Button Module // == Button module
* namespace : .btn // -----------------------------------------------------------
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$btn-primary: $color-primary; $btn-primary: $color-primary;
$btn-secondary: $color-secondary; $btn-secondary: $color-secondary;
@ -16,11 +10,6 @@ $btn-hover: 5%;
$btn-radius: .3rem; $btn-radius: .3rem;
$btn-shadow: 0 .1rem .2rem #0f0f0f1a; $btn-shadow: 0 .1rem .2rem #0f0f0f1a;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.btn { .btn {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -52,8 +41,8 @@ $btn-shadow: 0 .1rem .2rem #0f0f0f1a;
box-shadow: $focus-ring; box-shadow: $focus-ring;
} }
/* colors // colors
-------------------------------------------------------------- */ // --------------------------------------------------------------
.btn--primary, .btn--primary,
.btn--primary:link, .btn--primary:link,
@ -104,19 +93,17 @@ $btn-shadow: 0 .1rem .2rem #0f0f0f1a;
// background-color: $btn-danger; // background-color: $btn-danger;
// } // }
// .btn--danger:hover, // .btn--danger:hover,
// .btn--danger:active, // .btn--danger:active,
// .btn--danger:focus { // .btn--danger:focus {
// background-color: darken($btn-danger, $btn-hover); // background-color: darken($btn-danger, $btn-hover);
// } // }
/* size // size
-------------------------------------------------------------- */ // --------------------------------------------------------------
.btn--big { .btn--big {
padding: 1.5rem 3rem; padding: 1.5rem 3rem;
font-size: 1.6rem; font-size: 1.6rem;
box-shadow: 0 .2rem .4rem #0f0f0f1a; box-shadow: 0 .2rem .4rem #0f0f0f1a;
} }

57
src/sass/3-components/_forms.scss
View file

@ -1,13 +1,6 @@
/** // -----------------------------------------------------------
* Form Module // == Form Module
* Namespace : .form // -----------------------------------------------------------
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$input-border-radius: .4rem; $input-border-radius: .4rem;
$input-border: .1rem solid lighten($color-dark-text, 27); $input-border: .1rem solid lighten($color-dark-text, 27);
@ -18,22 +11,16 @@ $input-placeholder-color: darken(desaturate($color-primary, 25), 25);
$input-error: #ff3860; $input-error: #ff3860;
$input-required: #ff3860; $input-required: #ff3860;
// placeholders
/* ----------------------------------------------------------- */ // --------------------------------------------------------------
/* == module */
/* ----------------------------------------------------------- */
/* placeholders
-------------------------------------------------------------- */
input::placeholder { input::placeholder {
color: $input-placeholder-color; color: $input-placeholder-color;
font-weight: normal; font-weight: normal;
} }
// block form
/* block form // --------------------------------------------------------------
-------------------------------------------------------------- */
label, label,
.label { .label {
@ -43,8 +30,8 @@ label,
cursor: pointer; cursor: pointer;
} }
/* inline form // inline form
-------------------------------------------------------------- */ // --------------------------------------------------------------
.f-inline label, .f-inline label,
.f-inline .label { .f-inline .label {
@ -65,10 +52,8 @@ label,
vertical-align: middle; vertical-align: middle;
} }
// basics style
/* basics style // --------------------------------------------------------------
-------------------------------------------------------------- */
input, input,
select, select,
@ -123,21 +108,21 @@ input:focus {
box-shadow: $focus-ring; box-shadow: $focus-ring;
} }
input[type='radio'] + label, input[type="radio"] + label,
input[type='checkbox'] + label { input[type="checkbox"] + label {
display: inline-block; display: inline-block;
margin-right: 1rem; margin-right: 1rem;
vertical-align: baseline; vertical-align: baseline;
} }
input[type='radio'], input[type="radio"],
input[type='checkbox'] { input[type="checkbox"] {
width: inherit; width: inherit;
padding: 0; padding: 0;
} }
// /* autogrid // // autogrid
// -------------------------------------------------------------- */ // // --------------------------------------------------------------
// [class^='f-grid'] { // [class^='f-grid'] {
// display: flex; // display: flex;
@ -160,8 +145,8 @@ input[type='checkbox'] {
// max-width: 100%; // max-width: 100%;
// } // }
// /* size // // size
// -------------------------------------------------------------- */ // // --------------------------------------------------------------
// .f-size-1 { // .f-size-1 {
// max-width: 10rem; // max-width: 10rem;
@ -187,8 +172,8 @@ input[type='checkbox'] {
// max-width: 100%; // max-width: 100%;
// } // }
// /* errors // // errors
// -------------------------------------------------------------- */ // // --------------------------------------------------------------
// .f-required { // .f-required {
// color: $input-error; // color: $input-error;

15
src/sass/3-components/_notifications.scss
View file

@ -1,20 +1,11 @@
/** // -----------------------------------------------------------
* Notification module // == Notification module
* Namespace : .notif // -----------------------------------------------------------
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$notif-success: #00d1b2; $notif-success: #00d1b2;
$notif-warning: #ffdd57; $notif-warning: #ffdd57;
$notif-error: #ff3860; $notif-error: #ff3860;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.notif { .notif {
padding: 1em; padding: 1em;
border-radius: 4px; border-radius: 4px;

6
src/sass/3-components/_pagination.scss
View file

@ -1,6 +1,6 @@
/** // -----------------------------------------------------------
* Pagination Module // == Pagination module
*/ // -----------------------------------------------------------
.pagination { .pagination {
margin-bottom: 6rem; margin-bottom: 6rem;

15
src/sass/3-components/_radiobox.scss
View file

@ -1,11 +1,6 @@
/** // -----------------------------------------------------------
* Radiobox Module // == Radiobox Module
* Namespace : .radiobox // -----------------------------------------------------------
*/
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.radiobox { .radiobox {
display: inline-flex; display: inline-flex;
@ -48,14 +43,14 @@
border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0; border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0;
} }
/* Checked state */ // Checked state
.radiobox input:checked + label { .radiobox input:checked + label {
color: #fff; color: #fff;
background-color: $color-primary; background-color: $color-primary;
} }
/* Focus state */ // Focus state
.radiobox input:focus + label { .radiobox input:focus + label {
box-shadow: $focus-ring; box-shadow: $focus-ring;

42
src/sass/3-components/_switch.scss
View file

@ -1,13 +1,8 @@
/** // -----------------------------------------------------------
* Switch Module // == Switch Module
* Namespace: .switch // -----------------------------------------------------------
*/
/* ----------------------------------------------------------- */ .switch[type="checkbox"] {
/* == module */
/* ----------------------------------------------------------- */
.switch[type='checkbox'] {
position: relative; position: relative;
width: 4rem; width: 4rem;
height: 2rem; height: 2rem;
@ -16,33 +11,32 @@
border: $input-border; border: $input-border;
border-radius: 42rem; border-radius: 42rem;
outline: none; outline: none;
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5); box-shadow: inset -2rem 0 0 .1rem rgb(192 192 192 / 50%);
transition: .2s; transition: .2s;
appearance: none; appearance: none;
} }
.switch[type='checkbox']::-ms-check { .switch[type="checkbox"]::-ms-check {
opacity: 0; opacity: 0;
filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; // IE 8
} }
/* Checked state // Checked state
-------------------------------------------------------------- */ // --------------------------------------------------------------
.switch[type='checkbox']:checked { .switch[type="checkbox"]:checked {
border-color: $color-primary; border-color: $color-primary;
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7); box-shadow: inset 2rem 0 0 .1rem transparentize($color-primary, .7);
} }
/* Focus state // Focus state
-------------------------------------------------------------- */ // --------------------------------------------------------------
.switch[type='checkbox']:active, .switch[type="checkbox"]:active,
.switch[type='checkbox']:focus { .switch[type="checkbox"]:focus {
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5), $focus-ring; box-shadow: inset -2rem 0 0 .1rem rgb(192 192 192 / 50%), $focus-ring;
} }
.switch[type='checkbox']:checked:active, .switch[type="checkbox"]:checked:active,
.switch[type='checkbox']:checked:focus { .switch[type="checkbox"]:checked:focus {
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7), $focus-ring; box-shadow: inset 2rem 0 0 .1rem transparentize($color-primary, .7), $focus-ring;
} }

24
src/sass/3-components/_tables.scss
View file

@ -1,32 +1,20 @@
/** // -----------------------------------------------------------
* Table Module // == Table Module
* namespace : .table // -----------------------------------------------------------
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.table { .table {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
table-layout: fixed /* http://css-tricks.com/fixing-tables-long-strings */; table-layout: fixed; // http://css-tricks.com/fixing-tables-long-strings
border: .1rem solid #cbcbcb; border: .1rem solid #cbcbcb;
border-collapse: collapse /* remove spacing between table cells */; border-collapse: collapse; // remove spacing between table cells
border-spacing: 0; border-spacing: 0;
} }
.table caption { .table caption {
padding: 1em 0; padding: 1em 0;
color: #000; color: #000;
font: italic 85%/1 'arial', sans-serif; font: italic 85%/1 arial, sans-serif;
text-align: center; text-align: center;
} }

26
src/sass/3-components/_tooltips.scss
View file

@ -1,30 +1,18 @@
/** // -----------------------------------------------------------
* Tooltip Module // == Tooltip Module
* namespace : .tooltip // -----------------------------------------------------------
*/
$tooltip-bg: rgb(0 0 0 / 80%);
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$tooltip-bg: rgba(0, 0, 0, .80);
$tooltip-color: #fff; $tooltip-color: #fff;
$tooltip-radius: .5em; $tooltip-radius: .5em;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.tooltip { .tooltip {
position: relative; position: relative;
cursor: help; cursor: help;
} }
.tooltip::after { .tooltip::after {
font-family: 'helvetica', 'arial', sans-serif; font-family: helvetica, arial, sans-serif;
} }
.tooltip:hover::after { .tooltip:hover::after {
@ -46,6 +34,6 @@ $tooltip-radius: .5em;
display: block; display: block;
border: solid; border: solid;
border-color: $tooltip-bg transparent; border-color: $tooltip-bg transparent;
border-width: .4em .4em 0 .4em; border-width: .4em .4em 0;
content: ''; content: "";
} }

6
src/sass/4-base/_01-fonts.scss
View file

@ -1,3 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == custom fonts */ // == custom fonts
/* ----------------------------------------------------------- */ // -----------------------------------------------------------

6
src/sass/4-base/_02-icons.scss
View file

@ -1,3 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == icons */ // == icons
/* ----------------------------------------------------------- */ // -----------------------------------------------------------

14
src/sass/4-base/_03-grids.scss
View file

@ -1,13 +1,10 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == grids */ // == grids
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
$grid-gutter: 2rem; $grid-gutter: 2rem;
$grid-mb: 2rem; $grid-mb: 2rem;// *
// * Some grid examples
/**
* Some grid examples
*/
.grid-1 { .grid-1 {
@include grid(1, $grid-gutter, $grid-mb); @include grid(1, $grid-gutter, $grid-mb);
@ -34,7 +31,6 @@ $grid-mb: 2rem;
} }
@media (max-width: $xsmall) { @media (max-width: $xsmall) {
.grid-1-xs { .grid-1-xs {
@include grid(1); @include grid(1);
} }

22
src/sass/4-base/_04-main.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == main */ // == main
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
body { body {
color: $color-dark-text; color: $color-dark-text;
@ -18,8 +18,8 @@ body {
padding-left: 1rem; padding-left: 1rem;
} }
/* titles // titles
-------------------------------------------------------------- */ // --------------------------------------------------------------
h1 { h1 {
@include flow(50); @include flow(50);
@ -37,8 +37,8 @@ h4 {
@include flow(16); @include flow(16);
} }
/* links // links
-------------------------------------------------------------- */ // --------------------------------------------------------------
a, a,
a:visited { a:visited {
@ -55,16 +55,16 @@ a:focus {
box-shadow: $focus-ring; box-shadow: $focus-ring;
} }
/* lists // lists
-------------------------------------------------------------- */ // --------------------------------------------------------------
ul { ul {
padding-left: 2rem; padding-left: 2rem;
list-style-type: disc; list-style-type: disc;
} }
/* divers // divers
-------------------------------------------------------------- */ // --------------------------------------------------------------
hr { hr {
display: block; display: block;

3
src/sass/4-base/_05-layout.scss
View file

@ -0,0 +1,3 @@
// -----------------------------------------------------------
// == Layout
// -----------------------------------------------------------

10
src/sass/4-base/_06-header.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == header */ // == header
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.header { .header {
margin-bottom: 2rem; margin-bottom: 2rem;
@ -39,8 +39,8 @@
font-size: 1.7rem; font-size: 1.7rem;
} }
/* Search // Search
-------------------------------------------------------------- */ // --------------------------------------------------------------
.header__search { .header__search {
margin-top: 6rem; margin-top: 6rem;

9
src/sass/4-base/_07-navigation.scss
View file

@ -1,6 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == navigation */ // == navigation
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.navigation {
}

9
src/sass/4-base/_08-content.scss
View file

@ -1,6 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == content */ // == content
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.content {
}

12
src/sass/4-base/_09-footer.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == footer */ // == footer
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.footer { .footer {
padding-top: 6rem; padding-top: 6rem;
@ -9,8 +9,8 @@
text-align: center; text-align: center;
} }
.footer a[href*='//']::after { .footer a[href*="//"]::after {
font-size: .9em; font-size: .9em;
font-family: system-ui,-apple-system,sans-serif; font-family: system-ui, -apple-system, sans-serif;
content: '↗'; content: "↗";
} }

10
src/sass/5-modules/contribute.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == contribute box */ // == contribute box
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.contribute { .contribute {
text-align: center; text-align: center;
@ -66,14 +66,12 @@
.contribute__box:hover .contribute__content .emoji { .contribute__box:hover .contribute__content .emoji {
display: inline-block; display: inline-block;
animation: 'emoji-shake'; animation: "emoji-shake";
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: both; animation-fill-mode: both;
} }
@keyframes emoji-shake { @keyframes emoji-shake {
from, from,
to { to {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

6
src/sass/5-modules/plugin-list.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == Plugin list */ // == Plugin list
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.pluginList { .pluginList {
display: grid; display: grid;

10
src/sass/5-modules/plugin.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == Plugin card module */ // == Plugin card module
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
.plugin__visual { .plugin__visual {
display: block; display: block;
@ -51,9 +51,9 @@
.plugin__link::after { .plugin__link::after {
padding-left: .3em; padding-left: .3em;
font-size: .9em; font-size: .9em;
font-family: system-ui,-apple-system,sans-serif; font-family: system-ui, -apple-system, sans-serif;
font-style: normal; font-style: normal;
content: '↗'; content: "↗";
} }
.plugin__link:hover, .plugin__link:hover,

9
src/sass/8-rwd/_rwd-large.scss
View file

@ -1,6 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == rwd -> large */ // == rwd -> large
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
@media (max-width: $large) {
}

9
src/sass/8-rwd/_rwd-medium.scss
View file

@ -1,6 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == rwd -> medium */ // == rwd -> medium
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
@media (max-width: $medium) {
}

9
src/sass/8-rwd/_rwd-small.scss
View file

@ -1,6 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == rwd -> small */ // == rwd -> small
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
@media (max-width: $small) {
}

30
src/sass/8-rwd/_rwd-xsmall.scss
View file

@ -1,11 +1,9 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == rwd -> xsmall */ // == rwd -> xsmall
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
@media (max-width: $xsmall) { @media (max-width: $xsmall) { // Header
// --------------------------------------------------------------
/* Header
-------------------------------------------------------------- */
.header { .header {
padding: 3rem 0; padding: 3rem 0;
@ -37,10 +35,8 @@
.header__search .btn { .header__search .btn {
flex-shrink: 0; flex-shrink: 0;
margin-left: .3rem; margin-left: .3rem;
} } // Plugins
// --------------------------------------------------------------
/* Plugins
-------------------------------------------------------------- */
.pluginList { .pluginList {
row-gap: 4rem; row-gap: 4rem;
@ -69,17 +65,13 @@
margin-top: -.5rem; margin-top: -.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
font-size: 1.3em; font-size: 1.3em;
} } // Pagination
// --------------------------------------------------------------
/* Pagination
-------------------------------------------------------------- */
.pagination { .pagination {
margin-bottom: 0; margin-bottom: 0;
} } // Footer
// --------------------------------------------------------------
/* Footer
-------------------------------------------------------------- */
.footer { .footer {
padding-top: 3rem; padding-top: 3rem;

6
src/sass/8-rwd/_rwd.scss
View file

@ -1,3 +1,3 @@
/* ----------------------------------------------------------- */ // -----------------------------------------------------------
/* == rwd */ // == rwd
/* ----------------------------------------------------------- */ // -----------------------------------------------------------

22
src/sass/_colors.scss
View file

@ -10,33 +10,29 @@ $color-secondary: #858585;
$color-tertiary: #f14b59; $color-tertiary: #f14b59;
$color-info: #2185d0; $color-info: #2185d0;
// texts // texts
// -------------------------------------------------------------- // --------------------------------------------------------------
$color-light-text : #fcfcfc; $color-light-text : #fcfcfc;
$color-dark-text : #6f6f6f; $color-dark-text : #6f6f6f;
// links // links
// -------------------------------------------------------------- // --------------------------------------------------------------
$color-link : $color-primary; $color-link : $color-primary;
// shades of grey // shades of grey
// -------------------------------------------------------------- // --------------------------------------------------------------
$color-gray-10 : rgba(0, 0, 0, .1); $color-gray-10 : rgb(0 0 0 / 10%);
$color-gray-20 : rgba(0, 0, 0, .2); $color-gray-20 : rgb(0 0 0 / 20%);
$color-gray-30 : rgba(0, 0, 0, .3); $color-gray-30 : rgb(0 0 0 / 30%);
$color-gray-40 : rgba(0, 0, 0, .4); $color-gray-40 : rgb(0 0 0 / 40%);
$color-gray-50 : rgba(0, 0, 0, .5); $color-gray-50 : rgb(0 0 0 / 50%);
$color-gray-60 : rgba(0, 0, 0, .6); $color-gray-60 : rgb(0 0 0 / 60%);
$color-gray-70 : rgba(0, 0, 0, .7); $color-gray-70 : rgb(0 0 0 / 70%);
$color-gray-80 : rgba(0, 0, 0, .8); $color-gray-80 : rgb(0 0 0 / 80%);
$color-gray-90 : rgba(0, 0, 0, .9); $color-gray-90 : rgb(0 0 0 / 90%);
// brand // brand
// -------------------------------------------------------------- // --------------------------------------------------------------

6
src/sass/_config.scss
View file

@ -8,8 +8,8 @@
$base-font : 15; // px value (without unit), will be converted in em $base-font : 15; // px value (without unit), will be converted in em
$line-height : 1.5; $line-height : 1.5;
$fontstack1 : 'Helvetica Neue', Helvetica, Arial, sans-serif; $fontstack1 : "Helvetica Neue", helvetica, arial, sans-serif;
$fontstack2 : Georgia, Times, 'Times New Roman', serif; $fontstack2 : georgia, times, "Times New Roman", serif;
// responsive // responsive
// -------------------------------------------------------------- // --------------------------------------------------------------
@ -27,4 +27,4 @@ $default-gutter : 2rem;
// Focus ring // Focus ring
// -------------------------------------------------------------- // --------------------------------------------------------------
$focus-ring: 0 0 0 .3rem rgba($color-info, .5); $focus-ring: 0 0 0 .3rem transparentize($color-info, .5);

47
src/sass/style.scss
View file

@ -2,17 +2,17 @@
// == config */ // == config */
// -------------------------------------------------------------- // --------------------------------------------------------------
@import '_colors'; @import "_colors";
@import '_config'; @import "_config";
// -------------------------------------------------------------- // --------------------------------------------------------------
// == core */ // == core */
// -------------------------------------------------------------- // --------------------------------------------------------------
@import '1-core/_00-mixins'; @import "1-core/_00-mixins";
@import '1-core/_01-reset'; @import "1-core/_01-reset";
@import '1-core/_02-typography'; @import "1-core/_02-typography";
@import '1-core/_03-helpers'; @import "1-core/_03-helpers";
// @import '1-core/_04-layout'; // @import '1-core/_04-layout';
// @import '1-core/_05-flexgrid'; // @import '1-core/_05-flexgrid';
@import "1-core/_06-rwd"; @import "1-core/_06-rwd";
@ -22,26 +22,25 @@
// == helpers */ // == helpers */
// -------------------------------------------------------------- // --------------------------------------------------------------
@import '2-helpers/_alignment'; @import "2-helpers/_alignment";
// @import '2-helpers/_colors'; // @import '2-helpers/_colors';
@import '2-helpers/_spacing'; @import "2-helpers/_spacing";
@import '2-helpers/_text'; @import "2-helpers/_text";
@import '2-helpers/_width'; @import "2-helpers/_width";
// -------------------------------------------------------------- // --------------------------------------------------------------
// == components */ // == components */
// -------------------------------------------------------------- // --------------------------------------------------------------
@import '3-components/_forms'; @import "3-components/_forms";
// @import '3-components/_switch'; // @import '3-components/_switch';
// @import '3-components/_radiobox'; // @import '3-components/_radiobox';
@import '3-components/_buttons'; @import "3-components/_buttons";
@import '3-components/_pagination'; @import "3-components/_pagination";
// @import '3-components/_tables'; // @import '3-components/_tables';
// @import '3-components/_tooltips'; // @import '3-components/_tooltips';
// @import '3-components/_notifications'; // @import '3-components/_notifications';
// -------------------------------------------------------------- // --------------------------------------------------------------
// == base */ // == base */
// -------------------------------------------------------------- // --------------------------------------------------------------
@ -49,22 +48,20 @@
// @import '4-base/_01-fonts'; // @import '4-base/_01-fonts';
// @import '4-base/_02-icons'; // @import '4-base/_02-icons';
// @import '4-base/_03-grids'; // @import '4-base/_03-grids';
@import '4-base/_04-main'; @import "4-base/_04-main";
@import '4-base/_05-layout'; @import "4-base/_05-layout";
@import '4-base/_06-header'; @import "4-base/_06-header";
// @import '4-base/_07-navigation'; // @import '4-base/_07-navigation';
// @import '4-base/_08-content'; // @import '4-base/_08-content';
@import '4-base/_09-footer'; @import "4-base/_09-footer";
// -------------------------------------------------------------- // --------------------------------------------------------------
// == modules */ // == modules */
// -------------------------------------------------------------- // --------------------------------------------------------------
@import '5-modules/plugin-list'; @import "5-modules/plugin-list";
@import '5-modules/plugin'; @import "5-modules/plugin";
@import '5-modules/contribute'; @import "5-modules/contribute";
// -------------------------------------------------------------- // --------------------------------------------------------------
// == pages */ // == pages */
@ -72,7 +69,6 @@
// @import '6-pages/...'; // @import '6-pages/...';
// -------------------------------------------------------------- // --------------------------------------------------------------
// == vendors */ // == vendors */
// -------------------------------------------------------------- // --------------------------------------------------------------
@ -82,7 +78,6 @@
// @import '7-vendors/o-vendor.scss'; // @import '7-vendors/o-vendor.scss';
// -------------------------------------------------------------- // --------------------------------------------------------------
// == rwd */ // == rwd */
// -------------------------------------------------------------- // --------------------------------------------------------------
@ -90,5 +85,5 @@
// @import '8-rwd/_rwd-large'; // @import '8-rwd/_rwd-large';
// @import '8-rwd/_rwd-medium'; // @import '8-rwd/_rwd-medium';
// @import '8-rwd/_rwd-small'; // @import '8-rwd/_rwd-small';
@import '8-rwd/_rwd-xsmall'; @import "8-rwd/_rwd-xsmall";
// @import '8-rwd/_rwd'; // @import '8-rwd/_rwd';

39
stylelint.config.js
View file

@ -1,39 +0,0 @@
/* eslint-disable */
module.exports = {
"extends": [
"stylelint-config-rational-order"
],
"rules": {
"indentation": 2,
"string-quotes": "single",
"no-duplicate-selectors": true,
"color-hex-case": "lower",
"color-hex-length": "short",
"color-named": "never",
"selector-combinator-space-after": "always",
"selector-attribute-quotes": "always",
"selector-attribute-operator-space-before": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-brackets-space-inside": "never",
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"property-no-vendor-prefix": true,
"value-no-vendor-prefix": true,
"number-leading-zero": "never",
"function-url-quotes": "never",
"font-family-name-quotes": "always-unless-keyword",
"comment-whitespace-inside": "always",
"at-rule-no-vendor-prefix": true,
"rule-empty-line-before": "always",
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-class-parentheses-space-inside": "never",
"media-feature-range-operator-space-before": "always",
"media-feature-range-operator-space-after": "always",
"media-feature-parentheses-space-inside": "never",
"media-feature-name-no-vendor-prefix": true,
"media-feature-colon-space-before": "never",
"media-feature-colon-space-after": "always",
"no-extra-semicolons": true
}
}