Elastic2022/plugins/swipe/swipe.less

/**
 * Swipe plugin styles
 */

@import (reference) "../../../../skins/elastic/styles/variables";
@import (reference) "../../../../skins/elastic/styles/mixins";

@color-swipe-list-background: contrast(@color-layout-list-background, darken(@color-layout-list-background, 10%), lighten(@color-layout-list-background, 40%));
@color-swipe-list: contrast(@color-swipe-list-background, lighten(@color-swipe-list-background, 30%), darken(@color-swipe-list-background, 40%), 57%);
@color-swipe-mark: @color-message-text;
@color-swipe-mark-background: @color-message-information;
@color-swipe-danger: @color-message-error-text;
@color-swipe-danger-background: @color-message-error;
@color-swipe-move: @color-message-warning-text;
@color-swipe-move-background: @color-message-warning;
@color-swipe-compose: @color-message-success-text;
@color-swipe-compose-background: @color-message-success;
@color-swipe-down-border: @color-swipe-list-background;
@color-swipe-down-background: @color-layout-list-background;

@color-dark-swipe-list-background: contrast(@color-dark-background, darken(@color-dark-background, 15%), lighten(@color-dark-background, 10%));
@color-dark-swipe-list: contrast(@color-dark-swipe-list-background, lighten(@color-dark-swipe-list-background, 30%), darken(@color-dark-swipe-list-background, 40%), 57%);
@color-dark-swipe-mark: @color-dark-font;
@color-dark-swipe-mark-background: @color-dark-message-information;
@color-dark-swipe-danger: @color-dark-font;
@color-dark-swipe-danger-background: @color-dark-message-error;
@color-dark-swipe-move: @color-dark-font;
@color-dark-swipe-move-background: @color-dark-message-warning;
@color-dark-swipe-compose: @color-dark-font;
@color-dark-swipe-compose-background: @color-dark-message-success;
@color-dark-swipe-down-border: @color-dark-swipe-list-background;
@color-dark-swipe-down-background: @color-dark-background;

#swipe-action {
  position: absolute;
  display: flex;
  align-items: center;
  border-collapse: collapse;

  &.horizontal {
    background-color: @color-swipe-list-background;

    a {
      color: @color-swipe-list;
    }
  }

  &.vertical {
    top: 2em;
    z-index: 1000;

    a {
      color: @color-swipe-list;
    }
  }

  &.horizontal,
  &.vertical > .swipe-container {
    &.swipe-checkmail,
    &.swipe-mark,
    &.swipe-select {
      background-color: @color-swipe-mark-background;

      a {
        color: @color-swipe-mark;
      }
    }

    &.swipe-danger {
      background-color: @color-swipe-danger-background;

      a {
        color: @color-swipe-danger;
      }
    }

    &.swipe-move {
      background-color: @color-swipe-move-background;

      a {
        color: @color-swipe-move;
      }
    }

    &.swipe-success,
    &.swipe-compose {
      background-color: @color-swipe-compose-background;

      a {
        color: @color-swipe-compose;
      }
    }
  }

  > .swipe-container {
    margin: 0;
    padding: 0;
    list-style-type: none;

    .swipe-action {
      font-size: 1.2em;
      opacity: 1;

      &::before {
        margin: 0 .5rem;
        font-size: inherit
      }
    }

    &.left {
      position: absolute;
      right: 0;

      .swipe-action::before {
        float: right;
      }
    }

    &.down {
      margin: 0 auto;
      padding: .01rem;
      background-color: @color-swipe-down-background;
      border-radius: 50%;
      border: 1px solid @color-swipe-down-border;

      .swipe-action {
        &::before {
          float: none;
          margin: .4rem;
          padding: .25rem;
          line-height: 1;
          font-size: 1.2em;
          width: auto;
          height: auto;
        }

        > .swipe-label {
          display: none;
        }
      }
    }
  }
}

.swipe-active:not(#swipe-action),
.swipe-active > td {
  background-color: @color-layout-list-background;
}

.toolbar.menu a.button.swipe {
  display: none;
}

// no support in IE
html.layout-small.touch:not(.ie),
html.layout-phone.touch:not(.ie) {
  .toolbar.menu {
    a.button {
      &.swipe {
        display: inline-block;

        &:before {
          content: @fa-var-hand-pointer;
        }
      }
    }
  }
}

// hide down option in Edge (see known issues in readme)
html.edge #swipeoptionsmenu > .swipeoptions-down {
  display: none;
}

// dark mode
& when (isdefined(@dark-mode-enabled)) {
  & when (@dark-mode-enabled = true) {
    html.dark-mode {
      #swipe-action {
        &.horizontal {
          background-color: @color-dark-swipe-list-background;

          a {
            color: @color-dark-swipe-list;
          }
        }

        &.vertical a {
          color: @color-dark-swipe-list;
        }

        &.horizontal,
        &.vertical > .swipe-container {
          &.swipe-active,
          &.swipe-mark {
            background-color: @color-dark-swipe-mark-background;

            a {
              color: @color-dark-swipe-mark;
            }
          }

          &.swipe-danger {
            background-color: @color-dark-swipe-danger-background;

            a {
              color: @color-dark-swipe-danger;
            }
          }

          &.swipe-move {
            background-color: @color-dark-swipe-move-background;

            a {
              color: @color-dark-swipe-move;
            }
          }

          &.swipe-success,
          &.swipe-compose {
            background-color: @color-dark-swipe-compose-background;

            a {
              color: @color-dark-swipe-compose;
            }
          }
        }

        > .swipe-container {
          &.down {
            background-color: @color-dark-swipe-down-background;
            border-color: @color-dark-swipe-down-border;
          }
        }
      }

      .swipe-active:not(#swipe-action),
      .swipe-active > td {
        background-color: @color-dark-background;
      }
    }
  }
}

@import (optional) "_custom";