diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss index 50957b385..b96a1b5bd 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss @@ -236,7 +236,7 @@ $breadcrumbs-item-slash: true; // 11. Button // ---------- -$button-padding: $space-one $space-two; +$button-padding: $space-one $space-normal; $button-margin: 0 0 $global-margin 0; $button-fill: solid; $button-background: $primary-color; diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss index c3cbe0c18..0e8b948c4 100644 --- a/app/javascript/dashboard/assets/scss/_variables.scss +++ b/app/javascript/dashboard/assets/scss/_variables.scss @@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232; $woot-snackbar-button: #ffeb3b; $swift-ease-out-duration: .4s !default; -$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default; -$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default; +$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default; +$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default; // Ionicons $ionicons-font-path: '~ionicons/fonts'; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss index 20919a73a..9b8c71500 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss @@ -1,3 +1,5 @@ +$resolve-button-width: 13.2rem; + // Conversation header - Light BG .conv-header { @include padding($space-small $space-normal); @@ -71,7 +73,7 @@ .button.resolve--button { @include flex-align($x: center, $y: middle); - width: 13.2rem; + width: $resolve-button-width; >.icon { font-size: $font-size-default; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index 95fcf7699..06749c99d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -1,3 +1,15 @@ +@keyframes left-shift-animation { + + 0%, + 100% { + transform: translateX(0); + } + + 50% { + transform: translateX(1px); + } +} + .conversation { @include flex; @include flex-shrink; @@ -10,6 +22,7 @@ position: relative; &.active { + animation: left-shift-animation .25s $swift-ease-out-function; background: $color-background; border-bottom-color: $color-border-light; border-left-color: $color-woot; @@ -30,7 +43,7 @@ } } - &:nth-last-child(2) { + &:last-child { .conversation--details { border-bottom-color: $color-border-light; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 1514248f3..c35abab4f 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -72,7 +72,7 @@ .chat-list__top { @include flex; - @include padding($zero $zero $space-small $zero); + @include padding($zero $zero $space-micro $zero); align-items: center; justify-content: space-between; diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss index 29ba3c66c..a234a110d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss @@ -5,10 +5,12 @@ margin: $space-normal; margin-top: 0; max-height: $space-mega * 3; - transition: box-shadow .35s $ease-in-out-cubic, height 2s $ease-in-out-cubic; + transition: box-shadow .35s $swift-ease-out-function, + height 2s $swift-ease-out-function; + &.is-focused { - @include normal-shadow; + @include shadow; } .reply-box__top { @@ -47,7 +49,7 @@ &.is-private { background: lighten($warning-color, 38%); - > input { + >input { background: lighten($warning-color, 38%); } } @@ -63,7 +65,7 @@ } } - .file-uploads > label { + .file-uploads>label { cursor: pointer; } @@ -73,7 +75,7 @@ padding: 0 $space-small; } - > textarea { + >textarea { @include ghost-input(); @include margin(0); background: transparent; @@ -100,7 +102,7 @@ .tabs-title { margin: 0; - transition: all .2s $ease-in-out-cubic; + transition: all .2s $swift-ease-out-function; transition-property: color, background; a { @@ -124,10 +126,10 @@ &.is-active { @include border-light-right; border-left: 0; + } - a { - border-bottom-left-radius: $space-small; - } + a { + border-bottom-left-radius: $space-small; } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss index e7d261954..dbb68f6d5 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss @@ -56,7 +56,7 @@ display: flex; flex-direction: row; font-size: $font-size-small; - transition: all .15s $ease-in-out-cubic; + transition: border-color .15s $swift-ease-out-function; } &.is-active { diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss index d47d6ee4c..0a1a5c4b6 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss @@ -24,7 +24,7 @@ table { tr { .show-if-hover { opacity: 0; - transition: all 0.2s $ease-in-out-cubic; + transition: opacity 0.2s $swift-ease-out-function; } &:hover { diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue index f091ab323..518354b64 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue @@ -106,6 +106,10 @@ export default { &.clear.more--button { color: var(--color-body); } + + &:hover { + color: var(--w-800); + } } .actions--container { diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue index 8f7709569..ec7d8b10e 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue @@ -152,7 +152,7 @@ export default { display: flex; font-size: var(--font-size-small); font-weight: 400; - padding: var(--space-normal); + padding: var(--space-normal) var(--space-normal) var(--space-slab); text-align: left; line-height: var(--font-size-large); } diff --git a/app/javascript/widget/assets/scss/_mixins.scss b/app/javascript/widget/assets/scss/_mixins.scss index 901fefcfa..34f8bdc5d 100755 --- a/app/javascript/widget/assets/scss/_mixins.scss +++ b/app/javascript/widget/assets/scss/_mixins.scss @@ -4,9 +4,9 @@ $shadow-color-2: rgba(0, 0, 0, 0.07); $shadow-color-3: rgba(50, 50, 93, .08); $shadow-color-4: rgba(0, 0, 0, .05); -$color-shadow-medium: rgba(0, 0, 0, 0.1); -$color-shadow-light: rgba(0, 0, 0, 0.06); -$color-shadow-large: rgba(0, 0, 0, 0.25); +$color-shadow-medium: rgba(50, 50, 93, 0.08); +$color-shadow-light: rgba(50, 50, 93, 0.04); +$color-shadow-large: rgba(50, 50, 93, 0.25); $color-shadow-outline: rgba(66, 153, 225, 0.5); @mixin normal-shadow { @@ -36,14 +36,14 @@ $color-shadow-outline: rgba(66, 153, 225, 0.5); } @mixin shadow { - box-shadow: 0 1px 10px 4px $color-shadow-medium, - 0 1px 5px 2px $color-shadow-light; + box-shadow: 0 1px 10px 2px $color-shadow-medium, + 0 1px 5px 1px $color-shadow-light; } @mixin shadow-medium { - box-shadow: 0 4px 24px 8px $color-shadow-medium, - 0 2px 16px 4px $color-shadow-light; + box-shadow: 0 4px 24px 4px $color-shadow-medium, + 0 2px 16px 2px $color-shadow-light; }