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

fix btn positioning using media queries

Browse Source
This commit is contained in:
KDSBrowne 2018-01-09 13:13:31 -08:00
parent 438afc6241
commit 7c6e490b82
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
View File

@ -14,15 +14,26 @@
> * {
margin: 0 $sm-padding-x;
@include mq($small-only) {
margin: 0 5px;
}
}
}
.left{
position: absolute;
@include mq($small-only) {
bottom: $sm-padding-x;
left: $sm-padding-x;
}
}
.center {
align-items: center;
@include mq($xsmall-only) {
justify-content: right;
}
}
.button {

5
bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
View File

@ -7,6 +7,11 @@
> * {
margin: 0 $sm-padding-x;
@include mq($xsmall-only) {
margin: 0 5px;
justify-content: right;
}
span:first-child {
box-shadow: 0 2px 5px 0 rgb(0, 0, 0);
}

9
bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
View File

@ -13,9 +13,10 @@
@return nth($range, 2);
}
$small-range: (0em, 40em);
/* 0, 640px */
$xsmall-range: (0em, 23.437em);
/* 0, 375px */
$small-range: (23.5em, 40em);
/* 376p, 640px */
$medium-range: (40.063em, 64em);
/* 641px, 1024px */
$large-range: (64.063em, 90em);
@ -30,6 +31,7 @@ $landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
$xsmall-only: "#{$screen} and (min-width:#{lower-bound($xsmall-range)}) and (max-width:#{upper-bound($xsmall-range)})";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
@ -44,6 +46,7 @@ $breakpoints: (
'landscape': $landscape,
'portrait': $portrait,
'small': $small-only,
'xsmall': $xsmall-only,
'medium': $medium-only,
'large': $large-only,
'xlarge': $xlarge-only,