| Server IP : 79.136.114.73 / Your IP : 3.144.25.212 Web Server : Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.29 OpenSSL/1.0.1f System : Linux b8009 3.13.0-170-generic #220-Ubuntu SMP Thu May 9 12:40:49 UTC 2019 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/www.astacus.se/wp-content/themes/x/framework/css/src/site/_scss/inc/mixins/ |
Upload File : |
// =============================================================================
// _CSS3.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
// 01. Box Shadow
// 02. Box Sizing
// 03. Animations
// 04. Transitions
// 05. Transformations
// a. Rotate
// b. Rotate X
// c. Rotate Y
// d. Scale
// e. Translate
// f. Translate 3D
// g. Skew
// h. Transform Style
// 06. Backface Visibility
// 07. Perspective
// 08. User Select
// 09. Resize Anything
// 10. Content Columns
// 11. Optional Hypenation
// 12. Opacity
// =============================================================================
// Box Shadow
// =============================================================================
@mixin box-shadow($shadow) {
box-shadow: $shadow;
}
// Box Sizing
// =============================================================================
@mixin box-sizing($boxModel) {
-webkit-box-sizing: $boxModel;
-moz-box-sizing: $boxModel;
box-sizing: $boxModel;
}
// Animations
// =============================================================================
@mixin animate($animation) {
-webkit-animation: $animation;
-moz-animation: $animation;
-o-animation: $animation;
animation: $animation;
}
// Transitions
// =============================================================================
@mixin transition($transition) {
-webkit-transition: $transition;
transition: $transition;
}
// Transformations
// =============================================================================
//
// Rotate.
//
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
//
// Rotate X.
//
@mixin rotate-x($degrees) {
-webkit-transform: rotateX($degrees);
-ms-transform: rotateX($degrees);
transform: rotateX($degrees);
}
//
// Rotate Y.
//
@mixin rotate-y($degrees) {
-webkit-transform: rotateY($degrees);
-ms-transform: rotateY($degrees);
transform: rotateY($degrees);
}
//
// Scale.
//
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
-ms-transform: scale($ratio);
transform: scale($ratio);
}
//
// Translate.
//
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y);
transform: translate($x, $y);
}
//
// Translate 3D.
//
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
-ms-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}
//
// Skew.
//
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-ms-transform: skew($x, $y);
transform: skew($x, $y);
}
//
// Transform style.
//
@mixin transform-style($style) {
-webkit-transform-style: $style;
transform-style: $style;
}
// Backface Visibility
// =============================================================================
@mixin backface-visibility($visibility){
-webkit-backface-visibility: $visibility;
backface-visibility: $visibility;
}
// Perspective
// =============================================================================
@mixin perspective($value) {
-webkit-perspective: $value;
-ms-perspective: $value;
perspective: $value;
}
// User Select
// =============================================================================
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
-o-user-select: $select;
user-select: $select;
}
// Resize Anything
// =============================================================================
//
// 1. Options: 'horizontal', 'vertical', or 'both'.
// 2. Safari fix.
//
@mixin resizable($direction) {
resize: $direction; // 1
overflow: auto; // 2
}
// Content Columns
// =============================================================================
@mixin content-columns($columnCount: 2, $columnGap: 3em, $columnRule: 1px solid #e5e5e5) {
-webkit-column-count: $columnCount;
-moz-column-count: $columnCount;
column-count: $columnCount;
-webkit-column-gap: $columnGap;
-moz-column-gap: $columnGap;
column-gap: $columnGap;
-webkit-column-rule: $columnRule;
-moz-column-rule: $columnRule;
column-rule: $columnRule;
}
// Optional hypenation
// =============================================================================
@mixin hyphens($mode: auto) {
word-wrap: break-word;
-webkit-hyphens: $mode;
-moz-hyphens: $mode;
-o-hyphens: $mode;
hyphens: $mode;
}
// Opacity
// =============================================================================
@mixin opacity($opacity: 0.5) {
opacity: $opacity;
}