Rebuilds dist

fomantic · Apr 13, 2014 · 8c04c66 · 8c04c66
1 parent dfe043f
commit 8c04c66
Show file tree

Hide file tree

Showing 6 changed files with 653 additions and 293 deletions.
diff --git a/build/less/definitions/modules/modal.less b/build/less/definitions/modules/modal.less
@@ -9,6 +9,15 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'modal';
+
+@import '../../semantic.config';
+
 /*******************************
              Modal
 *******************************/
@@ -22,19 +31,13 @@
   left: 50%;
   text-align: left;
 
-  width: 90%;
-  margin-left: -45%;
+  width: @modalWidth;
+  margin-left: @modalXOffset;
 
   background-color: #FFFFFF;
   border: 1px solid #DDDDDD;
 
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
+  border-radius: @modalBorderRadius;
   user-select: text;
 }
 
@@ -50,15 +53,17 @@
 .ui.modal > .close {
   cursor: pointer;
   position: absolute;
+  top: @modalCloseTop;
+  right: @modalCloseRight;
   z-index: 1;
-
-  opacity: 0.8;
 
-  font-size: 1.25em;
-  top: -1.75em;
-  right: -1.75em;
+  opacity: @modalCloseOpacity;
+  font-size: @modalCloseSize;
+  color: @modalCloseColor;
 
-  color: #FFFFFF;
+  width: @modalCloseHitbox;
+  height: @modalCloseHitbox;
+  padding: @modalClosePadding;
 }
 .ui.modal > .close:hover {
   opacity: 1;
@@ -69,82 +74,107 @@
 ---------------*/
 
 .ui.modal > .header {
-  margin: 0em;
-  padding: 1.5rem 2rem;
+  font-family: @modalHeaderFontFamily;
+  margin: @modalHeaderMargin;
+  padding: @modalHeaderPadding;
 
-  font-size: 1.6em;
-  font-weight: bold;
+  font-size: @modalHeaderFontSize;
+  font-weight: @modalHeaderFontWeight;
 
-  -webkit-border-radius: 0.325em 0.325em 0px 0px;
-  -moz-border-radius: 0.325em 0.325em 0px 0px;
-  border-radius: 0.325em 0.325em 0px 0px;
+  border-top-left-radius: @modalBorderRadius;
+  border-top-right-radius: @modalBorderRadius;
 }
 
 /*--------------
      Content
 ---------------*/
 
 .ui.modal > .content {
+  position: relative;
   display: table;
   width: 100%;
-  position: relative;
-  padding: 2em;
-  background-color: #F4F4F4;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+  font-size: @modalContentFontSize;
+  line-height: @modalContentLineHeight;
+  padding: @modalContentPadding;
+  background: @modalContentBackground;
 }
-.ui.modal > .content > .left:not(.ui) {
+.ui.modal > .content > .image {
   display: table-cell;
-  padding-right: 1.5%;
-  min-width: 25%;
+  padding-right: @modalImagePadding;
+  min-width: @modalImageMinWidth;
 }
-.ui.modal > .content > .right:not(.ui) {
+.ui.modal > .content > .description {
   display: table-cell;
-  padding-left: 1.5%;
   vertical-align: top;
+  padding-left: @modalDescriptionPadding;
+  min-width: @modalDescriptionMinWidth;
 }
 /*rtl:ignore*/
-.ui.modal > .content > .left:not(.ui) > i.icon {
-  font-size: 8em;
+.ui.modal > .content > .image > i.icon {
+  font-size: @modalImageIconSize;
   margin: 0em;
 }
-.ui.modal > .content p {
-  line-height: 1.6;
-}
 
 /*--------------
      Actions
 ---------------*/
 
 .ui.modal .actions {
-  padding: 1rem 2rem;
+  padding: @modalActionPadding;
   text-align: right;
 }
 .ui.modal .actions > .button {
-  margin-left: 0.75em;
+  margin-left: @modalButtonDistance;
 }
 
 /*-------------------
-       Sizing
+       Responsive
 --------------------*/
 
-/* Mobile Only */
-@media only screen and (max-width : 768px) {
+/* Modal Width */
+@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+  .ui.modal {
+    width: @modalMobileWidth;
+    margin: @modalMobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
+  .ui.modal {
+    width: @modalTabletWidth;
+    margin: @modalTabletMargin;
+  }
+}
+@media only screen and (min-width : @computerBreakpoint) {
+  .ui.modal {
+    width: @modalComputerWidth;
+    margin: @modalComputerMargin;
+  }
+}
+@media only screen and (min-width : @largeMonitorBreakpoint) {
+  .ui.modal {
+    width: @modalLargeMonitorWidth;
+    margin: @modalLargeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.modal {
+    width: @modalWidescreenMonitorWidth;
+    margin: @modalWidescreenMonitorMargin;
+  }
+}
+
+
+/* Position Adjustments */
+@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
    /*rtl:ignore*/
-  .ui.modal .content > .left:not(.ui) {
+  .ui.modal .content > .image {
     display: block;
-    padding: 0em 0em 1em;
+    padding: @modalMobileImagePadding;
   }
   /*rtl:ignore*/
-  .ui.modal .content > .right:not(.ui) {
+  .ui.modal .content > .description {
     display: block;
-    padding: 1em 0em 0em;
-
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
+    padding: @modalMobileDescriptionPadding;
     box-shadow: none;
   }
   .ui.modal .content .image {
@@ -156,44 +186,16 @@
   }
   .ui.modal .actions > .buttons,
   .ui.modal .actions > .button {
-    margin-bottom: 1em;
+    margin-bottom: @modalMobileButtonDistance;
   }
 }
 /* Tablet and Mobile */
-@media only screen and (max-width : 998px) {
-  .ui.modal {
-    width: 92%;
-    margin-left: -46%;
-  }
+@media only screen and (max-width : @computerBreakpoint) {
   .ui.modal > .close {
-    color: rgba(0, 0, 0, 0.8);
-    top: 1.5rem;
-    right: 1rem;
-  }
-}
-/* Computer / Responsive */
-@media only screen and (min-width : 998px) {
-  .ui.modal {
-    width: 74%;
-    margin-left: -37%;
-  }
-}
-@media only screen and (min-width : 1500px) {
-  .ui.modal {
-    width: 56%;
-    margin-left: -28%;
-  }
-}
-@media only screen and (min-width : 1750px) {
-  .ui.modal {
-    width: 42%;
-    margin-left: -21%;
-  }
-}
-@media only screen and (min-width : 2000px) {
-  .ui.modal {
-    width: 36%;
-    margin-left: -18%;
+    top: @modalInnerCloseTop;
+    right: @modalInnerCloseRight;
+
+    color: @modalInnerCloseColor;
   }
 }
 
@@ -205,11 +207,11 @@
 .ui.basic.modal {
   background-color: transparent;
   border: none;
-  color: #FFFFFF;
+  color: @basicModalColor;
 }
 .ui.basic.modal > .close {
-  top: 1.5rem;
-  right: 1rem;
+  top: @basicModalCloseTop;
+  right: @basicModalCloseRight;
 }
 .ui.basic.modal .content {
   background-color: transparent;
@@ -222,11 +224,10 @@
 /* A modal that cannot fit on the page */
 .ui.modal.scrolling {
   position: absolute;
-  margin-top: 10px;
+  margin-top: @scrollingTopMargin;
 }
 
 
-
 /*******************************
               States
 *******************************/
@@ -242,56 +243,73 @@
 
 /* Small */
 .ui.small.modal > .header {
-  font-size: 1.3em;
+  font-size: @modalSmallHeaderSize;
 }
-@media only screen and (min-width : 998px) {
+/* Small Modal Width */
+@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
   .ui.small.modal {
-    width: 58%;
-    margin-left: -29%;
+    width: @modalSmallMobileWidth;
+    margin: @modalSmallMobileMargin;
   }
 }
-
-@media only screen and (min-width : 1500px) {
+@media only screen and (min-width : @tabletBreakpoint) {
   .ui.small.modal {
-    width: 40%;
-    margin-left: -20%;
+    width: @modalSmallTabletWidth;
+    margin: @modalSmallTabletMargin;
   }
 }
-@media only screen and (min-width : 1750px) {
+@media only screen and (min-width : @computerBreakpoint) {
   .ui.small.modal {
-    width: 26%;
-    margin-left: -13%;
+    width: @modalSmallComputerWidth;
+    margin: @modalSmallComputerMargin;
   }
 }
-@media only screen and (min-width : 2000px) {
+@media only screen and (min-width : @largeMonitorBreakpoint) {
   .ui.small.modal {
-    width: 20%;
-    margin-left: -10%;
+    width: @modalSmallLargeMonitorWidth;
+    margin: @modalSmallLargeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.small.modal {
+    width: @modalSmallWidescreenMonitorWidth;
+    margin: @modalSmallWidescreenMonitorMargin;
   }
 }
 
-/* Large */
-@media only screen and (min-width : 998px) {
+/* Large Modal Width */
+.ui.large.modal > .header {
+  font-size: @modalLargeHeaderSize;
+}
+@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+  .ui.large.modal {
+    width: @modalLargeMobileWidth;
+    margin: @modalLargeMobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
   .ui.large.modal {
-    width: 74%;
-    margin-left: -37%;
+    width: @modalLargeTabletWidth;
+    margin: @modalLargeTabletMargin;
   }
 }
-@media only screen and (min-width : 1500px) {
+@media only screen and (min-width : @computerBreakpoint) {
   .ui.large.modal {
-    width: 64%;
-    margin-left: -32%;
+    width: @modalLargeComputerWidth;
+    margin: @modalLargeComputerMargin;
   }
 }
-@media only screen and (min-width : 1750px) {
+@media only screen and (min-width : @largeMonitorBreakpoint) {
   .ui.large.modal {
-    width: 54%;
-    margin-left: -27%;
+    width: @modalLargeLargeMonitorWidth;
+    margin: @modalLargeLargeMonitorMargin;
   }
 }
-@media only screen and (min-width : 2000px) {
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
   .ui.large.modal {
-    width: 44%;
-    margin-left: -22%;
+    width: @modalLargeWidescreenMonitorWidth;
+    margin: @modalLargeWidescreenMonitorMargin;
   }
 }
+
+.loadUIOverrides();
diff --git a/build/minified/definitions/modules/modal.min.css b/build/minified/definitions/modules/modal.min.css