rapido-css 0.2.0 → 0.2.1

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MjRhOWZiNzBhOTY5MzBmMDU0ZDJlNDVhNDExOGI1NjUwMmM1Y2VmNg==
+    MDFmZDgxMTA4ZTBkYzEyY2RhZDc1ZGQ4ZDQ0N2RmMWUyZjQyOWZhMQ==
   data.tar.gz: !binary |-
-    ZDVmNjUxMzA4MTc4ZTc0NGZmZWIzYjVhNGY0YjkyOGEzZjY3YjcxYg==
+    YWFkNjhlNjQwZmE4OGE3M2QyN2Q5OTMxMzNlYmU1ZDA5MGJkMDJiOA==
 SHA512:
   metadata.gz: !binary |-
-    Y2NjYWU4YzFhMDIxZTE1MTQxOGNkYzQyMjM2NDFjN2EwMzY4MDhlNmZiNjcw
-    MzkyOGMxYzE3MTc4MzlmYzFkY2EzYTc0NjY5YWI1MGVmODAxZmRjYzVlMzU0
-    NDM3MzBjOWViZjdhNmFmMWE0NDg0NjJhYjAxNzk2M2NjZDMzODU=
+    MjRmOTJiZTllOGYzODgzNWVmZjY5MGFhOGNhNjZkYjcwNjAzYThiMjI1NTBm
+    MTQ0YTMyZmJiODZmNjc4ZDFjODhiMTcyMGQ3ZGIwODRiMjQ0MGM3ZGVmZjg4
+    Y2JlODUyM2ExNmE5MDgzYTAyZWE4YTIwM2E3YmMyNTM4Yzc5MTE=
   data.tar.gz: !binary |-
-    MThlZDg3ODEyM2IwNTY2NjY0YTg2MDliMmRiOTNiMWRjZjE3MTJlMDM5MDAy
-    YzBiYWI5Y2M4ODY2NWE4NmJhMjZhNDJiNDI0YjE0NTJlZWY4NGUxYzZhYTE5
-    NWE3MmRjNzZhYWRlZmZlMTU4MzE5YjFiOWYxZTNjNTYzOWE4ZTc=
+    NzI0YzdhNGE1OTVlMWYyNzZhYmM1NTU1N2FlYmU3NmQwZjFkMDg0YjcyOGJm
+    Y2I2ODFhZWFhZjJmMWJiNWU1NGE4MWYyYzY5NDJhZWQzMjZiMTEyOWY3NzFh
+    YTllMTNlZTQ0Njc2M2VkNTA3Zjk5MmI3ZWRhYzFjZTdmZjliYzg=

data/stylesheets/_default-styles.scss

@@ -46,6 +46,13 @@ Inputs and Selects
     %form__select                   # Custom select style, by default it use %input
     %form__suggest                  # Styling for suggest dropdowns
 
+    %form__picker                   # Styling for date picker
+    %form__picker--hover            # For :hover state of links
+    %form__picker--highlighted      # For selected day
+    %form__picker--disabled         # For disabled days
+    %picker__nav--prev              # Character to use for the "prev" arrow
+    %picker__nav--next              # Character to use for the "next" arrow
+
 Styleguide 32.2
 
 */
@@ -87,6 +94,28 @@ Styleguide 32.2
 
     }
 
+    %form__picker {
+        border-color: $gray;
+        background-color: $white;
+        @include box-shadow(0 6px 18px 1px rgba(0, 0, 0, 0.12));
+    }
+
+    %form__picker--hover {
+      background: lighten($link-color, 50);
+    }
+
+    %form__picker--highlighted {
+      background: $link-color;
+      color: $white;
+    }
+
+    %form__picker--disabled {
+      background: $grayLighter;
+      color: $grayLight;
+    }
+
+    %picker__nav--prev:before { content: "◀"; }
+    %picker__nav--next:before { content: "▶"; }
 
 /*
 

data/stylesheets/components/_buttons.scss

@@ -189,7 +189,6 @@ Styleguide 3.5
 
         &:hover, &:focus {
             color: $link-color-hover;
-            text-decoration: underline;
             background-color: transparent;
         }
 

data/stylesheets/components/_forms.scss

@@ -228,7 +228,6 @@ Styleguide 8.2
 .form__radio,
 .form__checkbox,
 .form__select {
-    min-height: em($base-line-height);
     padding-left: em($checkbox-padding-left);
     font-weight: normal;
     cursor: pointer;
@@ -486,7 +485,7 @@ Markup:
   <button type="submit" class="btn btn--default form__addon">Search</button>
 </div>
 
-Styleguide 8.7
+Styleguide 8.8
 
 */
 
