mitlibraries-theme 0.1.0

data/vendor/assets/stylesheets/elements/_modules.scss

@@ -0,0 +1,173 @@
+// modules and other reusable bits
+
+.box-content {
+  border: 1px solid $gray-l3;
+  background-color: $white-t;
+  padding: 3%;
+}
+
+.bit {
+  margin: 0 0 3rem 0;
+  border-top: 3px solid $gray-l2;
+  padding-top: 1rem;
+  font-size: $fs-small;
+
+  .title {
+    @extend .hd-5;
+  }
+
+  ul {
+    @extend .list-unbulleted;
+  }
+}
+
+// global app style alerts and notices 
+
+.alert {
+
+  p {
+    margin-top: .2rem;
+    margin-bottom: .2rem;
+  }
+
+  &.info {
+    color: $black;
+  }
+
+  &.success {
+    color: $success;
+  }
+
+  &.warning {
+    color: $warning;
+  }
+
+  &.error {
+    color: $error;
+  }
+}
+
+.wrap-notices {
+  background-color: $gray-d1;
+  color: $white;
+  font-size: $fs-xsmall;
+
+  a {
+    color: $brand-primary2;
+  }
+
+  &.info {
+  }
+
+  &.success {
+    border-bottom: 4px solid $success;
+  }
+
+  &.warning {
+    border-bottom: 4px solid $warning;
+  }
+
+  &.error {
+    border-bottom: 4px solid $error;
+  }
+}
+
+.alert-banner {
+  display: block;
+  margin-bottom: 2rem;
+  border-radius: 2px;
+  padding: 1.6rem 2rem;
+  border: 1px solid $brand-primary;
+  border-top: 5px solid $brand-primary;
+  color: $black-t;
+  font-weight: $fw-bold;
+
+  .fa {
+    display: inline-block;
+    margin-right: .5em
+  }
+
+  &.success {
+    border: 1px solid $success;
+    border-top: 3px solid $success;
+    color: $black-t;
+  }
+
+  &.warning {
+    border: 1px solid $warning;
+    border-top: 5px solid $warning;
+    color: $black-t;
+  }
+
+  &.error {
+    border: 1px solid $error;
+    border-top: 5px solid $error;
+    color: $black-t;
+  }
+}
+
+.inline-action {
+
+  @media (min-width: $bp-screen-md) {
+
+    .message {
+      display: inline-block;
+      vertical-align: middle;
+      width: 65%
+    }
+
+    .actions {
+      display: inline-block;
+      vertical-align: middle;
+      width: 34%;
+      text-align: right;
+    }
+  }
+}
+
+.well {
+  margin: 2rem 0;
+  background-color: $wisp;
+  box-shadow: inset 0 0 5px $shadow;
+  padding: 2rem 2.5rem;
+}
+
+.panel {
+  position: relative;
+  margin: 1.5rem 0;
+  border: 1px solid $gray-l2;
+  background-color: $white;
+  border-top: 4px solid $brand-primary;
+
+  .panel-heading {
+    @extend .copy-lead;
+    margin: 1.5rem 2rem .5rem 2rem;
+  }
+
+  .panel-body {
+    margin: .5rem 2rem 1.5rem 2rem;
+  }
+
+  .panel-footer {
+    font-size: $fs-small;
+    border-top: 1px solid $gray-l2;
+    background-color: $wisp;
+    padding: 1rem 2rem;
+  }
+
+  &.panel-info {
+    border-top: 4px solid $brand-primary;
+  }
+
+  &.panel-success {
+    border-top: 4px solid $success;
+  }
+
+  &.panel-warning {
+    border-top: 4px solid $warning;
+  }
+
+  &.panel-danger {
+    border-top: 4px solid $error;
+  }
+}

data/vendor/assets/stylesheets/elements/_tables.scss

