From ea19096db368b4bde9f74f4c93b6155d30d2b859 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 25 Oct 2017 23:56:31 +0100 Subject: [PATCH] skin all the buttons --- src/skins/vector/css/_common.scss | 26 ++++--------------- .../structures/_UserSettings.scss | 23 +--------------- .../views/rooms/_MemberDeviceInfo.scss | 10 +------ .../views/rooms/_RoomHeader.scss | 16 ++---------- .../views/rooms/_RoomSettings.scss | 10 +------ src/skins/vector/css/themes/_base.scss | 24 +++++++++++++++++ .../vector/themes/status/css/_status.scss | 24 +++++++++++++++-- 7 files changed, 56 insertions(+), 77 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 0802c1cab2..d5f2c0da71 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -200,21 +200,13 @@ textarea { } .mx_Dialog button, .mx_Dialog input[type="submit"] { - border: 0px; - height: 36px; - border-radius: 40px; - border: solid 1px $accent-color; - font-weight: 600; - font-size: 14px; - font-family: $font-family; + @mixin mx_DialogButton; margin-left: 0px; margin-right: 8px; - padding-left: 1.5em; - padding-right: 1.5em; - outline: none; - cursor: pointer; + + // flip colours for the secondary ones color: $accent-color; - background-color: $primary-bg-color; + background-color: $accent-fg-color; /* align images in buttons (eg spinners) */ vertical-align: middle; @@ -282,16 +274,8 @@ textarea { color: $selection-fg-color; } -/** green button with rounded corners */ .mx_textButton { - color: $accent-fg-color; - background-color: $accent-color; - border-radius: 17px; - text-align: center; - padding-left: 1em; - padding-right: 1em; - cursor: pointer; - display: inline; + @mixin mx_DialogButton_small; } .mx_button_row { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 6607253886..3b9ab39df5 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -64,30 +64,9 @@ limitations under the License. } .mx_UserSettings_button { + @mixin mx_DialogButton; display: inline; - vertical-align: middle; - border: 0px; - border-radius: 36px; - font-weight: 400; - font-size: 16px; - color: $accent-fg-color; - background-color: $accent-color; - width: auto; margin: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; -} - -.mx_UserSettings_button.mx_UserSettings_buttonSmall { - height: 36px; - padding: 4px; - padding-left: 7px; - padding-right: 7px; - font-size: 12px; - margin-right: 5px; - line-height: 12px; } .mx_UserSettings_button.danger { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 2a5be3250d..4b1abead9e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -26,15 +26,7 @@ limitations under the License. } .mx_MemberDeviceInfo_textButton { - color: $accent-fg-color; - background-color: $accent-color; - border-radius: 17px; - text-align: center; - padding-left: 1em; - padding-right: 1em; - border: 0px; - font-size: 14px; - cursor: pointer; + @mixin mx_DialogButton_small; margin: 2px; flex: 1; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index b16cf8b6a4..475dcbeaec 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -42,22 +42,10 @@ limitations under the License. } .mx_RoomHeader_textButton { - height: 36px; - background-color: $accent-color; - border-radius: 36px; + @mixin mx_DialogButton; margin-right: 8px; - color: $accent-fg-color; - line-height: 34px; - margin-top: -2px; - text-align: center; + margin-top: -5px; order: 2; - cursor: pointer; - -/* - flex: 0 0 90px; -*/ - padding-left: 12px; - padding-right: 12px; } .mx_RoomHeader_textButton_danger { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 9e269ac2b5..52013a6bf4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -22,17 +22,9 @@ limitations under the License. .mx_RoomSettings_leaveButton, .mx_RoomSettings_unbanButton { + @mixin mx_DialogButton; position: relative; - height: 36px; - background-color: $accent-color; - border-radius: 36px; margin-right: 8px; - color: $accent-fg-color; - line-height: 34px; - text-align: center; - cursor: pointer; - padding-left: 12px; - padding-right: 12px; } .mx_RoomSettings_integrationsButton_error { position: relative; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index ec4a2f3c0f..785c246c78 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -130,3 +130,27 @@ $lightbox-border-color: #ffffff; // unused? $progressbar-color: #000; + +// ***** Mixins! ***** + +@define-mixin mx_DialogButton { + vertical-align: middle; + border: 0px; + border-radius: 36px; + height: 33px; + font-weight: 400; + font-size: 16px; + color: $accent-fg-color; + background-color: $accent-color; + width: auto; + padding: 7px; + padding-left: 1.5em; + padding-right: 1.5em; + cursor: pointer; + display: inline-block; +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + height: auto; +} diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 48aa6f28e1..9b858d9420 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -96,7 +96,7 @@ $event-selected-color: #f7f7f7; $primary-hairline-color: #e5e5e5; // used for the border of input text fields -$input-border-color: #f0f0f0; +$input-border-color: #c9cfd4; // apart from login forms, which have stronger border $strong-input-border-color: #c7c7c7; @@ -178,7 +178,6 @@ $progressbar-color: #000; @define-mixin mx_DialogButton { border-radius: 8px; - height: 45px; border: 1px solid rgba(199, 206, 209, 0.12); background-color: $accent-color; font-size: 13px; @@ -186,6 +185,22 @@ $progressbar-color: #000; text-transform: uppercase; letter-spacing: 1px; color: $accent-fg-color; + cursor: pointer; + outline: none; + padding: 14px; + box-sizing: border-box; + padding-left: 1.5em; + padding-right: 1.5em; + display: inline-block; +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + height: auto; + padding-top: 7px; + padding-bottom: 7px; + padding-left: 1em; + padding-right: 1em; } .mx_RoomSubList_label { @@ -219,4 +234,9 @@ $progressbar-color: #000; margin-top: 8px ! important; margin-bottom: 7px ! important; padding: 8px ! important; +} + +.mx_RoomDirectory_perm { + font-family: $header-font-family ! important; + background-color: #fff ! important; } \ No newline at end of file