framework7/components/sortable/sortable-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  .sortable-handler {
    width: 35px;
    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='#c7c7cc'><path d='M0,2V0h22v2H0z'/><path d='M0,7V5h22v2H0z'/><path d='M0,12v-2h22v2H0z'/></svg>");
  }
  .sortable {
    li.sorting {
      box-shadow: 0px 2px 8px rgba(0,0,0,0.6);
    }
  }
  .sortable-enabled {
    .item-inner, .item-link .item-inner {
      .ltr({
        padding-right: 35px;
      });
      .rtl({
        padding-left: 35px;
      });
    }
  }
  .list.sortable-enabled .item-link.no-chevron .item-inner,
  .list.sortable-enabled.no-chevron .item-link .item-inner,
  .list.sortable-enabled .no-chevron .item-link .item-inner,
  .no-chevron .list.sortable-enabled .item-link .item-inner {
    .ltr({
      padding-right: 35px;
    });
    .rtl({
      padding-left: 35px;
    });
  }

  .safe-areas-landscape({
    .safe-area-right({
      .ltr({
        .sortable-handler {
          right: constant(safe-area-inset-right);
          right: env(safe-area-inset-right);
        }
        .sortable-enabled:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-right-edge) {
          .item-inner, .item-link .item-inner {
            padding-right: ~"calc(35px + constant(safe-area-inset-right))";
            padding-right: ~"calc(35px + env(safe-area-inset-right))";
          }
        }
      });
    });
    .safe-area-left({
      .rtl({
        .sortable-handler {
          left: constant(safe-area-inset-left);
          left: env(safe-area-inset-left);
        }
        .sortable-enabled:not(.inset):not(.tablet-inset):not(.no-ios-edges):not(.no-ios-right-edge) {
          .item-inner, .item-link .item-inner {
            padding-left: ~"calc(35px + constant(safe-area-inset-right))";
            padding-left: ~"calc(35px + env(safe-area-inset-right))";
          }
        }
      });
    });
  });
}