From 4185cc37feffcf7c4e7268cf0d63bf759638857e Mon Sep 17 00:00:00 2001 From: iRouge Date: Thu, 19 Feb 2015 22:05:53 -0500 Subject: [PATCH] Style the plain-text Mail editor Style Contacts Style Contact editor (buggy) Change postcss config --- .../ContactsUI/UIxContactEditorTemplate.wox | 730 ++++++++++-------- .../ContactsUI/UIxContactFoldersView.wox | 142 ++-- .../ContactsUI/UIxContactViewTemplate.wox | 8 +- UI/Templates/MailerUI/UIxMailEditor.wox | 16 +- UI/Templates/MailerUI/UIxMailMainFrame.wox | 2 +- UI/WebServerResources/Gruntfile.js | 6 +- UI/WebServerResources/js/Common/ui.js | 2 +- .../autoScrollList/autoScrollList.scss | 9 +- .../scss/components/card/card.scss | 1 + .../scss/components/input/input.scss | 19 +- .../scss/components/subheader/subheader.scss | 6 +- .../scss/components/toolbar/toolbar.scss | 1 + .../scss/core/typography/typography.scss | 49 +- .../scss/views/ContactsUI.scss | 698 +---------------- .../scss/views/MailerUI.scss | 30 +- .../scss/views/MessageEditorUI.scss | 8 +- UI/WebServerResources/scss/views/_view.scss | 2 +- 17 files changed, 612 insertions(+), 1117 deletions(-) diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox index 6a1111991..3685f6de8 100644 --- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox +++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox @@ -1,352 +1,424 @@ - +
-

+

{{card.$description()}} {{category.value}}
-
- - - - - - -
- -
- - - - -
- -
- - - - -
- -
- - - - -
- -
- - - - -
- -
- - - + +
+ + +

+ +

+
+
+
+ +
+ +

+ +

+
+
+
+ +
+ +

+ +

+
+
+
+ +
+ +

+ +

- +
+
+
+ +
+ +

+ +

-
-
-
- - - -
- -
- -
-
- -
- -
-
-
- - - - -
-
-
- -
-
- -
+
+
+
+ +
+ +

+ +

+ +
+ + +
+
+
+ + + +
+
-
- -
-
- -
- -
+

+ +

- -
- - - - -
- - - - - - -
- -
- - - - - -
- -
-
-
- - - -
-
- -
-
- -
-
-
-
- - - - -
-
-
- -
-
-
- - - -
-
- -
-
- -
-
-
-
- - - - -
-
-
- -
-
-
- - - -
-
- -
-
- -
-
-
-
- - - - -
-
-
- -
-
-
- - - -
-
- -
-
- - - - - - - -
-
-
-
- - - - -
-
-
- -
-
- -
-
- -
-
- -
-
-
- - - +
+
+
+ + + - - - - - - - - - - -
-
- - - - - - - - -
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
- -
-
-
- - - -
-
- -
-
- -
-
-
-
- - - - -
-
-
-
+
- + + +
+
+
+ +
+
+ +
+
+

+ +

+
+
+
+ + +
+ + +
+ +
+ +
+ +
+
+

+ + +

+
+
+
+ +
+
+ + + + +
+
+ +
+ + +
+
+
+
+ + + +
+
+ +
+
+

+ +

+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+ + + +
+
+ +
+
+

+ +

+
+
+
+
+ + + + +
+
+
+
+ + +
+
+
+
+ + + +
+
+ +
+
+

+ +

+
+
+
+
+ + + + +
+
+
+
+ + +
+
+
+
+ + + +
+
+ +
+
+

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+
+
+
+ + + + +
+
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + +
+ +
+
+ + + + + + + + + +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + + +
+
+
+
+
+ diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index 16e157423..24862ed50 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -146,13 +146,14 @@ data-sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -
--> - - -

- {{activeUser.identification}} + + + +

+ {{activeUser.identification}}

- + Close
- -
- - - - -
- [[Contacts]] + +
+
+ + + + +
+ 15 +
- - - search - +
+ +
+
+
+
+
+
+ ALL + + + +
+
+
+
+ + +
+ + + +
+

Contacts

