JMT Alimentation Animal
Project version : 1.0.3

Input Find Location 

<label class="input--find-location">
   <span>
      <span>Votre ville ou code postal</span>
      <input type="text" value="" class="input--unstyled" />
   </span>
   
   <span>
      <button type="submit" value="">
         <?xml version="1.0" encoding="UTF-8"?>
         <svg width="27px" height="36px" viewBox="0 0 27 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <g id="Templates" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <g id="12---Shop-index---Desktop-HD" transform="translate(-479.000000, -7326.000000)">
                     <g id="elements/blocks/block-shop-search" transform="translate(0.000000, 7106.000000)">
                         <g id="block-shop-search">
                             <g transform="translate(342.000000, 102.000000)">
                                 <g>
                                     <g id="icons/icon-map-atoms/icons/icon-map" transform="translate(137.000000, 118.000000)">
                                         <g id="map-marker-alt" fill-rule="nonzero">
                                             <path d="M13.5,2.25 C16.5050156,2.25 19.3301016,3.42021094 21.4549453,5.54505469 C23.5797891,7.66989843 24.75,10.4949844 24.75,13.5 C24.75,18.0344531 23.2950937,19.1580469 13.5,33.3232734 C3.70582031,19.1593125 2.25,18.0347344 2.25,13.5 C2.25,10.4949844 3.42021094,7.66989843 5.54505469,5.54505469 C7.66989844,3.42021094 10.4949844,2.25 13.5,2.25 Z M13.5,9 C11.0186719,9 9,11.0186719 9,13.5 C9,15.9813281 11.0186719,18 13.5,18 C15.9813281,18 18,15.9813281 18,13.5 C18,11.0186719 15.9813281,9 13.5,9 Z" id="Combined-Shape" fill="#F05D61"></path>
                                             <path d="M10.9335938,31.5 L22.1132812,15.75 C22.9170617,14.5814744 23.4561242,13.2338182 23.7304687,11.7070312 C24.0048133,10.1802443 24.0048133,8.5279006 23.7304688,6.75 L25.9101562,11.7070312 L25.9101562,16.171875 L22.1132812,23.4140625 L13.5,35.0859375 L10.9335938,31.5 Z" id="Path-2" fill="#D4484C"></path>
                                             <path d="M13.5,6.75 C9.77800781,6.75 6.75,9.77800781 6.75,13.5 C6.75,17.2219922 9.77800781,20.25 13.5,20.25 C17.2219922,20.25 20.25,17.2219922 20.25,13.5 C20.25,9.77800781 17.2219922,6.75 13.5,6.75 Z M13.5,18 C11.0186719,18 9,15.9813281 9,13.5 C9,11.0186719 11.0186719,9 13.5,9 C15.9813281,9 18,11.0186719 18,13.5 C18,15.9813281 15.9813281,18 13.5,18 Z M13.5,0 C6.04413281,0 0,6.04413288 0,13.5 C0,18.9431018 1.89632813,20.4631174 12.1125938,35.2736723 C12.7829531,36.242016 14.2169766,36.2421567 14.8874766,35.2736723 C25.1036719,20.4631174 27,18.9431018 27,13.5 C27,6.04413288 20.9558672,0 13.5,0 Z M13.5,33.3232734 C3.70582031,19.1593125 2.25,18.0347344 2.25,13.5 C2.25,10.4949844 3.42021094,7.66989843 5.54505469,5.54505469 C7.66989844,3.42021094 10.4949844,2.25 13.5,2.25 C16.5050156,2.25 19.3301016,3.42021094 21.4549453,5.54505469 C23.5797891,7.66989843 24.75,10.4949844 24.75,13.5 C24.75,18.0344531 23.2950937,19.1580469 13.5,33.3232734 Z" id="Shape" fill="#4C4636"></path>
                                         </g>
                                         <path d="M6.49992344,8.96756592 C8.7910422,8.96756592 10.6483609,8.55832621 10.6483609,8.05350344 C10.6483609,7.54868067 8.8213067,6.57644337 6.53018794,6.57644337 C4.23906917,6.57644337 2.35148594,7.54868067 2.35148594,8.05350344 C2.35148594,8.55832621 4.20880467,8.96756592 6.49992344,8.96756592 Z" id="Oval" fill="#FFC6C6" transform="translate(6.499923, 7.772005) rotate(-51.000000) translate(-6.499923, -7.772005) "></path>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
                 </g>
             </g>
         </svg>      </button>
   </span>
</label>
 
<label class="input--find-location">
   <span>
      <span>Votre ville ou code postal</span>
      <input type="text" value="" class="input--unstyled" />
   </span>
   
   <span>
      <button type="submit" value="">
         {{> @icons--pin }}
      </button>
   </span>
</label>
 
/* No context defined for this component. */
  • Content: 
    .input--find-location {
   display: flex;
   align-items: center;
   justify-content: space-between;
   
   background: $c-white;
   border-radius: 50px!important;
   box-shadow: 0 4px 16px 0 rgba(0,83,166,0.5);
   transition: .3s ease;

   &:hover, &:focus {
      box-shadow: 0 4px 20px 0 rgba(0,83,166,0.6);
   }

   > span:first-child {
      padding: $margin-s $margin-m $margin-s $margin-l;
      font-size: rem(16);
      width: 100%;

      > span {
         color: $c-brown-light;
         line-height: 1;
      }

      input {
         font-size: rem(18);
         padding:  0!important;
      }
   }

   > span:nth-child(2) { align-self: stretch }

   button[type="submit"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      -webkit-appearance: none;
      border: 0;
      background-color: $c-yellow;
      border-radius: 0 50px 50px 0;
      padding: $margin-s $margin-m*1.5 $margin-s $margin-m;
      cursor: pointer;
      transition: .3s ease;
      svg { transition: .2s }

      @include mediaWQuery($media-query-m) {
         padding: $margin-s $margin-xl $margin-s $margin-l;
      }

      &:hover, &:focus {
         background: $c-yellow-dark;
         svg { transform: translateY(3px) }
      } 
   }
}
  • URL: /components/raw/input-find-location/input-find-location.scss
  • Filesystem Path: components/05-objects/02-inputs/01-input/01-input-find-location/input-find-location.scss
  • Size: 1.3 KB

There are no notes for this item.