diff options
Diffstat (limited to 'addons/mail/static/src/components/composer/composer.scss')
| -rw-r--r-- | addons/mail/static/src/components/composer/composer.scss | 278 |
1 files changed, 278 insertions, 0 deletions
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss new file mode 100644 index 00000000000..98557ec1ce9 --- /dev/null +++ b/addons/mail/static/src/components/composer/composer.scss @@ -0,0 +1,278 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Composer { + display: grid; + grid-template-areas: + "sidebar-header core-header" + "sidebar-main core-main" + "sidebar-footer core-footer"; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + + &.o-has-current-partner-avatar { + grid-template-columns: 50px 1fr; + padding: map-get($spacers, 0) map-get($spacers, 3) map-get($spacers, 1) map-get($spacers, 1); + + &:not(.o-has-footer) { + padding-bottom: 20px; + } + + &:not(.o-has-header) { + padding-top: 20px; + } + } +} + +.o_Composer_actionButtons { + &.o-composer-is-compact { + display: flex; + } + &:not(.o-composer-is-compact) { + margin-top: 10px; + } +} + +.o_Composer_attachmentList { + flex: 1 1 auto; +} + +.o_Composer_buttons { + display: flex; + align-items: stretch; + flex: 0 0 auto; + height: 41px; // match minimal-height of input, including border width + + &:not(.o-composer-is-compact) { + border: 0; + height: auto; + padding: 0 10px; + width: 100%; + } + + &.o-mobile { + height: 51px; // mobile padding + } +} + +.o_Composer_coreFooter { + grid-area: core-footer; + + &:not(.o-composer-is-compact) { + margin-left: 0; + } +} + +.o_Composer_coreHeader { + grid-area: core-header; +} + +.o_Composer_coreMain { + grid-area: core-main; + min-width: 0; + display: flex; + flex-wrap: nowrap; + align-items: flex-start; + flex: 1 1 auto; + + &:not(.o-composer-is-compact) { + flex-direction: column; + } +} + +.o_Composer_currentPartnerAvatar { + width: 36px; + height: 36px; +} + +.o_Composer_followers, +.o_Composer_suggestedPartners { + flex: 0 0 100%; + margin-bottom: $o-mail-chatter-gap * 0.5; +} + +.o_Composer_primaryToolButtons { + display: flex; + align-items: center; +} + +.o_Composer_sidebarMain { + grid-area: sidebar-main; + justify-self: center; +} + +.o_Composer_textInput { + flex: 1 1 auto; + align-self: stretch; + + &:not(.o-composer-is-compact) { + border: 0; + min-height: 40px; + + .note-editable { + min-height: 40px; + } + } +} + +.o_Composer_threadTextualTypingStatus { + font-size: $font-size-sm; + overflow: hidden; + text-overflow: ellipsis; + + &:before { + // invisible character so that typing status bar has constant height, regardless of text content. + content: "\200b"; /* unicode zero width space character */ + } +} + +.o_Composer_toolButton { + margin: 0 2px; + + &:not(.o-mobile) { + margin-top: 2px; + margin-bottom: 2px; + } +} + +.o_Composer_toolButtons { + display: flex; + + &:not(.o-composer-is-compact) { + flex-direction: row; + justify-content: space-between; + flex: 100%; + } + + &:not(:last-child) .o_Composer_toolButton:last-child { + margin-right: 5px; + } +} + +.o_Composer_toolButtonSeparator { + flex: 0 0 auto; + margin-top: 5px; + margin-bottom: 5px; + margin-right: 5px; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Composer { + background-color: lighten(gray('300'), 7%); + + &.o-has-current-partner-avatar { + + .o_Composer_actionButtons.o-composer-is-compact > *:last-child { + border-radius: 0 10px 10px 0; + } + + .o_Composer_textInput { + border-radius: 10px 0 0 10px; + + > .note-editor { + border-radius: 10px 0 0 10px; + + > .note-editing-area { + border-radius: 10px 0 0 10px; + } + } + } + } +} + +.o_Composer_button { + color: gray('600'); + + &.o-open{ + background-color: gray('200'); + } + + &.o-composer-is-compact { + border-left: none; + border-radius: 0 3px 3px 0; + } +} + +// TODO FIXME o-open on the button should be enough, https://github.com/odoo/owl/issues/693 +.o_is_open { + .o_Composer_button { + background-color: gray('200'); + } +} + +.o_Composer_buttonDiscard { + border: 1px solid lighten(gray('400'), 5%); +} + +.o_Composer_buttons { + border: 0; +} + +.o_Composer_buttonSend { + border: 1px solid darken($o-brand-primary, 5%); + + &:disabled { + // enforce this style (override jQuery style) + border: 1px solid darken($o-brand-primary, 5%); + + &.o-composer-is-compact { + border-left: none; + } + } + + &:not(:last-child) { + border-right: none; + } +} + +.o_Composer_coreMain:not(.o-composer-is-compact) { + background: white; + border-radius: 5px; + border: 1px solid lighten(gray('400'), 5%); +} + +.o_Composer_textInput { + appearance: none; + outline: none; + background-color: white; + border: 0; + border-top: 1px solid lighten(gray('400'), 5%); + border-bottom: 1px solid lighten(gray('400'), 5%); + border-left: 1px solid lighten(gray('400'), 5%); + + &:not(.o-composer-is-compact) { + border: 0; + } +} + +.o_Composer_toolButton { + border: 0; + + &:hover { + // enforce this style (webclient btn-secondary) + border: 0; + } +} + +.o_Composer_toolButtons { + background-color: white; + border-top: 1px solid lighten(gray('400'), 5%); + border-bottom: 1px solid lighten(gray('400'), 5%); + + &:not(.o-composer-is-compact) { + border-bottom: 0; + border-radius: initial; + } + + &:last-child:not(.o-composer-has-current-partner-avatar) { + border-right: 1px solid lighten(gray('400'), 5%); + } +} + +.o_Composer_toolButtonSeparator { + border-left: 1px solid lighten(gray('400'), 5%); +} |