From 2f2397817d2df29faa58472810ab3e6c78b5930d Mon Sep 17 00:00:00 2001 From: joneff Date: Thu, 17 Sep 2020 12:02:56 +0300 Subject: [PATCH] fix(chat): extract chat variables into separate files * remove circular dependency between chat and cards * scope card-deck styles specifc to chat --- packages/bootstrap/scss/_variables.scss | 81 ------------------- packages/bootstrap/scss/chat/_index.scss | 1 + packages/bootstrap/scss/chat/_variables.scss | 79 ++++++++++++++++++ packages/classic/scss/_variables.scss | 85 -------------------- packages/classic/scss/chat/_index.scss | 1 + packages/classic/scss/chat/_variables.scss | 83 +++++++++++++++++++ packages/default/scss/_variables.scss | 81 ------------------- packages/default/scss/card/_layout.scss | 4 - packages/default/scss/chat/_index.scss | 1 + packages/default/scss/chat/_layout.scss | 7 ++ packages/default/scss/chat/_variables.scss | 79 ++++++++++++++++++ packages/material/scss/_variables.scss | 80 ------------------ packages/material/scss/chat/_index.scss | 1 + packages/material/scss/chat/_variables.scss | 79 ++++++++++++++++++ 14 files changed, 331 insertions(+), 331 deletions(-) create mode 100644 packages/bootstrap/scss/chat/_variables.scss create mode 100644 packages/classic/scss/chat/_variables.scss create mode 100644 packages/default/scss/chat/_variables.scss create mode 100644 packages/material/scss/chat/_variables.scss diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 01249876fc0..1c1645543a7 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -2788,87 +2788,6 @@ $scheduler-current-time-color: #ff0000 !default; $scheduler-nonwork-bg: try-shade( $component-bg, .5 ) !default; -// Chat -$chat-padding-x: 16px !default; -$chat-padding-y: 16px !default; -$chat-border-width: 1px !default; -$chat-font-family: $font-family !default; -$chat-font-size: $font-size !default; -$chat-line-height: $line-height !default; - -$chat-item-spacing-x: 8px !default; -$chat-item-spacing-y: 16px !default; - -$chat-message-list-padding-x: $chat-padding-x !default; -$chat-message-list-padding-y: $chat-padding-y !default; -$chat-message-list-spacing: $chat-item-spacing-y !default; - -$chat-bubble-padding-x: 16px !default; -$chat-bubble-padding-y: 8px !default; -$chat-bubble-spacing: 2px !default; -$chat-bubble-line-height: 1.25 !default; - -$chat-bubble-border-radius: 12px !default; -$chat-bubble-border-radius-sm: 2px !default; - -$chat-avatar-size: 32px !default; -$chat-avatar-spacing: $chat-item-spacing-x !default; - -$chat-message-box-padding-x: $chat-padding-x !default; -$chat-message-box-padding-y: 10px !default; - -$chat-toolbar-padding-x: $chat-padding-x !default; -$chat-toolbar-padding-y: 10px !default; -$chat-toolbar-spacing: 20px !default; -$chat-toolbar-bg: $toolbar-bg !default; -$chat-toolbar-text: $toolbar-text !default; -$chat-toolbar-border: inherit !default; - -$chat-quick-reply-padding-x: 12px !default; -$chat-quick-reply-padding-y: 8px !default; -$chat-quick-reply-spacing: 8px !default; -$chat-quick-reply-line-height: $chat-bubble-line-height !default; - - -$chat-bg: $app-bg !default; -$chat-text: $app-text !default; -$chat-border: $app-border !default; - -$chat-bubble-bg: $button-bg !default; -$chat-bubble-text: $button-text !default; -$chat-bubble-border: $chat-bubble-bg !default; -$chat-bubble-shadow: none !default; -$chat-bubble-hover-shadow: none !default; -$chat-bubble-selected-shadow: none !default; - -$chat-alt-bubble-bg: $primary !default; -$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; -$chat-alt-bubble-border: $chat-alt-bubble-bg !default; -$chat-alt-bubble-shadow: none !default; -$chat-alt-bubble-hover-shadow: none !default; -$chat-alt-bubble-selected-shadow: none !default; - -$chat-quick-reply-bg: transparent !default; -$chat-quick-reply-text: $primary !default; -$chat-quick-reply-border: $primary !default; - -$chat-quick-reply-hover-bg: $primary !default; -$chat-quick-reply-hover-text: $primary-contrast !default; -$chat-quick-reply-hover-border: $primary !default; - -$chat-message-box-bg: $input-bg !default; -$chat-message-box-text: $input-text !default; -$chat-message-box-border: inherit !default; -$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; - -$chat-message-box-button-hover-text: $primary !default; - -$chat-toolbar-box-button-hover-text: $primary !default; -$chat-toolbar-box-button-hover-bg: none !default; - -$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; - - // Media player $mediaplayer-border-width: 1px !default; $mediaplayer-font-family: $font-family !default; diff --git a/packages/bootstrap/scss/chat/_index.scss b/packages/bootstrap/scss/chat/_index.scss index 0cef7d8b92c..24a93650b35 100644 --- a/packages/bootstrap/scss/chat/_index.scss +++ b/packages/bootstrap/scss/chat/_index.scss @@ -10,5 +10,6 @@ // Component +@import "_variables.scss"; @import "_layout.scss"; @import "_theme.scss"; diff --git a/packages/bootstrap/scss/chat/_variables.scss b/packages/bootstrap/scss/chat/_variables.scss new file mode 100644 index 00000000000..efa03d74919 --- /dev/null +++ b/packages/bootstrap/scss/chat/_variables.scss @@ -0,0 +1,79 @@ +// Chat +$chat-padding-x: 16px !default; +$chat-padding-y: 16px !default; +$chat-border-width: 1px !default; +$chat-font-family: $font-family !default; +$chat-font-size: $font-size !default; +$chat-line-height: $line-height !default; + +$chat-item-spacing-x: 8px !default; +$chat-item-spacing-y: 16px !default; + +$chat-message-list-padding-x: $chat-padding-x !default; +$chat-message-list-padding-y: $chat-padding-y !default; +$chat-message-list-spacing: $chat-item-spacing-y !default; + +$chat-bubble-padding-x: 16px !default; +$chat-bubble-padding-y: 8px !default; +$chat-bubble-spacing: 2px !default; +$chat-bubble-line-height: 1.25 !default; + +$chat-bubble-border-radius: 12px !default; +$chat-bubble-border-radius-sm: 2px !default; + +$chat-avatar-size: 32px !default; +$chat-avatar-spacing: $chat-item-spacing-x !default; + +$chat-message-box-padding-x: $chat-padding-x !default; +$chat-message-box-padding-y: 10px !default; + +$chat-toolbar-padding-x: $chat-padding-x !default; +$chat-toolbar-padding-y: 10px !default; +$chat-toolbar-spacing: 20px !default; +$chat-toolbar-bg: $toolbar-bg !default; +$chat-toolbar-text: $toolbar-text !default; +$chat-toolbar-border: inherit !default; + +$chat-quick-reply-padding-x: 12px !default; +$chat-quick-reply-padding-y: 8px !default; +$chat-quick-reply-spacing: 8px !default; +$chat-quick-reply-line-height: $chat-bubble-line-height !default; + + +$chat-bg: $app-bg !default; +$chat-text: $app-text !default; +$chat-border: $app-border !default; + +$chat-bubble-bg: $button-bg !default; +$chat-bubble-text: $button-text !default; +$chat-bubble-border: $chat-bubble-bg !default; +$chat-bubble-shadow: none !default; +$chat-bubble-hover-shadow: none !default; +$chat-bubble-selected-shadow: none !default; + +$chat-alt-bubble-bg: $primary !default; +$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; +$chat-alt-bubble-border: $chat-alt-bubble-bg !default; +$chat-alt-bubble-shadow: none !default; +$chat-alt-bubble-hover-shadow: none !default; +$chat-alt-bubble-selected-shadow: none !default; + +$chat-quick-reply-bg: transparent !default; +$chat-quick-reply-text: $primary !default; +$chat-quick-reply-border: $primary !default; + +$chat-quick-reply-hover-bg: $primary !default; +$chat-quick-reply-hover-text: $primary-contrast !default; +$chat-quick-reply-hover-border: $primary !default; + +$chat-message-box-bg: $input-bg !default; +$chat-message-box-text: $input-text !default; +$chat-message-box-border: inherit !default; +$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; + +$chat-message-box-button-hover-text: $primary !default; + +$chat-toolbar-box-button-hover-text: $primary !default; +$chat-toolbar-box-button-hover-bg: none !default; + +$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss index 65e9f0e8f15..c3e4da0ac80 100644 --- a/packages/classic/scss/_variables.scss +++ b/packages/classic/scss/_variables.scss @@ -2764,91 +2764,6 @@ $scheduler-current-time-color: #ff0000 !default; $scheduler-nonwork-bg: try-shade( $component-bg, .5 ) !default; -// Chat -$chat-padding-x: 16px !default; -$chat-padding-y: 16px !default; -$chat-border-width: 1px !default; -$chat-font-family: $font-family !default; -$chat-font-size: $font-size !default; -$chat-line-height: $line-height !default; - -$chat-item-spacing-x: 8px !default; -$chat-item-spacing-y: 16px !default; - -$chat-message-list-padding-x: $chat-padding-x !default; -$chat-message-list-padding-y: $chat-padding-y !default; -$chat-message-list-spacing: $chat-item-spacing-y !default; - -$chat-bubble-padding-x: 12px !default; -$chat-bubble-padding-y: 8px !default; -$chat-bubble-spacing: 2px !default; -$chat-bubble-line-height: 18px !default; - -$chat-bubble-border-radius: 12px !default; -$chat-bubble-border-radius-sm: 2px !default; - -$chat-avatar-size: 32px !default; -$chat-avatar-spacing: $chat-item-spacing-x !default; - -$chat-message-box-padding-x: $chat-padding-x !default; -$chat-message-box-padding-y: 10px !default; - -$chat-toolbar-padding-x: $chat-padding-x !default; -$chat-toolbar-padding-y: 10px !default; -$chat-toolbar-spacing: 20px !default; -$chat-toolbar-bg: $toolbar-bg !default; -$chat-toolbar-text: $toolbar-text !default; -$chat-toolbar-border: inherit !default; - -$chat-quick-reply-padding-x: 12px !default; -$chat-quick-reply-padding-y: 8px !default; -$chat-quick-reply-spacing: 8px !default; -$chat-quick-reply-line-height: $chat-bubble-line-height !default; - - -$chat-bg: $app-bg !default; -$chat-text: $app-text !default; -$chat-border: $app-border !default; - -$chat-bubble-bg: $component-bg !default; -$chat-bubble-text: $component-text !default; -$chat-bubble-border: $chat-bubble-bg !default; -$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default; -$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default; -$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default; - -$chat-alt-bubble-bg: $primary !default; -$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; -$chat-alt-bubble-border: $chat-alt-bubble-bg !default; -$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; -$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; -$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default; - -$chat-quick-reply-bg: transparent !default; -$chat-quick-reply-text: $primary !default; -$chat-quick-reply-border: $primary !default; - -$chat-quick-reply-hover-bg: $primary !default; -$chat-quick-reply-hover-text: $primary-contrast !default; -$chat-quick-reply-hover-border: $primary !default; - -$chat-message-box-bg: $input-bg !default; -$chat-message-box-text: $input-text !default; -$chat-message-box-border: inherit !default; -$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; - -$chat-message-box-button-hover-text: $primary !default; - -$chat-toolbar-box-bg: $toolbar-bg !default; -$chat-toolbar-box-text: $toolbar-text !default; -$chat-toolbar-box-border: inherit !default; - -$chat-toolbar-box-button-hover-text: $primary !default; -$chat-toolbar-box-button-hover-bg: none !default; - -$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; - - // Media player $mediaplayer-border-width: 1px !default; $mediaplayer-font-family: $font-family !default; diff --git a/packages/classic/scss/chat/_index.scss b/packages/classic/scss/chat/_index.scss index ac2a77760f4..cfa89cec171 100644 --- a/packages/classic/scss/chat/_index.scss +++ b/packages/classic/scss/chat/_index.scss @@ -1,3 +1,4 @@ // Component +@import "_variables.scss"; @import "~@progress/kendo-theme-default/scss/chat/_layout.scss"; @import "~@progress/kendo-theme-default/scss/chat/_theme.scss"; diff --git a/packages/classic/scss/chat/_variables.scss b/packages/classic/scss/chat/_variables.scss new file mode 100644 index 00000000000..12199be6075 --- /dev/null +++ b/packages/classic/scss/chat/_variables.scss @@ -0,0 +1,83 @@ +// Chat +$chat-padding-x: 16px !default; +$chat-padding-y: 16px !default; +$chat-border-width: 1px !default; +$chat-font-family: $font-family !default; +$chat-font-size: $font-size !default; +$chat-line-height: $line-height !default; + +$chat-item-spacing-x: 8px !default; +$chat-item-spacing-y: 16px !default; + +$chat-message-list-padding-x: $chat-padding-x !default; +$chat-message-list-padding-y: $chat-padding-y !default; +$chat-message-list-spacing: $chat-item-spacing-y !default; + +$chat-bubble-padding-x: 12px !default; +$chat-bubble-padding-y: 8px !default; +$chat-bubble-spacing: 2px !default; +$chat-bubble-line-height: 18px !default; + +$chat-bubble-border-radius: 12px !default; +$chat-bubble-border-radius-sm: 2px !default; + +$chat-avatar-size: 32px !default; +$chat-avatar-spacing: $chat-item-spacing-x !default; + +$chat-message-box-padding-x: $chat-padding-x !default; +$chat-message-box-padding-y: 10px !default; + +$chat-toolbar-padding-x: $chat-padding-x !default; +$chat-toolbar-padding-y: 10px !default; +$chat-toolbar-spacing: 20px !default; +$chat-toolbar-bg: $toolbar-bg !default; +$chat-toolbar-text: $toolbar-text !default; +$chat-toolbar-border: inherit !default; + +$chat-quick-reply-padding-x: 12px !default; +$chat-quick-reply-padding-y: 8px !default; +$chat-quick-reply-spacing: 8px !default; +$chat-quick-reply-line-height: $chat-bubble-line-height !default; + + +$chat-bg: $app-bg !default; +$chat-text: $app-text !default; +$chat-border: $app-border !default; + +$chat-bubble-bg: $component-bg !default; +$chat-bubble-text: $component-text !default; +$chat-bubble-border: $chat-bubble-bg !default; +$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default; +$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default; +$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default; + +$chat-alt-bubble-bg: $primary !default; +$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; +$chat-alt-bubble-border: $chat-alt-bubble-bg !default; +$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; +$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; +$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default; + +$chat-quick-reply-bg: transparent !default; +$chat-quick-reply-text: $primary !default; +$chat-quick-reply-border: $primary !default; + +$chat-quick-reply-hover-bg: $primary !default; +$chat-quick-reply-hover-text: $primary-contrast !default; +$chat-quick-reply-hover-border: $primary !default; + +$chat-message-box-bg: $input-bg !default; +$chat-message-box-text: $input-text !default; +$chat-message-box-border: inherit !default; +$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; + +$chat-message-box-button-hover-text: $primary !default; + +$chat-toolbar-box-bg: $toolbar-bg !default; +$chat-toolbar-box-text: $toolbar-text !default; +$chat-toolbar-box-border: inherit !default; + +$chat-toolbar-box-button-hover-text: $primary !default; +$chat-toolbar-box-button-hover-bg: none !default; + +$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index c278a5a454c..9a942d56866 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -2807,87 +2807,6 @@ $scheduler-current-time-color: #ff0000 !default; $scheduler-nonwork-bg: try-shade( $component-bg, .5 ) !default; -// Chat -$chat-padding-x: 16px !default; -$chat-padding-y: 16px !default; -$chat-border-width: 1px !default; -$chat-font-family: $font-family !default; -$chat-font-size: $font-size !default; -$chat-line-height: $line-height !default; - -$chat-item-spacing-x: 8px !default; -$chat-item-spacing-y: 16px !default; - -$chat-message-list-padding-x: $chat-padding-x !default; -$chat-message-list-padding-y: $chat-padding-y !default; -$chat-message-list-spacing: $chat-item-spacing-y !default; - -$chat-bubble-padding-x: 12px !default; -$chat-bubble-padding-y: 8px !default; -$chat-bubble-spacing: 2px !default; -$chat-bubble-line-height: 18px !default; - -$chat-bubble-border-radius: 12px !default; -$chat-bubble-border-radius-sm: 2px !default; - -$chat-avatar-size: 32px !default; -$chat-avatar-spacing: $chat-item-spacing-x !default; - -$chat-message-box-padding-x: $chat-padding-x !default; -$chat-message-box-padding-y: 10px !default; - -$chat-toolbar-padding-x: $chat-padding-x !default; -$chat-toolbar-padding-y: 10px !default; -$chat-toolbar-spacing: 20px !default; -$chat-toolbar-bg: $toolbar-bg !default; -$chat-toolbar-text: $toolbar-text !default; -$chat-toolbar-border: inherit !default; - -$chat-quick-reply-padding-x: 12px !default; -$chat-quick-reply-padding-y: 8px !default; -$chat-quick-reply-spacing: 8px !default; -$chat-quick-reply-line-height: $chat-bubble-line-height !default; - - -$chat-bg: $app-bg !default; -$chat-text: $app-text !default; -$chat-border: $app-border !default; - -$chat-bubble-bg: $component-bg !default; -$chat-bubble-text: $component-text !default; -$chat-bubble-border: $chat-bubble-bg !default; -$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default; -$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default; -$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default; - -$chat-alt-bubble-bg: $primary !default; -$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; -$chat-alt-bubble-border: $chat-alt-bubble-bg !default; -$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; -$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; -$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default; - -$chat-quick-reply-bg: transparent !default; -$chat-quick-reply-text: $primary !default; -$chat-quick-reply-border: $primary !default; - -$chat-quick-reply-hover-bg: $primary !default; -$chat-quick-reply-hover-text: $primary-contrast !default; -$chat-quick-reply-hover-border: $primary !default; - -$chat-message-box-bg: $input-bg !default; -$chat-message-box-text: $input-text !default; -$chat-message-box-border: inherit !default; -$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; - -$chat-message-box-button-hover-text: $primary !default; - -$chat-toolbar-box-button-hover-text: $primary !default; -$chat-toolbar-box-button-hover-bg: none !default; - -$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; - - // Media player $mediaplayer-border-width: 1px !default; $mediaplayer-font-family: $font-family !default; diff --git a/packages/default/scss/card/_layout.scss b/packages/default/scss/card/_layout.scss index 1013de58be8..1e1fc0af251 100644 --- a/packages/default/scss/card/_layout.scss +++ b/packages/default/scss/card/_layout.scss @@ -276,11 +276,7 @@ } .k-card-deck-scrollwrap { - margin-right: -$chat-message-list-padding-y; - margin-left: -$chat-message-list-padding-y; - padding-left: $chat-message-list-padding-y; padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar) - padding-right: $chat-message-list-padding-y; width: 100%; box-sizing: content-box; display: flex; diff --git a/packages/default/scss/chat/_index.scss b/packages/default/scss/chat/_index.scss index 0cef7d8b92c..24a93650b35 100644 --- a/packages/default/scss/chat/_index.scss +++ b/packages/default/scss/chat/_index.scss @@ -10,5 +10,6 @@ // Component +@import "_variables.scss"; @import "_layout.scss"; @import "_theme.scss"; diff --git a/packages/default/scss/chat/_layout.scss b/packages/default/scss/chat/_layout.scss index c068d959457..3b3bedf6b76 100644 --- a/packages/default/scss/chat/_layout.scss +++ b/packages/default/scss/chat/_layout.scss @@ -325,6 +325,13 @@ width: 200px; } + .k-chat .k-card-deck-scrollwrap { + margin-right: -$chat-message-list-padding-y; + margin-left: -$chat-message-list-padding-y; + padding-left: $chat-message-list-padding-y; + padding-right: $chat-message-list-padding-y; + } + .k-chat .k-card-deck-scrollwrap > .k-card-deck { // hide scrollbar in chat $scrollbar-size: 20px; diff --git a/packages/default/scss/chat/_variables.scss b/packages/default/scss/chat/_variables.scss new file mode 100644 index 00000000000..7bc24af99b4 --- /dev/null +++ b/packages/default/scss/chat/_variables.scss @@ -0,0 +1,79 @@ +// Chat +$chat-padding-x: 16px !default; +$chat-padding-y: 16px !default; +$chat-border-width: 1px !default; +$chat-font-family: $font-family !default; +$chat-font-size: $font-size !default; +$chat-line-height: $line-height !default; + +$chat-item-spacing-x: 8px !default; +$chat-item-spacing-y: 16px !default; + +$chat-message-list-padding-x: $chat-padding-x !default; +$chat-message-list-padding-y: $chat-padding-y !default; +$chat-message-list-spacing: $chat-item-spacing-y !default; + +$chat-bubble-padding-x: 12px !default; +$chat-bubble-padding-y: 8px !default; +$chat-bubble-spacing: 2px !default; +$chat-bubble-line-height: 18px !default; + +$chat-bubble-border-radius: 12px !default; +$chat-bubble-border-radius-sm: 2px !default; + +$chat-avatar-size: 32px !default; +$chat-avatar-spacing: $chat-item-spacing-x !default; + +$chat-message-box-padding-x: $chat-padding-x !default; +$chat-message-box-padding-y: 10px !default; + +$chat-toolbar-padding-x: $chat-padding-x !default; +$chat-toolbar-padding-y: 10px !default; +$chat-toolbar-spacing: 20px !default; +$chat-toolbar-bg: $toolbar-bg !default; +$chat-toolbar-text: $toolbar-text !default; +$chat-toolbar-border: inherit !default; + +$chat-quick-reply-padding-x: 12px !default; +$chat-quick-reply-padding-y: 8px !default; +$chat-quick-reply-spacing: 8px !default; +$chat-quick-reply-line-height: $chat-bubble-line-height !default; + + +$chat-bg: $app-bg !default; +$chat-text: $app-text !default; +$chat-border: $app-border !default; + +$chat-bubble-bg: $component-bg !default; +$chat-bubble-text: $component-text !default; +$chat-bubble-border: $chat-bubble-bg !default; +$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default; +$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default; +$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default; + +$chat-alt-bubble-bg: $primary !default; +$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; +$chat-alt-bubble-border: $chat-alt-bubble-bg !default; +$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; +$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; +$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default; + +$chat-quick-reply-bg: transparent !default; +$chat-quick-reply-text: $primary !default; +$chat-quick-reply-border: $primary !default; + +$chat-quick-reply-hover-bg: $primary !default; +$chat-quick-reply-hover-text: $primary-contrast !default; +$chat-quick-reply-hover-border: $primary !default; + +$chat-message-box-bg: $input-bg !default; +$chat-message-box-text: $input-text !default; +$chat-message-box-border: inherit !default; +$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; + +$chat-message-box-button-hover-text: $primary !default; + +$chat-toolbar-box-button-hover-text: $primary !default; +$chat-toolbar-box-button-hover-bg: none !default; + +$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss index 54a08fb9289..3a57b1dac72 100644 --- a/packages/material/scss/_variables.scss +++ b/packages/material/scss/_variables.scss @@ -2841,86 +2841,6 @@ $scheduler-current-time-color: #ff0000 !default; $scheduler-nonwork-bg: mix( $component-text, $component-bg, 3% ) !default; -// Chat -$chat-padding-x: 16px !default; -$chat-padding-y: 16px !default; -$chat-border-width: 1px !default; -$chat-font-family: $font-family !default; -$chat-font-size: $font-size !default; -$chat-line-height: $line-height !default; - -$chat-item-spacing-x: 8px !default; -$chat-item-spacing-y: 16px !default; - -$chat-message-list-padding-x: $chat-padding-x !default; -$chat-message-list-padding-y: $chat-padding-y !default; -$chat-message-list-spacing: $chat-item-spacing-y !default; - -$chat-bubble-padding-x: 12px !default; -$chat-bubble-padding-y: 8px !default; -$chat-bubble-spacing: 2px !default; -$chat-bubble-line-height: 1.25 !default; - -$chat-bubble-border-radius: 12px !default; -$chat-bubble-border-radius-sm: 2px !default; - -$chat-avatar-size: 32px !default; -$chat-avatar-spacing: $chat-item-spacing-x !default; - -$chat-message-box-padding-x: $chat-padding-x !default; -$chat-message-box-padding-y: 10px !default; - -$chat-toolbar-padding-x: $chat-padding-x !default; -$chat-toolbar-padding-y: 10px !default; -$chat-toolbar-spacing: 20px !default; -$chat-toolbar-bg: try-shade( $button-bg, .5 ) !default; -$chat-toolbar-text: $toolbar-text !default; -$chat-toolbar-border: inherit !default; - -$chat-quick-reply-padding-x: 12px !default; -$chat-quick-reply-padding-y: 8px !default; -$chat-quick-reply-spacing: 8px !default; -$chat-quick-reply-line-height: $chat-bubble-line-height !default; - - -$chat-bg: $app-bg !default; -$chat-text: $component-text !default; -$chat-border: $component-border !default; - -$chat-bubble-bg: $component-bg !default; -$chat-bubble-text: $component-text !default; -$chat-bubble-border: $chat-bubble-bg !default; -$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default; -$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default; -$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default; - -$chat-alt-bubble-bg: $primary !default; -$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; -$chat-alt-bubble-border: $chat-alt-bubble-bg !default; -$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; -$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; -$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default; - -$chat-quick-reply-bg: transparent !default; -$chat-quick-reply-text: $primary !default; -$chat-quick-reply-border: $primary !default; - -$chat-quick-reply-hover-bg: $primary !default; -$chat-quick-reply-hover-text: $primary-contrast !default; -$chat-quick-reply-hover-border: $primary !default; - -$chat-message-box-bg: white !default; -$chat-message-box-text: $input-text !default; -$chat-message-box-border: inherit !default; -$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; - -$chat-message-box-button-hover-text: $primary !default; - -$chat-toolbar-box-button-hover-text: $primary !default; -$chat-toolbar-box-button-hover-bg: none !default; - -$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default; - // Media player $mediaplayer-border-width: 1px !default; $mediaplayer-font-family: $font-family !default; diff --git a/packages/material/scss/chat/_index.scss b/packages/material/scss/chat/_index.scss index 0cef7d8b92c..24a93650b35 100644 --- a/packages/material/scss/chat/_index.scss +++ b/packages/material/scss/chat/_index.scss @@ -10,5 +10,6 @@ // Component +@import "_variables.scss"; @import "_layout.scss"; @import "_theme.scss"; diff --git a/packages/material/scss/chat/_variables.scss b/packages/material/scss/chat/_variables.scss new file mode 100644 index 00000000000..4f9307ac4f3 --- /dev/null +++ b/packages/material/scss/chat/_variables.scss @@ -0,0 +1,79 @@ +// Chat +$chat-padding-x: 16px !default; +$chat-padding-y: 16px !default; +$chat-border-width: 1px !default; +$chat-font-family: $font-family !default; +$chat-font-size: $font-size !default; +$chat-line-height: $line-height !default; + +$chat-item-spacing-x: 8px !default; +$chat-item-spacing-y: 16px !default; + +$chat-message-list-padding-x: $chat-padding-x !default; +$chat-message-list-padding-y: $chat-padding-y !default; +$chat-message-list-spacing: $chat-item-spacing-y !default; + +$chat-bubble-padding-x: 12px !default; +$chat-bubble-padding-y: 8px !default; +$chat-bubble-spacing: 2px !default; +$chat-bubble-line-height: 1.25 !default; + +$chat-bubble-border-radius: 12px !default; +$chat-bubble-border-radius-sm: 2px !default; + +$chat-avatar-size: 32px !default; +$chat-avatar-spacing: $chat-item-spacing-x !default; + +$chat-message-box-padding-x: $chat-padding-x !default; +$chat-message-box-padding-y: 10px !default; + +$chat-toolbar-padding-x: $chat-padding-x !default; +$chat-toolbar-padding-y: 10px !default; +$chat-toolbar-spacing: 20px !default; +$chat-toolbar-bg: try-shade( $button-bg, .5 ) !default; +$chat-toolbar-text: $toolbar-text !default; +$chat-toolbar-border: inherit !default; + +$chat-quick-reply-padding-x: 12px !default; +$chat-quick-reply-padding-y: 8px !default; +$chat-quick-reply-spacing: 8px !default; +$chat-quick-reply-line-height: $chat-bubble-line-height !default; + + +$chat-bg: $app-bg !default; +$chat-text: $component-text !default; +$chat-border: $component-border !default; + +$chat-bubble-bg: $component-bg !default; +$chat-bubble-text: $component-text !default; +$chat-bubble-border: $chat-bubble-bg !default; +$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default; +$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default; +$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default; + +$chat-alt-bubble-bg: $primary !default; +$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default; +$chat-alt-bubble-border: $chat-alt-bubble-bg !default; +$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; +$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default; +$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default; + +$chat-quick-reply-bg: transparent !default; +$chat-quick-reply-text: $primary !default; +$chat-quick-reply-border: $primary !default; + +$chat-quick-reply-hover-bg: $primary !default; +$chat-quick-reply-hover-text: $primary-contrast !default; +$chat-quick-reply-hover-border: $primary !default; + +$chat-message-box-bg: white !default; +$chat-message-box-text: $input-text !default; +$chat-message-box-border: inherit !default; +$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default; + +$chat-message-box-button-hover-text: $primary !default; + +$chat-toolbar-box-button-hover-text: $primary !default; +$chat-toolbar-box-button-hover-bg: none !default; + +$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;