github.com/dahs81/otto@v0.2.1-0.20160126165905-6400716cf085/website/source/assets/stylesheets/_buttons.scss (about)

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