Maintenance: Updated stylelint to version 14 and added prettier as a better preparation for future steps.

This commit is contained in:
Bola Ahmed Buari 2021-10-26 14:52:42 +02:00 committed by Dominik Klein
parent d61932de6e
commit 5c333430ca
14 changed files with 1093 additions and 866 deletions

6
.prettierrc.json Normal file
View file

@ -0,0 +1,6 @@
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all"
}

View file

@ -1,21 +1,38 @@
{
"extends": ["stylelint-config-standard"],
"plugins": ["stylelint-scss"],
"extends": [
"stylelint-config-standard",
"stylelint-config-standard-scss",
"stylelint-prettier/recommended"
],
"rules": {
"at-rule-no-unknown": null,
"alpha-value-notation": null,
"block-no-empty": null,
"color-function-notation": "legacy",
"declaration-block-no-duplicate-properties": null,
"declaration-block-no-redundant-longhand-properties": null,
"declaration-block-no-shorthand-property-overrides": null,
"declaration-block-single-line-max-declarations": null,
"font-family-no-missing-generic-family-keyword": null,
"function-calc-no-unspaced-operator": null,
"function-comma-space-after": null,
"hue-degree-notation": null,
"keyframes-name-pattern": null,
"max-empty-lines": null,
"no-descending-specificity": null,
"no-duplicate-selectors": null,
"number-max-precision": null,
"selector-class-pattern": null,
"selector-list-comma-newline-after": null,
"selector-no-vendor-prefix": null,
"selector-pseudo-element-no-unknown": null,
"scss/at-extend-no-missing-placeholder": null,
"scss/at-rule-no-unknown": null,
"property-no-unknown": [true, { "ignoreProperties": ["scroll-snap-mode"] }]
"scss/dollar-variable-pattern": null,
"scss/double-slash-comment-whitespace-inside": null,
"scss/no-global-function-names": null,
"value-no-vendor-prefix": null,
"property-no-unknown": [true, { "ignoreProperties": ["scroll-snap-mode"] }],
"property-no-vendor-prefix": null
},
"ignoreFiles": [
"public/assets/*.css",

View file

@ -6,6 +6,6 @@
}
#chat .well-chat {
padding: 8px 15px 0 15px;
padding: 8px 15px 0;
margin: 0;
}

View file

@ -1,8 +1,7 @@
@font-face {
font-family: 'Fira Sans';
src: url('fonts/FiraSans-Bold.eot');
src:
url('fonts/FiraSans-Bold.woff2') format('woff2'),
src: url('fonts/FiraSans-Bold.woff2') format('woff2'),
url('fonts/FiraSans-Bold.woff') format('woff'),
url('fonts/FiraSans-Bold.ttf') format('truetype');
font-weight: bold;
@ -12,8 +11,7 @@
@font-face {
font-family: 'Fira Sans';
src: url('fonts/FiraSans-Regular.eot');
src:
url('fonts/FiraSans-Regular.woff2') format('woff2'),
src: url('fonts/FiraSans-Regular.woff2') format('woff2'),
url('fonts/FiraSans-Regular.woff') format('woff'),
url('fonts/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
@ -23,8 +21,7 @@
@font-face {
font-family: 'Fira Sans';
src: url('fonts/FiraSans-Medium.eot');
src:
url('fonts/FiraSans-Medium.woff2') format('woff2'),
src: url('fonts/FiraSans-Medium.woff2') format('woff2'),
url('fonts/FiraSans-Medium.woff') format('woff'),
url('fonts/FiraSans-Medium.ttf') format('truetype');
font-weight: 500;
@ -34,8 +31,7 @@
@font-face {
font-family: 'Fira Sans';
src: url('fonts/FiraSans-Light.eot');
src:
url('fonts/FiraSans-Light.woff2') format('woff2'),
src: url('fonts/FiraSans-Light.woff2') format('woff2'),
url('fonts/FiraSans-Light.woff') format('woff'),
url('fonts/FiraSans-Light.ttf') format('truetype');
font-weight: 300;

View file

@ -10,7 +10,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
padding: 0.5em;
color: #333;
background: #f8f8f8;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
.hljs-comment,

View file

@ -1,5 +1,5 @@
@import "svg-dimensions";
@import "font";
@import 'svg-dimensions';
@import 'font';
$highlight-color: hsl(205, 90%, 60%);
$color: hsl(207, 7%, 29%);
@ -40,7 +40,7 @@ $dark-border: hsl(210,14%,91%);
@mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
#{$prop}: $value;
html[dir=rtl] & {
html[dir='rtl'] & {
#{$inverse-prop}: $value;
#{$prop}: $default-value;
}
@ -48,14 +48,14 @@ $dark-border: hsl(210,14%,91%);
/* adds a property only in RTL */
@mixin rtl($prop, $value) {
html[dir=rtl] & {
html[dir='rtl'] & {
#{$prop}: $value;
}
}
/* adds a property only in LTR */
@mixin ltr($prop, $value) {
html[dir=ltr] & {
html[dir='ltr'] & {
#{$prop}: $value;
}
}
@ -84,7 +84,7 @@ $dark-border: hsl(210,14%,91%);
}
html {
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: $light-color;
@ -179,22 +179,22 @@ b {
padding: 0 17px;
box-shadow: 0 -1px hsla(0, 0%, 0%, 0.1) inset;
&[data-color="yellow"] {
&[data-color='yellow'] {
color: hsl(45, 98%, 17%);
background: hsl(45, 98%, 63%);
}
&[data-color="green"] {
&[data-color='green'] {
color: white;
background: hsl(145, 52%, 45%);
}
&[data-color="red"] {
&[data-color='red'] {
color: white;
background: hsl(19, 90%, 51%);
}
&[data-color="grey"] {
&[data-color='grey'] {
color: hsl(45, 98%, 17%);
background: hsl(0, 0%, 80%);
}
@ -308,7 +308,7 @@ b {
position: relative;
font-size: 17px;
input[type="search"] {
input[type='search'] {
appearance: none;
width: 100%;
font-size: inherit;
@ -415,7 +415,7 @@ b {
display: inline-block;
&::after {
content: "";
content: '';
}
}
@ -555,7 +555,7 @@ b {
&::after,
&::before {
content: "";
content: '';
position: absolute;
width: 1px;
height: 40%;
@ -798,7 +798,7 @@ b {
&-preview {
&::before {
content: "";
content: '';
color: initial;
}
}
@ -836,7 +836,8 @@ b {
}
}
.sections--list, .sections--compact-text {
.sections--list,
.sections--compact-text {
.icon,
[data-font] {
@include ltr(margin, 4px 9px 0 3px);
@ -888,7 +889,9 @@ b {
margin: 0 0 1em;
}
table, pre, blockquote {
table,
pre,
blockquote {
margin-bottom: 16px;
&:first-child {
@ -906,9 +909,7 @@ b {
border-style: hidden;
border-collapse: collapse;
font-variant-numeric: lining-nums tabular-nums;
box-shadow:
0 0 0 1px hsl(210,5%,92%),
0 2px hsl(210,5%,92%);
box-shadow: 0 0 0 1px hsl(210, 5%, 92%), 0 2px hsl(210, 5%, 92%);
border-radius: 2px;
}
@ -936,7 +937,8 @@ b {
}
}
td, th {
td,
th {
padding: 6px 10px;
border: 1px solid hsl(210, 5%, 92%);
}
@ -946,7 +948,7 @@ b {
}
td {
text-align: "." center;
text-align: '.' center;
}
table col {
@ -1172,7 +1174,7 @@ b {
}
}
.btn[data-toggle="dropdown"] {
.btn[data-toggle='dropdown'] {
text-decoration: none;
}
@ -1188,10 +1190,8 @@ b {
list-style: none;
font-size: 14px;
border-radius: 3px;
box-shadow:
0 50px 100px hsla(200,30%,30%,0.1),
0 15px 35px hsla(200,30%,30%,0.15),
0 5px 15px hsla(0,0%,0%,0.1);
box-shadow: 0 50px 100px hsla(200, 30%, 30%, 0.1),
0 15px 35px hsla(200, 30%, 30%, 0.15), 0 5px 15px hsla(0, 0%, 0%, 0.1);
background: white;
padding: 10px;
@ -1200,7 +1200,7 @@ b {
}
&::before {
content: "";
content: '';
position: absolute;
top: -6px;
left: 30px;
@ -1208,7 +1208,7 @@ b {
height: 20px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 3px 0 20px 0;
border-radius: 3px 0 20px;
background: white;
}
@ -1231,7 +1231,7 @@ b {
&::before {
top: auto;
bottom: -6px;
border-radius: 20px 0 3px 0;
border-radius: 20px 0 3px;
}
}

View file

@ -65,7 +65,14 @@ main {
padding: 0;
}
h1, .popover-notificationsHeader .popover-title, .ticket-title-update, h2, h3, h4, h5, h6 {
h1,
.popover-notificationsHeader .popover-title,
.ticket-title-update,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
}
@ -88,7 +95,7 @@ td a {
display: none;
}
th.js-tableHead:not([data-column-key="icon"]) {
th.js-tableHead:not([data-column-key='icon']) {
width: auto !important;
}
@ -232,8 +239,6 @@ th.js-tableHead:not([data-column-key="icon"]) {
}
}
/*
Modal

File diff suppressed because it is too large Load diff

View file

@ -1,13 +1,16 @@
{
"name": "zammad",
"version": "1.0.0",
"scripts": {
"lint:css": "stylelint \"**/*.{css,scss}\"",
"lint:css:fix": "stylelint \"**/*.{css,scss}\" --fix"
},
"devDependencies": {
"stylelint": "13.x",
"stylelint-config-standard": "22.x",
"stylelint-scss": "3.x"
"postcss": "^8.3.9",
"postcss-html": "^1.0.1",
"prettier": "2.4.1",
"stylelint": "^14.0.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^23.0.0",
"stylelint-config-standard-scss": "^2.0.0",
"stylelint-prettier": "^1.2.0"
}
}

View file

@ -63,7 +63,8 @@
color: white;
line-height: 2.5em;
height: 3.5em;
box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset,
0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
position: relative;
border-radius: 5px 5px 0 0;
overflow: hidden;
@ -96,7 +97,7 @@
}
.zammad-chat-header-icon::before {
content: "";
content: '';
display: inline-block;
}
@ -151,7 +152,7 @@
}
.zammad-chat-agent-status::before {
content: "";
content: '';
background: #f35912;
display: inline-block;
height: 0.9em;
@ -163,11 +164,11 @@
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}
.zammad-chat-agent-status[data-status="online"]::before {
.zammad-chat-agent-status[data-status='online']::before {
background: #52c782;
}
.zammad-chat-agent-status[data-status="connecting"]::before {
.zammad-chat-agent-status[data-status='connecting']::before {
animation: linear connect-fade 600ms infinite alternate;
background: #faab00;
}
@ -299,7 +300,8 @@
background: #ededed;
display: inline-block;
max-width: 70%;
box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset,
0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
}
.zammad-chat-status-inner {
@ -346,7 +348,9 @@
animation-delay: 0.13s;
}
.zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
.zammad-chat-loading-circle
+ .zammad-chat-loading-circle
+ .zammad-chat-loading-circle {
animation-delay: 0.26s;
}
@ -421,7 +425,8 @@
cursor: pointer;
border: none;
border-radius: 1.5em;
box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset,
0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
outline: none;
display: inline-block;
}

View file

@ -57,11 +57,8 @@
color: white;
line-height: 2.5em;
height: 3.5em;
box-shadow:
0 -1px rgba(0,0,0,0.1),
0 1px rgba(255,255,255,0.3) inset,
0 -1px rgba(0,0,0,0.1) inset,
0 1px 1px rgba(0,0,0,0.13);
box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset,
0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
position: relative;
border-radius: 5px 5px 0 0;
overflow: hidden;
@ -90,8 +87,9 @@
line-height: 3.4em;
cursor: pointer;
&::before { // force the icon to align to center
content: "";
&::before {
// force the icon to align to center
content: '';
display: inline-block;
}
}
@ -147,7 +145,7 @@
}
.zammad-chat-agent-status::before {
content: "";
content: '';
background: hsl(19, 90%, 51%);
display: inline-block;
height: 0.9em;
@ -159,18 +157,25 @@
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}
.zammad-chat-agent-status[data-status="online"]::before {
.zammad-chat-agent-status[data-status='online']::before {
background: hsl(145, 51%, 55%);
}
.zammad-chat-agent-status[data-status="connecting"]::before {
.zammad-chat-agent-status[data-status='connecting']::before {
animation: linear connect-fade 600ms infinite alternate;
background: hsl(41, 100%, 49%);
}
@keyframes connect-fade {
from { opacity: 0.5; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
from {
opacity: 0.5;
transform: scale(0.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
.zammad-chat-modal {
@ -279,10 +284,8 @@
background: hsl(0, 0%, 93%);
display: inline-block;
max-width: 70%;
box-shadow:
0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.08) inset,
0 1px rgba(0,0,0,0.02);
box-shadow: 0 2px rgba(255, 255, 255, 0.15) inset,
0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 1px rgba(0, 0, 0, 0.02);
}
.zammad-chat-status-inner {
@ -329,13 +332,22 @@
animation-delay: 0.13s;
}
.zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
.zammad-chat-loading-circle
+ .zammad-chat-loading-circle
+ .zammad-chat-loading-circle {
animation-delay: 0.26s;
}
@keyframes load-fade {
from { opacity: 0.5; transform: scale(0.6); }
67% { opacity: 1; transform: scale(1); }
from {
opacity: 0.5;
transform: scale(0.6);
}
67% {
opacity: 1;
transform: scale(1);
}
}
.zammad-chat-controls {
@ -346,9 +358,7 @@
padding: 0;
margin: 0;
line-height: 1.4em;
box-shadow:
0 1px rgba(0,0,0,0.01),
0 -1px rgba(0,0,0,0.02);
box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02);
position: relative;
background: white;
}
@ -392,10 +402,8 @@
cursor: pointer;
border: none;
border-radius: 1.5em;
box-shadow:
0 2px rgba(255,255,255,0.25) inset,
0 0 0 1px rgba(0,0,0,0.1) inset,
0 1px rgba(0,0,0,0.1);
box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset,
0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1);
outline: none;
display: inline-block;
}

View file

@ -1,8 +1,7 @@
@font-face {
font-family: 'Fira Sans';
src: url('firasans-regular-webfont.eot');
src:
url('firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
src: url('firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('firasans-regular-webfont.woff') format('woff'),
url('firasans-regular-webfont.ttf') format('truetype');
font-weight: normal;
@ -10,7 +9,7 @@
}
html {
font-family: "Fira Sans";
font-family: 'Fira Sans';
height: 100%;
color: #8c959c;
background: #f8f9fa;

View file

@ -2,7 +2,8 @@
width: 100%;
}
.zammad-form h1, .zammad-form h2 {
.zammad-form h1,
.zammad-form h2 {
margin-top: 0;
}
@ -41,7 +42,7 @@
}
.zammad-form-modal::before {
content: "";
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;