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 */
@media only screen and (max-width : @computerBreakpoint) {
.ui.modal > .header {
padding-right: @closeHitbox;
}
.ui.modal > .close {
top: @innerCloseTop;
right: @innerCloseRight;
@ -256,15 +259,23 @@
}
.ui.scrolling.dimmable.dimmed > .dimmer {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.ui.scrolling.dimmable > .dimmer {
position: fixed;
}
.ui.modal.scrolling {
.ui.scrolling.modal {
position: static;
margin: @scrollingMargin auto;
}
@media only screen and (max-width : @computerBreakpoint) {
.ui.scrolling.modal {
margin-top: @mobileScrollingMargin;
margin-bottom: @mobileScrollingMargin;
}
}
/*******************************
States
*******************************/
@ -285,11 +296,24 @@
width: @fullScreenWidth !important;
margin: @fullScreenMargin;
}
.ui.fullscreen.modal > .header {
padding-right: @closeHitbox;
}
.ui.fullscreen.modal > .close {
top: @innerCloseTop;
right: @innerCloseRight;
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
---------------*/

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

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

Loading…
Cancel
Save