lcms-engine 0.1.0

data/app/assets/stylesheets/lcms/engine/freshdesk/utils/_helpers.scss

@@ -0,0 +1,22 @@
+@mixin u-hr-small {
+  @include add-top-bottom-margin(.5);
+  background-color: $fd-yellow;
+  border-radius: 5px;
+  clear: both;
+  height: 4px;
+  margin-bottom: $ub-base-margin;
+  width: 35px;
+}
+
+.u-hr-small {
+  @include u-hr-small;
+}
+
+%fd-card {
+  border-radius: 3px;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .08);
+}
+
+.u-margin-top--halfgutter {
+  @include add-gutter(margin, top, .5);
+}

data/app/assets/stylesheets/lcms/engine/freshdesk/utils/_unit.scss

@@ -0,0 +1,95 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group functions
+////
+
+$global-font-size: 100% !default;
+
+// scss-lint:disable ZeroUnit
+
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+///
+/// @param {Number} $num - Number to strip unit from.
+///
+/// @returns {Number} The same number, sans unit.
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+/// Converts one or more pixel values into matching rem values.
+///
+/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
+///
+/// @returns {List} A list of converted values.
+@function rem-calc($values, $base: null) {
+  $rem-values: ();
+  $count: length($values);
+
+  // If no base is defined, defer to the global font size
+  @if $base == null {
+    $base: $global-font-size;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == '%' {
+    $base: ($base / 100%) * 16px;
+  }
+
+  // Using rem as base allows correct scaling
+  @if unit($base) == 'rem' {
+    $base: strip-unit($base) * 16px;
+  }
+
+  @if $count == 1 {
+    @return -zf-to-rem($values, $base);
+  }
+
+  @for $i from 1 through $count {
+    $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
+  }
+
+  @return $rem-values;
+}
+
+// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
+@function -zf-bp-to-em($value) {
+  // Pixel and unitless values are converted to rems
+  @if unit($value) == 'px' or unitless($value) {
+    $value: rem-calc($value, $base: 16px);
+  }
+
+  // Then the value is converted to ems
+  @return strip-unit($value) * 1em;
+}
+
+/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
+/// @access private
+///
+/// @param {Number} $value - Pixel value to convert.
+/// @param {Number} $base [null] - Base for pixel conversion.
+///
+/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
+@function -zf-to-rem($value, $base: null) {
+  // Check if the value is a number
+  @if type-of($value) != 'number' {
+    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+    @return $value;
+  }
+
+  // Calculate rem if units for $value is not rem
+  @if unit($value) != 'rem' {
+    $value: strip-unit($value) / strip-unit($base) * 1rem;
+  }
+
+  // Turn 0rem into 0
+  @if $value == 0rem {
+    $value: 0;
+  }
+
+  @return $value;
+}

data/app/assets/stylesheets/lcms/engine/freshdesk/utils/_value.scss

@@ -0,0 +1,138 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group functions
+////
+
+/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
+///
+/// @param {Mixed} $val - Value to check.
+///
+/// @returns {Boolean} `true` if `$val` is not falsey.
+@function has-value($val) {
+  @if $val == null or $val == none {
+    @return false;
+  }
+  @if type-of($val) == 'number' and strip-unit($val) == 0 {
+    @return false;
+  }
+  @if type-of($val) == 'list' and length($val) == 0 {
+    @return false;
+  }
+  @return true;
+}
+
+/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
+///
+/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
+/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.
+///
+/// @returns {Number} A single value based on `$val` and `$side`.
+@function get-side($val, $side) {
+  $length: length($val);
+
+  @if $length == 1 {
+    @return $val;
+  }
+  @if $length == 2 {
+    @return map-get((
+      top: nth($val, 1),
+      bottom: nth($val, 1),
+      left: nth($val, 2),
+      right: nth($val, 2),
+    ), $side);
+  }
+  @if $length == 3 {
+    @return map-get((
+      top: nth($val, 1),
+      left: nth($val, 2),
+      right: nth($val, 2),
+      bottom: nth($val, 3),
+    ), $side);
+  }
+  @if $length == 4 {
+    @return map-get((
+      top: nth($val, 1),
+      right: nth($val, 2),
+      bottom: nth($val, 3),
+      left: nth($val, 4),
+    ), $side);
+  }
+}
+
+/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
+///
+/// @param {List} $val - Border value to find a value in.
+/// @param {Keyword} $elem - Border component to extract.
+///
+/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.
+@function get-border-value($val, $elem) {
+  // Find the width, style, or color and return it
+  @each $v in $val {
+    $type: type-of($v);
+    @if $elem == width and $type == 'number' {
+      @return $v;
+    }
+    @if $elem == style and $type == 'string' {
+      @return $v;
+    }
+    @if $elem == color and $type == 'color' {
+      @return $v;
+    }
+  }
+
+  // Defaults
+  $defaults: (
+    width: 0,
+    style: solid,
+    color: #000,
+  );
+
+  @return map-get($defaults, $elem);
+}
+
+/// Finds a value in a nested map.
+/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
+///
+/// @param {Map} $map - Map to pull a value from.
+/// @param {String} $keys... - Keys to use when looking for a value.
+/// @returns {Mixed} The value found in the map.
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+/// Casts a map into a list.
+/// @link http://hugogiraudel.com/2014/04/28/casting-map-into-list/
+///
+/// @param {Map} $map - Map to pull a value from.
+///
+/// @returns {List} Depending on the flag, returns either $keys or $values or both.
+@function map-to-list($map, $keep: 'both') {
+  $keep: if(index('keys' 'values', $keep), $keep, 'both');
+
+  @if type-of($map) == 'map' {
+    $keys: ();
+    $values: ();
+
+    @each $key, $val in $map {
+      $keys: append($keys, $key);
+      $values: append($values, $val);
+    }
+
+    @if $keep == 'keys' {
+      @return $keys;
+    } @else if $keep == 'values' {
+      @return $values;
+    } @else {
+      @return zip($keys, $values);
+    }
+  }
+
+  @return if(type-of($map) != 'list', ($value,), $map);
+
+}

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

@@ -0,0 +1,63 @@
+.o-connect {
+  @include flex-grid-column(12, 0);
+  color: $ub-nav-link;
+  flex-direction: column;
+  padding-bottom: $ub-xlarge-padding;
+  padding-top: $ub-xlarge-padding;
+
+  @include breakpoint(medium) {
+    @include flex-grid-column(4, 0);
+  }
+
+  @include breakpoint(medium only) {
+  }
+
+  @include e(button) {
+    padding-bottom: .2rem;
+    padding-right: .2rem;
+  }
+
+  @include e(buttons) {
+    @include flex;
+    flex-wrap: wrap;
+  }
+
+  @include e(dsc) {
+    @include txt-element(connect-text);
+    margin-bottom: 1.5rem;
+    padding-right: $ub-base-padding;
+  }
+
+  @include e(list) {
+    @include menu-simple;
+    margin: 0;
+    li { margin-right: .75rem; }
+
+    i { font-size: 2.3rem; }
+
+    a {
+      color: $ub-nav-link;
+
+      &:hover {
+        color: scale-color($ub-nav-link, $lightness: -20%);
+      }
+    }
+  }
+
+  @include e(hr) {
+    border: 1px solid $ub-nav-link;
+    margin: 0;
+    opacity: .5;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      display: none;
+    }
+  }
+
+  h2 {
+    @include txt-element(connect-header);
+    margin-bottom: 0;
+    text-transform: uppercase;
+  }
+}

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

