管理画面エラー時のフォーカス色を赤に

seto1 · Jan 17, 2024 · 6a8259e · 6a8259e
1 parent 374168e
commit 6a8259e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/plugins/bc-admin-third/src/css/components/_datetimepicker.scss b/plugins/bc-admin-third/src/css/components/_datetimepicker.scss
@@ -93,6 +93,9 @@
   &:has(.form-error) input {
     border: 1px solid $color_danger;
   }
+  &:has(.form-error) input:focus {
+    box-shadow: $focus_shadow_error;
+  }
 
   &__date {
     &-label {

diff --git a/plugins/bc-admin-third/src/css/components/_radio.scss b/plugins/bc-admin-third/src/css/components/_radio.scss
@@ -76,6 +76,10 @@
       box-shadow: 0 0 0 4px #fff inset;
     }
 
+    &.form-error:checked + label:before {
+      background: $color_danger;
+    }
+
     &:disabled + label:before {
       background: #ddd;
     }
@@ -89,6 +93,11 @@
       border-color: $color_primary;
       border-width: 1px;
     }
+
+    &.form-error:focus + label:before {
+      box-shadow: 0 0 0 4px #fff inset, $focus_shadow_error;
+      border-color: $color_danger;
+    }
   }
 
   &__label {

diff --git a/plugins/bc-admin-third/src/css/theme/_unknown.scss b/plugins/bc-admin-third/src/css/theme/_unknown.scss
@@ -41,6 +41,10 @@
   border:1px solid $color_danger!important;
 }
 
+.form-error:focus {
+  box-shadow: $focus_shadow_error !important;
+}
+
 .error {
   color: #C30;
 }

diff --git a/plugins/bc-admin-third/src/css/theme/var/_dimensions.scss b/plugins/bc-admin-third/src/css/theme/var/_dimensions.scss
@@ -29,4 +29,5 @@ $button_padding_bottom: 0.6em;
 
 // focus時のシャドウ
 $focus_shadow: 0 0 4px 0px $color_primary;
+$focus_shadow_error: 0 0 4px 0px $color_danger;
 
diff --git a/plugins/bc-admin-third/webroot/css/admin/style.css b/plugins/bc-admin-third/webroot/css/admin/style.css
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,4 +29,5 @@ $button_padding_bottom: 0.6em;

		// focus時のシャドウ
		$focus_shadow: 0 0 4px 0px $color_primary;
		$focus_shadow_error: 0 0 4px 0px $color_danger;