search

slovensko-digital / navody.digital

https://navody.digital
European Union Public License 1.2
53 stars 26 forks source link

Komponenty > Vyhľadávanie tlačidlo lupa > neviditeľný focus (2.4.7) #617

Closed athelas64 closed 6 months ago

athelas64 commented 1 year ago

Focus na tlačidle s lupou nie je viditeľný, lebo tam je nastavený

.sdn-header__form button:focus {
  outline: transparent;
}

Zamerané pole Hľadať (vyzerá to škaredo) search_focus_field Zamerané tlačidlo lupa (nie je vôbec vidieť, že je zamerané) search_focus_button

Navrhované riešenie po úprave: search_focus_field_fixed seach_focus_button_fixed

riadky, ktoré nemajú poznámku, sú pôvodné, riadky v komentároch treba odstrániť:


/* .sdn-header__form button:focus {outline: transparent;} */

.sdn-header__form button {
  position:absolute;
/*pridané, aby ohraničenie nepretekalo mimo vstupné pole*/
  top: 3px; 
  right: 3px; 
  bottom: 3px;
  /* width:40px; treba dať prečo, lebo v chrome to rozbíja layout - šírku ohraničenia prispôsobí neviditeľnému slovu Hľadať*/
  padding:0;
  border:0;
  /*border-radius:3px; von, lebo to nechá biele rožky*/
  /*opacity:.5; preč kvôli kontrastu lupy*/
  color: transparent; 
  background:#fff url(/packs/media/images/icon-search.svg) no-repeat 50%;
  background-size:18px 18px
}