@@ -0,0 +1,112 @@
+// tables
+
+.highlight {
+  background-color: lighten($warning, 20%);
+}
+
+%table-base {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+
+  caption {
+    margin-bottom: .5rem;
+    font-size: $fs-small;
+    text-align: left;
+  }
+
+  tr:hover {
+    background-color: $smoke;
+  }
+
+  th {
+    font-weight: $fw-bold;
+    text-align: left;
+  }
+
+  th,
+  td {
+    padding: .75rem;
+    border: 1px solid $gray-l3;
+  }
+
+  tfoot {
+
+    tr {
+      border-top: 2px solid $gray-l3;
+      font-weight: $fw-bold;
+    }
+  }
+
+  // can be used on cols, rows, or cells
+  .is-highlighted {
+    @extend .highlight;
+  }
+
+  // can be used on rows or cells only
+  .align-left {
+    text-align: left;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+}
+
+.table {
+  @extend %table-base;
+}
+
+.table-simplified {
+  @extend %table-base;
+
+  th,
+  td {
+    border: none;
+    border-bottom: 1px solid $gray-l3;
+  }
+}
+
+// extra cozy
+.table-cozy {
+
+  th,
+  td {
+    padding: .5rem;
+  }
+}
+
+// extra comfortable
+.table-spacious {
+
+  th,
+  td {
+    padding: 1.2rem;
+  }
+}
+
+// wrapping div allows horizontally large tables to scroll on small screens
+.wrapper-table-scrollable {
+  width: 100%;
+  overflow-y: auto;
+}
+
+// responsive table enables `supplemental` columns to hide on small screens
+.table-responsive {
+
+  th.supplemental,
+  td.supplemental {
+    display: none;
+  }
+
+  @media(min-width: $bp-screen-md) {
+
+    th.supplemental,
+    td.supplemental {
+      display: table-cell;
+    }
+  }
+}

data/vendor/assets/stylesheets/global/_base.scss

@@ -0,0 +1,63 @@
+// Base setup
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-size: 62.5%;
+}
+
+body {
+  background-color: $gray;
+  color: $white;
+  font-size: 16px;
+  font-size: 1.6rem;
+  line-height: $lh-base;
+  font-family: $base-font;
+
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+ol, 
+ul {
+  padding-left: 2.5rem;
+}
+
+li > ul, 
+li > ol {
+  margin-top: .5rem;
+}
+
+dt {
+  font-weight: $fw-bold;
+}
+
+dd {
+  margin-left: 0;
+  margin-bottom: 1rem;
+}
+
+hr {
+  margin: 2rem 0;
+  border: none;
+  border-top: 1px solid $gray-l1;
+}
+
+a {
+  @extend %link;
+}
+
+// because
+.wrap-outer-header.reasons {
+  background: #f23074; /* Old browsers */
+  background: -moz-linear-gradient(45deg, #f23074 0%, #d6d628 36%, #207cca 66%, #544b8c 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(45deg, #f23074 0%,#d6d628 36%,#207cca 66%,#544b8c 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(45deg, #f23074 0%,#d6d628 36%,#207cca 66%,#544b8c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f23074', endColorstr='#544b8c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}

data/vendor/assets/stylesheets/global/_helpers.scss

@@ -0,0 +1,161 @@
+// mixins and extends for simple stuff that gets reused a lot
+
+.sr {
+  border: 0 none;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal;
+}
+
+@mixin sr-focusable {
+  &:focus {
+    position: static;
+    display: block;
+    height: auto;
+    width: auto; 
+  }
+}
+
+// flexbox wrapper
+.wrap-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+  
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+%unbutton {
+  @extend %link;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+// remove spacing from first/last children
+%clear-first-child {
+  &:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+  }
+}
+
+%clear-last-child {
+  &:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+%text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// lists
+%reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-indent: 0;
+
+  li,
+  dt,
+  dd {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.list-unbulleted {
+  list-style: none;
+  padding-left: 0;
+  text-indent: 0;
+}
+
+.list-inline {
+  @extend %reset-list;
+
+  li,
+  dt,
+  dd {
+    display: inline-block;
+  }
+}
+
+.list-inline-pipe {
+  padding-left: 0;
+
+  li, 
+  .item {
+    display: inline-block;
+    padding-right: 1rem;
+
+    &:after {
+      content: ' | ';
+      margin-left: 1rem;
+    }
+    
+    &:last-child:after {
+      content: '';
+    }
+  }
+}
+
+.is-hidden {
+  display: none;
+}
+
+
+%link {
+  transition: all .25s ease-in-out 0s;
+  color: $brand-primary;
+  text-decoration: underline;
+
+  // STATE: hover, active, focus
+  &:hover,
+  &:active,
+  &:focus {
+      color: $brand-primary-accent;
+  }
+
+  // STATE: is disabled
+  &:disabled,
+  &.is-disabled {
+    border: none;
+    background-color: $gray-l3;
+    color: $gray-d1;
+
+    &:hover {
+      border: none;
+      background-color: $gray-l3;
+      color: $gray-d1;
+      cursor: not-allowed;
+    }
+  }
+
+  // STATE: is pressed or active
+  &:active,
+  &.is-pressed,
+  &.is-active {
+      color: $brand-secondary;
+  }
+}
+
+