themepile-abstractio 1.0.2

data/scss/abstractio/components/_clearing.scss

@@ -0,0 +1,224 @@
+//
+// Clearing Variables
+//
+$include-html-clearing-classes: $include-html-classes !default;
+
+// 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;
+
+@if $include-html-clearing-classes {
+  // 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; }
+  }
+
+  // If you want to show a lightbox, but only have a single image come through as the thumbnail
+  .clearing-feature li { 
+    display: none;
+    &.clearing-featured-img {
+      display: block;
+    } 
+  }
+
+  // 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; }
+
+    .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/abstractio/components/_custom-forms.scss

@@ -0,0 +1,263 @@
+//
+// FIX THE "X" ON CUSTOM FORMS
+//
+
+
+//
+// Custom Form Variables
+//
+$include-html-custom-form-classes: $include-html-classes !default;
+
+// We use these to control the basic form styles input styles
+$custom-form-border-color:              #ccc !default;
+$custom-form-border-size:               1px !default;
+$custom-form-bg:                        #fff !default;
+$custom-form-bg-disabled:               #ddd !default;
+$custom-form-input-size:                16px !default;
+$custom-form-check-color:               #222 !default;
+$custom-form-check-size:                16px !default;
+$custom-form-radio-size:                8px !default;
+$custom-form-checkbox-radius:           0px !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.
+@mixin custom-form-input($radius:0px, $mark-size:0px) {
+  @include radius($radius);
+  padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
+}
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-custom-form-classes != false {
+
+  /* Custom Checkbox and Radio Inputs */
+  form.custom {
+
+    .hidden-field {
+      margin-#{$default-float}: -99999px;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    .custom {
+      display: inline-block;
+      width: $custom-form-input-size;
+      height: $custom-form-input-size;
+      position: relative;
+      vertical-align: middle;
+      border: solid $custom-form-border-size $custom-form-border-color;
+      background: $custom-form-bg;
+
+      &.checkbox {
+        @include custom-form-input($radius:$custom-form-checkbox-radius, $mark-size:$custom-form-check-size);
+      }
+
+      &.radio {
+        @include custom-form-input($radius:1000px, $mark-size:$custom-form-radio-size);
+      }
+
+      &.checkbox {
+        &:before {
+          content: "";
+          display: block;
+          font-size: $custom-form-check-size;
+          color: $custom-form-bg;
+        }
+      }
+
+      &.radio.checked {
+        &:before {
+          content: "";
+          display: block;
+          width: $custom-form-radio-size;
+          height: $custom-form-radio-size;
+          @include radius(1000px);
+          background: $custom-form-check-color;
+          position: relative;
+        }
+      }
+
+      &.checkbox.checked {
+        &:before {
+          content: "\00d7";
+          color: $custom-form-check-color;
+          position: absolute;
+          top: -50%;
+          left: 50%;
+          margin-top: 4px;
+          margin-left: -5px;
+        }
+      }
+    }
+  }
+
+  /* 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: $custom-form-bg-disabled; }
+  }
+}