web-apps/apps/documenteditor/mobile/resources/less/app-ios.less

@import url('../../../../../vendor/framework7/src/less/ios/_mixins.less');
@import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less');

// Colors
@themeColor: #446995; // (64,102,215)

@import url('../../../../../vendor/framework7/src/less/ios/intro.less');
@import url('../../../../../vendor/framework7/src/less/ios/grid.less');
@import url('../../../../../vendor/framework7/src/less/ios/views.less');
@import url('../../../../../vendor/framework7/src/less/ios/pages.less');
@import url('../../../../../vendor/framework7/src/less/ios/toolbars.less');
@import url('../../../../../vendor/framework7/src/less/ios/toolbars-pages.less');
@import url('../../../../../vendor/framework7/src/less/ios/searchbar.less');
@import url('../../../../../vendor/framework7/src/less/ios/messagebar.less');
@import url('../../../../../vendor/framework7/src/less/ios/icons.less');
//@import url('../../../../../vendor/framework7/src/less/ios/badges.less');
//@import url('../../../../../vendor/framework7/src/less/ios/chips.less');
@import url('../../../../../vendor/framework7/src/less/ios/content-block.less');
@import url('../../../../../vendor/framework7/src/less/ios/lists.less');
//@import url('../../../../../vendor/framework7/src/less/ios/contacts.less');
@import url('../../../../../vendor/framework7/src/less/ios/forms.less');
//@import url('../../../../../vendor/framework7/src/less/ios/floating-button.less');
//@import url('../../../../../vendor/framework7/src/less/ios/accordion.less');
@import url('../../../../../vendor/framework7/src/less/ios/cards.less');
@import url('../../../../../vendor/framework7/src/less/ios/modals.less');
@import url('../../../../../vendor/framework7/src/less/ios/panels.less');
//@import url('../../../../../vendor/framework7/src/less/ios/lazy-load.less');
@import url('../../../../../vendor/framework7/src/less/ios/tabs.less');
@import url('../../../../../vendor/framework7/src/less/ios/messages.less');
@import url('../../../../../vendor/framework7/src/less/ios/statusbar.less');
@import url('../../../../../vendor/framework7/src/less/ios/preloader.less');
@import url('../../../../../vendor/framework7/src/less/ios/progressbar.less');
//@import url('../../../../../vendor/framework7/src/less/ios/pull-to-refresh.less');
//@import url('../../../../../vendor/framework7/src/less/ios/infinite-scroll.less');
//@import url('../../../../../vendor/framework7/src/less/ios/autocomplete.less');
@import url('../../../../../vendor/framework7/src/less/ios/swiper.less');
//@import url('../../../../../vendor/framework7/src/less/ios/photo-browser.less');
@import url('../../../../../vendor/framework7/src/less/ios/picker.less');
//@import url('../../../../../vendor/framework7/src/less/ios/calendar.less');
@import url('../../../../../vendor/framework7/src/less/ios/notifications.less');
//@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less');
@import url('../../../../../vendor/framework7/src/less/ios/disabled.less');

// Disable text select
* {
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  user-select:text;
}

// Main Toolbar
#editor-navbar.navbar .right a + a,
#editor-navbar.navbar .left a + a {
  margin-left: 0;

  html:not(.phone) & {
    margin-left: 10px;
  }
}

@import url('../../../../common/mobile/resources/less/_mixins.less');
@import url('../../../../common/mobile/resources/less/ios/_container.less');
@import url('../../../../common/mobile/resources/less/ios/_dataview.less');
@import url('../../../../common/mobile/resources/less/ios/_listview.less');
@import url('../../../../common/mobile/resources/less/ios/_button.less');
@import url('../../../../common/mobile/resources/less/ios/_contextmenu.less');
@import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
@import url('../../../../common/mobile/resources/less/ios/_about.less');
@import url('../../../../common/mobile/resources/less/ios/_color-schema.less');
@import url('../../../../common/mobile/resources/less/ios/_collaboration.less');


@import url('ios/_search.less');
@import url('ios/_icons.less');

.label-switch input[type="checkbox"]:checked + .checkbox {
  background: @themeColor;
}

// Top offset

#editor_sdk {
  position: absolute;
  left: 0;
  right: 0;
  top: @toolbarSize;
  bottom: 0;
  height: auto;
  overflow: hidden;
  .transition(300ms);
}

// Add Container

#add-table,
#add-shape {
  .page {
    background-color: #fff;
  }
}

// Table styles

.table-styles {
  .row {
    &, li {
      margin-bottom: 12px;
    }
  }

  li,
  .row div {
    margin: 0;
    padding: 1px;

    img {
      width: 70px;
      height: 50px;
    }
  }
}

// Chart styles

.chart-styles {
  .row {
    &, li {
      margin-bottom: 12px;
    }
  }

  li,
  .row div {
    margin: 0;
    padding: 1px;
  }
}

// Shapes

.shapes {
  li {
    width: 70px;
    height: 70px;
    margin: 0 1px;

    .thumb {
      width: 100%;
      height: 100%;
      background-color: @themeColor;
    }
  }
}

// Charts

.chart-types {
  li {
    width: 60px;
    height: 60px;
    margin: 6px;

    .thumb {
      width: 100%;
      height: 100%;
      background-size: contain;
    }
  }
}

// Bullets and numbers

.bullets,
.numbers {
  ul {
    margin-top: 10px;
  }

  li {
    width: 70px;
    height: 70px;
    margin-right: 1px;
    border: 1px solid #c4c4c4;
    html.pixel-ratio-2 & {
      border: 0.5px solid #c4c4c4;
    }
    html.pixel-ratio-3 & {
      border: 0.33px solid #c4c4c4;
    }

    &.active {
      //
    }

    .thumb {
      width: 100%;
      height: 100%;
      background-color: @white;
      background-size: cover;

      label {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 34%;
      }
    }
  }
}

// Co-Authtoring

.username-tip {
  background-color: #ee3525;
  border: none;
  border-radius: 0;
  padding: 3px 10px;
  color: #ffffff;
  white-space: nowrap;
}

// Workaround ios 10.3

.range-slider input[type=range]::-webkit-slider-thumb {
  height: 28px;
  width: 28px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 10;
  -webkit-appearance: none;
}

.modal.modal-in {
  max-height: 100%;
  overflow: auto;
}

// Skeleton of document

.doc-placeholder {
  background: #fbfbfb;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  > .line {
    height: 15px;
    margin: 30px;
    background: #e2e2e2;
    overflow: hidden;
    position: relative;

    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
    -moz-animation: flickerAnimation 2s infinite ease-in-out;
    -o-animation: flickerAnimation 2s infinite ease-in-out;
    animation: flickerAnimation 2s infinite ease-in-out;
  }
}