src/resources/themes/vendor/compass-recipes/stylesheets/recipes/form/skin/_natural.scss

   1 @mixin form-skin-natural-input($color: #999, $border: #3399e9)
   2 {
   3     padding: .4em;
   4
   5     border: 1px solid $border;
   6     border-top-color: lighten($border, 4%);
   7     border-bottom-color: darken($border, 4%);
   8
   9     @include border-radius(.4em);
  10     @include background(linear-gradient(#fff, darken(#fff, 10%) 1%, #fff 30%));
  11
  12     @include box-shadow(rgba(0, 0, 0, .1) 0 0 .4em); // , inset rgba(0, 0, 0, .2) 0 1px 2px
  13
  14     $border-transition: border linear .2s;
  15     $box-shadow-transition: box-shadow linear .2s;
  16     $transition: $box-shadow-transition, $border-transition;
  17     -moz-transition: -moz-$transition;
  18     -webkit-transition: -webkit-$transition;
  19     transition: $transition;
  20 }
  21
  22     @mixin form-skin-natural-input-hover($border: #3399e9)
  23     {
  24         @include box-shadow(0 0 .8em rgba($border,.4));
  25     }
  26
  27     @mixin form-skin-natural-input-focus($border: #3399e9)
  28     {
  29         outline:none; // reset default browser behavior
  30         border-color: $border;
  31         @include box-shadow(0 0 .4em rgba($border,.65));
  32     }
  33
  34 @mixin form-skin-natural-label($color: #999)
  35 {
  36     cursor: pointer;
  37     color: $color;
  38 }
  39
  40     // here we can make better selector because when including mixin, & is too long
  41     @mixin form-skin-natural-label-adjacent-effect($color-hover, $color-focus)
  42     {
  43         label:hover input,      // <label><input /></label>
  44         label:hover select,     // <label><select /></label>
  45         label:hover textarea,   // <label><textarea /></label>
  46         input:hover     + label, // <input /> <label> </label>
  47         select:hover    + label, // <select /> <label> </label>
  48         textarea:hover  + label // <textarea /> <label> </label>
  49         /* CANT WORK :( we need oposited of the + adjacent selector
  50         label + input:hover,    // <label> </label> <input />
  51         label + select:hover,   // <label> </label> <select />
  52         label + textarea:hover, // <label> </label> <textarea />
  53         */
  54         {
  55             color: $color-hover;
  56         }
  57
  58         label:focus input,      // <label><input /></label>
  59         label:focus select,     // <label><select /></label>
  60         label:focus textarea,   // <label><textarea /></label>
  61         input:focus     + label, // <input /> <label> </label>
  62         select:focus    + label, // <select /> <label> </label>
  63         textarea:focus  + label // <textarea /> <label> </label>
  64         /* CANT WORK :( we need oposited of the + adjacent selector
  65         label + input:focus,    // <label> </label> <input />
  66         label + select:focus,   // <label> </label> <select />
  67         label + textarea:focus, // <label> </label> <textarea />
  68         */
  69         {
  70             color: $color-focus;
  71         }
  72     }
  73
  74 @mixin form-skin-natural-button($color: #fff, $background: #3399e9)
  75 {
  76
  77     cursor: pointer;
  78     display: inline-block;
  79     width: auto;
  80
  81     color: $color;
  82
  83     padding: .6em 1em;
  84
  85     text-shadow: 0 1px 0 rgba(darken($background, 80%), .4);
  86
  87     border: 1px solid darken($background, 5%);
  88     border-top-color: darken($background, 10%);
  89     border-bottom-color: lighten($background, 10%);
  90     background: $background; //fallback
  91     @include background(linear-gradient(lighten($background, 10%), darken($background, 10%)));
  92
  93     @include border-radius(.6em);
  94     @include box-shadow(rgba(0, 0, 0, .4) 0 .1em .2em);
  95
  96     &:focus,
  97     &:hover
  98     {
  99         text-decoration: none; // for <a>
 100         background: darken($background, 5%); //fallback
 101         @include background(linear-gradient(lighten($background, 12%), darken($background, 12%)));
 102     }
 103
 104     &:active
 105     {
 106         text-decoration: none; // for <a>
 107         background: darken($background, 8%); //fallback
 108         @include background(linear-gradient(darken($background, 12%), lighten($background, 12%)));
 109     }
 110 }
 111
 112
 113 @mixin form-skin-natural($color-label: #666, $color-input: #999, $border-input: #3399e9, $color-button: #fff, $background-button: #3399e9)
 114 {
 115     label
 116     {
 117         @include form-skin-natural-label($color-label);
 118     }
 119
 120     input,
 121     select,
 122     textarea
 123     {
 124         @include form-skin-natural-input($color-input, $border-input);
 125
 126         &:hover,
 127         label:hover + &
 128         {
 129             @include form-skin-natural-input-hover($border-input);
 130         }
 131
 132         &:focus
 133         {
 134             @include form-skin-natural-input-focus($border-input);
 135         }
 136     }
 137
 138     button,
 139     .button
 140     {
 141         @include form-skin-natural-button($color-button, $background-button);
 142     }
 143 }