style(scss): configure prettier et complète les règles

pull/141/head
Jérôme Lebleu 2021-02-25 10:50:50 +01:00
Parent 5e5283eb8b
révision ff7c333401
19 fichiers modifiés avec 134 ajouts et 132 suppressions

5
.prettierrc Normal file
Voir le fichier

@ -0,0 +1,5 @@
{
"arrowParens": "always",
"quoteProps": "consistent",
"singleQuote": true
}

Voir le fichier

@ -1,12 +1,11 @@
{
"extends": [
"stylelint-config-twbs-bootstrap/scss"
"stylelint-config-twbs-bootstrap/scss",
"stylelint-prettier/recommended"
],
"rules": {
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-newline-before": "never-multi-line",
"value-list-comma-space-after": "always-single-line",
"scss/at-function-named-arguments": null,
"scss/dollar-variable-default": null
"scss/at-mixin-argumentless-call-parentheses": "never",
"scss/at-rule-conditional-no-parentheses": true
}
}

Voir le fichier

@ -10,19 +10,16 @@
//
// @param {Keyword} $size [full] - La taille de la cellule
// @param {Boolean} $vertical [false] - Si la cellule est disposée verticalement.
@mixin grid-cell($size: full) {
@if ($size == "full") {
@mixin grid-cell($size: 'full') {
@if $size == 'full' {
flex: 0 0 auto;
min-width: 0px; // stylelint-disable-line length-zero-no-unit
min-height: 0px; // stylelint-disable-line length-zero-no-unit
}
@else if ($size == "auto") {
} @else if $size == 'auto' {
flex: 1 1 0px; // stylelint-disable-line length-zero-no-unit
}
@else if ($size == "shrink") {
} @else if $size == 'shrink' {
flex: 0 0 auto;
}
@else if ($size == "grow") {
} @else if $size == 'grow' {
flex: 1 0 auto;
}
}
@ -31,10 +28,7 @@
//
// @param {Boolean} $vertical [false] - Si les cellules sont disposées verticalement.
// @param {Boolean} $wrap [true] - Si les cellules peuvent être sur plusieurs lignes.
@mixin grid(
$vertical: false,
$wrap: true
) {
@mixin grid($vertical: false, $wrap: true) {
$direction: if($vertical, column, row);
$wrap: if($wrap, wrap, nowrap);

Voir le fichier

@ -2,8 +2,8 @@
// Variables de l'application et de Bootstrap
// -----------------------------------------------------------------------------
$font-path: "../fonts";
$img-path: "../img";
$font-path: '../fonts';
$img-path: '../img';
//
// Bootstrap
@ -73,15 +73,15 @@ $link-hover-decoration: none;
// Components
$border-color: rgba($black, .15);
$border-color: rgba($black, 0.15);
$border-radius: .2rem;
$border-radius-lg: .25rem;
$border-radius-sm: .15rem;
$border-radius: 0.2rem;
$border-radius-lg: 0.25rem;
$border-radius-sm: 0.15rem;
$box-shadow: 0 .25rem .75rem rgba($black, .15);
$box-shadow-sm: 0 .1rem .2rem rgba($black, .075);
$box-shadow-lg: 0 .5rem 1rem rgba($black, .175);
$box-shadow: 0 0.25rem 0.75rem rgba($black, 0.15);
$box-shadow-sm: 0 0.1rem 0.2rem rgba($black, 0.075);
$box-shadow-lg: 0 0.5rem 1rem rgba($black, 0.175);
$component-active-color: $white;
$component-active-bg: $primary;
@ -97,17 +97,17 @@ $font-weight-bold: 700;
$headings-font-weight: $font-weight-medium;
$small-font-size: .8125em;
$small-font-size: 0.8125em;
$hr-color: rgba($black, .1);
$hr-color: rgba($black, 0.1);
$hr-opacity: 1;
// Tables
$table-cell-padding-y: .75rem;
$table-cell-padding-x: .75rem;
$table-cell-padding-x-sm: .3rem;
$table-cell-padding-y-sm: .3rem;
$table-cell-padding-y: 0.75rem;
$table-cell-padding-x: 0.75rem;
$table-cell-padding-x-sm: 0.3rem;
$table-cell-padding-y-sm: 0.3rem;
$table-bg: $white;
@ -122,12 +122,12 @@ $table-bg-scale: -60%;
$input-btn-focus-width: 0;
$input-btn-focus-box-shadow: none;
$input-btn-padding-y-sm: .2rem;
$input-btn-padding-x-sm: .4rem;
$input-btn-padding-y-sm: 0.2rem;
$input-btn-padding-x-sm: 0.4rem;
// Buttons
$btn-disabled-opacity: .5;
$btn-disabled-opacity: 0.5;
$btn-active-box-shadow: none;
// Forms
@ -138,7 +138,7 @@ $input-color: $gray-800;
$input-focus-color: $gray-900;
$input-placeholder-color: $gray-400;
$input-transition: color .1s ease-in-out, border-color .1s ease-in-out;
$input-transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;
$form-check-input-width: 1.125em;
@ -146,7 +146,7 @@ $form-check-input-bg: $input-bg;
// Navbar
$navbar-dark-color: rgba($white, .75);
$navbar-dark-color: rgba($white, 0.75);
$navbar-dark-hover-color: $white;
$navbar-dark-active-color: $white;
@ -157,13 +157,13 @@ $pagination-border-color: $border-color;
// Cards
$card-border-color: $border-color;
$card-cap-padding-y: $spacer * .75;
$card-cap-padding-y: $spacer * 0.75;
// Badges
$badge-font-weight: $font-weight-medium;
$badge-padding-y: .25em;
$badge-padding-x: .5em;
$badge-padding-y: 0.25em;
$badge-padding-x: 0.5em;
// Modals
@ -192,5 +192,5 @@ $breadcrumb-margin-bottom: 0;
// Close
$btn-close-width: .75em;
$btn-close-padding-x: .5em;
$btn-close-width: 0.75em;
$btn-close-padding-x: 0.5em;

Voir le fichier

@ -1,31 +1,31 @@
@charset "utf-8";
// Variables et utilitaires
@import "abstracts/variables";
@import "abstracts/mixins";
@import 'abstracts/variables';
@import 'abstracts/mixins';
// Librairies
@import "vendor/fork-awesome";
@import "vendor/bootstrap";
@import 'vendor/fork-awesome';
@import 'vendor/bootstrap';
// Styles de base
@import "base/fonts";
@import "base/typography";
@import "base/utilities";
@import 'base/fonts';
@import 'base/typography';
@import 'base/utilities';
// Agencement des sections
@import "layout/base";
@import "layout/header";
@import "layout/content";
@import "layout/footer";
@import 'layout/base';
@import 'layout/header';
@import 'layout/content';
@import 'layout/footer';
// Composants
@import "components/alert";
@import "components/card";
@import "components/forms";
@import "components/list-group";
@import "components/modal";
@import "components/tables";
@import 'components/alert';
@import 'components/card';
@import 'components/forms';
@import 'components/list-group';
@import 'components/modal';
@import 'components/tables';
// Pages spécifiques
@import "pages/login";
@import 'pages/login';

Voir le fichier

@ -5,58 +5,54 @@
/// Montserrat
/// OFL - Julieta Ulanovsky
$montserrat-font-path: "~fonts/montserrat";
$montserrat-font-path: '~fonts/montserrat';
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: $font-weight-normal;
src:
url("#{$montserrat-font-path}/montserrat-regular.woff2") format("woff2"),
url("#{$montserrat-font-path}/montserrat-regular.woff") format("woff");
src: url('#{$montserrat-font-path}/montserrat-regular.woff2') format('woff2'),
url('#{$montserrat-font-path}/montserrat-regular.woff') format('woff');
}
@font-face {
font-family: Montserrat;
font-style: italic;
font-weight: $font-weight-normal;
src:
url("#{$montserrat-font-path}/montserrat-italic.woff2") format("woff2"),
url("#{$montserrat-font-path}/montserrat-italic.woff") format("woff");
src: url('#{$montserrat-font-path}/montserrat-italic.woff2') format('woff2'),
url('#{$montserrat-font-path}/montserrat-italic.woff') format('woff');
}
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: $font-weight-medium;
src:
url("#{$montserrat-font-path}/montserrat-medium.woff2") format("woff2"),
url("#{$montserrat-font-path}/montserrat-medium.woff") format("woff");
src: url('#{$montserrat-font-path}/montserrat-medium.woff2') format('woff2'),
url('#{$montserrat-font-path}/montserrat-medium.woff') format('woff');
}
@font-face {
font-family: Montserrat;
font-style: italic;
font-weight: $font-weight-medium;
src:
url("#{$montserrat-font-path}/montserrat-mediumitalic.woff2") format("woff2"),
url("#{$montserrat-font-path}/montserrat-mediumitalic.woff") format("woff");
src: url('#{$montserrat-font-path}/montserrat-mediumitalic.woff2')
format('woff2'),
url('#{$montserrat-font-path}/montserrat-mediumitalic.woff') format('woff');
}
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: $font-weight-bold;
src:
url("#{$montserrat-font-path}/montserrat-bold.woff2") format("woff2"),
url("#{$montserrat-font-path}/montserrat-bold.woff") format("woff");
src: url('#{$montserrat-font-path}/montserrat-bold.woff2') format('woff2'),
url('#{$montserrat-font-path}/montserrat-bold.woff') format('woff');
}
@font-face {
font-family: Montserrat;
font-style: italic;
font-weight: $font-weight-bold;
src:
url("#{$montserrat-font-path}/montserrat-bolditalic.woff2") format("woff2"),
url("#{$montserrat-font-path}/montserrat-bolditalic.woff") format("woff");
src: url('#{$montserrat-font-path}/montserrat-bolditalic.woff2')
format('woff2'),
url('#{$montserrat-font-path}/montserrat-bolditalic.woff') format('woff');
}

Voir le fichier

@ -1,15 +1,15 @@
@charset "utf-8";
// Variables et utilitaires
@import "abstracts/variables";
@import 'abstracts/variables';
// Librairies
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Composants
@import "components/calendar";
@import 'components/calendar';
// Pages spécifiques
@import "pages/calendar";
@import 'pages/calendar';

Voir le fichier

@ -14,7 +14,7 @@
.alert {
box-shadow: $box-shadow-sm;
backdrop-filter: blur(10px);
opacity: .9;
opacity: 0.9;
transition: $transition-fade;
&:last-child {

Voir le fichier

@ -13,8 +13,8 @@ $event-ref-stripe-color: scale-color($event-ref-bg, $lightness: -20%);
--fc-event-bg-color: #{$event-bg};
--fc-event-border-color: #{$event-bg};
--fc-event-text-color: #{$white};
--fc-non-business-color: #{rgba($gray-200, .3)};
--fc-today-bg-color: #{rgba($yellow, .15)};
--fc-non-business-color: #{rgba($gray-200, 0.3)};
--fc-today-bg-color: #{rgba($yellow, 0.15)};
--fc-now-indicator-color: #{$red};
font-size: 14px;
@ -77,14 +77,13 @@ $event-ref-stripe-color: scale-color($event-ref-bg, $lightness: -20%);
--fc-event-border-color: #{$event-ref-bg};
&.fc-v-event {
background:
repeating-linear-gradient(
45deg,
$event-ref-bg,
$event-ref-bg 8px,
$event-ref-stripe-color 8px,
$event-ref-stripe-color 10px
);
background: repeating-linear-gradient(
45deg,
$event-ref-bg,
$event-ref-bg 8px,
$event-ref-stripe-color 8px,
$event-ref-stripe-color 10px
);
}
}

Voir le fichier

@ -37,7 +37,7 @@
display: block;
width: 100%;
margin-bottom: $spacer;
content: "";
content: '';
border-top: 2px solid $hr-color;
}

Voir le fichier

@ -22,9 +22,9 @@ $table-th-bg: $card-cap-bg;
}
&::before {
@include fa-icon();
margin-right: .4rem;
color: rgba($black, .3);
@include fa-icon;
margin-right: 0.4rem;
color: rgba($black, 0.3);
}
}
@ -42,7 +42,7 @@ $table-th-bg: $card-cap-bg;
--bs-table-bg: $table-th-bg;
width: 1px;
padding: 0 .25rem;
padding: 0 0.25rem;
white-space: nowrap;
border-left-width: 1px;
@ -54,7 +54,7 @@ $table-th-bg: $card-cap-bg;
height: 28px;
&:not(:first-child) {
margin-left: .25rem;
margin-left: 0.25rem;
}
}
}

