github.com/phobos182/packer@v0.2.3-0.20130819023704-c84d2aeffc68/website/source/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: url('../../fonts/2772B2_0_0.eot');
    62      src: url('../../fonts/2772B2_0_0.woff') format('woff'),
    63           url('../../fonts/2772B2_0_0.ttf') format('truetype');
    64      font-weight: normal;
    65      font-style: normal;
    66  }
    67  
    68  
    69  //color
    70  .dark-background {
    71      background-color: #000;
    72      color: $white;
    73  
    74  	a {
    75  	color: inherit;
    76  		&:hover {
    77  		color: $green;
    78  		}
    79  		&:active {
    80  		color: darken($green, 30%);
    81  		}
    82  	}
    83  }
    84  
    85  .white-background {
    86  background-color: $white;
    87  }
    88  
    89  
    90  //elements
    91  .divider {
    92  background: url(/images/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,
   106  	a:active,
   107  	a:visited {
   108  	color: inherit;
   109  	}
   110  }
   111  
   112  // media queries
   113  $break-sm: 480px;
   114  $break-med: 768px;
   115  $break-max: 1200px;
   116  $break-lg: 980px;
   117  
   118  @mixin respond-to($media) {
   119    @if $media == mobile {
   120      @media only screen and (max-width: $break-sm) { @content; }
   121    }
   122    @else if $media == tablet {
   123      @media only screen and (max-width: $break-med - 1) { @content; }
   124    }
   125    @else if $media == desktop {
   126      @media only screen and (min-width: $break-med) and (max-width: $break-lg - 1) { @content; }
   127    }
   128    @else if $media == desktop-lg {
   129      @media only screen and (min-width: $break-max) { @content; }
   130    }
   131  }
   132  
   133  /*
   134  * example *
   135  .profile-pic {
   136    @include respond-to(mobile) { width: 100% ;}
   137    @include respond-to(tablet) { width: 125px; }
   138  }
   139  */
   140  //////
   141  
   142  /* utlities */
   143  .d {
   144  border-bottom: 1px solid $red;
   145  border-top: 1px solid $red;
   146  background-color: transparentize($red, .9);
   147  }
   148  
   149  .hyphenate {
   150  -webkit-hyphens: auto;
   151  -moz-hyphens: auto;
   152  hyphens: auto;
   153  }
   154  
   155  .full-width {
   156  margin-right: -20px;
   157  margin-left: -20px;
   158  }
   159  
   160  .add-transition {
   161  transition: all .1s ease-in-out;
   162  -moz-transition: all .1s ease-in-out;
   163  -webkit-transition: all .1s ease-in-out;
   164  -o-transition: all .1s ease-in-out;
   165  }
   166  
   167  @mixin opacity($opacity) {
   168  -khtml-opacity: $opacity;
   169  -moz-opacity: $opacity;
   170  opacity: $opacity;
   171  }
   172  
   173  @mixin transform-scale($value) {
   174  	 -moz-transform: scale($value);
   175  -webkit-transform: scale($value);
   176  				transform: scale($value);
   177  }
   178  
   179  @mixin transition($type, $speed, $easing) {
   180  	-webkit-transition: $type $speed $easing;
   181  	   -moz-transition: $type $speed $easing;
   182         -o-transition: $type $speed $easing;
   183            transition: $type $speed $easing;
   184  }
   185  
   186  @mixin rounded($radius) {
   187  -moz-border-radius: $radius;
   188  -webkit-border-radius: $radius;
   189  -khtml-border-radius: $radius;
   190  border-radius: $radius;
   191  }