mysociety/alaveteli

/* Layout across the site */
.wrapper {
  @include wrapper();
}

.wrapper--wide {
  // used in alaveteli-pro for wide outside gutters of the layout container
  // the rest of the grid remains the same
  @include wrapper($max-width: 72em);
}

/* Legacy ID-based wrapper */
#wrapper {
  @include wrapper();
}

.alaveteli-pro {
  #wrapper {
    @include wrapper($max-width: 72em);
  }
  #request_show {
    /* The pro dashboard uses /wrapper--wide but we don't want all pro pages to
     * TODO: there is a better way of doing this
     */
     max-width: 64em;
     margin: 0 auto;
  }
}

.content {
  @include content();
}

/* Legacy ID-based content */
#content {
  @include content();
}

textarea{
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    width: inherit;
  }
}


/* Container grid-rows for pages that use these generic headers and columns */
#public_body_list,
#user_profile_header,
#general_blog,
#request_show,
#info_request_batch_show,
#reports_new {
  @include grid-row($behavior: nest);
}

/* Column headers */
#header_right {
  @include grid-column(12);


  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:4, $float:right);
    padding-top:27px;
    @include ie8{
      padding-left: 0.9375em;
    }
    @include lte-ie7 {
      width: 17.438em;
    }
  }
}

#header_left {
  @include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column(8);
    @include ie8{
      padding-right: 0.9375em;
    }
    @include lte-ie7 {
      width: 36.813em;
    }
  }
}

/* Columns */
#left_column_flip, #left_column{
  @include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column(9);
    @include lte-ie7 {
      width: 41.625em;
    }
  }
}

#left_column_flip.left_column_flip--opposite {
  // This is an aggressive selector, but it's better than !important.
  // When we refactor the Sass to no longer use IDs this can be refactored too
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    float: right;
  }
}

.columns_header {
@include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:12);
    padding-left: 40px;
  }
}

#right_column_flip, #right_column {
  @include grid-column(12);
  margin-top: 20px;
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    margin-top: 0;
    @include grid-column($columns:3);
    @include lte-ie7 {
      width: 12.625em;
    }
  }
}

#left_column_flip, #right_column {
  @include ie8{
    padding-left: 0.9375em;
  }
}

#right_column_flip, #left_column {
  @include ie8{
    padding-right: 0.9375em;
  }
}
.box {
  padding: 1em;

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding: 1.2em;
  }
}

.sidebar--sticky {  
  @supports (position: sticky) or (position: -webkit-sticky){
    $sidebar-vertical-margin: 20px;
    $adminbar-height: 41px;
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      position: -webkit-sticky;
      position: sticky;
      top: $sidebar-vertical-margin;
      //If the sticky sidebar is taller than the screen height, make the contents scrollable
      max-height: calc(100vh - #{$sidebar-vertical-margin});
      overflow: auto;
      .admin + * & {
        // If you're an admin your sticky sidebar needs more space to account for the sticky admin bar
        top: $adminbar-height + $sidebar-vertical-margin;
        max-height: calc(100vh - #{$adminbar-height} - (#{$sidebar-vertical-margin} * 2));
      }
    }
  }
}

/*
 * Action menus
 */

.action-menu {
  list-style: none outside none;
  margin: 0;
  text-align: right;
}

.action-menu__button {
  margin-bottom: 0;
}

.action-menu__menu {
  padding: 1.25em;
  text-align: left;
  left: 0;
  right: auto;
  list-style: none outside none;
  ul {
    padding-left: 0;
    list-style: none outside none;
  }
  li {
    a {
      padding: 0;
    }
  }
}

/*
 * Action bar used at the top of many 'show' templates
 */

.action-bar__make-request,
.action-bar__follow,
.action-bar__follow-button,
.action-bar__follower-count {
 vertical-align: middle;
 font-size: 16px;
 margin: 1em 0;
 @include respond-min( 30em ){
   display: inline-block;
   margin:0 1em 0 0;
 }
}

.action-bar__follow,
.action-bar__follow-button,
.action-bar__follower-count {
  display: inline-block;
  margin-right: 0;
}

.action-bar__follower-count {
  font-size: 0.875em;
}

/*
 *  Drop-down style action button
 */

.request-header__action-bar__actions {
  .action-menu__menu {
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      left: auto; /* dropdown left or right */
      right: 0;
    }
  }
}

.action-menu__menu__submenu {
  margin-top: 0.25em;
}

.action-menu__menu__heading + .action-menu__menu__submenu {
  margin-bottom: 0.25em;
}

.action-menu__menu__item {
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  &:last-child {
    margin-bottom: 0.5em;
    padding-bottom: 0;
  }
  li {
    margin-bottom: 0.5em;
  }
}

.action-menu__menu__heading {
  display: block;
}

.no-js {
  // action menu becomes a hover-activated menu without javascript
  .action-menu__menu {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 280px;
  }
  .action-menu {
    &:hover,
    &:focus {
      .action-menu__menu {
        display: block;
      }
    }
  }
  .action-menu__button {
    &:focus {
      // we can show the menu with keyboard focus, but there's no way
      // to operate it by keyboard without javascript
      & + .action-menu__menu {
        display: block;
      }
    }
  }
}

.js-loaded {
  .dropit {
    list-style: none;
      padding: 0;
      margin: 0;
  }

  .dropit .dropit-trigger {
    position: relative;
   }

  .dropit .dropit-submenu {
    position: absolute;
    top: 100%;
    z-index: 1000;
    display: none;

    list-style: none;
    margin: 10px 0 60px 0;
    min-width: 100%;
    @include respond-min( 20em ){
      min-width: 280px;
    }
  }

  .dropit .dropit-open .dropit-submenu {
    display: block;
  }

  .js-hide {
    display: none;
  }
}


.inner-canvas {
  padding-bottom: 3em;
}

.inner-canvas-header {
  margin-top: 2em;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  h1 {
    margin-top: 0.4em;
    margin-bottom: 0.5em;
    display: block;
    width: 100%;
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      padding: 0 0.9375rem;
    }
  }
}

.inner-canvas-body {
  padding-top: 2em;
}

//Houdini customisations

.houdini-input {
  //should be hidden from view with no height
  margin: 0 !important;
  height: 0 !important;
}

.houdini-target {
  margin-top: 1.5em;
}