Voir le fichier

@ -26,12 +26,12 @@
.content-header {
@include grid-cell(shrink);
padding: .5rem 0;
padding: 0.5rem 0;
background-color: $primary-light;
border-bottom: 1px solid rgba($primary-dark, .1);
border-bottom: 1px solid rgba($primary-dark, 0.1);
.content-breadcrumb + & {
border-top: 1px solid rgba($primary-dark, .1);
border-top: 1px solid rgba($primary-dark, 0.1);
}
}
@ -47,8 +47,8 @@
}
.title-buttons {
padding-top: .5rem;
margin: .25rem 0 0;
padding-top: 0.5rem;
margin: 0.25rem 0 0;
border-top: 1px solid $hr-color;
@include media-breakpoint-up(sm) {
@ -59,7 +59,12 @@
@include media-breakpoint-down(md) {
.btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
@include button-size(
$btn-padding-y-sm,
$btn-padding-x-sm,
$btn-font-size-sm,
$btn-border-radius-sm
);
}
}
}

Voir le fichier

@ -3,12 +3,12 @@
// -----------------------------------------------------------------------------
.app-footer {
padding: .5rem 0;
padding: 0.5rem 0;
border-top: 1px solid $hr-color;
}
.footer-meta {
padding: 0 .5rem;
padding: 0 0.5rem;
margin-bottom: 0;
font-size: 80%;
color: $dark;
@ -18,6 +18,6 @@
font-size: 90%;
.nav-link {
padding: 0 .5rem;
padding: 0 0.5rem;
}
}

