modularis 0.0.2 → 0.0.3

data/scss/compagecss/components/_switch.scss

@@ -1,249 +0,0 @@
-//
-// Switch Variables
-//
-
-// Controlling border styles and background colors for the switch container
-$switch-border-color:             darken(#fff, 20%) !default;
-$switch-border-style:             solid !default;
-$switch-border-width:             1px !default;
-$switch-bg:                       #fff !default;
-
-// We use these to control the switch heights for our default classes
-$switch-height-tny:               22px !default;
-$switch-height-sml:               28px !default;
-$switch-height-med:               36px !default;
-$switch-height-lrg:               44px !default;
-$switch-bottom-margin:            emCalc(20px) !default;
-
-// We use these to control default font sizes for our classes.
-$switch-font-size-tny:            11px !default;
-$switch-font-size-sml:            12px !default;
-$switch-font-size-med:            14px !default;
-$switch-font-size-lrg:            17px !default;
-$switch-label-side-padding:       6px !default;
-
-// We use these to style the switch-paddle
-$switch-paddle-bg:                #fff !default;
-$switch-paddle-fade-to-color:     darken($switch-paddle-bg, 10%) !default;
-$switch-paddle-border-color:      darken($switch-paddle-bg, 35%) !default;
-$switch-paddle-border-width:      1px !default;
-$switch-paddle-border-style:      solid !default;
-$switch-paddle-transition-speed:  .1s !default;
-$switch-paddle-transition-ease:   ease-out !default;
-$switch-positive-color:           lighten($success-color, 50%) !default;
-$switch-negative-color:           #f5f5f5 !default;
-
-// Outline Style for tabbing through switches
-$switch-label-outline:            1px dotted #888 !default;
-
-
-//
-// Switch Mixins
-//
-
-// We use this mixin to create the base styles for our switch element.
-@mixin switch-base($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) {
-
-  // Default position and structure for switch container.
-  position: relative;
-  width: 100%;
-  padding: 0;
-  display: block;
-  overflow: hidden;
-  border-style: $switch-border-style;
-  border-width: $switch-border-width;
-  margin-bottom: $switch-bottom-margin;
-
-  // Default label styles for type and transition
-  label {
-    position: relative;
-    #{$default-float}: 0;
-    z-index: 2;
-    float: $default-float;
-    width: 50%;
-    height: 100%;
-    margin: 0;
-    font-weight: bold;
-    text-align: $default-float;
-
-    // Transition for the switch label to follow paddle
-    @include single-transition(all, $transition-speed, $transition-ease);
-  }
-
-  // So that we don't need to recreate the form with any JS, we use the
-  // existing radio button, but we cleverly position and hide it.
-  input {
-    position: absolute;
-    z-index: 3;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-
-    // Hover and focus styles for the paddle
-    &:hover,
-    &:focus {
-      cursor: pointer;
-    }
-  }
-
-  // The toggle area for radio switches. We call is a paddle.
-  & > span {
-    position: absolute;
-    top: -1px;
-    #{$default-float}: -1px;
-    z-index: 1;
-    display: block;
-    padding: 0;
-    border-width: $switch-paddle-border-width;
-    border-style: $switch-paddle-border-style;
-
-    // Transition for the switch paddle
-    @include single-transition(all, $transition-speed, $transition-ease);
-  }
-
-  // When a label isn't :checked, we hide it as it slides away.
-  input:not(:checked) + label { opacity: 0; }
-
-  // Controlling the position of the labels as they are toggled.
-  input:checked { display: none !important; }
-  input { #{$default-float}: 0; display: block !important; }
-
-  // Left Label alignment and position changes, including fixes for while inside a custom form
-  input:first-of-type + label,
-  input:first-of-type + span + label { #{$default-float}: -50%; }
-  input:first-of-type:checked + label,
-  input:first-of-type:checked + span + label { #{$default-float}: 0%; }
-
-  // Right Label alignment and position changes, including fixes for while inside a custom form
-  input:last-of-type + label,
-  input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
-  input:last-of-type:checked + label,
-  input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
-
-  // Hiding custom form spans since we auto-create them
-  span.custom { display: none !important; }
-
-  // Bugfix for older Webkit, including mobile Webkit. Adapted from:
-  // http://css-tricks.com/webkit-sibling-bug/
-  -webkit-animation: webkitSiblingBugfix infinite 1s;
-
-}
-
-// We use this mixin to create the size styles for switches.
-@mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
-
-  height: $height;
-
-  label {
-    padding: 0 emCalc($switch-label-side-padding);
-    line-height: $line-height;
-    font-size: emCalc($font-size);
-  }
-
-  input {
-    // Move the paddle to the right position
-    &:first-of-type:checked ~ span {
-      #{$default-float}: 100%;
-      margin-#{$default-float}: emCalc(-$height + 1px);
-    }
-  }
-
-  & > span {
-    width: emCalc($height);
-    height: emCalc($height);
-  }
-
-}
-
-// We use this mixin to add color and other fanciness to the switches.
-@mixin switch-style($paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
-
-  @if $base-style {
-    background: $switch-bg;
-    border-color: $switch-border-color;
-
-    & > span {
-      border-color: darken($paddle-bg, 30%);
-      background: $paddle-bg;
-      background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
-      background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
-      background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
-
-      // Building the alternating colored sides of the switch
-      -webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
-                          1000px 0 0 1000px $positive-color,
-                          -2px 0 10px 0 rgba(0,0,0,0.07),
-                          -1000px 0 0 1000px $negative-color;
-      box-shadow:         2px 0 10px 0 rgba(0,0,0,0.07),
-                          1000px 0 0 980px $positive-color,
-                          -2px 0 10px 0 rgba(0,0,0,0.07),
-                          -1000px 0 0 1000px $negative-color;
-    }
-
-    &:hover,
-    &:focus {
-      & > span {
-        background: $paddle-bg;
-        background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
-        background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
-        background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
-      }
-    }
-
-    &:active { background: transparent; }
-  }
-
-  // Setting up the radius for switches
-  @if $radius == true {
-    @include radius(4px);
-    & > span { @include radius(3px); }
-  }
-  @else if $radius {
-    @include radius($radius);
-    & > span { @include radius($radius - 1px); }
-  }
-
-}
-
-// We use this to quickly create switches with a single mixin
-@mixin switch($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease, $height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em, $paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
-  @include switch-base($transition-speed, $transition-ease);
-  @include switch-size($height, $font-size, $line-height);
-  @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
-}
-
-@if $include-html-button-classes != false {
-
-  /* Modularis Switches */
-  @media only screen {
-
-    // Containing element for the radio switch
-    div.switch {
-      @include switch;
-
-      // Large radio switches
-      &.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
-
-      // Small radio switches
-      &.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1em); }
-
-      // Tiny radio switches
-      &.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9em); }
-
-      // Add a radius to the switch
-      &.radius { @include radius(4px);
-        & > span { @include radius(3px); }
-      }
-
-      // Make the switch completely round, like a pill
-      &.round { @include radius(1000px);
-        & > span { @include radius(999px); }
-        label { padding: 0 emCalc($switch-label-side-padding + 3px); }
-      }
-
-    }
-
-    @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } }
-
-  }
-}

