Browse Source

Fixes scrolling modal margin on mobile, fixes fullscreen on mobile, fixes header overlaping inline close icon

pull/1129/head
jlukic 10 years ago
parent
commit
aa4a1c2047
2 changed files with 30 additions and 5 deletions
  1. 26
      src/definitions/modules/modal.less
  2. 9
      src/themes/packages/default/modules/modal.variables

26
src/definitions/modules/modal.less

@ -214,6 +214,9 @@
} }
/* Tablet and Mobile */ /* Tablet and Mobile */
@media only screen and (max-width : @computerBreakpoint) { @media only screen and (max-width : @computerBreakpoint) {
.ui.modal > .header {
padding-right: @closeHitbox;
}
.ui.modal > .close { .ui.modal > .close {
top: @innerCloseTop; top: @innerCloseTop;
right: @innerCloseRight; right: @innerCloseRight;
@ -256,15 +259,23 @@
} }
.ui.scrolling.dimmable.dimmed > .dimmer { .ui.scrolling.dimmable.dimmed > .dimmer {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
.ui.scrolling.dimmable > .dimmer { .ui.scrolling.dimmable > .dimmer {
position: fixed; position: fixed;
} }
.ui.modal.scrolling {
.ui.scrolling.modal {
position: static; position: static;
margin: @scrollingMargin auto; margin: @scrollingMargin auto;
} }
@media only screen and (max-width : @computerBreakpoint) {
.ui.scrolling.modal {
margin-top: @mobileScrollingMargin;
margin-bottom: @mobileScrollingMargin;
}
}
/******************************* /*******************************
States States
*******************************/ *******************************/
@ -285,11 +296,24 @@
width: @fullScreenWidth !important; width: @fullScreenWidth !important;
margin: @fullScreenMargin; margin: @fullScreenMargin;
} }
.ui.fullscreen.modal > .header {
padding-right: @closeHitbox;
}
.ui.fullscreen.modal > .close { .ui.fullscreen.modal > .close {
top: @innerCloseTop; top: @innerCloseTop;
right: @innerCloseRight; right: @innerCloseRight;
color: @innerCloseColor; color: @innerCloseColor;
} }
@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
.ui.fullscreen.modal {
width: auto !important;
margin: @fullScreenMobileMargin !important;
top: 0% !important;
left: 0% !important;
}
}
/*-------------- /*--------------
Size Size
---------------*/ ---------------*/

9
src/themes/packages/default/modules/modal.variables

@ -78,8 +78,8 @@
@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2); @widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
@fullScreenWidth: 95%; @fullScreenWidth: 95%;
@fullScreenMargin: @scrollingMargin 0em @scrollingMargin -(@fullScreenWidth / 2);
@fullScreenMargin: 1em 0em 1em -(@fullScreenWidth / 2);
@fullScreenMobileMargin: 1em;
/*------------------- /*-------------------
Types Types
@ -92,14 +92,15 @@
@basicModalCloseRight: 1rem; @basicModalCloseRight: 1rem;
/* Scrolling Margin */ /* Scrolling Margin */
@scrollingMargin: 3rem;
@scrollingMargin: 3.5rem;
@mobileScrollingMargin: 1rem;
/*------------------- /*-------------------
Variations Variations
--------------------*/ --------------------*/
/* Sizes */
/* Size Widths */
@smallRatio: 0.6; @smallRatio: 0.6;
@largeRatio: 1.2; @largeRatio: 1.2;

Loading…
Cancel
Save