Stylelint
This commit is contained in:
Jérémy Munsch
parent
b5663d19ce
commit
86aa480c04
15 changed files with 2165 additions and 752 deletions
20
.stylelintrc.json
Normal file
20
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"extends": "stylelint-config-sass-guidelines",
|
||||
"ignoreFiles": [
|
||||
"**/vendor/*.css",
|
||||
"**/vendor/**/*.css",
|
||||
"**/vendor/*.scss",
|
||||
"**/vendor/**/*.scss",
|
||||
"**/vendor/*.sass",
|
||||
"**/vendor/**/*.sass",
|
||||
"**/vendor/*.less",
|
||||
"**/vendor/**/*.less"
|
||||
],
|
||||
"customSyntax": "postcss-scss",
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"string-quotes": "double",
|
||||
"selector-max-id": null,
|
||||
"color-no-invalid-hex": true
|
||||
}
|
||||
}
|
||||
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
|
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"workbench.colorCustomizations": {
|
||||
"activityBar.activeBackground": "#3371a9",
|
||||
"activityBar.activeBorder": "#621e41",
|
||||
"activityBar.activeBackground": "#3371a9",
|
||||
"activityBar.background": "#3371a9",
|
||||
"activityBar.foreground": "#e7e7e7",
|
||||
"activityBar.inactiveForeground": "#e7e7e799",
|
||||
"activityBarBadge.background": "#621e41",
|
||||
"activityBarBadge.foreground": "#e7e7e7",
|
||||
"commandCenter.border": "#e7e7e799",
|
||||
"sash.hoverBorder": "#3371a9",
|
||||
"statusBar.background": "#275782",
|
||||
"statusBar.foreground": "#e7e7e7",
|
||||
|
|
@ -16,8 +17,7 @@
|
|||
"titleBar.activeBackground": "#275782",
|
||||
"titleBar.activeForeground": "#e7e7e7",
|
||||
"titleBar.inactiveBackground": "#27578299",
|
||||
"titleBar.inactiveForeground": "#e7e7e799",
|
||||
"commandCenter.border": "#e7e7e799"
|
||||
"titleBar.inactiveForeground": "#e7e7e799"
|
||||
},
|
||||
"peacock.remoteColor": "#275782",
|
||||
}
|
||||
|
|
|
|||
1383
package-lock.json
generated
1383
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,7 +10,9 @@
|
|||
"production": "npm run clear-manifest && mix --production",
|
||||
"prod": "npm run production",
|
||||
"eslint": "node ./node_modules/.bin/eslint -c .eslintrc.json ./resources",
|
||||
"eslint-ci": "node ./node_modules/.bin/eslint -c .eslintrc.json ./resources -f junit"
|
||||
"eslint-ci": "node ./node_modules/.bin/eslint -c .eslintrc.json ./resources -f junit",
|
||||
"stylelint": "npx stylelint '**/*.scss'",
|
||||
"stylelint-ci": "npx stylelint '**/*.scss' -f json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.2",
|
||||
|
|
@ -25,6 +27,7 @@
|
|||
"@types/webpack-env": "^1.17.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.35.1",
|
||||
"@typescript-eslint/parser": "^5.35.1",
|
||||
"@vue/eslint-config-typescript": "^11.0.0",
|
||||
"axios": "^0.21.1",
|
||||
"bootstrap": "^5.1.3",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
|
|
@ -39,12 +42,16 @@
|
|||
"laravel-mix-clean": "^0.1.0",
|
||||
"laravel-mix-eslint": "^0.2.0",
|
||||
"laravel-mix-polyfill": "^3.0.1",
|
||||
"laravel-mix-stylelint": "^1.0.0",
|
||||
"lodash": "^4.17.19",
|
||||
"moment": "^2.29.3",
|
||||
"prettier": "^2.7.1",
|
||||
"resolve-url-loader": "^5.0.0",
|
||||
"sass": "^1.52.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"stylelint": "^14.11.0",
|
||||
"stylelint-config-sass-guidelines": "^9.0.1",
|
||||
"stylelint-webpack-plugin": "^3.3.0",
|
||||
"sweetalert2": "^11.4.16",
|
||||
"toastify-js": "^1.11.2",
|
||||
"ts-loader": "^9.3.0",
|
||||
|
|
|
|||
324
resources/sass/_bootswatch.scss
vendored
324
resources/sass/_bootswatch.scss
vendored
|
|
@ -1,324 +0,0 @@
|
|||
// Lumen 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
@import "variables";
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin shadow($width: 4px) {
|
||||
border-style: solid;
|
||||
border-width: 0 1px $width 1px;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
@include shadow();
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@include shadow();
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(.disabled):hover {
|
||||
margin-top: 1px;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
&:not(.disabled):active {
|
||||
margin-top: 2px;
|
||||
border-bottom-width: 2px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
&,
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):active,
|
||||
&:focus {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="btn-outline"] {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.btn-group-vertical {
|
||||
.btn + .btn {
|
||||
&:hover {
|
||||
margin-top: -1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
margin-top: -1px;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-control {
|
||||
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav {
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
|
||||
&,
|
||||
&.disabled,
|
||||
&.disabled:hover,
|
||||
&.disabled:focus {
|
||||
margin-top: 6px;
|
||||
border-color: $nav-tabs-border-color;
|
||||
transition: padding-bottom 0.2s ease-in-out,
|
||||
margin-top 0.2s ease-in-out, border-bottom 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):focus,
|
||||
&.active {
|
||||
padding-bottom: add(0.5rem, 6px);
|
||||
border-bottom-color: transparent;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-justified > li {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
@include shadow();
|
||||
border-top-width: 1px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border-color: shade-color($breadcrumb-bg, 10%);
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
.pagination {
|
||||
> li > a,
|
||||
> li > span {
|
||||
position: relative;
|
||||
top: 0;
|
||||
@include shadow();
|
||||
color: $pagination-color;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: 1px;
|
||||
border-bottom-width: 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&:hover {
|
||||
top: 0;
|
||||
@include shadow();
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 0;
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
> li > a,
|
||||
> li > span,
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
border-left-width: 2px;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.btn-close {
|
||||
text-decoration: none;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: $white;
|
||||
@include shadow();
|
||||
|
||||
&-primary {
|
||||
background-color: $primary;
|
||||
border-color: shade-color($primary, 10%);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background-color: $secondary;
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: $success;
|
||||
border-color: shade-color($success, 10%);
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
border-color: shade-color($info, 10%);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: $danger;
|
||||
border-color: shade-color($danger, 10%);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
border-color: shade-color($warning, 10%);
|
||||
}
|
||||
|
||||
&-dark {
|
||||
background-color: $dark;
|
||||
border-color: shade-color($dark, 10%);
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $light;
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
a.list-group-item {
|
||||
&-success {
|
||||
&.active {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($success, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&.active {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($warning, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
&.active {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($danger, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal{
|
||||
color: #1e2125;
|
||||
& .toast {
|
||||
.btn-close {
|
||||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
||||
}
|
||||
}
|
||||
}
|
||||
244
resources/sass/_complement.scss
vendored
244
resources/sass/_complement.scss
vendored
|
|
@ -1,244 +0,0 @@
|
|||
// @function strip-unit($value)
|
||||
// @param {number with unit} $value
|
||||
@function strip-unit($value) {
|
||||
@return ($value / ($value * 0 + 1));
|
||||
}
|
||||
|
||||
// @function pow($base, $exponents)
|
||||
// Helper: Raise a number the power of another number
|
||||
// Adapted from: https://gist.github.com/hail2u/1964056
|
||||
//
|
||||
// @param {number} $base — The base number
|
||||
// @param {number} $exponents — The exponent to which to raise $base
|
||||
@function pow($base, $exponents) {
|
||||
$raised: 1;
|
||||
@for $i from 1 through $exponents {
|
||||
$raised: $raised * $base;
|
||||
}
|
||||
@return $raised;
|
||||
}
|
||||
|
||||
// @function luminance($color)
|
||||
// Helper: Calculate Luminance of a single color
|
||||
// Adapted from: https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
|
||||
// White luminance is 1, Black luminance is 0
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { luminance: luminance(#c00); }
|
||||
// Output:
|
||||
// .sample { luminance: 0.1283736922; }
|
||||
//
|
||||
@function luminance($color) {
|
||||
// Thanks voxpelli for a very concise implementation of luminance measure in sass
|
||||
// Adapted from: https://gist.github.com/voxpelli/6304812
|
||||
$rgba: red($color), green($color), blue($color);
|
||||
$rgba2: ();
|
||||
@for $i from 1 through 3 {
|
||||
$rgb: nth($rgba, $i);
|
||||
$rgb: calc($rgb / 255);
|
||||
$rgb: if($rgb < .03928, calc($rgb / 12.92), pow(calc(($rgb + .055) / 1.055), 2));
|
||||
$rgba2: append($rgba2, $rgb);
|
||||
}
|
||||
@return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3))*100;
|
||||
}
|
||||
|
||||
// @function contrast-ratio($fg, $bg)
|
||||
// Helper: Calculate "readability" as defined by WCAG 2.1
|
||||
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
|
||||
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { color-contrast: contrast-ratio(#c00, #fff); }
|
||||
// Output:
|
||||
// .sample { color-contrast: 5.89; }
|
||||
//
|
||||
@function contrast-ratio($fg, $bg) {
|
||||
$luminance1: luminance($fg) + 0.05;
|
||||
$luminance2: luminance($bg) + 0.05;
|
||||
$ratio: calc($luminance1 / $luminance2);
|
||||
@if $luminance2 > $luminance1 {
|
||||
$ratio: calc(1 / $ratio);
|
||||
}
|
||||
// Round to a hundreth because 6.96 should not pass a ratio of 7.0
|
||||
$ratio: calc(round($ratio * 100) / 100);
|
||||
@return $ratio;
|
||||
}
|
||||
|
||||
// @function validate-font-size($size)
|
||||
// Helper: Depending on the unit recalculate a font size value into pixels if possible
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { validate-font-size: validate-font-size(1em); }
|
||||
// Output:
|
||||
// .sample { validate-font-size: 16; }
|
||||
//
|
||||
@function validate-font-size($size) {
|
||||
@if unit($size) == 'em' or unit($size) == 'rem' or unit($size) == 'px' or unit($size) == '' {
|
||||
// Check if a flexible unit
|
||||
@if unit($size) == 'em' or unit($size) == 'rem' {
|
||||
// Need to convert to a pixel value. Let's not overcomplicate it with possible EM inheritence scale factors
|
||||
@return strip-unit($size * 16)
|
||||
}
|
||||
@if unit($size) == 'px' {
|
||||
// We expect PX, so strip the value and return it
|
||||
@return strip-unit($size);
|
||||
}
|
||||
@if unit($size) == '' {
|
||||
@return $size;
|
||||
}
|
||||
} @else {
|
||||
@error 'validate-font-size(): An unexpected font size unit was supplied.';
|
||||
}
|
||||
}
|
||||
|
||||
// @function get-ratio($level: 'AA', $size: 16, $bold: false)
|
||||
// Helper: Determine the correct ratio value to use based on font-size and WCAG Level
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { get-ratio: get-ratio('AAA', 19, true); }
|
||||
// Output:
|
||||
// .sample { get-ratio: 4.5; }
|
||||
//
|
||||
@function get-ratio($level: 'AA', $size: 16, $bold: false) {
|
||||
// Default ratio
|
||||
$ratio: 4.5;
|
||||
@if $level == 'AAA' {
|
||||
$ratio: 7;
|
||||
}
|
||||
|
||||
// Make sure the size is valid. If the value is not EM, REM, or PX (preferred), we can't help
|
||||
$size: validate-font-size($size);
|
||||
|
||||
// Check font size
|
||||
@if $size < 24 {
|
||||
// Small text, use defaults
|
||||
// But:
|
||||
@if $size >= 19 and $bold == true {
|
||||
// Special case: Small text but also bold
|
||||
@if $level == 'AAA' {
|
||||
$ratio: 4.5;
|
||||
} @else {
|
||||
$ratio: 3;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Larger than 24
|
||||
$ratio: 3;
|
||||
@if $level == 'AAA' {
|
||||
$ratio: 4.5;
|
||||
}
|
||||
}
|
||||
@return $ratio;
|
||||
}
|
||||
|
||||
// @function light-or-dark($color)
|
||||
// Helper: Use contrast against white or black to determine if a color is "light" or "dark"
|
||||
// Adapted from: https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { light-or-dark: light-or-dark(#c00); }
|
||||
// Output:
|
||||
// .sample { light-or-dark: "light"; }
|
||||
//
|
||||
@function light-or-dark($color) {
|
||||
$light-contrast: contrast-ratio($color, $white);
|
||||
$dark-contrast: contrast-ratio($color, $black);
|
||||
|
||||
@if $light-contrast > $dark-contrast {
|
||||
// Contrast against white is higher than against black, so, this is a dark color
|
||||
@return "dark";
|
||||
} @else {
|
||||
@return "light";
|
||||
}
|
||||
}
|
||||
|
||||
// @function color-contrast($color)
|
||||
// Helper: Returns black or white compared to a color, whichever produces the highest contrast
|
||||
// Usage:
|
||||
// .sample {
|
||||
// background-color: #c00;
|
||||
// color: color-contrast(#c00);
|
||||
// }
|
||||
// Output:
|
||||
// .sample {
|
||||
// background-color: #c00;
|
||||
// color: #fff;
|
||||
// }
|
||||
//
|
||||
// Named for the forthcoming CSS Module 5 spec function color-contrast();
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast()
|
||||
//
|
||||
@function color-contrast($color) {
|
||||
$color-lod: light-or-dark($color);
|
||||
|
||||
@if ($color-lod == "dark") {
|
||||
@return $white;
|
||||
} @else {
|
||||
@return $black;
|
||||
}
|
||||
}
|
||||
|
||||
// @function a11y-color($fg, $bg, $level: 'AA', $size: 16, $bold: false)
|
||||
// Goal: Return a color that passes for the chosen WCAG level without changing the Hue of the color
|
||||
// Usage:
|
||||
// .sample {
|
||||
// background-color: #000;
|
||||
// color: a11y-color(#c0c, #000);
|
||||
// }
|
||||
// Output:
|
||||
// .sample {
|
||||
// background-color: #000;
|
||||
// color: #d200d2;
|
||||
// }
|
||||
//
|
||||
@function a11y-color($fg, $bg, $level: 'AA', $size: 16, $bold: false) {
|
||||
// Helper: make sure the font size value is acceptable
|
||||
$font-size: validate-font-size($size);
|
||||
// Helper: With the level, font size, and bold boolean, return the proper target ratio. 3.0, 4.5, or 7.0 expected
|
||||
$ratio: get-ratio($level, $font-size, $bold);
|
||||
// Calculate the first contrast ratio of the given pair
|
||||
$original-contrast: contrast-ratio($fg, $bg);
|
||||
|
||||
@if $original-contrast >= $ratio {
|
||||
// If we pass the ratio already, return the original color
|
||||
@return $fg;
|
||||
} @else {
|
||||
// Doesn't pass. Time to get to work
|
||||
// Should the color be lightened or darkened?
|
||||
$fg-lod: light-or-dark($fg);
|
||||
$bg-lod: light-or-dark($bg);
|
||||
|
||||
// Set a "step" value to lighten or darken a color
|
||||
// Note: Higher percentage steps means faster compile time, but we might overstep the required threshold too far with something higher than 4%
|
||||
$step: 1%;
|
||||
|
||||
// Run through some cases where we want to darken, or use a negative step value
|
||||
@if $fg-lod == 'light' and $bg-lod == 'light' {
|
||||
// Both are light colors, darken the fg
|
||||
$step: - $step;
|
||||
} @else if $fg-lod == 'dark' and $bg-lod == 'light' {
|
||||
// bg is light, fg is dark but does not pass, darken more
|
||||
$step: - $step;
|
||||
}
|
||||
// Keeping the rest of the logic here, but our default values do not change, so this logic is not needed
|
||||
//@else if $fg-lod == 'light' and $bg-lod == 'dark' {
|
||||
// // bg is dark, fg is light but does not pass, lighten further
|
||||
// $step: $step;
|
||||
//} @else if $fg-lod == 'dark' and $bg-lod == 'dark' {
|
||||
// // Both are dark, so lighten the fg
|
||||
// $step: $step;
|
||||
//}
|
||||
|
||||
// The magic happens here
|
||||
// Loop through with a @while statement until the color combination passes our required ratio. Scale the color by our step value until the expression is false
|
||||
// This might loop 100 times or more depending on the colors
|
||||
@while contrast-ratio($fg, $bg) < $ratio {
|
||||
$sat-step: 0%;
|
||||
@if saturation($fg) > 10 {
|
||||
$sat-step: $step;
|
||||
}
|
||||
$fg: scale-color($fg, $lightness: $step, $saturation:$sat-step);
|
||||
}
|
||||
@return $fg;
|
||||
}
|
||||
}
|
||||
119
resources/sass/_variables.scss
vendored
119
resources/sass/_variables.scss
vendored
|
|
@ -11,117 +11,116 @@ $theme: "lumen" !default;
|
|||
$lightness: -20%;
|
||||
$saturation: -5%;
|
||||
|
||||
@function lowerColor($color) {
|
||||
@function lower-color($color) {
|
||||
@return color.scale($color, $lightness: $lightness, $saturation: $saturation);
|
||||
}
|
||||
@function lowerBrightness($color) {
|
||||
@function lower-brightness($color) {
|
||||
@return color.scale($color, $lightness: $lightness + 10%);
|
||||
}
|
||||
|
||||
$white: #fffcf5 !default;
|
||||
$gray-100: lower-brightness(#f8f9fa) !default;
|
||||
$gray-200: lower-brightness(#e9ecef) !default;
|
||||
$gray-300: lower-brightness(#dee2e6) !default;
|
||||
$gray-400: lower-brightness(#ced4da) !default;
|
||||
$gray-500: lower-brightness(#adb5bd) !default;
|
||||
$gray-600: lower-brightness(#6c757d) !default;
|
||||
$gray-700: lower-brightness(#495057) !default;
|
||||
$gray-800: lower-brightness(#343a40) !default;
|
||||
$gray-900: lower-brightness(#212529) !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$white: #fffcf5 !default;
|
||||
$gray-100: lowerBrightness(#f8f9fa) !default;
|
||||
$gray-200: lowerBrightness(#e9ecef) !default;
|
||||
$gray-300: lowerBrightness(#dee2e6) !default;
|
||||
$gray-400: lowerBrightness(#ced4da) !default;
|
||||
$gray-500: lowerBrightness(#adb5bd) !default;
|
||||
$gray-600: lowerBrightness(#6c757d) !default;
|
||||
$gray-700: lowerBrightness(#495057) !default;
|
||||
$gray-800: lowerBrightness(#343a40) !default;
|
||||
$gray-900: lowerBrightness(#212529) !default;
|
||||
$black: #000 !default;
|
||||
$blue: lower-color(#337ab7) !default;
|
||||
$indigo: lower-color(#6610f2) !default;
|
||||
$purple: lower-color(#6f42c1) !default;
|
||||
$pink: lower-color(#b7337a) !default;
|
||||
$red: lower-color(#d9534f) !default;
|
||||
$orange: lower-color(#fd7e14) !default;
|
||||
$yellow: lower-color(#f0ad4e) !default;
|
||||
$green: lower-color(#5cb85c) !default;
|
||||
$teal: lower-color(#20c997) !default;
|
||||
$cyan: lower-color(#5bc0de) !default;
|
||||
|
||||
$blue: lowerColor(#337ab7) !default;
|
||||
$indigo: lowerColor(#6610f2) !default;
|
||||
$purple: lowerColor(#6f42c1) !default;
|
||||
$pink: lowerColor(#B7337A) !default;
|
||||
$red: lowerColor(#d9534f) !default;
|
||||
$orange: lowerColor(#fd7e14) !default;
|
||||
$yellow: lowerColor(#f0ad4e) !default;
|
||||
$green: lowerColor(#5cb85c) !default;
|
||||
$teal: lowerColor(#20c997) !default;
|
||||
$cyan: lowerColor(#5bc0de) !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $teal !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $teal !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$body-bg: $white;
|
||||
|
||||
$min-contrast-ratio: 1.95 !default;
|
||||
$min-contrast-ratio: 1.95 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-font-weight: 700 !default;
|
||||
$btn-font-weight: 700 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: rgba(0, 0, 0, .5) !default;
|
||||
$dropdown-link-color: rgba(0, 0, 0, 0.5) !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $gray-900 !default;
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $gray-900 !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $gray-700 !default;
|
||||
$pagination-bg: $white !default;
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-hover-bg: $pagination-bg !default;
|
||||
$pagination-active-border-color: darken($primary, 5%) !default;
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
$pagination-color: $gray-700 !default;
|
||||
$pagination-bg: $white !default;
|
||||
$pagination-hover-color: $pagination-color !default;
|
||||
$pagination-hover-bg: $pagination-bg !default;
|
||||
$pagination-active-border-color: darken($primary, 5%) !default;
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $pagination-bg !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
$breadcrumb-padding-y: 0.375rem !default;
|
||||
$breadcrumb-padding-x: 0.75rem !default;
|
||||
$breadcrumb-bg: $pagination-bg !default;
|
||||
$breadcrumb-border-radius: 0.25rem !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-border-color: rgba($black, .1) !default;
|
||||
$modal-content-border-color: rgba($black, 0.1) !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: 0.4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
// Variables
|
||||
$enum-activities: (
|
||||
"0": #fff2cc,
|
||||
"1": #be8e00,
|
||||
"2": #a9d08e,
|
||||
"3": #ff0000,
|
||||
"3": #f00,
|
||||
"4": #9bc2e6,
|
||||
);
|
||||
|
||||
$enum-project-status: (
|
||||
"0": #950952,
|
||||
"1": #5E0035,
|
||||
"2": #30011C,
|
||||
"1": #5e0035,
|
||||
"2": #30011c,
|
||||
"3": #020202,
|
||||
"4": #023618,
|
||||
"5": #014941,
|
||||
"6": #005C69,
|
||||
"6": #005c69,
|
||||
);
|
||||
|
|
|
|||
26
resources/sass/app.scss
vendored
26
resources/sass/app.scss
vendored
|
|
@ -3,20 +3,12 @@
|
|||
|
||||
// Variables
|
||||
@import "variables";
|
||||
@import "complement";
|
||||
@import "ckEditorContent";
|
||||
@import "vendor/complement";
|
||||
@import "vendor/ckEditorContent";
|
||||
@import "vendor/overloadCrudPolicies";
|
||||
|
||||
@import "bootstrap";
|
||||
|
||||
a.col_sort {
|
||||
&:link,
|
||||
:visited,
|
||||
:hover,
|
||||
:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container-xxl {
|
||||
max-width: 1340px !important;
|
||||
}
|
||||
|
|
@ -26,23 +18,23 @@ body {
|
|||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
#planning {
|
||||
.sticky-top {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#planning .sticky-top {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
// FOOTER
|
||||
body {
|
||||
position: relative;
|
||||
min-height: calc(100vh);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#app {
|
||||
padding-bottom: 8.5rem;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 4.5rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
28
resources/sass/bootstrap.scss
vendored
28
resources/sass/bootstrap.scss
vendored
|
|
@ -1,23 +1,23 @@
|
|||
@import 'variables';
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
@import '~sweetalert2/dist/sweetalert2.css';
|
||||
@import '~@fortawesome/fontawesome-svg-core/styles.css';
|
||||
@import '~glightbox/dist/css/glightbox.css';
|
||||
@import 'bootswatch';
|
||||
@import "variables";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "~sweetalert2/dist/sweetalert2.css";
|
||||
@import "~@fortawesome/fontawesome-svg-core/styles.css";
|
||||
@import "~glightbox/dist/css/glightbox.css";
|
||||
@import "vendor/bootswatch";
|
||||
|
||||
// OVERLOAD BOOTSTRAP
|
||||
.btn-xs, .btn-group-xs > .btn {
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
.btn-xs,
|
||||
.btn-group-xs > .btn {
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
}
|
||||
|
||||
|
||||
// Tickets Labels
|
||||
.ticketIndexLabels {
|
||||
display: -webkit-box;
|
||||
max-width: 15rem;
|
||||
-webkit-line-clamp: 2;
|
||||
.ticket-index-labels {
|
||||
-webkit-box-orient: vertical;
|
||||
display: box;
|
||||
-webkit-line-clamp: 2;
|
||||
max-width: 15rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
324
resources/sass/vendor/_bootswatch.scss
vendored
Normal file
324
resources/sass/vendor/_bootswatch.scss
vendored
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
// Lumen 5.1.3
|
||||
// Bootswatch
|
||||
|
||||
// Variables
|
||||
@import '../variables';
|
||||
|
||||
$web-font-path: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap' !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin shadow($width: 4px) {
|
||||
border-style: solid;
|
||||
border-width: 0 1px $width 1px;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
|
||||
.navbar {
|
||||
@include shadow();
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
@include shadow();
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(.disabled):hover {
|
||||
border-bottom-width: 3px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
&:not(.disabled):active {
|
||||
@include box-shadow(none);
|
||||
border-bottom-width: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
&,
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):active,
|
||||
&:focus {
|
||||
border-color: shade-color($value, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='btn-outline'] {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.btn-group-vertical {
|
||||
.btn + .btn {
|
||||
&:hover {
|
||||
border-top-width: 1px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-top-width: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
.text-secondary {
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Forms
|
||||
|
||||
.form-control {
|
||||
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
// Navs
|
||||
|
||||
.nav {
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
|
||||
&,
|
||||
&.disabled,
|
||||
&.disabled:hover,
|
||||
&.disabled:focus {
|
||||
border-color: $nav-tabs-border-color;
|
||||
margin-top: 6px;
|
||||
transition: padding-bottom 0.2s ease-in-out, margin-top 0.2s ease-in-out, border-bottom 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover,
|
||||
&:not(.disabled):focus,
|
||||
&.active {
|
||||
border-bottom-color: transparent;
|
||||
margin-top: 0;
|
||||
padding-bottom: add(0.5rem, 6px);
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-justified > li {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include shadow();
|
||||
@include box-shadow(none);
|
||||
border-top-width: 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@include shadow();
|
||||
border-color: shade-color($breadcrumb-bg, 10%);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
> li > a,
|
||||
> li > span {
|
||||
@include shadow();
|
||||
color: $pagination-color;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
top: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom-width: 3px;
|
||||
text-decoration: none;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-bottom-width: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&:hover {
|
||||
@include shadow();
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include shadow();
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
> li > a,
|
||||
> li > span,
|
||||
> .disabled > a,
|
||||
> .disabled > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
border-left-width: 2px;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators
|
||||
|
||||
.btn-close {
|
||||
opacity: 0.4;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@include shadow();
|
||||
color: $white;
|
||||
|
||||
&-primary {
|
||||
background-color: $primary;
|
||||
border-color: shade-color($primary, 10%);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background-color: $secondary;
|
||||
border-color: shade-color($secondary, 10%);
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: $success;
|
||||
border-color: shade-color($success, 10%);
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
border-color: shade-color($info, 10%);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: $danger;
|
||||
border-color: shade-color($danger, 10%);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
border-color: shade-color($warning, 10%);
|
||||
}
|
||||
|
||||
&-dark {
|
||||
background-color: $dark;
|
||||
border-color: shade-color($dark, 10%);
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $light;
|
||||
border-color: shade-color($light, 10%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: $white;
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&-secondary,
|
||||
&-light {
|
||||
&,
|
||||
a,
|
||||
.alert-link {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.bg-secondary,
|
||||
&.bg-light {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
a.list-group-item {
|
||||
&-success {
|
||||
&.active {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($success, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&.active {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($warning, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
&.active {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
background-color: shade-color($danger, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
color: #1e2125;
|
||||
|
||||
& .toast {
|
||||
.btn-close {
|
||||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,13 +30,13 @@
|
|||
|
||||
/* ckeditor5-block-quote/theme/blockquote.css */
|
||||
.ck-content blockquote {
|
||||
overflow: hidden;
|
||||
padding-right: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
border-left: solid 5px hsl(0, 0%, 80%);
|
||||
font-style: italic;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-style: italic;
|
||||
border-left: solid 5px hsl(0, 0%, 80%);
|
||||
overflow: hidden;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
/* ckeditor5-block-quote/theme/blockquote.css */
|
||||
.ck-content[dir="rtl"] blockquote {
|
||||
|
|
@ -61,21 +61,21 @@
|
|||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .pen-red {
|
||||
color: var(--ck-highlight-pen-red);
|
||||
background-color: transparent;
|
||||
color: var(--ck-highlight-pen-red);
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .pen-green {
|
||||
color: var(--ck-highlight-pen-green);
|
||||
background-color: transparent;
|
||||
color: var(--ck-highlight-pen-green);
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-tiny {
|
||||
font-size: .7em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-small {
|
||||
font-size: .85em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-big {
|
||||
|
|
@ -88,16 +88,16 @@
|
|||
/* ckeditor5-basic-styles/theme/code.css */
|
||||
.ck-content code {
|
||||
background-color: hsla(0, 0%, 78%, 0.3);
|
||||
padding: .15em;
|
||||
border-radius: 2px;
|
||||
padding: 0.15em;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image {
|
||||
display: table;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
display: table;
|
||||
margin: 0.9em auto;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image img {
|
||||
|
|
@ -108,6 +108,7 @@
|
|||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image-inline {
|
||||
align-items: flex-start;
|
||||
/*
|
||||
* Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
|
||||
* Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
|
||||
|
|
@ -115,7 +116,6 @@
|
|||
*/
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image-inline picture {
|
||||
|
|
@ -130,9 +130,9 @@
|
|||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized img {
|
||||
|
|
@ -175,8 +175,8 @@
|
|||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-block-align-right {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-block-align-left {
|
||||
|
|
@ -192,8 +192,8 @@
|
|||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-inline.image-style-align-left,
|
||||
.ck-content .image-inline.image-style-align-right {
|
||||
margin-top: var(--ck-inline-image-style-spacing);
|
||||
margin-bottom: var(--ck-inline-image-style-spacing);
|
||||
margin-top: var(--ck-inline-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-inline.image-style-align-left {
|
||||
|
|
@ -205,14 +205,14 @@
|
|||
}
|
||||
/* ckeditor5-image/theme/imagecaption.css */
|
||||
.ck-content .image > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
word-break: break-word;
|
||||
color: var(--ck-color-image-caption-text);
|
||||
background-color: var(--ck-color-image-caption-background);
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
caption-side: bottom;
|
||||
color: var(--ck-color-image-caption-text);
|
||||
display: table-caption;
|
||||
font-size: 0.75em;
|
||||
outline-offset: -1px;
|
||||
padding: 0.6em;
|
||||
word-break: break-word;
|
||||
}
|
||||
/* ckeditor5-language/theme/language.css */
|
||||
.ck-content span[lang] {
|
||||
|
|
@ -232,45 +232,45 @@
|
|||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input {
|
||||
-webkit-appearance: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: var(--ck-todo-list-checkmark-size);
|
||||
height: var(--ck-todo-list-checkmark-size);
|
||||
vertical-align: middle;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
height: var(--ck-todo-list-checkmark-size);
|
||||
left: -25px;
|
||||
margin-right: -15px;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: -15px;
|
||||
position: relative;
|
||||
right: 0;
|
||||
vertical-align: middle;
|
||||
width: var(--ck-todo-list-checkmark-size);
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid hsl(0, 0%, 20%);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
left: calc( var(--ck-todo-list-checkmark-size) / 3 );
|
||||
top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||
width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||
height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
|
||||
border-style: solid;
|
||||
border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8) calc(var(--ck-todo-list-checkmark-size) / 8) 0;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
|
||||
left: calc(var(--ck-todo-list-checkmark-size) / 3);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
|
||||
transform: rotate(45deg);
|
||||
width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input[checked]::before {
|
||||
|
|
@ -287,83 +287,83 @@
|
|||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break {
|
||||
position: relative;
|
||||
clear: both;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
clear: both;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 2px dashed hsl(0, 0%, 77%);
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break__label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: .3em .6em;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
background: hsl(0, 0%, 100%);
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
|
||||
color: hsl(0, 0%, 20%);
|
||||
display: block;
|
||||
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: hsl(0, 0%, 20%);
|
||||
background: hsl(0, 0%, 100%);
|
||||
box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 0.3em 0.6em;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
/* ckeditor5-table/theme/tablecaption.css */
|
||||
.ck-content .table > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: top;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
color: var(--ck-color-table-caption-text);
|
||||
background-color: var(--ck-color-table-caption-background);
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
caption-side: top;
|
||||
color: var(--ck-color-table-caption-text);
|
||||
display: table-caption;
|
||||
font-size: 0.75em;
|
||||
outline-offset: -1px;
|
||||
padding: 0.6em;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
/* ckeditor5-media-embed/theme/mediaembed.css */
|
||||
.ck-content .media {
|
||||
clear: both;
|
||||
margin: 0.9em 0;
|
||||
display: block;
|
||||
margin: 0.9em 0;
|
||||
min-width: 15em;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table {
|
||||
margin: 0.9em auto;
|
||||
display: table;
|
||||
margin: 0.9em auto;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table table {
|
||||
border: 1px double hsl(0, 0%, 70%);
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px double hsl(0, 0%, 70%);
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table table td,
|
||||
.ck-content .table table th {
|
||||
min-width: 2em;
|
||||
padding: .4em;
|
||||
border: 1px solid hsl(0, 0%, 75%);
|
||||
min-width: 2em;
|
||||
padding: 0.4em;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table table th {
|
||||
font-weight: bold;
|
||||
background: hsla(0, 0%, 0%, 5%);
|
||||
font-weight: bold;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content[dir="rtl"] .table th {
|
||||
|
|
@ -375,30 +375,30 @@
|
|||
}
|
||||
/* ckeditor5-horizontal-line/theme/horizontalline.css */
|
||||
.ck-content hr {
|
||||
margin: 15px 0;
|
||||
height: 4px;
|
||||
background: hsl(0, 0%, 87%);
|
||||
border: 0;
|
||||
height: 4px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
/* ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre {
|
||||
padding: 1em;
|
||||
color: hsl(0, 0%, 20.8%);
|
||||
background: hsla(0, 0%, 78%, 0.3);
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
color: hsl(0, 0%, 20.8%);
|
||||
direction: ltr;
|
||||
tab-size: 4;
|
||||
white-space: pre-wrap;
|
||||
font-style: normal;
|
||||
min-width: 200px;
|
||||
padding: 1em;
|
||||
tab-size: 4;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
/* ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre code {
|
||||
background: unset;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* ckeditor5-mention/theme/mention.css */
|
||||
.ck-content .mention {
|
||||
|
|
@ -415,4 +415,3 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
244
resources/sass/vendor/_complement.scss
vendored
Normal file
244
resources/sass/vendor/_complement.scss
vendored
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
// @function strip-unit($value)
|
||||
// @param {number with unit} $value
|
||||
@function strip-unit($value) {
|
||||
@return ($value / ($value * 0 + 1));
|
||||
}
|
||||
|
||||
// @function pow($base, $exponents)
|
||||
// Helper: Raise a number the power of another number
|
||||
// Adapted from: https://gist.github.com/hail2u/1964056
|
||||
//
|
||||
// @param {number} $base — The base number
|
||||
// @param {number} $exponents — The exponent to which to raise $base
|
||||
@function pow($base, $exponents) {
|
||||
$raised: 1;
|
||||
@for $i from 1 through $exponents {
|
||||
$raised: $raised * $base;
|
||||
}
|
||||
@return $raised;
|
||||
}
|
||||
|
||||
// @function luminance($color)
|
||||
// Helper: Calculate Luminance of a single color
|
||||
// Adapted from: https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
|
||||
// White luminance is 1, Black luminance is 0
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { luminance: luminance(#c00); }
|
||||
// Output:
|
||||
// .sample { luminance: 0.1283736922; }
|
||||
//
|
||||
@function luminance($color) {
|
||||
// Thanks voxpelli for a very concise implementation of luminance measure in sass
|
||||
// Adapted from: https://gist.github.com/voxpelli/6304812
|
||||
$rgba: red($color), green($color), blue($color);
|
||||
$rgba2: ();
|
||||
@for $i from 1 through 3 {
|
||||
$rgb: nth($rgba, $i);
|
||||
$rgb: calc($rgb / 255);
|
||||
$rgb: if($rgb < 0.03928, calc($rgb / 12.92), pow(calc(($rgb + 0.055) / 1.055), 2));
|
||||
$rgba2: append($rgba2, $rgb);
|
||||
}
|
||||
@return (0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3)) * 100;
|
||||
}
|
||||
|
||||
// @function contrast-ratio($fg, $bg)
|
||||
// Helper: Calculate "readability" as defined by WCAG 2.1
|
||||
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
|
||||
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { color-contrast: contrast-ratio(#c00, #fff); }
|
||||
// Output:
|
||||
// .sample { color-contrast: 5.89; }
|
||||
//
|
||||
@function contrast-ratio($fg, $bg) {
|
||||
$luminance1: luminance($fg) + 0.05;
|
||||
$luminance2: luminance($bg) + 0.05;
|
||||
$ratio: calc($luminance1 / $luminance2);
|
||||
@if $luminance2 > $luminance1 {
|
||||
$ratio: calc(1 / $ratio);
|
||||
}
|
||||
// Round to a hundreth because 6.96 should not pass a ratio of 7.0
|
||||
$ratio: calc(round($ratio * 100) / 100);
|
||||
@return $ratio;
|
||||
}
|
||||
|
||||
// @function validate-font-size($size)
|
||||
// Helper: Depending on the unit recalculate a font size value into pixels if possible
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { validate-font-size: validate-font-size(1em); }
|
||||
// Output:
|
||||
// .sample { validate-font-size: 16; }
|
||||
//
|
||||
@function validate-font-size($size) {
|
||||
@if unit($size) == "em" or unit($size) == "rem" or unit($size) == "px" or unit($size) == "" {
|
||||
// Check if a flexible unit
|
||||
@if unit($size) == "em" or unit($size) == "rem" {
|
||||
// Need to convert to a pixel value. Let's not overcomplicate it with possible EM inheritence scale factors
|
||||
@return strip-unit($size * 16);
|
||||
}
|
||||
@if unit($size) == "px" {
|
||||
// We expect PX, so strip the value and return it
|
||||
@return strip-unit($size);
|
||||
}
|
||||
@if unit($size) == "" {
|
||||
@return $size;
|
||||
}
|
||||
} @else {
|
||||
@error "validate-font-size(): An unexpected font size unit was supplied.";
|
||||
}
|
||||
}
|
||||
|
||||
// @function get-ratio($level: 'AA', $size: 16, $bold: false)
|
||||
// Helper: Determine the correct ratio value to use based on font-size and WCAG Level
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { get-ratio: get-ratio('AAA', 19, true); }
|
||||
// Output:
|
||||
// .sample { get-ratio: 4.5; }
|
||||
//
|
||||
@function get-ratio($level: "AA", $size: 16, $bold: false) {
|
||||
// Default ratio
|
||||
$ratio: 4.5;
|
||||
@if $level == "AAA" {
|
||||
$ratio: 7;
|
||||
}
|
||||
|
||||
// Make sure the size is valid. If the value is not EM, REM, or PX (preferred), we can't help
|
||||
$size: validate-font-size($size);
|
||||
|
||||
// Check font size
|
||||
@if $size < 24 {
|
||||
// Small text, use defaults
|
||||
// But:
|
||||
@if $size >= 19 and $bold == true {
|
||||
// Special case: Small text but also bold
|
||||
@if $level == "AAA" {
|
||||
$ratio: 4.5;
|
||||
} @else {
|
||||
$ratio: 3;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Larger than 24
|
||||
$ratio: 3;
|
||||
@if $level == "AAA" {
|
||||
$ratio: 4.5;
|
||||
}
|
||||
}
|
||||
@return $ratio;
|
||||
}
|
||||
|
||||
// @function light-or-dark($color)
|
||||
// Helper: Use contrast against white or black to determine if a color is "light" or "dark"
|
||||
// Adapted from: https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
|
||||
// To be used in other functions or mixins — creates non-standard CSS output:
|
||||
// Usage:
|
||||
// .sample { light-or-dark: light-or-dark(#c00); }
|
||||
// Output:
|
||||
// .sample { light-or-dark: "light"; }
|
||||
//
|
||||
@function light-or-dark($color) {
|
||||
$light-contrast: contrast-ratio($color, $white);
|
||||
$dark-contrast: contrast-ratio($color, $black);
|
||||
|
||||
@if $light-contrast > $dark-contrast {
|
||||
// Contrast against white is higher than against black, so, this is a dark color
|
||||
@return "dark";
|
||||
} @else {
|
||||
@return "light";
|
||||
}
|
||||
}
|
||||
|
||||
// @function color-contrast($color)
|
||||
// Helper: Returns black or white compared to a color, whichever produces the highest contrast
|
||||
// Usage:
|
||||
// .sample {
|
||||
// background-color: #c00;
|
||||
// color: color-contrast(#c00);
|
||||
// }
|
||||
// Output:
|
||||
// .sample {
|
||||
// background-color: #c00;
|
||||
// color: #fff;
|
||||
// }
|
||||
//
|
||||
// Named for the forthcoming CSS Module 5 spec function color-contrast();
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast()
|
||||
//
|
||||
@function color-contrast($color) {
|
||||
$color-lod: light-or-dark($color);
|
||||
|
||||
@if ($color-lod == "dark") {
|
||||
@return $white;
|
||||
} @else {
|
||||
@return $black;
|
||||
}
|
||||
}
|
||||
|
||||
// @function a11y-color($fg, $bg, $level: 'AA', $size: 16, $bold: false)
|
||||
// Goal: Return a color that passes for the chosen WCAG level without changing the Hue of the color
|
||||
// Usage:
|
||||
// .sample {
|
||||
// background-color: #000;
|
||||
// color: a11y-color(#c0c, #000);
|
||||
// }
|
||||
// Output:
|
||||
// .sample {
|
||||
// background-color: #000;
|
||||
// color: #d200d2;
|
||||
// }
|
||||
//
|
||||
@function a11y-color($fg, $bg, $level: "AA", $size: 16, $bold: false) {
|
||||
// Helper: make sure the font size value is acceptable
|
||||
$font-size: validate-font-size($size);
|
||||
// Helper: With the level, font size, and bold boolean, return the proper target ratio. 3.0, 4.5, or 7.0 expected
|
||||
$ratio: get-ratio($level, $font-size, $bold);
|
||||
// Calculate the first contrast ratio of the given pair
|
||||
$original-contrast: contrast-ratio($fg, $bg);
|
||||
|
||||
@if $original-contrast >= $ratio {
|
||||
// If we pass the ratio already, return the original color
|
||||
@return $fg;
|
||||
} @else {
|
||||
// Doesn't pass. Time to get to work
|
||||
// Should the color be lightened or darkened?
|
||||
$fg-lod: light-or-dark($fg);
|
||||
$bg-lod: light-or-dark($bg);
|
||||
|
||||
// Set a "step" value to lighten or darken a color
|
||||
// Note: Higher percentage steps means faster compile time, but we might overstep the required threshold too far with something higher than 4%
|
||||
$step: 1%;
|
||||
|
||||
// Run through some cases where we want to darken, or use a negative step value
|
||||
@if $fg-lod == "light" and $bg-lod == "light" {
|
||||
// Both are light colors, darken the fg
|
||||
$step: -$step;
|
||||
} @else if $fg-lod == "dark" and $bg-lod == "light" {
|
||||
// bg is light, fg is dark but does not pass, darken more
|
||||
$step: -$step;
|
||||
}
|
||||
// Keeping the rest of the logic here, but our default values do not change, so this logic is not needed
|
||||
//@else if $fg-lod == 'light' and $bg-lod == 'dark' {
|
||||
// // bg is dark, fg is light but does not pass, lighten further
|
||||
// $step: $step;
|
||||
//} @else if $fg-lod == 'dark' and $bg-lod == 'dark' {
|
||||
// // Both are dark, so lighten the fg
|
||||
// $step: $step;
|
||||
//}
|
||||
|
||||
// The magic happens here
|
||||
// Loop through with a @while statement until the color combination passes our required ratio. Scale the color by our step value until the expression is false
|
||||
// This might loop 100 times or more depending on the colors
|
||||
@while contrast-ratio($fg, $bg) < $ratio {
|
||||
$sat-step: 0%;
|
||||
@if saturation($fg) > 10 {
|
||||
$sat-step: $step;
|
||||
}
|
||||
$fg: scale-color($fg, $lightness: $step, $saturation: $sat-step);
|
||||
}
|
||||
@return $fg;
|
||||
}
|
||||
}
|
||||
8
resources/sass/vendor/_overloadCrudPolicies.scss
vendored
Normal file
8
resources/sass/vendor/_overloadCrudPolicies.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
a.col_sort {
|
||||
&:link,
|
||||
:visited,
|
||||
:hover,
|
||||
:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1068,7 +1068,7 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss">
|
||||
@import "./../../sass/variables";
|
||||
@import "./../../sass/complement";
|
||||
@import "./../../sass/vendor/complement";
|
||||
@import "toastify-js/src/toastify.css";
|
||||
|
||||
.macroschedule {
|
||||
|
|
|
|||
5
webpack.mix.js
vendored
5
webpack.mix.js
vendored
|
|
@ -4,6 +4,7 @@ const mix = require("laravel-mix");
|
|||
require("laravel-mix-polyfill");
|
||||
require("laravel-mix-clean");
|
||||
require("laravel-mix-eslint");
|
||||
require("laravel-mix-stylelint");
|
||||
|
||||
const assetDir = "assets";
|
||||
const polyfill = {
|
||||
|
|
@ -76,6 +77,10 @@ mix.ts("resources/ts/app.ts", "public/js/app.js", { transpileOnly: true })
|
|||
extensions: ["js", "ts"],
|
||||
})
|
||||
.sass("resources/sass/app.scss", "public/css")
|
||||
.stylelint({
|
||||
configFile: ".stylelintrc.json",
|
||||
files: ["**/*.scss"],
|
||||
})
|
||||
.polyfill(polyfill)
|
||||
.version()
|
||||
.sourceMaps(true, "inline-source-map");
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue