File: /www/wwwroot/www.cytocare.cn/wp-content/themes/peakshops/assets/sass/_utilities.scss
@mixin min-break($size) {
@media only screen and (min-width: $size) { @content; }
}
@mixin max-break($size) {
@media only screen and (max-width: $size) { @content; }
}
@mixin input-placeholder {
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
@mixin ie11() {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @content; }
}
@mixin firefox() {
@-moz-document url-prefix() { @content; }
}
@mixin text-fill-color($value) {
-webkit-text-fill-color: $value;
-moz-text-fill-color: $value;
-o-text-fill-color: $value;
-ms-text-fill-color: $value;
text-fill-color: $value;
}
@mixin text-stroke-color($value) {
-webkit-text-stroke-color: $value;
-moz-text-stroke-color: $value;
-o-text-stroke-color: $value;
-ms-text-stroke-color: $value;
text-stroke-color: $value;
}
@mixin text-stroke-width($value) {
-webkit-text-stroke-width: $value;
-moz-text-stroke-width: $value;
-o-text-stroke-width: $value;
-ms-text-stroke-width: $value;
text-stroke-width: $value;
}
.reset {
margin: 0;
padding: 0;
list-style: none;
}
.cf {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.object-fit {
object-fit: cover;
width: 100%;
height: 100%;
}
.endcolumn {
[class*="column"] + [class*="column"]:last-child {
float: left;
}
}
.transition {
transition: all 1s $transition;
}
.quick-transition {
transition: all .25s $transition;
}
.mid-transition {
transition: all .5s $transition;
}
.general-shadow-styles {
&.small-shadow {
@include box-shadow(0 2px 7px rgba(0,0,0,0.1));
}
&.medium-shadow {
@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
}
&.large-shadow {
@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
}
&.xlarge-shadow {
@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
}
}
.admin-style {
.admin-bar & {
top: 0;
@media screen and (min-width: 601px){
top: 46px;
}
@media screen and (min-width: 783px){
top: 32px;
}
}
}
.thb-custom-scroll {
overflow: hidden;
position: relative;
}
.flex-video {
margin: 0 0 20px;
position: relative;
&.widescreen {
.vc_video-aspect-ratio-235 & {
padding-bottom: 42.5%;
}
}
.wp-video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100% !important;
.plyr--video,
.plyr__video-wrapper {
height: 100%;
}
}
}
.wpb_text_column {
p {
&:last-child {
margin-bottom: 0;
}
}
}
.cover-bg {
flex-direction: column;
background-position: center;
background-size: cover;
}
.no-padding {
margin: 0;
&>.columns {
padding: 0;
}
@include min-break($break-small) {
padding: 0;
}
}
.medium-text-right {
@include min-break($break-small) {
.rtl & {
text-align: left;
}
}
}
.medium-text-left {
@include min-break($break-small) {
.rtl & {
text-align: right;
}
}
}
.columns {
.vc_editor.compose-mode .vc_element> & {
width: 100%;
max-width: 100%;
}
.vc_column-inner {
width: 100%;
height: 100%;
@extend .general-shadow-styles;
}
&.thb-light-column {
color: #e6e6e6;
// Headings
h1,h2,h3,h4,h5,h6,
label,
.wpb_text_column a {
color: #fff;
}
// Form Elements.
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
background: #fff;
border-color: #fff;
&:focus {
border-color: #fff;
}
}
.post .post-title a {
color: #fff;
}
// Social Links.
.thb-social-links-element {
&.style1 .thb-social-link {
color: #fff;
}
&.style2 .thb-social-link:not(:hover) {
background: #fff;
color: $black;
}
&.style4 .thb-social-link:not(:hover) {
border: 1px solid rgba(#fff,0.3);
color: #fff;
}
}
// Title Element.
.thb_title {
&.style1 .thb_title_inner:before,
&.style1 .thb_title_inner:after {
border-color: #fff;
}
&.style1 .left_brackets,
&.style1 .right_brackets {
fill: #fff;
}
&.style4 .thb_title_inner:before,
&.style4 .thb_title_inner:after,
&.style6 .thb_title_inner:before,
&.style6 .thb_title_inner:after,
&.style7 .thb_title_inner:before,
&.style7 .thb_title_inner:after {
background: #fff;
}
&.style3 .thb_title_icon:before,
&.style3 .thb_title_icon:after {
border-color: rgba(#fff,0.1);
}
&.style2 .thb_title_inner {
@include box-shadow(inset 0 -3px 0 0 #fff);
}
&.style3 .thb_title_icon svg,
&.style10 .thb_title_icon svg {
path,
circle,
rect,
ellipse {
stroke: #fff;
}
}
&.style5 {
border-top-color: #fff;
border-bottom-color: rgba(#fff,0.1);
}
&.style9 {
.thb_title_inner {
background: #fff;
h2 {
color: $black;
}
}
}
&.style11 {
border-bottom-color: rgba(#fff,0.25);
}
&.style12 {
.thb_title_inner:before,
.thb_title_inner:after {
background-color: rgba(#fff,0.25);
}
}
&.style14 {
h2 {
&:after {
background: #fff;
}
}
}
}
.thb-iconbox figure svg path, .thb-iconbox figure svg circle, .thb-iconbox figure svg rect, .thb-iconbox figure svg ellipse {
stroke: #fff;
}
.tag-cloud-link {
color: rgba(#fff,0.8);
border-color: rgba(#fff,0.1);
&:hover {
border-color: #fff;
color: #fff;
}
}
// Buttons.
.btn-text {
@extend .light-button-text;
}
.btn-block {
color: #fff;
&:hover {
color: #fff;
}
}
// Carousel.
.thb-carousel {
.slick-dots li {
border-color: #fff;
&:not(.slick-active) {
button {
background: #fff;
}
}
}
.slick-nav span:after,
.slick-nav span:before {
background: #fff;
}
}
// Accordions.
.thb-accordion {
.vc_tta-panel-heading h4 a {
color:#fff;
}
&.style1 {
.vc_tta-panel {
border-top-color: rgba(255,255,255,0.15);
}
}
&.style2 {
.vc_tta-panel-heading:before {
color: rgba(#fff,0.55);
}
.vc_tta-panel-heading h4 a:after {
background: #fff;
}
}
}
.thb-accordion.style1 .vc_tta-panel-heading h4 a:after,
.thb-accordion.style1 .vc_tta-panel-heading h4 a:before {
background: rgba(#fff,0.55);
}
.thb-accordion.style3 .vc_tta-panel-heading h4 a:after,
.thb-accordion.style3 .vc_tta-panel-heading h4 a:before {
background: rgba(#fff,0.55);
}
.thb-accordion.style3 .vc_tta-panel {
border-color: rgba(#fff,0.25);
}
.thb-accordion.style3 .vc_tta-panel.active {
background: #1c1c1c;
}
// Tabs.
.thb-tabs {
&.style1,
&.style2 {
.thb-tab-menu {
border-bottom-color: rgba(#fff,0.25);
}
}
&.style3 {
.thb-tab-menu {
border-right-color: rgba(#fff,0.25);
}
}
&.style4 {
.thb-tab-menu {
border-bottom-color: rgba(#fff,0.25);
.vc_tta-panel-heading a.active {
color: #fff;
border-left-color: rgba(#fff,0.25);
border-right-color: rgba(#fff,0.25);
border-bottom-color: transparent;
}
}
}
}
// Horizontal List.
.thb-horizontal-list {
border-bottom-color: rgba(#fff,0.25);
}
// Counters.
.thb-counter {
color: #fff;
.h1 {
color: #fff;
}
}
// Food Menu.
.thb-menu-item {
.thb-menu-item-parent {
.thb-menu-price {
color: #fff;
}
.thb-menu-line {
border-color: #fff;
}
}
.thb-menu-description {
color: #fff;
}
}
// Pricing Table.
.thb-pricing-table {
&.style1 {
.thb-pricing-column {
.pricing-container {
background: transparent;
.thb_pricing_head {
border-color: rgba(#fff,0.4);
}
.pricing-description {
color: #fff;
}
}
}
}
&.style2 {
.thb_pricing_head .pricing_sub_title,
.thb_pricing_head .thb-price {
border-color: rgba(#fff,0.25);
}
}
&.style3 {
.pricing-container {
border-color: rgba(#fff,0.4);
}
.thb-pricing-footer {
background: transparent;
border-top-color: rgba(#fff,0.4);
}
}
}
// Team Members.
.thb-team-member {
&.member_style1 {
h6,
.job-title {
color: #fff;
}
}
&.member_style4 {
h6 {
color: #fff;
}
}
}
// Page Menu.
.thb-page-menu {
&.style1 {
li {
a {
border-top-color: rgba(#fff,0.25);
border-left-color: rgba(#fff,0.25);
border-right-color: rgba(#fff,0.25);
}
&:last-child {
a {
border-bottom-color: rgba(#fff,0.25);
}
}
}
}
&.style2 {
li {
border-bottom-color: rgba(#fff,0.25);
}
}
}
// Products.
.products {
.product {
.woocommerce-loop-product__title a {
color: #fff;
}
.price ins, .price>.amount {
color: #fff;
}
&.thb-listing-style1 {
}
&.thb-listing-style2 {
.thb-product-inner-wrapper {
border-color: rgba(#fff,0.25);
}
}
&.thb-listing-style3 {
.thb-product-inner-wrapper {
&:after {
@include box-shadow(0 2px 12px rgba(#fff,0.25));
}
}
&:hover .thb-product-inner-wrapper {
border-color: rgba(#fff,0.1);
}
}
}
}
}
}
.light-button-text {
color: #fff;
&.style1 {
&:before {
background: rgba(#fff,0.35);
}
&:hover {
color: #fff;
&:before {
background: rgba(#fff,1);
}
}
}
&.style2 {
&:before {
background: rgba(#fff,0.35);
}
&:after {
background: rgba(#fff,1);
}
}
&.style3 {
&:hover {
color: #fff;
}
span:after {
background: rgba(#fff,1);
}
}
&.style4 {
&:hover {
color: #fff;
}
svg {
&:nth-child(2n) {
fill: #fff;
}
}
}
&.style5 {
&:hover {
color: #fff;
}
svg,
svg .bar {
fill: #fff;
}
}
}
/* 5 Columns */
// 1/5
.small-1\/5 {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.thb-5,
.medium-1\/5 {
@include min-break($break-small) {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
.large-1\/5 {
@include min-break($break-medium) {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
// 2/5
.small-2\/5 {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.thb-5-2,
.medium-2\/5 {
@include min-break($break-small) {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
}
.large-2\/5 {
@include min-break($break-medium) {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
}
// 3/5
.small-3\/5 {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
.thb-5-3,
.medium-3\/5 {
@include min-break($break-small) {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
.large-3\/5 {
@include min-break($break-medium) {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
/* Others */
.thb-fixed {
@include min-break( $break-small ) {
position: -webkit-sticky;
position: sticky;
top: 40px;
.admin-bar & {
top: 86px;
}
}
.admin-bar & {
@media screen and ( min-width: 783px ){
top: 72px;
}
}
.fixed-header-on.fixed-header-scroll-off & {
@include min-break( $break-small ) {
top: 60px;
}
}
.fixed-header-on.fixed-header-scroll-off.admin-bar & {
@include min-break( $break-small ) {
top: 126px;
}
@media screen and (min-width: 783px){
top: 112px;
}
}
}
/* Padding Sizes */
.thb-padding-sizes {
&.regular-padding {
.columns {
margin-bottom: 20px;
@include min-break($break-small) {
margin-bottom: 30px;
}
}
}
&.mini-padding {
margin: 0 -5px;
.columns {
padding: 0 5px;
margin-bottom: 10px;
}
}
&.small-padding {
margin: 0 -3px;
.columns {
padding: 0 3px;
margin-bottom: 6px;
}
}
&.pixel-padding {
margin: 0 -1px;
.columns {
padding: 0 1px;
margin-bottom: 2px;
}
}
&.no-padding {
margin: 0;
.columns {
padding: 0;
margin-bottom: 0;
}
}
}
/* Lazy Load */
.lazyload,
.lazyloading {
opacity: 0.3;
@include filter(blur(5px));
}
.lazyloaded {
opacity: 1;
@include transition(opacity .25s $transition);
}
/* Material Spinner */
.material-spinner {
animation: material-rotator 1.4s linear infinite;
.material-path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation:
material-dash 1.4s ease-in-out infinite,
material-colors 5.6s ease-in-out infinite;
}
@keyframes material-rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
@keyframes material-colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes material-dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
}
/* Google */
iframe {
max-width: 100%;
overflow: hidden;
}
.adsbygoogle {
max-width: 100%;
overflow: hidden;
}
.thb-loading:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 30;
background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjMjIyMjIyIj4KICA8cGF0aCBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4KICA8cGF0aCBkPSJNMTYgMCBBMTYgMTYgMCAwIDEgMzIgMTYgTDI4IDE2IEExMiAxMiAwIDAgMCAxNiA0eiI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZnJvbT0iMCAxNiAxNiIgdG89IjM2MCAxNiAxNiIgZHVyPSIwLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L3BhdGg+Cjwvc3ZnPgo=') center center no-repeat;
}
/* Scroll Arrow */
.scroll-bottom {
position: absolute !important;
bottom: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
text-align: center;
z-index: 30;
cursor: pointer;
&.style1 {
&:before {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 1px;
background: $black;
will-change: transform;
@include transform-origin(0,0);
@extend .quick-transition;
}
&>div {
position: relative;
display: inline-block;
height: 50px;
width: 1px;
&:before {
content: '';
width: 10px;
height: 1px;
background: $black;
position: absolute;
bottom: 30%;
right: 0;
will-change: transform;
@include transform(rotateZ(45deg) scaleX(0));
@include transform-origin(100%,100%);
@extend .quick-transition;
}
&:after {
content: '';
width: 10px;
height: 1px;
background: $black;
position: absolute;
bottom: 30%;
left: 2px;
will-change: transform;
@include transform(rotateZ(-45deg) scaleX(0));
@include transform-origin(0,100%);
@extend .quick-transition;
}
}
&:hover {
&:before {
@include scaleY(0.7);
}
&>div {
&:before {
@include transform(rotateZ(45deg) scaleX(1));
@include transition-delay(0.1s);
}
&:after {
@include transform(rotateZ(-45deg) scaleX(1));
@include transition-delay(0.1s);
}
}
}
.single-portfolio.light-title &,
&.light {
&:before,
&>div:before,
&>div:after {
background: #fff;
}
}
} // .style1
&.style2 {
bottom: 15px;
border-radius: 14px;
border: 2px solid rgba($black,0.4);
@extend .quick-transition;
@include scale(0.75);
@include min-break($break-small) {
bottom: 30px;
@include scale(1);
}
&:hover {
border-color: rgba($black,0.8);
}
div {
position: absolute;
top: 8px;
left: 12px;
width: 2px;
height: 4px;
background: $black;
border-radius: 4px;
@include animation(thb-scrollanimation 2s infinite);
}
.single-portfolio.light-title &,
&.light {
border-color: rgba(255,255,255,0.4);
div {
background: #fff;
}
&:hover {
border-color: rgba(255,255,255,0.8);
}
}
} // .style2
&.style3 {
&>div {
position: relative;
display: inline-block;
height: 50px;
width: 1px;
&:before {
content: '';
width: 16px;
height: 2px;
background: $black;
position: absolute;
bottom: 50%;
right: 1px;
will-change: transform;
@include transform(rotateZ(45deg) scaleX(0.75));
@include transform-origin(100%,100%);
@extend .quick-transition;
}
&:after {
content: '';
width: 16px;
height: 2px;
background: $black;
position: absolute;
bottom: 50%;
left: 1px;
will-change: transform;
@include transform(rotateZ(-45deg) scaleX(0.75));
@include transform-origin(0,100%);
@extend .quick-transition;
}
}
&:hover {
&>div {
&:before {
@include transform(rotateZ(45deg) scaleX(1));
@include transition-delay(0.1s);
}
&:after {
@include transform(rotateZ(-45deg) scaleX(1));
@include transition-delay(0.1s);
}
}
}
.single-portfolio.light-title &,
&.light {
&>div:before,
&>div:after {
background: #fff;
}
}
} // .style3
&.style4 {
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0;
margin-left: -40px;
border-style: solid;
border-width: 0 40px 40px 40px;
border-color: transparent transparent $black transparent;
@extend .quick-transition;
&>div {
position: absolute;
display: inline-block;
height: 40px;
width: 1px;
top: 20px;
left: 0;
&:before {
content: '';
width: 16px;
height: 1px;
background: #fff;
position: absolute;
bottom: 50%;
right: 1px;
will-change: transform;
@include transform(rotateZ(45deg) scaleX(0.75));
@include transform-origin(100%,100%);
@extend .quick-transition;
}
&:after {
content: '';
width: 16px;
height: 1px;
background: #fff;
position: absolute;
bottom: 50%;
left: 1px;
will-change: transform;
@include transform(rotateZ(-45deg) scaleX(0.75));
@include transform-origin(0,100%);
@extend .quick-transition;
}
}
&.light {
border-color: transparent transparent #fff transparent;
>div {
&:before,
&:after {
background: $black;
}
}
}
&:active {
@include rotateX(-20deg);
transform-style: preserve-3d;
transform-origin: 0 100%;
}
} // .style4
}
@include keyframes(thb-scrollanimation) {
0% { height: 5px; }
50% { height: 24px; }
100% { height: 5px; }
}
/* Animation */
.perspective-wrap {
@include perspective(3000px);
}
.animation {
will-change: opacity, transform;
opacity: 0;
@include animation(none);
&.bottom-to-top {
@include animation(none);
@include translateY(30px);
}
&.top-to-bottom {
@include animation(none);
@include translateY(-30px);
}
&.left-to-right {
@include animation(none);
@include translateX(-30px);
}
&.right-to-left {
@include animation(none);
@include translateX(30px);
}
&.left-to-right-3d {
@include animation(none);
transform-origin: 100% 100%;
transform-style: preserve-3d;
@include transform(rotateX(-25deg) rotateY(-15deg) translate3d(-60px,-10px,0));
}
&.right-to-left-3d {
@include animation(none);
transform-origin: 0% 100%;
transform-style: preserve-3d;
@include transform(rotateX(-25deg) rotateY(15deg) translate3d(60px,-10px,0));
}
&.bottom-to-top-3d {
@include animation(none);
transform-style: preserve-3d;
@include transform(rotateX(-45deg) translateY(120px));
}
&.bottom-to-top-3d-small {
@include animation(none);
transform-style: preserve-3d;
@include transform(rotateX(-45deg) translateY(60px));
}
&.top-to-bottom-3d {
@include animation(none);
transform-style: preserve-3d;
@include transform(rotateX(45deg) translateY(-120px));
}
&.top-to-bottom-3d-small {
@include animation(none);
transform-style: preserve-3d;
@include transform(rotateX(45deg) translateY(-60px));
}
&.scale {
@include animation(none);
@include scale(0.8);
}
.vc_editor & {
opacity: 1;
@include transform(none);
}
}
.vc_empty_space {
clear: both;
}