// _pepperdine-mixins.scss $gradient-darken: opacify(#041021, .6); /* Main Colors */ $pepOrange: #ee7624; $altOrange: #d25f15; $pepBlue: #00205c; $altBlue: #0081bc; $pepWarmGrey: #968c83; $altWarmGrey: #6f625a; $LightGrey: #f7f6f5; $RichBlack: #00071b; $DarkGrey: #414042; $white: #fff; $pepLine: #d7d2cc; /* Alt Colors */ $pepBrown: #391f00; $pepGreen: #b7ce97; $altBlueHover: #00629a; $paleBlue: #edf3f8; $pepBone: #f8f3eb; $altBone: #efe4d3; /* sidenav */ /* Unused Colors */ $OldaltBlue: #5b8ab5; $pepKhaki: #e1d1a7; $pepGold: #85754f; $pepTanOrange: #c78a3e; /* Gradient */ @mixin gradient { background: $LightGrey; background: -moz-linear-gradient(top, $white 18%, $LightGrey 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(18%,$white), color-stop(100%,$LightGrey)); background: -webkit-linear-gradient(top, $white 18%,$LightGrey 100%); background: -o-linear-gradient(top, $white 18%,$LightGrey 100%); background: -ms-linear-gradient(top, $white 18%,$LightGrey 100%); background: linear-gradient(to bottom, $white 18%,$LightGrey 100%); } /* Grid */ $gridWidth: 990px; $gridGutter: (30/990) *100%; /* 30px */ $gridMargin: $gridGutter / 2; //$gridWidth2col: $gridWidth *(2/3); /* 660px */ //$gridWidth2col: (2/3) *100%; /* percentage */ $gridGutter2col: $gridGutter / (2/3); $gridMargin2col: $gridMargin / (2/3); /* Typography */ @mixin headings { margin: 1.1rem 0 .4rem 0; font-family: 'Helvetica Neue', Gotham, Arial, Helvetica, sans-serif; font-weight: normal; } /* Animation */ $transition: all 350ms; /* FLEXBOX */ @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; }