github.com/aspring/packer@v0.8.1-0.20150629211158-9db281ac0f89/website/source/assets/stylesheets/_helpers.scss (about)

     1  /* variables */
     2  
     3  //color
     4  $black: #000;
     5  $white: #fff;
     6  $red: #ff0000;
     7  
     8  $green: #7bc6b1;
     9  $orange: #f2826a;
    10  $background: #f2eee5;
    11  $dark-background: #333;
    12  
    13  $gray-dark: #5c5c5c;
    14  $gray-mid: #b2b2b2;
    15  $gray-light: #e0e0e0;
    16  
    17  $border-dark: #333;
    18  
    19  // base measures
    20  $baseline: 20px;
    21  $base-font-size: 16px;
    22  $base-line-height: 20px;
    23  $button-height: 60px;
    24  
    25  .center {
    26    margin: 0 auto;
    27  }
    28  
    29  .padded-lg {padding: ($baseline * 2) 0;}
    30  .padded {padding: ($baseline * 2) 0;}
    31  .padded-sm {padding: ($baseline) 0;}
    32  
    33  
    34  // components
    35  $nav-height: 100px;
    36  $hero-height: 460px;
    37  $docs-top-margin: 40px;
    38  $sidebar-background-color: $dark-background;
    39  $sidebar-width: 250px;
    40  
    41  
    42  //typography
    43  $serif: 'myriad-pro', helvetica, Georgia, serif;
    44  $sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    45  $mono: 'Inconsolata', 'courier new', courier, mono-space;
    46  
    47  .serif { font-family: $serif; }
    48  .sans { font-family: $sans; }
    49  .mono { font-family: $mono; }
    50  
    51  .text-center { text-align: center !important; }
    52  .text-left { text-align: left !important; }
    53  .text-right { text-align: right !important; }
    54  
    55  .text-green { color: $green; }
    56  
    57  .uppercase { text-transform: uppercase !important; }
    58  
    59  @font-face {
    60      font-family: 'HeimatStencil-SemiBold';
    61      src: font-url('2772B2_0_0.eot');
    62      src: font-url('2772B2_0_0.woff') format('woff'),
    63           font-url('2772B2_0_0.ttf') format('truetype');
    64      font-weight: normal;
    65      font-style: normal;
    66  }
    67  
    68  //color
    69  .dark-background {
    70    background-color: #000;
    71    color: $white;
    72  
    73  	a {
    74      color: inherit;
    75  
    76      &:hover {
    77  		  color: $green;
    78  		}
    79  
    80  		&:active {
    81  		  color: darken($green, 30%);
    82  		}
    83  	}
    84  }
    85  
    86  .white-background {
    87    background-color: $white;
    88  }
    89  
    90  //elements
    91  .divider {
    92    background: image-url('divider.png') no-repeat center bottom;
    93    height: 70px;
    94    width: 70px;
    95    background-size: 70px 70px;
    96    display: table-cell;
    97    text-align: center;
    98    vertical-align: middle;
    99  }
   100  
   101  .packer {
   102    color: $orange;
   103    font-size: 20px;
   104  
   105  	a:hover, a:active, a:visited {
   106      color: inherit;
   107  	}
   108  }
   109  
   110  // media queries
   111  $break-sm: 480px;
   112  $break-med: 768px;
   113  $break-max: 1200px;
   114  $break-lg: 980px;
   115  
   116  @mixin respond-to($media) {
   117    @if $media == mobile {
   118      @media only screen and (max-width: $break-sm) { @content; }
   119    }
   120    @else if $media == tablet {
   121      @media only screen and (max-width: $break-med - 1) { @content; }
   122    }
   123    @else if $media == desktop {
   124      @media only screen and (min-width: $break-med) and (max-width: $break-lg - 1) { @content; }
   125    }
   126    @else if $media == desktop-lg {
   127      @media only screen and (min-width: $break-max) { @content; }
   128    }
   129  }
   130  
   131  /*
   132  * example *
   133  .profile-pic {
   134    @include respond-to(mobile) { width: 100% ;}
   135    @include respond-to(tablet) { width: 125px; }
   136  }
   137  */
   138  //////
   139  
   140  /* utlities */
   141  .d {
   142    border-bottom: 1px solid $red;
   143    border-top: 1px solid $red;
   144    background-color: transparentize($red, .9);
   145  }
   146  
   147  .hyphenate {
   148    -webkit-hyphens: auto;
   149    -moz-hyphens: auto;
   150    hyphens: auto;
   151  }
   152  
   153  .full-width {
   154    margin-right: -20px;
   155    margin-left: -20px;
   156  }
   157  
   158  .add-transition {
   159    -webkit-transition: all .1s ease-in-out;
   160       -moz-transition: all .1s ease-in-out;
   161         -o-transition: all .1s ease-in-out;
   162            transition: all .1s ease-in-out;
   163  }
   164  
   165  @mixin opacity($opacity) {
   166    -khtml-opacity: $opacity;
   167      -moz-opacity: $opacity;
   168           opacity: $opacity;
   169  }
   170  
   171  @mixin transform-scale($value) {
   172    -webkit-transform: scale($value);
   173    	 -moz-transform: scale($value);
   174    				transform: scale($value);
   175  }
   176  
   177  @mixin transition($type, $speed, $easing) {
   178  	-webkit-transition: $type $speed $easing;
   179  	   -moz-transition: $type $speed $easing;
   180         -o-transition: $type $speed $easing;
   181            transition: $type $speed $easing;
   182  }
   183  
   184  @mixin rounded($radius) {
   185    -webkit-border-radius: $radius;
   186       -moz-border-radius: $radius;
   187     -khtml-border-radius: $radius;
   188            border-radius: $radius;
   189  }