18F/calc

@import '../base/_variables.scss';

/********************
 * Django admin CSS *
 * *****************/

// These styles are here to make the Django admin interface feel more like the
// rest of the site. The class names are those automatically generated from
// Django's templating system, so they don't follow our BEM methodology and
// sometimes we hae to target things in clumsy ways.
// There are a number of !important declarations used when trying to override
// Django styles that are already at the highest possible level of specificity.

// nav ul li temp styles until we can get the proper class added in the back end
// This is a nasty hack to highlight the "Site admin" section in the nav.
nav ul {
  margin-top: 0;
  li {
    padding-bottom: 1.1rem;
    border-bottom: 0;
    a[href*="admin"]{
      border-bottom: $space-1x solid $color-green-bright;
      padding-bottom: 6px;
      font-weight: $font-weight-bold;
    }
  }
}

// USWDS override, because Django's markup doesn't play nice by default
.field-is_muted input[type=checkbox],
.field-is_muted input[type=radio] {
    position: static;
    left: 0;
    width: auto;
}

.messagelist li {
  font-size: $h3-font-size;
  font-weight: $font-weight-bold;
  .info {
    color: $color-green-darkest;
  }
}

label,
.aligned label {
  font-weight: bold !important;
  float: none !important;
  font-size: 1.5rem;
  color: #222;
  width: auto;
}

form .aligned {
  p,
  p.help,
  ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
    font-size: 1.5rem !important;
  }
}

form .aligned p.help {
  color: $color-gray;
}

/* groups pages */
#user-tools ul {
  margin: 0;
  a {
    color: $color-base;
    text-decoration: none;

    &:hover {
       border-bottom: 2px solid $color-gray-dark;
    }
  }

  li {
    display: inline-block;
    margin: 0 2rem 0 0;
    &:last-child {
      margin-right: 0;
    }
  }
}

.change-form fieldset {
  max-width: none;
}

.selector {
  width: 100% !important;
  .selector-available,
  .selector-chosen {
    width: 45% !important;
    select {
      width: 100% !important;
    }
  }
}

.submit-row,
.selector .selector-available h2,
.selector-available h2,
.selector-chosen h2,
.selector .selector-filter,
#changelist #toolbar,
#changelist .paginator,
#changelist .actions {
  background: none !important;
  border: none !important;
}


.selector .selector-available h2,
.selector .selector-chosen h2 {
  color: $color-base !important;
  text-align: left;
}

select[multiple="multiple"] {
  background-image: none;
}

.selector-chosen select {
  border: 1px solid $color-gray !important;
}

#id_permissions_filter {
  padding-top: 0;
  input {
    margin-top: 0;
  }
}

.selector-filter label img {
  display: none;
}

.submit-row {
  text-align: left;
  a.deletelink {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: $color-red-dark !important;
    background: none !important;
  }
  input[type="submit"] {
    display: inline;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

// Styling for ul/lis with action links
.object-tools,
.messagelist {
  list-style: none;
}

table caption {
  background-color: $color-gray-lightest;
  padding: .5rem 1rem;
  border-bottom: 1px solid $color-gray-lighter;
  a {
    color: $color-gray;
    text-decoration: none;
    &:hover,
    &:active,
    &:focus {
      color: $color-gray;
    }
  }
}

thead a,
thead a:hover,
thead a:active,
thead a:focus {
  color: $color-gray;
}

.tabular fieldset {
  max-width: none;
}

// Django displays sort priorities when multiple cols are sorted. Hide 'em.
.sortpriority,
table th span:not(.tooltipstered).sortpriority {
  display: none;
}

// Display the sort direction arrow beside the text it refers to
#result_list .text {
  display: inline;
  + .clear {
    display: none;
  }
}

// add/change buttons
.add-related:after {
  content: "Add";
  margin-right: 10px;
}

.change-related:after {
  content: "Change";
  margin-right: 10px;
}

.delete-related:after {
  content: "Delete";
  margin-right: 10px;
}

.addlink,
.changelink,
.deletelink {
  position: relative;
  padding-left: 15px;
}

.addlink {
    background: url(/static/admin/img/icon-addlink.svg) 0 4px no-repeat;
  }

.changelink {
    background: url(/static/admin/img/icon-changelink.svg) 0 4px no-repeat;
}

.deletelink {
    background: url(/static/admin/img/icon-deletelink.svg) 0 4px no-repeat;
}

.deletelink {
  color: $color-gray-medium;
}

.mini.quiet {
  color: $color-gray-medium;
  font-size: $small-font-size;
}

//override forms.css
.inline-group {
  border: none !important;
  .tabular td.original p {
    display: none; /* this appears to simply append "submitted price list row" to lists */
  }
}

// same as filter-block in changelists.scss
.sidebar {
  background: $color-gray-lightest;
  border-radius: $border-radius;
  margin-bottom: 0;
  padding: 1rem 2rem;
  h2,
  h3 {
    font-size: 1.5rem; /* to match front-page h5 */
    font-weight: bold;
    letter-spacing: normal;
    margin-bottom: 0.5rem;
  }

  ul {
    list-style: none;
    margin: 0 0 2rem 0;
    li {
      margin-bottom: 0;
      &.selected a {
        color: $color-blue-dark;
        font-weight: bold;
        border-left: .5rem solid $color-blue-dark;
        margin-left: -2rem;
        padding-left: 1.5rem;
      }
      a {
        text-decoration: none;
        color: $color-gray;
      }
    }
  }
}

.paginator {
  font-weight: $font-weight-normal;
  font-style: italic;
  color: $color-gray-lighter;
  a {
    color: $color-white;
    font-weight: $font-weight-bold;
    font-style: normal;
  }
  .end {
    margin-right: 10px;
  }
  .this-page {
    color: $color-gold-lightest;
    font-weight: $font-weight-bold;
    font-style: normal;
  }
  .showall {
    margin-left: 5px;
  }
}

// users and groups multiselect form
.related-widget-wrapper {
  width: 100%;
  .selector .selector-available input {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.8rem;
  }
  .selector .selector-filter {
    padding: 0;
  }
  .selector ul.selector-chooser {
    background: transparent;
  }
  .selector #id_groups_filter.selector-filter label { padding: 0; }
}