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

Upgrade bourbon to ^6.0.0 (#161)

Browse source
This commit is contained in:
Pranav Raj S 2019-10-20 13:34:19 +05:30 committed by GitHub
parent 20cfd005b9
commit dd018f3682
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 94 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/javascript/dashboard/assets/images/woot-logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

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

@ -2,10 +2,10 @@
/* Enter and leave animations can use different */ /* Enter and leave animations can use different */
/* durations and timing functions. */ /* durations and timing functions. */
.slide-fade-enter-active { .slide-fade-enter-active {
@include transition(all .3s $ease-in-cubic); transition: all .3s $ease-in-cubic;
} }
.slide-fade-leave-active { .slide-fade-leave-active {
@include 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;
@ -20,7 +20,7 @@
} }
.conversations-list-enter-active, .conversations-list-leave-active { .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 */ { .conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
opacity: 0; opacity: 0;
@ -28,7 +28,7 @@
} }
.menu-list-enter-active, .menu-list-leave-active { .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 */ { .menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
opacity: 0; opacity: 0;
@ -36,11 +36,11 @@
} }
.slide-up-enter-active { .slide-up-enter-active {
@include transition(all .3s $ease-in-cubic); transition: all .3s $ease-in-cubic;
} }
.slide-up-leave-active { .slide-up-leave-active {
@include transition(all .3s $ease-out-cubic); transition: all .3s $ease-out-cubic;
} }
.slide-up-enter, .slide-up-leave-to .slide-up-enter, .slide-up-leave-to
@ -50,35 +50,35 @@
} }
.menu-slide-enter-active, .menu-slide-leave-active { .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 .menu-slide-enter, .menu-slide-leave-to
/* .slide-fade-leave-active for <2.1.8 */ { /* .slide-fade-leave-active for <2.1.8 */ {
@include transform(translateY($space-small)); transform: translateY($space-small);
opacity: 0; opacity: 0;
} }
.toast-fade-enter-active { .toast-fade-enter-active {
@include transition(all .3s $ease-in-sine); transition: all .3s $ease-in-sine;
} }
.toast-fade-leave-active { .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-enter, .toast-fade-leave-to
/* .toast-fade-leave-active for <2.1.8 */ { /* .toast-fade-leave-active for <2.1.8 */ {
@include transform(translateY(-$space-small)); transform: translateY(-$space-small);
opacity: 0; opacity: 0;
} }
.modal-fade-enter-active { .modal-fade-enter-active {
@include transition(all .3s $ease-in-sine); transition: all .3s $ease-in-sine;
} }
.modal-fade-leave-active { .modal-fade-leave-active {
@include transition(all .1s $ease-out-sine); transition: all .1s $ease-out-sine;
} }
.modal-fade-enter, .modal-fade-leave-to .modal-fade-enter, .modal-fade-leave-to

4
app/javascript/dashboard/assets/scss/_helper-classes.scss
View file

@ -3,7 +3,7 @@
} }
.flex-center { .flex-center {
@include flex; display: flex;
@include flex-align(center, middle); @include flex-align(center, middle);
} }
@ -55,4 +55,4 @@
input, textarea { input, textarea {
border-radius: 4px !important; border-radius: 4px !important;
} }

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