Voir le fichier

@ -27,7 +27,7 @@
left: 0;
z-index: $zindex-fixed;
background-color: $dark;
border-top: 1px solid rgba($black, .1);
border-top: 1px solid rgba($black, 0.1);
box-shadow: $box-shadow-sm;
.navbar-nav .nav-link {

Voir le fichier

@ -29,10 +29,10 @@
justify-content: center;
font-size: 14px;
color: $dark;
content: "Chargement en cours…";
background-color: rgba($body-bg, .5);
content: 'Chargement en cours…';
background-color: rgba($body-bg, 0.5);
opacity: 0;
transition: all .1s ease-out;
transition: all 0.1s ease-out;
}
&.loading {

Voir le fichier

@ -34,7 +34,7 @@
}
.login-logo {
padding: 0 .5rem;
padding: 0 0.5rem;
margin-bottom: 1rem;
text-align: center;

Voir le fichier

@ -5,7 +5,7 @@
/// Import all Bootstrap components
@import "~bootstrap/scss/bootstrap";
@import '~bootstrap/scss/bootstrap';
/// ... or import them individually

Voir le fichier

@ -3,25 +3,26 @@
// ----------------------------------------------------------------------------
// see: https://forkaweso.me/
$fa-font-path: "~fork-awesome/fonts";
$fa-font-path: '~fork-awesome/fonts';
@import "~fork-awesome/scss/variables";
@import "~fork-awesome/scss/mixins";
@import "~fork-awesome/scss/functions";
@import "~fork-awesome/scss/core";
@import "~fork-awesome/scss/larger";
@import "~fork-awesome/scss/fixed-width";
@import "~fork-awesome/scss/list";
@import '~fork-awesome/scss/variables';
@import '~fork-awesome/scss/mixins';
@import '~fork-awesome/scss/functions';
@import '~fork-awesome/scss/core';
@import '~fork-awesome/scss/larger';
@import '~fork-awesome/scss/fixed-width';
@import '~fork-awesome/scss/list';
//@import "~fork-awesome/scss/bordered-pulled";
//@import "~fork-awesome/scss/animated";
//@import "~fork-awesome/scss/rotated-flipped";
@import "~fork-awesome/scss/stacked";
@import "~fork-awesome/scss/icons";
@import "~fork-awesome/scss/screen-reader";
@import '~fork-awesome/scss/stacked';
@import '~fork-awesome/scss/icons';
@import '~fork-awesome/scss/screen-reader';
@font-face {
font-family: "#{$fa-font-family}";
src:
url("#{$fa-font-path}/forkawesome-webfont.woff?v=#{$fa-version}") format("woff"),
url("#{$fa-font-path}/forkawesome-webfont.woff2?v=#{$fa-version}") format("woff2");
font-family: '#{$fa-font-family}';
src: url('#{$fa-font-path}/forkawesome-webfont.woff?v=#{$fa-version}')
format('woff'),
url('#{$fa-font-path}/forkawesome-webfont.woff2?v=#{$fa-version}')
format('woff2');
}

Voir le fichier

@ -40,9 +40,12 @@
"npm-run-all": "^4.1.5",
"postcss": "^8.2.6",
"postcss-loader": "^5.0.0",
"prettier": "^2.2.1",
"sass-loader": "^11.0.1",
"stylelint": "^13.11.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-twbs-bootstrap": "^2.1.0",
"stylelint-prettier": "^1.1.2",
"terser-webpack-plugin": "^5.1.1",
"webpack": "^5.24.0",
"webpack-cli": "^4.5.0",