diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss index 076f6ed..5a06b69 100644 --- a/src/assets/scss/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -463,7 +463,7 @@ $select-background: $white; $select-triangle-color: $primary-color; $select-radius: $global-radius; $input-color: $primary-color; -$input-placeholder-color: scale-color($primary-color, $lightness: 60%); //$antracite-grey; +$input-placeholder-color: scale-color($primary-color, $lightness: 60%); $input-font-family: inherit; $input-font-size: rem-calc(16); $input-font-weight: $global-weight-normal; diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index 109a802..b3bce34 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -42,7 +42,6 @@ button,.button { background-color: $primary-color; color: $white; border-radius:$global-radius-archive; - // padding:0; border: none; } } diff --git a/src/assets/scss/components/_forms.scss b/src/assets/scss/components/_forms.scss index 433fc0f..a510910 100644 --- a/src/assets/scss/components/_forms.scss +++ b/src/assets/scss/components/_forms.scss @@ -1,14 +1,51 @@ .search{ + .input-group * { + margin: 0; + } + .input-group { + position: relative; + border-radius: 4rem; + overflow: hidden; + padding: 0; + margin: 0; + } + .input-group .appear { + right: 0; + position: absolute; + height: 100%; + padding: 0.3rem 1rem; + } .button{ border-color: $primary-color; } - button.appear{ + .appear{ display:none; } - input:not(:placeholder-shown) { - + button { - display: block; - z-index: 2; + input{ + &:active{ + border-color: $primary-color; + background-color: $input-background-focus; + } + &:focus,&:focus-within{ + border-color: $primary-color; + background-color: $input-background; + } + &:not(:placeholder-shown) { + border:none; + background-color: $input-background-focus; + position: relative; + right: 2rem; + + .appear { + display: block; + color: $primary-color; + background-color: $input-background-focus; + z-index: 2; + &:hover { + color: $white; + background-color: $primary-color; + } + + } } } .hollow {