fixed alert negative margin

makotokw · makotokw · commit 4e8587890a8d · 2021-04-10T13:36:07.000+09:00
diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -3,3 +3,6 @@ $base-font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetic
 $link-color: #4183C4;
 $text-color: #333;
 $background-color: white;
+
+$content-padding: 10px 16px;
+$negative-margin-on-content: -10px -16px 10px;
diff --git a/sass/application.scss b/sass/application.scss
@@ -84,15 +84,14 @@ div {
   }
   &#content > div.flash {
     &:first-child {
+      border-width: 0 0 1px 0;
       border-radius: 4px 4px 0 0;
+      margin: $negative-margin-on-content;
     }
-    border: 0 solid;
     padding: 10px 35px 10px;
-    margin: -6px -10px 6px -10px;
     background-position-x: 12px !important;
     background-position-y: 9px !important;
     position: relative;
-    border-bottom: 1px solid #AECCD7;
   }
 }
 
@@ -135,7 +134,7 @@ div.filters {
 div#content {
   margin-right: 15px;
   width: auto;
-  padding: 10px 16px;
+  padding: $content-padding;
 
   #main.nosidebar & {
     margin-right: 0;
@@ -148,8 +147,7 @@ div#content {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 8px 20px;
-    // negative mgrgin for fitting parent (#content)
-    margin: -10px -16px 20px;
+    margin: $negative-margin-on-content;
     &.inline-flex {
       border: none;
       background: none;
@@ -165,8 +163,7 @@ div#content {
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
       padding: 8px 20px;
-      // negative mgrgin for fitting parent (#content)
-      margin: -10px -16px 10px;
+      margin: $negative-margin-on-content;
     }
   }
   > div.contextual {
diff --git a/stylesheets/application.css b/stylesheets/application.css
@@ -89,17 +89,16 @@ div.flash {
 }
 
 div#content > div.flash {
-  border: 0 solid;
   padding: 10px 35px 10px;
-  margin: -6px -10px 6px -10px;
   background-position-x: 12px !important;
   background-position-y: 9px !important;
   position: relative;
-  border-bottom: 1px solid #AECCD7;
 }
 
 div#content > div.flash:first-child {
+  border-width: 0 0 1px 0;
   border-radius: 4px 4px 0 0;
+  margin: -10px -16px 10px;
 }
 
 #errorExplanation,
@@ -152,7 +151,7 @@ div#content > h2, div#content h2.contacts_header {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   padding: 8px 20px;
-  margin: -10px -16px 20px;
+  margin: -10px -16px 10px;
 }
 
 div#content > h2.inline-flex, div#content h2.contacts_header.inline-flex {

Original file line number	Diff line number	Diff line change
`@@ -89,17 +89,16 @@ div.flash {`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`div#content > div.flash {`
`92`		`- border: 0 solid;`
`93`	`92`	`padding: 10px 35px 10px;`
`94`		`- margin: -6px -10px 6px -10px;`
`95`	`93`	`background-position-x: 12px !important;`
`96`	`94`	`background-position-y: 9px !important;`
`97`	`95`	`position: relative;`
`98`		`- border-bottom: 1px solid #AECCD7;`
`99`	`96`	`}`
`100`	`97`
`101`	`98`	`div#content > div.flash:first-child {`
	`99`	`+ border-width: 0 0 1px 0;`
`102`	`100`	`border-radius: 4px 4px 0 0;`
	`101`	`+ margin: -10px -16px 10px;`
`103`	`102`	`}`
`104`	`103`
`105`	`104`	`#errorExplanation,`
`@@ -152,7 +151,7 @@ div#content > h2, div#content h2.contacts_header {`
`152`	`151`	`border-top-left-radius: 4px;`
`153`	`152`	`border-top-right-radius: 4px;`
`154`	`153`	`padding: 8px 20px;`
`155`		`- margin: -10px -16px 20px;`
	`154`	`+ margin: -10px -16px 10px;`
`156`	`155`	`}`
`157`	`156`
`158`	`157`	`div#content > h2.inline-flex, div#content h2.contacts_header.inline-flex {`