ionic-framework/ionic/components/searchbar/searchbar.ios.scss

@import "../../globals.ios";
@import "./searchbar";

// iOS Searchbar
// --------------------------------------------------

$searchbar-ios-padding-top-bottom:        0 !default;
$searchbar-ios-padding-left-right:        8px !default;
$searchbar-ios-background-color:          rgba(0, 0, 0, .2) !default;
$searchbar-ios-border-color:              rgba(0, 0, 0, .05) !default;
$searchbar-ios-min-height:                44px !default;

$searchbar-ios-input-search-icon-color:   rgba(0, 0, 0, .5) !default;
$searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$searchbar-ios-input-search-icon-size:    13px !default;

$searchbar-ios-input-height:              3rem !default;
$searchbar-ios-input-line-height:         $searchbar-ios-input-height !default;
$searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, .5) !default;
$searchbar-ios-input-text-color:          #000 !default;
$searchbar-ios-input-background-color:    #fff !default;
$searchbar-ios-input-transition:          all 400ms cubic-bezier(.25, .45, .05, 1) !default;
$searchbar-ios-cancel-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;

$searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
$searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$searchbar-ios-input-clear-icon-size:     18px !default;

$searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;

// Searchbar
// -----------------------------------------

ion-searchbar {
  padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;

  min-height: $searchbar-ios-min-height;

  border-top: 1px solid transparent;
  border-bottom: 1px solid $searchbar-ios-border-color;
  background: $searchbar-ios-background-color;
}


// Searchbar Search Icon
// -----------------------------------------

.searchbar-search-icon {
  @include svg-background-image($searchbar-ios-input-search-icon-svg);
  @include calc(margin-left, "50% - 60px");

  position: absolute;
  top: 9px;
  left: 9px;

  width: $searchbar-ios-input-search-icon-size + 1;
  height: $searchbar-ios-input-search-icon-size + 1;

  background-repeat: no-repeat;
  background-size: $searchbar-ios-input-search-icon-size;

  transition: $searchbar-ios-input-transition;
}


// Searchbar Input Field
// -----------------------------------------

.searchbar-input {
  @include placeholder($searchbar-ios-input-placeholder-color);
  @include calc(padding-left, "50% - 28px");

  padding: 0 28px;

  height: $searchbar-ios-input-height;

  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: $searchbar-ios-input-line-height;

  color: $searchbar-ios-input-text-color;
  background-color: $searchbar-ios-input-background-color;

  transition: $searchbar-ios-input-transition;
}


// Searchbar Clear Input Icon
// -----------------------------------------

.searchbar-clear-icon {
  @include svg-background-image($searchbar-ios-input-clear-icon-svg);

  position: absolute;
  top: 0;
  right: 0;

  width: 30px;
  height: 100%;

  background-repeat: no-repeat;
  background-position: center;
  background-size: $searchbar-ios-input-clear-icon-size;
}


// Searchbar Cancel (iOS only)
// -----------------------------------------

.searchbar-ios-cancel {
  flex: 0 0 0%;

  margin-right: 0;
  margin-left: 0;
  padding: 0;

  height: 30px;

  visibility: hidden;
  transform: translateX(calc(100% + #{$searchbar-ios-padding-left-right}));
  transition: $searchbar-ios-cancel-transition;
}


// Searchbar Left Aligned (iOS only)
// -----------------------------------------

.searchbar-left-aligned {
  .searchbar-search-icon {
    margin-left: 0;
  }

  .searchbar-input {
    padding-left: 30px;
  }
}

// Searchbar Focused
// -----------------------------------------

.searchbar-focused {
  .searchbar-ios-cancel {
    flex: 0 0 auto;

    padding-left: 8px;

    visibility: visible;
    transform: translateX(0);
  }
}

// Searchbar in Toolbar
// -----------------------------------------

.toolbar {

  ion-searchbar {
    border-bottom-width: 0;
    background: transparent;

    .searchbar-input {
      background: $searchbar-ios-toolbar-input-background;
    }

    .searchbar-ios-cancel {
      padding: 0;
    }
  }

  .searchbar-focused .searchbar-ios-cancel {
    padding-left: 8px;
  }

}


// Searchbar Cancel (MD only)
// -----------------------------------------

.searchbar-md-cancel {
  display: none;
}


// Searchbar Hairlines (iOS only)
// -----------------------------------------

&.hairlines ion-searchbar {
  border-bottom-width: $hairlines-width;
}


// Generate Default Search Bar Colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {

  ion-searchbar[#{$color-name}] {
    .searchbar-ios-cancel {
      color: $color-base;

      &:hover:not(.disable-hover) {
        color: color-shade($color-base);
      }
    }
  }

  .toolbar[#{$color-name}] ion-searchbar {
    .searchbar-ios-cancel {
      color: $color-contrast;
    }
  }

}