lcms-engine 0.1.0

data/app/assets/stylesheets/lcms/engine/utils/_colorcodes.scss

@@ -0,0 +1,61 @@
+.cs-bg {
+  @each $code, $color in $ub-colorcodes {
+    @include m(#{$code}) {
+      background-color: $color;
+    }
+  }
+
+  @each $code, $color in $ub-ld-colorcodes {
+    @include m(#{$code}) {
+      background-color: $color;
+    }
+  }
+}
+
+.cs-rgba-bg {
+  @each $code, $color in $ub-colorcodes {
+    @include m(#{$code}) {
+      background-color: rgba($color, .8);
+    }
+  }
+}
+
+.cs-tint-bg {
+  @each $code, $color in $ub-colorcodes {
+    @include m(#{$code}) {
+      $tint-color: scale-color($color, $lightness: 90%);
+      background-color: $tint-color;
+      &:before { border-bottom-color: $tint-color; }
+    }
+  }
+}
+
+.cs-txt {
+  @each $code, $color in $ub-colorcodes {
+    @include m(#{$code}) {
+      color: $color;
+    }
+  }
+}
+
+.cs-txt-link {
+  @each $code, $color in $ub-colorcodes {
+    @include m(#{$code}) {
+      &, &:hover, &:focus {
+        color: $color;
+      }
+    }
+  }
+}
+
+.cs-link-bg {
+  @each $code, $color in $ub-colorcodes {
+    @include m(#{$code}) {
+      &, &:hover, &:focus {
+        background: none;
+        color: $ub-white;
+        > div { background-color: $color; }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lcms/engine/utils/_functions.scss

@@ -0,0 +1,5 @@
+@function computed-height($typo, $lines) {
+  $font-size: map-get($typo, font-size);
+  $line-height: map-get($typo, line-height);
+  @return $font-size * ( $line-height / $font-size ) * $lines;
+}

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

@@ -0,0 +1,216 @@
+$text-sizes: (
+  'base': $global-font-size,
+  'large': $lead-font-size,
+  'small': $small-font-size
+);
+
+.u-text {
+  @each $text-size, $text-size-value in $text-sizes {
+    @include m(#{$text-size}) {
+      font-size: $text-size-value;
+    }
+  }
+}
+
+.u-color--base { color: $ub-txt !important; }
+
+.u-text--capitalized {
+  text-transform: capitalize;
+}
+
+.u-text--uppercase {
+  text-transform: uppercase;
+}
+
+.u-text--centered {
+  text-align: center;
+}
+
+.u-text--right {
+  text-align: right;
+}
+
+.u-text--strikethrough {
+  text-decoration: line-through;
+}
+
+.u-text--middled {
+  vertical-align: middle;
+}
+
+.u-text--bolded {
+  font-weight: bold !important;
+}
+
+.u-flex { display: flex; }
+
+.u-show { display: block !important; }
+
+.u-hidden { display: none !important; }
+
+.u-float-none { float: none !important;}
+
+$border-radius-aligns: (top-left, bottom-left, top-right, bottom-right);
+@each $border-radius-align in $border-radius-aligns {
+  .u-br-#{$border-radius-align}--base {
+    border-#{$border-radius-align}-radius: $global-radius;
+  }
+}
+$border-radius-sides: (top, bottom);
+@each $border-radius-side in $border-radius-sides {
+  .u-br-#{$border-radius-side}--base {
+    border-#{$border-radius-side}-left-radius: $global-radius;
+    border-#{$border-radius-side}-right-radius: $global-radius;
+  }
+}
+
+.u-br--2xbase {
+  border-radius: $global-radius * 2 !important;
+}
+
+$margins: (
+  'zero': 0,
+  'xs': $ub-small-margin * .7,
+  'small': $ub-small-margin,
+  'base': $ub-base-margin,
+  'large': $ub-large-margin,
+  'xlarge': $ub-xlarge-margin,
+  'xxlarge': $ub-xxlarge-margin,
+);
+$margins-align: (top, bottom, right, left);
+
+@each $margin-type, $margin-value in $margins {
+  @each $align in $margins-align {
+    .u-margin-#{$align}--#{$margin-type} {
+      margin-#{$align}: $margin-value !important;
+    }
+  }
+
+  .u-margin-horizontal--#{$margin-type} {
+    margin-left: $margin-value;
+    margin-right: $margin-value;
+  }
+
+  .u-margin-vertical--#{$margin-type} {
+    margin-bottom: $margin-value;
+    margin-top: $margin-value;
+  }
+}
+
+$paddings: (
+  'zero': 0,
+  'tiny': 5px,
+  'xs': $ub-small-margin * .7,
+  'small': $ub-small-margin,
+  'base': $ub-base-margin,
+  'large': $ub-large-margin,
+  'xlarge': $ub-xlarge-margin,
+);
+$paddings-align: (top, bottom, left, right);
+
+@each $padding-type, $padding-value in $paddings {
+  @each $align in $paddings-align {
+    .u-padding-#{$align}--#{$padding-type} {
+      padding-#{$align}: $padding-value !important;
+    }
+  }
+
+  .u-padding-horizontal--#{$padding-type} {
+    padding-left: $padding-value;
+    padding-right: $padding-value;
+  }
+}
+
+$align-directions: (top, bottom, left, right);
+$align-types: (padding, margin);
+
+@each $align-dir in $align-directions {
+  @each $align-type in $align-types {
+    .u-#{$align-type}-#{$align-dir}--gutter-half {
+      @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir}, $x: .5);
+    }
+
+    .u-#{$align-type}-#{$align-dir}--gutter {
+      @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir});
+    }
+
+    .u-#{$align-type}-#{$align-dir}--gutter2x {
+      @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir});
+    }
+  }
+}
+
+$bg: (
+  light: $ub-white,
+  base: $ub-panel-bg,
+  dark: $ub-hero-bg,
+  primary: $ub-primary1,
+  tooltip: darken($ub-tooltip, 1%),
+  ls: map-get($ub-leadership, bg),
+);
+
+.u-bg--base-gradient {
+  background-image: $ub-gray-gradient;
+}
+
+@each $bg-type, $bg-color in $bg {
+  .u-bg--#{$bg-type} {
+    background-color: $bg-color;
+  }
+}
+
+.u-wrap {
+  @each $bg-type, $bg-color in $bg {
+    @include m($bg-type) {
+      @extend .u-bg--#{$bg-type};
+      padding: $ub-base-padding;
+    }
+  }
+}
+
+.u-pd-content {
+  @include add-top-bottom-padding;
+}
+
+.u-pd-content--xlarge {
+  @include add-top-bottom-padding(2);
+}
+
+.u-link--disabled {
+  &, a {
+    color: $medium-gray;
+    cursor: not-allowed;
+  }
+}
+
+.u-hr-small {
+  @include clearfix;
+  border-bottom: 2px solid map-get($ub-yellow, base);
+  border-radius: 2px;
+  border-top: 3px solid map-get($ub-yellow, base);
+  margin-bottom: $ub-base-margin;
+  width: 52px;
+}
+
+.u-hr-small--green {
+  border-color: map-get($ub-green, base);
+}
+
+.u-hr-small--ls {
+  border-color: map-get($ub-leadership, base);
+}
+
+.u-centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.u-container {
+  @include m(condensed) {
+    max-width: 30rem;
+  }
+}
+
+.u-inline {
+  display: inline;
+}

