AlchemyCMS/alchemy_cms

View on GitHub
app/assets/stylesheets/alchemy/list_filter.scss

Summary

Maintainability
Test Coverage
alchemy-list-filter {
  display: flex;
  position: relative;

  > alchemy-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .js_filter_field {
    width: 100%;
    padding-left: 28px;
    padding-right: 24px;
    margin: 0;

    form .input & {
      float: none;
      width: 100%;
    }
  }

  .js_filter_field_clear {
    display: flex;
    visibility: hidden;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
  }
}