catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less

   1 .sdc-search-bar-container {
   2     display:flex;
   3     border-radius: 4px;
   4     box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
   5
   6     .sdc-search-bar-input {
   7         border: 1px solid #cdcdcd;
   8         border-radius: 4px;
   9         border-right:none;
  10         border-top-right-radius: 0;
  11         border-bottom-right-radius: 0;
  12         outline:none;
  13         padding:2px 50px 2px 10px;
  14         color:  #5a5a5a;
  15         font-size: 1em;
  16         font-style: italic;
  17
  18
  19     }
  20
  21     .sdc-clear-search-x {
  22         position:absolute;
  23         right:40px;
  24         top:5px;
  25         padding: 0 5px;
  26
  27         &:hover {
  28             border-radius:2px;
  29             background-color: #ebebeb;
  30             cursor:pointer;
  31         }
  32     }
  33
  34     .sdc-search-bar-button {
  35         background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
  36         background-color:  rgba(234, 234, 234, 0.88);
  37         width: 30px;
  38         height: 30px;
  39         padding: 0;
  40         cursor:pointer;
  41         border:solid 1px #cdcdcd;
  42         border-top-right-radius: 4px;
  43         border-bottom-right-radius: 4px;
  44
  45         &:hover {
  46             background-position:-126px -1275px;
  47         }
  48
  49         &:active {
  50             background-color:  rgba(31, 171, 223, 0.88);
  51             background-position:-45px -1275px;
  52             border-left:none;
  53         }
  54         &:focus {
  55             outline:none;
  56         }
  57
  58     }
  59 }