mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 19:48:08 +00:00
Upgrade bourbon to ^6.0.0 (#161)
This commit is contained in:
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 11 KiB |
@@ -2,10 +2,10 @@
|
||||
/* Enter and leave animations can use different */
|
||||
/* durations and timing functions. */
|
||||
.slide-fade-enter-active {
|
||||
@include transition(all .3s $ease-in-cubic);
|
||||
transition: all .3s $ease-in-cubic;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
@include transition(all .3s $ease-out-cubic);
|
||||
transition: all .3s $ease-out-cubic;
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
@@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
.conversations-list-enter-active, .conversations-list-leave-active {
|
||||
@include 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 */ {
|
||||
opacity: 0;
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.menu-list-enter-active, .menu-list-leave-active {
|
||||
@include 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 */ {
|
||||
opacity: 0;
|
||||
@@ -36,11 +36,11 @@
|
||||
}
|
||||
|
||||
.slide-up-enter-active {
|
||||
@include transition(all .3s $ease-in-cubic);
|
||||
transition: all .3s $ease-in-cubic;
|
||||
}
|
||||
|
||||
.slide-up-leave-active {
|
||||
@include transition(all .3s $ease-out-cubic);
|
||||
transition: all .3s $ease-out-cubic;
|
||||
}
|
||||
|
||||
.slide-up-enter, .slide-up-leave-to
|
||||
@@ -50,35 +50,35 @@
|
||||
}
|
||||
|
||||
.menu-slide-enter-active, .menu-slide-leave-active {
|
||||
@include transition(all .15s $ease-in-cubic);
|
||||
transition: all .15s $ease-in-cubic;
|
||||
}
|
||||
|
||||
.menu-slide-enter, .menu-slide-leave-to
|
||||
/* .slide-fade-leave-active for <2.1.8 */ {
|
||||
@include transform(translateY($space-small));
|
||||
transform: translateY($space-small);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.toast-fade-enter-active {
|
||||
@include transition(all .3s $ease-in-sine);
|
||||
transition: all .3s $ease-in-sine;
|
||||
}
|
||||
.toast-fade-leave-active {
|
||||
@include transition(all .1s $ease-out-sine);
|
||||
transition: all .1s $ease-out-sine;
|
||||
}
|
||||
.toast-fade-enter, .toast-fade-leave-to
|
||||
/* .toast-fade-leave-active for <2.1.8 */ {
|
||||
@include transform(translateY(-$space-small));
|
||||
transform: translateY(-$space-small);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.modal-fade-enter-active {
|
||||
@include transition(all .3s $ease-in-sine);
|
||||
transition: all .3s $ease-in-sine;
|
||||
}
|
||||
|
||||
.modal-fade-leave-active {
|
||||
@include transition(all .1s $ease-out-sine);
|
||||
transition: all .1s $ease-out-sine;
|
||||
}
|
||||
|
||||
.modal-fade-enter, .modal-fade-leave-to
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
@include flex;
|
||||
display: flex;
|
||||
@include flex-align(center, middle);
|
||||
}
|
||||
|
||||
@@ -55,4 +55,4 @@
|
||||
|
||||
input, textarea {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,11 @@ body {
|
||||
|
||||
.app-wrapper {
|
||||
@include full-height;
|
||||
@include flex-weight(1);
|
||||
width: 100%;
|
||||
}
|
||||
.app-root {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-content {
|
||||
@include flex;
|
||||
@@ -30,8 +29,7 @@ body {
|
||||
}
|
||||
|
||||
.view-panel {
|
||||
@include flex-weight(1);
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include margin($zero);
|
||||
@include padding($space-normal);
|
||||
overflow-y: scroll;
|
||||
@@ -68,8 +66,8 @@ body {
|
||||
.no-items-error-message {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
|
||||
@@ -75,17 +75,17 @@
|
||||
|
||||
// flex-layout
|
||||
@mixin space-between() {
|
||||
@include display(flex);
|
||||
@include justify-content(space-between);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@mixin space-between-column() {
|
||||
@include space-between;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
}
|
||||
@mixin space-between-row() {
|
||||
@include space-between;
|
||||
@include flex-direction(row);
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@mixin flex-shrink() {
|
||||
@@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
@mixin scroll-on-hover() {
|
||||
@include transition(all .4s $ease-in-out-cubic);
|
||||
transition: all .4s $ease-in-out-cubic;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -38,9 +38,6 @@ $font-weight-black: 700;
|
||||
$nav-bar-width: 23rem;
|
||||
$header-height: 5.6rem;
|
||||
|
||||
// Woot Logo
|
||||
$woot-logo-width: 20rem;
|
||||
$woot-logo-height: 8rem;
|
||||
$woot-logo-padding: $space-large $space-large $space-large $space-large;
|
||||
|
||||
// Colors
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
@import '~bourbon/app/assets/stylesheets/bourbon';
|
||||
@import 'variables';
|
||||
|
||||
@import '~bourbon/core/bourbon';
|
||||
@import '~spinkit/scss/spinners/7-three-bounce';
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css');
|
||||
@import '~ionicons/scss/ionicons';
|
||||
|
||||
@import 'foundation-settings';
|
||||
@import 'mixins';
|
||||
@import 'helper-classes';
|
||||
|
||||
@import '~foundation-sites/assets/foundation-flex';
|
||||
|
||||
@import 'woot';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.channels {
|
||||
margin-top: $space-medium;
|
||||
.inactive {
|
||||
@include filter(grayscale(100%));
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.channel {
|
||||
@include flex;
|
||||
@@ -9,10 +9,10 @@
|
||||
@include margin($zero);
|
||||
@include background-white;
|
||||
@include border-light;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
border-right-color: $color-white;
|
||||
@include transition(all 0.200s ease-in);
|
||||
transition: all 0.200s ease-in;
|
||||
|
||||
&:last-child {
|
||||
@include border-light;
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
@include background-gray;
|
||||
.arrow {
|
||||
opacity: 1;
|
||||
@include transform(translateX($space-small));
|
||||
transform: translateX($space-small);
|
||||
}
|
||||
}
|
||||
.switch {
|
||||
@@ -184,8 +184,8 @@
|
||||
font-size: $font-size-small;
|
||||
color: $medium-gray;
|
||||
opacity: .7;
|
||||
@include transform(translateX(0));
|
||||
@include transition(opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s);
|
||||
transform: translateX(0);
|
||||
transition: opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -199,7 +199,7 @@
|
||||
width: 100%;
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
@include justify-content(space-between);
|
||||
justify-content: space-between;
|
||||
@include padding($space-normal $space-large);
|
||||
a {
|
||||
margin-left: $space-normal;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
@include flex-grid-column(3, $space-medium);
|
||||
@include padding($space-normal);
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
// @include thin-border($color-border-light);
|
||||
// @include margin(-$space-micro $zero);
|
||||
background: $color-white;
|
||||
@@ -53,13 +53,13 @@
|
||||
.lock-message {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
|
||||
div {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
|
||||
img {
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
right: $space-normal;
|
||||
top: $space-normal;
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
|
||||
.unread {
|
||||
$unread-size: $space-two - $space-micro;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.conversations-sidebar {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
|
||||
.chat-list__top {
|
||||
@include padding($space-normal $zero $space-small $zero);
|
||||
@@ -45,12 +45,12 @@
|
||||
.current-chat {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
div {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
img {
|
||||
@include margin($space-normal);
|
||||
@@ -68,7 +68,7 @@
|
||||
.conv-empty-state {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
}
|
||||
}
|
||||
@@ -76,7 +76,7 @@
|
||||
.conversation-panel {
|
||||
@include flex;
|
||||
@include flex-weight(1);
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include margin($zero);
|
||||
// Firefox flexbox fix
|
||||
height: 100%;
|
||||
@@ -267,8 +267,8 @@
|
||||
|
||||
.image {
|
||||
@include flex;
|
||||
@include justify-content(center);
|
||||
@include align-items(flex-end);
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
margin-top: 0;
|
||||
border-bottom: 0;
|
||||
@include elegant-card;
|
||||
@include transition(height 2s $ease-in-out-cubic);
|
||||
transition: height 2s $ease-in-out-cubic;
|
||||
max-height: $space-jumbo*2;
|
||||
|
||||
.reply-box__top {
|
||||
@@ -82,8 +82,8 @@
|
||||
|
||||
.tabs-title {
|
||||
margin: 0;
|
||||
@include transition(background .2s $ease-in-out-cubic);
|
||||
@include transition(color .2s $ease-in-out-cubic);
|
||||
transition: background .2s $ease-in-out-cubic;
|
||||
transition: color .2s $ease-in-out-cubic;
|
||||
|
||||
a {
|
||||
padding: $space-one $space-two;
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
@include padding($space-small $space-medium);
|
||||
.chart-container {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align(center, middle);
|
||||
div {
|
||||
width: 100%;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@include flex-align($x: left, $y: middle);
|
||||
@include padding($space-one $space-normal);
|
||||
@include flex-shrink;
|
||||
@include transition(all .3s $ease-in-out-quad);
|
||||
transition: all .3s $ease-in-out-quad;
|
||||
> .icon {
|
||||
font-size: $font-size-medium;
|
||||
color: $medium-gray;
|
||||
@@ -12,4 +12,4 @@
|
||||
@include ghost-input();
|
||||
@include margin(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,8 +18,7 @@
|
||||
.logo {
|
||||
img {
|
||||
@include padding($woot-logo-padding);
|
||||
// width: $woot-logo-width;
|
||||
// height: $woot-logo-height;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +36,7 @@
|
||||
@include flex;
|
||||
@include space-between-column;
|
||||
@include padding($space-one $space-normal $space-one $space-one);
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include border-normal-top;
|
||||
position: relative;
|
||||
|
||||
@@ -93,7 +92,7 @@
|
||||
|
||||
.current-user {
|
||||
@include flex;
|
||||
@include flex-direction(row);
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
|
||||
.current-user--thumbnail {
|
||||
@@ -104,7 +103,7 @@
|
||||
|
||||
.current-user--data {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
|
||||
.current-user--name {
|
||||
font-size: $font-size-small;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.status-bar {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
flex-direction: column;
|
||||
@include flex-align($x: center, $y: middle);
|
||||
background: lighten($warning-color, 36%);
|
||||
// @include elegant-card();
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
a {
|
||||
@include position(relative, 1px null null null);
|
||||
@include transition(all .15s $ease-in-out-cubic);
|
||||
transition: all .15s $ease-in-out-cubic;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $medium-gray;
|
||||
font-size: $font-size-small;
|
||||
|
||||
@@ -20,7 +20,7 @@ table {
|
||||
tr {
|
||||
.show-if-hover {
|
||||
opacity: 0;
|
||||
@include transition(all .2s $ease-in-out-cubic);
|
||||
transition: all .2s $ease-in-out-cubic;
|
||||
}
|
||||
&:hover {
|
||||
.show-if-hover {
|
||||
@@ -42,7 +42,7 @@ table {
|
||||
min-width: 20rem;
|
||||
@include flex;
|
||||
@include flex-align(left, null);
|
||||
@include flex-direction(row);
|
||||
flex-direction: row;
|
||||
}
|
||||
.button {
|
||||
@include margin($zero);
|
||||
|
||||
Reference in New Issue
Block a user