| Server IP : 79.136.114.73 / Your IP : 216.73.216.217 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/plugins/cornerstone/includes/tco/css/lib/mixins/ |
Upload File : |
// =============================================================================
// _FLEXBOX.SCSS
// -----------------------------------------------------------------------------
// Global SCSS mixins.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
// 01. Display
// 02. Container: Flex Flow
// 03. Container: Item Alignment
// 04. Items: Order
// 04. Items: Flex
// 04. Items: Alignment
// =============================================================================
// Display
// =============================================================================
@mixin display($value) {
@if $value == "flex" {
display: -webkit-flex;
display: flex;
} @else if $value == "inline-flex" {
display: -webkit-inline-flex;
display: inline-flex;
} @else {
display: $value;
}
}
// Container: Flex Flow
// =============================================================================
// Notes
// -----
// 01. flex-direction - This property specifies how flex items are laid out
// in the flex container, by setting the direction of the flex container’s
// main axis.
// row | row-reverse | column | column-reverse
//
// 02. flex-wrap - Controls if the flex container lay out its items in single
// or multiple lines, and the direction the new lines are stacked in.
// nowrap | wrap | wrap-reverse
//
// 03. flex-flow - A shorthand for setting the flex-direction and flex-wrap
// properties.
@mixin flex-direction($value: row) {
-webkit-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-wrap($value: nowrap) {
-webkit-flex-wrap: $value;
flex-wrap: $value;
}
@mixin flex-flow($value: row nowrap) {
-webkit-flex-flow: $value;
flex-flow: $value;
}
// Container: Item Alignment
// =============================================================================
// Notes
// -----
// 01. justify-content - Aligns flex items along the main axis of the current
// line of the flex container.
// flex-start | flex-end | center | space-between | space-around
//
// 02. align-items - Flex items can be aligned in the cross axis of the
// current line of the flex container, similar to justify-content but in
// the perpendicular direction.
// flex-start | flex-end | center | baseline | stretch
//
// 03. align-content - Aligns a flex container’s lines within the flex
// container when there is extra space in the cross-axis (multiple rows
// of items), similar to how justify-content aligns individual items
// within the main-axis.
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin justify-content($value: flex-start) {
-webkit-justify-content: $value;
justify-content: $value;
}
@mixin align-items($value: flex-start) {
-webkit-align-items: $value;
align-items: $value;
}
@mixin align-content($value: flex-start) {
-webkit-align-content: $value;
align-content: $value;
}
// Items: Order
// =============================================================================
// Notes
// -----
// 01. order - Controls the order in which children of a flex container
// appear inside the flex container (defaults to 0);
@mixin order($value: 0) {
-webkit-order: $value;
order: $value;
}
// Items: Flex
// =============================================================================
// Notes
// -----
// 01. flex-grow - Determines how much the flex item will grow relative to
// the rest of the flex items in the flex container when positive free
// space is distributed (defaults to 0).
//
// 02. flex-shrink - Specifies the flex shrink factor, which determines how
// much the flex item will shrink relative to the rest of the flex items
// in the flex container when negative free space is distributed
// (defaults to 1).
//
// 03. flex-basis - This property takes the same values as width and height
// properties, and specifies the initial main size (width) of the flex
// item, before free space is distributed according to the flex factors.
//
// 04. flex - This property is the shorthand for the flex-grow, flex-shrink
// and flex-basis properties.
@mixin flex-grow($value: 0) {
-webkit-flex-grow: $value;
flex-grow: $value;
}
@mixin flex-shrink($value: 1) {
-webkit-flex-shrink: $value;
flex-shrink: $value;
}
@mixin flex-basis($value: auto) {
-webkit-flex-basis: $value;
flex-basis: $value;
}
@mixin flex($value: 0 1 auto) {
-webkit-flex: $value;
flex: $value;
}
// Items: Alignment
// =============================================================================
// Notes
// -----
// 01. align-self - This property allows the default alignment (or the one
// specified by align-items) to be overridden for individual flex items.
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) {
-webkit-align-self: $value;
align-self: $value;
}