data/scss/compagecss/components/_tables.scss

@@ -1,80 +0,0 @@
-//
-// Table Variables
-//
-
-// These control the background color for the table and even rows
-$table-bg:               #fff !default;
-$table-even-row-bg:      #f9f9f9 !default;
-
-// These control the table cell border style
-$table-border-style:     solid !default;
-$table-border-size:      1px !default;
-$table-border-color:     #ddd !default;
-
-// These control the table head styles
-$table-head-bg:          #f5f5f5 !default;
-$table-head-font-size:   emCalc(14px) !default;
-$table-head-font-color:  #222 !default;
-$table-head-font-weight: bold !default;
-$table-head-padding:     emCalc(8px) emCalc(10px) emCalc(10px) !default;
-
-// These control the row padding and font styles
-$table-row-padding:      emCalc(9px) emCalc(10px) !default;
-$table-row-font-size:    emCalc(14px) !default;
-$table-row-font-color:   #222 !default;
-$table-line-height:      emCalc(18px) !default;
-
-// These are for controlling the display and margin of tables
-$table-display:          table-cell !default;
-$table-margin-bottom:    emCalc(20px) !default;
-
-
-//
-// Table Mixin
-//
-@mixin table {
-  background: $table-bg;
-  margin-bottom: $table-margin-bottom;
-  border: $table-border-style $table-border-size $table-border-color;
-
-  thead,
-  tfoot {
-    background: $table-head-bg;
-    font-weight: $table-head-font-weight;
-
-    tr {
-      th,
-      td {
-        padding: $table-head-padding;
-        font-size: $table-head-font-size;
-        color: $table-head-font-color;
-        text-align: $default-float;
-      }
-    }
-  }
-
-  tr {
-    th,
-    td {
-      padding: $table-row-padding;
-      font-size: $table-row-font-size;
-      color: $table-row-font-color;
-    }
-
-    &.even,
-    &.alt,
-    &:nth-of-type(even) { background: $table-even-row-bg; }
-  }
-
-  thead tr th,
-  tfoot tr th,
-  tbody tr td,
-  tr td,
-  tfoot tr td { display: $table-display; line-height: $table-line-height; }
-}
-
-
-/* Tables */
-table {
-  @include table;
-}

data/scss/compagecss/components/_thumbs.scss

