mitlibraries-theme 0.1.0

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

@@ -0,0 +1,74 @@
+// content-specific styles
+
+.wrap-content {
+
+// unreset base content pieces  
+  h1,
+  .hd-1 {
+    @extend .hd-1;
+  }
+
+  h2,
+  .hd-2 {
+    @extend .hd-2;
+  }
+
+  h3,
+  .hd-3 {
+    @extend .hd-3;
+  }
+
+  h4,
+  .hd-4 {
+    @extend .hd-4;
+  }
+
+  h5,
+  .hd-5 {
+    @extend .hd-5;
+  }
+
+  h6,
+  .hd-6 {
+    @extend .hd-6;
+  } 
+
+  .subtitle {
+    @extend .hd-subtitle1;
+  }
+
+  .subtitle2 {
+    @extend .hd-subtitle2;
+  }
+
+  .subtitle3 {
+    @extend .hd-subtitle3;
+  }
+
+  li {
+    margin-bottom: .5em;
+  }
+
+  // wordpress specific classes
+  .title-page {
+    margin-bottom: 1rem;
+    padding: .5rem 0 1rem 0;
+    font-weight: $fw-bold;
+  }
+
+  .cta-link {
+    transition: background-color ease-in-out .3s;
+    display: inline-block;
+    padding: .5em;
+    color: $black;
+    font-size: $fs-large;
+    font-weight: $fw-bold;
+    text-decoration: underline;
+
+    &:hover {
+      background-color: $brand-secondary;
+      color: $white;
+    }
+  }
+}
+

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

@@ -0,0 +1,156 @@
+
+.button-primary {
+  transition: background-color .25s, border .25s;
+  display: inline-block;
+  border: 1px solid $brand-primary;
+  border-radius: 3px;
+  padding: 5px 10px;
+  background-color: $brand-primary;
+  color: $white;
+  text-decoration: none;
+
+  &:hover, 
+  &:focus {
+    background-color: $brand-primary-accent;
+    border-color: $brand-primary-accent;
+    color: $white;
+    text-decoration: none;
+  }
+
+  &.green {
+    border: 1px solid darken($black, 5%);
+    background-color: $black;
+
+    &:hover, 
+    &:focus {
+      background-color: saturate($green-muted, 20%);
+      border-color: $green-muted;
+    }
+  }
+
+  &.magenta {
+    border: 1px solid darken($black, 5%);
+    background-color: $black;
+
+    &:hover, 
+    &:focus {
+      background-color: saturate($magenta-muted, 20%);
+      border-color: $magenta-muted;
+    }
+  }
+
+  &.warn {
+    border: 1px solid darken($error, 10%);
+    background-color: darken($error, 5%);
+
+    &:before {
+      font-family: FontAwesome;
+      content: "\f071 ";
+      font-size: .8em;
+      margin-right: 5px;
+    }
+
+    &:hover, 
+    &:focus {
+      background-color: saturate($error, 20%);
+      border-color: $error;
+    }
+  }
+}
+
+.button-secondary {
+  transition: background-color .25s, border .25s;
+  display: inline-block;
+  border: 1px solid $gray-l2;
+  border-radius: 3px;
+  padding: 5px 10px;
+  background-color: transparent;
+  color: $black;
+  text-decoration: none;
+
+  &:hover, 
+  &:focus {
+    background-color: $brand-primary-accent;
+    border-color: $brand-primary-accent;
+    color: $white;
+    text-decoration: none;
+  }
+
+  &.green {
+    color: $black;
+
+    &:hover, 
+    &:focus {
+      background-color: saturate($green-muted, 20%);
+      border-color: $green-muted;
+      color: $white;
+    }
+  }
+
+  &.magenta {
+    color: $black;
+
+    &:hover, 
+    &:focus {
+      background-color: saturate($magenta-muted, 20%);
+      border-color: $magenta-muted;
+      color: $white;
+    }
+  }
+
+  &.warn {
+    color: $error;
+
+    &:before {
+      font-family: FontAwesome;
+      content: "\f071 ";
+      font-size: .8em;
+      margin-right: 5px;
+    }
+
+    &:hover, 
+    &:focus {
+      background-color: saturate($error, 20%);
+      border-color: $error;
+      color: $white;
+    }
+  }
+}
+
+.button-subtle {
+  @extend .button-secondary;
+  border: 0;
+}
+
+.button-small {
+  padding: 2px 10px;
+}
+
+
+// ruby pagination nav
+.pagination {
+  margin: 1rem;
+
+  .page {
+    display: inline-block;
+    min-width: 3rem;
+    text-align: center;
+  }
+
+  a {
+    @extend .button-subtle;
+  }
+
+  .current {
+    font-weight: $fw-bold;
+  }
+
+  .gap {
+  }
+
+  .next {
+  }
+
+  .last {
+  }
+}

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

