lcms-engine 0.1.0

data/app/assets/stylesheets/lcms/engine/layout/_sticky-navigation.scss

@@ -0,0 +1,124 @@
+$sticky-width: 60px;
+$sticky-height: 60px;
+$sticky-btn-height: 90px;
+$sticky-btn-width: (small: 50px, medium: 60px, large: 60px, xlarge: 80px );
+$sticky-txt-width: 280px;
+//$sticky-btn-margin: $sticky-width - $sticky-btn-width;
+
+.o-sticky {
+  position: fixed;
+
+  @include breakpoint(small only) {
+    bottom: 0;
+    width: 50%;
+  }
+
+  @include breakpoint(medium) {
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover, &:focus {
+      .o-sticky__txt {
+        display: block;
+      }
+    }
+  }
+
+
+  @include m(right) {
+    right: 0;
+    text-align: right;
+
+    @include breakpoint(medium) {
+      @include e(btn) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  @include m(left) {
+    left: 0;
+    text-align: left;
+
+    @include breakpoint(medium) {
+      @include e(btn) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+    }
+  }
+
+  @include m(disabled) {
+    &, a {
+      cursor: not-allowed;
+      pointer-events: none !important;
+    }
+  }
+
+  @include e(wrap) {
+    flex-wrap: nowrap;
+    height: 100%;
+
+    @include breakpoint(medium) {
+      @include flex-align($x: center, $y: middle);
+    }
+
+    @include breakpoint(small only) {
+      @include m(right) {
+        @include flex-align($x: right, $y: middle);
+      }
+      @include m(left) {
+        @include flex-align($x: left, $y: middle);
+      }
+    }
+  }
+
+  @include e(btn) {
+    @include button($background: $ub-white, $background-hover: darken($ub-white, 10%), $color: $ub-txt);
+    @include breakpoint(medium) {
+      @include button($background: rgba($ub-panel-bg, .7), $background-hover: rgba($ub-white, .7), $color: $ub-txt);
+    }
+    @include button-expand;
+    border: 1px solid darken($ub-panel-bg, 5%);
+    height: $sticky-btn-height;
+    margin-bottom: 0;
+    padding: 0 $ub-xs-padding;
+
+    @include breakpoint(small only) {
+      border-radius: 0;
+      padding: 0;
+    }
+
+    @each $breakpoint, $btn-width in $sticky-btn-width {
+      @include breakpoint($breakpoint) {
+        min-width: $btn-width;
+      }
+    }
+
+  }
+
+  @include e(icon) {
+    @include flex-grid-column(shrink, 0);
+  }
+
+  @include e(txt) {
+    @include flex-grid-column(shrink, 0);
+    max-width: $sticky-txt-width;
+    text-align: left;
+    width: auto;
+
+    @include breakpoint(medium) {
+      display: none;
+      padding-left: $ub-xs-padding;
+    }
+  }
+
+  @include e(arrow-header) {
+    @include txt-element(arrow-header);
+  }
+
+  @include e(arrow-subheader) {
+    @include txt-element(arrow-subheader);
+  }
+
+}

data/app/assets/stylesheets/lcms/engine/layout/_subscribe.scss

@@ -0,0 +1,68 @@
+.o-subscribe {
+  background-color: map-get($ub-green, sixty);
+}
+
+.o-subscribe-form {
+  $ub-subscribe-form-bg: map-get($ub-green, eighty);
+
+  @include e(wrap) {
+    @include breakpoint(medium down) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  @include e(label) {
+    @include flex-grid-column(12);
+    @include flex-align-self(middle);
+    @include txt-element(subscribe-header);
+    @include add-top-bottom-padding($y: .5);
+    color: map-get($ub-mignight, base);
+
+    @include breakpoint(ipad) {
+      @include flex-grid-column(4, 0);
+      @include add-top-bottom-padding(0);
+      @include add-column-padding($x: 0);
+    }
+  }
+
+  @include e(email) {
+    //@include flex-grid-column(12, 0);
+    @include placeholder($ub-subscribe-txt);
+    height: $ub-subscribe-height;
+    margin-bottom: 0;
+    input {
+      @include txt-element(subscribe-text);
+      flex: 1 1 auto;
+      height: auto;
+      margin: 0;
+      padding: 1.5rem 1rem 1.5rem 2rem;
+      &, &:focus {
+        background-color: $ub-subscribe-form-bg;
+        border-color: $ub-subscribe-form-bg;
+        box-shadow: none;
+        color: $ub-subscribe-txt;
+      }
+    }
+
+    @include breakpoint(medium down) {
+      input {
+        @include add-column-padding($x: .5);
+        min-width: 1px;
+      }
+    }
+
+    @include breakpoint(ipad) {
+      @include flex-grid-column(8, 0);
+    }
+  }
+  @include e(submit) {
+    flex: 0 0 auto;
+    height: 100%;
+    button {
+      @include button($background: $ub-subscribe-form-bg, $background-hover: auto, $color: $ub-txt);
+      height: 100%;
+      margin: 0;
+    }
+  }
+}

data/app/assets/stylesheets/lcms/engine/pages/_about-people.scss

@@ -0,0 +1,115 @@
+$staff-img: 120px;
+
+.c-stp-header {
+  h1 { color: $ub-primary; }
+  @include e(title) {
+    font-family: $ub-serif;
+    font-weight: 600;
+    padding-bottom: $ub-small-padding;
+  }
+  @include breakpoint(large) {
+    p { width: 70%; }
+  }
+}
+
+@mixin staff-dsc($dsc-count) {
+  @for $i from 1 through $dsc-count {
+    &:nth-child(#{$dsc-count}n + #{$i}) {
+      .c-stp-staff__dsc {
+        margin-left: (1 - $i) * 100%;
+        width: $dsc-count * 100%;
+
+        &::before {
+          @include css-triangle($tooltip-pip-width, $ub-white, up);
+          bottom: 100%;
+          left: (100% / $dsc-count) * ($i - 1);
+          margin-left: $staff-img / 2;
+          position: absolute;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+
+.c-stp-staff {
+  @include e(item) {
+    @include flex-grid-column(12, 0);
+    @include staff-dsc(1);
+    flex-shrink: 1;
+
+    @include breakpoint(medium) {
+      @include flex-grid-column(6, 0);
+      @include staff-dsc(2);
+    }
+
+    @include breakpoint(large) {
+      @include flex-grid-column(4, 0);
+      @include staff-dsc(3);
+    }
+  }
+
+  @include e(dsc) {
+    @extend %material-card;
+    @extend %popup-shadow;
+    @include callout-base;
+    @include callout($ub-white);
+    @include add-column-padding;
+    @include add-top-bottom-padding;
+    display: none;
+
+    > div { @include txt-element(base); }
+
+    // @include breakpoint(large) {
+    //   > div { width: 75%;  }
+    // }
+    //
+    // @include breakpoint(medium) {
+    //   > div { width: 85%;  }
+    // }
+
+    .close-button {
+      color: map-get($ub-yellow, base);
+      font-size: xx-large;
+      font-weight: bold;
+    }
+  }
+}
+
+.c-stp-media {
+  @include media-object-container;
+  margin-bottom: .5rem;
+  margin-top: 1rem;
+
+  @include breakpoint(medium) {
+    @include add-gutter(margin, top, 1.5);
+    margin-bottom: 1rem;
+  }
+
+  @include e(img) {
+    @include media-object-section;
+    img {
+      @extend %material-card;
+      background-color: $ub-white;
+      border: 1px solid $medium-gray;
+      border-radius: 50%;
+      height: $staff-img;
+      width: $staff-img;
+    }
+  }
+
+  @include e(body) {
+    @include media-object-section;
+    flex: 1 1 0;
+    padding: $ub-base-padding $ub-xs-padding;
+
+    h3 {
+      @include txt-element(staff-name);
+      margin-bottom: .5rem;
+    }
+
+    h4 {
+      @include txt-element(staff-position);
+    }
+  }
+}

data/app/assets/stylesheets/lcms/engine/pages/_about.scss

@@ -0,0 +1,61 @@
+.c-ap {
+}
+
+.c-ap-hero {
+  background: image-url('lcms/engine/about_hero_bg.jpg'), no-repeat;
+  background-size: cover;
+  height: 300px;
+
+  @include e(body) {
+    @include grid-column-offset(4);
+    @include flex-grid-column(8);
+    background-color: rgba($ub-white, .45);
+    color: $ub-primary;
+
+    @include breakpoint(medium) {
+      @include grid-column-offset(6);
+      @include flex-grid-column(6);
+    }
+  }
+}
+
+.c-ap-cta {
+  @include add-gutter($type: margin, $subtype: bottom);
+  @include add-gutter($type: margin, $subtype: top);
+
+  h2 {
+    @include txt-element(media-header);
+    margin-bottom: 1rem;
+  }
+  p { @include txt-element(media-text); }
+}
+
+.c-ap-img--si {
+  background-image: image-url('lcms/engine/about_standards_institute.jpg');
+  background-repeat: no-repeat, no-repeat;
+  background-size: cover;
+
+  @media screen and #{breakpoint(medium)} and #{breakpoint(ipad down)} {
+    background-position: 40% 0;
+  }
+}
+
+.c-ap-img--hwa {
+  background-image: image-url('lcms/engine/about_who_we_are.jpg');
+  background-repeat: no-repeat, no-repeat;
+  background-size: cover;
+
+  @media screen and #{breakpoint(medium)} and #{breakpoint(ipad down)} {
+    background-position: 100% 0;
+  }
+}
+
+.c-ap-img--op {
+  background-image: image-url('lcms/engine/about_partners.jpg');
+  background-repeat: no-repeat, no-repeat;
+  background-size: cover;
+
+  @media screen and #{breakpoint(medium)} and #{breakpoint(ipad down)} {
+    background-position: 70% 0;
+  }
+}

data/app/assets/stylesheets/lcms/engine/pages/_content-guide.scss

@@ -0,0 +1,205 @@
+@mixin cg-page-color-scheme($map) {
+  .c-cg-btn-download {
+    $background: transparentize(#fff, .2);
+    $color: map-get($map, link);
+    @include button-style($background: $background, $background-hover: transparentize($background, .3),$color: $color);
+  }
+
+  .o-sidebar-nav {
+    @include e(header) {
+      color: map-get($map, sidebar);
+    }
+
+    @include e(sep) {
+      background: map-get($map, sidebar);
+    }
+
+    @include e(item) {
+      a {
+        &.active, &:hover {
+          color: map-get($map, sidebar);
+        }
+      }
+    }
+  }
+}
+
+.c-cg-hero {
+  background-color: $ub-hero-bg;
+
+  @include e(img) {
+    @extend %u-ph-img--light;
+    @include aspect-ratio(1, 1);
+    @include flex-grid-column(12);
+    background-color: $ub-hero-bg;
+    background-position: center center;
+    background-size: cover;
+    padding: 0 !important;
+
+    @include breakpoint(ipad) {
+      @include flex-grid-column(3);
+    }
+  }
+
+  @include e(body) {
+    @include flex-grid-column(12, 2 * 1.5rem);
+    padding-bottom: 3.5rem;
+    padding-top: 2.25rem;
+
+    @include breakpoint(ipad) {
+      @include flex-grid-column(9, 2 * 1.875rem);
+    }
+
+  }
+}
+
+.c-cg-content {
+  padding-bottom: $ub-large-padding * 2;
+  padding-top: $ub-xlarge-padding;
+
+  @include e(sidebar) {
+
+    @include breakpoint(medium down) {
+      @include add-gutter(margin, left, -.5);
+      @include add-gutter(margin, right, -.5);
+      // flex: 0 0 100%;
+      // min-width: 100%;
+      @include flex-grid-column(12, 0);
+      //display: none;
+    }
+
+    @include breakpoint(ipad) {
+      @include flex-grid-column(3);
+      border-right: 1px dotted $light-gray;
+    }
+  }
+
+  @include e(body) {
+    @include flex-grid-column(12, 2 * 1.75rem);
+
+    @include breakpoint(ipad) {
+      @include flex-grid-column(9);
+      padding: 0 2.125rem 0 2.25rem !important;
+    }
+
+    h1, h2, h3, h4 {
+      font-weight: bold;
+    }
+
+    h1 {
+      @include txt-heading(h3);
+      clear: both;
+      padding-top: 1.25rem;
+
+      & + h2 {
+        padding-top: 0 !important;
+      }
+    }
+
+    h2 {
+      @include txt-heading(h4);
+      padding-top: 1.25rem;
+
+      & + h3 {
+        padding-top: 0 !important;
+      }
+    }
+
+    h3 {
+      @include txt-heading(h5);
+      padding-top: 1.25rem;
+
+      & + h4 {
+        padding-top: 0 !important;
+      }
+    }
+
+    h4 {
+      @include txt-heading(h6);
+      padding-top: 1.25rem;
+    }
+
+    p, ol, ul {
+      &, * {
+        color: $ub-txt-dark;
+        font-family: $ub-sanserif !important;
+        font-size: 1rem !important;
+        line-height: 1.5 !important;
+      }
+    }
+
+    ul li {
+      text-indent: 0 !important;
+    }
+
+    img, span, td, table {
+      max-width: 100%;
+      //max-height: 100%;
+    }
+    img { height: auto !important; }
+
+    @include breakpoint(ipad down) {
+      p { margin: 0 !important; text-indent: 0 !important; }
+      li { margin-left: 15px !important;}
+      // span:not(.c-cg-standard):not(.c-cg-dropdown):not(.c-cg-icon), img {
+      //   width: 100% !important;
+      // }
+
+      table {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+    }
+
+  }
+}
+
+@include breakpoint(ipad down) {
+  .c-cg-dropdown {
+    max-width: 200px !important;
+    width: 100% !important;
+  }
+}
+
+.c-cg-grade {
+  text-transform: capitalize;
+
+  &::after {
+    content: ', ';
+  }
+
+  &:last-child::after {
+    content: ''
+  }
+}
+
+.c-cg-teaser {
+  @include txt-element(cg-teaser);
+  color: $ub-white;
+}
+
+.c-cg-title {
+  margin-bottom: 2rem;
+
+  * {
+    @include txt-element(cg-title);
+    color: $ub-white !important;
+    margin-bottom: 0;
+  }
+
+}
+
+.o-page--cg-ela {
+  @include cg-color-scheme($ub-cg-ela-colors);
+  @include cg-page-color-scheme($ub-cg-ela-colors);
+}
+
+.o-page--cg-math {
+  @include cg-color-scheme($ub-cg-math-colors);
+  @include cg-page-color-scheme($ub-cg-math-colors);
+}
+
+.o-page--cg-lead {
+  @include cg-color-scheme($ub-cg-lead-colors);
+  @include cg-page-color-scheme($ub-cg-lead-colors);
+}