modularis 0.0.2 → 0.0.3

data/scss/compagecss/components/_buttons.scss

@@ -1,226 +0,0 @@
-//
-// Button Variables
-//
-
-// We use these to build padding for buttons.
-$button-med:              emCalc(12px) !default;
-$button-tny:              emCalc(7px) !default;
-$button-sml:              emCalc(9px) !default;
-$button-lrg:              emCalc(16px) !default;
-
-// We use this to control the display property.
-$button-display:          inline-block !default;
-$button-margin-bottom:    emCalc(20px) !default;
-
-// We use these to control button text styles.
-$button-font-family:      inherit !default;
-$button-font-color:       #fff !default;
-$button-font-color-alt:   #333 !default;
-$button-font-med:         emCalc(16px) !default;
-$button-font-tny:         emCalc(11px) !default;
-$button-font-sml:         emCalc(13px) !default;
-$button-font-lrg:         emCalc(20px) !default;
-$button-font-weight:      bold !default;
-$button-font-align:       center !default;
-
-// We use these to control various hover effects.
-$button-function-factor:  10% !default;
-
-// We use these to control button border styles.
-$button-border-width:     1px !default;
-$button-border-style:     solid !default;
-$button-border-color:     darken($primary-color, $button-function-factor) !default;
-
-// We use this to set the default radius used throughout the core.
-$button-radius:           $global-radius !default;
-$button-round:            $global-rounded !default;
-
-// We use this to set default opacity for disabled buttons.
-$button-disabled-opacity: 0.6 !default;
-
-
-//
-// Button Mixins
-//
-
-// We use this mixin to create a default button base.
-@mixin button-base($style:true, $display:$button-display) {
-  @if $style {
-    border-style: $button-border-style;
-    border-width: $button-border-width;
-    cursor: pointer;
-    font-family: $button-font-family;
-    font-weight: $button-font-weight;
-    line-height: 1;
-    margin: 0 0 $button-margin-bottom;
-    position: relative;
-    text-decoration: none;
-    text-align: $button-font-align;
-  }
-  @if $display { display: $display; }
-}
-
-// We use this mixin to add button size styles
-@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {
-
-  // We control which padding styles come through,
-  // these can be turned off by setting $padding:false
-  @if $padding {
-    padding-top: $padding;
-    padding-#{$opposite-direction}: $padding * 2;
-    padding-bottom: $padding + emCalc(1px);
-    padding-#{$default-float}: $padding * 2;
-
-    // We control the font-size based on mixin input.
-    @if      $padding == $button-med { font-size: $button-font-med; }
-    @else if $padding == $button-tny { font-size: $button-font-tny; }
-    @else if $padding == $button-sml { font-size: $button-font-sml; }
-    @else if $padding == $button-lrg { font-size: $button-font-lrg; }
-    @else                     { font-size: $padding - emCalc(2px); }
-  }
-
-  // We can set $full-width:true to remove side padding extend width.
-  @if $full-width {
-    // We still need to check if $padding is set.
-    @if $padding {
-	  padding-top: $padding;
-	  padding-bottom: $padding + emCalc(1px);
-    } @else if $padding == false {
-      padding-top:0;
-      padding-bottom:0;
-    }
-    padding-right: 0px;
-    padding-left: 0px;
-    width: 100%;
-  }
-
-  // <input>'s and <button>'s take on strange padding. We added this to help fix that.
-  @if $is-input == $button-lrg {
-    padding-top: $is-input + emCalc(.5px);
-    padding-bottom: $is-input + emCalc(.5px);
-  }
-  @else if $is-input {
-    padding-top: $is-input + emCalc(1px);
-    padding-bottom: $is-input;
-  }
-}
-
-// We use this mixin to add button color styles
-@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
-
-  // We control which background styles are used,
-  // these can be removed by setting $bg:false
-  @if $bg {
-    // This find the lightness percentage of the background color.
-    $bg-lightness: lightness($bg);
-
-    background-color: $bg;
-    border-color: darken($bg, $button-function-factor);
-    &:hover,
-    &:focus { background-color: darken($bg, $button-function-factor); }
-
-    // We control the text color for you based on the background color.
-    @if $bg-lightness > 70% {
-      color: $button-font-color-alt;
-      &:hover,
-      &:focus { color: $button-font-color-alt; }
-    }
-    @else {
-      color: $button-font-color;
-      &:hover,
-      &:focus { color: $button-font-color; }
-    }
-  }
-
-  // We can set $disabled:true to create a disabled transparent button.
-  @if $disabled {
-    cursor: default;
-    opacity: $button-disabled-opacity;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    &:hover,
-    &:focus { background-color: $bg; }
-  }
-
-  // We can control how much button radius us used.
-  @if $radius == true { @include radius($button-radius); }
-  @else if $radius { @include radius($radius); }
-
-}
-
-// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
-@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
-  @include button-base;
-  @include button-size($padding, $full-width, $is-input);
-  @include button-style($bg, $radius, $disabled);
-}
-
-
-//
-// Button Classes
-//
-
-// Only include these classes if the variable is true, otherwise they'll be left out.
-@if $include-html-button-classes != false {
-
-  // Default styles applied outside of media query
-  button, .button {
-    @include button-base;
-    @include button-size;
-    @include button-style;
-
-    &.secondary { @include button-style($bg:$secondary-color); }
-    &.success   { @include button-style($bg:$success-color); }
-    &.alert     { @include button-style($bg:$alert-color); }
-
-    &.large  { @include button-size($padding:$button-lrg); }
-    &.small  { @include button-size($padding:$button-sml); }
-    &.tiny   { @include button-size($padding:$button-tny); }
-    &.expand { @include button-size($padding:null,$full-width:true); }
-
-    &.left-align  { text-align: left; text-indent: emCalc(12px); }
-    &.right-align { text-align: right; padding-right: emCalc(12px); }
-
-    &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
-      &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
-      &.success { @include button-style($bg:$success-color, $disabled:true); }
-      &.alert { @include button-style($bg:$alert-color, $disabled:true); }
-    }
-
-  }
-
-  button, .button {
-    @include button-size($padding:false, $is-input:$button-med);
-    &.tiny { @include button-size($padding:false, $is-input:$button-tny); }
-    &.small { @include button-size($padding:false, $is-input:$button-sml); }
-    &.large { @include button-size($padding:false, $is-input:$button-lrg); }
-  }
-
-  // Styles for any browser or device that support media queries
-  @media only screen {
-
-    button, .button {
-      @include inset-shadow();
-      @include single-transition(background-color);
-
-      &.large  { @include button-size($padding:false, $full-width:false); }
-      &.small  { @include button-size($padding:false, $full-width:false); }
-      &.tiny   { @include button-size($padding:false, $full-width:false); }
-
-      &.radius { @include button-style($bg:false, $radius:true); }
-      &.round  { @include button-style($bg:false, $radius:$button-round); }
-    }
-
-  }
-
-  // Additional styles for screens larger than 768px
-  @media #{$small} {
-
-    button, .button {
-      @include button-base($style:false, $display:inline-block);
-      @include button-size($padding:false, $full-width:false);
-    }
-
-  }
-
-}

data/scss/compagecss/components/_clearing.scss

@@ -1,217 +0,0 @@
-//
-// 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

@@ -1,246 +0,0 @@
-//
-// 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; }
-  }
-}