BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4413 from KDSBrowne/x2.0.6-custom-button-focus

Browse Source 
[HTML5] - Custom Element Focus Styles
This commit is contained in:
Anton Georgiev 2017-10-03 16:21:25 -04:00 committed by GitHub
commit 7932ebd938
17 changed files with 147 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
View File

@ -78,6 +78,14 @@ Button.audioBtn:last-of-type {
i {
color: $color-link;
}
&,
&:focus,
&:hover {
i {
color: $color-white;
}
}
}
.topRow {
@ -142,7 +150,8 @@ Button.audioBtn:last-of-type {
}
.select {
background-color: #fff;
@extend %customSelectFocus;
background-color: $color-white;
border: 0;
border-bottom: 0.1rem solid $color-text;
color: $color-text;

2
bigbluebutton-html5/imports/ui/components/audio/device-selector/component.jsx
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from '../audio-modal/styles';
const propTypes = {
kind: PropTypes.oneOf(['audioinput', 'audiooutput', 'videoinput']),
@ -69,6 +70,7 @@ class DeviceSelector extends Component {
value={value}
onChange={this.handleSelectChange}
disabled={!options.length}
className={styles.select}
>
{
options.length ?

50
bigbluebutton-html5/imports/ui/components/button/styles.scss
View File

@ -37,28 +37,15 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
* ==========
*/
.button {
border: $btn-border-size solid transparent;
border-radius: $btn-border-radius;
@extend %btnFocus;
font-weight: $btn-font-weight;
display: inline-block;
border-style: solid;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
transition: all .2s ease-in-out;
//box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
&,
&:active {
&:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
}
&:hover,
&:focus {
@ -68,7 +55,6 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
&:active {
background-image: none;
outline: 0;
//box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
&[aria-disabled="true"] {
@ -77,25 +63,35 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
box-shadow: none;
pointer-events: none;
}
&,
&:active {
&:focus {
span:first-of-type::before {
border-radius: $focus-border-size;
}
}
}
}
.buttonWrapper {
display: inline-block;
@extend %btnFocus;
&,
&:active {
&:focus {
span:first-of-type::before {
border-radius: 50%;
}
}
}
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background: none;
border: 0;
padding: 0 !important;
&:active {
&:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
}
}
.label {
@ -110,6 +106,8 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
text-align: center;
white-space: nowrap;
vertical-align: middle;
}
.buttonWrapper.sm & {

1
bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
View File

@ -42,6 +42,7 @@
}
.input {
@extend %customInputFocus;
flex: 1;
background: #fff;
border: $border-size solid $color-gray-lighter;

1
bigbluebutton-html5/imports/ui/components/chat/styles.scss
View File

@ -18,6 +18,7 @@
flex-shrink: 0;
a {
@extend %customLinkFocus;
text-decoration: none;
display: block;
}

1
bigbluebutton-html5/imports/ui/components/dropdown/component.jsx
View File

@ -167,6 +167,7 @@ class Dropdown extends Component {
aria-relevant={otherProps['aria-relevant']}
aria-haspopup={otherProps['aria-haspopup']}
aria-label={otherProps['aria-label']}
tabIndex={-1}
>
{trigger}
{content}

1
bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
View File

@ -37,6 +37,7 @@
}
.item {
@extend %customListItemFocus;
flex: 1 1 100%;
padding: ($line-height-computed / 3) 0;
display: flex;

1
bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
View File

@ -5,6 +5,7 @@
flex-direction: column;
align-self: flex-start;
padding: ($line-height-computed / 2) $line-height-computed;
outline: none;
}
.content {

9
bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
View File

@ -53,13 +53,15 @@
}
.select {
@extend %customSelectFocus;
background-color: #fff;
border: 0;
border: $focus-border-size solid #fff;
border-radius: $focus-border-size;
border-bottom: 0.1rem solid $color-gray-lighter;
color: $color-gray-label;
width: 100%;
// appearance: none;
height: 1.75rem;
padding: 1px;
}
.pullContentRight {
@ -89,6 +91,7 @@
}
.swatch {
@extend %customSelectFocus;
position: absolute;
float: right;
background: #fff;
@ -101,7 +104,7 @@
.swatchInner {
width: 3rem;
height: 1.1rem;
border-radius: 3px;
border-radius: $focus-border-size;
}
.colorPickerOverlay {

1
bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
View File

@ -1,6 +1,7 @@
@import "../styles.scss";
.chatListItem {
@extend %customChatItemFocus;
@extend %list-item;
cursor: pointer;
padding: 0;

13
bigbluebutton-html5/imports/ui/components/user-list/styles.scss
View File

@ -6,12 +6,8 @@
*/
$unread-messages-bg: $color-danger;
$user-list-bg: #F3F6F9;
$user-list-text: $color-gray;
$list-item-bg-hover: darken($user-list-bg, 7%);
$user-thumbnail-border: $color-gray-light;
$user-thumbnail-text: $user-thumbnail-border;
@ -42,9 +38,6 @@ $user-icons-color-hover: $color-gray;
%list-item {
display: flex;
flex-flow: row;
padding-left: $sm-padding-x / 2;
margin-left: $sm-padding-x / 2;
padding-right: $sm-padding-x;
padding-top: $sm-padding-y;
padding-bottom: $sm-padding-y;
margin-top: $sm-padding-y * 2;
@ -53,12 +46,6 @@ $user-icons-color-hover: $color-gray;
border-bottom-left-radius: 5px;
cursor: pointer;
&:hover,
&:focus {
background-color: $list-item-bg-hover;
outline: none;
}
&:first-child {
margin-top: 0;
}

3
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
View File

@ -6,3 +6,6 @@
overflow: hidden;
}
.scrollableList {
@extend %customListFocus;
}

1
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/styles.scss
View File

@ -11,6 +11,7 @@
.scrollableList {
@include scrollbox-vertical($user-list-bg);
@extend %customListFocus;
}
.separator {

1
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/styles.scss
View File

@ -66,6 +66,7 @@
}
.userListItem {
@extend %customUserItemFocus;
@extend %list-item;
flex-flow: column;
flex-shrink: 0;

1
bigbluebutton-html5/imports/ui/stylesheets/variables/_all.scss
View File

@ -2,3 +2,4 @@
@import "./breakpoints";
@import "./palette";
@import "./typography";
@import "./focus";

92
bigbluebutton-html5/imports/ui/stylesheets/variables/focus.scss Normal file
View File

@ -0,0 +1,92 @@
$focus-border-size: 3px;
$focus-border-offset: -4px;
$color-primary: #0F70D7 !default;
$user-list-bg: #F3F6F9;
$color-white: #FFF;
$list-item-bg-hover: darken($user-list-bg, 7%);
%customListFocus {
border: $focus-border-size solid $user-list-bg;
border-radius: $focus-border-size;
&:focus {
outline: none !important;
border: $focus-border-size solid $color-primary;
}
}
%customUserItemFocus,
%customChatItemFocus {
border: $focus-border-size solid $user-list-bg;
border-radius: $focus-border-size;
&:hover {
background-color: $list-item-bg-hover;
}
&,
&:active {
&:focus {
outline: none !important;
border: $focus-border-size solid $user-list-bg;
border-left: $focus-border-size solid $color-primary;
padding-left: $focus-border-size;
border-radius: $focus-border-size;
}
}
}
%customListItemFocus {
position: relative;
display: inline-block;
border-right: $focus-border-size solid $color-white;
border-bottom: 1px solid $color-white;
&,
&:active {
&:focus {
outline: none !important;
border-right: $focus-border-size solid $color-primary;
border-bottom: 1px solid $color-primary;
}
}
}
%customInputFocus,
%customSelectFocus,
%customLinkFocus {
border: $focus-border-size solid $color-white;
&,
&:active {
&:focus {
outline: none !important;
border: $focus-border-size solid $color-primary;
border-radius: $focus-border-size;
}
}
}
%btnFocus {
border: none;
position: relative;
overflow: visible;
display: inline-block;
&,
&:active {
&:focus {
outline: none !important;
span:first-of-type::before {
position: absolute;
content: '';
top: $focus-border-offset;
left: $focus-border-offset;
right: $focus-border-offset;
bottom: $focus-border-offset;
border: $focus-border-size solid $color-primary;
}
}
}
}

1
bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
View File

@ -1,3 +1,4 @@
$border-size: 2px;
$border-radius: .2rem;