Add fullscreen example to modal, fix fullscreen style

build/less/definitions/modules/modal.less

@@ -251,7 +251,7 @@
 
 /* A modal that cannot fit on the page */
 
-.ui.scrolling.dimmable {
+.ui.scrolling.dimmable.dimmed {
   overflow: hidden;
 }
 .ui.scrolling.dimmable > .dimmer {
@@ -282,12 +282,14 @@
 .ui.fullscreen.modal {
   width: @fullScreenWidth !important;
   margin: @fullScreenMargin !important;
+  top: auto;
+  left: auto;
 }
 .ui.fullscreen.modal > .close {
-  right: 0em;
+  top: @innerCloseTop;
+  right: @innerCloseRight;
+  color: @innerCloseColor;
 }
-
-
 /*--------------
       Size
 ---------------*/

build/less/themes/packages/default/modules/modal.variables

@@ -77,8 +77,8 @@
 @largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
 @widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
 
-@fullScreenWidth: 99%;
-@fullScreenMargin: 0em 0em 0em -(@fullScreenWidth / 2);
+@fullScreenWidth: 95%;
+@fullScreenMargin: @scrollingMargin ((100% - @fullScreenWidth) / 2) @scrollingMargin;
 
 
 /*-------------------

build/minified/definitions/modules/modal.min.css

@@ -11,4 +11,4 @@
 * Released: 08/26/2014
 */
 
-.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;width:90%;margin-left:-45%;background:#fff;border:none;box-shadow:0 0 8px rgba(0,0,0,.8);border-radius:.25rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.modal>.icon:first-child+*,.ui.modal>:first-child:not(.icon){border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ui.modal>:last-child{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.ui.modal>.close{cursor:pointer;position:absolute;top:-2.5em;right:-2.5em;z-index:1;opacity:.8;font-size:1.25em;color:#fff;width:2.25em;height:2.25em;padding:.625em 0 0}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{display:block;font-family:Lato,'Helvetica Neue',Arial,sans-serif;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.05)) #fff;background:linear-gradient(transparent,rgba(0,0,0,.05)) #fff;margin:0;padding:1.5rem 2rem;box-shadow:0 2px 1px 0 rgba(0,0,0,.05);font-size:1.6em;font-weight:700;color:rgba(0,0,0,.85);border-bottom:1px solid rgba(0,0,0,.1)}.ui.modal>.content{display:table;table-layout:fixed;width:100%;font-size:1em;line-height:1.4;padding:2rem;background:#fff}.ui.modal>.content>.image{display:table-cell;width:'';vertical-align:top}.ui.modal>.content>.description{display:table-cell;min-width:'';vertical-align:top}.ui.modal>.content>.icon+.description,.ui.modal>.content>.image+.description{padding-left:1em}.ui.modal>.content>.image>i.icon{font-size:8rem;margin:0;opacity:1}.ui.modal .actions{background:#efefef;padding:1rem 2rem;border-top:1px solid rgba(0,0,0,.1);text-align:right}.ui.modal .actions>.button{margin-left:.75em}@media only screen and (max-width:767px){.ui.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.modal{width:88%;margin:0 0 0 -44%}}@media only screen and (min-width:992px){.ui.modal{width:74%;margin:0 0 0 -37%}}@media only screen and (min-width:1400px){.ui.modal{width:56%;margin:0 0 0 -28%}}@media only screen and (min-width:1900px){.ui.modal{width:42%;margin:0 0 0 -21%}}@media only screen and (max-width:767px){.ui.modal .content>.image{display:block;padding:0 0 1em}.ui.modal .content>.description{display:block;padding:0 0 1em;box-shadow:none}.ui.modal .content .image{width:auto!important;max-width:100%}.ui.modal .actions{padding-bottom:0}.ui.modal .actions>.button,.ui.modal .actions>.buttons{margin-bottom:1em}}@media only screen and (max-width:992px){.ui.modal>.close{top:1rem;right:1rem;color:rgba(0,0,0,.8)}}.ui.basic.modal{background-color:transparent;border:none;box-shadow:none;color:#fff}.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header{background-color:transparent}.ui.basic.modal>.header{color:#fff}.ui.basic.modal>.close{top:1.5rem;right:1rem}.ui.scrolling.dimmable{overflow:hidden}.ui.scrolling.dimmable>.dimmer{position:fixed;overflow:auto}.ui.modal.scrolling{position:static;margin:3rem auto}.ui.active.modal{display:block}.ui.fullscreen.modal{width:99%!important;margin:0 0 0 -49.5%!important}.ui.fullscreen.modal>.close{right:0}.ui.small.modal>.header{font-size:1.3em}@media only screen and (max-width:767px){.ui.small.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.small.modal{width:52.8%;margin:0 0 0 -26.4%}}@media only screen and (min-width:992px){.ui.small.modal{width:44.4%;margin:0 0 0 -22.2%}}@media only screen and (min-width:1400px){.ui.small.modal{width:33.6%;margin:0 0 0 -16.8%}}@media only screen and (min-width:1900px){.ui.small.modal{width:25.2%;margin:0 0 0 -12.6%}}.ui.large.modal>.header{font-size:1.6em}@media only screen and (max-width:767px){.ui.large.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0 0 0 -44%}}@media only screen and (min-width:992px){.ui.large.modal{width:88.8%;margin:0 0 0 -44.4%}}@media only screen and (min-width:1400px){.ui.large.modal{width:67.2%;margin:0 0 0 -33.6%}}@media only screen and (min-width:1900px){.ui.large.modal{width:50.4%;margin:0 0 0 -25.2%}}
+.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;width:90%;margin-left:-45%;background:#fff;border:none;box-shadow:0 0 8px rgba(0,0,0,.8);border-radius:.25rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.modal>.icon:first-child+*,.ui.modal>:first-child:not(.icon){border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ui.modal>:last-child{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.ui.modal>.close{cursor:pointer;position:absolute;top:-2.5em;right:-2.5em;z-index:1;opacity:.8;font-size:1.25em;color:#fff;width:2.25em;height:2.25em;padding:.625em 0 0}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{display:block;font-family:Lato,'Helvetica Neue',Arial,sans-serif;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.05)) #fff;background:linear-gradient(transparent,rgba(0,0,0,.05)) #fff;margin:0;padding:1.5rem 2rem;box-shadow:0 2px 1px 0 rgba(0,0,0,.05);font-size:1.6em;font-weight:700;color:rgba(0,0,0,.85);border-bottom:1px solid rgba(0,0,0,.1)}.ui.modal>.content{display:table;table-layout:fixed;width:100%;font-size:1em;line-height:1.4;padding:2rem;background:#fff}.ui.modal>.content>.image{display:table-cell;width:'';vertical-align:top}.ui.modal>.content>.description{display:table-cell;min-width:'';vertical-align:top}.ui.modal>.content>.icon+.description,.ui.modal>.content>.image+.description{padding-left:1em}.ui.modal>.content>.image>i.icon{font-size:8rem;margin:0;opacity:1}.ui.modal .actions{background:#efefef;padding:1rem 2rem;border-top:1px solid rgba(0,0,0,.1);text-align:right}.ui.modal .actions>.button{margin-left:.75em}@media only screen and (max-width:767px){.ui.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.modal{width:88%;margin:0 0 0 -44%}}@media only screen and (min-width:992px){.ui.modal{width:74%;margin:0 0 0 -37%}}@media only screen and (min-width:1400px){.ui.modal{width:56%;margin:0 0 0 -28%}}@media only screen and (min-width:1900px){.ui.modal{width:42%;margin:0 0 0 -21%}}@media only screen and (max-width:767px){.ui.modal .content>.image{display:block;padding:0 0 1em}.ui.modal .content>.description{display:block;padding:0 0 1em;box-shadow:none}.ui.modal .content .image{width:auto!important;max-width:100%}.ui.modal .actions{padding-bottom:0}.ui.modal .actions>.button,.ui.modal .actions>.buttons{margin-bottom:1em}}@media only screen and (max-width:992px){.ui.modal>.close{top:1rem;right:1rem;color:rgba(0,0,0,.8)}}.ui.basic.modal{background-color:transparent;border:none;box-shadow:none;color:#fff}.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header{background-color:transparent}.ui.basic.modal>.header{color:#fff}.ui.basic.modal>.close{top:1.5rem;right:1rem}.ui.scrolling.dimmable.dimmed{overflow:hidden}.ui.scrolling.dimmable>.dimmer{position:fixed;overflow:auto}.ui.modal.scrolling{position:static;margin:3rem auto}.ui.active.modal{display:block}.ui.fullscreen.modal{width:95%!important;margin:3rem 2.5%!important;top:auto;left:auto}.ui.fullscreen.modal>.close{top:1rem;right:1rem;color:rgba(0,0,0,.8)}.ui.small.modal>.header{font-size:1.3em}@media only screen and (max-width:767px){.ui.small.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.small.modal{width:52.8%;margin:0 0 0 -26.4%}}@media only screen and (min-width:992px){.ui.small.modal{width:44.4%;margin:0 0 0 -22.2%}}@media only screen and (min-width:1400px){.ui.small.modal{width:33.6%;margin:0 0 0 -16.8%}}@media only screen and (min-width:1900px){.ui.small.modal{width:25.2%;margin:0 0 0 -12.6%}}.ui.large.modal>.header{font-size:1.6em}@media only screen and (max-width:767px){.ui.large.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0 0 0 -44%}}@media only screen and (min-width:992px){.ui.large.modal{width:88.8%;margin:0 0 0 -44.4%}}@media only screen and (min-width:1400px){.ui.large.modal{width:67.2%;margin:0 0 0 -33.6%}}@media only screen and (min-width:1900px){.ui.large.modal{width:50.4%;margin:0 0 0 -25.2%}}

build/packaged/definitions/css/semantic.css

@@ -18319,7 +18319,7 @@ body.ui.dimmed.dimmable > :not(.dimmer) {
             Variations
 *******************************/
 /* A modal that cannot fit on the page */
-.ui.scrolling.dimmable {
+.ui.scrolling.dimmable.dimmed {
   overflow: hidden;
 }
 .ui.scrolling.dimmable > .dimmer {
@@ -18343,11 +18343,15 @@ body.ui.dimmed.dimmable > :not(.dimmer) {
    Full Screen
 ---------------*/
 .ui.fullscreen.modal {
-  width: 99% !important;
-  margin: 0em 0em 0em -49.5% !important;
+  width: 95% !important;
+  margin: 3rem 2.5% 3rem !important;
+  top: auto;
+  left: auto;
 }
 .ui.fullscreen.modal > .close {
-  right: 0em;
+  top: 1rem;
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.8);
 }
 /*--------------
       Size

build/uncompressed/definitions/modules/modal.css

@@ -376,7 +376,7 @@
             Variations
 *******************************/
 /* A modal that cannot fit on the page */
-.ui.scrolling.dimmable {
+.ui.scrolling.dimmable.dimmed {
   overflow: hidden;
 }
 .ui.scrolling.dimmable > .dimmer {
@@ -400,11 +400,15 @@
    Full Screen
 ---------------*/
 .ui.fullscreen.modal {
-  width: 99% !important;
-  margin: 0em 0em 0em -49.5% !important;
+  width: 95% !important;
+  margin: 3rem 2.5% 3rem !important;
+  top: auto;
+  left: auto;
 }
 .ui.fullscreen.modal > .close {
-  right: 0em;
+  top: 1rem;
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.8);
 }
 /*--------------
       Size

server/documents/modules/modal.html.eco

@@ -46,10 +46,10 @@ themes      : ['default', 'fixed-width']
   <div class="ui small modal">
     <i class="close icon"></i>
     <div class="header">
-      Changing Your Thing
+      Delete Your Account
     </div>
     <div class="content">
-      <p>Do you want to change that thing to something else?</p>
+      <p>Are you sure you want to delete your account</p>
     </div>
     <div class="actions">
       <div class="ui negative button">
@@ -62,6 +62,105 @@ themes      : ['default', 'fixed-width']
     </div>
   </div>
 
+  <div class="ui fullscreen modal">
+    <i class="close icon"></i>
+    <div class="header">
+      Update Your Account Settings
+    </div>
+    <div class="content">
+      <div class="ui form">
+        <h4 class="ui dividing header">Personal Information</h4>
+        <div class="two fields">
+          <div class="field">
+            <label>Name</label>
+            <div class="two fields">
+              <div class="field">
+                <input type="text" name="first-name" placeholder="First Name">
+              </div>
+              <div class="field">
+                <input type="text" name="last-name" placeholder="Last Name">
+              </div>
+            </div>
+          </div>
+          <div class="field">
+            <label>Gender</label>
+            <div class="ui selection dropdown">
+              <input type="hidden" name="gender">
+              <div class="default text">Gender</div>
+              <i class="dropdown icon"></i>
+              <div class="menu">
+                <div class="item" data-value="male">Male</div>
+                <div class="item" data-value="female">Female</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="field">
+          <label>Biography</label>
+          <textarea></textarea>
+        </div>
+        <h4 class="ui dividing header">Account Info</h4>
+        <div class="two fields">
+          <div class="required field">
+            <label>Username</label>
+            <div class="ui left labeled icon input">
+              <input type="text" placeholder="Username">
+              <i class="user icon"></i>
+            </div>
+          </div>
+          <div class="required field">
+            <label>Password</label>
+            <div class="ui left labeled icon input">
+              <input type="password">
+              <i class="lock icon"></i>
+            </div>
+          </div>
+        </div>
+
+        <h4 class="ui dividing header">Settings</h4>
+        <h5 class="ui header">Privacy</h5>
+        <div class="field">
+          <div class="ui toggle checkbox">
+            <input type="radio" name="privacy">
+            <label>Allow <b>anyone</b> to see my account</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui toggle checkbox">
+            <input type="radio" name="privacy">
+            <label>Allow <b>only friends</b> to see my account</label>
+          </div>
+        </div>
+        <h5 class="ui header">Newsletter Subscriptions</h5>
+        <div class="field">
+          <div class="ui slider checkbox">
+            <input type="checkbox" name="top-posts">
+            <label>Top Posts This Week</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui slider checkbox">
+            <input type="checkbox" name="hot-deals">
+            <label>Hot Deals</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <input type="checkbox" name="hot-deals">
+            <label>I agree to the <a href="#">Terms of Service</a>.</label>
+          </div>
+        </div>
+        <div class="ui error message">
+          <div class="header">We noticed some issues</div>
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="ui button">Cancel</div>
+      <div class="ui green button">Update</div>
+    </div>
+  </div>
+
   <div class="ui large modal">
     <i class="close icon"></i>
     <div class="header">
@@ -141,6 +240,15 @@ themes      : ['default', 'fixed-width']
 
     <h2 class="ui dividing header">Variations</h2>
 
+    <div class="no example">
+      <h4 class="ui header">Full Screen</h4>
+      <p>A modal can use the entire size of the screen</p>
+      <div class="code" data-demo="true">
+      $('.fullscreen.modal')
+        .modal('show')
+      ;
+      </div>
+    </div>
     <div class="no example">
       <h4 class="ui header">Size</h4>
       <p>A modal can vary in size</p>
@@ -162,7 +270,7 @@ themes      : ['default', 'fixed-width']
       <h4 class="ui header">Active</h4>
       <p>An active modal is visible on the page</p>
       <div class="code" data-type="html">
-        <div class="active ui modal">...</div>
+        <div class="ui active modal"></div>
       </div>
     </div>
   </div>

server/files/javascript/modal.js

@@ -24,6 +24,9 @@ semantic.modal.ready = function() {
         }
       })
     ;
+    $('.ui.checkbox')
+      .checkbox()
+    ;
 
 
 };

server/files/stylesheets/semantic.css

@@ -159,6 +159,10 @@ a:hover {
   display: none;
 }
 
+#example .code .active.ui.modal {
+  display: none !important;
+}
+
 #example #menu .item .item {
   font-size: 0.875rem;
 }

src/definitions/modules/modal.less

@@ -282,12 +282,14 @@
 .ui.fullscreen.modal {
   width: @fullScreenWidth !important;
   margin: @fullScreenMargin !important;
+  top: auto;
+  left: auto;
 }
 .ui.fullscreen.modal > .close {
-  right: 0em;
+  top: @innerCloseTop;
+  right: @innerCloseRight;
+  color: @innerCloseColor;
 }
-
-
 /*--------------
       Size
 ---------------*/

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

@@ -77,8 +77,8 @@
 @largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
 @widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
 
-@fullScreenWidth: 99%;
-@fullScreenMargin: 0em 0em 0em -(@fullScreenWidth / 2);
+@fullScreenWidth: 95%;
+@fullScreenMargin: @scrollingMargin ((100% - @fullScreenWidth) / 2) @scrollingMargin;
 
 
 /*-------------------