Advertisement
Igor150195

Поиск

Dec 21st, 2022
979
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.52 KB | Cryptocurrency | 0 0
  1. .gr-search-title {
  2.     @extend .remodal-block-title;
  3. }
  4. .gr-search-box {
  5.     margin: 0 0 30px;
  6. }
  7. .search-block {
  8.     border-radius: var(--brd_rad_6);
  9.     box-shadow: inset 0 0 0 1px var(--brd_m7_4);
  10.     transition: $transition;
  11.    
  12.     &:hover {
  13.         box-shadow: inset 0 0 0 2px var(--brd_m1);
  14.     }
  15.    
  16.     &__input {
  17.         @extend .gr-medium-input-desktop;
  18.         @extend .gr-medium-input-tablet;
  19.         @extend .gr-medium-input-mobile;
  20.        
  21.         color: $inputColorDefault;
  22.         border: none;
  23.         background: transparent;
  24.         box-shadow: none;
  25.         width: calc(100% - 50px);
  26.         height: auto;
  27.         outline: none;
  28.         -webkit-appearance: none;
  29.         -moz-appearance: none;
  30.         transition: $transition;
  31.         margin-right: 0;
  32.        
  33.         @media all and (max-width: 1260px) {
  34.             width: calc(100% - 48px);
  35.         }
  36.        
  37.         @media all and (max-width: 767px) {
  38.             width: calc(100% - 48px);
  39.         }
  40.     }
  41.    
  42.     &__btn {
  43.         width: 50px;
  44.         height: 50px;
  45.         border: none;
  46.         outline: none;
  47.         background: transparent;
  48.         font-size: 0;
  49.         padding: 0;
  50.        
  51.         @media all and (max-width: 1260px) {
  52.             width: 48px;
  53.             height: 48px;
  54.         }
  55.        
  56.         @media all and (max-width: 767px) {
  57.             width: 46px;
  58.             height: 46px;
  59.         }
  60.        
  61.         span {
  62.             height: 100%;
  63.             display: flex;
  64.             align-items: center;
  65.             justify-content: center;
  66.            
  67.             .gr-svg-icon {
  68.                 fill: var(--m5);
  69.                
  70.                 @media all and (max-width: 1260px) {
  71.                     display: none;
  72.        
  73.                     &.gr_small_icon {
  74.                         display: block;
  75.                     }
  76.                 }
  77.             }
  78.         }
  79.     }
  80. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement