| Server IP : 79.136.114.73 / Your IP : 216.73.216.55 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 : |
// =============================================================================
// _ARROWS.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
// 01. Popover Arrows
// 02. CSS Arrow Box
// =============================================================================
// Popover Arrows
// =============================================================================
//
// For tooltips and popovers.
//
@mixin popover-arrow-top($arrowWidth: 5px, $color: $black) {
bottom: 0;
left: 50%;
margin-left: -$arrowWidth;
border-left: $arrowWidth solid transparent;
border-right: $arrowWidth solid transparent;
border-top: $arrowWidth solid $color;
}
@mixin popover-arrow-left($arrowWidth: 5px, $color: $black) {
top: 50%;
right: 0;
margin-top: -$arrowWidth;
border-top: $arrowWidth solid transparent;
border-bottom: $arrowWidth solid transparent;
border-left: $arrowWidth solid $color;
}
@mixin popover-arrow-bottom($arrowWidth: 5px, $color: $black) {
top: 0;
left: 50%;
margin-left: -$arrowWidth;
border-left: $arrowWidth solid transparent;
border-right: $arrowWidth solid transparent;
border-bottom: $arrowWidth solid $color;
}
@mixin popover-arrow-right($arrowWidth: 5px, $color: $black) {
top: 50%;
left: 0;
margin-top: -$arrowWidth;
border-top: $arrowWidth solid transparent;
border-bottom: $arrowWidth solid transparent;
border-right: $arrowWidth solid $color;
}
// CSS Arrow Box
// =============================================================================
//
// Creates a bordered box and arrow completely out of CSS.
//
@mixin css-arrow-box($backgroundColor: #dddddd, $borderColor: #999999, $borderWidth: 7px, $size: 20px, $position: left, $align: 50%) {
position: relative;
background: $backgroundColor;
border: $borderWidth solid $borderColor;
&:after, &:before {
@if $position == top {
bottom: 100%;
}
@else if $position == right {
left: 100%;
}
@else if $position == bottom {
top: 100%;
}
@else {
right: 100%;
}
border: solid transparent;
content: "";
width: 0;
height: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-width: $size;
@if $position == top {
border-bottom-color: $backgroundColor;
left: $align;
margin-left: $size * -1;
}
@else if $position == right {
border-left-color: $backgroundColor;
top: $align;
margin-top: $size * -1;
}
@else if $position == bottom {
border-top-color: $backgroundColor;
left: $align;
margin-left: $size * -1;
}
@else {
border-right-color: $backgroundColor;
top: $align;
margin-top: $size * -1;
}
}
&:before {
border-width: round($size + ($borderWidth * 1.4));
@if $position == top {
border-bottom-color: $borderColor;
left: $align;
margin-left: round(($size + ($borderWidth * 1.4)) * -1);
}
@else if $position == right {
border-left-color: $borderColor;
top: $align;
margin-top: round(($size + ($borderWidth * 1.4)) * -1);
}
@else if $position == bottom {
border-top-color: $borderColor;
left: $align;
margin-left: round(($size + ($borderWidth * 1.4)) * -1);
}
@else {
border-right-color: $borderColor;
top: $align;
margin-top: round(($size + ($borderWidth * 1.4)) * -1);
}
}
}