@@ -544,7 +543,7 @@ Markup:
   <button type="button" class="btn btn--default btn--secondary">Cancel</button>
 </div>
 
-Styleguide 8.8
+Styleguide 8.9
 
 */
 
@@ -613,7 +612,7 @@ Markup:
 .form--aligned - Right align labels and float them to the left to make them appear on the same line as controls.
 .form--inline - For left-aligned labels and inline-block controls for a compact layout. This layout doesn't support `.form__group`, `.form__addon`, `.form__actions`
 
-Styleguide 8.9
+Styleguide 8.10
 
 */
 
@@ -626,17 +625,28 @@ Styleguide 8.9
             margin: 0 0 em($control-margin-bottom) 0;
         }
 
-        .form__controls {
-            width: 100%;
-
-            & > * {
-                width: 100%;
-            }
+        .form__multi,
+        .form__controls,
+        .input-text,
+        .form__select,
+        textarea,
+        input[type="text"],
+        input[type="password"],
+        input[type="datetime"],
+        input[type="datetime-local"],
+        input[type="date"],
+        input[type="month"],
+        input[type="time"],
+        input[type="week"],
+        input[type="number"],
+        input[type="email"],
+        input[type="url"],
+        input[type="search"],
+        input[type="tel"],
+        input[type="color"] {
+          width: 100%;
         }
 
-        .form__multi { width: 100%; }
-
-
     }
 }
 
@@ -717,7 +727,7 @@ Markup:
 
 </form>
 
-Styleguide 8.9.1
+Styleguide 8.10.1
 
 */
 
@@ -733,7 +743,8 @@ Styleguide 8.9.1
 
         .form__label {
           @include inline-block;
-          padding-right: 1em
+          padding-right: 1em;
+          margin-bottom: 0;
         }
 
         .input-text,
@@ -765,6 +776,10 @@ Styleguide 8.9.1
             @include inline-block;
         }
 
