From 4f28a5b7f2166d7eb22c27dc8b1f244293259853 Mon Sep 17 00:00:00 2001
From: Andrew Golubev <aagolubev@gmail.com>
Date: Fri, 3 Mar 2017 16:42:50 +0300
Subject: [PATCH] Added a `.tiny` modal size

---
 src/definitions/modules/modal.less         | 37 ++++++++++++++++++++++
 src/themes/default/modules/modal.variables | 14 ++++++++
 2 files changed, 51 insertions(+)

diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index b59a2f4fa..f7159c386 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -408,6 +408,43 @@
   font-size: @medium;
 }
 
+/* Tiny */
+.ui.tiny.modal > .header:not(.ui) {
+  font-size: @tinyHeaderSize;
+}
+
+/* Tiny Modal Width */
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.tiny.modal {
+    width: @tinyMobileWidth;
+    margin: @tinyMobileMargin;
+  }
+}
+@media only screen and (min-width : @tabletBreakpoint) {
+  .ui.tiny.modal {
+    width: @tinyTabletWidth;
+    margin: @tinyTabletMargin;
+  }
+}
+@media only screen and (min-width : @computerBreakpoint) {
+  .ui.tiny.modal {
+    width: @tinyComputerWidth;
+    margin: @tinyComputerMargin;
+  }
+}
+@media only screen and (min-width : @largeMonitorBreakpoint) {
+  .ui.tiny.modal {
+    width: @tinyLargeMonitorWidth;
+    margin: @tinyLargeMonitorMargin;
+  }
+}
+@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+  .ui.tiny.modal {
+    width: @tinyWidescreenMonitorWidth;
+    margin: @tinyWidescreenMonitorMargin;
+  }
+}
+
 /* Small */
 .ui.small.modal > .header:not(.ui) {
   font-size: @smallHeaderSize;
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
index 783f32c8b..4604be2b6 100644
--- a/src/themes/default/modules/modal.variables
+++ b/src/themes/default/modules/modal.variables
@@ -120,10 +120,24 @@
 --------------------*/
 
 /* Size Widths */
+@tinyRatio: 0.4;
 @smallRatio: 0.8;
 @largeRatio: 1.2;
 
 /* Derived Responsive Sizes */
+@tinyHeaderSize: 1.3em;
+@tinyMobileWidth: @mobileWidth;
+@tinyTabletWidth: (@tabletWidth * @tinyRatio);
+@tinyComputerWidth: (@computerWidth * @tinyRatio);
+@tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
+@tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
+
+@tinyMobileMargin: 0em 0em 0em -(@tinyMobileWidth / 2);
+@tinyTabletMargin: 0em 0em 0em -(@tinyTabletWidth / 2);
+@tinyComputerMargin: 0em 0em 0em -(@tinyComputerWidth / 2);
+@tinyLargeMonitorMargin: 0em 0em 0em -(@tinyLargeMonitorWidth / 2);
+@tinyWidescreenMonitorMargin: 0em 0em 0em -(@tinyWidescreenMonitorWidth / 2);
+
 @smallHeaderSize: 1.3em;
 @smallMobileWidth: @mobileWidth;
 @smallTabletWidth: (@tabletWidth * @smallRatio);