/*-------------------------------------------------------------- # BestThemeEver Custom Mixins # example @include magazine-header(); --------------------------------------------------------------*/ // Title Category @mixin magazine-header() { } // Reset UL - OL @mixin reset-ul() { margin: 0; padding: 0; list-style: none; } // Button @mixin default-button() { font-family: $heading-font; font-size: 1em; text-transform: uppercase; border: none; background: $button-bg-color; color: $button-color; display: inline-block; height: 36px; line-height: 36px; padding: 0 20px; @include border-radius(0); @include single-transition(all, 0.1s, ease-in-out, 0.1s); margin: 0; &:focus, &:hover { background: $button-bg-color-hover; text-decoration: none; } } // Custom-button @mixin custom-button($color1, $color2) { font-family: $heading-font; font-size: 1em; border: none; background: $button-bg-color; color: $button-color; display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; @include border-radius(0); @include single-transition(all, 0.1s, ease-in-out, 0.1s); text-align: center; cursor: pointer; &:hover { background: $color2; color: $white-color; text-decoration: none; } } // Input @mixin default-input() { font-family: $heading-font; font-size: 1em; border: none; background: $input-bg-color; color: $input-color; height: 36px; line-height: 36px; padding: 0 20px; @include border-radius(0); @include single-transition(all, 0.1s, ease-in-out, 0.1s); outline: none; margin: 0; &:focus { background: $input-bg-color-focus; } } // Textarea @mixin default-textarea() { font-family: $heading-font; font-size: 1em; border: none; background: $input-bg-color; color: $input-color; height: 150px; padding: 10px 20px; @include border-radius(0); outline: none; margin: 0; &:focus { background: $input-bg-color-focus; } } // Grid single @mixin grid-single() { width: 100%; margin-bottom: 1em; .thumbnail { margin-bottom: 1.250em; img { width: 100%; height: auto; display: block; } } ul { list-style: disc outside; margin: 0; padding: 0 0 1.25em 1.25em; } ul.related-grid, ul.recently-grid { @include reset-ul(); padding: 0; li { float: left; width: 49%; margin: 0 2% 1.25em 0; text-align: center; &:nth-child(2n) { margin-right: 0; } &:nth-child(2n+1) { clear: left; } img { width: 100%; display: block; margin-bottom: 0.625em; } } } a { @include em('font-size', 22); @include animate-link($default-color, $default-color); @include breakpoint(479) { @include em('font-size', 18); } } } @mixin bg-gradientCenter($left, $centerLeft, $centerRight, $right) { background-color: $left; background: -moz-linear-gradient(left, $left 0%, $centerLeft 20%, $centerRight 80%, $right 100%); background: -webkit-linear-gradient(left, $left 0%,$centerLeft 20%,$centerRight 80%,$right 100%); background: linear-gradient(to right, $left 0%,$centerLeft 20%,$centerRight 80%,$right 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$left}', endColorstr='#{$right}',GradientType=1 ); } /* Portrait and Landscape */ @mixin ipad-pl-ls() { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { @content; } } /* Portrait */ @mixin ipad-pl() { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { @content; } } /* Landscape */ @mixin ipad-ls() { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { @content; } } @mixin transition() { -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -ms-transition: all 0.25s ease; transition: all 0.25s ease; }