Maintenance: Setup Stylelint linter for css and scss files.
This commit is contained in:
Bola Ahmed Buari
Dominik Klein
parent
e338309791
commit
5bb17cb776
17 changed files with 4372 additions and 3727 deletions
|
|
@ -1,2 +0,0 @@
|
|||
--exclude-exts=.min.css
|
||||
--ignore=adjoining-classes,box-model,ids,order-alphabetical,unqualified-attributes
|
||||
|
|
@ -50,6 +50,14 @@ coffeelint:
|
|||
script:
|
||||
- coffeelint app/
|
||||
|
||||
stylelint:
|
||||
<<: *template_pre
|
||||
before_script:
|
||||
- source /opt/rh/rh-nodejs12/enable
|
||||
- yarn install
|
||||
script:
|
||||
- yarn lint:css
|
||||
|
||||
bundle-audit:
|
||||
<<: *template_pre
|
||||
script:
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ PreCommit:
|
|||
CoffeeLint:
|
||||
enabled: true
|
||||
on_warn: fail # Treat all warnings as failures
|
||||
Stylelint:
|
||||
enabled: true
|
||||
|
||||
PostCheckout:
|
||||
ALL:
|
||||
|
|
|
|||
32
.stylelintrc.json
Normal file
32
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"extends": ["stylelint-config-standard"],
|
||||
"plugins": ["stylelint-scss"],
|
||||
"rules": {
|
||||
"at-rule-no-unknown": null,
|
||||
"block-no-empty": null,
|
||||
"declaration-block-no-duplicate-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,
|
||||
"max-empty-lines": null,
|
||||
"no-descending-specificity": null,
|
||||
"no-duplicate-selectors": null,
|
||||
"selector-list-comma-newline-after": null,
|
||||
"scss/at-rule-no-unknown": null,
|
||||
"property-no-unknown": [true, { "ignoreProperties": ["scroll-snap-mode"] }]
|
||||
},
|
||||
"ignoreFiles": [
|
||||
"public/assets/*.css",
|
||||
"public/assets/doorkeeper/**",
|
||||
"**/reset*.css",
|
||||
"**/bootstrap*.css",
|
||||
"**/jquery*.css",
|
||||
"**/cropper.css",
|
||||
"**/fineuploader.css",
|
||||
"**/qunit*.css",
|
||||
"**/svg-dimensions.css",
|
||||
"vendor/**"
|
||||
]
|
||||
}
|
||||
|
|
@ -17,4 +17,3 @@
|
|||
*= require_tree ./custom/
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
}
|
||||
|
||||
#chat .well-chat {
|
||||
padding: 8px 15px 0px 15px;
|
||||
margin: 0px;
|
||||
padding: 8px 15px 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('fonts/FiraSans-Bold.eot');
|
||||
src: url('fonts/FiraSans-Bold.woff2') format('woff2'),
|
||||
url('fonts/FiraSans-Bold.woff') format('woff'),
|
||||
url('fonts/FiraSans-Bold.ttf') format('truetype');
|
||||
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;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -11,9 +12,10 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('fonts/FiraSans-Regular.eot');
|
||||
src: url('fonts/FiraSans-Regular.woff2') format('woff2'),
|
||||
url('fonts/FiraSans-Regular.woff') format('woff'),
|
||||
url('fonts/FiraSans-Regular.ttf') format('truetype');
|
||||
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;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -21,9 +23,10 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('fonts/FiraSans-Medium.eot');
|
||||
src: url('fonts/FiraSans-Medium.woff2') format('woff2'),
|
||||
url('fonts/FiraSans-Medium.woff') format('woff'),
|
||||
url('fonts/FiraSans-Medium.ttf') format('truetype');
|
||||
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;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -31,9 +34,10 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('fonts/FiraSans-Light.eot');
|
||||
src: url('fonts/FiraSans-Light.woff2') format('woff2'),
|
||||
url('fonts/FiraSans-Light.woff') format('woff'),
|
||||
url('fonts/FiraSans-Light.ttf') format('truetype');
|
||||
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;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $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%,.13);
|
||||
$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%);
|
||||
|
|
@ -88,7 +88,7 @@ html {
|
|||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: $light-color;
|
||||
|
||||
|
||||
@include phone {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
|
@ -104,19 +104,19 @@ body {
|
|||
h1 {
|
||||
font-size: 2.5em;
|
||||
line-height: 1.12;
|
||||
margin: .8em 0 .6em;
|
||||
margin: 0.8em 0 0.6em;
|
||||
font-weight: normal;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@include phone {
|
||||
font-size: 28px;
|
||||
margin: 1em 0 .8em;
|
||||
margin: 1em 0 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,11 +124,11 @@ h2 {
|
|||
font-size: 1.8em;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
margin: 1em 0 .4em;
|
||||
|
||||
margin: 1em 0 0.4em;
|
||||
|
||||
@include phone {
|
||||
font-size: 24px;
|
||||
margin: 1.2em 0 .5em;
|
||||
margin: 1.2em 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,13 +136,13 @@ h3 {
|
|||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin: 1.33em 0 .55em;
|
||||
letter-spacing: .015em;
|
||||
|
||||
margin: 1.33em 0 0.55em;
|
||||
letter-spacing: 0.015em;
|
||||
|
||||
@include phone {
|
||||
font-size: 19px;
|
||||
line-height: 1.3;
|
||||
margin: 1.2em 0 .75em;
|
||||
margin: 1.2em 0 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,15 +150,15 @@ h4 {
|
|||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
margin: 1.33em 0 .5em;
|
||||
letter-spacing: .015em;
|
||||
margin: 1.33em 0 0.5em;
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 1em;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -177,7 +177,7 @@ b {
|
|||
color: #fff;
|
||||
height: 45px;
|
||||
padding: 0 17px;
|
||||
box-shadow: 0 -1px hsla(0,0%,0%,.1) inset;
|
||||
box-shadow: 0 -1px hsla(0,0%,0%,0.1) inset;
|
||||
|
||||
&[data-color="yellow"] {
|
||||
color: hsl(45,98%,17%);
|
||||
|
|
@ -201,7 +201,9 @@ b {
|
|||
|
||||
&-tag {
|
||||
font-weight: bold;
|
||||
@include bidi-style(margin-right, 17px, margin-left, 0px);
|
||||
|
||||
@include bidi-style(margin-right, 17px, margin-left, 0);
|
||||
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -225,8 +227,8 @@ b {
|
|||
border-radius: 4px;
|
||||
height: 30px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid hsla(0,0%,0%,.1);
|
||||
|
||||
border: 1px solid hsla(0,0%,0%,0.1);
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -243,7 +245,7 @@ b {
|
|||
background: $light-bg;
|
||||
border-bottom: 1px solid $dark-border;
|
||||
position: relative;
|
||||
padding: .3em 0 .9em;
|
||||
padding: 0.3em 0 0.9em;
|
||||
flex-shrink: 0;
|
||||
|
||||
.container {
|
||||
|
|
@ -263,13 +265,13 @@ b {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: inherit;
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
height: 2em;
|
||||
width: auto;
|
||||
|
|
@ -285,7 +287,7 @@ b {
|
|||
font-size: 14px;
|
||||
|
||||
&-item {
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
|
@ -300,12 +302,12 @@ b {
|
|||
|
||||
.search {
|
||||
width: 100%;
|
||||
margin: .9em 0 .6em;
|
||||
|
||||
margin: 0.9em 0 0.6em;
|
||||
|
||||
&-field {
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
|
||||
|
||||
input[type="search"] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
|
|
@ -314,11 +316,13 @@ b {
|
|||
background: white;
|
||||
border: 1px solid $border;
|
||||
border-radius: 999px;
|
||||
@include ltr(padding, .75em 1.1em .75em 2.8em);
|
||||
@include rtl(padding, .75em 2.8em .75em 1.1em);
|
||||
|
||||
@include ltr(padding, 0.75em 1.1em 0.75em 2.8em);
|
||||
@include rtl(padding, 0.75em 2.8em 0.75em 1.1em);
|
||||
|
||||
outline: none;
|
||||
font-weight: 300;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: $subtle-color;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -327,21 +331,23 @@ b {
|
|||
|
||||
.icon {
|
||||
position: absolute;
|
||||
|
||||
@include bidi-style(left, 1.1em, right, inherit);
|
||||
|
||||
top: 50%;
|
||||
margin-top: -.54em;
|
||||
margin-top: -0.54em;
|
||||
fill: $dark-color;
|
||||
width: 1.08em;
|
||||
height: 1.08em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
list-style: none;
|
||||
padding: .5em 0 0;
|
||||
padding: 0.5em 0 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
|
||||
.section {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
@ -356,18 +362,20 @@ b {
|
|||
}
|
||||
|
||||
.result {
|
||||
margin: 0 .25em;
|
||||
|
||||
margin: 0 0.25em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
padding: .8em;
|
||||
padding: 0.8em;
|
||||
|
||||
@include bidi-style(padding-left, 2.75em, padding-right, 0.8em);
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(209,13%,93%);
|
||||
background: $dark-bg;
|
||||
|
|
@ -376,10 +384,12 @@ b {
|
|||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
@include bidi-style(left, .6em, right, 0em);
|
||||
top: .6em;
|
||||
|
||||
@include bidi-style(left, 0.6em, right, 0);
|
||||
|
||||
top: 0.6em;
|
||||
color: hsl(210,22%,84%);
|
||||
|
||||
|
||||
.icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
|
@ -387,7 +397,7 @@ b {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
[data-font]{
|
||||
[data-font] {
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
|
@ -397,14 +407,14 @@ b {
|
|||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
color: hsl(206,8%,38%);
|
||||
margin: 0 0 .25em;
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
|
||||
|
||||
&-category {
|
||||
color: $subtle-color;
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
|
||||
&::after {
|
||||
content: " — ";
|
||||
}
|
||||
}
|
||||
|
|
@ -423,7 +433,7 @@ b {
|
|||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
|
||||
|
||||
@include phone {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
|
|
@ -435,11 +445,11 @@ b {
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin: 30px 0 40px;
|
||||
|
||||
|
||||
.header + & {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
|
|
@ -455,18 +465,18 @@ b {
|
|||
.main--categories {
|
||||
h1 {
|
||||
color: $dark-color;
|
||||
|
||||
|
||||
.icon-hashtag {
|
||||
fill: hsl(208,13%,81%);
|
||||
width: .7em;
|
||||
height: .7em;
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main--error {
|
||||
text-align: center;
|
||||
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
flex: none;
|
||||
|
|
@ -477,14 +487,14 @@ b {
|
|||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
width: 120px;
|
||||
height: 118px;
|
||||
fill: hsl(41,100%,49%);
|
||||
|
||||
+ h1 {
|
||||
margin-top: .66em;
|
||||
margin-top: 0.66em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -500,7 +510,7 @@ b {
|
|||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
|
||||
|
||||
.container {
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
|
|
@ -511,21 +521,23 @@ b {
|
|||
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
|
||||
@include ltr(padding, 6px 20px 6px 11px);
|
||||
@include rtl(padding, 6px 11px 6px 20px);
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
||||
@include phone {
|
||||
.icon-knowledge-base + span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:first-child {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
|
@ -535,22 +547,24 @@ b {
|
|||
}
|
||||
|
||||
&:last-child {
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 40%;
|
||||
background: $color;
|
||||
opacity: .2;
|
||||
opacity: 0.2;
|
||||
|
||||
@include ltr(right, 0);
|
||||
@include rtl(left, 0);
|
||||
|
||||
top: 0;
|
||||
transform-origin: bottom;
|
||||
|
||||
|
|
@ -558,9 +572,10 @@ b {
|
|||
@include rtl(transform, translateY(13%) rotate(37deg));
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
top: 50%;
|
||||
transform-origin: top;
|
||||
|
||||
@include ltr(transform, translateY(-13%) rotate(37deg));
|
||||
@include rtl(transform, translateY(-13%) rotate(-37deg));
|
||||
}
|
||||
|
|
@ -571,12 +586,12 @@ b {
|
|||
margin-top: -1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
|
||||
&-hashtag {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
|
||||
&-knowledge-base {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -585,9 +600,10 @@ b {
|
|||
|
||||
.icon,
|
||||
[data-font] {
|
||||
@include bidi-style(margin-right, 3px, margin-left, 0px);
|
||||
@include bidi-style(margin-right, 3px, margin-left, 0);
|
||||
|
||||
vertical-align: middle;
|
||||
opacity: .75;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
[data-font] {
|
||||
|
|
@ -634,12 +650,13 @@ b {
|
|||
|
||||
.box {
|
||||
@extend %box;
|
||||
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sections--list {
|
||||
padding: 0 !important;
|
||||
|
||||
|
||||
&:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -650,18 +667,20 @@ b {
|
|||
|
||||
.section-inner {
|
||||
@extend %box;
|
||||
|
||||
margin: 15px 0;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.not-published-note {
|
||||
@include bidi-style(margin-left, .5em, margin-right, 0px);
|
||||
margin-top: .5em;
|
||||
@include bidi-style(margin-left, 0.5em, margin-right, 0);
|
||||
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -669,14 +688,14 @@ b {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -10px;
|
||||
|
||||
|
||||
@include phone {
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 33.33%;
|
||||
|
||||
|
||||
@include phone {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
@ -689,6 +708,7 @@ b {
|
|||
padding-bottom: 72%;
|
||||
position: relative;
|
||||
line-height: 1.3;
|
||||
|
||||
@extend %box-link;
|
||||
}
|
||||
|
||||
|
|
@ -698,6 +718,7 @@ b {
|
|||
|
||||
&-inner {
|
||||
@extend %box;
|
||||
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
left: 0;
|
||||
|
|
@ -709,7 +730,7 @@ b {
|
|||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
|
||||
span {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -728,22 +749,22 @@ b {
|
|||
grid-gap: 20px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
@include phone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 0;
|
||||
|
||||
|
||||
@include phone {
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
|
|
@ -772,11 +793,11 @@ b {
|
|||
&-category {
|
||||
margin-bottom: 1px;
|
||||
order: -1;
|
||||
opacity: .6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&-preview {
|
||||
&:before {
|
||||
&::before {
|
||||
content: " — ";
|
||||
color: initial;
|
||||
}
|
||||
|
|
@ -796,6 +817,7 @@ b {
|
|||
|
||||
.button {
|
||||
@extend %box;
|
||||
|
||||
appearance: none;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
|
|
@ -827,7 +849,7 @@ b {
|
|||
[data-font] {
|
||||
color: $highlight-color;
|
||||
fill: currentColor;
|
||||
line-height: inherit;
|
||||
line-height: inherit;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -844,7 +866,7 @@ b {
|
|||
font-size: 42px;
|
||||
margin: 10px 0 20px;
|
||||
line-height: 1;
|
||||
|
||||
|
||||
@include phone {
|
||||
font-size: 35px;
|
||||
margin: 10px 0 13px;
|
||||
|
|
@ -868,7 +890,7 @@ b {
|
|||
|
||||
table, pre, blockquote {
|
||||
margin-bottom: 16px;
|
||||
|
||||
|
||||
&:first-child {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
|
@ -971,11 +993,11 @@ b {
|
|||
list-style: none;
|
||||
border-top: 1px solid $border;
|
||||
position: relative;
|
||||
|
||||
|
||||
@include phone {
|
||||
padding-left: 2.8rem;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 1.2rem;
|
||||
|
|
@ -983,38 +1005,38 @@ b {
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: hsl(208,13%,81%);
|
||||
|
||||
|
||||
@include phone {
|
||||
left: .5rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-title {
|
||||
text-transform: uppercase;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
color: $light-color;
|
||||
padding: 0 .8rem .2rem;
|
||||
padding: 0 0.8rem 0.2rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: .2rem .6rem 0;
|
||||
|
||||
padding: 0.2rem 0.6rem 0;
|
||||
|
||||
.tag {
|
||||
margin: .2rem;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
border-radius: 999px;
|
||||
|
|
@ -1026,20 +1048,20 @@ b {
|
|||
text-decoration: none;
|
||||
border-bottom: 1px solid $border;
|
||||
display: block;
|
||||
padding: .5rem .8rem;
|
||||
font-size: .8em;
|
||||
|
||||
padding: 0.5rem 0.8rem;
|
||||
font-size: 0.8em;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
&-size {
|
||||
color: $subtle-color;
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1076,28 +1098,29 @@ b {
|
|||
}
|
||||
|
||||
.not-published-note {
|
||||
margin: .1em 0 0;
|
||||
font-size: .65em;
|
||||
margin: 0.1em 0 0;
|
||||
font-size: 0.65em;
|
||||
color: hsl(0,0,50%);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 24px 9px;
|
||||
border: 1px solid hsla(0,0%,0%,.1);
|
||||
border: 1px solid hsla(0,0%,0%,0.1);
|
||||
color: inherit;
|
||||
outline: none !important;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
||||
@extend %clickable;
|
||||
|
||||
|
||||
&--onDark {
|
||||
border-color: hsla(0,0%,100%,.3);
|
||||
border-color: hsla(0,0%,100%,0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
&--action {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -1106,9 +1129,10 @@ b {
|
|||
padding: 0 11px !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.icon {
|
||||
@include bidi-style(margin, 0 5px 0 -2px, margin, 0 -2px 0 5px);
|
||||
|
||||
fill: currentColor;
|
||||
|
||||
&:only-child {
|
||||
|
|
@ -1123,7 +1147,7 @@ b {
|
|||
&.btn--slim {
|
||||
padding-left: 7px !important;
|
||||
padding-right: 7px !important;
|
||||
|
||||
|
||||
.btn-label {
|
||||
@include bidi-style(margin-left, 0, margin-right, 0);
|
||||
}
|
||||
|
|
@ -1137,6 +1161,7 @@ b {
|
|||
&--split,
|
||||
&--split--last {
|
||||
border-radius: 0;
|
||||
|
||||
@include bidi-style(border-left-width, 0, border-right-width, 1px);
|
||||
@include ltr(margin-left, 0 !important);
|
||||
@include rtl(margin-right, 0 !important);
|
||||
|
|
@ -1147,7 +1172,6 @@ b {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.btn[data-toggle="dropdown"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1165,17 +1189,17 @@ b {
|
|||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0 50px 100px hsla(200,30%,30%,.1),
|
||||
0 15px 35px hsla(200,30%,30%,.15),
|
||||
0 5px 15px hsla(0,0%,0%,.1);
|
||||
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;
|
||||
|
||||
|
||||
&.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
|
|
@ -1191,8 +1215,8 @@ b {
|
|||
&-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 30px;
|
||||
}
|
||||
|
|
@ -1203,8 +1227,8 @@ b {
|
|||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px !important;
|
||||
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
top: auto;
|
||||
bottom: -6px;
|
||||
border-radius: 20px 0 3px 0;
|
||||
|
|
@ -1228,10 +1252,10 @@ b {
|
|||
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
|
||||
|
||||
a {
|
||||
color: hsl(0,0%,72%);
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
|
|
@ -1239,7 +1263,7 @@ b {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: black;
|
||||
display: flex;
|
||||
|
|
@ -1248,7 +1272,7 @@ b {
|
|||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: hsl(200,5%,95%);
|
||||
|
|
@ -1257,14 +1281,16 @@ b {
|
|||
|
||||
.icon {
|
||||
display: none;
|
||||
@include bidi-style(margin-right, 7px, margin-left, 0px);
|
||||
|
||||
@include bidi-style(margin-right, 7px, margin-left, 0);
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kb-item--empty {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.language-banner {
|
||||
|
|
@ -1286,8 +1312,10 @@ b {
|
|||
fill: currentColor;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
@include ltr(margin, 8px 2px 0 10px);
|
||||
@include rtl(margin, 8px 10px 0 2px);
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -1299,21 +1327,22 @@ b {
|
|||
padding: 7px 5px 0;
|
||||
fill: currentColor;
|
||||
width: 34px;
|
||||
|
||||
@extend %clickable;
|
||||
}
|
||||
}
|
||||
|
||||
.videoWrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
padding-top: 25px;
|
||||
height: 0;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
padding-top: 25px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.videoWrapper iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
}
|
||||
|
||||
.ticket-article {
|
||||
a[href]:after {
|
||||
a[href]::after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -150,7 +150,7 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
background: white !important;
|
||||
}
|
||||
|
||||
.bubble-arrow:after {
|
||||
.bubble-arrow::after {
|
||||
background: white !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
|
@ -201,9 +201,9 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
|
||||
.avatar {
|
||||
border: 1px solid black;
|
||||
|
||||
|
||||
&:not(.avatar--unique) {
|
||||
&:before {
|
||||
&::before {
|
||||
content: attr(data-initials);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -215,17 +215,17 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
line-height: 40px;
|
||||
}
|
||||
|
||||
&.size-30:before {
|
||||
&.size-30::before {
|
||||
font-size: 10px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&.size-50:before {
|
||||
&.size-50::before {
|
||||
font-size: 16px;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
&.size-80:before {
|
||||
&.size-80::before {
|
||||
font-size: 26px;
|
||||
line-height: 84px;
|
||||
}
|
||||
|
|
@ -277,4 +277,4 @@ th.js-tableHead:not([data-column-key="icon"]) {
|
|||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
13
package.json
Normal file
13
package.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -12,29 +12,41 @@
|
|||
display: none;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
z-index: 999; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
font-size: 16px !important; } }
|
||||
.zammad-chat--animate {
|
||||
transition: transform 500ms; }
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat--animate {
|
||||
transition: transform 500ms;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-loaded {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
opacity: 0; }
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-shown {
|
||||
opacity: 1; }
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
height: 30em; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
height: 100%; } }
|
||||
height: 30em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat-icon {
|
||||
height: 2em;
|
||||
|
|
@ -42,7 +54,8 @@
|
|||
fill: currentColor;
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
margin-top: 4px; }
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.zammad-chat-header {
|
||||
padding: 0.5em 2.5em 0.5em 1em;
|
||||
|
|
@ -54,16 +67,22 @@
|
|||
position: relative;
|
||||
border-radius: 5px 5px 0 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat-header {
|
||||
border-radius: 0 !important; } }
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat-header {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
||||
cursor: default; }
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.zammad-chat-welcome-text {
|
||||
font-size: 1.2em; }
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.zammad-chat-header-icon {
|
||||
position: absolute;
|
||||
|
|
@ -73,53 +92,65 @@
|
|||
width: 3.4em;
|
||||
text-align: center;
|
||||
line-height: 3.4em;
|
||||
cursor: pointer; }
|
||||
.zammad-chat-header-icon:before {
|
||||
content: "";
|
||||
display: inline-block; }
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zammad-chat-header-icon::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.zammad-chat-header-icon-open,
|
||||
.zammad-chat-header-icon-close {
|
||||
fill: currentColor;
|
||||
width: 1.6em;
|
||||
height: auto;
|
||||
vertical-align: middle; }
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.zammad-chat-header-icon-close {
|
||||
width: 1.3em; }
|
||||
width: 1.3em;
|
||||
}
|
||||
|
||||
.zammad-chat-header-icon-close,
|
||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
|
||||
display: inline; }
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.zammad-chat-agent {
|
||||
float: left; }
|
||||
float: left;
|
||||
}
|
||||
|
||||
.zammad-chat-header-controls {
|
||||
float: right; }
|
||||
float: right;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-avatar {
|
||||
border-radius: 100%;
|
||||
margin-right: 0.6em;
|
||||
float: left;
|
||||
width: 2.5em; }
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-name {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status {
|
||||
margin: 0.25em 1em;
|
||||
display: inline-block;
|
||||
line-height: 2em;
|
||||
padding: 0 .7em;
|
||||
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; }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status:before {
|
||||
.zammad-chat-agent-status::before {
|
||||
content: "";
|
||||
background: #f35912;
|
||||
display: inline-block;
|
||||
|
|
@ -129,22 +160,29 @@
|
|||
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: #52c782; }
|
||||
.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; }
|
||||
background: #faab00;
|
||||
}
|
||||
|
||||
@keyframes connect-fade {
|
||||
from {
|
||||
opacity: .5;
|
||||
transform: scale(0.6); }
|
||||
opacity: 0.5;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1); } }
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat-modal {
|
||||
position: absolute;
|
||||
|
|
@ -162,22 +200,31 @@
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
.zammad-chat-modal:empty {
|
||||
display: none; }
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zammad-chat-modal:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-text {
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45; }
|
||||
.zammad-chat-modal-text .zammad-chat-loading-animation {
|
||||
font-size: 0.7em; }
|
||||
.zammad-chat-modal-text .zammad-chat-button {
|
||||
margin-top: 1em;
|
||||
font-size: 0.8em; }
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-text .zammad-chat-loading-animation {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-text .zammad-chat-button {
|
||||
margin-top: 1em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.zammad-chat-modal .zammad-chat-loading-animation {
|
||||
margin-right: 8px;
|
||||
vertical-align: middle; }
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.zammad-scroll-hint {
|
||||
background: #f9fafa;
|
||||
|
|
@ -187,14 +234,18 @@
|
|||
align-items: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 7px 10px 6px;
|
||||
color: #999999;
|
||||
cursor: pointer; }
|
||||
.zammad-scroll-hint.is-hidden {
|
||||
display: none; }
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zammad-scroll-hint.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zammad-scroll-hint-icon {
|
||||
fill: #c4c7ca;
|
||||
margin-right: 8px; }
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.zammad-chat-body {
|
||||
padding: 0.5em 1em;
|
||||
|
|
@ -204,33 +255,42 @@
|
|||
flex: 1;
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
-ms-flex: 1;
|
||||
flex: 1; } }
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat-is-open .zammad-chat-body {
|
||||
display: block; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zammad-chat-timestamp {
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
color: #999;
|
||||
font-size: 0.9em;
|
||||
margin: 1em 0; }
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.zammad-chat-status {
|
||||
margin: 1em 0;
|
||||
text-align: center; }
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zammad-chat-message {
|
||||
margin: 0.5em 0; }
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.zammad-chat-message-body {
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
border-radius: 1em; }
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.zammad-chat-status-inner,
|
||||
.zammad-chat-message-body {
|
||||
|
|
@ -239,31 +299,39 @@
|
|||
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 {
|
||||
background: #eee;
|
||||
border-radius: .5em; }
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.zammad-chat-message--customer {
|
||||
text-align: right; }
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zammad-chat-message--customer + .zammad-chat-message--agent,
|
||||
.zammad-chat-message--agent + .zammad-chat-message--customer {
|
||||
margin-top: 1em; }
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.zammad-chat-message--customer .zammad-chat-message-body {
|
||||
background: #379ad7;
|
||||
color: white; }
|
||||
color: white;
|
||||
}
|
||||
|
||||
.zammad-chat-message--unread {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.zammad-chat-message--typing .zammad-chat-message-body {
|
||||
white-space: normal; }
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.zammad-chat-loading-animation {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.zammad-chat-loading-circle {
|
||||
background: #d9d9d9;
|
||||
|
|
@ -271,21 +339,28 @@
|
|||
height: 0.55em;
|
||||
width: 0.55em;
|
||||
display: inline-block;
|
||||
animation: ease-in-out load-fade 600ms infinite alternate; }
|
||||
animation: ease-in-out load-fade 600ms infinite alternate;
|
||||
}
|
||||
|
||||
.zammad-chat-loading-circle + .zammad-chat-loading-circle {
|
||||
animation-delay: .13s; }
|
||||
animation-delay: 0.13s;
|
||||
}
|
||||
|
||||
.zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
|
||||
animation-delay: .26s; }
|
||||
animation-delay: 0.26s;
|
||||
}
|
||||
|
||||
@keyframes load-fade {
|
||||
from {
|
||||
opacity: .5;
|
||||
transform: scale(0.6); }
|
||||
opacity: 0.5;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
67% {
|
||||
opacity: 1;
|
||||
transform: scale(1); } }
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat-controls {
|
||||
overflow: hidden;
|
||||
|
|
@ -298,11 +373,13 @@
|
|||
line-height: 1.4em;
|
||||
box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02);
|
||||
position: relative;
|
||||
background: white; }
|
||||
background: white;
|
||||
}
|
||||
|
||||
.zammad-chat-is-open .zammad-chat-controls {
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.zammad-chat-input {
|
||||
margin: 0;
|
||||
|
|
@ -323,10 +400,12 @@
|
|||
outline: none;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow: auto; }
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.zammad-chat-input::-webkit-input-placeholder {
|
||||
color: #d9d9d9; }
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.zammad-chat-button {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -344,33 +423,41 @@
|
|||
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);
|
||||
outline: none;
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.zammad-chat-send {
|
||||
float: right; }
|
||||
float: right;
|
||||
}
|
||||
|
||||
.zammad-chat-button:disabled,
|
||||
.zammad-chat-input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3; }
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.zammad-chat-is-hidden {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
# Flat Design
|
||||
*/
|
||||
.zammad-chat--flat .zammad-chat-header,
|
||||
.zammad-chat--flat .zammad-chat-body {
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.zammad-chat--flat .zammad-chat-header {
|
||||
box-shadow: none; }
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.zammad-chat--flat .zammad-chat-message-body {
|
||||
box-shadow: none; }
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.zammad-chat--flat .zammad-chat-agent-status,
|
||||
.zammad-chat--flat .zammad-chat-button,
|
||||
.zammad-chat--flat .zammad-chat-status {
|
||||
box-shadow: none; }
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
font-size: 12px;
|
||||
width: 33em;
|
||||
height: 3.5em;
|
||||
box-shadow: 0 3px 10px rgba(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;
|
||||
|
|
@ -24,13 +24,16 @@
|
|||
transition: transform 500ms;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-loaded {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-shown {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
height: 30em;
|
||||
|
||||
|
|
@ -39,7 +42,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.zammad-chat-icon {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
|
|
@ -56,10 +58,10 @@
|
|||
line-height: 2.5em;
|
||||
height: 3.5em;
|
||||
box-shadow:
|
||||
0 -1px rgba(0,0,0,.1),
|
||||
0 1px rgba(255,255,255,.3) inset,
|
||||
0 -1px rgba(0,0,0,.1) inset,
|
||||
0 1px 1px rgba(0,0,0,.13);
|
||||
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;
|
||||
|
|
@ -88,7 +90,7 @@
|
|||
line-height: 3.4em;
|
||||
cursor: pointer;
|
||||
|
||||
&:before { // force the icon to align to center
|
||||
&::before { // force the icon to align to center
|
||||
content: "";
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -138,13 +140,13 @@
|
|||
margin: 0.25em 1em;
|
||||
display: inline-block;
|
||||
line-height: 2em;
|
||||
padding: 0 .7em;
|
||||
padding: 0 0.7em;
|
||||
border-radius: 1em;
|
||||
background: rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 0 1px rgba(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 {
|
||||
.zammad-chat-agent-status::before {
|
||||
content: "";
|
||||
background: hsl(19,90%,51%);
|
||||
display: inline-block;
|
||||
|
|
@ -154,20 +156,20 @@
|
|||
position: relative;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 1px rgba(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 {
|
||||
.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: .5; transform: scale(0.6); }
|
||||
from { opacity: 0.5; transform: scale(0.6); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
|
|
@ -264,7 +266,6 @@
|
|||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
|
||||
.zammad-chat-message-body {
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -279,14 +280,14 @@
|
|||
display: inline-block;
|
||||
max-width: 70%;
|
||||
box-shadow:
|
||||
0 2px rgba(255,255,255,.15) inset,
|
||||
0 0 0 1px rgba(0,0,0,.08) inset,
|
||||
0 1px rgba(0,0,0,.02);
|
||||
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 {
|
||||
background: #eee;
|
||||
border-radius: .5em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.zammad-chat-message--customer {
|
||||
|
|
@ -325,15 +326,15 @@
|
|||
}
|
||||
|
||||
.zammad-chat-loading-circle + .zammad-chat-loading-circle {
|
||||
animation-delay: .13s;
|
||||
animation-delay: 0.13s;
|
||||
}
|
||||
|
||||
.zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
|
||||
animation-delay: .26s;
|
||||
animation-delay: 0.26s;
|
||||
}
|
||||
|
||||
@keyframes load-fade {
|
||||
from { opacity: .5; transform: scale(0.6); }
|
||||
from { opacity: 0.5; transform: scale(0.6); }
|
||||
67% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
|
|
@ -346,8 +347,8 @@
|
|||
margin: 0;
|
||||
line-height: 1.4em;
|
||||
box-shadow:
|
||||
0 1px rgba(0,0,0,.01),
|
||||
0 -1px rgba(0,0,0,.02);
|
||||
0 1px rgba(0,0,0,0.01),
|
||||
0 -1px rgba(0,0,0,0.02);
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -368,7 +369,7 @@
|
|||
appearance: none;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none ;
|
||||
box-shadow: none;
|
||||
box-sizing: content-box;
|
||||
outline: none;
|
||||
flex: 1;
|
||||
|
|
@ -392,9 +393,9 @@
|
|||
border: none;
|
||||
border-radius: 1.5em;
|
||||
box-shadow:
|
||||
0 2px rgba(255,255,255,.25) inset,
|
||||
0 0 0 1px rgba(0,0,0,.1) inset,
|
||||
0 1px rgba(0,0,0,.1);
|
||||
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;
|
||||
}
|
||||
|
|
@ -421,12 +422,15 @@
|
|||
.zammad-chat--flat .zammad-chat-body {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.zammad-chat--flat .zammad-chat-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.zammad-chat--flat .zammad-chat-message-body {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.zammad-chat--flat .zammad-chat-agent-status,
|
||||
.zammad-chat--flat .zammad-chat-button,
|
||||
.zammad-chat--flat .zammad-chat-status {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.help {
|
||||
background: hsl(213,6%,30%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('firasans-regular-webfont.eot');
|
||||
src: url('firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('firasans-regular-webfont.woff') format('woff'),
|
||||
url('firasans-regular-webfont.ttf') format('truetype');
|
||||
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;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -67,6 +68,7 @@ a {
|
|||
color: #f1d158;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #ccb250;
|
||||
}
|
||||
|
|
@ -87,4 +89,4 @@ p {
|
|||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
.zammad-form .has-error .form-control {
|
||||
border-color: #a94442;
|
||||
}
|
||||
|
||||
.zammad-form .has-error label {
|
||||
color: #a94442;
|
||||
}
|
||||
|
|
@ -28,47 +29,47 @@
|
|||
}
|
||||
|
||||
.zammad-form-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.zammad-form-modal:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-right: -0.25em;
|
||||
.zammad-form-modal::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-right: -0.25em;
|
||||
}
|
||||
|
||||
.zammad-form-modal-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
background-color: gray;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.zammad-form-modal-body {
|
||||
text-align: left;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 24px 24px 22px;
|
||||
width: 90%;
|
||||
max-width: 26em;
|
||||
margin: 20px auto;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 50px rgba(0,0,0,.3);
|
||||
color: #949494;
|
||||
text-align: left;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 24px 24px 22px;
|
||||
width: 90%;
|
||||
max-width: 26em;
|
||||
margin: 20px auto;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.3);
|
||||
color: #949494;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ rm .gitlab-ci.yml
|
|||
|
||||
# linting
|
||||
rm -rf .rubocop
|
||||
rm .csslintrc
|
||||
rm .stylelintrc.json
|
||||
rm .eslintignore
|
||||
rm .eslintrc
|
||||
rm .rubocop.yml
|
||||
|
|
|
|||
Loading…
Reference in a new issue