Maintenance: Updated stylelint to version 14 and added prettier as a better preparation for future steps.
This commit is contained in:
Bola Ahmed Buari
Dominik Klein
parent
d61932de6e
commit
5c333430ca
14 changed files with 1093 additions and 866 deletions
6
.prettierrc.json
Normal file
6
.prettierrc.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
|
|
@ -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-shorthand-property-overrides":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-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",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
}
|
||||
|
||||
#chat .well-chat {
|
||||
padding: 8px 15px 0 15px;
|
||||
padding: 8px 15px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import "svg-dimensions";
|
||||
@import "font";
|
||||
@import 'svg-dimensions';
|
||||
@import 'font';
|
||||
|
||||
$highlight-color: hsl(205,90%,60%);
|
||||
$color: hsl(207,7%,29%);
|
||||
$light-color: hsl(206,8%,50%);
|
||||
$dark-color: hsl(207,7%,19%);
|
||||
$subtle-color: hsl(207,14%,67%);
|
||||
$dropshadow: 0 2px 10px hsla(0,0%,0%,0.13);
|
||||
$light-bg: hsl(209,26%,98%);
|
||||
$dark-bg: hsl(209,22%,96%);
|
||||
$border: hsl(209,13%,95%);
|
||||
$dark-border: hsl(210,14%,91%);
|
||||
$highlight-color: hsl(205, 90%, 60%);
|
||||
$color: hsl(207, 7%, 29%);
|
||||
$light-color: hsl(206, 8%, 50%);
|
||||
$dark-color: hsl(207, 7%, 19%);
|
||||
$subtle-color: hsl(207, 14%, 67%);
|
||||
$dropshadow: 0 2px 10px hsla(0, 0%, 0%, 0.13);
|
||||
$light-bg: hsl(209, 26%, 98%);
|
||||
$dark-bg: hsl(209, 22%, 96%);
|
||||
$border: hsl(209, 13%, 95%);
|
||||
$dark-border: hsl(210, 14%, 91%);
|
||||
|
||||
@mixin desktop {
|
||||
@media screen and (min-width: 1260px) {
|
||||
|
|
@ -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;
|
||||
|
|
@ -173,30 +173,30 @@ b {
|
|||
font-size: 0.875em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: hsl(200,87%,45%);
|
||||
background: hsl(200, 87%, 45%);
|
||||
color: #fff;
|
||||
height: 45px;
|
||||
padding: 0 17px;
|
||||
box-shadow: 0 -1px hsla(0,0%,0%,0.1) inset;
|
||||
box-shadow: 0 -1px hsla(0, 0%, 0%, 0.1) inset;
|
||||
|
||||
&[data-color="yellow"] {
|
||||
color: hsl(45,98%,17%);
|
||||
background: hsl(45,98%,63%);
|
||||
&[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%);
|
||||
background: hsl(145, 52%, 45%);
|
||||
}
|
||||
|
||||
&[data-color="red"] {
|
||||
&[data-color='red'] {
|
||||
color: white;
|
||||
background: hsl(19,90%,51%);
|
||||
background: hsl(19, 90%, 51%);
|
||||
}
|
||||
|
||||
&[data-color="grey"] {
|
||||
color: hsl(45,98%,17%);
|
||||
background: hsl(0,0%,80%);
|
||||
&[data-color='grey'] {
|
||||
color: hsl(45, 98%, 17%);
|
||||
background: hsl(0, 0%, 80%);
|
||||
}
|
||||
|
||||
&-tag {
|
||||
|
|
@ -227,7 +227,7 @@ b {
|
|||
border-radius: 4px;
|
||||
height: 30px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid hsla(0,0%,0%,0.1);
|
||||
border: 1px solid hsla(0, 0%, 0%, 0.1);
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
|
|
@ -280,7 +280,7 @@ b {
|
|||
}
|
||||
|
||||
.menu {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -308,7 +308,7 @@ b {
|
|||
position: relative;
|
||||
font-size: 17px;
|
||||
|
||||
input[type="search"] {
|
||||
input[type='search'] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
|
|
@ -377,7 +377,7 @@ b {
|
|||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(209,13%,93%);
|
||||
border-color: hsl(209, 13%, 93%);
|
||||
background: $dark-bg;
|
||||
}
|
||||
}
|
||||
|
|
@ -388,7 +388,7 @@ b {
|
|||
@include bidi-style(left, 0.6em, right, 0);
|
||||
|
||||
top: 0.6em;
|
||||
color: hsl(210,22%,84%);
|
||||
color: hsl(210, 22%, 84%);
|
||||
|
||||
.icon {
|
||||
width: 1.5em;
|
||||
|
|
@ -406,7 +406,7 @@ b {
|
|||
&-title {
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
color: hsl(206,8%,38%);
|
||||
color: hsl(206, 8%, 38%);
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
|
||||
|
|
@ -415,7 +415,7 @@ b {
|
|||
display: inline-block;
|
||||
|
||||
&::after {
|
||||
content: " — ";
|
||||
content: ' — ';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ b {
|
|||
}
|
||||
|
||||
&-preview {
|
||||
color: hsl(207,12%,50%);
|
||||
color: hsl(207, 12%, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -467,7 +467,7 @@ b {
|
|||
color: $dark-color;
|
||||
|
||||
.icon-hashtag {
|
||||
fill: hsl(208,13%,81%);
|
||||
fill: hsl(208, 13%, 81%);
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
}
|
||||
|
|
@ -491,7 +491,7 @@ b {
|
|||
.icon {
|
||||
width: 120px;
|
||||
height: 118px;
|
||||
fill: hsl(41,100%,49%);
|
||||
fill: hsl(41, 100%, 49%);
|
||||
|
||||
+ h1 {
|
||||
margin-top: 0.66em;
|
||||
|
|
@ -555,7 +555,7 @@ b {
|
|||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 40%;
|
||||
|
|
@ -638,7 +638,7 @@ b {
|
|||
|
||||
& + hr {
|
||||
border: none;
|
||||
border-top: 1px solid hsl(219,13%,95%);
|
||||
border-top: 1px solid hsl(219, 13%, 95%);
|
||||
margin: 28px 0 13px;
|
||||
}
|
||||
}
|
||||
|
|
@ -798,7 +798,7 @@ b {
|
|||
|
||||
&-preview {
|
||||
&::before {
|
||||
content: " — ";
|
||||
content: ' — ';
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -822,7 +822,7 @@ b {
|
|||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background: hsl(210,14%,97%);
|
||||
background: hsl(210, 14%, 97%);
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
min-width: 62px;
|
||||
|
|
@ -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,17 +937,18 @@ b {
|
|||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid hsl(210,5%,92%);
|
||||
border: 1px solid hsl(210, 5%, 92%);
|
||||
}
|
||||
|
||||
th {
|
||||
background: hsl(210,5%,96%);
|
||||
background: hsl(210, 5%, 96%);
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: "." center;
|
||||
text-align: '.' center;
|
||||
}
|
||||
|
||||
table col {
|
||||
|
|
@ -960,7 +962,7 @@ b {
|
|||
|
||||
code {
|
||||
border: none;
|
||||
background: hsl(0,0%,97%);
|
||||
background: hsl(0, 0%, 97%);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
|
@ -968,7 +970,7 @@ b {
|
|||
padding: 12px 15px;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
background: hsl(0,0%,97%);
|
||||
background: hsl(0, 0%, 97%);
|
||||
white-space: pre-wrap;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
|
|
@ -979,7 +981,7 @@ b {
|
|||
margin-top: 13px;
|
||||
margin-bottom: 13px;
|
||||
border: none;
|
||||
border-top: 1px solid hsl(210,14%,91%);
|
||||
border-top: 1px solid hsl(210, 14%, 91%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1004,7 +1006,7 @@ b {
|
|||
top: 2rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: hsl(208,13%,81%);
|
||||
fill: hsl(208, 13%, 81%);
|
||||
|
||||
@include phone {
|
||||
left: 0.5rem;
|
||||
|
|
@ -1077,7 +1079,7 @@ b {
|
|||
margin-top: auto;
|
||||
border-top: 1px solid $dark-border;
|
||||
background: $light-bg;
|
||||
color: hsl(210,8%,50%);
|
||||
color: hsl(210, 8%, 50%);
|
||||
font-size: 12px;
|
||||
|
||||
&-menu {
|
||||
|
|
@ -1100,13 +1102,13 @@ b {
|
|||
.not-published-note {
|
||||
margin: 0.1em 0 0;
|
||||
font-size: 0.65em;
|
||||
color: hsl(0,0,50%);
|
||||
color: hsl(0, 0, 50%);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 24px 9px;
|
||||
border: 1px solid hsla(0,0%,0%,0.1);
|
||||
border: 1px solid hsla(0, 0%, 0%, 0.1);
|
||||
color: inherit;
|
||||
outline: none !important;
|
||||
border-radius: 4px;
|
||||
|
|
@ -1117,7 +1119,7 @@ b {
|
|||
@extend %clickable;
|
||||
|
||||
&--onDark {
|
||||
border-color: hsla(0,0%,100%,0.3);
|
||||
border-color: hsla(0, 0%, 100%, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1254,7 +1254,7 @@ b {
|
|||
cursor: default;
|
||||
|
||||
a {
|
||||
color: hsl(0,0%,72%);
|
||||
color: hsl(0, 0%, 72%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -1275,7 +1275,7 @@ b {
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: hsl(200,5%,95%);
|
||||
background: hsl(200, 5%, 95%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1294,8 +1294,8 @@ b {
|
|||
}
|
||||
|
||||
.language-banner {
|
||||
background: hsl(234,10%,19%);
|
||||
color: hsl(234,5%,80%);
|
||||
background: hsl(234, 10%, 19%);
|
||||
color: hsl(234, 5%, 80%);
|
||||
display: flex;
|
||||
|
||||
&-text {
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
}
|
||||
|
||||
.table {
|
||||
border: 1px solid hsl(0,0%,90%);
|
||||
border: 1px solid hsl(0, 0%, 90%);
|
||||
}
|
||||
|
||||
.table thead tr {
|
||||
border-bottom: 1px solid hsl(0,0%,90%);
|
||||
border-bottom: 1px solid hsl(0, 0%, 90%);
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -158,7 +165,7 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
.article-meta {
|
||||
color: black;
|
||||
background: none;
|
||||
border: 1px dashed hsl(240,2%,60%);
|
||||
border: 1px dashed hsl(240, 2%, 60%);
|
||||
padding: 11px 10px 1px;
|
||||
|
||||
&.top {
|
||||
|
|
@ -232,8 +239,6 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Modal
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
13
package.json
13
package.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
font-size: 12px;
|
||||
width: 33em;
|
||||
height: 3.5em;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
display: none;
|
||||
|
|
@ -53,15 +53,12 @@
|
|||
|
||||
.zammad-chat-header {
|
||||
padding: 0.5em 2.5em 0.5em 1em;
|
||||
background: hsl(203,67%,53%);
|
||||
background: hsl(203, 67%, 53%);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -142,13 +140,13 @@
|
|||
line-height: 2em;
|
||||
padding: 0 0.7em;
|
||||
border-radius: 1em;
|
||||
background: rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status::before {
|
||||
content: "";
|
||||
background: hsl(19,90%,51%);
|
||||
content: '';
|
||||
background: hsl(19, 90%, 51%);
|
||||
display: inline-block;
|
||||
height: 0.9em;
|
||||
width: 0.9em;
|
||||
|
|
@ -156,21 +154,28 @@
|
|||
position: relative;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status[data-status="online"]::before {
|
||||
background: hsl(145,51%,55%);
|
||||
.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%);
|
||||
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 {
|
||||
|
|
@ -213,12 +218,12 @@
|
|||
}
|
||||
|
||||
.zammad-scroll-hint {
|
||||
background: hsl(210,8%,98%);
|
||||
background: hsl(210, 8%, 98%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid hsl(0,0%,91%);
|
||||
border-bottom: 1px solid hsl(0, 0%, 91%);
|
||||
padding: 7px 10px 6px;
|
||||
color: hsl(0,0%,60%);
|
||||
color: hsl(0, 0%, 60%);
|
||||
cursor: pointer;
|
||||
|
||||
&.is-hidden {
|
||||
|
|
@ -227,7 +232,7 @@
|
|||
}
|
||||
|
||||
.zammad-scroll-hint-icon {
|
||||
fill: hsl(210,5%,78%);
|
||||
fill: hsl(210, 5%, 78%);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -252,7 +257,7 @@
|
|||
|
||||
.zammad-chat-timestamp {
|
||||
text-align: center;
|
||||
color: hsl(0,0%,60%);
|
||||
color: hsl(0, 0%, 60%);
|
||||
font-size: 0.9em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
|
@ -276,13 +281,11 @@
|
|||
.zammad-chat-message-body {
|
||||
padding: 0.5em 1em;
|
||||
line-height: 1.4;
|
||||
background: hsl(0,0%,93%);
|
||||
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 {
|
||||
|
|
@ -300,7 +303,7 @@
|
|||
}
|
||||
|
||||
.zammad-chat-message--customer .zammad-chat-message-body {
|
||||
background: hsl(203,67%,53%);
|
||||
background: hsl(203, 67%, 53%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -317,7 +320,7 @@
|
|||
}
|
||||
|
||||
.zammad-chat-loading-circle {
|
||||
background: hsl(0,0%, 85%);
|
||||
background: hsl(0, 0%, 85%);
|
||||
border-radius: 100%;
|
||||
height: 0.55em;
|
||||
width: 0.55em;
|
||||
|
|
@ -329,26 +332,33 @@
|
|||
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 {
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
align-items: flex-end;
|
||||
border-top: 1px solid hsl(0,0%,93%);
|
||||
border-top: 1px solid hsl(0, 0%, 93%);
|
||||
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;
|
||||
}
|
||||
|
|
@ -377,7 +387,7 @@
|
|||
}
|
||||
|
||||
.zammad-chat-input::-webkit-input-placeholder {
|
||||
color: hsl(0,0%,85%);
|
||||
color: hsl(0, 0%, 85%);
|
||||
}
|
||||
|
||||
.zammad-chat-button {
|
||||
|
|
@ -385,17 +395,15 @@
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: initial;
|
||||
background: hsl(203,67%,53%);
|
||||
background: hsl(203, 67%, 53%);
|
||||
color: white;
|
||||
padding: 0.5em 1.2em;
|
||||
margin: 0.63em 1em;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.help {
|
||||
background: hsl(213,6%,30%);
|
||||
background: hsl(213, 6%, 30%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -70,6 +71,6 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
|
||||
color: #949494;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue