diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less index d90697a6372c..0a943df82896 100644 --- a/war/src/main/less/abstracts/theme.less +++ b/war/src/main/less/abstracts/theme.less @@ -257,6 +257,11 @@ --form-label-font-weight: bold; --form-input-padding: 8px; --form-input-border-radius: 6px; + --form-input-glow: 0 0 0 10px transparent; + --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow); + + // Animations + --standard-transition: 0.2s ease; // Pop out menus --menu-text-color: black; diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less index 36792e43baa9..d24593a8fe2c 100644 --- a/war/src/main/less/modules/form.less +++ b/war/src/main/less/modules/form.less @@ -52,8 +52,8 @@ padding: var(--form-input-padding); border-radius: var(--form-input-border-radius); width: 100%; - box-shadow: 0 0 0 10px transparent; - transition: 0.2s ease; + box-shadow: var(--form-input-glow); + transition: var(--standard-transition); &:hover { border-color: var(--input-border-hover); @@ -63,7 +63,7 @@ &:focus { outline: none; border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); + box-shadow: var(--form-input-glow--focus); } } @@ -81,8 +81,8 @@ margin: 0; padding: 0 4px 0 29px; line-height: 30px; - box-shadow: 0 0 0 10px transparent; - transition: 0.2s ease; + box-shadow: var(--form-input-glow); + transition: var(--standard-transition); // Safari adds unwanted padding - let's remove it &::-webkit-search-decoration { @@ -102,7 +102,7 @@ &:focus { outline: none; border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); + box-shadow: var(--form-input-glow--focus); } } @@ -113,7 +113,7 @@ width: 16px; height: 16px; fill: var(--input-border-hover); - transition: 0.2s ease; + transition: var(--standard-transition); } &::before { @@ -127,7 +127,7 @@ border: 2px solid currentColor; border-radius: 100%; opacity: 0; - transition: 0.2s ease; + transition: var(--standard-transition); } &::after { @@ -143,7 +143,7 @@ animation: loading-spinner 0.5s infinite linear; clip-path: inset(0 0 8px 8px); opacity: 0; - transition: 0.2s ease; + transition: var(--standard-transition); } &--loading { @@ -217,9 +217,9 @@ border: 2px solid var(--input-border); border-radius: 50%; background: transparent; - box-shadow: 0 0 0 10px transparent; + box-shadow: var(--form-input-glow); - transition: 0.2s ease; + transition: var(--standard-transition); } &:hover::before { @@ -231,7 +231,7 @@ &__input:focus + &__label:before, &__input:active + &__label:before { border-width: 8px; border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); + box-shadow: var(--form-input-glow--focus); } &__input:checked + &__label:before { @@ -250,7 +250,7 @@ margin-top: 0; opacity: 0; padding-left: 32px; - transition: 0.2s ease; + transition: var(--standard-transition); visibility: hidden; max-height: 0; @@ -263,7 +263,7 @@ width: 2px; background: var(--input-border); border-radius: 2px; - transition: 0.2s ease; + transition: var(--standard-transition); } &:focus-within { @@ -293,11 +293,11 @@ border-radius: 10px; cursor: pointer; text-shadow: 0 1px 0 var(--background-color); - box-shadow: 0 0 0 10px transparent; + box-shadow: var(--form-input-glow); text-decoration: none; outline: none; font-weight: 500; - transition: 0.2s ease; + transition: var(--standard-transition); border: 2px solid var(--btn-secondary-border); &::after { @@ -321,7 +321,7 @@ &:active { background: var(--btn-secondary-bg--focus); color: var(--btn-secondary-color--focus); - box-shadow: 0 0 0 5px var(--focus-input-glow); + box-shadow: var(--form-input-glow--focus); } &--large { @@ -378,7 +378,7 @@ background: var(--text-color); opacity: 0.1; border-radius: inherit; - transition: 0.2s ease; + transition: var(--standard-transition); } &::after { @@ -388,10 +388,10 @@ left: 0; bottom: 0; right: 0; - box-shadow: 0 0 0 10px transparent; + box-shadow: var(--form-input-glow); border-radius: inherit; opacity: 0.1; - transition: 0.2s ease; + transition: var(--standard-transition); } &:hover {