Configure SCSS linter rules (#186)
This commit is contained in:
parent
170f8716c5
commit
17bb50c977
17 changed files with 93 additions and 11 deletions
3
.scss-lint.yml
Normal file
3
.scss-lint.yml
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
linters:
|
||||||
|
LeadingZero:
|
||||||
|
enabled: false
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue