KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Configure SCSS linter rules (#186)

Browse source
This commit is contained in:
Pranav Raj S 2019-10-27 19:28:02 +05:30 committed by GitHub
parent 170f8716c5
commit 17bb50c977
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 93 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.scss-lint.yml Normal file
View file

@ -0,0 +1,3 @@
linters:
LeadingZero:
enabled: false

8
app/javascript/dashboard/assets/scss/_animations.scss
View file

@ -4,9 +4,11 @@
.slide-fade-enter-active {
transition: all .3s $ease-in-cubic;
}
.slide-fade-leave-active {
transition: all .3s $ease-out-cubic;
}
.slide-fade-enter, .slide-fade-leave-to {
opacity: 0;
transform: translateX(10px);
@ -15,6 +17,7 @@
.slide-fade-enter {
transform: translateX($space-micro);
}
.slide-fade-leave-to {
transform: translateX($space-medium);
}
@ -22,6 +25,7 @@
.conversations-list-enter-active, .conversations-list-leave-active {
transition: all .25s $ease-out-cubic;
}
.conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
opacity: 0;
transform: translateX($space-medium);
@ -30,6 +34,7 @@
.menu-list-enter-active, .menu-list-leave-active {
transition: all .2s $ease-out-cubic;
}
.menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
opacity: 0;
transform: translateX($space-medium);
@ -63,16 +68,17 @@
.toast-fade-enter-active {
transition: all .3s $ease-in-sine;
}
.toast-fade-leave-active {
transition: all .1s $ease-out-sine;
}
.toast-fade-enter, .toast-fade-leave-to
/* .toast-fade-leave-active for <2.1.8 */ {
transform: translateY(-$space-small);
opacity: 0;
}
.modal-fade-enter-active {
transition: all .3s $ease-in-sine;
}

2
app/javascript/dashboard/assets/scss/_layout.scss
View file

@ -13,10 +13,12 @@ body {
@include full-height;
width: 100%;
}
.app-root {
@include flex;
flex-direction: column;
}
.app-content {
@include flex;
}

11
app/javascript/dashboard/assets/scss/_mixins.scss
View file

@ -19,15 +19,19 @@
@mixin border-normal() {
border: 1px solid $color-border;
}
@mixin border-normal-left() {
border-left: 1px solid $color-border;
}
@mixin border-normal-top() {
border-top: 1px solid $color-border;
}
@mixin border-normal-right() {
border-right: 1px solid $color-border;
}
@mixin border-normal-bottom() {
border-bottom: 1px solid $color-border;
}
@ -35,15 +39,19 @@
@mixin border-light() {
border: 1px solid $color-border-light;
}
@mixin border-light-left() {
border-left: 1px solid $color-border-light;
}
@mixin border-light-top() {
border-top: 1px solid $color-border-light;
}
@mixin border-light-right() {
border-right: 1px solid $color-border-light;
}
@mixin border-light-bottom() {
border-bottom: 1px solid $color-border-light;
}
@ -65,6 +73,7 @@
@mixin ghost-input() {
box-shadow: none;
border-color: transparent;
&:active,
&:hover,
&:focus {
@ -83,6 +92,7 @@
@include space-between;
flex-direction: column;
}
@mixin space-between-row() {
@include space-between;
flex-direction: row;
@ -109,6 +119,7 @@
height: 100%;
// COmmenting because unneccessary scroll is apprearing on some pages eg: settings/agents / inboxes
}
@mixin round-corner() {
border-radius: 1000px;
}

1
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View file

@ -18,6 +18,7 @@
margin-bottom: $zero;
@include padding($zero);
}
.multiselect__single {
@include padding($space-small);
margin-bottom: 0;

5
app/javascript/dashboard/assets/scss/views/_signup.scss
View file

@ -2,7 +2,7 @@
// margin-top: $space-larger*1.2;
.signup--hero {
margin-bottom: $space-larger*1.5;
margin-bottom: $space-larger * 1.5;
.hero--logo {
width: 180px;
@ -56,6 +56,7 @@
.signup--box {
@include elegant-card;
padding: $space-large;
label {
font-size: $font-size-default;
color: $color-gray;
@ -65,6 +66,7 @@
height: $space-larger;
font-size: $font-size-default;
}
.error {
font-size: $font-size-small
}
@ -84,6 +86,7 @@
font-size: $font-size-mini;
text-align: center;
@include margin($zero);
a {
font-size: $font-size-mini;
}

2
app/javascript/dashboard/assets/scss/views/settings/channel.scss
View file

@ -1,8 +1,10 @@
.channels {
margin-top: $space-medium;
.inactive {
filter: grayscale(100%);
}
.channel {
@include flex;
@include padding($space-normal $zero);

21
app/javascript/dashboard/assets/scss/views/settings/inbox.scss
View file

@ -57,6 +57,7 @@
height: $zero;
}
}
&.active {
// left: 1px;
// @include background-white;
@ -98,12 +99,14 @@
color: $success-color;
}
}
p {
font-size: $font-size-small;
color: $color-light-gray;
padding-left: $space-medium;
margin: 0;
}
.step {
position: absolute;
left: $space-normal;
@ -132,6 +135,7 @@
@include border-light;
@include full-height();
}
.inoboxes-list {
// @include margin(auto);
// @include background-white;
@ -150,6 +154,7 @@
width: 20%;
float: left;
min-height: 10rem;
&:last-child {
margin-bottom: $zero;
@include border-nil;
@ -162,6 +167,7 @@
transform: translateX($space-small);
}
}
.switch {
align-self: center;
margin-right: $space-normal;
@ -170,15 +176,18 @@
.item--details {
@include padding($space-normal $zero);
.item--name {
font-size: $font-size-large;
line-height: 1;
}
.item--sub {
margin-bottom: 0;
font-size: $font-size-small;
}
}
.arrow {
align-self: center;
font-size: $font-size-small;
@ -193,6 +202,7 @@
.settings-modal {
width: 60%;
height: 80%;
.delete-wrapper {
position: absolute;
bottom: 0;
@ -201,42 +211,51 @@
flex-direction: row;
justify-content: space-between;
@include padding($space-normal $space-large);
a {
margin-left: $space-normal;
}
}
.code-wrapper {
@include margin($space-medium);
.title {
font-weight: $font-weight-medium;
}
.code {
max-height: $space-mega;
overflow: scroll;
white-space: nowrap;
@include padding($space-one);
background: $color-background;
code {
background: transparent;
border: 0;
}
}
}
.agent-wrapper {
@include margin($space-medium);
.title {
font-weight: $font-weight-medium;
}
}
}
.login-init {
text-align: center;
padding-top: 30%;
p {
@include padding($space-medium);
}
> a > img {
width: $space-larger*5;
width: $space-larger * 5;
}
}

1
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

@ -2,6 +2,7 @@
&.icon {
padding-left: $space-normal;
padding-right: $space-normal;
i {
padding-right: $space-one;
}

6
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View file

@ -7,7 +7,7 @@
@include border-normal-bottom;
// Resolve Button
.button {
@include margin(0);
@include margin(0);
@include flex;
}
@ -40,8 +40,9 @@
.user {
@include flex;
@include flex-align($x: center, $y: middle);
.user--name {
@include margin(0);
@include margin(0);
font-size: $font-size-medium;
margin-left: $space-slab;
}
@ -57,6 +58,7 @@
.spinner {
padding: 0 $space-one;
margin-right: $space-smaller;
&:before {
border-top-color: $color-white;
}

5
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View file

@ -14,6 +14,7 @@
@include border-light-bottom;
@include padding($zero $zero $space-slab $zero);
}
.conversation--user {
font-size: $font-size-small;
margin-bottom: $zero;
@ -41,6 +42,7 @@
width: 27rem;
white-space: nowrap;
}
.conversation--meta {
display: block;
position: absolute;
@ -65,6 +67,7 @@
@include round-corner;
margin-top: $space-smaller;
}
.timestamp {
font-size: $font-size-mini;
color: $dark-gray;
@ -79,9 +82,11 @@
.unread {
display: inline-block;
}
.conversation--message {
font-weight: $font-weight-medium;
}
.conversation--user {
font-weight: $font-weight-medium;
}

11
app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
View file

@ -4,7 +4,7 @@
border-bottom: 0;
@include elegant-card;
transition: height 2s $ease-in-out-cubic;
max-height: $space-jumbo*2;
max-height: $space-jumbo * 2;
.reply-box__top {
@include flex;
@ -27,12 +27,14 @@
border-bottom: $space-small solid $color-white;
max-height: 14rem;
overflow: scroll;
.active {
a {
background: $color-woot;
}
}
}
&.is-active {
border-bottom-left-radius: $space-small;
border-bottom-right-radius: $space-small;
@ -56,6 +58,7 @@
color: $color-woot;
}
}
> textarea {
@include ghost-input();
@include margin(0);
@ -91,9 +94,11 @@
&:first-child {
border-bottom-left-radius: $space-small;
&.is-active {
@include border-light-right;
border-left: 0;
a {
border-bottom-left-radius: $space-small;
}
@ -103,6 +108,7 @@
&.is-private {
&.is-active {
background: lighten($warning-color, 38%);
a {
border-bottom-color: darken($warning-color, 15%);
color: darken($warning-color, 15%);
@ -110,6 +116,7 @@
}
}
}
.is-active {
@include background-white;
margin-top: -1px;
@ -119,10 +126,12 @@
.message-length {
float: right;
a {
font-size: $font-size-mini;
}
}
.message-error {
color: $input-error-color;
}

7
app/javascript/dashboard/assets/scss/widgets/_report.scss
View file

@ -4,6 +4,7 @@
@include background-light;
cursor: pointer;
@include custom-border-top(3px, transparent);
&.active {
@include custom-border-top(3px, $color-woot);
@include background-white;
@ -12,16 +13,19 @@
color: $color-woot;
}
}
.heading {
@include margin($zero);
font-size: $font-size-small;
font-weight: $font-weight-bold;
color: $color-heading;
}
.metric {
font-size: $font-size-bigger;
font-weight: $font-weight-feather;
}
.desc {
@include margin($zero);
font-size: $font-size-small;
@ -35,13 +39,16 @@
@include background-white;
@include border-light;
@include padding($space-small $space-medium);
.chart-container {
@include flex;
flex-direction: column;
@include flex-align(center, middle);
div {
width: 100%;
}
.empty-state {
@include margin($space-jumbo);
font-size: $font-size-default;

2
app/javascript/dashboard/assets/scss/widgets/_search-box.scss
View file

@ -4,10 +4,12 @@
@include padding($space-one $space-normal);
@include flex-shrink;
transition: all .3s $ease-in-out-quad;
> .icon {
font-size: $font-size-medium;
color: $medium-gray;
}
> input {
@include ghost-input();
@include margin(0);

4
app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
View file

@ -35,11 +35,11 @@
padding-left: 3rem;
button {
border: none;
background: none;
border: 0;
color: $woot-snackbar-button;
font-size: $font-size-small;
text-transform: uppercase;
color: $woot-snackbar-button;
@include margin(0);
@include padding(0);
}

3
app/javascript/dashboard/assets/scss/widgets/_states.scss
View file

@ -1,11 +1,13 @@
.loading-state {
padding: $space-jumbo $space-smaller;
.message {
display: block;
width: 100%;
text-align: center;
color: $color-gray;
}
.spinner {
float: none;
top: -$space-smaller;
@ -15,6 +17,7 @@
// EMPTY STATES
.empty-state {
padding: $space-jumbo $space-smaller;
.title,
.message {
display: block;

8
app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
View file

@ -1,12 +1,14 @@
table {
font-size: $font-size-small;
border-spacing: 0;
thead {
th {
font-weight: $font-weight-bold;
text-transform: uppercase;
}
}
tbody {
td {
@include padding($space-one $space-small);
@ -16,34 +18,38 @@ table {
}
.woot-table {
tr {
.show-if-hover {
opacity: 0;
transition: all .2s $ease-in-out-cubic;
}
&:hover {
.show-if-hover {
opacity: 1;
}
}
}
.agent-name {
font-weight: $font-weight-medium;
display: block;
text-transform: capitalize;
}
.woot-thumbnail {
border-radius: 50%;
width: 5rem;
height: 5rem;
}
.button-wrapper {
min-width: 20rem;
@include flex;
@include flex-align(left, null);
flex-direction: row;
}
.button {
@include margin($zero);
}