modularis 0.0.1

data/scss/compagecss/components/_clearing.scss

@@ -0,0 +1,217 @@
+//
+// Clearing Variables
+//
+
+// We use these to set the background colors for parts of Clearing.
+$clearing-bg:                           #111 !default;
+$clearing-caption-bg:                   $clearing-bg !default;
+$clearing-carousel-bg:                  #111 !default;
+$clearing-img-bg:                       $clearing-bg !default;
+
+// We use these to style the close button
+$clearing-close-color:                  #fff !default;
+$clearing-close-size:                   40px !default;
+
+// We use these to style the arrows
+$clearing-arrow-size:                   16px !default;
+$clearing-arrow-color:                  $clearing-close-color !default;
+
+// We use these to style captions
+$clearing-caption-font-color:           #fff !default;
+$clearing-caption-padding:              10px 30px !default;
+
+// We use these to make the image and carousel height and style
+$clearing-active-img-height:            75% !default;
+$clearing-carousel-height:              150px !default;
+$clearing-carousel-thumb-width:         175px !default;
+$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
+
+
+// We decided to not create a mixin for Clearing because it relies
+// on predefined classes and structure to work properly.
+// The variables above should give enough control.
+
+/* Clearing Styles */
+[data-clearing] {
+  @include clearfix;
+  margin-bottom: 0;
+  list-style: none;
+
+  li {
+    float: $default-float;
+    margin-#{$opposite-direction}: 10px;
+  }
+}
+
+.clearing-blackout {
+  background: $clearing-bg;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  #{$default-float}: 0;
+  z-index: 998;
+
+  .clearing-close { display: block; }
+}
+
+.clearing-container {
+  position: relative;
+  z-index: 998;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+}
+
+.visible-img {
+  height: 95%;
+  position: relative;
+
+  img {
+    position: absolute;
+    #{$default-float}: 50%;
+    top: 50%;
+    margin-#{$default-float}: -50%;
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+
+.clearing-caption {
+  color: $clearing-caption-font-color;
+  line-height: 1.3;
+  margin-bottom: 0;
+  text-align: center;
+  bottom: 0;
+  background: $clearing-caption-bg;
+  width: 100%;
+  padding: $clearing-caption-padding;
+  position: absolute;
+  #{$default-float}: 0;
+}
+
+.clearing-close {
+  z-index: 999;
+  padding-#{$default-float}: 20px;
+  padding-top: 10px;
+  font-size: $clearing-close-size;
+  line-height: 1;
+  color: $clearing-close-color;
+  display: none;
+
+  &:hover,
+  &:focus { color: #ccc; }
+}
+
+.clearing-assembled .clearing-container { height: 100%;
+  .carousel > ul { display: none; }
+}
+
+
+// Large screen overrides
+@media #{$small} {
+  .clearing-main-prev,
+  .clearing-main-next {
+    position: absolute;
+    height: 100%;
+    width: 40px;
+    top: 0;
+    & > span {
+      position: absolute;
+      top: 50%;
+      display: block;
+      width: 0;
+      height: 0;
+      border: solid $clearing-arrow-size;
+    }
+  }
+  .clearing-main-prev {
+    #{$default-float}: 0;
+    & > span {
+      #{$default-float}: 5px;
+      border-color: transparent;
+      border-#{$opposite-direction}-color: $clearing-arrow-color;
+    }
+  }
+  .clearing-main-next {
+    #{$opposite-direction}: 0;
+    & > span {
+      border-color: transparent;
+      border-#{$default-float}-color: $clearing-arrow-color;
+    }
+  }
+
+  .clearing-main-prev.disabled,
+  .clearing-main-next.disabled { opacity: 0.5; }
+
+  // If you want to show a lightbox, but only have a single image come through as the thumbnail
+  .clearing-feature ~ li { display: none; }
+
+  .clearing-assembled .clearing-container {
+
+    .carousel {
+      background: $clearing-carousel-bg;
+      height: $clearing-carousel-height;
+      margin-top: 5px;
+
+      & > ul {
+        display: block;
+        z-index: 999;
+        width: 200%;
+        height: 100%;
+        margin-#{$default-float}: 0;
+        position: relative;
+        #{$default-float}: 0;
+
+        li {
+          display: block;
+          width: $clearing-carousel-thumb-width;
+          height: inherit;
+          padding: 0;
+          float: $default-float;
+          overflow: hidden;
+          margin-#{$opposite-direction}: 1px;
+          position: relative;
+          cursor: pointer;
+          opacity: 0.4;
+
+          &.fix-height {
+            img {
+              min-height: 100%;
+              height: 100%;
+              max-width: none;
+            }
+          }
+
+          a.th {
+            border: none;
+            -webkit-box-shadow: none;
+                    box-shadow: none;
+            display: block;
+          }
+
+          img {
+            cursor: pointer !important;
+            min-width: 100% !important;
+          }
+
+          &.visible { opacity: 1; }
+        }
+      }
+    }
+
+    .visible-img {
+      background: $clearing-img-bg;
+      overflow: hidden;
+      height: $clearing-active-img-height;
+    }
+  }
+
+  .clearing-close {
+    position: absolute;
+    top: 10px;
+    #{$opposite-direction}: 20px;
+    padding-#{$default-float}: 0;
+    padding-top: 0;
+  }
+}

data/scss/compagecss/components/_custom-forms.scss

@@ -0,0 +1,246 @@
+//
+// Custom Form Variables
+//
+
+// We use these to control the basic form styles input styles
+$custom-form-border-color:              #ccc !default;
+$custom-form-bg:                        #fff !default;
+$custom-form-bg-disabled:               #ddd !default;
+$custom-form-check-color:               #222 !default;
+
+// We use these to style the custom select form element.
+$custom-select-bg:                      #fff !default;
+$custom-select-fade-to-color:           #f3f3f3 !default;
+$custom-select-border-color:            #ddd !default;
+$custom-select-triangle-color:          #aaa !default;
+$custom-select-triangle-color-open:     #222 !default;
+$custom-select-height:                  emCalc(13px) + ($form-spacing * 1.5) !default;
+$custom-select-margin-bottom:           emCalc(20px) !default;
+$custom-select-font-color-selected:     #141414 !default;
+$custom-select-disabled-color:          #888 !default;
+
+// We use these to control the style of the custom select dropdown element.
+$custom-dropdown-height:                200px !default;
+$custom-dropdown-bg:                    #fff !default;
+$custom-dropdown-border-color:          darken(#fff, 20%) !default;
+$custom-dropdown-border-width:          1px !default;
+$custom-dropdown-border-style:          solid !default;
+$custom-dropdown-font-color:            #555 !default;
+$custom-dropdown-font-size:             emCalc(14px) !default;
+$custom-dropdown-color-selected:        #eeeeee !default;
+$custom-dropdown-font-color-selected:   #000 !default;
+$custom-dropdown-shadow:                0 2px 2px 0px rgba(0,0,0,0.1) !default;
+$custom-dropdown-offset-top:            auto !default;
+$custom-dropdown-list-padding:          emCalc(4px) !default;
+$custom-dropdown-default-float-padding: emCalc(6px) !default;
+$custom-dropdown-opposite-padding:      emCalc(38px) !default;
+$custom-dropdown-list-item-min-height:  emCalc(24px) !default;
+$custom-dropdown-width-small:           134px !default;
+$custom-dropdown-width-medium:          254px !default;
+$custom-dropdown-width-large:           434px !default;
+
+// We decided not to make a mixin for the custom forms because
+// they rely on a very specific class naming structure.
+// We may look at updating this in the future.
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-button-classes != false {
+
+  /* Custom Checkbox and Radio Inputs */
+  form.custom {
+
+    .hidden-field {
+      margin-#{$default-float}: -99999px;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    .custom {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      top: 2px;
+      border: solid 1px $custom-form-border-color;
+      background: $custom-form-bg;
+
+      &.radio { @include radius(1000px); }
+
+      &.checkbox {
+        &:before {
+          content: "";
+          display: block;
+          line-height: 0.8;
+          height: 14px;
+          width: 14px;
+          text-align: center;
+          position: absolute;
+          top: 0;
+          #{$default-float}: 0;
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+      &.radio.checked {
+        &:before {
+          content: "";
+          display: block;
+          width: 8px;
+          height: 8px;
+          @include radius(1000px);
+          background: $custom-form-check-color;
+          position: relative;
+          top: 3px;
+          #{$default-float}: 3px;
+        }
+      }
+
+      &.checkbox.checked {
+        &:before {
+          content: "\00d7";
+          color: $custom-form-check-color;
+        }
+      }
+    }
+  }
+
+  /* Custom Select Options and Dropdowns */
+  form.custom {
+    .custom.dropdown {
+      display: block;
+      position: relative;
+      top: 0;
+      height: $custom-select-height;
+      margin-bottom: $custom-select-margin-bottom;
+      margin-top: 0px;
+      padding: 0px;
+      width: 100%;
+      background: $custom-dropdown-bg;
+      background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
+      background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      font-size: $custom-dropdown-font-size;
+      vertical-align: top;
+
+      ul {
+        overflow-y: auto;
+        max-height: $custom-dropdown-height;
+      }
+
+      .current {
+        cursor:default;
+        white-space: nowrap;
+        line-height: $custom-select-height - emCalc(1px);
+        color: $input-font-color;
+        text-decoration: none;
+        overflow: hidden;
+        display: block;
+        margin-#{$default-float}: $form-spacing / 2;
+        margin-#{$opposite-direction}: $custom-select-height;
+      }
+
+      .selector {
+        cursor:default;
+        position: absolute;
+        width: $form-spacing * 2.5;
+        height: $custom-select-height;
+        display: block;
+        #{$opposite-direction}: 0;
+        top: 0;
+        &:after {
+          content: "";
+          display: block;
+          @include css-triangle(5px, $custom-select-triangle-color, top);
+          position: absolute;
+          #{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
+          top: 50%;
+          margin-top: -3px;
+        }
+      }
+
+      &:hover, &.open {
+        a.selector {
+          &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
+        }
+      }
+
+      .disabled {
+        color: $custom-select-disabled-color;
+        &:hover {
+          background: transparent;
+          color: $custom-select-disabled-color;
+          &:after { display: none; }
+        }
+      }
+
+      &.open ul {
+        display: block;
+        z-index: 10;
+        min-width:100%;
+        @include box-sizing(content-box);
+      }
+
+      &.small { max-width: $custom-dropdown-width-small; }
+      &.medium { max-width: $custom-dropdown-width-medium; }
+      &.large { max-width: $custom-dropdown-width-large; }
+      &.expand { width: 100% !important; }
+
+      &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
+      &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
+      &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
+    }
+
+    .custom.dropdown ul {
+      position: absolute;
+      width: auto;
+      display: none;
+      margin: 0;
+      #{$default-float}: -$input-border-width;
+      top: $custom-dropdown-offset-top;
+      -webkit-box-shadow: $custom-dropdown-shadow;
+      box-shadow: $custom-dropdown-shadow;
+      margin: 0;
+      padding: 0;
+      background: $custom-dropdown-bg;
+      border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
+      font-size: $em-base;
+
+      li {
+        color: $custom-dropdown-font-color;
+        font-size: $custom-dropdown-font-size;
+        cursor: default;
+        padding-top: $custom-dropdown-list-padding;
+        padding-bottom: $custom-dropdown-list-padding;
+        padding-#{$default-float}: $custom-dropdown-default-float-padding;
+        padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
+        min-height: $custom-dropdown-list-item-min-height;
+        line-height: $custom-dropdown-list-item-min-height;
+        margin: 0;
+        white-space: nowrap;
+        list-style: none;
+
+        &.selected {
+          background: $custom-dropdown-color-selected;
+          color: $custom-dropdown-font-color-selected;
+        }
+        &:hover {
+          background-color: darken($custom-dropdown-color-selected, 4%);
+          color: $custom-dropdown-font-color-selected;
+        }
+        &.selected:hover {
+          background: $custom-dropdown-color-selected;
+          cursor: default;
+          color: $custom-dropdown-font-color-selected;
+        }
+      }
+
+      &.show { display: block; }
+    }
+
+    /* Custom input, disabled */
+    .custom.disabled { background-color: $custom-form-bg-disabled; }
+  }
+}

data/scss/compagecss/components/_dropdown-buttons.scss

@@ -0,0 +1,114 @@
+//
+// Dropdown Button Variables
+//
+
+// We use these to set the color of the pip in dropdown buttons
+$dropdown-button-pip-color:     #fff !default;
+$dropdown-button-pip-color-alt: #333 !default;
+
+// We use these to style tiny dropdown buttons
+$dropdown-button-padding-tny:   $button-tny * 5 !default;
+$dropdown-button-pip-size-tny:  $button-tny !default;
+$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
+$dropdown-button-pip-top-tny:   -$button-tny / 2 + emCalc(1px) !default;
+
+// We use these to style small dropdown buttons
+$dropdown-button-padding-sml:   $button-sml * 5 !default;
+$dropdown-button-pip-size-sml:  $button-sml !default;
+$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
+$dropdown-button-pip-top-sml:   -$button-sml / 2 + emCalc(1px) !default;
+
+// We use these to style medium dropdown buttons
+$dropdown-button-padding-med:   $button-med * 4 + emCalc(3px) !default;
+$dropdown-button-pip-size-med:  $button-med - emCalc(3px) !default;
+$dropdown-button-pip-opposite-med: $button-med * 2 !default;
+$dropdown-button-pip-top-med:   -$button-med / 2 + emCalc(2px) !default;
+
+// We use these to style large dropdown buttons
+$dropdown-button-padding-lrg:   $button-lrg * 4 !default;
+$dropdown-button-pip-size-lrg:  $button-lrg - emCalc(6px) !default;
+$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
+$dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !default;
+
+//
+// Dropdown Button Mixin
+//
+
+// We use this mixin to build off of the button mixin and add dropdown button styles
+@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
+
+  // We add in base styles, but they can be negated by setting to 'false'.
+  @if $base-style {
+    position: relative;
+
+    // This creates the base styles for the triangle pip
+    &:before {
+      position: absolute;
+      content: "";
+      width: 0;
+      height: 0;
+      display: block;
+      border-style: solid;
+      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      top: 50%;
+    }
+  }
+
+  // If we're dealing with tiny buttons, use these styles
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
+    &:before {
+      border-width: $dropdown-button-pip-size-tny;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
+      margin-top: $dropdown-button-pip-top-tny;
+    }
+  }
+
+  // If we're dealing with small buttons, use these styles
+  @if $padding == small {
+    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
+    &:before {
+      border-width: $dropdown-button-pip-size-sml;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
+      margin-top: $dropdown-button-pip-top-sml;
+    }
+  }
+
+  // If we're dealing with default (medium) buttons, use these styles
+  @if $padding == medium {
+    padding-#{$opposite-direction}: $dropdown-button-padding-med;
+    &:before {
+      border-width: $dropdown-button-pip-size-med;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
+      margin-top: $dropdown-button-pip-top-med;
+    }
+  }
+
+  // If we're dealing with large buttons, use these styles
+  @if $padding == large {
+    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
+    &:before {
+      border-width: $dropdown-button-pip-size-lrg;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
+      margin-top: $dropdown-button-pip-top-lrg;
+    }
+  }
+
+  // We can control the pip color. We didn't use logic in this case, just set it and forget it.
+  @if $pip-color {
+    &:before { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+
+@if $include-html-button-classes != false {
+
+  /* Dropdown Button */
+  .dropdown.button { @include dropdown-button;
+    &.tiny { @include dropdown-button(tiny,$base-style:false); }
+    &.small { @include dropdown-button(small,$base-style:false); }
+    &.large { @include dropdown-button(large,$base-style:false); }
+    &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+  }
+
+}