Adds tiny size modal #5123

Semantic-Org · Apr 10, 2017 · 66cc709 · 66cc709
1 parent e625b42
commit 66cc709
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 4 deletions.
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
@@ -408,9 +408,46 @@
   font-size: @medium;
 }
 
-/* Tiny */
-.ui.tiny.modal > .header:not(.ui) {
-  font-size: @tinyHeaderSize;
+/* Mini */
+.ui.mini.modal > .header:not(.ui) {
+  font-size: @miniHeaderSize;
+}
+
+/* Mini Modal Width */
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.mini.modal {
+    width: @miniMobileWidth;
+    margin: @miniMobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
+  .ui.mini.modal {
+    width: @miniTabletWidth;
+    margin: @miniTabletMargin;
+  }
+}
+@media only screen and (min-width : @computerBreakpoint) {
+  .ui.mini.modal {
+    width: @miniComputerWidth;
+    margin: @miniComputerMargin;
+  }
+}
+@media only screen and (min-width : @largeMonitorBreakpoint) {
+  .ui.mini.modal {
+    width: @miniLargeMonitorWidth;
+    margin: @miniLargeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.mini.modal {
+    width: @miniWidescreenMonitorWidth;
+    margin: @miniWidescreenMonitorMargin;
+  }
+}
+
+/* mini */
+.ui.small.modal > .header:not(.ui) {
+  font-size: @miniHeaderSize;
 }
 
 /* Tiny Modal Width */

diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
@@ -120,11 +120,25 @@
 --------------------*/
 
 /* Size Widths */
-@tinyRatio: 0.4;
+@miniRatio: 0.4;
+@tinyRatio: 0.6;
 @smallRatio: 0.8;
 @largeRatio: 1.2;
 
 /* Derived Responsive Sizes */
+@miniHeaderSize: 1.3em;
+@miniMobileWidth: @mobileWidth;
+@miniTabletWidth: (@tabletWidth * @miniRatio);
+@miniComputerWidth: (@computerWidth * @miniRatio);
+@miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
+@miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
+
+@miniMobileMargin: 0em 0em 0em -(@miniMobileWidth / 2);
+@miniTabletMargin: 0em 0em 0em -(@miniTabletWidth / 2);
+@miniComputerMargin: 0em 0em 0em -(@miniComputerWidth / 2);
+@miniLargeMonitorMargin: 0em 0em 0em -(@miniLargeMonitorWidth / 2);
+@miniWidescreenMonitorMargin: 0em 0em 0em -(@miniWidescreenMonitorWidth / 2);
+
 @tinyHeaderSize: 1.3em;
 @tinyMobileWidth: @mobileWidth;
 @tinyTabletWidth: (@tabletWidth * @tinyRatio);