search.component.scss (1559B)
1 @property --angle { 2 syntax: "<angle>"; 3 initial-value: 0deg; 4 inherits: false; 5 } 6 7 i.bi-stars { 8 left: .75rem; 9 z-index: 1; 10 pointer-events: none; 11 } 12 13 .form-control { 14 /* Variables for customization */ 15 --border-width: 3px; 16 --input-color: #fff; 17 /* White background for the input */ 18 --animation-duration: 2s; 19 /* Matches Bootstrap's default border-radius */ 20 --bs-focus-shadow: none; 21 /* Override Bootstrap's focus shadow variable */ 22 font-size: 1rem; 23 border: var(--border-width) solid transparent; 24 position: relative; 25 z-index: 0; 26 padding-right: 2.5rem; 27 padding-left: 2rem; 28 --angle: 0deg; 29 min-width: 25rem; 30 background: 31 linear-gradient(var(--input-color), var(--input-color)) padding-box, 32 conic-gradient(from var(--angle), 33 #4f98f6, 34 /* Blue */ 35 #ea4335, 36 /* Red */ 37 #fbbc05, 38 /* Yellow */ 39 #34a853, 40 /* Green */ 41 #4f98f6 42 /* Back to Blue */ 43 ) border-box; 44 45 background-clip: padding-box, border-box; 46 background-origin: padding-box, border-box; 47 48 transition: none !important; 49 box-shadow: none !important; 50 } 51 52 .form-control:focus { 53 animation: rotate var(--animation-duration) linear infinite; 54 box-shadow: none !important; 55 } 56 57 button { 58 right: .25rem; 59 &:hover, 60 &:active, 61 &:focus { 62 color: #000; 63 } 64 } 65 66 67 /* 3. Define the rotation animation */ 68 @keyframes rotate { 69 to { 70 --angle: 360deg; 71 } 72 }