github.com/mattyr/nomad@v0.3.3-0.20160919021406-3485a065154a/website/source/assets/stylesheets/_buttons.scss (about)

     1  //
     2  // Button Styles
     3  // --------------------------------------------------
     4  
     5  .h-btn{
     6    display: inline-block;
     7    background-color: transparent;
     8    color: $black;
     9    @include transition(color .3s ease-in-out);
    10    //@include btn-shadow();
    11    font-family: $font-family-blanc-reg;
    12    text-transform: uppercase;
    13    border-radius: 3px;
    14  
    15    &.has-caret{
    16      span.h-caret{
    17        display: inline-block;
    18        width: 8px;
    19        height: 12px;
    20        margin-left: 10px;
    21        @include transition(all 300ms ease-in);
    22      }
    23    }
    24  
    25    &.lrg{
    26      font-size: $font-size-reg;
    27      padding: 10px 24px;
    28    }
    29  
    30    &.sml{
    31      padding: 8px 14px;
    32      font-size: $font-size-reg - 2;
    33      line-height: 14px;
    34  
    35      &.has-caret{
    36        span.h-caret{
    37          background-size: 6px 9px !important;
    38          margin-bottom: -2px;
    39          margin-right: -3px;
    40        }
    41      }
    42    }
    43  
    44    &.light{
    45      color: $green-light;
    46  
    47      &.has-border{
    48        border: 2px solid $green-light;
    49      }
    50  
    51      &.has-caret{
    52        span.h-caret{
    53          background: image-url('caret-light.png') 0 0 no-repeat;
    54          @include img-retina("caret-light.png", "caret-light@2x.png", 8px, 12px);
    55        }
    56      }
    57    }
    58  
    59    &.green{
    60      color: $green;
    61  
    62      &.has-border{
    63        border: 2px solid $green;
    64      }
    65  
    66      span.h-caret{
    67        background: image-url('caret-green.png') 0 0 no-repeat;
    68        @include img-retina("caret-green.png", "caret-green@2x.png", 8px, 12px);
    69      }
    70  
    71      &.fill{
    72        background-color: $green;
    73        color: $white;
    74  
    75        span.h-caret{
    76          background: image-url('caret-white.png') 0 0 no-repeat;
    77          @include img-retina("caret-white.png", "caret-white@2x.png", 8px, 12px);
    78        }
    79      }
    80    }
    81  
    82    &.gray{
    83      color: $blue-light;
    84  
    85      &.border{
    86        border: 2px solid $blue-light;
    87      }
    88  
    89      &.fill{
    90        background-color: $blue-light;
    91        color: $white;
    92  
    93        span.h-caret{
    94          background: image-url('caret-white.png') 0 0 no-repeat;
    95          @include img-retina("caret-white.png", "caret-white@2x.png", 8px, 12px);
    96        }
    97      }
    98    }
    99  
   100    &.dark{
   101      color: $green-dark;
   102  
   103      &.border{
   104        border: 2px solid $green-dark;
   105      }
   106    }
   107  
   108    &:hover{
   109      text-decoration: none;
   110      @include transition(color 200ms ease-in);
   111  
   112      &.has-caret{
   113        span.h-caret{
   114          @include translate(4px, 0);
   115          @include transition(all 200ms ease-in);
   116        }
   117      }
   118    }
   119  }