From 9fe99d15efaf3d49932269f542efe012bc64c148 Mon Sep 17 00:00:00 2001 From: alexrodba Date: Thu, 6 Apr 2017 15:38:16 +0200 Subject: [PATCH 1/3] backup before applying the sass to scss converter --- source/index.html.erb | 1 + source/messaging/index.html.erb | 10 + .../messaging/_chat-container.html.erb | 82 +++ .../_chat-message-attachment.html.erb | 21 + .../partials/messaging/_chat-message.html.erb | 5 + .../messaging/_message-list-message.html.erb | 29 ++ .../partials/messaging/_message-list.html.erb | 32 ++ source/stylesheets/blocks/_messaging.sass | 487 ++++++++++++++++++ 8 files changed, 667 insertions(+) create mode 100644 source/messaging/index.html.erb create mode 100644 source/partials/messaging/_chat-container.html.erb create mode 100644 source/partials/messaging/_chat-message-attachment.html.erb create mode 100644 source/partials/messaging/_chat-message.html.erb create mode 100644 source/partials/messaging/_message-list-message.html.erb create mode 100644 source/partials/messaging/_message-list.html.erb create mode 100644 source/stylesheets/blocks/_messaging.sass diff --git a/source/index.html.erb b/source/index.html.erb index d917cb0..cc6dab2 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -19,6 +19,7 @@ body: home

Example pages

diff --git a/source/messaging/index.html.erb b/source/messaging/index.html.erb new file mode 100644 index 0000000..c1119c6 --- /dev/null +++ b/source/messaging/index.html.erb @@ -0,0 +1,10 @@ +--- +title: Messaging +messaging_user_link: /profile +empty: true +--- + +
+ <%= partial "partials/messaging/message-list" %> + <%= partial "partials/messaging/chat-container" %> +
\ No newline at end of file diff --git a/source/partials/messaging/_chat-container.html.erb b/source/partials/messaging/_chat-container.html.erb new file mode 100644 index 0000000..8df5969 --- /dev/null +++ b/source/partials/messaging/_chat-container.html.erb @@ -0,0 +1,82 @@ +
+
+

+ + Back + + + <% if current_page.data.messaging_title_link %> + + ORDER #12412 + + <% end %> + + <%= lorem.name %> + +

+ <% if current_page.data.messaging_attachment %> +
+ + +
+ <% end %> +
+
+
+ <% if current_page.data.empty == true %> + + <% else %> + <% if current_page.data.messaging_attachment %> + <%= partial "partials/messaging/chat-message-attachment", + :locals => { + :align => 'left' + } %> + <%= partial "partials/messaging/chat-message-attachment", + :locals => { + :align => 'right', + :type => 'image', + :url => 'example1.jpg' + } %> + <% end %> + <% for i in 1..rand(2..4) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% for i in 1..rand(2..6) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% for i in 1..rand(2..6) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% for i in 1..rand(2..6) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% end %> +
+
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/source/partials/messaging/_chat-message-attachment.html.erb b/source/partials/messaging/_chat-message-attachment.html.erb new file mode 100644 index 0000000..a1da2af --- /dev/null +++ b/source/partials/messaging/_chat-message-attachment.html.erb @@ -0,0 +1,21 @@ +<% attachment = defined?(type) ? type : 'file' %> +<% file_url = defined?(url) ? url : false %> +<% message_align = defined?(align) ? align : ['right','left'].sample %> + +
+ " + target="_blank"> +
+
+ <% if attachment == "image" && file_url %> + <%= image_tag file_url %> + <% else %> + + <% end %> +
+
+ Exemple-file-name.ext +
+
+ +
\ No newline at end of file diff --git a/source/partials/messaging/_chat-message.html.erb b/source/partials/messaging/_chat-message.html.erb new file mode 100644 index 0000000..53c8373 --- /dev/null +++ b/source/partials/messaging/_chat-message.html.erb @@ -0,0 +1,5 @@ +
+
+ <%= lorem.sentence %> +
+
\ No newline at end of file diff --git a/source/partials/messaging/_message-list-message.html.erb b/source/partials/messaging/_message-list-message.html.erb new file mode 100644 index 0000000..6f7c5cf --- /dev/null +++ b/source/partials/messaging/_message-list-message.html.erb @@ -0,0 +1,29 @@ +<% unread_message = defined?(unread) ? unread : false %> +<% active_message = defined?(active) ? 'active' : false %> +<% date_message = defined?(date) ? date : "#{rand(1...30)}/#{rand(1...12)}/2016" %> + +
+ <%= image_tag "example-user#{rand(1...4)}.jpg" %> +
+
+
+ <%= date_message %> +
+ <% if current_page.data.message_title %> +
+ <%= ["Order ##{rand(0..10000)}",'CONVERSATION'].sample %> +
+ <% end %> +
+ <%= lorem.name %> +
+ <% if unread_message %> +
+ <%= unread_message %> +
+ <% end %> +
+ <%= lorem.sentence %> +
+
+ \ No newline at end of file diff --git a/source/partials/messaging/_message-list.html.erb b/source/partials/messaging/_message-list.html.erb new file mode 100644 index 0000000..904493d --- /dev/null +++ b/source/partials/messaging/_message-list.html.erb @@ -0,0 +1,32 @@ +
+
+

Mensajes

