段落ブロックスタイルのパディングのimportant解除

xserver-inc · Jun 5, 2023 · 7378531 · 7378531
1 parent acad45d
commit 7378531
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 22 deletions.
diff --git a/amp.css b/amp.css
@@ -2664,10 +2664,16 @@ label.screen-reader-text {
 .has-box-style {
   padding: var(--cocoon-box-padding);
 }
+.has-box-style.has-background {
+  padding: var(--cocoon-box-padding);
+}
 
 .has-border {
   padding: var(--cocoon-box-padding);
 }
+.has-border.has-background {
+  padding: var(--cocoon-box-padding);
+}
 
 /*拡張クラスを追加するスタイルシート*/
 .badge,
@@ -2925,7 +2931,7 @@ label.screen-reader-text {
 .memo-box,
 .comment-box,
 .common-icon-box {
-  padding: 20px 20px 20px 72px;
+  --cocoon-box-padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
@@ -9564,7 +9570,7 @@ https://codepen.io/nxworld/pen/oLdoWb
 
 .is-style-stapler-box {
   position: relative;
-  padding: 35px 20px 15px;
+  --cocoon-box-padding: 35px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -9590,7 +9596,7 @@ https://codepen.io/nxworld/pen/oLdoWb
 
 .is-style-stapler-top-left-box {
   position: relative;
-  padding: 20px 20px 20px 35px;
+  --cocoon-box-padding: 20px 20px 20px 35px;
   background-color: #fff;
   color: #555555;
   border: 1px solid #ccc;
@@ -9611,7 +9617,7 @@ https://codepen.io/nxworld/pen/oLdoWb
 
 .is-style-hole-punch-box {
   position: relative;
-  padding: 40px 20px 15px;
+  --cocoon-box-padding: 40px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }

diff --git a/css/admin.css b/css/admin.css
@@ -2937,9 +2937,15 @@ body.wp-admin {
 .admin-settings .demo .has-box-style {
   padding: var(--cocoon-box-padding);
 }
+.admin-settings .demo .has-box-style.has-background {
+  padding: var(--cocoon-box-padding);
+}
 .admin-settings .demo .has-border {
   padding: var(--cocoon-box-padding);
 }
+.admin-settings .demo .has-border.has-background {
+  padding: var(--cocoon-box-padding);
+}
 .admin-settings .demo .badge,
 .admin-settings .demo .ref,
 .admin-settings .demo .reffer,
@@ -3138,7 +3144,7 @@ body.wp-admin {
 .admin-settings .demo .memo-box,
 .admin-settings .demo .comment-box,
 .admin-settings .demo .common-icon-box {
-  padding: 20px 20px 20px 72px;
+  --cocoon-box-padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
@@ -8973,7 +8979,7 @@ body.wp-admin {
 }
 .admin-settings .demo .is-style-stapler-box {
   position: relative;
-  padding: 35px 20px 15px;
+  --cocoon-box-padding: 35px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -8995,7 +9001,7 @@ body.wp-admin {
 }
 .admin-settings .demo .is-style-stapler-top-left-box {
   position: relative;
-  padding: 20px 20px 20px 35px;
+  --cocoon-box-padding: 20px 20px 20px 35px;
   background-color: #fff;
   color: #555555;
   border: 1px solid #ccc;
@@ -9014,7 +9020,7 @@ body.wp-admin {
 }
 .admin-settings .demo .is-style-hole-punch-box {
   position: relative;
-  padding: 40px 20px 15px;
+  --cocoon-box-padding: 40px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -11251,9 +11257,15 @@ body.wp-admin {
 .admin-settings .demo .has-box-style {
   padding: var(--cocoon-box-padding);
 }
+.admin-settings .demo .has-box-style.has-background {
+  padding: var(--cocoon-box-padding);
+}
 .admin-settings .demo .has-border {
   padding: var(--cocoon-box-padding);
 }
+.admin-settings .demo .has-border.has-background {
+  padding: var(--cocoon-box-padding);
+}
 .admin-settings .demo .badge,
 .admin-settings .demo .ref,
 .admin-settings .demo .reffer,
@@ -11452,7 +11464,7 @@ body.wp-admin {
 .admin-settings .demo .memo-box,
 .admin-settings .demo .comment-box,
 .admin-settings .demo .common-icon-box {
-  padding: 20px 20px 20px 72px;
+  --cocoon-box-padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
@@ -17287,7 +17299,7 @@ body.wp-admin {
 }
 .admin-settings .demo .is-style-stapler-box {
   position: relative;
-  padding: 35px 20px 15px;
+  --cocoon-box-padding: 35px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -17309,7 +17321,7 @@ body.wp-admin {
 }
 .admin-settings .demo .is-style-stapler-top-left-box {
   position: relative;
-  padding: 20px 20px 20px 35px;
+  --cocoon-box-padding: 20px 20px 20px 35px;
   background-color: #fff;
   color: #555555;
   border: 1px solid #ccc;
@@ -17328,7 +17340,7 @@ body.wp-admin {
 }
 .admin-settings .demo .is-style-hole-punch-box {
   position: relative;
-  padding: 40px 20px 15px;
+  --cocoon-box-padding: 40px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -20347,9 +20359,15 @@ textarea[name="the_page_memo"] {
 .components-popover__content .has-box-style {
   padding: var(--cocoon-box-padding);
 }
+.components-popover__content .has-box-style.has-background {
+  padding: var(--cocoon-box-padding);
+}
 .components-popover__content .has-border {
   padding: var(--cocoon-box-padding);
 }
+.components-popover__content .has-border.has-background {
+  padding: var(--cocoon-box-padding);
+}
 .components-popover__content .admin-settings .demo .badge, .admin-settings .demo .components-popover__content .badge,
 .components-popover__content .admin-settings .demo .ref,
 .admin-settings .demo .components-popover__content .ref,
@@ -20554,7 +20572,7 @@ textarea[name="the_page_memo"] {
 .components-popover__content .memo-box,
 .components-popover__content .comment-box,
 .components-popover__content .common-icon-box {
-  padding: 20px 20px 20px 72px;
+  --cocoon-box-padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;

diff --git a/scss/_box-style.scss b/scss/_box-style.scss
@@ -174,7 +174,8 @@
  // ホチキス
 .is-style-stapler-box {
   position: relative;
-  padding: 35px 20px 15px;
+  --cocoon-box-padding: 35px 20px 15px;
+  // padding: 35px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -194,7 +195,8 @@
 // ホチキス左上
 .is-style-stapler-top-left-box {
   position: relative;
-  padding: 20px 20px 20px 35px;
+  --cocoon-box-padding: 20px 20px 20px 35px;
+  // padding: 20px 20px 20px 35px;
   background-color: #fff;
   color: #555555;
   border: 1px solid #ccc;
@@ -215,8 +217,8 @@
 // 穴あけパンチ
 .is-style-hole-punch-box {
   position: relative;
-  padding: 40px 20px 15px;
-  // background-color: #fffffc;
+  --cocoon-box-padding: 40px 20px 15px;
+  // padding: 40px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }

diff --git a/scss/_extension.scss b/scss/_extension.scss
@@ -1,10 +1,16 @@
 //ボックスのスタイル装飾
 .has-box-style{
   padding: var(--cocoon-box-padding);
+  &.has-background{
+    padding: var(--cocoon-box-padding);
+  }
 }
 //ボックスのボーダー装飾
 .has-border{
   padding: var(--cocoon-box-padding);
+  &.has-background{
+    padding: var(--cocoon-box-padding);
+  }
 }
 
 /*拡張クラスを追加するスタイルシート*/
@@ -242,7 +248,8 @@ $marker_u_blue: $marker_blue;
 .comment-box,
 .common-icon-box{
   //background-color: #F4F3EB;
-  padding: 20px 20px 20px 72px;
+  --cocoon-box-padding: 20px 20px 20px 72px;
+  // padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;

diff --git a/style.css b/style.css
@@ -2689,10 +2689,16 @@ label.screen-reader-text {
 .has-box-style {
   padding: var(--cocoon-box-padding);
 }
+.has-box-style.has-background {
+  padding: var(--cocoon-box-padding);
+}
 
 .has-border {
   padding: var(--cocoon-box-padding);
 }
+.has-border.has-background {
+  padding: var(--cocoon-box-padding);
+}
 
 /*拡張クラスを追加するスタイルシート*/
 .badge,
@@ -2950,7 +2956,7 @@ label.screen-reader-text {
 .memo-box,
 .comment-box,
 .common-icon-box {
-  padding: 20px 20px 20px 72px;
+  --cocoon-box-padding: 20px 20px 20px 72px;
   border-radius: 4px;
   position: relative;
   display: block;
@@ -9589,7 +9595,7 @@ https://codepen.io/nxworld/pen/oLdoWb
 
 .is-style-stapler-box {
   position: relative;
-  padding: 35px 20px 15px;
+  --cocoon-box-padding: 35px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }
@@ -9615,7 +9621,7 @@ https://codepen.io/nxworld/pen/oLdoWb
 
 .is-style-stapler-top-left-box {
   position: relative;
-  padding: 20px 20px 20px 35px;
+  --cocoon-box-padding: 20px 20px 20px 35px;
   background-color: #fff;
   color: #555555;
   border: 1px solid #ccc;
@@ -9636,7 +9642,7 @@ https://codepen.io/nxworld/pen/oLdoWb
 
 .is-style-hole-punch-box {
   position: relative;
-  padding: 40px 20px 15px;
+  --cocoon-box-padding: 40px 20px 15px;
   border: 1px solid #ccc;
   box-shadow: 1px 1px 2px #ccc;
 }