Configure SCSS linter rules (#186)

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

3
.scss-lint.yml Normal file
View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -56,6 +56,7 @@
.signup--box { .signup--box {
@include elegant-card; @include elegant-card;
padding: $space-large; padding: $space-large;
label { label {
font-size: $font-size-default; font-size: $font-size-default;
color: $color-gray; color: $color-gray;
@ -65,6 +66,7 @@
height: $space-larger; height: $space-larger;
font-size: $font-size-default; font-size: $font-size-default;
} }
.error { .error {
font-size: $font-size-small font-size: $font-size-small
} }
@ -84,6 +86,7 @@
font-size: $font-size-mini; font-size: $font-size-mini;
text-align: center; text-align: center;
@include margin($zero); @include margin($zero);
a { a {
font-size: $font-size-mini; font-size: $font-size-mini;
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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