+ +
+
+ <%= partial 'partials/messaging/message-list-message', + :locals => { + :active => true, + :unread => 10, + :date => '00:10', + } + %> + + <%= partial 'partials/messaging/message-list-message', + :locals => { + :unread => 3, + :date => '23:10', + } + %> + + <%= partial 'partials/messaging/message-list-message', + :locals => { + :date => 'Yesterday', + } + %> + + <% for i in (0..5) %> + <%= partial 'partials/messaging/message-list-message' %> + <% end %> +
+
\ No newline at end of file diff --git a/source/stylesheets/blocks/_messaging.sass b/source/stylesheets/blocks/_messaging.sass new file mode 100644 index 0000000..f1f47e5 --- /dev/null +++ b/source/stylesheets/blocks/_messaging.sass @@ -0,0 +1,487 @@ +// Messaging + +$messaging-break: $screen-md !default +$messaging-desktop: $screen-lg !default +$messaging-background: #F3F9FF !default +$messaging-primary: $brand-primary !default +$messaging-secondary: lightgrey !default +$messaging-page-background: white !default +$messaging-z-index: 0 !default + +$messaging-header-break: $screen-xs !default +$messaging-header-height: 72px !default +$messaging-header-height-mq: 82px !default +$messaging-header-border: 1px solid $messaging-secondary !default +$messaging-header-font-size: 18px !default +$messaging-header-before-user: '·' !default +$messaging-header-padding: 10px !default +$messaging-header-padding-mq: 20px 20px !default +$messaging-header-user-font-family: $font-family-sans-serif !default +$messaging-header-user-font-width: 200 !default +$messaging-header-attachment-size: 24px !default + +$messaging-message-search-font-size: 14px !default +$messaging-message-search-padding: 3px 0 !default +$messaging-message-search-placeholder: $gray-light !default +$messaging-message-search-color: $gray !default +$messaging-message-search-focus-background: transparent !default +$messaging-message-search-background: transparent !default +$messaging-message-search-width: 110px !default + +$message-list-font-size: 14px !default +$message-list-width: 33% !default +$message-list-border-right: 1px solid $messaging-secondary !default +$message-list-header-height: 40px !default + +$message-list-message-padding: 20px 40px 20px 20px !default +$message-list-message-padding-mq: 20px !default +$message-list-message-border-bottom: 1px solid #EEEEEE !default +$message-list-message-hover: #F6F6F6 !default +$message-list-message-active: lighten($messaging-primary, 40%) !default +$message-list-message-image-width: 50px !default +$message-list-message-color: $text-color !default +$message-list-message-badge-background: $messaging-primary !default +$message-list-message-content-padding-right: 10px !default +$message-list-message-data-color: gray !default +$message-list-message-badge-width: 50px !default +$message-list-message-data-width: 80px !default + +$chat-container-background: white !default +$chat-container-calc: 110px !default +$chat-container-calc-mq: 128px !default +$chat-container-content-padding: 10px !default +$chat-container-content-margin-top: 10px !default + +$chat-message-width: 80% !default +$chat-message-width-mq: 70% !default + +$chat-message-margin: 10px 10px 20px !default + +$chat-message-text-wrapper-margin-top: 3px !default +$chat-message-text-margin: 10px !default +$chat-message-text-right-background-color: $messaging-primary !default +$chat-message-text-right-color: white !default +$chat-message-text-left-background-color: $messaging-secondary !default +$chat-message-text-left-color: black !default +$chat-message-text-border-radius: 5px !default +$chat-message-text-arrow-size: 5px !default +$chat-message-text-padding: 10px !default +$chat-message-text-padding-mq: 10px !default +$chat-message-text-font-size: 14px !default + + +$chat-message-attachment-image-size: 100px !default +$chat-message-attachment-image-padding-right: 10px !default + +$chat-message-time-color: $messaging-primary !default +$chat-message-time-unread: $brand-danger !default +$chat-message-time-font-size: 12px !default + +$messaging-footer-input-border: 1px solid $messaging-secondary !default +$messaging-footer-input-padding: 10px !default +$messaging-footer-input-padding-mq: 10px 10px 10px 20px !default +$messaging-footer-input-placeholder-color: $messaging-message-search-placeholder !default +$messaging-footer-input-color: $messaging-message-search-color +$messaging-footer-btn-height: 44px !default + +.messaging + background: $messaging-background + height: 100vh + position: relative + margin: 0 + + .footer + display: none + +.messaging-page + position: relative + height: calc(100% - #{$messaging-header-height}) + overflow: hidden + background: $messaging-page-background + @extend .container + padding: 0 + + +mq($messaging-header-break) + height: calc(100% - #{$messaging-header-height-mq}) + +.messaging-header + margin: 0 + padding: $messaging-header-padding + border-bottom: $messaging-header-border + + +mq($messaging-break) + padding: $messaging-header-padding-mq + + .title + display: inline-block + margin: 0 + font-size: $messaging-header-font-size + + .message-title + .message-user + font-weight: $messaging-header-user-font-width + font-family: $messaging-header-user-font-family + + &:before + content: $messaging-header-before-user + + a + color: inherit + text-decoration: none + + &:hover + color: $messaging-primary + + .attachment + cursor: pointer + position: relative + overflow: hidden + float: right + margin: 0 + top: -5px + padding-left: 10px + font-size: $messaging-header-attachment-size + + &:hover + color: $messaging-primary + + .icon + @extend .fa + @extend .fa-paperclip + + .upload + position: absolute + top: 0 + right: 0 + margin: 0 + padding: 0 + font-size: $messaging-header-attachment-size + cursor: pointer + opacity: 0 + + #message-search + float: right + font-size: $messaging-message-search-font-size + padding: $messaging-message-search-padding + color: $messaging-message-search-color + background-color: $messaging-message-search-background + border: 0 + width: $messaging-message-search-width + text-align: right + outline: 0 + + +input-placeholder + color: $messaging-message-search-placeholder + font-style: italic + + &:focus + background-color: $messaging-message-search-focus-background + color: $messaging-message-search-color + + .btn-back-to-messages + padding-right: 6px + +mq($messaging-break) + display: none + +.message-list + background: white + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + -webkit-overflow-scrolling: touch + + +mq($messaging-break) + display: block + position: relative + top: auto + left: auto + float: left + width: $message-list-width + border-right: $message-list-border-right + + .content + height: calc(100% - #{$message-list-header-height}) + overflow-x: hidden + overflow-y: scroll + + .message + display: block + width: 100% + padding: $message-list-message-padding + border-bottom: $message-list-message-border-bottom + color: $message-list-message-color + + +mq($messaging-break) + padding: $message-list-message-padding-mq + + &:hover, + &:focus + text-decoration: none + background-color: $message-list-message-hover + + &.active + background-color: $message-list-message-active + + .message-image + width: $message-list-message-image-width + float: left + + img + border-radius: 50% + + .message-content + position: relative + margin-left: $message-list-message-image-width + padding-left: $message-list-message-content-padding-right + + +mq($messaging-break) + &:after + display: none + + &:after + @extend .fa + content: '\f105' + position: absolute + right: -30px + top: 50% + font-size: 50px + transform: translateY(-50%) + opacity: .05 + z-index: $messaging-z-index + 9 + +mq($messaging-break) + display: none + + .badge + float: right + background-color: $message-list-message-badge-background + + .message-user + font-weight: bold + width: calc(100% - #{$message-list-message-data-width}) + white-space: nowrap + overflow: hidden + text-overflow: ellipsis + margin-bottom: 10px + + .message-title + font-weight: bold + width: calc(100% - #{$message-list-message-data-width}) + white-space: nowrap + overflow: hidden + text-overflow: ellipsis + + & + .message-user + font-weight: normal + margin-bottom: 0 + width: 100% + + & + .message-text + margin-top: 10px + + .message-text + font-size: $message-list-font-size + width: calc(100% - #{$message-list-message-badge-width}) + white-space: nowrap + overflow: hidden + text-overflow: ellipsis + + .message-date + float: right + font-size: $message-list-font-size + color: $message-list-message-data-color + +.chat-container + background: $chat-container-background + position: absolute + top: 0 + left: 100% + width: 100% + transition: left .5s + height: 100% + overflow: hidden + z-index: $messaging-z-index + 10 + + +mq($messaging-break) + display: block + position: relative + top: auto + left: auto + width: 100% - $message-list-width + float: left + left: 0 + overflow: hidden + + &.active + left: 0 + + .content + height: calc(100% - #{$chat-container-calc}) + overflow: auto + width: 100% + -webkit-overflow-scrolling: touch + + +mq($messaging-break) + padding: $chat-container-content-padding + height: calc(100% - #{$chat-container-calc-mq}) + + .wrapper + display: flex + flex-direction: column-reverse + +.chat-message + position: relative + margin: $chat-message-margin + font-size: $chat-message-text-font-size + + &.left + text-align: left + + & + .left + margin-bottom: 0 + + &:after + content: none + + &:after + content: '' + position: absolute + left: -$chat-message-text-arrow-size + bottom: 50% + transform: translateY($chat-message-text-arrow-size) + width: 0 + height: 0 + border-top: $chat-message-text-arrow-size solid transparent + border-bottom: $chat-message-text-arrow-size solid transparent + border-right: $chat-message-text-arrow-size solid $chat-message-text-left-background-color + + .chat-message-content + background-color: $chat-message-text-left-background-color + color: $chat-message-text-left-color + + &.right + text-align: right + + & + .right + margin-bottom: 0 + + &:after + content: none + + &:after + content: '' + position: absolute + right: -$chat-message-text-arrow-size + bottom: 50% + transform: translateY($chat-message-text-arrow-size) + width: 0 + height: 0 + border-top: $chat-message-text-arrow-size solid transparent + border-bottom: $chat-message-text-arrow-size solid transparent + border-left: $chat-message-text-arrow-size solid $chat-message-text-right-background-color + + .chat-message-content + background-color: $chat-message-text-right-background-color + color: $chat-message-text-right-color + + .chat-message-content + display: inline-block + padding: $chat-message-text-padding + border-radius: $chat-message-text-border-radius + max-width: $chat-message-width + + +mq($messaging-desktop) + max-width: $chat-message-width-mq + + &.attachment + &:hover + opacity: .8 + + .chat-message-content + padding: 0 + text-decoration: none + + .content + padding: $chat-message-text-padding + display: table + + .preview + display: table-cell + vertical-align: middle + padding-right: $chat-message-attachment-image-padding-right + + img + max-width: $chat-message-attachment-image-size + max-height: $chat-message-attachment-image-size + height: auto + + .icon + font-size: 50px + opacity: .4 + @extend .fa + + .text + display: table-cell + vertical-align: middle + font-weight: bold + padding-right: $chat-message-attachment-image-padding-right + + &.file + .preview .icon + @extend .fa-file-o + + + +.chat-message-time + color: $chat-message-time-color + font-size: $chat-message-time-font-size + +gradient-horizontal-three-colors($messaging-primary, $messaging-page-background, 50%, $messaging-primary) + text-align: center + margin: 30px 10px + height: 1px + + time + display: inline-block + position: relative + bottom: 0 + transform: translateY(-50%) + color: $chat-message-time-color + background-color: $messaging-page-background + padding: 0 $chat-message-time-font-size*2 + text-transform: uppercase + font-weight: bold + + &.unread + +gradient-horizontal-three-colors($chat-message-time-unread, $messaging-page-background, 50%, $chat-message-time-unread) + + time + color: $chat-message-time-unread + +.messaging-footer-input + display: table + padding: $messaging-footer-input-padding + width: 100% + border-top: $messaging-footer-input-border + +mq($messaging-break) + padding: $messaging-footer-input-padding-mq + + .input-wrapper + display: table-cell + width: 100% + vertical-align: top + + input + color: $messaging-footer-input-color + width: 100% + border-right: 0 + + +input-placeholder + color: $messaging-footer-input-placeholder-color + font-style: italic + + .buttons-wrapper + display: table-cell + vertical-align: top + + .btn + height: $messaging-footer-btn-height \ No newline at end of file From 23e3871b040e64f1339f77cecb42994aabb115ea Mon Sep 17 00:00:00 2001 From: alexrodba Date: Thu, 6 Apr 2017 17:28:33 +0200 Subject: [PATCH 2/3] checkpoint - looks ok-ish. Need to find out why all messages are active and need to integrate styles that are either obtained from bootstrap, compass or jquery components --- source/images/messaging/example-user1.jpg | Bin 0 -> 5163 bytes source/images/messaging/example-user2.jpg | Bin 0 -> 4063 bytes source/images/messaging/example-user3.jpg | Bin 0 -> 4729 bytes source/images/messaging/example-user4.jpg | Bin 0 -> 5576 bytes source/images/messaging/example-user5.jpg | Bin 0 -> 3376 bytes source/images/messaging/example-user6.jpg | Bin 0 -> 4047 bytes source/javascripts/body/messaging_filter.js | 20 + .../javascripts/body/messaging_open_chat.js | 17 + source/javascripts/head.js | 3 +- source/javascripts/head/messaging_scroll.js | 20 + .../messaging/_message-list-message.html.erb | 2 +- .../partials/messaging/_message-list.html.erb | 2 +- source/stylesheets/application.css.scss | 1 + source/stylesheets/blocks/_messaging.sass | 487 -------------- source/stylesheets/blocks/_messaging.scss | 598 ++++++++++++++++++ source/stylesheets/utilities/_helpers.scss | 8 + source/stylesheets/utilities/_variables.scss | 2 +- 17 files changed, 669 insertions(+), 491 deletions(-) create mode 100644 source/images/messaging/example-user1.jpg create mode 100644 source/images/messaging/example-user2.jpg create mode 100644 source/images/messaging/example-user3.jpg create mode 100644 source/images/messaging/example-user4.jpg create mode 100644 source/images/messaging/example-user5.jpg create mode 100644 source/images/messaging/example-user6.jpg create mode 100644 source/javascripts/body/messaging_filter.js create mode 100644 source/javascripts/body/messaging_open_chat.js create mode 100644 source/javascripts/head/messaging_scroll.js delete mode 100644 source/stylesheets/blocks/_messaging.sass create mode 100644 source/stylesheets/blocks/_messaging.scss diff --git a/source/images/messaging/example-user1.jpg b/source/images/messaging/example-user1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..beaed14d70c6987d139e2aadf74336429f4b0f82 GIT binary patch literal 5163 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 literal 0 HcmV?d00001 diff --git a/source/images/messaging/example-user3.jpg b/source/images/messaging/example-user3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fcd6ccb76a322d2e07f725d08da344cdc2d82102 GIT binary patch literal 4729 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 G*Z)5kE&#p& literal 0 HcmV?d00001 diff --git a/source/images/messaging/example-user6.jpg b/source/images/messaging/example-user6.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e4df658246bb6c0e0df40c489c649f7d923c90d3 GIT binary patch literal 4047 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 0) ? $(this).show() : $(this).hide(); + }); + }else{ + $elements.show(); + } + }); + } + +})(); \ No newline at end of file diff --git a/source/javascripts/body/messaging_open_chat.js b/source/javascripts/body/messaging_open_chat.js new file mode 100644 index 0000000..221cfb3 --- /dev/null +++ b/source/javascripts/body/messaging_open_chat.js @@ -0,0 +1,17 @@ +(function () { + 'use strict'; + + if ( $('.messaging-page').length ) { + $('.message').on('click', function(e) { + e.preventDefault(); + $('.chat-container').addClass('active'); + $('.message').removeClass('active') + $(this).addClass('active') + }); + $('.btn-back-to-messages').on('click', function(e) { + e.preventDefault(); + $('.chat-container').removeClass('active'); + }); + } + +})(); \ No newline at end of file diff --git a/source/javascripts/head.js b/source/javascripts/head.js index a3883d0..dfdf0fa 100644 --- a/source/javascripts/head.js +++ b/source/javascripts/head.js @@ -1 +1,2 @@ -//= require modernizr \ No newline at end of file +//= require modernizr +//= require_tree ./head \ No newline at end of file diff --git a/source/javascripts/head/messaging_scroll.js b/source/javascripts/head/messaging_scroll.js new file mode 100644 index 0000000..ed478ef --- /dev/null +++ b/source/javascripts/head/messaging_scroll.js @@ -0,0 +1,20 @@ +(function () { + 'use strict'; + + $(document).on('ready',function(){ + if ( $('.messaging-page').length ) { + $(".chat-container > .content").mCustomScrollbar({ + axis: 'y', + theme:"minimal-dark", + setTop: $(".chat-container > .content > .wrapper").height() + 'px', + advanced:{ + autoUpdateTimeout: 0, + scrollInertia: 100, + updateOnImageLoad: true, + updateOnContentResize: true + } + }); + } + }); + +})(); diff --git a/source/partials/messaging/_message-list-message.html.erb b/source/partials/messaging/_message-list-message.html.erb index 6f7c5cf..d3f568b 100644 --- a/source/partials/messaging/_message-list-message.html.erb +++ b/source/partials/messaging/_message-list-message.html.erb @@ -3,7 +3,7 @@ <% date_message = defined?(date) ? date : "#{rand(1...30)}/#{rand(1...12)}/2016" %>
- <%= image_tag "example-user#{rand(1...4)}.jpg" %> + <%= image_tag "messaging/example-user#{rand(1...6)}.jpg" %>
diff --git a/source/partials/messaging/_message-list.html.erb b/source/partials/messaging/_message-list.html.erb index 904493d..1a8fb85 100644 --- a/source/partials/messaging/_message-list.html.erb +++ b/source/partials/messaging/_message-list.html.erb @@ -1,6 +1,6 @@
-

