From 26404c87f77f9aa8e05d973b6e76b3d55e16158c Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Tue, 2 Oct 2018 23:08:32 +0000
Subject: [PATCH] remove button color type 'primary-outlined'
---
.../ui/components/actions-bar/container.jsx | 6 +--
.../ui/components/button/component.jsx | 2 +-
.../imports/ui/components/button/styles.scss | 39 ---------------
.../imports/ui/components/poll/component.jsx | 4 +-
.../imports/ui/components/poll/styles.scss | 50 +++++++++++++++++++
5 files changed, 55 insertions(+), 46 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
index 0ee93e14f4..fcfe49ef69 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
@@ -10,10 +10,8 @@ import { withRouter } from 'react-router';
const ActionsBarContainer = props => <ActionsBar {...props} />;
export default withRouter(withTracker(({ location, router }) => {
- const togglePollMenu = () => {
- return location.pathname.includes('poll')
- ? router.push('/') : router.push('/users/poll');
- };
+ const togglePollMenu = () => (location.pathname.includes('poll')
+ ? router.push('/') : router.push('/users/poll'));
return {
isUserPresenter: Service.isUserPresenter(),
diff --git a/bigbluebutton-html5/imports/ui/components/button/component.jsx b/bigbluebutton-html5/imports/ui/components/button/component.jsx
index 79db76fa40..4ca5fc9843 100644
--- a/bigbluebutton-html5/imports/ui/components/button/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/button/component.jsx
@@ -11,7 +11,7 @@ const SIZES = [
];
const COLORS = [
- 'default', 'primary', 'danger', 'success', 'primary-outlined',
+ 'default', 'primary', 'danger', 'success',
];
const propTypes = {
diff --git a/bigbluebutton-html5/imports/ui/components/button/styles.scss b/bigbluebutton-html5/imports/ui/components/button/styles.scss
index dd8af67002..46c91e3abf 100644
--- a/bigbluebutton-html5/imports/ui/components/button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/button/styles.scss
@@ -33,11 +33,6 @@ $btn-lg-padding: $lg-padding-y $lg-padding-x;
$btn-jumbo-font-size: 3rem;
$btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
-$btn-outlined-hover: #1A73D4;
-$btn-outlined-bg: $color-white;
-$btn-outlined-color: $color-gray-light;
-$btn-outlined-border: $color-gray-light;
-
/* Base
* ==========
*/
@@ -220,36 +215,6 @@ $btn-outlined-border: $color-gray-light;
}
}
-@mixin button-outlined-variant($color, $background, $border, $color-outline) {
- color: $color;
- background-color: $background;
- box-shadow: 0 0 0 1px $border;
-
- &:hover,
- .buttonWrapper:hover & {
- color: $color-outline;
- background-color: $background;
- box-shadow: 0 0 0 1px $color-outline;
-
- .label:hover {
- color: $color-outline !important;
- opacity: 1 !important;
- }
- }
-
- &:focus,
- .buttonWrapper:focus:not([aria-disabled="true"]) & {
- outline: none !important;
- color: $color-outline;
- background-color: $background;
- box-shadow: 0 0 0 $border-size $color-outline;
- }
-
- &:active {
- box-shadow: 0 0 0 $border-size $color-outline;
- }
-}
-
.default {
@include button-variant($btn-default-color, $btn-default-bg, $btn-primary-border);
}
@@ -266,10 +231,6 @@ $btn-outlined-border: $color-gray-light;
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
-.primary-outlined {
- @include button-outlined-variant($btn-outlined-color, $btn-outlined-bg, $btn-outlined-border, $btn-outlined-hover);
-}
-
/* Styles
* ==========
*/
diff --git a/bigbluebutton-html5/imports/ui/components/poll/component.jsx b/bigbluebutton-html5/imports/ui/components/poll/component.jsx
index d6deb5327e..3db8fb6d33 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/poll/component.jsx
@@ -165,7 +165,7 @@ class Poll extends Component {
arr.push(<Button
label={label}
- color="primary-outlined"
+ color="default"
className={styles.pollBtn}
key={_.uniqueId('quick-poll-')}
onClick={() => {
@@ -248,7 +248,7 @@ class Poll extends Component {
</div>
<Button
className={styles.customBtn}
- color="primary-outlined"
+ color="default"
onClick={this.toggleCustomFields}
label={intl.formatMessage(intlMessages.customPollLabel)}
/>
diff --git a/bigbluebutton-html5/imports/ui/components/poll/styles.scss b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
index 398bc083d2..858da617b8 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
@@ -72,9 +72,59 @@ $column-amount: 2;
margin-right: $sm-padding-y;
}
+.customBtn:hover,
+.pollBtn:hover {
+ box-shadow: 0 0 0 1px #1A73D4;
+ background-color: $color-white;
+ color: #1A73D4;
+
+ > span {
+ color: #1A73D4;
+ opacity: 1;
+ }
+}
+
+.customBtn,
.pollBtn {
margin-top: $sm-padding-y;
margin-bottom: $sm-padding-y;
+ background-color: $color-white;
+ box-shadow: 0 0 0 1px $color-gray-light;
+ color: $color-gray-light;
+
+ > span {
+ color: $color-gray-light;
+ }
+
+ > span:hover {
+ color: #1A73D4;
+ opacity: 1;
+ }
+}
+
+.customBtn:active,
+.pollBtn:active {
+ &:focus {
+ box-shadow: 0 0 0 1px #1A73D4;
+ }
+
+
+ background-color: $color-white;
+ box-shadow: 0 0 0 1px #1A73D4;
+
+ > span {
+ color: #1A73D4;
+ }
+}
+
+.customBtn:focus,
+.pollBtn:focus {
+ background-color: $color-white;
+ box-shadow: 0 0 0 1px #1A73D4;
+
+ > span {
+ color: #1A73D4;
+ }
}
.input {
--
GitLab