@charset "UTF-8";
@import "~@jereation/sass-helpers/_mixins";

// 覆盖 ionic
// ------------------------------
.pane, .view {
  background-color: #f5f5f5;
}

.pane, .view, .view-container {
  @include box-shadow(none !important);
}

.scroll-view.scroll-x, .scroll-view.scroll-y {
  overflow-x: hidden;
  overflow-y: hidden;
}

.overflow-scroll > .scroll {
  height: auto !important;
}

// 隐藏滚轮
::-webkit-scrollbar {
  display: none;
}

// spinner
.spinner {
  display: inline-block;
  vertical-align: middle;
  svg {
    display: block;
  }
}

// button
.button {
  border-radius: 2px;
}

.item .button-small {
  padding-left: 10px;
  padding-right: 10px;
}

.button.button-energized {
  background-color: #f2c72b;
}

.button.button-stable {
  border-color: #b2b2b2;
  background-color: #f8f8f8;
  color: #444;
}

.button .button-stable .activated, .button .button-stable .active {
  border-color: #a2a2a2;
  background-color: #e5e5e5;
  @include box-shadow(inset 0 1px 4px rgba(0, 0, 0, .1));
}

.bar-footer .button {
  min-width: 80px !important;
}

.button-adaption {
  max-height: 100%;
  height: auto;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  min-height: inherit;
  min-width: inherit;
  line-height: inherit;
}

.button-round-max {
  border-radius: 10px;
}

.button-normal {
  z-index: 1;
  padding: 0 8px;
  min-width: initial;
  min-height: 31px;
  font-weight: 400;
  font-size: 13px;
  line-height: 32px;
}

.bar {
  .fa {
    vertical-align: middle;
    &:before {
      font-size: 26px;
    }
  }
  .ion-share:before, .fa-share-square-o:before {
    color: #999;
  }
  .button.button-icon.ion-ios-close-empty:before {
    font-size: 38px;
  }
}

// select custom
.item-select-custom {
  padding: 12px;
  select {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 10px;
    direction: ltr;
    left: 0;
    width: 100%;
    max-width: 100%;
  }
  &:after {
    right: 4px;
    border-top: 4px solid;
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
  }
}

// slider
.slider-slides {
  padding-bottom: 2px;
}

.slider-pager {
  @include display-flex;
  width: 100%;
  height: 2px;
  bottom: 0;
}

.slider-pager-page {
  @include flex(1);
  display: block;
  width: 100%;
  margin: 0 !important;
  background-color: #fff;
}

.slider-pager-page.active {
  background-color: #ff7b7b;
}

// checkbox
.toggle.toggle-positive input:checked + .track {
  border-color: #f2c72b;
  background-color: #f2c72b;
}

// $actionSheet
.action-sheet-open .action-sheet-backdrop {
}

// $ionicPopup
.popup {
  border-radius: 5px !important;
  background-color: #fff !important;
}

.popup-head {
  border-radius: 5px 5px 0 0;
  background-color: #f2c72b;
}

.popup-body {
  padding-bottom: 0;
}

.popup-title {
  color: #fff;
}

.item .icon {
  font-size: 20px;
}

.icon-envelope {
  color: #9686d3;
}

.icon-rss {
  color: #5ca889;
}

.bar-footer .icon-share, .bar-footer .icon-share:before {
  font-size: 26px;
}

.icon-share, .icon-share:before {
  color: #999;
}

// item
.item {
  .button + .button {
    margin-left: 5px;
  }
}

.item-no-padding {
  padding: 0;
  .item-content {
    padding: 0;
  }
}

.item-divider-narrow {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #f5f5f5;
  color: #222;
  font-weight: 500;
  vertical-align: middle;
}

.item-has-divider:after {
  content: '';
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #f5f5f5;
  color: #222;
  font-weight: 500;
  vertical-align: middle;
}

.item .ion-chevron-right {
  color: #ccc;
}

.item-input {
  input {
    @include flex(1);
  }
  textarea {
    @include flex(1 220px);
    margin: 0;
    padding-right: 24px;
    font-size: 14px;
    border-radius: 0;
    @include appearance(none);
    background-color: transparent;
  }
}

// item-input
input[readonly] {
  pointer-events: none;
}

input:not([type=checkbox]):not([type=radio]):not([readonly]):not([disabled]) {
  @include appearance(none);
}

input[disabled], input[readonly]:not(.cloned-text-input), select[disabled], select[readonly], textarea[disabled], textarea[readonly]:not(.cloned-text-input) {
  background-color: transparent;
}

// item-input textarea
.item-input {
  white-space: inherit;
  input {
    @include flex(1);
  }
  textarea {
    @include flex(1 220px);
    margin: 0;
    padding-right: 24px;
    font-size: 14px;
    border-radius: 0;
    @include appearance(none);
    background-color: transparent;
    resize: none;
  }
}

.item-input-textarea {
  .input-label {
    padding-top: 10px;
    font-size: 14px;
  }
  textarea {
    padding-top: 10px;
  }
}

.input-label {
  padding: 0;
  font-size: 14px;
}

.item-input .input-select {
  @include flex(1 220px);
  @include appearance(none);
  padding-right: 24px;
  font-size: 14px;
  white-space: inherit;
}

.input-select-in {
  @include display-flex;
  @include align-items(center);
}

.input-select-text {
  @include flex(1);
  display: block;
  padding-right: 10px;
  word-break: break-all;
  width: 100%;
}

.item-input.item-icon-right input {
  padding-right: 50px;
}

.item-input textarea {
  min-height: 34px;
}

// item icon
.item.item-icon-left {
  .icon:first-child {
    font-size: 24px;
  }
}