Jen's Child-of-Seven Drupal Admin theme code

jensadmin.scss

// ----------------------------------------------------------------
//  FORMS
// ----------------------------------------------------------------

// Why are the buttons so far apart? Yuk. Fixed.
input.form-submit, a.button {
  margin-right: 0.5em;
} 

// Core field module overrides Seven styling for labels inside tables. Wha? Does Seven expect you aren't using fields?
form .field-multiple-table th.field-label {
  padding-left: 10px;
  padding-top: 4px;
} 

// I don't remember what this is, but it fixed something that bugged me once. I bet it improves viusal hierachy someplace. 
ul.tips,
div.description, 
.form-item div.description {
  line-height: 1.231em;
  font-size: 0.9em;
  color: #777;
}

// This hides everything for input filters — the tools for switching formats. Why? Because I set every field to only allow one format (Better Formats module + fierce attention to detail) -- so there's no format to switch. Ever. And I personally already know what all the formats mean & allow. The extensive repetitive help text text and links to more info just clutter up my ability to see the content I'm writing. Which drives me NUTS. So for the admin user role only (aka, for me only), I stashed everything for input filters. Of course, for certain client projects, this can't stay, and I delete it.
.user-admin {
  .filter-wrapper {
    display: none; 
  } 
  .field-type-text-long {
    margin-bottom: 10px;
  } // need a bit more space under each long-text field
}

// For people who do see the input filter tools, I've made some adjustments
.filter-wrapper {
  color: #999;
  font-weight: normal;
  font-size: 0.8em;
}
.filter-wrapper label {
  font-weight: normal;
  margin-right: 0.7em;
}
.form-wrapper div.description {
  color: #999;
  font-weight: normal;
  font-size: 0.8em;
}



// ----------------------------------------------------------------
//  FORM LAYOUT
// ----------------------------------------------------------------

// I hate the visual chaos of a complex input form. Chaos adds mental friction where we don't need it. 
// This makes fields that are ramdomly various different lengths a unified width of 100%.

.chosen-container {
  width: 100% !important;
}
.form-text {
  width: 99% !important;  
}

// This makes the Display Suite "2-col" and "2-col stacked" layouts responsive. 

// By the way, Display Suite has two sets of layouts — half are marked "fluid" and half are not marked fluid (or fixed or responsive). Yet -- because Drupal, I guess -- both the-marked-fluid-layouts AND the-not-marked-fluid-layouts actually fluid. No idea why. I would've expected the "not-fluid" layouts to be fixed, a la 2006. But they aren't. Everything is fluid. And nothing is responsive. 
// That's not what I want, so I overwrote the CSS.
 
// I took the not-marked-fluid fluid layout and made it responsive. These are the only two layouts I use, so these are the only two I wrote overrides for.
// Everything is 1 column until the viewport is 900px wide, and then it breaks out into 2-col shapes. 
// I also added a gutter down the middle because I don't like my form fields to be smashed up against each other. Who knew?

.ds-2col > .group-left,
.ds-2col-stacked > .group-left {
  float: none; 
  width: 100%;
}
.ds-2col > .group-right,
.ds-2col-stacked > .group-right {
  float: none; 
  width: 100%;
}
.ds-2col-stacked > .group-footer {
  padding-top: 20px;
  padding-bottom: 40px;
} 
 
@media screen and (min-width: 900px) {
  .ds-2col > .group-left,
  .ds-2col-stacked > .group-left {
    float: left; /* LTR */
    width: calc(50% - 20px);
    margin-right: 40px;
  }
  .ds-2col > .group-right,
  .ds-2col-stacked > .group-right {
    float: left; /* LTR */
    width: calc(50% - 20px);
  }
}


// ----------------------------------------------------------------
// OVERLAY ADJUSTMENTS
// ----------------------------------------------------------------

// Making the overlay always be at least a certain height. A super short overlay is ugly and weird.
#overlay-content {
  min-height: 250px;
} 


// ----------------------------------------------------------------
// CONTEXT MODULE
// ----------------------------------------------------------------

// Context, I love you, but you frustrate me by making the list of contexts to choose from into a tiny box with lots of scrolling. Why? Cut it out. My screen is giant. And browser scrollbars work nicely. Let's use them. 
#context-blockform .context-blockform-selector {
  height: 100%;
}

This is my current SASS file in the admin theme I use for all Drupal sites. It's a child of the Seven theme.