@@ -0,0 +1,114 @@
+// footer styles
+
+.wrap-outer-footer {
+  background-color: $black;
+  color: $white;
+  font-size: $fs-xsmall;
+}
+
+.wrap-footer {
+    background: $black image-url("vi-shape7-tp.svg") no-repeat 10% center;
+
+  a {
+    @extend %link;
+    color: $white;
+    text-decoration: none;
+  }
+
+  .title {
+    @extend .hd-6;
+    margin-bottom: .8rem;
+  }
+
+  .wrap-list .link-sub {
+    display: list-item;
+    list-style-type: none;
+    margin-bottom: .65rem;
+    font-weight: $fw-light;
+  }
+
+  .logo-mit-lib {
+    fill: $white;
+
+    img {
+      max-height: 60px;
+      max-width: 100%;
+      vertical-align: baseline;
+    }
+  }
+
+  .wrap-usergroups {
+    @extend .list-inline-pipe;
+    font-size: $fs-small;
+  }
+
+  .wrap-social {
+
+    p, a {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: .5rem;
+      margin-bottom: 0;
+      text-transform: uppercase;
+      font-size: $fs-xsmall;
+    }
+
+    svg {
+      height: 2em;
+      width: 2em;
+      border-radius: 50%;
+      padding: 0.2em;
+      background: $white none repeat scroll 0 0;
+
+      path {
+        fill: $gray-d1;
+      }
+    }
+  }
+}
+
+// footer - adjustments for slim
+.wrap-footer.footer-slim {
+
+  .sitemap-libraries-abbrev a {
+    @extend .list-inline-pipe;
+    font-size: $fs-small;
+  }
+
+}
+
+// MIT footer
+.wrap-outer-footer-institute {
+  background-color: $gray-d1;
+  font-size: $fs-xxsmall;
+  color: $gray-l3;
+
+  a {
+    @extend %link;
+    color: $white;
+  }
+
+  .link-logo-mit {
+    display: inline-block;
+
+    .logo-mit {
+      fill: $gray-l2;
+
+      .color {
+        fill: $white;
+      }
+    }
+  }
+
+  .about-mit {
+    @extend .list-inline-pipe;
+    display: inline-block;
+    color: $gray-l3;
+    text-transform: uppercase;
+  }
+
+  .license {
+    margin-top: 1rem;
+    color: $gray-l3;
+  }
+}

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

