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

tweaks to the dropdown styling on mobile

Browse Source
This commit is contained in:
gcampes 2017-03-16 11:34:03 -03:00
parent 8ef43d9270
commit 9ac3c01b01
4 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -151,7 +151,7 @@ class Dropdown extends Component {
className={styles.close}
label={intl.formatMessage(intlMessages.close)}
size={'lg'}
color={'danger'}
color={'default'}
onClick={this.handleHide}
/> : null }
</div>

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

@ -40,7 +40,9 @@ export default class DropdownContent extends Component {
style={style}
aria-expanded={this.props['aria-expanded']}
className={cx(styles.content, styles[placementName], className)}>
{boundChildren}
<div className={styles.scrollable}>
{boundChildren}
</div>
</div>
);
}

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

@ -12,9 +12,8 @@
flex-direction: column;
@include mq($small-only) {
font-size: 1.75rem;
padding: 1rem;
margin-bottom: 5rem;
font-size: $font-size-large;
padding: $line-height-computed;
}
}
@ -39,7 +38,7 @@
justify-content: flex-start;
@include mq($small-only) {
padding: ($line-height-computed / 1.25) 0;
padding: ($line-height-computed / 2) 0;
justify-content: center;
}

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

@ -1,4 +1,5 @@
@import "../../stylesheets/variables/_all";
@import "../../stylesheets/mixins/_scrollable";
$dropdown-bg: $color-white;
$dropdown-color: $color-text;
@ -18,7 +19,6 @@ $dropdown-caret-height: 8px;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
border: 1px solid rgba(0, 0, 0, .15);
padding: $line-height-computed / 2;
// min-width: 150px;
z-index: 1000;
&:after, &:before {
@ -37,21 +37,53 @@ $dropdown-caret-height: 8px;
}
@include mq($small-only) {
z-index: 1010;
overflow: auto;
z-index: 1015;
border-radius: 0;
background-color: #fff;
box-shadow: none;
position: fixed;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: 0 !important;
border-radius: 0;
border: 0 !important;
padding: 0 !important;
margin: 0 0 $line-height-computed * 5.25 0 !important;
transform: translateX(0) translateY(0) !important;
&:after, &:before {
display: none !important;
}
}
}
.scrollable {
@include mq($small-only) {
@include scrollbox-vertical();
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.trigger {}
.close {
display: none;
position: fixed;
bottom: 1rem;
z-index: 1011;
font-size: $font-size-large;
width: calc(100% - #{($line-height-computed * 2)});
left: $line-height-computed;
box-shadow: 0 0 0 2rem #fff;
@include mq($small-only) {
display: block;
}
}
/* Placements
* ==========
@ -246,18 +278,3 @@ $dropdown-caret-height: 8px;
@extend %vert-bottom-caret;
transform: translateX(100%) translateY(0);
}
.close {
display: none;
position: fixed;
bottom: 1rem;
z-index: 1011;
font-size: 1.5rem;
width: 94vw;
left: 50vw;
margin-left: -47vw;
@include mq($small-only) {
display: block;
}
}