diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss index d40826f530dea7235222611fea94b571deacd6c4..878bf6128d4714c8acd284546e86004266aa07d8 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss @@ -45,12 +45,10 @@ @extend %customInputFocus; flex: 1; background: #fff; - border: $border-size solid $color-gray-lighter; background-clip: padding-box; margin: 0; color: $color-text; -webkit-appearance: none; - box-shadow: none; outline: 0; padding: $sm-padding-y * 2.5 $sm-padding-x * 1.25; resize: none; @@ -59,6 +57,8 @@ font-size: $font-size-base * .90; min-height: 2.5rem; max-height: 10rem; + border: 1px solid $color-gray-lighter; + box-shadow: 0 0 0 2px $color-gray-lighter; &:disabled, &[disabled] { diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/focus.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/focus.scss index beb9914389da745daf30821c2a78416a6a37713e..f1a65e09f8c8427235d4acb626b05010403c8a9f 100644 --- a/bigbluebutton-html5/imports/ui/stylesheets/variables/focus.scss +++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/focus.scss @@ -1,6 +1,7 @@ -$focus-border-size: 3px; +$focus-border-size: 2px; $focus-border-offset: -4px; $color-primary: #0F70D7 !default; +$color-primary-input-shadow: lighten($color-primary, 35%); $user-list-bg: #F3F6F9; $color-white: #FFF; $list-item-bg-hover: darken($user-list-bg, 7%); @@ -10,7 +11,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%); border-radius: $focus-border-size; &:focus { - outline: none !important; + outline: none; border: $focus-border-size solid $color-primary; } } @@ -27,7 +28,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%); &, &:active { &:focus { - outline: none !important; + outline: none; border: $focus-border-size solid $user-list-bg; border-left: $focus-border-size solid $color-primary; padding-left: $focus-border-size; @@ -45,14 +46,25 @@ $list-item-bg-hover: darken($user-list-bg, 7%); &, &:active { &:focus { - outline: none !important; + outline: none; border-right: $focus-border-size solid $color-primary; border-bottom: 1px solid $color-primary; } } } -%customInputFocus, +%customInputFocus { + &, + &:active { + &:focus { + outline: none; + border: 1px solid $color-primary; + border-radius: $focus-border-size; + box-shadow: 0 0 0 2px $color-primary-input-shadow; + } + } +} + %customSelectFocus, %customLinkFocus { border: $focus-border-size solid $color-white; @@ -60,7 +72,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%); &, &:active { &:focus { - outline: none !important; + outline: none; border: $focus-border-size solid $color-primary; border-radius: $focus-border-size; } @@ -76,7 +88,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%); &, &:active { &:focus { - outline: none !important; + outline: none; span:first-of-type::before { position: absolute;