modularis 0.0.2 → 0.0.3

data/scss/compagecss/components/_forms.scss

@@ -1,361 +0,0 @@
-//
-// Form Variables
-//
-
-// We use this to set the base for lots of form spacing and positioning styles
-$form-spacing:                       emCalc(16px) !default;
-
-// We use these to style the labels in different ways
-$form-label-pointer:                 pointer !default;
-$form-label-font-size:               emCalc(14px) !default;
-$form-label-font-weight:             500 !default;
-$form-label-font-color:              lighten(#000, 30%) !default;
-$form-label-bottom-margin:           emCalc(3px) !default;
-$input-font-family:                  inherit !default;
-$input-font-color:                   rgba(0,0,0,0.75) !default;
-$input-font-size:                    emCalc(14px) !default;
-$input-bg-color:                     #fff !default;
-$input-focus-bg-color:               darken(#fff, 2%) !default;
-$input-border-color:                 darken(#fff, 20%) !default;
-$input-focus-border-color:           darken(#fff, 40%) !default;
-$input-border-style:                 solid !default;
-$input-border-width:                 1px !default;
-$input-disabled-bg:                  #ddd !default;
-$input-box-shadow:                   inset 0 1px 2px rgba(0,0,0,0.1) !default;
-$input-include-glowing-effect:       true !default;
-
-// We use these to style the fieldset border and spacing.
-$fieldset-border-style:              solid !default;
-$fieldset-border-width:              1px !default;
-$fieldset-border-color:              #ddd !default;
-$fieldset-padding:                   emCalc(20px) !default;
-$fieldset-margin:                    emCalc(18px) 0 !default;
-
-// We use these to style the legends when you use them
-$legend-bg:                          #fff !default;
-$legend-font-weight:                 bold !default;
-$legend-padding:                     0 emCalc(3px) !default;
-
-// We use these to style the prefix and postfix input elements
-$input-prefix-bg:                    darken(#fff, 5%) !default;
-$input-prefix-border-color:          darken(#fff, 20%) !default;
-$input-prefix-border-size:           1px !default;
-$input-prefix-border-type:           solid !default;
-$input-prefix-overflow:              hidden !default;
-$input-prefix-font-color:            #333 !default;
-$input-prefix-font-color-alt:        #fff !default;
-
-// We use these to style the error states for inputs and labels
-$input-error-message-padding:        emCalc(6px) emCalc(4px) !default;
-$input-error-message-top:            -($form-spacing) - emCalc(5px) !default;
-$input-error-message-font-size:      emCalc(12px) !default;
-$input-error-message-font-weight:    bold !default;
-$input-error-message-font-color:     #fff !default;
-$input-error-message-font-color-alt: #333 !default;
-
-//We use this to style the glowing effect of inputs when focused
-$glowing-effect-fade-time:           0.45s !default;
-$glowing-effect-color:               $input-focus-border-color !default;
-
-//
-// Form Mixins
-//
-
-// We use this mixin to give us form styles for rows inside of forms
-@mixin form-row-base {
-  .row { margin: 0 ((-$form-spacing) / 2);
-
-    .column,
-    .columns { padding: 0 $form-spacing / 2; }
-
-    // Use this to collapse the margins of a form row
-    &.collapse { margin: 0;
-
-      .column,
-      .columns { padding: 0; }
-
-    }
-  }
-  input.column,
-  input.columns,
-  textarea.column,
-  textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
-}
-
-// We use this mixin to give all basic form elements their style
-@mixin form-element() {
-  background-color: $input-bg-color;
-  font-family: $input-font-family;
-  border: $input-border-width $input-border-style $input-border-color;
-  -webkit-box-shadow: $input-box-shadow;
-  box-shadow: $input-box-shadow;
-  color: $input-font-color;
-  display: block;
-  font-size: $input-font-size;
-  margin: 0 0 $form-spacing 0;
-  padding: $form-spacing / 2;
-  height: emCalc(13px) + ($form-spacing * 1.5);
-  width: 100%;
-  @include box-sizing(border-box);
-  @if $input-include-glowing-effect {
-      @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
-  }
-  // Basic focus styles
-  &:focus {
-    background: $input-focus-bg-color;
-    border-color: $input-focus-border-color;
-    outline: none;
-  }
-
-  // Disabled background input background color
-  &[disabled] { background-color: $input-disabled-bg; }
-}
-
-// We use this mixin to create form labels
-@mixin form-label($alignment:false, $base-style:true) {
-
-  // Control whether or not the base styles come through.
-  @if $base-style {
-    font-size: $form-label-font-size;
-    color: $form-label-font-color;
-    cursor: $form-label-pointer;
-    display: block;
-    font-weight: $form-label-font-weight;
-    margin-bottom: $form-label-bottom-margin;
-  }
-
-  // Alignment options
-  @if $alignment == right {
-    float: none;
-    text-align: right;
-  }
-  @else if $alignment == inline {
-    margin: 0 0 $form-spacing 0;
-    padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
-  }
-}
-
-// We use this mixin to create postfix/prefix form Labels
-@mixin prefix-postfix-base {
-  display: block;
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  width: 100%;
-  padding-top: 0;
-  padding-bottom: 0;
-  border-style: $input-prefix-border-type;
-  border-width: $input-prefix-border-size;
-  overflow: $input-prefix-overflow;
-  font-size: $form-label-font-size;
-  height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
-  line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
-}
-
-// We use this mixin to create prefix label styles
-@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
-
-  @if $bg {
-    $bg-lightness: lightness($bg);
-    background: $bg;
-    border-color: darken($bg, 10%);
-    border-#{$opposite-direction}: none;
-
-    // Control the font color based on background brightness
-    @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
-    @else { color: $input-prefix-font-color-alt; }
-  }
-
-  @if $is-button {
-    padding-#{$default-float}: 0;
-    padding-#{$opposite-direction}: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    text-align: center;
-    line-height: emCalc(34px);
-  }
-
-}
-
-// We use this mixin to create postfix label styles
-@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
-
-  @if $bg {
-    $bg-lightness: lightness($bg);
-    background: $bg;
-    border-color: darken($bg, 15%);
-    border-#{$default-float}: none;
-
-    // Control the font color based on background brightness
-    @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
-    @else { color: $input-prefix-font-color-alt; }
-  }
-
-  @if $is-button {
-    padding-#{$default-float}: 0;
-    padding-#{$opposite-direction}: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    text-align: center;
-    line-height: emCalc(34px);
-  }
-
-}
-
-// We use this mixin to style fieldsets
-@mixin fieldset {
-  border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
-  padding: $fieldset-padding;
-  margin: $fieldset-margin;
-
-  // and legend styles
-  legend {
-    font-weight: $legend-font-weight;
-    background: $legend-bg;
-    padding: $legend-padding;
-    margin: 0;
-    margin-#{$default-float}: emCalc(-3px);
-  }
-}
-
-// We use this mixin to control border and background color of error inputs
-@mixin form-error-color($color:$alert-color) {
-  border-color: $color;
-  background-color: rgba($color, 0.1);
-
-  // Go back to normal on focus
-  &:focus {
-    background: $input-focus-bg-color;
-    border-color: $input-focus-border-color;
-  }
-}
-
-// We use this simple mixin to style labels for error inputs
-@mixin form-label-error-color($color:$alert-color) { color: $color; }
-
-// We use this mixin to create error message styles
-@mixin form-error-message($bg:$alert-color) {
-  display: block;
-  padding: $input-error-message-padding;
-  margin-top: $input-error-message-top;
-  margin-bottom: $form-spacing;
-  font-size: $input-error-message-font-size;
-  font-weight: $input-error-message-font-weight;
-
-  // We can control the text color based on the brightness of the background.
-  $bg-lightness: lightness($bg);
-  background: $bg;
-  @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
-  @else { color: $input-error-message-font-color-alt; }
-}
-
-// Only include these classes if the variable is true, otherwise they'll be left out.
-@if $include-html-form-classes != false {
-	/* Standard Forms */
-  form { margin: 0 0 $form-spacing; }
-
-  /* Using forms within rows, we need to set some defaults */
-  form .row { @include form-row-base; }
-
-  /* Label Styles */
-  label { @include form-label;
-    &.right { @include form-label(right,false); }
-    &.inline { @include form-label(inline,false); }
-  }
-
-  /* Attach elements to the beginning or end of an input */
-  .prefix,
-  .postfix { @include prefix-postfix-base; }
-
-  /* Adjust padding, alignment and radius if pre/post element is a button */
-  .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
-  .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
-
-  .prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
-  .postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
-  .prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
-  .postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
-
-  /* Separate prefix and postfix styles when on span so buttons keep their own */
-  span.prefix { @include prefix();
-    &.radius { @include radius(0); @include side-radius(left, $global-radius); }
-  }
-  span.postfix { @include postfix();
-    &.radius { @include radius(0); @include side-radius(right, $global-radius); }
-  }
-
-  /* Input groups will automatically style first and last elements of the group */
-  .input-group {
-    &.radius {
-      &>*:first-child,  &>*:first-child * {
-        @include side-radius($default-float, $global-radius);
-      }
-      &>*:last-child, &>*:last-child * {
-        @include side-radius($opposite-direction, $global-radius);
-      }
-    }
-    &.round {
-      &>*:first-child,  &>*:first-child * {
-        @include side-radius($default-float, $button-round);
-      }
-      &>*:last-child, &>*:last-child * {
-        @include side-radius($opposite-direction, $button-round);
-      }
-    }
-  }
-
-  /* We use this to get basic styling on all basic form elements */
-  input[type="text"],
-  input[type="password"],
-  input[type="date"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="month"],
-  input[type="week"],
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="time"],
-  input[type="url"],
-  textarea {
-    @include form-element;
-    @if not $input-include-glowing-effect {
-        @include single-transition(all, 0.15s, linear);
-    }
-  }
-
-  /* Adjust margin for form elements below */
-  input[type="file"],
-  input[type="checkbox"],
-  input[type="radio"],
-  select {
-    margin: 0 0 $form-spacing 0;
-  }
-  
-  /* Normalize file input width */
-  input[type="file"] {
-    width:100%;
-  }
-
-  /* We add basic fieldset styling */
-  fieldset {
-    @include fieldset;
-  }
-
-  /* Error Handling */
-  .error input,
-  input.error,
-  .error textarea,
-  textarea.error {
-    @include form-error-color;
-  }
-
-  .error label,
-  label.error { @include form-label-error-color; }
-
-  .error small,
-  small.error {
-    @include form-error-message;
-  }
-}

data/scss/compagecss/components/_global.scss

@@ -1,289 +0,0 @@
-//
-// Global Modularis Mixins
-//
-
-// We use this to control border radius.
-@mixin radius($radius:$global-radius) {
-  @if $radius {
-    -webkit-border-radius: $radius;
-    border-radius: $radius;
-  }
-}
-
-// We use this to create equal side border radius on elements.
-@mixin side-radius($side, $radius) {
-  @if $side == left {
-    -moz-border-radius-bottomleft: $radius;
-    -moz-border-radius-topleft: $radius;
-    -webkit-border-bottom-left-radius: $radius;
-    -webkit-border-top-left-radius: $radius;
-    border-bottom-left-radius: $radius;
-    border-top-left-radius: $radius;
-  }
-  @else if $side == right {
-    -moz-border-radius-topright: $radius;
-    -moz-border-radius-bottomright: $radius;
-    -webkit-border-top-right-radius: $radius;
-    -webkit-border-bottom-right-radius: $radius;
-    border-top-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-  }
-  @else if $side == top {
-    -moz-border-radius-topright: $radius;
-    -moz-border-radius-topleft: $radius;
-    -webkit-border-top-right-radius: $radius;
-    -webkit-border-top-left-radius: $radius;
-    border-top-right-radius: $radius;
-    border-top-left-radius: $radius;
-  }
-  @else if $side == bottom {
-    -moz-border-radius-bottomright: $radius;
-    -moz-border-radius-bottomleft: $radius;
-    -webkit-border-bottom-right-radius: $radius;
-    -webkit-border-bottom-left-radius: $radius;
-    border-bottom-right-radius: $radius;
-    border-bottom-left-radius: $radius;
-  }
-}
-
-// We can control whether or not we have inset shadows edges.
-@mixin inset-shadow($active:true) {
-  -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
-  box-shadow: $shiny-edge-size $shiny-edge-color inset;
-
-  @if $active { &:active {
-    -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
-    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
-}
-
-// We use this to add transitions to elements
-@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
-  -webkit-transition: $property $speed $ease;
-  -moz-transition: $property $speed $ease;
-  transition: $property $speed $ease;
-}
-
-// We use this to add box-sizing across browser prefixes
-@mixin box-sizing($type:border-box) {
-  -moz-box-sizing: $type;
-  -webkit-box-sizing: $type;
-  box-sizing: $type;
-}
-
-// We use this to create equilateral triangles
-@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
-  content: "";
-  display: block;
-  width: 0;
-  height: 0;
-  border: inset $triangle-size;
-  @if ($triangle-direction == top) {
-    border-color: $triangle-color transparent transparent transparent;
-    border-top-style: solid;
-  }
-  @if ($triangle-direction == bottom) {
-    border-color: transparent transparent $triangle-color transparent;
-    border-bottom-style: solid;
-  }
-  @if ($triangle-direction == left) {
-    border-color: transparent transparent transparent $triangle-color;
-    border-left-style: solid;
-  }
-  @if ($triangle-direction == right) {
-    border-color: transparent $triangle-color transparent transparent;
-    border-right-style: solid;
-  }
-}
-
-// We use this to do clear floats
-@mixin clearfix() {
-  *zoom:1;
-  &:before, &:after { content: " "; display: table; }
-  &:after { clear: both; }
-}
-
-
-// We use this to add a glowing effect to block elements
-@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
-  -webkit-transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
-  -moz-transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
-  transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
-
-  &:#{$selector} {
-    -webkit-box-shadow: 0 0 5px $glowing-effect-color;
-    -moz-box-shadow: 0 0 5px $glowing-effect-color;
-    box-shadow: 0 0 5px $glowing-effect-color;
-    border-color: $glowing-effect-color;
-  }
-}
-
-//
-// Modularis Variables
-//
-
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with brower-based text zoom or user-set defaults.
-
-// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
-// If you want your base font-size to be different and not have it effect the grid breakpoints,
-// set $em-base to $base-font-size and make sure $base-font-size is a px value.
-$base-font-size: 100% !default;
-
-// $base-line-height is 24px while $base-font-size is 16px
-$base-line-height: 150% !default;
-
-// This is the default html and body font-size for the base em value.
-$em-base: 16px !default;
-
-// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
-@function emCalc($pxWidth) {
-  @return $pxWidth / $em-base * 1em;
-}
-
-// Maybe you want to create rems and pixels
-// @function remCalc($pxWidth) {
-//   @return $pxWidth / $em-base * 1rem;
-// }
-
-// We use these to control various global styles
-$body-bg: #fff !default;
-$body-font-color: #222 !default;
-$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
-$body-font-weight: normal !default;
-$body-font-style: normal !default;
-
-// We use this to control font-smoothing
-$font-smoothing: antialiased !default;
-
-// We use these to control text direction settings
-$text-direction: ltr !default;
-
-// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
-$default-float: left !default;
-$opposite-direction: right !default;
-@if $text-direction == ltr {
-  $default-float: left;
-  $opposite-direction: right;
-} @else {
-  $default-float: right;
-  $opposite-direction: left;
-}
-
-// We use these as default colors throughout
-$primary-color: #2ba6cb !default;
-$secondary-color: #e9e9e9 !default;
-$alert-color: #c60f13 !default;
-$success-color: #5da423 !default;
-
-// We use these to make sure border radius matches unless we want it different.
-$global-radius: 3px !default;
-$global-rounded: 1000px !default;
-
-// We use these to control inset shadow shiny edges and depressions.
-$shiny-edge-size: 0 1px 0 !default;
-$shiny-edge-color: rgba(#fff, .5) !default;
-$shiny-edge-active-color: rgba(#000, .2) !default;
-
-// We use this to control whether or not CSS classes come through in the gem files.
-$include-html-classes: true !default;
-$include-print-styles: true !default;
-$include-html-grid-classes: $include-html-classes !default;
-$include-html-visibility-classes: $include-html-classes !default;
-$include-html-button-classes: $include-html-classes !default;
-$include-html-form-classes: $include-html-classes !default;
-$include-html-media-classes: $include-html-classes !default;
-$include-html-section-classes: $include-html-classes !default;
-$include-html-reveal-classes: $include-html-classes !default;
-$include-html-alert-classes: $include-html-classes !default;
-$include-html-nav-classes: $include-html-classes !default;
-$include-html-label-classes: $include-html-classes !default;
-$include-html-panel-classes: $include-html-classes !default;
-$include-html-pricing-classes: $include-html-classes !default;
-$include-html-progress-classes: $include-html-classes !default;
-$include-html-magellan-classes: $include-html-classes !default;
-
-// Media Queries
-$small-screen: emCalc(768px) !default;
-$medium-screen: emCalc(1280px) !default;
-$large-screen: emCalc(1440px) !default;
-
-$screen: "only screen" !default;
-$small: "only screen and (min-width:"#{$small-screen}")" !default;
-$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
-$large: "only screen and (min-width:"#{$large-screen}")" !default;
-$landscape: "only screen and (orientation: landscape)" !default;
-$portrait: "only screen and (orientation: portrait)" !default;
-
-// Set box-sizing globally to handle padding and border widths
-*,
-*:before,
-*:after {
-  @include box-sizing(border-box);
-}
-
-html,
-body { font-size: $base-font-size; }
-
-// Default body styles
-body {
-  background: $body-bg;
-  color: $body-font-color;
-  padding: 0;
-  margin: 0;
-  font-family: $body-font-family;
-  font-weight: $body-font-weight;
-  font-style: $body-font-style;
-  line-height: 1; // Set to $base-line-height to take on browser default of 150%
-  position: relative;
-}
-
-// Override outline from normalize, we don't like it
-a:focus { outline: none; }
-
-// Grid Defaults to get images and embeds to work properly
-img,
-object,
-embed { max-width: 100%; height: auto; }
-
-object,
-embed { height: 100%; }
-img { -ms-interpolation-mode: bicubic; }
-
-#map_canvas,
-.map_canvas {
-  img,
-  embed,
-  object { max-width: none !important;
-  }
-}
-
-// Miscellaneous useful HTML classes
-.left         { float: left !important; }
-.right        { float: right !important; }
-.text-left    { text-align: left !important; }
-.text-right   { text-align: right !important; }
-.text-center  { text-align: center !important; }
-.text-justify { text-align: justify !important; }
-.hide         { display: none; }
-
-// Font smoothing
-// Antialiased font smoothing works best for light text on a dark background.
-// Apply to single elements instead of globally to body.
-// Note this only applies to webkit-based desktop browsers on the Mac.
-.antialiased { -webkit-font-smoothing: antialiased; }
-
-// Get rid of gap under images by making them display: inline-block; by default
-img {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-//
-// Global resets for forms
-//
-
-// Make sure textarea takes on height automatically
-textarea { height: auto; min-height: 50px; }
-
-// Make select elements 100% width by default
-select { width: 100%; }