feat(modal): Orange branded 🎉

Orange-OpenSource · May 14, 2020 · 7117d47 · 7117d47
1 parent 0d90508
commit 7117d47
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -79,12 +79,13 @@
   display: flex;
   flex-direction: column;
   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-  // counteract the pointer-events: none; in the .modal-dialog
+  padding: $modal-content-padding;
   color: $modal-content-color;
+  // counteract the pointer-events: none; in the .modal-dialog
   pointer-events: auto;
   background-color: $modal-content-bg;
   background-clip: padding-box;
-  border: $modal-content-border-width solid $modal-content-border-color;
+  border: if($modal-content-border-color == null, null, $modal-content-border-width solid $modal-content-border-color); // Boosted mod
   @include border-radius($modal-content-border-radius);
   @include box-shadow($modal-content-box-shadow-xs);
   // Remove focus outline from opened modal
@@ -114,7 +115,7 @@
   align-items: flex-start; // so the close btn always stays on the upper right corner
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
-  border-bottom: $modal-header-border-width solid $modal-header-border-color;
+  border-bottom: if($modal-header-border-color == null, null, $modal-header-border-width solid $modal-header-border-color); // Boosted mod
   @include border-top-radius($modal-content-inner-border-radius);
 
   .close {
@@ -148,7 +149,7 @@
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding - $modal-footer-margin-between / 2;
-  border-top: $modal-footer-border-width solid $modal-footer-border-color;
+  border-top: if($modal-footer-border-color == null, null, $modal-footer-border-width solid $modal-footer-border-color); // Boosted mod
   @include border-bottom-radius($modal-content-inner-border-radius);
 
   // Place margin between footer elements

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1117,32 +1117,33 @@ $modal-dialog-margin-y-sm-up:       map-get($spacers, 4) !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
+$modal-content-padding:             map-get($spacers, 4) !default; // Boosted mod
 $modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
-$modal-content-border-color:        $black !default;
+$modal-content-border-color:        null !default;
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-inner-border-radius: null !default;
+$modal-content-inner-border-radius: $border-radius !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
 
 $modal-backdrop-bg:                 $gray-900 !default;
 $modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-header-border-color:         null !default;
+$modal-footer-border-color:         null !default;
 $modal-header-border-width:         $modal-content-border-width !default;
 $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-header-padding-y:            map-get($spacers, 2) !default;
 $modal-header-padding-x:            map-get($spacers, 2) !default;
 $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
 $modal-sm:                          300px !default;
-$modal-md:                          500px !default;
-$modal-lg:                          800px !default;
-$modal-xl:                          1140px !default;
+$modal-md:                          700px !default;
+$modal-lg:                          700px !default;
+$modal-xl:                          700px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
-$modal-show-transform:              null !default;
+$modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
 $modal-scale-transform:             scale(1.02) !default;