From 67bc346ebbffe49e276a360a0e933b5193512448 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 15:39:24 +0000 Subject: [PATCH 1/2] Add CSS for CreateGroupDialog to give group ID input suffix and prefix style --- .../views/dialogs/_CreateGroupDialog.scss | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss index ebe89027a6..ea4fd31ac6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss @@ -33,3 +33,30 @@ limitations under the License. background-color: $primary-bg-color; } +.mx_CreateGroupDialog_input.has_prefix.has_suffix { + border-radius: 0px; +} + +.mx_CreateGroupDialog_input_group { + display: flex; +} + +.mx_CreateGroupDialog_input_prefix, +.mx_CreateGroupDialog_input_suffix { + height: 35px; + padding: 0px 5px; + line-height: 37px; + background-color: $input-border-color; + border: 1px solid $input-border-color; + text-align: center; +} + +.mx_CreateGroupDialog_input_prefix { + border-right: 0px; + border-radius: 3px 0px 0px 3px; +} + +.mx_CreateGroupDialog_input_suffix { + border-left: 0px; + border-radius: 0px 3px 3px 0px; +} From 290a501523376d9802b41f79c13c376c46bbeac8 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Fri, 3 Nov 2017 16:02:25 +0000 Subject: [PATCH 2/2] Use prefixed class names to avoid collisions with other libraries --- .../views/dialogs/_CreateGroupDialog.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss index ea4fd31ac6..500e12ee49 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss @@ -33,7 +33,7 @@ limitations under the License. background-color: $primary-bg-color; } -.mx_CreateGroupDialog_input.has_prefix.has_suffix { +.mx_CreateGroupDialog_input_hasPrefixAndSuffix { border-radius: 0px; } @@ -41,8 +41,8 @@ limitations under the License. display: flex; } -.mx_CreateGroupDialog_input_prefix, -.mx_CreateGroupDialog_input_suffix { +.mx_CreateGroupDialog_prefix, +.mx_CreateGroupDialog_suffix { height: 35px; padding: 0px 5px; line-height: 37px; @@ -51,12 +51,12 @@ limitations under the License. text-align: center; } -.mx_CreateGroupDialog_input_prefix { +.mx_CreateGroupDialog_prefix { border-right: 0px; border-radius: 3px 0px 0px 3px; } -.mx_CreateGroupDialog_input_suffix { +.mx_CreateGroupDialog_suffix { border-left: 0px; border-radius: 0px 3px 3px 0px; }