فهرست منبع

create expand-modal-fullscreen mixin

Yuki Takei 6 سال پیش
والد
کامیت
a1661e0f4f
2فایلهای تغییر یافته به همراه28 افزوده شده و 17 حذف شده
  1. 4 17
      src/client/styles/scss/_handsontable.scss
  2. 24 0
      src/client/styles/scss/_mixins.scss

+ 4 - 17
src/client/styles/scss/_handsontable.scss

@@ -10,24 +10,11 @@
 
 // expanded window layout
 .handsontable-modal.handsontable-modal-expanded {
-  // full-screen modal
-  width: 97%;
-  height: 95%;
-  .modal-content {
-    height: 95%;
-  }
-
-  // expand .modal-body (with calculating height)
-  .modal-body {
-    $modal-header: 54px;
-    $modal-footer: 46px;
-    $margin: $modal-header + $modal-footer;
-    height: calc(100% - #{$margin});
+  @include expand-modal-fullscreen(true, true);
 
-    // expand .hot-table-container (with flexbox)
-    .hot-table-container {
-      flex: 1;
-    }
+  // expand .hot-table-container (with flexbox)
+  .hot-table-container {
+    flex: 1;
   }
 }
 

+ 24 - 0
src/client/styles/scss/_mixins.scss

@@ -83,3 +83,27 @@
     }
   }
 }
+
+@mixin expand-modal-fullscreen($hasModalHeader: true, $hasModalFooter: true) {
+  // full-screen modal
+  width: 97%;
+  height: 95%;
+  .modal-content {
+    height: 95%;
+  }
+
+  // expand .modal-body (with calculating height)
+  .modal-body {
+    $modal-header: 54px;
+    $modal-footer: 46px;
+
+    $margin: 0px;
+    @if $hasModalHeader {
+      $margin: $margin + $modal-header;
+    }
+    @if $hasModalFooter {
+      $margin: $margin + $modal-footer;
+    }
+    height: calc(100% - #{$margin});
+  }
+}