????JFIF??x?x????'
| 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/themes/x/framework/css/src/site/_scss/ |
Upload File : |
// =============================================================================
// _SHORTCODES.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
// 01. Container
// 02. Gap
// 03. Clear
// 04. Map
// 05. Code
// 06. Icon
// 07. Block Grid
// 08. Icon List
// 09. Video
// 10. Responsive Slider
// 11. Audio
// 12. Search
// 13. Counter
// 14. Text Type
// 15. Card
// 16. Creative CTA
// 17. Feature Box
// 18. Feature List
// =============================================================================
// Container
// =============================================================================
.x-container {
margin: 0 auto;
@include clearfix();
&.max {
max-width: 1200px;
}
&.width {
width: 88%;
}
}
// Gap
// =============================================================================
.x-gap {
margin: 0 0 $baseMargin;
border-color: transparent;
}
// Clear
// =============================================================================
.x-clear {
margin: 0;
border: 0;
clear: both;
}
// Map
// =============================================================================
.x-map {
margin-bottom: $baseMargin;
.x-map-inner {
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.gm-style {
img {
max-width: none;
}
}
}
// Code
// =============================================================================
.x-code {
line-height: 1;
}
// Icon
// =============================================================================
[data-x-icon],
[class*="#{$fa-css-prefix}-"] {
display: inline-block;
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.left {
margin-right: 0.5em;
}
&.right {
margin-left: 0.5em;
}
&:before {
content: attr(data-x-icon);
line-height: 1;
}
}
// Block Grid
// =============================================================================
.x-block-grid {
display: block;
overflow: hidden;
margin: 0 0 $baseMargin;
> li {
display: block;
float: left;
height: auto;
margin: 5% 5% 0 0;
padding: 0;
}
//
// Two.
//
&.two-up > li {
width: 47.5%;
&:nth-child(-n+2) { margin-top: 0; }
&:nth-child(2n) { margin-right: 0; }
&:nth-child(2n+1) { clear: both; }
@include break(baby-bear) {
width: 100%;
margin-right: 0;
&:nth-child(2) { margin-top: 5%; }
}
}
//
// Three.
//
&.three-up > li {
width: 30%;
&:nth-child(-n+3) { margin-top: 0; }
&:nth-child(3n) { margin-right: 0; }
&:nth-child(3n+1) { clear: both; }
@include break(cubs) {
width: 47.5%;
&:nth-child(3) { margin-top: 5%; }
&:nth-child(3n) { margin-right: 5%; }
&:nth-child(3n+1) { clear: none; }
&:nth-child(2n) { margin-right: 0; }
&:nth-child(2n+1) { clear: both; }
}
@include break(baby-bear) {
width: 100%;
margin-right: 0;
&:nth-child(2) { margin-top: 5%; }
&:nth-child(3n) { margin-right: 0; }
}
}
//
// Four.
//
&.four-up > li {
width: 21.25%;
&:nth-child(-n+4) { margin-top: 0; }
&:nth-child(4n) { margin-right: 0; }
&:nth-child(4n+1) { clear: both; }
@include break(cubs) {
width: 47.5%;
&:nth-child(3),
&:nth-child(4) { margin-top: 5%; }
&:nth-child(4n) { margin-right: 5%; }
&:nth-child(4n+1) { clear: none; }
&:nth-child(2n) { margin-right: 0; }
&:nth-child(2n+1) { clear: both; }
}
@include break(baby-bear) {
width: 100%;
margin-right: 0;
&:nth-child(2) { margin-top: 5%; }
&:nth-child(4n) { margin-right: 0; }
}
}
}
// Icon List
// =============================================================================
.x-ul-icons {
margin-left: 1.5em;
list-style: none;
li {
[class*="#{$fa-css-prefix}-"] {
text-indent: -1.5em;
}
}
}
// Video
// =============================================================================
.x-video {
margin-bottom: $baseMargin;
.x-video-inner {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
&.five-by-three { padding-bottom: 60%; }
&.five-by-four { padding-bottom: 80%; }
&.four-by-three { padding-bottom: 75%; }
&.three-by-two { padding-bottom: 66.67%; }
embed,
iframe,
img,
object,
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
}
&.bg {
@include transition(#{opacity 1s ease});
&,
& .x-video-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
&.poster {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
}
}
// Responsive Slider
// =============================================================================
.x-flexslider-shortcode-container {
margin-bottom: $baseMargin;
.x-flexslider-shortcode {
margin: 0;
}
}
// Audio
// =============================================================================
.x-audio {
margin-bottom: $baseMargin;
&.player {
height: $mejsHeight;
}
}
// Search
// =============================================================================
.x-search-shortcode {
margin-bottom: $baseMargin;
}
// Counter
// =============================================================================
.x-counter {
text-align: center;
.number-wrap {
font-size: 3.25em;
line-height: 1;
}
.text-above,
.text-below {
display: block;
letter-spacing: 0.125em;
line-height: 1.5;
text-transform: uppercase;
}
.text-above {
margin-bottom: 0.5em;
}
.text-below {
margin-top: 0.5em;
}
}
// Text Type
// =============================================================================
.x-text-type {
.typed-cursor{
-webkit-animation: blink 0.65s infinite;
animation: blink 1s infinite;
}
}
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
// Card
// =============================================================================
.x-card-outer {
margin: 0 auto $baseMargin;
text-align: center;
cursor: pointer;
.x-card-inner {
position: relative;
}
.x-face-outer {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.front { z-index: 2; }
&.back { z-index: 1; }
}
.x-face-inner {
height: 100%;
}
.x-face-graphic {
margin: 0 0 10px;
line-height: 1;
}
.x-face-title,
.x-face-text {
color: inherit;
}
.x-face-title {
margin: 0;
padding: 0;
font-size: 1.75em;
}
.x-face-text {
margin: 8px 0 0;
}
.x-face-button {
display: inline-block;
margin: 15px 0 0;
border: 0;
padding: 0.825em 1em;
line-height: 1;
text-decoration: none;
border-radius: 0.35em;
box-shadow: none;
}
&.flipped {
.x-face-outer {
&.front { z-index: 1; }
&.back { z-index: 2; }
}
}
&.center-vertically {
.x-face-inner {
&:before {
content: "";
display: inline-block;
width: 0;
height: 100%;
margin: 0;
padding: 0;
vertical-align: middle;
}
}
.x-face-content {
display: inline-block;
vertical-align: middle;
}
}
&.flip-3d {
@include perspective(1200px);
.x-card-inner {
-webkit-transition: -webkit-transform 1.25s $easeOutQuint;
transition: transform 1.25s $easeOutQuint;
@include transform-style(preserve-3d);
}
.x-face-outer {
@include backface-visibility(hidden);
}
.x-face-outer.front,
.x-face-outer.back,
&.flipped .x-face-outer.front,
&.flipped .x-face-outer.back {
z-index: 1;
}
&.flip-from-left .back,
&.flip-from-right .back { @include rotate-y(180deg); }
&.flip-from-left.flipped .x-card-inner { @include rotate-y(180deg); }
&.flip-from-right.flipped .x-card-inner { @include rotate-y(-180deg); }
&.flip-from-top .back,
&.flip-from-bottom .back { @include rotate-x(180deg); }
&.flip-from-top.flipped .x-card-inner { @include rotate-x(-180deg); }
&.flip-from-bottom.flipped .x-card-inner { @include rotate-x(180deg); }
}
}
// Creative CTA
// =============================================================================
.x-creative-cta {
display: block;
overflow: hidden;
position: relative;
border: 0;
text-align: center;
text-decoration: none;
box-shadow: none;
@include transition(#{background-color 0.3s ease});
> span {
display: block;
@include transition(#{all 0.65s $easeOutQuint});
&.text {
line-height: 1.2;
opacity: 1;
}
&.graphic {
position: absolute;
top: 50%;
left: 50%;
line-height: 1;
opacity: 0;
> i,
> img {
@include transition(#{all 0.65s $easeOutQuint});
}
}
}
&:hover {
> span.text { opacity: 0; }
> span.graphic { opacity: 1; }
}
&.slide-top { &:hover { > span.text { @include translate(0, -150%); } } }
&.slide-left { &:hover { > span.text { @include translate(-80%, 0); } } }
&.slide-right { &:hover { > span.text { @include translate(80%, 0); } } }
&.slide-bottom { &:hover { > span.text { @include translate(0, 150%); } } }
}
// Feature Box
// =============================================================================
//
// Base.
//
.x-feature-box {
position: relative;
margin: 0 auto $baseMargin;
}
//
// Graphic.
//
.x-feature-box-graphic {
display: inline-block;
margin: 0 0 10px;
i,
img {
&.rounded { border-radius: 0.15em; }
&.circle { border-radius: 100em; }
}
i {
display: block;
position: relative;
width: 1em;
height: 1em;
text-align: center;
&:before {
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1em;
margin-top: -0.5em;
font-size: 0.395em;
line-height: 1;
}
}
img {
display: block;
}
}
.x-feature-box-graphic-outer,
.x-feature-box-graphic-inner {
position: relative;
z-index: 2;
}
.x-feature-box-graphic-inner {
width: 1em;
}
//
// Graphic - shapes.
//
.x-feature-box-graphic-inner.hexagon {
&:before,
&:after {
content: "";
display: block;
border: 0 solid transparent;
border-left-width: 0.5em;
border-right-width: 0.5em;
}
&:before {
border-bottom-width: 0.285em;
border-bottom-color: inherit;
}
&:after {
border-top-width: 0.285em;
border-top-color: inherit;
}
i {
height: 0.6em;
}
}
.x-feature-box-graphic-inner.badge {
-webkit-transform: scale(0.725) rotate(15deg);
-ms-transform: scale(0.725) rotate(15deg);
transform: scale(0.725) rotate(15deg);
&:before,
&:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border: 0.5em solid;
border-color: inherit;
z-index: 1;
}
&:before {
@include rotate(30deg);
}
&:after {
@include rotate(60deg);
}
i {
position: relative;
z-index: 2;
&:before {
-webkit-transform: scale(1.275) rotate(-15deg);
-ms-transform: scale(1.275) rotate(-15deg);
transform: scale(1.275) rotate(-15deg);
}
}
}
//
// Connector.
//
.x-feature-box-connector {
display: block;
position: absolute;
width: 0;
margin: 0 auto;
z-index: 1;
&.full { height: 100%; top: 0.5em; }
&.upper { height: 50%; top: 0; }
&.lower { height: 50%; top: 50%; }
}
//
// Content.
//
.x-feature-box-title {
margin: 0;
font-size: 1.5em;
line-height: 1.2;
}
.x-feature-box-text {
margin: 8px 0 0;
a {
border: 0;
box-shadow: none;
}
}
// Feature List
// =============================================================================
.x-feature-list {
margin: 0 0 $baseMargin;
padding: 1px 0;
list-style: none;
counter-reset: xFeatureListNum;
//
// Child feature boxes.
//
.x-feature-box {
margin-bottom: 0;
counter-increment: xFeatureListNum;
&.top-text {
> div {
padding: 0 0 $baseMargin;
}
&:last-child {
> div {
padding-bottom: 0;
}
.full {
display: none;
}
}
}
&.middle-text {
> div {
padding: ($baseMargin / 2) 0;
}
&:first-child { margin-top: -($baseMargin / 2); }
&:last-child { margin-bottom: -($baseMargin / 2); }
&:first-child .upper,
&:last-child .lower {
display: none;
}
}
}
//
// Numbers.
//
.x-feature-box-graphic {
i.number:before {
content: counter(xFeatureListNum);
font-style: normal;
}
}
}