framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 3.89 kB
CSS
.ios{--f7-sortable-handler-width:36px;--f7-sortable-sorting-item-box-shadow:0px 2px 8px #0009;--f7-sortable-handler-color:#00000038;--f7-sortable-sorting-item-bg-color:#fffc}.ios .dark,.ios.dark{--f7-sortable-sorting-item-bg-color:#323232cc;--f7-sortable-handler-color:#ffffff8c}.md{--f7-sortable-handler-width:42px;--f7-sortable-sorting-item-box-shadow:none}.md,.md .dark,.md [class*=color-]{--f7-sortable-handler-color:var(--f7-md-on-surface-variant);--f7-sortable-sorting-item-bg-color:var(--f7-md-surface-3)}.sortable .sortable-handler{align-items:center;cursor:move;display:flex;height:100%;justify-content:center;left:var(--f7-safe-area-left);opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;transition-duration:.3s;width:var(--f7-sortable-handler-width);z-index:10}.sortable .sortable-handler:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;color:var(--f7-sortable-handler-color);display:block;font-feature-settings:"liga";font-size:20px;height:100%;height:20px;overflow:hidden;text-align:center;transform:translateX(10px);transition-duration:.3s;width:100%;width:18px}.sortable li.sorting{background:var(--f7-sortable-sorting-item-bg-color);box-shadow:var(--f7-sortable-sorting-item-box-shadow);transition-duration:0s;z-index:50}.sortable li.sorting .item-inner:after{display:none}.sortable-opposite .sortable-handler{left:auto;right:var(--f7-safe-area-left)}.sortable-opposite .sortable-handler:after{transform:translateX(-10px)}.sortable-opposite .item-content,.sortable-opposite.links-list li a,.sortable.simple-list li,.sortable:not(.sortable-opposite) .item-inner{transition-duration:.3s;transition-property:all}.sortable-sorting li{transition-duration:.3s}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler{opacity:1;pointer-events:auto;touch-action:none}.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after{transform:translateX(0)}.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,.sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting)>a:before{display:none}.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a,.no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,.sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner{padding-left:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a,.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content{padding-right:calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right))}.ios .sortable-handler:after{content:"sort_ios"}.md .sortable-handler:after{content:"sort_md"}