@@ -0,0 +1,150 @@
+$logo-width: 143px;
+// NOTE: for regular logo it's 8px
+$logo-padding: 0;
+$footer-padding: 5px;
+// NOTE: for full site it's xlarge
+$footer-breakpoint: large;
+$footer-breakpoint-down: ipad;
+
+.c-footer {
+  background-color: $ub-footer-bg;
+  color: $ub-nav-link;
+  display: table-row;
+
+  @include e(dropdown) {
+    @include txt-element-strict(ld-tooltip);
+    background: map-get($ub-ld-colorcodes, tooltip-bg);
+    border: 0;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .25);
+    margin-top: $tooltip-pip-width;
+    padding: 1rem;
+
+    * {
+      word-wrap: break-word;
+    }
+
+    a {
+      position: relative;
+      text-decoration: none;
+
+      &::after {
+        background-color: $anchor-color;
+        bottom: -1px;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
+    }
+
+    &::before {
+      @include css-triangle($tooltip-pip-width, map-get($ub-ld-colorcodes, tooltip-bg), down);
+      position: absolute;
+      top: 100%;
+    }
+
+    [data-close] {
+      float: right;
+      position: relative;
+      right: -.5rem;
+      top: -.5rem;
+    }
+  }
+
+  @include e(credits) {
+    line-height: 1.2rem;
+
+    @include m(mobile) {
+      padding: 5px 5px 0 0;
+
+      a {
+        color: $ub-nav-link;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @include e(credits-link) {
+    cursor: pointer;
+  }
+
+  @include e(wrap) {
+    @include flex-align(left, middle);
+    padding-bottom: $ub-large-padding;
+    padding-top: $ub-large-padding;
+
+    @include breakpoint($footer-breakpoint) {
+      padding-bottom: $ub-large-padding;
+      padding-top: $ub-xlarge-padding * 1.118;
+    }
+  }
+
+  @include e(link) {
+    &, a { color: $ub-nav-link; }
+    &:hover, &:focus, a:hover, a:focus { color: $ub-white; text-decoration: none; }
+  }
+
+  @include e(logo) {
+    @include flex-grid-column(shrink, 0);
+
+    @include breakpoint($footer-breakpoint) {
+      padding-bottom: $logo-padding;
+    }
+
+    img { width: $logo-width; }
+  }
+
+  @include e(item) {
+    @include flex-grid-column(12, 0);
+    color: darken($ub-nav-link, 20%);
+    margin-top: $ub-small-margin;
+    text-align: left;
+
+    @include breakpoint($footer-breakpoint) {
+      @include flex-grid-column(shrink);
+      margin-top: 0;
+
+      @include m(full) {
+        @include flex-grid-column(null, 0);
+        align-self: center;
+        text-align: right;
+      }
+    }
+  }
+
+  @include e(list) {
+    @include menu-base;
+    @include menu-direction(horizontal);
+    color: $ub-whitesmoke;
+
+    li {
+      a, span { padding: 0 $footer-padding; }
+    }
+
+    @include breakpoint($footer-breakpoint-down down) {
+      display: inline-flex;
+      flex-wrap: wrap;
+
+      li {
+        flex: 0 0 auto;
+
+        a, span {
+          line-height: 1.5;
+          padding: 0;
+        }
+
+        &.t-bullet {
+          padding: 0 $footer-padding;
+        }
+      }
+    }
+  }
+}
+
+.t-bullet {
+  &::after {
+    color: $ub-nav-link;
+    content: '\2022';
+  }
+}