@ -11,12 +11,11 @@ body {
.app-wrapper { .app-wrapper {
@include full-height; @include full-height;
@include flex-weight(1);
width: 100%; width: 100%;
} }
.app-root { .app-root {
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
} }
.app-content { .app-content {
@include flex; @include flex;
@ -30,8 +29,7 @@ body {
} }
.view-panel { .view-panel {
@include flex-weight(1); flex-direction: column;
@include flex-direction(column);
@include margin($zero); @include margin($zero);
@include padding($space-normal); @include padding($space-normal);
overflow-y: scroll; overflow-y: scroll;
@ -68,8 +66,8 @@ body {
.no-items-error-message { .no-items-error-message {
@include flex; @include flex;
@include full-height; @include full-height;
@include justify-content(center); justify-content: center;
@include align-items(center); align-items: center;
flex-direction: column; flex-direction: column;
img { img {

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

@ -75,17 +75,17 @@
// flex-layout // flex-layout
@mixin space-between() { @mixin space-between() {
@include display(flex); display: flex;
@include justify-content(space-between); justify-content: space-between;
} }
@mixin space-between-column() { @mixin space-between-column() {
@include space-between; @include space-between;
@include flex-direction(column); flex-direction: column;
} }
@mixin space-between-row() { @mixin space-between-row() {
@include space-between; @include space-between;
@include flex-direction(row); flex-direction: row;
} }
@mixin flex-shrink() { @mixin flex-shrink() {
@ -114,7 +114,7 @@
} }
@mixin scroll-on-hover() { @mixin scroll-on-hover() {
@include transition(all .4s $ease-in-out-cubic); transition: all .4s $ease-in-out-cubic;
overflow: hidden; overflow: hidden;
&:hover { &:hover {

3
app/javascript/dashboard/assets/scss/_variables.scss
View file

@ -38,9 +38,6 @@ $font-weight-black: 700;
$nav-bar-width: 23rem; $nav-bar-width: 23rem;
$header-height: 5.6rem; $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; $woot-logo-padding: $space-large $space-large $space-large $space-large;
// Colors // Colors

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

@ -1,9 +1,13 @@
@import '~bourbon/app/assets/stylesheets/bourbon';
@import 'variables'; @import 'variables';
@import '~bourbon/core/bourbon';
@import '~spinkit/scss/spinners/7-three-bounce'; @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 'foundation-settings';
@import 'mixins'; @import 'mixins';
@import 'helper-classes'; @import 'helper-classes';
@import '~foundation-sites/assets/foundation-flex'; @import '~foundation-sites/assets/foundation-flex';
@import 'woot'; @import 'woot';

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

@ -1,7 +1,7 @@
.channels { .channels {
margin-top: $space-medium; margin-top: $space-medium;
.inactive { .inactive {
@include filter(grayscale(100%)); filter: grayscale(100%);
} }
.channel { .channel {
@include flex; @include flex;
@ -9,10 +9,10 @@
@include margin($zero); @include margin($zero);
@include background-white; @include background-white;
@include border-light; @include border-light;
@include flex-direction(column); flex-direction: column;
cursor: pointer; cursor: pointer;
border-right-color: $color-white; border-right-color: $color-white;
@include transition(all 0.200s ease-in); transition: all 0.200s ease-in;
&:last-child { &:last-child {
@include border-light; @include border-light;

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

@ -159,7 +159,7 @@
@include background-gray; @include background-gray;
.arrow { .arrow {
opacity: 1; opacity: 1;
@include transform(translateX($space-small)); transform: translateX($space-small);
} }
} }
.switch { .switch {
@ -184,8 +184,8 @@
font-size: $font-size-small; font-size: $font-size-small;
color: $medium-gray; color: $medium-gray;
opacity: .7; opacity: .7;
@include transform(translateX(0)); transform: translateX(0);
@include transition(opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s); transition: opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s;
} }
} }
} }
@ -199,7 +199,7 @@
width: 100%; width: 100%;
@include flex; @include flex;
flex-direction: row; flex-direction: row;
@include 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;

6
app/javascript/dashboard/assets/scss/widgets/_billing.scss
View file

@ -26,7 +26,7 @@
@include flex-grid-column(3, $space-medium); @include flex-grid-column(3, $space-medium);
@include padding($space-normal); @include padding($space-normal);
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
// @include thin-border($color-border-light); // @include thin-border($color-border-light);
// @include margin(-$space-micro $zero); // @include margin(-$space-micro $zero);
background: $color-white; background: $color-white;
@ -53,13 +53,13 @@
.lock-message { .lock-message {
@include flex; @include flex;
@include full-height; @include full-height;
@include flex-direction(column); flex-direction: column;
@include flex-align(center, middle); @include flex-align(center, middle);
div { div {
@include flex; @include flex;
@include full-height; @include full-height;
@include flex-direction(column); flex-direction: column;
@include flex-align(center, middle); @include flex-align(center, middle);
img { img {

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

@ -47,7 +47,7 @@
right: $space-normal; right: $space-normal;
top: $space-normal; top: $space-normal;
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
.unread { .unread {
$unread-size: $space-two - $space-micro; $unread-size: $space-two - $space-micro;

14
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View file

@ -1,6 +1,6 @@
.conversations-sidebar { .conversations-sidebar {
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
.chat-list__top { .chat-list__top {
@include padding($space-normal $zero $space-small $zero); @include padding($space-normal $zero $space-small $zero);
@ -45,12 +45,12 @@
.current-chat { .current-chat {
@include flex; @include flex;
@include full-height; @include full-height;
@include flex-direction(column); flex-direction: column;
@include flex-align(center, middle); @include flex-align(center, middle);
div { div {
@include flex; @include flex;
@include full-height; @include full-height;
@include flex-direction(column); flex-direction: column;
@include flex-align(center, middle); @include flex-align(center, middle);
img { img {
@include margin($space-normal); @include margin($space-normal);
@ -68,7 +68,7 @@
.conv-empty-state { .conv-empty-state {
@include flex; @include flex;
@include full-height; @include full-height;
@include flex-direction(column); flex-direction: column;
@include flex-align(center, middle); @include flex-align(center, middle);
} }
} }
@ -76,7 +76,7 @@
.conversation-panel { .conversation-panel {
@include flex; @include flex;
@include flex-weight(1); @include flex-weight(1);
@include flex-direction(column); flex-direction: column;
@include margin($zero); @include margin($zero);
// Firefox flexbox fix // Firefox flexbox fix
height: 100%; height: 100%;
@ -267,8 +267,8 @@
.image { .image {
@include flex; @include flex;
@include justify-content(center); justify-content: center;
@include align-items(flex-end); align-items: flex-end;
text-align: center; text-align: center;
img { img {

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

@ -3,7 +3,7 @@
margin-top: 0; margin-top: 0;
border-bottom: 0; border-bottom: 0;
@include elegant-card; @include elegant-card;
@include transition(height 2s $ease-in-out-cubic); transition: height 2s $ease-in-out-cubic;
max-height: $space-jumbo*2; max-height: $space-jumbo*2;
.reply-box__top { .reply-box__top {
@ -82,8 +82,8 @@
.tabs-title { .tabs-title {
margin: 0; margin: 0;
@include transition(background .2s $ease-in-out-cubic); transition: background .2s $ease-in-out-cubic;
@include transition(color .2s $ease-in-out-cubic); transition: color .2s $ease-in-out-cubic;
a { a {
padding: $space-one $space-two; padding: $space-one $space-two;

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

@ -37,7 +37,7 @@
@include padding($space-small $space-medium); @include padding($space-small $space-medium);
.chart-container { .chart-container {
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
@include flex-align(center, middle); @include flex-align(center, middle);
div { div {
width: 100%; width: 100%;

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

@ -3,7 +3,7 @@
@include flex-align($x: left, $y: middle); @include flex-align($x: left, $y: middle);
@include padding($space-one $space-normal); @include padding($space-one $space-normal);
@include flex-shrink; @include flex-shrink;
@include 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;
@ -12,4 +12,4 @@
@include ghost-input(); @include ghost-input();
@include margin(0); @include margin(0);
} }
} }

9
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View file

@ -18,8 +18,7 @@
.logo { .logo {
img { img {
@include padding($woot-logo-padding); @include padding($woot-logo-padding);
// width: $woot-logo-width; max-height: 100px;
// height: $woot-logo-height;
} }
} }
@ -37,7 +36,7 @@
@include flex; @include flex;
@include space-between-column; @include space-between-column;
@include padding($space-one $space-normal $space-one $space-one); @include padding($space-one $space-normal $space-one $space-one);
@include flex-direction(column); flex-direction: column;
@include border-normal-top; @include border-normal-top;
position: relative; position: relative;
@ -93,7 +92,7 @@
.current-user { .current-user {
@include flex; @include flex;
@include flex-direction(row); flex-direction: row;
cursor: pointer; cursor: pointer;
.current-user--thumbnail { .current-user--thumbnail {
@ -104,7 +103,7 @@
.current-user--data { .current-user--data {
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
.current-user--name { .current-user--name {
font-size: $font-size-small; font-size: $font-size-small;

2
app/javascript/dashboard/assets/scss/widgets/_status-bar.scss
View file

@ -1,6 +1,6 @@
.status-bar { .status-bar {
@include flex; @include flex;
@include flex-direction(column); flex-direction: column;
@include flex-align($x: center, $y: middle); @include flex-align($x: center, $y: middle);
background: lighten($warning-color, 36%); background: lighten($warning-color, 36%);
// @include elegant-card(); // @include elegant-card();

2
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View file

@ -39,7 +39,7 @@
a { a {
@include position(relative, 1px null null null); @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; border-bottom: 2px solid transparent;
color: $medium-gray; color: $medium-gray;
font-size: $font-size-small; font-size: $font-size-small;

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

@ -20,7 +20,7 @@ table {
tr { tr {
.show-if-hover { .show-if-hover {
opacity: 0; opacity: 0;
@include transition(all .2s $ease-in-out-cubic); transition: all .2s $ease-in-out-cubic;
} }
&:hover { &:hover {
.show-if-hover { .show-if-hover {
@ -42,7 +42,7 @@ table {
min-width: 20rem; min-width: 20rem;
@include flex; @include flex;
@include flex-align(left, null); @include flex-align(left, null);
@include flex-direction(row); flex-direction: row;
} }
.button { .button {
@include margin($zero); @include margin($zero);

2
app/javascript/packs/application.js
View file

@ -1,3 +1,5 @@
import '@babel/polyfill';
/* eslint no-console: 0 */ /* eslint no-console: 0 */
/* eslint-env browser */ /* eslint-env browser */
/* eslint-disable no-new */ /* eslint-disable no-new */

3
package.json
View file

@ -11,13 +11,14 @@
"test:coverage": "jest --no-cache --collectCoverage" "test:coverage": "jest --no-cache --collectCoverage"
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.6.0",
"@rails/webpacker": "^4.0.7", "@rails/webpacker": "^4.0.7",
"axios": "^0.19.0", "axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0", "babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",
"bourbon": "~4.2.7", "bourbon": "^6.0.0",
"chart.js": "~2.5.0", "chart.js": "~2.5.0",
"dotenv": "^8.0.0", "dotenv": "^8.0.0",
"emojione": "~2.2.7", "emojione": "~2.2.7",

11
postcss.config.js
View file

@ -1,12 +1,13 @@
/* eslint-disable */
module.exports = { module.exports = {
plugins: [ plugins: [
require('postcss-import'), require('postcss-import'),
require('postcss-flexbugs-fixes'), require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({ require('postcss-preset-env')({
autoprefixer: { autoprefixer: {
flexbox: 'no-2009' flexbox: 'no-2009',
}, },
stage: 3 stage: 3,
}) }),
] ],
} };

16
yarn.lock
View file

@ -616,6 +616,14 @@
"@babel/helper-regex" "^7.4.4" "@babel/helper-regex" "^7.4.4"
regexpu-core "^4.6.0" regexpu-core "^4.6.0"
"@babel/polyfill@^7.6.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.6.0.tgz#6d89203f8b6cd323e8d946e47774ea35dc0619cc"
integrity sha512-q5BZJI0n/B10VaQQvln1IlDK3BTBJFbADx7tv+oXDPIDZuTo37H5Adb9jhlXm/fEN4Y7/64qD9mnrJJG7rmaTw==
dependencies:
core-js "^2.6.5"
regenerator-runtime "^0.13.2"
"@babel/preset-env@^7.0.0 < 7.4.0": "@babel/preset-env@^7.0.0 < 7.4.0":
version "7.3.4" version "7.3.4"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1"
@ -2395,10 +2403,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bourbon@~4.2.7: bourbon@^6.0.0:
version "4.2.7" version "6.0.0"
resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-4.2.7.tgz#48a805dff475fbf61e002a64e1e4db68d2f82fba" resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-6.0.0.tgz#41ad318371128888261a390bebe0e9e89daaa01e"
integrity sha1-SKgF3/R1+/YeACpk4eTbaNL4L7o= integrity sha512-Skds0R1+GY3c1oBddh9BggYVq39Uo4ySvW33zttPk+4+nfGYpbZqwaDwENkbtV7PYhCk0ctTFkzfTNFv5365ag==
brace-expansion@^1.1.7: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"