ayrisdev/forzaapk
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

smc

Browse Source
This commit is contained in:
mstfyldz
2026-02-16 18:52:45 +03:00
parent 0000e125aa
commit 192dfc2de8
2972 changed files with 1170986 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
smc/temp/scss/components/_accordion.scss Normal file
View File

@@ -0,0 +1,67 @@
.accordion {
margin-bottom: 50px;
.card {
box-shadow:none;
background: #f9f9f9;
.card-body,
.card-header {
background: #f9f9f9;
padding: 20px 30px;
@include respond("md") {
padding: 15px 40px 15px 15px;
}
}
button {
font-size: 18px;
color: #111;
font-weight: 500;
padding-left: 0;
&:focus,&:hover {
text-decoration: none;
}
&.small-text {
font-size: 16px;
a {color: #111;}
}
i {
font-size: 30px;
margin-right: 10px;
position: relative;
top:32px;
margin-right: 10px;
color: #333;
position: absolute;
left:33px;
}
span {
font-size: 11px;
color: #999;
font-weight: 400;
display: block;
}
&:after {
font-family: 'themify';
content: "\e61a";
font-size: 24px;
position: absolute;
right: 20px;
top:20px;
transform: rotate(223deg);
transition: all 0.5s ease;
@include respond("md") {
right: 10px;
}
}
&.small-text:after {top:33px; }
&.collapsed:after {
transform: rotate(0deg);
transition: all 0.5s ease;
}
}
p {
font-size: 15px;
line-height: 36px;
color: #666;
}
}
}

223
smc/temp/scss/components/_banner.scss Normal file
View File

@@ -0,0 +1,223 @@
.banner-wrapper {
.slide-wrapper {
.owl-stage-outer {
overflow: hidden;
}
}
.owl-stage-outer {
overflow: visible;
.owl-item {
opacity: 0.4;
&.active {
opacity: 1;
}
}
}
.owl-dots {
position: absolute;
margin-top: 0;
bottom:10px;
width: 100%;
.owl-dot span {margin:4px; }
.owl-dot.active span {background-color: var(--f7-theme-color);}
}
.banner-wrap {
border-radius:$banner-border-radius;
overflow: hidden;
float: left;
width: 100%;
position: relative;
background-color: #211813;
height: $banner-height;
display: flex;
flex-wrap: wrap;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
@include respond("xl") {
height: 400px;
}
@include respond("sm") {
height: 250px;
}
}
.left-wrap {
flex: 0 0 45%;
max-width: 45%;
position: relative;
padding: 0 0 0 50px;
@include respond("lg") {
padding: 0 0 0 15px;
}
@include respond("sm") {
flex: 0 0 100%;
max-width: 100%;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
width: 100%;
background:linear-gradient(to top, #211813, transparent);
}
h2 {
font-size: $banner-title-font-size;
text-transform: uppercase;
letter-spacing: 2px;
color: $banner-title-font-color;
font-weight: 700;
line-height: 1.1;
@include respond("xl") {
font-size: 50px;
}
@include respond("lg") {
font-size: 36px;
margin-top: 10px;
}
@include respond("sm") {
font-size: 26px;
margin-top: 10px;
}
}
p {
margin-top: 10px;
font-size: $banner-subtitle-font-size;
font-weight: 400;
color: $banner-subtitle-font-color;
line-height: 28px;
@include respond("xl") {
font-size: 13px;
line-height: 24px;
}
@include respond("lg") {
display: none;
}
}
a {
@include respond("lg") {
margin-top: 10px;
}
}
.tag {
font-size: $banner-tag-font-size;
color: $banner-tag-font-color;
margin-right: 15px;
@include respond("xl") {
font-size: 12px;
}
b {
color: #fff;
}
}
.rnd {
border:1px #ddd solid;
line-height: 20px;
padding: 0 10px;
border-radius:5px;
font-size: 10px;
font-weight: 500;
display: inline-block;
color: #fff;
}
.btn-lg {
color: $banner-btn-font-color;
background-color: var(--f7-theme-color);
min-width: $banner-btn-width;
line-height: $banner-btn-height;
font-size: $banner-btn-font-size;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
@include respond("xl") {
min-width: 150px;
font-size: 10px;
letter-spacing: 1px;
line-height: 30px;
}
img {
width: 20px;
margin-right: 10px;
position: relative;
top:-2px;
display: inline-block;
}
}
.icon-bttn {
margin-left: 20px;
line-height: 58px;
display: inline-block;
position: relative;
@include respond("sm") {
line-height: 30px;
right:20px;
position: absolute;
bottom:50px;
}
&:hover {
.share-icons {display: block;}
}
i {
font-size: 20px;
}
.share-icons {
display: none;
background-color: #eee;
border-radius: 4px;
position: absolute;
width: 130px;
right:-130px;
margin-left: 30px;
top:0;
height: 58px;
padding: 5px 10px;
i {
color: #999;
margin-right:15px;
font-size: 22px;
}
}
}
}
.right-wrap {
flex: 0 0 25%;
max-width: 55%;
position: relative;
height: 100%;
background-size: cover;
@include respond("sm") {
flex: 0 0 100%; max-width: 100%;
}
&:after {
content: '';
position: absolute;
left:0;
top:0;
width: 60%;
height: 100%;
background:linear-gradient(to right, #211813, transparent);
}
video {
height: 500px;
@include respond("sm") {
height: 250px;
}
}
}
.slide-wrapper {
padding:0 50px 30px;
background-color: #211813;
border-radius:0 0 7px 7px;
position: relative;
&:after {
content: '';
position: absolute;
left:0;
top:-50px;
width: 100%;
height: 50px;
background:linear-gradient(to top, #211813, transparent);
}
}
}

42
smc/temp/scss/components/_card.scss Normal file
View File

@@ -0,0 +1,42 @@
.card {
border: 0px solid $border-color;
margin-bottom: 30px;
border-radius: 5px;
box-shadow : 0px 36px 48px rgba(31, 66, 135, 0.04);
background: $white;
&-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $border-color;
background: $white;
padding: 20px 30px;
// margin : 0px 35px;
// @include respond("desktop") {
// padding: 10px;
// }
// @include custommq($min: 1200px, $max: 1350px) {
// padding: 10px 0px;
// }
}
&-title {
font-size: 24px;
margin-bottom: 0px;
// color: #ffffff;
// font-weight: 500;
}
.card-body {
padding: 20px 30px;
background: $white;
border-radius: 15px;
// @include respond("desktop") {
// padding: 10px;
// }
// @include custommq($min: 1200px, $max: 1350px) {
// padding: 10px 0px!important;
// }
}
}

17
smc/temp/scss/components/_category.scss Normal file
View File

@@ -0,0 +1,17 @@
.category-wrap {
display: block;
text-align: center;
width: 100%;
margin-bottom: 15px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
background-position:center center;
border-radius:$language-border-radius;
overflow: hidden;
span {
font-size: $language-post-title-size;
font-weight: 600;
color: $language-post-title-color;
letter-spacing: 1px;
line-height: $language-height;
}
}

18
smc/temp/scss/components/_components.scss Normal file
View File

@@ -0,0 +1,18 @@
@import "./card";
@import "./form";
@import "./dark";
@import "./header";
@import "./footer";
@import "./banner";
@import "./post";
@import "./category";
@import "./crew";
@import "./page-nav";
@import "./accordion";
@import "./member";
@import "./form-wrap";
@import "./settings";
@import "./landing-page";
@import "./owl-carousel";

17
smc/temp/scss/components/_crew.scss Normal file
View File

@@ -0,0 +1,17 @@
.crew-wrap {
position: relative;
text-align: center;
display: block;
img {
width: $crew-width !important;
height: $crew-width;
border-radius:$crew-width;
}
span {
color: $crew-post-title-color;
margin-top: 10px;
display: block;
font-weight: 500;
font-size: $language-post-title-size;
}
}

216
smc/temp/scss/components/_dark.scss Normal file
View File

@@ -0,0 +1,216 @@
// DARK THEME
:root {--f7-theme-color: #132977;}
.theme-dark {
background-color: #1a2236;
.member-ul li.active a b,
.price-wrap .left-price h2,
.form-div h2,
.slide-wrapper h2 {color: #eee;}
.header-wrapper .search-div {border:1px #555 solid;}
.header-wrapper .nav-menu li a {color: #ddd !important;}
.search-wrapper,
.accordion .card .card-body,
.accordion .card .card-header,
.form-div {background-color: #293145;}
.header-wrapper .logo {color: lightsteelblue;}
.price-wrap .middle-price h6,
.form-div p,
.form-div label p,
.form-div .sign-up-text {color: #ddd;}
.form-div label p a,
.form-div .sign-up-text a {color: #fff; margin-left: 5px; }
.navbar-toggler {color: rgba(255, 255, 255, 1);border-color: rgba(255, 255, 255, 1); }
.accordion .card button.small-text a,
.accordion .card button.small-text {color: #fff;}
.card-header {border-bottom: 0 solid #000;}
}
.theme-dark .header-wrapper .logo .light {display: none;}
.theme-dark .header-wrapper .logo .dark {display: inline-block;}
.color-theme-red {
--f7-theme-color: #ff3b30;
--f7-theme-color-rgb: 255, 59, 48;
--f7-theme-color-shade: #ff1407;
--f7-theme-color-tint: #ff6259
}
.color-theme-green {
--f7-theme-color: #4cd964;
--f7-theme-color-rgb: 76, 217, 100;
--f7-theme-color-shade: #2cd048;
--f7-theme-color-tint: #6ee081
}
.color-theme-blue {
--f7-theme-color: #132977;
--f7-theme-color-rgb: 33, 150, 243;
--f7-theme-color-shade: #1E74FD;
--f7-theme-color-tint: #1E74FD;
}
.color-theme-pink {
--f7-theme-color: #ff2d55;
--f7-theme-color-rgb: 255, 45, 85;
--f7-theme-color-shade: #ff0434;
--f7-theme-color-tint: #ff5676
}
.color-theme-yellow {
--f7-theme-color: #ffcc00;
--f7-theme-color-rgb: 255, 204, 0;
--f7-theme-color-shade: #d6ab00;
--f7-theme-color-tint: #ffd429
}
.color-theme-orange {
--f7-theme-color: #ff9500;
--f7-theme-color-rgb: 255, 149, 0;
--f7-theme-color-shade: #d67d00;
--f7-theme-color-tint: #ffa629
}
.color-theme-purple {
--f7-theme-color: #9c27b0;
--f7-theme-color-rgb: 156, 39, 176;
--f7-theme-color-shade: #7e208f;
--f7-theme-color-tint: #b92fd1
}
.color-theme-deeppurple {
--f7-theme-color: #673ab7;
--f7-theme-color-rgb: 103, 58, 183;
--f7-theme-color-shade: #563098;
--f7-theme-color-tint: #7c52c8
}
.color-theme-lightblue {
--f7-theme-color: #5ac8fa;
--f7-theme-color-rgb: 90, 200, 250;
--f7-theme-color-shade: #32bbf9;
--f7-theme-color-tint: #82d5fb
}
.color-theme-teal {
--f7-theme-color: #009688;
--f7-theme-color-rgb: 0, 150, 136;
--f7-theme-color-shade: #006d63;
--f7-theme-color-tint: #00bfad
}
.color-theme-lime {
--f7-theme-color: #cddc39;
--f7-theme-color-rgb: 205, 220, 57;
--f7-theme-color-shade: #bac923;
--f7-theme-color-tint: #d6e25c
}
.color-theme-deeporange {
--f7-theme-color: #ff6b22;
--f7-theme-color-rgb: 255, 107, 34;
--f7-theme-color-shade: #f85200;
--f7-theme-color-tint: #ff864b
}
.color-theme-gray {
--f7-theme-color: #8e8e93;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7
}
.color-theme-white {
--f7-theme-color: #ffffff;
--f7-theme-color-rgb: 255, 255, 255;
--f7-theme-color-shade: #ebebeb;
--f7-theme-color-tint: #ffffff
}
.color-theme-black {
--f7-theme-color: #000000;
--f7-theme-color-rgb: 0, 0, 0;
--f7-theme-color-shade: #000000;
--f7-theme-color-tint: #141414
}
.color-theme-brown {
--f7-theme-color: #D2691E;
--f7-theme-color-rgb: 255, 107, 34;
--f7-theme-color-shade: #f85200;
--f7-theme-color-tint: #ff864b
}
.color-theme-darkgreen {
--f7-theme-color: #228B22;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7
}
.color-theme-deeppink {
--f7-theme-color: #FFC0CB;
--f7-theme-color-rgb: 255, 255, 255;
--f7-theme-color-shade: #ebebeb;
--f7-theme-color-tint: #ffffff
}
.color-theme-darkorchid {
--f7-theme-color: #9932cc;
--f7-theme-color-rgb: 0, 0, 0;
--f7-theme-color-shade: #000000;
--f7-theme-color-tint: #141414
}
.full-wrap {
@media (min-width: 1599px) {
.container-fluid {
padding-left: 200px;
padding-right: 200px;
}
}
@media (max-width: 1600px) {
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
}
.owl-carousel .owl-stage-outer {
overflow: visible;
.owl-item {
opacity: 0.4;
}
.owl-item.active {
opacity: 1;
}
}
}
@media (min-width: 1200px) {
.service-wrapper .container-fluid {
padding-left: 200px;
padding-right: 200px;
.owl-carousel .owl-stage-outer {
overflow: visible;
.owl-item {
opacity: 0.4;
}
.owl-item.active {
opacity: 1;
}
}
}
}

116
smc/temp/scss/components/_footer.scss Normal file
View File

@@ -0,0 +1,116 @@
.footer-wrapper {
margin-top: 100px;
padding: 100px 0 10px;
background-color: #111;
@include respond("md") {
margin-top: 30px;
padding-top: 50px;
}
.icon-img{
height: 50px;
@include respond("sm") {
margin-bottom: 20px;
}
}
form {
overflow: hidden;
border-radius:2px;
input {
line-height: $footer-search-input-height;
width: 70%;
background-color: #fff;
border:0;
outline: none;
display: inline-block;
padding: 0 15px;
float: left;
font-size: 14px;
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
}
button {
text-transform: uppercase;
float: left;
width: 30%;
line-height: $footer-search-input-height;
text-align: center;
background-color: var(--f7-theme-color);
border:0;
outline: none;
color: #fff;
font-size: $footer-search-input-font-size;
font-weight: 600;
letter-spacing: 1px;
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
}
}
.copyright-text {
@include respond("md") {
text-align: center;
width: 100%;
margin-bottom: 5px;
}
}
h4 {
font-size: $footer-title-font-size;
line-height: 42px;
font-weight: 300;
color: $footer-title-font-color;
margin-bottom: 0;
@include respond("md") {
font-size: 20px;
line-height: 34px;
}
a {
font-size: 22px;
color: #fff;
font-weight: 500;
letter-spacing: 1px;
display: block;
text-decoration: underline;
margin-top: 20px;
}
}
p {
color: #999;
width: 60%;
font-size: 13px;
a {
color: #fff;
}
}
h5 {
font-weight: 500;
color: #ddd;
font-size: $footer-link-title-font-size;
letter-spacing: $footer-link-title-font-color;
text-transform: uppercase;
}
ul {
margin-bottom: 0;
margin-top: 20px;
li {
a {
color: $footer-link-font-color;
font-size: $footer-link-font-size;
line-height: 24px;
}
}
}
.middle-footer {
padding-top: 75px;
margin-top: 75px;
border-top: 1px #333 solid;
@include respond("md") {
padding-top: 50px; margin-top: 50px; padding-bottom: 0;
}
}
.lower-footer {
padding-top: 50px;
@include respond("md") {
padding-top: 0;
}
}
}

126
smc/temp/scss/components/_form-wrap.scss Normal file
View File

@@ -0,0 +1,126 @@
.form-wrapper {
min-height: calc(100vh - 90px);
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.form-div {
overflow: hidden;
padding: 40px;
box-shadow: 0 20px 61px rgba(65, 62, 101, 0.14);
border-radius: 10px;
background-color: #ffffff;
width: 100%;
h2 {
font-size: 42px;
font-weight: 700;
color: #111;
@include respond("sm") {
font-size: 36px;
}
}
p {
font-size: 14px;
line-height: 20px;
color: #666;
@include respond("sm") {
font-size: 14px;
}
}
.form-control {
padding-left: 28px;
margin-bottom: 20px;
color: #000;
font-size: 14px;
font-weight: 300;
letter-spacing: -0.56px;
height: 65px;
border-radius: 10px;
border: 1px solid #eae9f2;
background-color: #ffffff;
@include respond("sm") {
line-height: 55px;
height: 55px;
border-radius: 5px;
padding-left: 15px;
}
}
.form-check-label {
padding-top: 5px;
margin-bottom: 20px;
}
label {
display: -webkit-box;
display: flex;
input:checked{
~ .checkbox{
background-color: var(--f7-theme-color);
border:0;
&::before{
content: "\e64c";
font-family: 'themify';
color: #fff;
font-size: 16px;
}
}
}
p {
color: #696871;
font-size: 14px;
font-weight: 400;
line-height: 1;
margin-bottom: 0;
a {font-weight: 500; color: #000;}
}
}
.checkbox {
position: relative;
line-height: 1;
top: -2px;
margin-right: 8px;
min-height: 20px;
min-width: 20px;
cursor: pointer;
border:1px #ddd solid;
border-radius:3px;
}
.form-btn {
height: 60px;
border-radius: 7px;
background-color: var(--f7-theme-color);
width: 100%;
color: #ffffff;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
border:0;
line-height: 60px;
@include respond("sm") {
line-height: 55px;
height: 55px;
border-radius: 5px;
padding-left: 15px;
}
}
.collapse-bg {
background-color: var(--f7-theme-color)
}
.sign-up-text {
color: #696871;
font-size: 14px;
font-weight: 400;
line-height: 28px;
margin-top: 12px;
margin-bottom: 0;
}
}
::-webkit-input-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
::-moz-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
:-ms-input-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
:-moz-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}

522
smc/temp/scss/components/_form.scss Normal file
View File

@@ -0,0 +1,522 @@
.form-group {
// margin-bottom: 30px;
position : relative;
label {
font-size : 14px;
font-weight : 500;
color : $body-color;
margin-bottom: 10px;
background : transparent;
border-color : $border-color;
}
}
.form-control {
border-radius: 4px;
// height : 50px;
border : 1px solid transparent;
padding : 0px 15px;
font-size : 16px;
font-weight : 400;
color : $body-color;
transition : all 0.3s ease-in-out;
background : $body-bg;
.select {
padding: 12px 0;
}
span {
margin-top: 0;
}
&::-webkit-input-placeholder {
color: $body-color;
}
&:-ms-input-placeholder {
color: $body-color;
}
&::placeholder {
color: $body-color;
}
&:hover {
box-shadow : none !important;
outline : none;
border-color: $border-color;
color : $body-color;
background : $body-bg;
}
&:focus,
&:active,
&.active {
box-shadow : none !important;
outline : none;
border-color: $primary;
color : $body-color;
background : $body-bg;
}
}
input:-internal-autofill-selected {
background : lighten($body-bg, 2%) !important;
background-image: none !important;
color : -internal-light-dark-color(black, white) !important;
}
// span {
// margin-top : 20px;
// font-size : 18px;
// font-weight: 400;
// color : $text-muted;
// display : inline-block;
// }
.input-group-text {
// font-size : 20px !important;
padding : 5px 15px;
background : $body-bg;
margin-bottom : 0px !important;
color : $body-color;
border-color : transparent;
}
.input-group-append {
.input-group-text {
border-top-right-radius : 5px;
border-bottom-right-radius: 5px;
}
}
.input-group-prepend {
.input-group-text {
border-top-left-radius : 5px;
border-bottom-left-radius: 5px;
}
}
/*Styling Selectbox*/
//
.toggle {
cursor : pointer;
display : block;
// margin-bottom: 30px !important;
}
.toggle-switch {
display : inline-block;
background : darken($body-bg, 3%);
border-radius : 16px;
width : 45px;
height : 20px;
position : relative;
vertical-align: middle;
transition : background 0.25s;
&:before,
&:after {
content: "";
}
&:before {
display : block;
background : linear-gradient(to bottom, $white 0%, #eee 100%);
border-radius: 50%;
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
width : 17px;
height : 17px;
position : absolute;
top : 1px;
left : 3px;
transition : left 0.25s;
}
.toggle:hover &:before {
background : linear-gradient(to bottom, $white 0%, $white 100%);
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked+& {
background: $primary;
&:before {
left: 26px;
}
}
}
.toggle-checkbox {
position : absolute;
visibility: hidden;
}
.toggle-label {
margin-left: 15px;
position : relative;
top : 2px;
font-size : 16px;
font-weight: 400;
}
// Upload btn
.file-upload-wrapper {
position : relative;
width : 100%;
height : calc(1.5em + 1rem + 2px);
border : 1px solid $border-color;
border-radius: 5px;
color : $text-muted;
&:after {
content : attr(data-text);
// font-size : 18px;
position : absolute;
top : 0;
left : 0;
background : $body-bg;
padding : 4px 15px;
display : block;
width : calc(100% - 40px);
pointer-events: none;
z-index : 20;
height : calc(1.5em + 1rem + 2px);
line-height : 50px - 20px;
// color : #fff;
border-radius : 5px 10px 10px 5px;
font-weight : 400;
overflow : hidden;
}
&:before {
content : 'Upload';
position: absolute;
top : 0;
right : 0;
display : inline-block;
height : calc(1.5em + 1rem + 2px);
;
background : $primary;
color : $white;
font-weight : 400;
z-index : 25;
font-size : 14px;
line-height : 40px;
padding : 0 15px;
text-transform: capitalize;
pointer-events: none;
border-radius : 0 5px 5px 0;
}
&:hover {
&:before {
background: darken($primary, 10%);
}
}
input {
opacity : 0;
position: absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
z-index : 99;
height : calc(1.5em + 1rem + 2px);
margin : 0;
padding : 0;
display : block;
cursor : pointer;
width : 100%;
}
}
// Date picker
#ui-datepicker-div {
display : none;
background : darken($body-bg, 2%);
box-shadow : 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
margin-top : 0.25rem;
border-radius: 0.5rem;
padding : 0.5rem;
}
table {
border-collapse: collapse;
border-spacing : 0;
}
.ui-datepicker-calendar {
thead th {
padding : 0.25rem 0;
text-align : center;
font-size : 0.75rem;
font-weight: 400;
color : $body-color;
}
tbody td {
width : 2.5rem;
text-align: center;
padding : 0;
a {
display : block;
border-radius : 0.25rem;
line-height : 2rem;
transition : 0.3s all;
color : $body-color;
font-size : 0.875rem;
text-decoration: none;
&:hover {
background-color: $primary;
color : white;
}
&.ui-state-active {
background-color: $primary;
color : white;
}
}
}
}
.ui-datepicker-header a {
&.ui-corner-all {
cursor : pointer;
position : absolute;
top : 0;
width : 2rem;
height : 2rem;
margin : 0.5rem;
border-radius: 0.25rem;
transition : 0.3s all;
&:hover {
background-color: lighten($primary, 30%);
color : $white;
}
}
&.ui-datepicker-prev {
left : 0;
background : url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
background-repeat : no-repeat;
background-size : 0.5rem;
background-position: 50%;
transform : rotate(180deg);
}
&.ui-datepicker-next {
right : 0;
background : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
background-repeat : no-repeat;
background-size : 10px;
background-position: 50%;
}
>span {
display: none;
}
}
.ui-datepicker-title {
text-align : center;
line-height : 2rem;
margin-bottom : 0.25rem;
font-size : 0.875rem;
font-weight : 500;
padding-bottom: 0.25rem;
}
.ui-datepicker-week-col {
color : $body-color;
font-weight: 400;
font-size : 0.75rem;
}
// Validation Error
label.error {
color : $danger;
position : absolute;
bottom : 0;
margin-bottom: -22px;
font-size : 12px;
font-weight : 400;
}
// Nice Select
.nice-select {
display : flex;
align-items : center;
border-top-left-radius : 3px !important;
border-bottom-left-radius: 3px !important;
ul {
width: 100% !important;
}
}
.nice-select .list {
background: $dark;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
background-color: $dark;
color : $primary;
}
.form-hero {
padding: 40px 25px;
border-radius: 5px;
box-shadow:0px 30px 60px rgba(160, 159, 202, 0.45);
width: 100%;
background-color: #fff;
background-image: url(../images/paper-plane.png);
background-size: 100px;
background-position: top 10px right 10px;
background-repeat: no-repeat;
@include respond("tab-land") {
padding: 30px;
}
@include respond("tab-port") {
margin-top: 30px;
}
h2 {
font-size: 38px;
font-weight: bold;
margin-bottom: 10px;
@include respond("tab-port") {
font-size: 28px;
}
}
p {
color: #999;
font-size: 14px;
line-height: 28px;
padding: 0 20px;
}
input {
font-size: 14px;
line-height: 50px;
display: inline-block;
width: 100%;
border-radius:10px;
border:1px #ddd solid;
padding: 0 15px;
}
button {
font-size: 12px;
letter-spacing: 2px;
text-align: center;
line-height: 50px;
display: inline-block;
width: 100%;
border-radius:10px;
border:0px #ddd solid;
padding: 0 15px;
outline: none;
font-weight: bold;
}
}
.contact-form {
padding: 70px 100px 100px ;
border-radius: 10px;
box-shadow:0px 30px 60px rgba(160, 159, 202, 0.45);
width: 100%;
background-color: #fff;
position: relative;
top:-175px;
background-image: url(../images/paper-plane.png);
background-size: 100px;
background-position: top 50px right 50px;
background-repeat: no-repeat;
@include respond("tab-land") {
padding: 30px;
}
@include respond("tab-port") {
margin-top: 30px;
}
.form-group input[type=checkbox] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.form-group label {
position: relative;
cursor: pointer;
margin-bottom: 0;
margin-top: 10px;
}
.form-group label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid #0079bf;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
top: -1px;
}
.form-group input:checked + label:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 9px;
width: 6px;
height: 14px;
border: solid #0079bf;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
textarea,input {
font-size: 14px;
line-height: 60px;
display: inline-block;
width: 100%;
border-radius:10px;
border:1px #ddd solid;
padding: 0 15px;
}
textarea {}
button {
font-size: 12px;
letter-spacing: 2px;
text-align: center;
line-height: 60px;
display: inline-block;
width: 100%;
border-radius:10px;
border:0px #ddd solid;
padding: 0 15px;
outline: none;
font-weight: bold;
}
}

173
smc/temp/scss/components/_header.scss Normal file
View File

@@ -0,0 +1,173 @@
.header-wrapper {
padding: $header-padding 0;
background-color: $header-bg;
@include respond("lg") {
padding: 15px;
}
.logo {
float: left;
font-size: 26px;
font-weight: 700;
color: var(--f7-theme-color);
line-height: 20px;
position: relative;
top:-5px;
.dark {
display: none;
}
img {max-height: 25px; }
i {
margin-right: 0px;
font-size: 30px;
position: relative;
top:5px;
left:-0px;
}
}
.bttn {
background-color: #ffe4db;
width: 100px;
height: 40px;
line-height: 40px;
border-radius:5px;
color: #f27b51;
font-size: 14px;
font-weight: 400;
display: inline-block;
text-align: center;
}
.nav-menu {
display: inline-block;
float: left;
margin-left: 40px;
margin-top: 3px;
@include respond("lg") {
margin-left: 0; width: 100%; display: block;
}
li {
padding: 0 20px;
display: inline-block;
float: left;
@include respond("lg") {
padding: 15px 0; text-align: left; width: 95%;
}
a {
font-size: $header-menu-font-size;
line-height: 22px;
font-weight: 400;
color: $header-menu-font-color;
@include respond("lg") {
padding: 0;
}
}
}
&.style2 li a {color: #111; font-size: 15px; }
&.style2 li {float:none;}
&.style2 {width: 100%;}
}
.search-div {
float: right;
margin-right: 15px;
width: $header-search-width;
height: $header-search-height;
border-radius:$header-search-border-radius;
border:1px $header-search-border-color solid;
position: relative;
@include respond("xxl") {
width: 200px;
}
&:after {
font-family: 'themify';
content: "\e610";
position: absolute;
right:15px;
top:4px;
color: #aaa;
}
input {
border:0;
background-color: transparent;
outline: none;
line-height: 39px;
width: 100%;
padding: 0 15px;
font-size: 14px;
color: #999;
}
}
.user-avater {
position: relative;
float: right;
width: $header-avater-radius;
height: $header-avater-radius;
display: inline-block;
border-radius:$header-avater-radius;
img {
width: 100%;
display: inline-block;
position: relative;
z-index: 11;
border-radius:25px;
}
&:hover .user-menu {display: block;}
}
.user-menu {
display: none;
min-width: 160px;
border: 1px solid rgba(0,0,0, 0.12);
right:0;
top:100%;
background-color: #fff;
border-radius:5px;
position: absolute;
z-index: 10;
margin-top: 10px;
ul {
padding: 5px 0;
}
&:before {
top: -10px;
background-color: #fff;
border-color: transparent transparent rgba(0,0,0, 0.16) transparent;
border-width: 10px;
content: '';
display: block;
position: absolute;
right: 8px;
margin-top: -10px;
width: 0;
height: 0;
z-index: 30;
border-style: solid;
}
&:after {
top: -9px;
border-color: transparent transparent #fff transparent;
border-width: 10px;
content: '';
display: block;
position: absolute;
right: 8px;
margin-top: -10px;
width: 0;
height: 0;
z-index: 30;
border-style: solid;
}
a {
display: block;
font-weight: 400;
color: $header-menu-font-color;
padding: 10px 15px;
font-size: 14px;
i {
margin-right: 10px;
display: inline-block;
font-size: 16px;
}
}
}
}

389
smc/temp/scss/components/_landing-page.scss Normal file
View File

@@ -0,0 +1,389 @@
.feedback-wrap {
padding: 100px 0;
// background-color: #f8f9fb;
background:linear-gradient(to bottom, #d0dfff, #f0f4fc);
@include respond("md") {padding:70px 0 50px; }
h3 {
font-size: 16px;
font-weight: 600;
}
.quote {
color: var(--f7-theme-color);
position: absolute;
height: 60px;
width: 60px;
margin-left: 30px;
@include respond("md") {
margin-left: 15px;
margin-top: -20px;
}
}
.feedback-div {
width: 100%;
position: relative;
float: left;
margin-top:50px;
margin-bottom: 130px;
@include respond("md") {
margin-bottom: 50px;
}
h4 {
font-size: 26px;
line-height: 48px;
font-weight: 300;
color: #000;
display: block;
margin-bottom: 40px;
@include respond("lg") {
font-size: 22px; line-height: 42px;
}
@include respond("md") {
font-size: 18px; line-height: 36px;
}
}
.avater {
float: left;
position: relative;
width: 200px;
img {
width: 48px;
height: 48px;
float: left;
display: inline-block;
margin-right: 10px;
}
h6 {
font-size: 14px;
font-weight: 500;
color: #111;
display: block;
margin-top: 7px;
margin-bottom: 5px;
}
span {
display: block;
color: #aaa;
font-size: 11px;
}
}
}
.brand-icon{
img {
width: 70px;
}
}
.owl-dots {
position: absolute;
right:0;
bottom:130px;
.owl-dot.active span {
background-color: var(--f7-theme-color) !important;
}
span {
width: 8px !important;
height: 8px !important;
margin:4px !important;
}
}
}
.service-wrapper {
padding: 100px 0;
@include respond("md") {
padding-top: 50px;
padding-bottom: 50px;
}
.symptom .owl-stage-outer {overflow: visible;}
.slide-wrapper {
margin-top: 100px;
}
.mobile-banner {
width: 1000px;
@include respond("lg") {
width: 100%;
}
}
}
.banner-wraper {
padding: 100px 0 0;
position: relative;
&:after {
content: '';
background-color: #d0dfff;
// background:linear-gradient(to bottom, #d0dfff, #f0f4fc);
top:0;
left:0;
width: 100%;
height: 70%;
position: absolute;
z-index: -1;
@include respond("sm") {
height: 85%;
}
}
h2 {
font-size: 60px;
font-weight: 700;
line-height: 1.3;
color: var(--f7-theme-color);
@include respond("xxl") {
font-size: 50px;
line-height: 1.2;
}
@include respond("sm") {
font-size: 32px;
}
}
h4 {
font-weight: 500;
margin-top: 20px;
@include respond("xxl") {
font-size: 16px;
line-height: 26px;
}
}
.play-bttn {
width: 80px;
margin-bottom: 30px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: videobtn 1.9s linear infinite;
@include respond("sm") {
width: 65px;
height: 65px;
}
}
.banner-img {
max-width: 1200px;
margin-top: 50px;
@include respond("xxl") {
width: 100%;
}
}
form {
overflow: hidden;
border-radius:2px;
input {
line-height: 65px;
width: 70%;
background-color: #fff;
border:0;
outline: none;
display: inline-block;
padding: 0 15px;
float: left;
font-size: 14px;
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
}
button {
text-transform: uppercase;
float: left;
width: 30%;
line-height: 65px;
text-align: center;
background-color: var(--f7-theme-color);
border:0;
outline: none;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
}
}
}
.service-div {
background: #fff;
box-shadow: 0px 30px 60px rgba(160, 159, 202, 0.45);
padding: 40px;
border-radius: 5px;
position: relative;
margin-top: 0px;
min-height: auto;
@include respond("xxl") {
padding: 25px;
}
img {
width: 100px !important;
margin-bottom: 20px;
}
h4 {
font-size: 20px;
font-weight: bold;
}
p {
font-size: 14px;
line-height: 28px;
color: #666;
padding-right: 10%;
}
a {
font-size: 15px;
margin-bottom: 5px;
font-weight: 500;
display: block;
color: #999;
}
.map {
width: 70px !important;
position: relative;
left:-10px;
margin-bottom: 0 !important;
}
.icon-div {-webkit-box-sizing: content-box;box-sizing: content-box;width: 55px;height: 60px;position: relative;margin: 0px 0px 25px;font-size: 24px;-webkit-border-radius: 50% / 14%;border-radius: 50% / 14%;color: white;text-align: center;line-height: 64px;-o-text-overflow: clip;text-overflow: clip;z-index: 1;}
.icon-div i {font-size: 24px; }
.icon-div:before {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;content: "";top: 10%;right: -5.5%;bottom: 10%;left: -5%;border: none;-webkit-border-radius: 7% / 50%;border-radius: 7% / 50%;-o-text-overflow: clip;text-overflow: clip;text-shadow: none;z-index: -1;}
.icon-div.one-no:before,
.icon-div.one-no {background-color: #7142f8; }
.icon-div.two-no:before,
.icon-div.two-no {background-color: #fa4c9a; }
.icon-div.three-no:before,
.icon-div.three-no {background-color: #ecbf24; }
.icon-div.four-no:before,
.icon-div.four-no {background-color: #35bfe7; }
.icon-div.five-no:before,
.icon-div.five-no {background-color: #f38650; }
.icon-div.six-no:before,
.icon-div.six-no {background-color: #5cbd2c; }
}
.price-table {
padding-bottom: 120px;
@include respond("md") {
padding-bottom: 50px;
}
h4 {
font-size: 17px;
font-weight: bold;
color: #111;
margin-bottom: 20px;
}
span {
font-size: 13px;
line-height: 24px;
color: #666;
padding-right: 10%;
display: block;
}
p {
font-size: 14px;
line-height: 28px;
color: #222;
padding-right: 10%;
margin-bottom: 15px;
padding-left: 30px;
position: relative;
i {position: absolute; left:0; top:7px; }
}
.price-tab {
overflow: hidden;
padding: 40px 70px;
box-shadow: 0 20px 61px rgba(65, 62, 101, 0.14);
border-radius: 5px;
background-color: #ffffff;
width: 90%;
margin: 0 auto;
span {
font-size: 13px;
font-weight: 400;
color: #999;
line-height: 24px;
border-radius:3px;
&.active {
background-color: #ffe4db;
color: #f27b51;
display: inline-block;
text-align: center;
padding: 0 30px;
}
}
h2 {
font-size: 50px;
color: #333;
font-weight: 700;
margin-top: 30px;
margin-bottom: 30px;
i {
font-size: 20px;
font-weight: 500;
font-style: normal;
margin-right: 5px;
vertical-align: super;
}
b {
font-size: 14px;
font-weight: 600;
color: #444;
}
}
p {
padding: 0;
color: #777;
}
.btn {
margin-top: 20px;
width: 200px;
line-height: 60px;
border-radius:40px;
border:1px #ddd solid;
color: #666;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
left: 1px;
padding: 0;
display: inline-block;
&.active {
color: #fff;
background-color: var(--f7-theme-color);
border:0;
}
i {
position: relative;
top:2px;
font-size: 14px;
margin-left: 5px;
display: inline-block;
}
}
}
}
@keyframes videobtn{
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 10px rgba(255, 255, 255, 0.2),
0 0 0 30px rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2),
0 0 0 30px rgba(255, 255, 255, 0.2),
0 0 0 50px rgba(7255, 255, 255, 0);
}
}
@keyframes videobtn_red{
0% {
box-shadow: 0 0 0 0 rgba(236, 57, 139, 0.1),
0 0 0 10px rgba(236, 57, 139, 0.2),
0 0 0 50px rgba(236, 57, 139, 0.3);
}
100% {
box-shadow: 0 0 0 10px rgba(236, 57, 139, 0.2),
0 0 0 50px rgba(236, 57, 139, 0.2),
0 0 0 100px rgba(236, 57, 139, 0);
}
}

183
smc/temp/scss/components/_member.scss Normal file
View File

@@ -0,0 +1,183 @@
.member-ul {
position: relative;
overflow: hidden;
margin-bottom: 40px;
margin-top: 40px;
li {
width: 33.3%;
float: left;
text-align: center;
position: relative;
&:first-child {
@include respond("sm") {
text-align: left;
}
}
&:last-child {
@include respond("sm") {
text-align: right;
}
}
&:nth-child(2n) {
&:after,
&:before {
width: 100px;
height: 2px;
background-color: #ddd;
content: '';
position: absolute;
top:28px;
left:-25%;
@include respond("sm") {
width: 30px;
}
}
&:after {right:-25%; left:auto;}
}
&.active a span {color: #fff; background-color:var(--f7-theme-color); }
&.active a b {color: #222;}
a {
span {
letter-spacing: 2px;
width: 60px;
height: 60px;
background-color: #eee;
border-radius:50px;
text-align: center;
color: #111;
font-size: 16px;
font-weight: 600;
display: inline-block;
text-align: center;
line-height: 60px;
}
b {
font-weight: 700;
letter-spacing: 1px;
font-size: 13px;
color: #999;
display: block;
margin-top: 15px;
text-transform: uppercase;
@include respond("sm") {
display: none;
}
}
}
}
}
.price-wrap {
position: relative;
width: 100%;
float: left;
.left-price {
float: left;
position: relative;
text-align: center;
width: 30%;
@include respond("sm") {
width: 100%;
margin-bottom: 25px;
}
h2 {
font-size: 50px;
font-weight: 300;
color: #111;
margin:5px 0 0;
i {
font-style: normal;
font-size: 28px;
vertical-align: super;
}
}
h4 {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
color: #999;
text-transform: uppercase;
}
}
.middle-price {
float: left;
position: relative;
text-align: center;
width: 45%;
@include respond("sm") {
width: 100%;
}
&:after {
width: 2px;
height: 60px;
background-color: #eee;
content: '';
position: absolute;
left:0;
top:30%;
@include respond("sm") {
display: none;
}
}
h6 {
font-size: 14px;
color: #666;
line-height: 38px;
font-weight: 400;
margin-bottom: 0;
i {
width: 18px;
height: 18px;
border-radius:20px;
display: inline-block;
background-color: green;
color: #fff;
font-size: 12px;
margin-right: 10px;
position: relative;
top:-2px;
text-align: center;
line-height: 18px;
}
}
}
.right-price {
float: left;
position: relative;
text-align: center;
width: 25%;
@include respond("sm") {
width: 100%;
}
.btn {
margin-top: 50px;
width: 140px;
height: 45px;
background-color: var(--f7-theme-color);
border-radius:5px;
color: #fff;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
line-height: 45px;
padding: 0;
@include respond("sm") {
margin-top: 25px;
}
}
span {
display: block;
font-size: 11px;
width: 100%;
line-height: 26px;
font-style: italic;
font-weight: 400;
color: #999;
}
}
}

18
smc/temp/scss/components/_owl-carousel.scss Normal file
View File

@@ -0,0 +1,18 @@
.owl-theme .owl-nav [class*='owl-']:hover {
background-color: transparent !important;
}
.owl-theme .owl-nav [class*='owl-']:focus {
outline: none !important;
border:none !important;
}
.owl-nav {
position: absolute;
top:-75px;
right:0;
button{
margin:0 !important;
}
img {
width: 35px;
}
}

40
smc/temp/scss/components/_page-nav.scss Normal file
View File

@@ -0,0 +1,40 @@
.page-nav {
padding-top: $pagenav-padding;
padding-bottom: $pagenav-padding;
@include respond("md") {
padding-top: 50px;
padding-bottom: 50px;
}
span {
color: #aaa;
font-size: $pagenav-post-subtitle-size;
}
h2 {
font-size: $pagenav-post-title-size;
font-weight: 700;
color: $pagenav-post-title-color;
@include respond("lg") {
font-size: 36px;
}
@include respond("md") {
font-size: 28px;
}
@include respond("sm") {
font-size: 25px;
margin-bottom: 10px !important;
}
}
p {
font-size: $pagenav-post-subtitle-size;
line-height: 28px;
color: $pagenav-post-subtitle-color;
padding: 0 10%;
@include respond("xxl") {
padding: 0;
}
@include respond("lg") {
font-size: 12px;
line-height: 22px;
}
}
}

218
smc/temp/scss/components/_post.scss Normal file
View File

@@ -0,0 +1,218 @@
.slide-wrapper {
h2 {
color: $slider-headline-color;
font-size: $slider-headline-size;
font-weight: 600;
margin-bottom: 0;
margin:10px 0;
@include respond("sm") {
font-size: 18px;
margin-bottom: 0;
margin-top: 0;
}
}
.read-more {
font-size: 13px;
font-weight: 500;
color: #333;
}
.slide-one {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
border-radius:$slider-border-radius;
overflow: hidden;
position: relative;
background-color: #211813;
display: block;
width: 100%;
&:hover {
.slide-image {
&:after {height: 20%;}
&:before {opacity: 1; }
}
}
&:after {
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color:rgba(33, 24, 19,0.2)
}
.slide-image {
position: relative;
@include respond("sm") {
height: 130px;
}
img {width: 100%;}
&:before {
content: '';
width: 50px;
height: 50px;
background-color: var(--f7-theme-color);
top:50%;
left:50%;
opacity: 0;
margin-left: -25px;
position: absolute;
background-size: 25px;
background-position:center right 10px;
border-radius:40px;
background-repeat: no-repeat;
background-image: url(../images/play.png);
z-index: 3;
transition: all 0.4s ease;
@include respond("sm") {
background-color: transparent; opacity: 1; right:30px; bottom:15px !important; width: 25px; height: 25px; border-radius:0; top:auto; left:auto; background-size: 20px; background-position: center right 8px;
}
}
&:after {
content: '';
position: absolute;
left:0;
bottom:0;
width: 100%;
height: 30%;
background:linear-gradient(to top, #211813, transparent);
transition: all 0.4s ease;
@include respond("sm") {
height: 80%;
}
}
}
.slide-content {
padding: 15px 18px;
position: relative;
z-index: 2;
@include respond("sm") {
padding: 10px;
position: absolute;
bottom:0;
left:0;
width: 100%;
}
h2 {
font-size: $slider-post-title-size;
font-weight: 600;
color: $slider-post-title-color;
margin-bottom: 10px;
@include respond("sm") {
font-size: 15px; line-height: 1.3; margin-bottom: 8px;
}
img {
width: $slider-post-icon-size;
float: right;
}
}
p {
font-size: $slider-post-subtitle-size;
color: $slider-post-subtitle-color;
margin-bottom: 5px;
}
.tag {
font-size: $slider-post-subtitle-size;
color: $slider-post-subtitle-color;
margin-right: 15px;
b {
color: #fff;
}
}
}
}
.slide-two {
.slide-image {
height: 200px;
background-size: cover;
background-position: center center;
border-radius:6px;
overflow: hidden;
&:before {
content: '';
width: 40px;
height: 40px;
top:auto;
bottom:18px;
left:35px;
margin-left: -25px;
background-size: 20px;
background-position:center right 8px;
border-radius:40px;
background-repeat: no-repeat;
position: absolute;
opacity: 1;
background-image: url(../images/play.png);
z-index: 3;
@include respond("sm") {
bottom:15px !important;
}
}
&:after {
content: '';
position: absolute;
left:0;
bottom:0;
width: 100%;
height: 50%;
background:linear-gradient(to top, #211813, transparent);
transition: all 0.4s ease;
}
}
.slide-content {
position: absolute;
bottom:0;
width: 100%;
left: 0;
padding: 15px 10px 10px 60px;
z-index: 2;
h2 {
margin-bottom: 0;
font-size: 16px;
}
.tag {
position: relative;
top:-2px;
margin-right: 5px;
}
}
}
.slide-three {
.slide-image {
&:before {
background-color: transparent;
content: '';
top:auto;
bottom: 28px;
right: 37px;
left:auto;
margin-left: -25px;
position: absolute;
background-size: 20px;
background-image: url(../images/play.png);
z-index: 3;
}
}
.slide-content {
position: absolute;
bottom:0;
width: 100%;
left: 0;
padding: 15px 10px 10px 15px;
z-index: 2;
h2 {
margin-bottom: 0;
font-size: 16px;
}
.tag {
position: relative;
top:-2px;
margin-right: 5px;
}
}
}
}

212
smc/temp/scss/components/_settings.scss Normal file
View File

@@ -0,0 +1,212 @@
.backdrop {
position: fixed;
top:0;
z-index: -1;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.0);
opacity: 0;
transition:all .3s ease;
&.active {
z-index: 999;
background-color: rgba(0,0,0,0.7);
opacity: 0.7;
}
&.open {
z-index: 999;
background-color: rgba(0,0,0,0.95);
opacity: 0.95;
}
}
.switchcolor {
z-index: 1000;
position: fixed;
cursor: pointer;
top:20%;
right:0;
background-color: #fff;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
width: 60px;
height: 60px;
text-align: center;
border-radius: 5px 0px 0px 5px;
padding: 12px;
transition:all .3s ease;
&.active {
right:-60px;
}
img {
opacity: 0.5;
width: 100%;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
}
.switchcolor-wrap {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
top:20%;
right:-330px;
background-color: #fff;
z-index: 1000;
position: fixed;
padding: 20px 20px 30px 20px;
width: 330px;
border-radius: 5px 0px 0px 5px;
transition:all .3s ease;
&.active {
right:0px;
}
h2 {
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000;
font-size: 60px;
letter-spacing: 2px;
font-weight: 700;
}
h4 {
margin-top: 25px;
font-size: 16px;
margin-bottom: 20px;
display: block;
color: #222;
font-weight: 600;
}
ul {
overflow: hidden;
li {
display: inline-block;
float: left;
margin-right: 8px;
.item-content {
display: inline;
padding-left: 0;
position: relative;
.ti-check {
left: 13px;
top: 1px !important;
&:before {
color: #fff ;
opacity: 0;
}
}
}
}
}
.circle-color {
width: 40px;
height: 40px;
border-radius:50px;
display: inline-block;
cursor: pointer;
}
label.item-radio input[type=radio] {
display: none;
}
label.item-radio input[type=radio]:checked~.ti-check:before {
opacity: 1;
}
label.item-radio input[type=radio]~.ti-check {
position: absolute;
top: 50%;
margin-top: -11px;
right: calc(var(--f7-safe-area-right) + 10px);
}
.toggle-div {
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border: 1px #eee solid;
}
.sheet-close{
position: absolute;
top:15px;
right: 10px;
color: #444;
i {
font-size: 20px;
}
}
}
.toggle {
display: inline-block;
vertical-align: middle;
position: relative;
box-sizing: border-box;
align-self: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
input[type=checkbox] {
display: none;
}
.toggle-icon {
z-index: 0;
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
transition: .3s;
box-sizing: border-box;
display: block;
cursor: pointer;
width: 40px;
height: 22px;
border-radius: 20px;
border:1px #ddd solid;
background: #fff;;
&:before {
content: '';
position: absolute;
left: 2px;
top: 2px;
height: calc(20px - 4px);
width: calc(20px - 4px);
border-radius: 18px;;
box-sizing: border-box;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
z-index: 1;
transition-duration: .3s;
transform: scale(1);
}
&:after {
height: calc(20px - 4px);
width: calc(20px - 4px);
top: 2px;
left: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
border-radius: calc(20px - 4px);
background: #fff;
position: absolute;
z-index: 2;
transform: translateX(0px);
transition-duration: .3s;
content: '';
}
}
}
.toggle input[type=checkbox]:checked+.toggle-icon {
background: #ff3b30;;
}
.toggle input[type=checkbox]:checked+.toggle-icon:after {
transform: translateX(20px);
}
.toggle input[type=checkbox]:checked+.toggle-icon:before {
opacity: 0;
}
@-webkit-keyframes fa-spin {0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}