@@ -0,0 +1,151 @@
+// base form styles
+
+form {
+  margin: 1.5rem 0;
+
+  fieldset {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid $gray-l2;
+    padding: 1rem 1.5rem;
+  }
+
+  legend {
+    padding: 0 1rem;
+    font-size: $fs-small;
+    color: $gray;
+    text-transform: uppercase;
+  }
+
+  .field-wrap, 
+  .field-group {
+    margin-bottom: 1rem;
+  }
+  
+  .field-label {
+    display: inline-block;
+    margin-bottom: .2rem;
+    font-size: $fs-small;
+    font-weight: $fw-bold;
+  }
+
+  .field {
+    display: block;
+    margin-top: .2rem;
+    margin-bottom: .2rem;
+
+    &:focus, &:active {
+      border-color: $brand-primary-accent;
+      box-shadow: 0 0 5px rgba($brand-primary-accent,.8);
+    }
+
+    &.wide {
+      width: 90%;
+    }
+  }
+
+  .field-text {
+    min-width: 25rem;
+    border: 1px solid $gray-l2;
+    border-radius: 2px;
+    padding: 6px 12px;
+    background-image: none;
+    background-color: $white-t;
+    box-shadow: inset 0 0 3px rgba(0,0,0,.2);
+  }
+
+  .tip, 
+  .hint {
+    font-size: $fs-small;
+    color: $informational;
+    margin-bottom: 0;
+
+    &.error {
+      color: $error;
+    }
+  }
+
+  .field-textarea {
+    display: block;
+    min-width: 25rem;
+  }
+
+  .field-select {
+    display: block;
+    min-width: 25rem;
+  }
+
+  .field-upload {
+    border: none;
+  }
+
+  .group-inline {
+    margin-bottom: 1rem;
+
+    .field-wrap {
+      display: inline-block;
+      vertical-align: top;
+      margin-bottom: .2rem;
+    }    
+
+    .field-select {
+      min-width: auto;
+    }
+  }
+
+ .fields-inline {
+  
+    .field-label {
+      display: inline-block;
+      max-width: 30%;
+    }
+
+    .field {
+      display: inline-block;
+      max-width: 65%;
+    }
+
+    &.field-radio {
+      display: inline-block;
+      margin-right: 1.5rem;
+    }
+  }
+
+  .disabled {
+    color: $gray;
+    cursor: not-allowed;
+  }
+
+// CASE: form/field error - error class should go on field-wrap
+  .error {
+
+    .field-label {
+      color: $error;
+    }
+
+    .field {
+      border-color: $error;
+    }
+
+    .tip, 
+    .hint {
+      color: $error;
+    }
+
+  }
+
+}
+
+// simple input - button type form
+.form-horizontal {
+  .form-input {
+    display: inline-block;
+    width: 80%;
+  }
+
+  .form-action {
+    display: inline-block;
+    width: 18%;
+  }
+}
+

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

@@ -0,0 +1,92 @@
+// header and navigation styles
+
+#skip {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  color: $gray-l2;
+  background-color: $black;
+  border-bottom: 2px solid $success;
+
+  &:focus {
+    position: relative;
+    display: block;
+    height: auto;
+    width: 100%;
+    padding: 5px 2%;
+  }
+}
+
+.wrap-outer-header {
+  background-color: $black;
+  color: $white;
+}
+
+.wrap-header {
+  background: $black image-url("vi-shape7-tp.svg") no-repeat 0 65%;
+
+  .logo-mit-lib {
+    display: inline-block;
+    fill: $white;
+    color: $white;
+
+    img {
+      width: auto;
+      max-height: 44px;
+      max-width: 100%;
+    }
+  }
+
+  .link-logo-mit {
+    color: $white;
+
+    .logo-mit {
+      fill: $gray-l1;
+
+      .color {
+        fill: $white;
+      }
+    }
+  }
+}
+
+// local header and nav
+.wrap-outer-header-local {
+  border-bottom: 1px solid $gray-l2;
+  background-color: $white-t;
+  color: $gray-d1;
+
+  .wrap-header-local {
+    padding-top: 2rem;
+  }
+
+  a {
+    color: $gray-d1;
+    text-decoration: none;
+  }
+
+  .title-site {
+    @extend .hd-2;
+    margin-bottom: 0;
+  }
+
+  .action-auth {
+    @extend .button-primary;
+  }
+}
+
+
+// breadcrumb styles
+.wrap-outer-breadcrumb {
+  background-color: $white;
+  color: $gray;
+  font-size: $fs-xsmall;
+}
+
+.wrap-breadcrumb {
+  padding-top: 7px;
+  padding-bottom: 5px;
+}