mysociety/alaveteli

// Hide the submit form when JS is turned on
.js-loaded {
  .js-batch-authority-search-form input[type="submit"] {
    display: none;
  }
}

.batch-builder-mode {
    border-bottom: 1px solid #ddd;

    .tab-title > a {
        background-color: #F3F1EB;

        &:hover {
            background-color: scale-color(#F3F1EB, $lightness: -6%);
        }
    }

    .tab-title.active > a {
        border: 1px solid #ddd;
        border-bottom: none;
        margin-bottom: -1px;

        &:hover {
            background-color: #fff;
        }
    }
}

.batch-builder__list__item__anchor {
    color: rgb(51, 51, 51) !important;
    text-decoration: none;
    cursor: pointer;
}

// Toggle whether we're showing the "Add authority to batch" form or whatever
// we use to signify that it's already added. We print both in the HTML so
// that it's easier to toggle which is displayed later via JS.

.batch-builder__list__item__action__added {
  display: none;
  visibility: hidden;
}

.batch-builder__list__item__action__add {
  display: block;
  visibility: visible;
}

.js-batch-authority-search-results-list-item--added {
  .batch-builder__list__item__action__added {
    display: block;
    visibility: visible;
  }

  .batch-builder__list__item__action__add {
    display: none;
    visibility: hidden;
  }
}

.batch-builder__search-results,
.batch-builder__chosen-authorities {
    & > * {
        border: 1px solid #ddd;
        min-height: 10em;
        @include flexbox();
        @include flex-direction(column);
        @include justify-content(center);

        @media #{$large-up} {
            min-height: 30em;
        }
    }
}

.batch-builder__list__item {
    &:nth-child(odd) {
        background-color: #F3F1EB;
    }
}

.batch-builder__list__item__notes {
  font-size: 0.85em;

  summary {
    color: #2688dc;
  }

  p {
    color: grey;
  }
}

.batch-builder__list__item__action__added {
    color: green;
    font-weight: 600;
    width: 5em; // Assumes that `.add-authority-to-batch__form__submit` is roughly 5em wide
    text-align: center;
}

.batch-builder__list__group {
    // `li` matches the group "content" items
    li.batch-builder__list__item {
        background-color: transparent;
        border-bottom: 1px solid #F3F1EB;
    }
}

.batch-builder__search-results {
    .pagination {
        border-top: 1px solid #ddd;
        font-size: 0.8em;
    }
}

.batch-builder {
    .blank-slate,
    .ajax-error {
        padding: 1em;
        text-align: center;
        color: #999;
    }
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

// Direct descendant operator (>) means we're only matching the top-level
// list__item that controls the visibility of the contents of the list__group.
.batch-builder__list__group > .batch-builder__list__item {
    background-color: #F3F1EB;
    border-bottom: 1px solid #dcdbd7;

    .batch-builder__list__item__name {
        display: block;
        font-weight: bold;
        padding-left: 20px; // make space for the :before icon
        padding-right: 1em; // space between list item name and action button
        position: relative;

        &:before {
            content: "";
            display: block;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -6px;
            background: transparent image-url('alaveteli-pro/batch-control-sprite.png') no-repeat 0 0;
            background-image: image-url('alaveteli-pro/batch-control-sprite.svg'), none;
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }
}

.batch-builder__list__group--closed > .batch-builder__list__item {
    .batch-builder__list__item__name:before {
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

.batch-builder__list__group--loading > .batch-builder__list__item {
    .batch-builder__list__item__name:before {
        background-position: -12px 0;
        -webkit-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
    }
}

.button--add,
.button--remove,
.button--loading {
    &:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: transparent image-url('alaveteli-pro/batch-control-sprite.png') no-repeat -24px -12px;
        background-image: image-url('alaveteli-pro/batch-control-sprite.svg'), none;
        margin-right: 0.3em;
    }
}

.button--remove {
    &:before {
        background-position: -36px -12px;
    }
}

.button--loading {
    &:before {
        background-position: -12px -12px;
        -webkit-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
    }
}