framework7/components/sortable/sortable-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  .sortable-handler {
    width: 50px;
    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'><rect x='0' y='0' width='18' height='2' fill='#c7c7cc'></rect><rect x='0' y='6' width='18' height='2' fill='#c7c7cc'></rect></svg>");
  }
  .sortable {
    li.sorting {
      .md-depth(2);
    }
  }
  .sortable-enabled {
    .item-inner, .item-link .item-inner {
      .ltr({
        padding-right: 50px;
      });
      .rtl({
        padding-left: 50px;
      });
    }
  }
  .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: 50px;
    });
    .rtl({
      padding-left: 50px;
    });
  }

  .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(42px + constant(safe-area-inset-right))";
            padding-right: ~"calc(42px + 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(42px + constant(safe-area-inset-right))";
            padding-left: ~"calc(42px + env(safe-area-inset-right))";
          }
        }
      });
    });
  });
}