+
+ + + + +
+ +
+
+ +
+
{{currentCard.$preferredEmail()}}
+ +
+ + + + +
- - - - - - - - -
- -
-
- -
-
{{currentCard.$preferredEmail()}}
- -
- - - - - - - -
+ + - diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox index 545888531..b90a4a5ee 100644 --- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox +++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox @@ -8,8 +8,8 @@
-

-
{{card.$description()}} +

+
{{card.$description()}} {{category.value}}
@@ -17,10 +17,10 @@
- + - +
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox index a78655f71..6e9eb38b4 100644 --- a/UI/Templates/MailerUI/UIxMailEditor.wox +++ b/UI/Templates/MailerUI/UIxMailEditor.wox @@ -13,11 +13,12 @@ -
- -
+ + + {{identity}} + +

@@ -28,7 +29,8 @@ + label:placeholder="Add a recipient" + ng-focus="angular.element().triggerHandler('focus')"> @@ -80,7 +82,7 @@ data-ng-click="message.$save()"> - diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index dfd225ede..d3b31ef37 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -288,7 +288,7 @@ -
+
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js index 6c93364ad..0dbfb5609 100644 --- a/UI/WebServerResources/Gruntfile.js +++ b/UI/WebServerResources/Gruntfile.js @@ -15,11 +15,11 @@ module.exports = function(grunt) { }, postcss: { options: { - map: false, + map: true, processors: [ - require('autoprefixer-core')({browsers: '> 1%, last 2 versions, last 3 Firefox versions'}).postcss + require('autoprefixer-core')({browsers: '> 1%, last 2 versions, last 3 Firefox versions'}).postcss, // We may consider using css grace (https://github.com/cssdream/cssgrace) for larger support - //require('csswring').postcss + require('csswring').postcss ] }, dist: { diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js index c8c8ff156..177aa952a 100644 --- a/UI/WebServerResources/js/Common/ui.js +++ b/UI/WebServerResources/js/Common/ui.js @@ -77,7 +77,7 @@ 'default': '300', 'hue-1': '100', 'hue-2': '400', - 'hue-3': '700' + 'hue-3': 'A700' }) .accentColor('sogo-green') .backgroundColor('paper', { diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss index d1f4231ac..e415e6254 100644 --- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss +++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss @@ -10,7 +10,8 @@ // avoid overspecifying // todo: create new classes and refactor templates markup // ---------------------------------------------------------------------------- -[id='messagesList'] { +[id='messagesList'], +[id='contactsList'] { border-top: 44px solid transparent; // padding for the header.subheader, border-bottom: 2px solid transparent; //close to a hack z-index: 10; @@ -41,12 +42,14 @@ .sg { &-tile-content { @extend .md-tile-content; - .name { + .name, + .contact-email { font-weight: $sg-font-light; margin-top: 0; margin-bottom: 0; } - .subject { + .subject, + .contact-name { font-weight: $sg-font-medium; // dirty fix for vs-repeat damages max-width: 75%; diff --git a/UI/WebServerResources/scss/components/card/card.scss b/UI/WebServerResources/scss/components/card/card.scss index d14092022..77c884a6f 100644 --- a/UI/WebServerResources/scss/components/card/card.scss +++ b/UI/WebServerResources/scss/components/card/card.scss @@ -7,6 +7,7 @@ md-card { box-sizing: border-box; display: flex; flex-direction: column; + background-color: sg-color($sogoPaper, 50); box-shadow: $card-box-shadow; diff --git a/UI/WebServerResources/scss/components/input/input.scss b/UI/WebServerResources/scss/components/input/input.scss index ed7102563..8f26e0acb 100644 --- a/UI/WebServerResources/scss/components/input/input.scss +++ b/UI/WebServerResources/scss/components/input/input.scss @@ -96,4 +96,21 @@ md-input-container .bgroup { } .bgroup b { left-margin: -1.25em; -} \ No newline at end of file +} + +.PseudoField input { + flex: 1; + order: 2; + display: block; + + background: none; + padding-top: $input-padding-top; + padding-bottom: 0; + border-width: 0 0 $input-border-width-default 0; + line-height: $input-line-height; + -ms-flex-preferred-size: $input-line-height; //IE fix + + &:focus { + outline: none; + } +} diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss index 0301b4c9f..fa9e3e71d 100644 --- a/UI/WebServerResources/scss/components/subheader/subheader.scss +++ b/UI/WebServerResources/scss/components/subheader/subheader.scss @@ -6,11 +6,7 @@ background-color: transparent; z-index: auto; } -// WIdth for message list -// ---------------------------------------------------------------------------- -[id = "messagesList"] .sg-md-subheader { - transform: translateY(-100%); // Compensate the container top-margin -} + .sg-md-subheader { font-size: $sg-font-size-2; font-weight: $sg-font-medium; diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss index 916cde926..8e2f973e4 100644 --- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss +++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss @@ -10,6 +10,7 @@ md-toolbar { } header { flex-direction: row; + flex-wrap: wrap; align-items: stretch; justify-content: space-between; display: flex; diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss index 4157244ac..bbe07f771 100644 --- a/UI/WebServerResources/scss/core/typography/typography.scss +++ b/UI/WebServerResources/scss/core/typography/typography.scss @@ -221,23 +221,48 @@ $sg-font-bold: $sg-font-medium; // h elements definitions // ---------------------------------------------------------------------------- -$h1-font-size-Base: $sg-font-size-9; -$h1-margin-Base: 0; +$h1-font-size-base: $sg-font-size-9; +$h1-margin-base: 0; -$h2-font-size-Base: $sg-font-size-8; -$h2-margin-Base: 0; +$h2-font-size-base: $sg-font-size-8; +$h2-margin-base: 0; -$h3-font-size-Base: $sg-font-size-7; -$h3-margin-Base: 0; +$h3-font-size-base: $sg-font-size-7; +$h3-margin-base: 0; -$h4-font-size-Base: $sg-font-size-6; -$h4-margin-Base: 0; +$h4-font-size-base: $sg-font-size-6; +$h4-margin-base: 0; -$h5-font-size-Base: $sg-font-size-5; -$h5-margin-Base: 0; +$h5-font-size-base: $sg-font-size-5; +$h5-margin-base: 0; -$h6-font-size-Base: $sg-font-size-4; -$h6-margin-Base: 0; +$h6-font-size-base: $sg-font-size-4; +$h6-margin-base: 0; + +h1 { + font-size: $h1-font-size-base; + margin: $h1-margin-base; +} +h2 { + font-size: $h2-font-size-base; + margin: $h2-margin-base; +} +h3 { + font-size: $h3-font-size-base; + margin: $h3-margin-base; +} +h4 { + font-size: $h4-font-size-base; + margin: $h4-margin-base; +} +h5 { + font-size: $h5-font-size-base; + margin: $h5-margin-base; +} +h6 { + font-size: $h6-font-size-base; + margin: $h6-margin-base; +} /// Gogle Material Design Standard styles /// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles) diff --git a/UI/WebServerResources/scss/views/ContactsUI.scss b/UI/WebServerResources/scss/views/ContactsUI.scss index a0faefc9d..20f56f361 100644 --- a/UI/WebServerResources/scss/views/ContactsUI.scss +++ b/UI/WebServerResources/scss/views/ContactsUI.scss @@ -1,691 +1,15 @@ -@import "../core/functions"; +/*! ContactUI.scss */ -//$primary-color: #75B4BF; -//$topbar-link-bg-active: #75B4BF; -//$topbar-bg-color: $primary-color; -$module-color: #75B4BF; -$module-color: #C6C543; -$module-color: #6F5A73; // purple -$module-secondary-color: #8EC588; // light green -$module-secondary-color: #3D792A; // green -$module-secondary-color: #B996BF; -$module-secondary-color: #B59BB9; // light purple -$module-light-color: #F7ECFF; -$topbar-bg-color: $module-color; -$topbar-link-bg-active-hover: scale-color($module-secondary-color, $lightness: -14%); -$topbar-link-bg-active: $module-secondary-color; -$topbar-link-bg-hover: scale-color($module-color, $lightness: -14%); -//$topbar-link-font-size: rem-calc(12); - -//$off-canvas-link-text-size: rem-calc(12); - -//$table-head-font-size: rem-calc(12); -//$table-row-font-size: rem-calc(12); - -@import "foundation"; -//@import "foundation/components/grid"; -//@import "foundation/components/dropdown", "foundation/components/offcanvas", "foundation/components/top-bar"; -//@import "toolbars"; - -@mixin off-canvas-list { - list-style-type: none; - padding:0; - margin:0; - display: table; - width: 100%; - - li { - /* - +-----------------------------------------------+ - + li | - |+------+-----------------------------+--------+| - || i | form | span || - |+------+-----------------------------+--------+| - +-----------------------------------------------+ - */ - display: table-row; - transition: background 300ms ease; - width: 100%; - label { - display: block; - padding: $off-canvas-label-padding; - color: $off-canvas-label-color; - text-transform: $off-canvas-label-text-transform; - font-size: $off-canvas-label-font-size; - font-weight: $off-canvas-label-font-weight; - background: $off-canvas-label-bg; - border-top: $off-canvas-label-border-top; - border-bottom: $off-canvas-label-border-bottom; - margin: $off-canvas-label-margin; - } - >* { - display: table-cell; - padding: $off-canvas-link-padding; - color: $off-canvas-link-color; - } - >i, - >.icon { - //vertical-align: middle; // causes glitch when selecting row - border-left: 3px solid transparent; - width: 1px; - } - form { - margin: 0; - padding-left: 0; - padding-right: 0; - * { - color: $off-canvas-link-color; - display: block; - width: 100%; - padding: 0; - //padding-left: $off-canvas-link-padding; - } - input { - border: 0; - color: #333 !important; - font-size: 1rem; - height: $off-canvas-link-padding/2+1rem; - margin: 0; - } - } - &:hover { - background: scale-color($tabbar-bg, $lightness: -30%); - } - &._selected { - border: 0 !important; - >i { - border-left-color: $primary-color; - } - * { - color: #eee; - } - } - } +[id="contactsList"] { + width: $messageList-width; + max-width:$messageList-width; + flex: 1 0 auto; } -$total-columns: 13; -$column-gutter: 0; - -.folders-list { - @include off-canvas-wrap(); - ul { - @include off-canvas-list(); - } +[id = "contactsList"] .sg-md-subheader { + transform: translateY(-100%); // Compensate the container top-margin } - -.card-picture { - display: inline-block; - float: left; - width: 40px; - height: 40px; - border-radius: 20px; - color: $input-disabled-bg; - text-align: center; - vertical-align: center; - border: 1px solid $input-disabled-bg; - margin-right: 1em; - margin-left: 5px; - i { - font-size: 42px; - line-height: 36px; - } -} - -#pageContent { - @include grid-row($behavior: nest); - - #newListDrop { - a { - text-transform: uppercase; - &.tiny { - @include button-size($padding:$button-tny); - } - } - } - - #addressbooksList { - position: absolute; - top: $topbar-height; - bottom: 0; - background-color: #333; - @include grid-column($columns:13); //, $collapse:true); - @media #{$medium-up} { - @include grid-column($columns:3); - } - .newItemsToolbar { - margin-top: rem-calc(6); - text-align: center; - text-transform: uppercase; - } - .scrollview { - position: absolute; - overflow: auto; - overflow-x: hidden; - top: $topbar-height; - bottom: $topbar-height; - right: 0; - left: 0; - } - .buttonsToolbar { - border-top: $off-canvas-link-border-bottom; - position: absolute; - bottom: 0px; - width: 100%; - } - } - - #rightPanel { - #contactsList { - position: absolute; - overflow: auto; - overflow-x: hidden; - top: $topbar-height; - bottom: 0; - left: 23.07692%; - background-color: $f-dropdown-list-hover-bg; - @include grid-column($columns:13); - @media #{$medium-up} { - @include grid-column($columns:5); - } - ul { - margin: 0; - padding: 0; - li { - list-style-type: none; - //border-bottom: $topbar-divider-border-bottom; - width: 100%; - float: left; - clear: left; - //border: 2px solid #fff; - //-webkit-border-radius: 4px; - //-moz-border-radius: 4px; - //border-radius: 4px; - //transition: all 300ms ease; - background-color: $f-dropdown-list-hover-bg; - transition: background 300ms ease; - a { - display: block; - color: #666; - //border-bottom: 1px dotted #ddd; - //width: 100%; - //font-size: $table-row-font-size; - //line-height: $table-line-height; - line-height: rem-calc(24); - padding: $table-head-padding; - //padding: rem-calc(8 10 18); - //margin: 0 rem-calc(12); - .name { - margin: 0; - //font-size: $table-head-font-size; - color: $table-head-font-color; - font-weight: $table-head-font-weight; - } - } - &:hover, &:active { - background-color: $f-dropdown-list-hover-bg; - //background-color: scale-color($f-dropdown-list-hover-bg, $lightness: 28%); - background-color: #fff; - } - &._selected, &._selected span { - //background-color: $module-light-color; - //background-color: $sub-nav-active-bg-hover; - //background-color: $f-dropdown-list-hover-bg; - background-color: $module-color; - background-color: #fff; - //color: $module-color; - //color: $module-secondary-color; - .name { - //color: #fff; - } - } - } - } - } - #contactView { - position: absolute; - top: $topbar-height; - bottom: 0; - left: 61.53846%; - overflow: auto; - overflow-x: hidden; - border-left: $topbar-divider-border-bottom; - padding: $table-head-padding; - padding-top: 0; - @include grid-column($columns:13); - @media #{$medium-up} { - @include grid-column($columns:5); - } - h1, h2, h3, h4, h5, h6 { - margin-left: rem-calc(12); - margin-top: 0; - } - h1 { - margin-bottom: 0; - } - ul { - font-size: $form-label-font-size; - } - .label { - margin-left: rem-calc(3); - } - .header { - background-color: $secondary-color; - padding-bottom: 0.2em; - h1, h6 { - color: #fff; - } - .label { - background-color: transparent; - border: 1px solid $primary-color; - border: 1px solid scale-color($primary-color, $lightness: 52%); - color: $primary-color; - color: scale-color($primary-color, $lightness: 52%); - } - } - .section { - border-bottom: 1px solid #ddd; - margin: 0 rem-calc(12) rem-calc(12) rem-calc(12); - padding-bottom: rem-calc(12); - } - /* - +-----------------------------------------------+ - + .attr (13) | - |+-------------+-------------------------------+| - || .key (4) | .value (9) || - |+-------------+-------------------------------+| - +-----------------------------------------------+ - */ - .attr { - @include grid-row($behavior:collapse); - .key { - @include grid-column($columns:4); - label { - color: #999; - margin-right: rem-calc(12); - } - } - .value { - @include grid-column($columns:9); - &.single { - @include grid-column($offset: 4, $columns:9); - } - div { - a { - color: #666; - margin-left: 0.2em; - &:hover { - color: #000; - } - } - } - } - } - .buttonsToolbar { - margin-bottom: rem-calc(12); - background-color: #eee; - border-top: 2px solid #ddd; - .button { - margin: 0.4em; - &.alert { - //display: $button-display; - color: #fff; - } - } - } - .viewer { - .value { - div, a, address, ul, span { - line-height: $form-label-line-height; - margin-left: rem-calc(12); - } - } - } - .editor { - .section { - border-bottom: 0; - } - /* - +-----------------------------------------------+ - + .attr (13) | - |+-------------+-------------------------------+| - |+ .action (1) | .key (4) | .value (8) || - |+-------------+-------------------------------+| - +-----------------------------------------------+ - */ - .attr { - .action { - @include grid-column($columns:1); - padding-left: rem-calc(6); - } - .key { - @include grid-column($columns:4); - } - .value { - @include grid-column($columns:8); - padding-right: rem-calc(6); - &.compact { - margin-bottom: $form-spacing; - input { - margin-bottom: 0; - } - } - &.single { - @include grid-column($offset: 5, $columns:8); - } - } - } - } - } - } -} - -#modalACL { - height: 60vh; - >ul { - @include block-grid(2); - } - padding: 0; - ul.aclUsers { - @include block-grid( - $per-row: 1, - $spacing: $block-grid-default-spacing, - $base-style: false - ); - height: 85%; - border-top: 1px solid black; - border-bottom: 1px solid black; - border-left: 1px solid black; - padding: 0; - margin: 0; - li { - padding: 0; - padding-top: 5px; - line-height: 45px; - background-color: $f-dropdown-list-hover-bg; - transition: background 300ms ease; - &:hover, &:active { - background-color: $f-dropdown-list-hover-bg; - background-color: #fff; - } - &._selected, &._selected span { - background-color: $module-color; - background-color: #fff; - } - .subscriptionArea { - float: right; - padding-right: 5px; - } - } - } - #bottomTable { - width: 100%; - margin: 0; - border: none; - #td_1 { - padding: 0; - width:100%; - i { - position: absolute; - padding-top: 10px; - padding-left: 8px; - } - input { - padding-left: 20px; - margin: 0; - } - } - #td_2 { - padding: 0; - margin: 0; - float: right; - white-space: nowrap; - button { - margin: 0; - } - } - } - #AccessRightList { - border: 1px solid black; - height: 100%; - padding: 0; - .title { - background-color: #54B948; - line-height: 75px; - color: white; - padding-left: 0.5em; - } - ul { - @include block-grid( - $per-row: 1, - $spacing: $block-grid-default-spacing, - $base-style: false - ); - li { - padding: 5px; - margin-left: 5px; - } - } - } -} -#aclButtons { - margin: 0px; - padding:0; - float: right; - button { - margin: 0; - } -} - -#folderSubscribe { - width: 350px; -} - -#addressbookLinks { - background-color: #fff; - width: 450px; - height: 135px; - cursor: none; - - .title { - background-color: $secondary-color; - padding: $f-dropdown-list-padding; - text-transform: uppercase; - } - - .subtitle { - background-color: #6F5A73; - padding: $f-dropdown-list-padding; - } - - .value { - color: #000; - font-weight: bold; - } -} - -.buttonsToolbar { - text-align: right; - .button { - margin-bottom: 0; - font-size: 1.0em; - } - .folders-list & { - background-color: $tabbar-bg; - background-color: $off-canvas-bg; - text-align: center; - .button { - background-color: $tabbar-bg; - font-size: 1.5em; - transition: color 300ms ease; - color: scale-color($tabbar-bg, $lightness: 52%); - &:focus, &:hover { - color: $primary-color; - color: #fff; - //background-color: scale-color($tabbar-bg, $lightness: 13%); - } - } - } -} - -.searchToolbar { - @include grid-row($behavior:collapse); - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: scale-color($f-dropdown-list-hover-bg, $lightness: -20%); - .input-content { - @include grid-column($offset:0, $columns:13); - .input-search { - width: 100%; - padding: 5px; - i { - position: absolute; - top: 8px; - left: 0px; - width: rem-calc(24); - color: $clearing-caption-font-color; - font-size: rem-calc(18); - line-height: rem-calc(32); - padding-left: $form-spacing; - vertical-align: middle; - } - input { - background-color: transparent; - border: 0; - box-shadow: none; - margin-bottom: 0; - padding-left: 24px; - -webkit-transition: all 200ms linear; - -moz-transition: all 200ms linear; - transition: all 200ms linear; - &:focus { - background-color: $input-bg-color; - } - } - } - } - .input-options { - @include grid-column($columns:2); - .button { - color: $input-disabled-bg; - background-color: transparent; - //line-height: 3.5em; - } - } -} - -.alert-bg { - color: #ccc; - font-size: 24px; - text-align: center; - i { - display: block; - font-size: 48px; - margin: 12px; - } -} - -.button { - &.icon { - background-color: transparent; - color: $primary-color; - padding: 0; - @include button-size($padding:$button-tny,$full-width:true); - } - &.alert { - color: $alert-color; - } - &.outline { - background-color: transparent; - border-width: 1px; - &.secondary { - color: $secondary-color; - &:hover { - color: $button-font-color; - } - } - } -} - -.f-dropdown { - width: auto; - max-width: 300px; - white-space: nowrap; - &.icons-dropdown { - height: inherit; - //background-color: $primary-color; - .button { - margin: 0; - padding: $f-dropdown-list-padding; - border-color: $primary-color; - //color: scale-color($secondary-color, $lightness: 52%); - color: #fff; - } - background-color: $primary-color; - border-color: $primary-color; - &:before { - border-color: transparent transparent $primary-color transparent; - } - } -} - -.sg-dropdown-content { - background-color: #fff; - height: 300px; - &.joyride-tip-guide { - .joyride-nub { - &.left { - border-color: white !important; - border-top-color: transparent !important; - border-left-color: transparent !important; - border-bottom-color: transparent !important; - } - } - .joyride-content-wrapper { - list-style: none; - position: absolute; - top: 0; - bottom: 0; - overflow: hidden; - overflow-y: auto; - padding: 0; - ul { - margin-left: 0; - list-style-type: none; - } - li { - &.title { - background-color: $secondary-color; - padding: $f-dropdown-list-padding; - text-transform: uppercase; - &:hover { - background-color: $secondary-color; - } - } - &.item { - margin: 0 5px; - @include radius($input-border-radius); - .disabled { - color: #ccc; - } - } - @include dropdown-style(); - } - } - } -} - - - -address { - font-style: normal; -} - -h1 { - font-weight: lighter; -} - -input.ng-dirty.ng-invalid { - border-color: $alert-color !important; - color: $alert-color !important; -} - +// md is overqualifying, we have to do the same to override +md-content[data-ui-view="card"] { + background-color: sg-color($sogoPaper, 200); +} \ No newline at end of file diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss index 433f2d3c1..8ce57bcc0 100644 --- a/UI/WebServerResources/scss/views/MailerUI.scss +++ b/UI/WebServerResources/scss/views/MailerUI.scss @@ -1,11 +1,13 @@ [id="messagesList"] { + width:$messageList-width; max-width:$messageList-width; flex: 1 1 auto; } [data-ui-view="message"] { - max-width: grid-step(8); + width: grid-step(9); + max-width: grid-step(9); } // Message view header @@ -15,6 +17,10 @@ // padding-bottom: $mg; We should add a padding class to preserve genericity } +[id = "messagesList"] .sg-md-subheader { + transform: translateY(-100%); // Compensate the container top-margin +} + .msg-header-content { display: flex; flex-direction: column; @@ -56,6 +62,8 @@ .PseudoField { display: block; // Should be (reset to ?) a plain block element + padding: 0 2px; + } .PseudoField-label { display: inline-block; @@ -67,7 +75,7 @@ } .PseudoField-inputLike { display: block; - padding: $line 0; + padding: $line 0 0 0; margin-bottom: $line; font-size: sg-size(subhead); line-height: 1; @@ -75,6 +83,12 @@ .PseudoField-inputLike--underline { @extend .PseudoField-inputLike; border-bottom: 1px solid $colorGrayLight; + &:focus, + &:active, + &:hover { + margin-bottom: ($line - 1); + border-bottom: 2px solid sg-color($sogoBlue, 700); + } } // The specs dimensions are too large to fit with angular-material // Here's a modifier @@ -84,6 +98,18 @@ } } +input/deep/#inner-editor { + color: $colorGrayLight; + line-height: inherit; +} +:root/deep/#placeholder, +:root/deep/[pseudo="-webkit-input-placeholder"] { + color: $colorGrayLight; + height: $mg; + font: inherit; + line-height: inherit; + padding: 0; +} .mailer_mailcontent { @extend .sg-md-body-multi; } diff --git a/UI/WebServerResources/scss/views/MessageEditorUI.scss b/UI/WebServerResources/scss/views/MessageEditorUI.scss index 9bad71cf2..ddeca3bd7 100644 --- a/UI/WebServerResources/scss/views/MessageEditorUI.scss +++ b/UI/WebServerResources/scss/views/MessageEditorUI.scss @@ -19,6 +19,12 @@ } } // CKE is overqualifying... let's use an ID -#cke_content { +#cke_content, +textarea.ck-editor{ margin-top: $mg; +} +// Plain text editor +textarea.ck-editor { + width: 100%; + min-height: 320px; } \ No newline at end of file diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index f1360a849..c17020543 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -7,7 +7,7 @@ /// @import 'MailerUI.scss'; -// @import 'ContactsUI.scss'; +@import 'ContactsUI.scss'; @import 'MessageEditorUI'; .view[layout=row] {