Mensajes

+

Messages

diff --git a/source/stylesheets/application.css.scss b/source/stylesheets/application.css.scss index 233a040..9884ee6 100644 --- a/source/stylesheets/application.css.scss +++ b/source/stylesheets/application.css.scss @@ -27,6 +27,7 @@ @import 'blocks/hero'; @import 'blocks/list-tabulated'; @import 'blocks/main-content'; +@import 'blocks/messaging'; @import 'blocks/modals'; @import 'blocks/nav-inline'; @import 'blocks/nav-pills'; diff --git a/source/stylesheets/blocks/_messaging.sass b/source/stylesheets/blocks/_messaging.sass deleted file mode 100644 index f1f47e5..0000000 --- a/source/stylesheets/blocks/_messaging.sass +++ /dev/null @@ -1,487 +0,0 @@ -// Messaging - -$messaging-break: $screen-md !default -$messaging-desktop: $screen-lg !default -$messaging-background: #F3F9FF !default -$messaging-primary: $brand-primary !default -$messaging-secondary: lightgrey !default -$messaging-page-background: white !default -$messaging-z-index: 0 !default - -$messaging-header-break: $screen-xs !default -$messaging-header-height: 72px !default -$messaging-header-height-mq: 82px !default -$messaging-header-border: 1px solid $messaging-secondary !default -$messaging-header-font-size: 18px !default -$messaging-header-before-user: '·' !default -$messaging-header-padding: 10px !default -$messaging-header-padding-mq: 20px 20px !default -$messaging-header-user-font-family: $font-family-sans-serif !default -$messaging-header-user-font-width: 200 !default -$messaging-header-attachment-size: 24px !default - -$messaging-message-search-font-size: 14px !default -$messaging-message-search-padding: 3px 0 !default -$messaging-message-search-placeholder: $gray-light !default -$messaging-message-search-color: $gray !default -$messaging-message-search-focus-background: transparent !default -$messaging-message-search-background: transparent !default -$messaging-message-search-width: 110px !default - -$message-list-font-size: 14px !default -$message-list-width: 33% !default -$message-list-border-right: 1px solid $messaging-secondary !default -$message-list-header-height: 40px !default - -$message-list-message-padding: 20px 40px 20px 20px !default -$message-list-message-padding-mq: 20px !default -$message-list-message-border-bottom: 1px solid #EEEEEE !default -$message-list-message-hover: #F6F6F6 !default -$message-list-message-active: lighten($messaging-primary, 40%) !default -$message-list-message-image-width: 50px !default -$message-list-message-color: $text-color !default -$message-list-message-badge-background: $messaging-primary !default -$message-list-message-content-padding-right: 10px !default -$message-list-message-data-color: gray !default -$message-list-message-badge-width: 50px !default -$message-list-message-data-width: 80px !default - -$chat-container-background: white !default -$chat-container-calc: 110px !default -$chat-container-calc-mq: 128px !default -$chat-container-content-padding: 10px !default -$chat-container-content-margin-top: 10px !default - -$chat-message-width: 80% !default -$chat-message-width-mq: 70% !default - -$chat-message-margin: 10px 10px 20px !default - -$chat-message-text-wrapper-margin-top: 3px !default -$chat-message-text-margin: 10px !default -$chat-message-text-right-background-color: $messaging-primary !default -$chat-message-text-right-color: white !default -$chat-message-text-left-background-color: $messaging-secondary !default -$chat-message-text-left-color: black !default -$chat-message-text-border-radius: 5px !default -$chat-message-text-arrow-size: 5px !default -$chat-message-text-padding: 10px !default -$chat-message-text-padding-mq: 10px !default -$chat-message-text-font-size: 14px !default - - -$chat-message-attachment-image-size: 100px !default -$chat-message-attachment-image-padding-right: 10px !default - -$chat-message-time-color: $messaging-primary !default -$chat-message-time-unread: $brand-danger !default -$chat-message-time-font-size: 12px !default - -$messaging-footer-input-border: 1px solid $messaging-secondary !default -$messaging-footer-input-padding: 10px !default -$messaging-footer-input-padding-mq: 10px 10px 10px 20px !default -$messaging-footer-input-placeholder-color: $messaging-message-search-placeholder !default -$messaging-footer-input-color: $messaging-message-search-color -$messaging-footer-btn-height: 44px !default - -.messaging - background: $messaging-background - height: 100vh - position: relative - margin: 0 - - .footer - display: none - -.messaging-page - position: relative - height: calc(100% - #{$messaging-header-height}) - overflow: hidden - background: $messaging-page-background - @extend .container - padding: 0 - - +mq($messaging-header-break) - height: calc(100% - #{$messaging-header-height-mq}) - -.messaging-header - margin: 0 - padding: $messaging-header-padding - border-bottom: $messaging-header-border - - +mq($messaging-break) - padding: $messaging-header-padding-mq - - .title - display: inline-block - margin: 0 - font-size: $messaging-header-font-size - - .message-title + .message-user - font-weight: $messaging-header-user-font-width - font-family: $messaging-header-user-font-family - - &:before - content: $messaging-header-before-user - - a - color: inherit - text-decoration: none - - &:hover - color: $messaging-primary - - .attachment - cursor: pointer - position: relative - overflow: hidden - float: right - margin: 0 - top: -5px - padding-left: 10px - font-size: $messaging-header-attachment-size - - &:hover - color: $messaging-primary - - .icon - @extend .fa - @extend .fa-paperclip - - .upload - position: absolute - top: 0 - right: 0 - margin: 0 - padding: 0 - font-size: $messaging-header-attachment-size - cursor: pointer - opacity: 0 - - #message-search - float: right - font-size: $messaging-message-search-font-size - padding: $messaging-message-search-padding - color: $messaging-message-search-color - background-color: $messaging-message-search-background - border: 0 - width: $messaging-message-search-width - text-align: right - outline: 0 - - +input-placeholder - color: $messaging-message-search-placeholder - font-style: italic - - &:focus - background-color: $messaging-message-search-focus-background - color: $messaging-message-search-color - - .btn-back-to-messages - padding-right: 6px - +mq($messaging-break) - display: none - -.message-list - background: white - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - -webkit-overflow-scrolling: touch - - +mq($messaging-break) - display: block - position: relative - top: auto - left: auto - float: left - width: $message-list-width - border-right: $message-list-border-right - - .content - height: calc(100% - #{$message-list-header-height}) - overflow-x: hidden - overflow-y: scroll - - .message - display: block - width: 100% - padding: $message-list-message-padding - border-bottom: $message-list-message-border-bottom - color: $message-list-message-color - - +mq($messaging-break) - padding: $message-list-message-padding-mq - - &:hover, - &:focus - text-decoration: none - background-color: $message-list-message-hover - - &.active - background-color: $message-list-message-active - - .message-image - width: $message-list-message-image-width - float: left - - img - border-radius: 50% - - .message-content - position: relative - margin-left: $message-list-message-image-width - padding-left: $message-list-message-content-padding-right - - +mq($messaging-break) - &:after - display: none - - &:after - @extend .fa - content: '\f105' - position: absolute - right: -30px - top: 50% - font-size: 50px - transform: translateY(-50%) - opacity: .05 - z-index: $messaging-z-index + 9 - +mq($messaging-break) - display: none - - .badge - float: right - background-color: $message-list-message-badge-background - - .message-user - font-weight: bold - width: calc(100% - #{$message-list-message-data-width}) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - margin-bottom: 10px - - .message-title - font-weight: bold - width: calc(100% - #{$message-list-message-data-width}) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - - & + .message-user - font-weight: normal - margin-bottom: 0 - width: 100% - - & + .message-text - margin-top: 10px - - .message-text - font-size: $message-list-font-size - width: calc(100% - #{$message-list-message-badge-width}) - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - - .message-date - float: right - font-size: $message-list-font-size - color: $message-list-message-data-color - -.chat-container - background: $chat-container-background - position: absolute - top: 0 - left: 100% - width: 100% - transition: left .5s - height: 100% - overflow: hidden - z-index: $messaging-z-index + 10 - - +mq($messaging-break) - display: block - position: relative - top: auto - left: auto - width: 100% - $message-list-width - float: left - left: 0 - overflow: hidden - - &.active - left: 0 - - .content - height: calc(100% - #{$chat-container-calc}) - overflow: auto - width: 100% - -webkit-overflow-scrolling: touch - - +mq($messaging-break) - padding: $chat-container-content-padding - height: calc(100% - #{$chat-container-calc-mq}) - - .wrapper - display: flex - flex-direction: column-reverse - -.chat-message - position: relative - margin: $chat-message-margin - font-size: $chat-message-text-font-size - - &.left - text-align: left - - & + .left - margin-bottom: 0 - - &:after - content: none - - &:after - content: '' - position: absolute - left: -$chat-message-text-arrow-size - bottom: 50% - transform: translateY($chat-message-text-arrow-size) - width: 0 - height: 0 - border-top: $chat-message-text-arrow-size solid transparent - border-bottom: $chat-message-text-arrow-size solid transparent - border-right: $chat-message-text-arrow-size solid $chat-message-text-left-background-color - - .chat-message-content - background-color: $chat-message-text-left-background-color - color: $chat-message-text-left-color - - &.right - text-align: right - - & + .right - margin-bottom: 0 - - &:after - content: none - - &:after - content: '' - position: absolute - right: -$chat-message-text-arrow-size - bottom: 50% - transform: translateY($chat-message-text-arrow-size) - width: 0 - height: 0 - border-top: $chat-message-text-arrow-size solid transparent - border-bottom: $chat-message-text-arrow-size solid transparent - border-left: $chat-message-text-arrow-size solid $chat-message-text-right-background-color - - .chat-message-content - background-color: $chat-message-text-right-background-color - color: $chat-message-text-right-color - - .chat-message-content - display: inline-block - padding: $chat-message-text-padding - border-radius: $chat-message-text-border-radius - max-width: $chat-message-width - - +mq($messaging-desktop) - max-width: $chat-message-width-mq - - &.attachment - &:hover - opacity: .8 - - .chat-message-content - padding: 0 - text-decoration: none - - .content - padding: $chat-message-text-padding - display: table - - .preview - display: table-cell - vertical-align: middle - padding-right: $chat-message-attachment-image-padding-right - - img - max-width: $chat-message-attachment-image-size - max-height: $chat-message-attachment-image-size - height: auto - - .icon - font-size: 50px - opacity: .4 - @extend .fa - - .text - display: table-cell - vertical-align: middle - font-weight: bold - padding-right: $chat-message-attachment-image-padding-right - - &.file - .preview .icon - @extend .fa-file-o - - - -.chat-message-time - color: $chat-message-time-color - font-size: $chat-message-time-font-size - +gradient-horizontal-three-colors($messaging-primary, $messaging-page-background, 50%, $messaging-primary) - text-align: center - margin: 30px 10px - height: 1px - - time - display: inline-block - position: relative - bottom: 0 - transform: translateY(-50%) - color: $chat-message-time-color - background-color: $messaging-page-background - padding: 0 $chat-message-time-font-size*2 - text-transform: uppercase - font-weight: bold - - &.unread - +gradient-horizontal-three-colors($chat-message-time-unread, $messaging-page-background, 50%, $chat-message-time-unread) - - time - color: $chat-message-time-unread - -.messaging-footer-input - display: table - padding: $messaging-footer-input-padding - width: 100% - border-top: $messaging-footer-input-border - +mq($messaging-break) - padding: $messaging-footer-input-padding-mq - - .input-wrapper - display: table-cell - width: 100% - vertical-align: top - - input - color: $messaging-footer-input-color - width: 100% - border-right: 0 - - +input-placeholder - color: $messaging-footer-input-placeholder-color - font-style: italic - - .buttons-wrapper - display: table-cell - vertical-align: top - - .btn - height: $messaging-footer-btn-height \ No newline at end of file diff --git a/source/stylesheets/blocks/_messaging.scss b/source/stylesheets/blocks/_messaging.scss new file mode 100644 index 0000000..dfa5b41 --- /dev/null +++ b/source/stylesheets/blocks/_messaging.scss @@ -0,0 +1,598 @@ +// Messaging + +$messaging-break: 768px !default; +$messaging-desktop: 1200px !default; +$messaging-background: #F3F9FF !default; +$messaging-primary: $primary !default; +$messaging-secondary: lightgrey !default; +$messaging-page-background: white !default; +$messaging-z-index: 0 !default; + +$messaging-header-break: 480px !default; +$messaging-header-height: 72px !default; +$messaging-header-height-mq: 82px !default; +$messaging-header-border: 1px solid $messaging-secondary !default; +$messaging-header-font-size: 18px !default; +$messaging-header-before-user: "·" !default; +$messaging-header-padding: 10px !default; +$messaging-header-padding-mq: 20px 20px !default; +$messaging-header-user-font-family: $font-family-base !default; +$messaging-header-user-font-width: 200 !default; +$messaging-header-attachment-size: 24px !default; + +$messaging-message-search-font-size: 14px !default; +$messaging-message-search-padding: 3px 0 !default; +$messaging-message-search-placeholder: #999 !default; +$messaging-message-search-color: #555 !default; +$messaging-message-search-focus-background: transparent !default; +$messaging-message-search-background: transparent !default; +$messaging-message-search-width: 110px !default; + +$message-list-font-size: 14px !default; +$message-list-width: 33% !default; +$message-list-border-right: 1px solid $messaging-secondary !default; +$message-list-header-height: 40px !default; + +$message-list-message-padding: 20px 40px 20px 20px !default; +$message-list-message-padding-mq: 20px !default; +$message-list-message-border-bottom: 1px solid #EEEEEE !default; +$message-list-message-hover: #F6F6F6 !default; +$message-list-message-active: lighten($messaging-primary, 40%) !default; +$message-list-message-image-width: 50px !default; +$message-list-message-color: #333333 !default; +$message-list-message-badge-background: $messaging-primary !default; +$message-list-message-content-padding-right: 10px !default; +$message-list-message-data-color: gray !default; +$message-list-message-badge-width: 50px !default; +$message-list-message-data-width: 80px !default; + +$chat-container-background: white !default; +$chat-container-calc: 110px !default; +$chat-container-calc-mq: 128px !default; +$chat-container-content-padding: 10px !default; +$chat-container-content-margin-top: 10px !default; + +$chat-message-width: 80% !default; +$chat-message-width-mq: 70% !default; + +$chat-message-margin: 10px 10px 20px !default; + +$chat-message-text-wrapper-margin-top: 3px !default; +$chat-message-text-margin: 10px !default; +$chat-message-text-right-background-color: $messaging-primary !default; +$chat-message-text-right-color: white !default; +$chat-message-text-left-background-color: $messaging-secondary !default; +$chat-message-text-left-color: black !default; +$chat-message-text-border-radius: 5px !default; +$chat-message-text-arrow-size: 5px !default; +$chat-message-text-padding: 10px !default; +$chat-message-text-padding-mq: 10px !default; +$chat-message-text-font-size: 14px !default; + +$chat-message-attachment-image-size: 100px !default; +$chat-message-attachment-image-padding-right: 10px !default; + +$chat-message-time-color: $messaging-primary !default; +$chat-message-time-unread: #d9534f !default; +$chat-message-time-font-size: 12px !default; + +$messaging-footer-input-border: 1px solid $messaging-secondary !default; +$messaging-footer-input-padding: 10px !default; +$messaging-footer-input-padding-mq: 10px 10px 10px 20px !default; +$messaging-footer-input-placeholder-color: $messaging-message-search-placeholder !default; +$messaging-footer-input-color: $messaging-message-search-color; +$messaging-footer-btn-height: 44px !default; + +.messaging { + background: $messaging-background; + height: 100vh; + position: relative; + margin: 0; + + .footer { + display: none; + } +} + +.messaging-page { + position: relative; + height: calc(100% - #{$messaging-header-height}); + overflow: hidden; + background: $messaging-page-background; + + @extend .container; + + padding: 0; + + @media (min-width: $messaging-header-break) { + height: calc(100% - #{$messaging-header-height-mq}); + } +} + +.messaging-header { + margin: 0; + padding: $messaging-header-padding; + border-bottom: $messaging-header-border; + + @media (min-width: $messaging-break) { + padding: $messaging-header-padding-mq; + } + + .title { + display: inline-block; + margin: 0; + font-size: $messaging-header-font-size; + + .message-title + .message-user { + font-weight: $messaging-header-user-font-width; + font-family: $messaging-header-user-font-family; + + &:before { + content: $messaging-header-before-user; + } + } + + a { + color: inherit; + text-decoration: none; + + &:hover { + color: $messaging-primary; + } + } + } + + .attachment { + cursor: pointer; + position: relative; + overflow: hidden; + float: right; + margin: 0; + top: -5px; + padding-left: 10px; + font-size: $messaging-header-attachment-size; + + &:hover { + color: $messaging-primary; + } + + .icon { + @extend .fa; + + @extend .fa-paperclip; + } + + .upload { + position: absolute; + top: 0; + right: 0; + margin: 0; + padding: 0; + font-size: $messaging-header-attachment-size; + cursor: pointer; + opacity: 0; + } + } + + #message-search { + float: right; + font-size: $messaging-message-search-font-size; + padding: $messaging-message-search-padding; + color: $messaging-message-search-color; + background-color: $messaging-message-search-background; + border: 0; + width: $messaging-message-search-width; + text-align: right; + outline: 0; + + &:focus { + background-color: $messaging-message-search-focus-background; + color: $messaging-message-search-color; + } + } + + .btn-back-to-messages { + padding-right: 6px; + + @media (min-width: $messaging-break) { + display: none; + } + + } +} + +.message-list { + background: white; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-overflow-scrolling: touch; + + @media (min-width: $messaging-break) { + display: block; + position: relative; + top: auto; + left: auto; + float: left; + width: $message-list-width; + border-right: $message-list-border-right; + } + + .content { + height: calc(100% - #{$message-list-header-height}); + overflow-x: hidden; + overflow-y: scroll; + } + + .message { + display: block; + width: 100%; + padding: $message-list-message-padding; + border-bottom: $message-list-message-border-bottom; + color: $message-list-message-color; + + @media (min-width: $messaging-break) { + padding: $message-list-message-padding-mq; + } + + &:hover, + &:focus { + text-decoration: none; + background-color: $message-list-message-hover; + } + + &.active { + background-color: $message-list-message-active; + } + } + + .message-image { + width: $message-list-message-image-width; + float: left; + + img { + border-radius: 50%; + } + } + + .message-content { + position: relative; + margin-left: $message-list-message-image-width; + padding-left: $message-list-message-content-padding-right; + + @media (min-width: $messaging-break) { + &:after { + display: none; + } + } + + &:after { + @extend .fa; + + content: ""; + position: absolute; + right: -30px; + top: 50%; + font-size: 50px; + transform: translateY(-50%); + opacity: 0.05; + z-index: $messaging-z-index + 9; + + @media (min-width: $messaging-break) { + display: none; + } + + } + + .badge { + float: right; + background-color: $message-list-message-badge-background; + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 14px; + font-weight: bold; + color: #fff; + line-height: 1; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + border-radius: 10px; + } + } + + .message-user { + font-weight: bold; + width: calc(100% - #{$message-list-message-data-width}); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 10px; + } + + .message-title { + font-weight: bold; + width: calc(100% - #{$message-list-message-data-width}); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + & + .message-user { + font-weight: normal; + margin-bottom: 0; + width: 100%; + } + + & + .message-text { + margin-top: 10px; + } + } + + .message-text { + font-size: $message-list-font-size; + width: calc(100% - #{$message-list-message-badge-width}); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .message-date { + float: right; + font-size: $message-list-font-size; + color: $message-list-message-data-color; + } +} + +.chat-container { + background: $chat-container-background; + position: absolute; + top: 0; + left: 100%; + width: 100%; + transition: left 0.5s; + height: 100%; + overflow: hidden; + z-index: $messaging-z-index + 10; + + @media (min-width: $messaging-break) { + display: block; + position: relative; + top: auto; + left: auto; + width: 100% - $message-list-width; + float: left; + left: 0; + overflow: hidden; + } + + &.active { + left: 0; + } + + .content { + height: calc(100% - #{$chat-container-calc}); + overflow: auto; + width: 100%; + -webkit-overflow-scrolling: touch; + + @media (min-width: $messaging-break) { + padding: $chat-container-content-padding; + height: calc(100% - #{$chat-container-calc-mq}); + } + + .wrapper { + display: flex; + flex-direction: column-reverse; + } + } +} + +.chat-message { + position: relative; + margin: $chat-message-margin; + font-size: $chat-message-text-font-size; + + &.left { + text-align: left; + + & + .left { + margin-bottom: 0; + + &:after { + content: none; + } + } + + &:after { + content: ""; + position: absolute; + left: -$chat-message-text-arrow-size; + bottom: 50%; + transform: translateY($chat-message-text-arrow-size); + width: 0; + height: 0; + border-top: $chat-message-text-arrow-size solid transparent; + border-bottom: $chat-message-text-arrow-size solid transparent; + border-right: $chat-message-text-arrow-size solid $chat-message-text-left-background-color; + } + + .chat-message-content { + background-color: $chat-message-text-left-background-color; + color: $chat-message-text-left-color; + } + } + + &.right { + text-align: right; + + & + .right { + margin-bottom: 0; + + &:after { + content: none; + } + } + + &:after { + content: ""; + position: absolute; + right: -$chat-message-text-arrow-size; + bottom: 50%; + transform: translateY($chat-message-text-arrow-size); + width: 0; + height: 0; + border-top: $chat-message-text-arrow-size solid transparent; + border-bottom: $chat-message-text-arrow-size solid transparent; + border-left: $chat-message-text-arrow-size solid $chat-message-text-right-background-color; + } + + .chat-message-content { + background-color: $chat-message-text-right-background-color; + color: $chat-message-text-right-color; + } + } + + .chat-message-content { + display: inline-block; + padding: $chat-message-text-padding; + border-radius: $chat-message-text-border-radius; + max-width: $chat-message-width; + + @media (min-width: $messaging-desktop) { + max-width: $chat-message-width-mq; + } + + } + + &.attachment { + &:hover { + opacity: 0.8; + } + + .chat-message-content { + padding: 0; + text-decoration: none; + } + + .content { + padding: $chat-message-text-padding; + display: table; + + .preview { + display: table-cell; + vertical-align: middle; + padding-right: $chat-message-attachment-image-padding-right; + + img { + max-width: $chat-message-attachment-image-size; + max-height: $chat-message-attachment-image-size; + height: auto; + } + + .icon { + font-size: 50px; + opacity: 0.4; + + @extend .fa; + } + } + + .text { + display: table-cell; + vertical-align: middle; + font-weight: bold; + padding-right: $chat-message-attachment-image-padding-right; + } + } + + &.file { + .preview .icon { + @extend .fa-file-o; + } + } + } +} + +.chat-message-time { + color: $chat-message-time-color; + font-size: $chat-message-time-font-size; + + @include gradient-horizontal-three-colors($messaging-primary, $messaging-page-background, 50%, $messaging-primary); + + text-align: center; + margin: 30px 10px; + height: 1px; + + time { + display: inline-block; + position: relative; + bottom: 0; + transform: translateY(-50%); + color: $chat-message-time-color; + background-color: $messaging-page-background; + padding: 0 ($chat-message-time-font-size * 2); + text-transform: uppercase; + font-weight: bold; + } + + &.unread { + @include gradient-horizontal-three-colors($chat-message-time-unread, $messaging-page-background, 50%, $chat-message-time-unread); + + time { + color: $chat-message-time-unread; + } + } +} + +.messaging-footer-input { + display: table; + padding: $messaging-footer-input-padding; + width: 100%; + border-top: $messaging-footer-input-border; + + @media (min-width: $messaging-break) { + padding: $messaging-footer-input-padding-mq; + } + + .input-wrapper { + display: table-cell; + width: 100%; + vertical-align: top; + + .form-control{ + box-shadow: none; + display: block; + width: 100%; + height: 44px; + padding: 10px 20px; + font-size: 16px; + line-height: 1.42857; + color: #555555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + } + + input { + color: $messaging-footer-input-color; + width: 100%; + border-right: 0; + + } + } + + .buttons-wrapper { + display: table-cell; + vertical-align: top; + + .btn { + height: $messaging-footer-btn-height; + } + } +} diff --git a/source/stylesheets/utilities/_helpers.scss b/source/stylesheets/utilities/_helpers.scss index c304466..37cadef 100644 --- a/source/stylesheets/utilities/_helpers.scss +++ b/source/stylesheets/utilities/_helpers.scss @@ -22,6 +22,14 @@ text-overflow: ellipsis; } +@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { + background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); + background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); + background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback +} + // Helpers .sr-only { diff --git a/source/stylesheets/utilities/_variables.scss b/source/stylesheets/utilities/_variables.scss index 4ede8d4..5c0d1d6 100644 --- a/source/stylesheets/utilities/_variables.scss +++ b/source/stylesheets/utilities/_variables.scss @@ -19,4 +19,4 @@ $header-height-breakpoint: 5rem; $nav-responsive-width: 26rem; $border-radius: 3px; -$shadow: 0 2px 4px rgba(black, .08); +$shadow: 0 2px 4px rgba(black, .08); \ No newline at end of file From a3b08c3ded4017b32417c05326a4b113460a7e58 Mon Sep 17 00:00:00 2001 From: alexrodba Date: Thu, 6 Apr 2017 17:48:00 +0200 Subject: [PATCH 3/3] edited frontmatter for messaging page --- source/messaging/index.html.erb | 1 + 1 file changed, 1 insertion(+) diff --git a/source/messaging/index.html.erb b/source/messaging/index.html.erb index c1119c6..c90e689 100644 --- a/source/messaging/index.html.erb +++ b/source/messaging/index.html.erb @@ -1,6 +1,7 @@ --- title: Messaging messaging_user_link: /profile +subscription: true empty: true ---