Преглед на файлове

Tweak the send button CSS (positioning and margin)

JC Brand преди 8 години
родител
ревизия
ef02b4b604
променени са 2 файла, в които са добавени 7 реда и са изтрити 7 реда
  1. 4 4
      css/converse.css
  2. 3 3
      sass/_chatbox.scss

+ 4 - 4
css/converse.css

@@ -1621,7 +1621,7 @@
     height: calc(100% - 96px); }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
-    height: calc(100% - 123px); }
+    height: calc(100% - 128px); }
   #converse-embedded-chat .chatbox .dropdown,
   #conversejs .chatbox .dropdown {
     /* status dropdown styles */
@@ -1667,13 +1667,13 @@
     #conversejs .chatbox form.sendXMPPMessage .send-button {
       position: absolute;
       left: 3px;
-      width: -webkit-calc(100% - 3px - 3px);
-      width: calc(100% - 3px - 3px);
+      width: -webkit-calc(100% - 6px);
+      width: calc(100% - 6px);
       background-color: #F4A261;
       color: white;
       font-size: 80%;
       height: 27px;
-      bottom: -24px; }
+      bottom: -30px; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;

+ 3 - 3
sass/_chatbox.scss

@@ -220,7 +220,7 @@
             height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
         }
         .chat-content-sendbutton {
-            height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 1px});
+            height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 2*$send-button-margin});
         }
 
         .dropdown { /* status dropdown styles */
@@ -261,12 +261,12 @@
             .send-button {
                 position: absolute;
                 left: $send-button-margin;
-                @include calc(width, '100% - #{$send-button-margin} - #{$send-button-margin}');
+                @include calc(width, '100% - #{2*$send-button-margin}');
                 background-color: $chat-head-color;
                 color: $inverse-link-color;
                 font-size: 80%;
                 height: $send-button-height;
-                bottom: -$send-button-height + $send-button-margin;
+                bottom: -$send-button-height - $send-button-margin;
 
             }
             .chat-toolbar {