data/app/assets/stylesheets/lcms/engine/utils/_mixins.scss

@@ -0,0 +1,194 @@
+// Block Element
+// @access public
+// @param {String} $element - Element's name
+@mixin element($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+// Block Modifier
+// @access public
+// @param {String} $modifier - Modifier's name
+@mixin modifier($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+// @alias element
+@mixin e($element) {
+  @include element($element) {
+    @content;
+  }
+}
+// @alias modifier
+@mixin m($modifier) {
+  @include modifier($modifier) {
+    @content;
+  }
+}
+
+@mixin txt-element-base($typo) {
+  @each $style, $value in $typo {
+    #{$style}: $value;
+  }
+  @if not map-has-key($typo, 'font-weight') {
+    font-weight: normal;
+  }
+}
+
+@mixin txt-element-base-strict($typo) {
+  @each $style, $value in $typo {
+    #{$style}: $value;
+  }
+}
+
+@mixin txt-element($element, $ub-map: $ub-element-typography) {
+  $typo: map-get($ub-map, $element);
+  @if map-has-key($typo, small) {
+    @each $breakpoint, $value in $typo {
+      @include breakpoint($breakpoint) {
+        @include txt-element-base($value);
+      }
+    }
+  } @else {
+    @include txt-element-base($typo);
+  }
+}
+
+@mixin txt-element-strict($element, $ub-map: $ub-element-typography) {
+  $typo: map-get($ub-map, $element);
+  @if map-has-key($typo, small) {
+    @each $breakpoint, $value in $typo {
+      @include breakpoint($breakpoint) {
+        @include txt-element-base-strict($value);
+      }
+    }
+  } @else {
+    @include txt-element-base-strict($typo);
+  }
+}
+
+@mixin txt-heading-base($element) {
+  $typo: map-get($ub-heading-typography, $element);
+  color: map-get($ub-txt-colors, $element);
+  @each $style, $value in $typo {
+    #{$style}: $value;
+  }
+}
+
+@mixin txt-heading($element) {
+  @include txt-heading-base($element);
+  @each $size, $headers in $header-sizes {
+    @include breakpoint($size) {
+      $font-size: map-get($headers, $element);
+      font-size: rem-calc($font-size);
+    }
+  }
+}
+
+@mixin txt-pdf-element($element) {
+  @include txt-element($element, $ub-pdf-typography);
+}
+
+@mixin clamp($lines, $element) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  $typo: map-get($ub-element-typography, $element);
+  @if map-has-key($typo, small) {
+    @each $breakpoint, $value in $typo {
+      @include breakpoint($breakpoint) {
+        max-height: computed-height($value, $lines);
+      }
+    }
+  } @else {
+    max-height: computed-height($typo, $lines);
+  }
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin breakpoint-style-from-map($map, $style) {
+  @each $breakpoint, $value in $map {
+    @if ($breakpoint == small) {
+      #{$style}: $value;
+    } @else {
+      @include breakpoint($breakpoint) {
+        #{$style}: $value;
+      }
+    }
+  }
+}
+
+@mixin add-gutter($type: margin, $subtype: bottom, $x: 1, $gutter: $grid-column-gutter) {
+  @each $breakpoint, $value in $gutter {
+    $margin: rem-calc($value);
+
+    @include breakpoint($breakpoint) {
+      #{$type}-#{$subtype}: $margin * $x;
+    }
+  }
+}
+
+@mixin add-column-padding($x: 1) {
+  @include add-gutter(padding, left, $x);
+  @include add-gutter(padding, right, $x);
+}
+
+@mixin add-column-margin($x: 1) {
+  @include add-gutter(margin, left, $x);
+  @include add-gutter(margin, right, $x);
+}
+
+@mixin add-top-bottom-padding($y: 1) {
+  @include add-gutter(padding, bottom, $y);
+  @include add-gutter(padding, top, $y);
+}
+
+@mixin add-top-bottom-margin($y: 1) {
+  @include add-gutter(margin, bottom, $y);
+  @include add-gutter(margin, top, $y);
+}
+
+@mixin placeholder($color: $ub-txt){
+  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $color;
+  }
+
+  ::-moz-placeholder { /* Firefox 19+ */
+    color: $color;
+  }
+
+  :-ms-input-placeholder { /* IE 10+ */
+    color: $color;
+  }
+
+  :-moz-placeholder { /* Firefox 18- */
+    color: $color;
+  }
+}
+
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: ($height / $width) * 100%;
+    width: 100%;
+  }
+
+  > .content {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}