+        .form__group + .form__group {
+          margin-top: 0;
+        }
+
         .form__actions {
             border: 0;
             padding: 0;

data/stylesheets/components/_picker.scss

@@ -0,0 +1,192 @@
+/*
+
+Date picker
+
+Add support for the excellent [**pickadate.js**](http://amsul.ca/pickadate.js/)
+date picker.
+
+Markup:
+<input class="datepicker" type="text">
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('.datepicker').pickadate()
+  });
+</script>
+
+Styleguide 8.7
+
+*/
+
+@if $picker {
+
+    .picker {
+      position: relative;
+      width: 100%;
+      z-index: $zindex-dropdown;
+    }
+
+    .picker__input { cursor: default; }
+
+    .picker__holder {
+      -webkit-overflow-scrolling: touch;
+      @extend %form__picker !optional;
+      @include border-radius(0 0 $base-border-radius $base-border-radius);
+      @include opacity(0);
+      @include transition(all 0.15s ease-out, max-height 0 0.15s, border-width 0 0.15s);
+      border-style: solid;
+      border-width: $input-border;
+      margin-top: neg($input-border);
+      max-height: 0;
+      max-width: 466px;
+      min-width: 176px;
+      overflow-y: auto;
+      position: absolute;
+      transform: translateY(-1em) perspective(600px) rotateX(10deg);
+      width: 100%;
+    }
+
+    .picker--opened .picker__holder {
+      @include opacity(1);
+      max-height: 25em;
+      transform: translateY(0) perspective(600px) rotateX(0);
+    }
+
+    // Box
+
+    .picker__box {  padding: $picker-padding }
+
+    .picker__header {
+      position: relative;
+      text-align: center;
+    }
+
+    .picker__year,
+    .picker__month,
+    .picker__select--year
+    .picker__select--month {
+      display: inline-block;
+      margin: 0 .25em;
+    }
+
+    .picker__month {
+      font-weight: bold;
+      @include adjust-font-size-to($h5-size);
+    }
+
+    .picker__year {
+      color: $gray;
+      font-style: italic;
+      @include adjust-font-size-to($small-size);
+    }
+
+    .picker__select--month,
+    .picker__select--year {
+      padding: .5em .25em;
+      height: 2.5em;
+    }
+
+    .picker__select--month {  width: 35% }
+    .picker__select--year {  width: 22.5% }
+
+    // Navigation
+
+    .picker__nav--prev,
+    .picker__nav--next {
+      @include position(absolute, 0em 0 0em 0);
+      @extend .btn--link;
+      @extend .btn;
+      color: $text-color;
+      width: (100% / 7);
+
+      &:hover { @extend %form__picker--hover }
+      &:before { @include center(); }
+    }
+
+    .picker__nav--prev { left: 0;  @extend %picker__nav--prev }
+    .picker__nav--next { right: 0; @extend %picker__nav--next }
+
+    .picker__nav--disabled,
+    .picker__nav--disabled:hover,
+    .picker__nav--disabled:before,
+    .picker__nav--disabled:before:hover {
+      cursor: default;
+      background: none;
+    }
+
+    // Table
+
+    .picker__table {
+      margin: nth($picker-padding, 1) 0;
+      width: 100%;
+      table-layout: fixed;
+      text-align: center;
+      border-collapse: collapse;
+      border-spacing: 0;
+      td {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    .picker__weekday {
+      padding-bottom: .25em;
+      color: $gray;
+    }
+
+    .picker__day {
+      padding: .25em 0;
+    }
+
+    .picker__day--today {
+      position: relative;
+      &:before {
+        @include position(absolute, 2px 2px 0 0);
+        @include triangle(8px, rgba(0,0,0,.3), up-right);
+        display: block;
+        content: "";
+      }
+    }
+
+    .picker__day--outfocus {
+      color: $grayLight;
+    }
+
+    .picker__day--highlighted,
+    .picker__day--infocus:hover,
+    .picker__day--outfocus:hover {
+      @extend %form__picker--hover;
+      cursor: pointer;
+    }
+
+    .picker__day--highlighted:hover,
+    .picker--focused .picker__day--highlighted {
+      @extend %form__picker--highlighted;
+    }
+
+    .picker__day--disabled,
+    .picker__day--disabled:hover {
+      @extend %form__picker--disabled;
+      cursor: default;
+    }
+
+    .picker__day--highlighted.picker__day--disabled,
+    .picker__day--highlighted.picker__day--disabled:hover {
+      background: $gray;
+    }
+
+    // Footer
+
+    .picker__footer {  text-align: center }
+
+    .picker__button--today,
+    .picker__button--clear {
+      @extend .btn;
+      @extend .btn--link;
+      color: $text-color;
+      font-weight: bold;
+      width: 50%;
+
+      &:hover { @extend %form__picker--hover }
+    }
+
+}

data/stylesheets/rapido.scss

@@ -53,6 +53,7 @@
 @import "components/pager";
 @import "components/pagination";
 @import "components/tooltip";
+@import "components/picker";
 
 // Default styles
 

data/stylesheets/settings/_components.scss

@@ -27,6 +27,7 @@ Enable or disable components, so you can have in the css only what you need.
     $overlays:                      true   # components/_overlay.scss
     $pager:                         true   # components/_pager.scss
     $pagination:                    true   # components/_pagination.scss
+    $picker:                        true   # components/_picker.scss
     $slider:                        true   # components/_slider.scss
     $sprites:                       true   # components/_sprites.scss
     $tables:                        true   # components/_tables.scss
@@ -63,6 +64,7 @@ $offcanvas:                         true   !default;
 $overlays:                          true   !default;
 $pager:                             true   !default;
 $pagination:                        true   !default;
+$picker:                            true   !default;
 $slider:                            true   !default;
 $sprites:                           true   !default;
 $tables:                            true   !default;

data/stylesheets/settings/_dimensions.scss

@@ -149,6 +149,7 @@ Components
     $tabs-content-padding:          $input-padding  # Tabs padding
     $tabs-tab-padding:              $input-padding  # Tabs padding
     $tooltips-padding:              $input-padding  # Tooltips padding
+    $picker-padding:                1em 1em         # Date picker padding
 
 
 Styleguide 31.3
@@ -178,6 +179,7 @@ $tables-padding:                    $input-padding
 $tabs-content-padding:              $input-padding                                                          !default;
 $tabs-tab-padding:                  $input-padding                                                          !default;
 $tooltips-padding:                  $input-padding                                                          !default;
+$picker-padding:                    1em 1em                                                                 !default;
 
 
 /*

data/stylesheets/utilities/_mixins.scss

@@ -253,7 +253,6 @@ Create a css-only triangle.
 
 Styleguide 26.9
 
-
 */
 
 @mixin triangle ($size, $color, $direction) {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rapido-css
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Raffaele Rasini
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-02 00:00:00.000000000 Z
+date: 2014-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: susy
@@ -65,6 +65,7 @@ files:
 - stylesheets/components/_overlay.scss
 - stylesheets/components/_pager.scss
 - stylesheets/components/_pagination.scss
+- stylesheets/components/_picker.scss
 - stylesheets/components/_sliders.scss
 - stylesheets/components/_tables.scss
 - stylesheets/components/_tabs.scss