Apply background-clip: padding-box; to some more ui elements

statamic · Jan 9, 2025 · beaebc5 · beaebc5
1 parent b81453d
commit beaebc5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
@@ -163,22 +163,26 @@ button {
 .btn-round {
     @apply rounded-full flex items-center text-center p-0;
     background: linear-gradient(180deg, #fff, #f9fafb);
+    background-clip: padding-box;
     border: 1px solid #c4cdd6;
     box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
     height: 32px;
     width: 32px;
 
     .dark & {
         background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.550));
+        background-clip: padding-box;
         border-color: theme(colors.dark.400);
     }
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+        background-clip: padding-box;
         border-color: #c4cdd5;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.500);
         }
     }

diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
@@ -93,13 +93,15 @@ input.input-text-minimal:read-only,
     .input-group-prepend, .input-group-append, .input-group-item {
         @apply rtl:rounded-r ltr:rounded-l px-2 border dark:border-dark-900 text-sm text-gray-800 dark:text-dark-150 select-none;
         background: linear-gradient(180deg, #fff, #f9fafb);
+        background-clip: padding-box;
         border: 1px solid #c4cdd6;
         box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
         height: 2.375rem;
         line-height: 36px;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.900);
             box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
         }
@@ -133,10 +135,12 @@ input.input-text-minimal:read-only,
     button.input-group-append:hover:not(:disabled),
     button.input-group-append:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+        background-clip: padding-box;
         border-color: #c4cdd5;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.900);
         }
     }
@@ -221,15 +225,18 @@ input.input-text-minimal:read-only,
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.800);
         }
 
         &:hover:not(:disabled), &:active:not(:disabled) {
             background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+            background-clip: padding-box;
             border-color: #c4cdd5;
 
             .dark & {
                 background: linear-gradient(180deg, theme(colors.dark.700), theme(colors.dark.750));
+                background-clip: padding-box;
                 border-color: theme(colors.dark.900);
             }
         }