@@ -1,47 +0,0 @@
-//
-// Image Thumbnail Variables
-//
-
-// We use these to control border styles
-$thumb-border-style:     solid !default;
-$thumb-border-width:     4px !default;
-$thumb-border-color:     #fff !default;
-$thumb-box-shadow:       0 0 0 1px rgba(#000,.2) !default;
-$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
-
-// Radius and transition speed for thumbs
-$thumb-radius:           $global-radius !default;
-$thumb-transition-speed: 200ms !default;
-
-//
-// Image Thumbnail Mixins
-//
-
-// We use this to create image thumbnail styles.
-@mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
-  line-height: 0;
-  display: inline-block;
-  border: $thumb-border-style $border-width $thumb-border-color;
-  -webkit-box-shadow: $box-shadow;
-  box-shadow: $box-shadow;
-
-  &:hover,
-  &:focus { -webkit-box-shadow: $box-shadow-hover; box-shadow: $box-shadow-hover; }
-}
-
-
-// If html classes are turned on we'll include these classes.
-@if $include-html-media-classes != false {
-
-  /* Image Thumbnails */
-  .th {
-    @include thumb;
-    @include single-transition(all,$thumb-transition-speed,ease-out);
-
-    &.radius { @include radius($thumb-radius); }
-  }
-  a.th { display: block; }
-
-}
-
-

data/scss/compagecss/components/_tooltips.scss

@@ -1,113 +0,0 @@
-//
-// Tooltip Variables
-//
-$has-tip-border-bottom:       dotted 1px #ccc !default;
-$has-tip-font-weight:         bold !default;
-$has-tip-font-color:          #333 !default;
-$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
-$has-tip-font-color-hover:    $primary-color !default;
-$has-tip-cursor-type:         help !default;
-
-$tooltip-padding:             emCalc(8px) !default;
-$tooltip-bg:                  #000 !default;
-$tooltip-font-size:           emCalc(15px) !default;
-$tooltip-font-weight:         bold !default;
-$tooltip-font-color:          #fff !default;
-$tooltip-line-height:         1.3 !default;
-$tooltip-close-font-size:     emCalc(10px) !default;
-$tooltip-close-font-weight:   normal !default;
-$tooltip-close-font-color:    #888 !default;
-$tooltip-font-size-sml:       emCalc(14px) !default;
-$tooltip-radius:              $global-radius !default;
-$tooltip-pip-size:            5px !default;
-
-
-/* Tooltips */
-
-.has-tip {
-  border-bottom: $has-tip-border-bottom;
-  cursor: $has-tip-cursor-type;
-  font-weight: $has-tip-font-weight;
-  color: $has-tip-font-color;
-
-  &:hover,
-  &:focus {
-    border-bottom: $has-tip-border-bottom-hover;
-    color: $has-tip-font-color-hover;
-  }
-
-  &.tip-left,
-  &.tip-right { float: none !important; }
-}
-
-.tooltip {
-  display: none;
-  position: absolute;
-  z-index: 999;
-  font-weight: $tooltip-font-weight;
-  font-size: $tooltip-font-size;
-  line-height: $tooltip-line-height;
-  padding: $tooltip-padding;
-  max-width: 85%;
-  #{$default-float}: 50%;
-  width: 100%;
-  color: $tooltip-font-color;
-  background: $tooltip-bg;
-  @include radius($tooltip-radius);
-
-  &>.nub {
-    display: block;
-    #{$default-float}: $tooltip-pip-size;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: solid $tooltip-pip-size;
-    border-color: transparent transparent $tooltip-bg transparent;
-    top: -($tooltip-pip-size * 2);
-  }
-
-  &.opened {
-    color: $has-tip-font-color-hover !important;
-    border-bottom: $has-tip-border-bottom-hover !important;
-  }
-}
-
-.tap-to-close {
-  display: block;
-  font-size: $tooltip-close-font-size;
-  color: $tooltip-close-font-color;
-  font-weight: $tooltip-close-font-weight;
-}
-
-@media #{$small} {
-  .tooltip {
-    &>.nub {
-      border-color: transparent transparent $tooltip-bg transparent;
-      top: -($tooltip-pip-size * 2);
-    }
-    &.tip-top>.nub {
-      border-color: $tooltip-bg transparent transparent transparent;
-      top: auto;
-      bottom: -($tooltip-pip-size * 2);
-    }
-
-    &.tip-left,
-    &.tip-right { float: none !important; }
-
-    &.tip-left>.nub {
-      border-color: transparent transparent transparent $tooltip-bg;
-      right: -($tooltip-pip-size * 2);
-      left: auto;
-      top: 50%;
-      margin-top: -$tooltip-pip-size;
-    }
-    &.tip-right>.nub {
-      border-color: transparent $tooltip-bg transparent transparent;
-      right: auto;
-      left: -($tooltip-pip-size * 2);
-      top: 50%;
-      margin-top: -$tooltip-pip-size;
-    }
-
-  }
-}