smc
This commit is contained in:
mstfyldz
2
smc/temp/scss/abstract/_abstract.scss
Normal file
2
smc/temp/scss/abstract/_abstract.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "./variable";
|
||||
@import "./color";
|
||||
169
smc/temp/scss/abstract/_color.scss
Normal file
169
smc/temp/scss/abstract/_color.scss
Normal file
@@ -0,0 +1,169 @@
|
||||
|
||||
.theme-dark {
|
||||
background-color: #1a2236;
|
||||
.app-content {
|
||||
background-color: #1a2236;
|
||||
&:before {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background-color: #293145 !important;
|
||||
}
|
||||
.app-footer {
|
||||
background-color: #293145 !important;
|
||||
border-top: 0;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.app-header .logo svg path {
|
||||
fill: #fff;
|
||||
}
|
||||
.app-header .menu-icon i {
|
||||
color: #fff;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {color: #fff !important;}
|
||||
}
|
||||
|
||||
.color-theme-red {
|
||||
---theme-color: #ff3b30;
|
||||
---theme-color-rgb: 255, 59, 48;
|
||||
---theme-color-shade: #ff1407;
|
||||
---theme-color-tint: #ff6259
|
||||
}
|
||||
|
||||
.color-theme-green {
|
||||
---theme-color: #4cd964;
|
||||
---theme-color-rgb: 76, 217, 100;
|
||||
---theme-color-shade: #2cd048;
|
||||
---theme-color-tint: #6ee081
|
||||
}
|
||||
|
||||
.color-theme-blue {
|
||||
---theme-color: #05f;
|
||||
---theme-color-rgb: 33, 150, 243;
|
||||
---theme-color-shade: #09f;
|
||||
---theme-color-tint: #1E74FD;
|
||||
}
|
||||
|
||||
.color-theme-pink {
|
||||
---theme-color: #ff2d55;
|
||||
---theme-color-rgb: 255, 45, 85;
|
||||
---theme-color-shade: #ff0434;
|
||||
---theme-color-tint: #ff5676
|
||||
}
|
||||
|
||||
.color-theme-yellow {
|
||||
---theme-color: #ffcc00;
|
||||
---theme-color-rgb: 255, 204, 0;
|
||||
---theme-color-shade: #d6ab00;
|
||||
---theme-color-tint: #ffd429
|
||||
}
|
||||
|
||||
.color-theme-orange {
|
||||
---theme-color: #ff9500;
|
||||
---theme-color-rgb: 255, 149, 0;
|
||||
---theme-color-shade: #d67d00;
|
||||
---theme-color-tint: #ffa629
|
||||
}
|
||||
|
||||
.color-theme-purple {
|
||||
---theme-color: #9c27b0;
|
||||
---theme-color-rgb: 156, 39, 176;
|
||||
---theme-color-shade: #7e208f;
|
||||
---theme-color-tint: #b92fd1
|
||||
}
|
||||
|
||||
.color-theme-deeppurple {
|
||||
---theme-color: #673ab7;
|
||||
---theme-color-rgb: 103, 58, 183;
|
||||
---theme-color-shade: #563098;
|
||||
---theme-color-tint: #7c52c8
|
||||
}
|
||||
|
||||
.color-theme-lightblue {
|
||||
---theme-color: #5ac8fa;
|
||||
---theme-color-rgb: 90, 200, 250;
|
||||
---theme-color-shade: #32bbf9;
|
||||
---theme-color-tint: #82d5fb
|
||||
}
|
||||
|
||||
.color-theme-teal {
|
||||
---theme-color: #009688;
|
||||
---theme-color-rgb: 0, 150, 136;
|
||||
---theme-color-shade: #006d63;
|
||||
---theme-color-tint: #00bfad
|
||||
}
|
||||
|
||||
.color-theme-lime {
|
||||
---theme-color: #cddc39;
|
||||
---theme-color-rgb: 205, 220, 57;
|
||||
---theme-color-shade: #bac923;
|
||||
---theme-color-tint: #d6e25c
|
||||
}
|
||||
|
||||
.color-theme-deeporange {
|
||||
---theme-color: #ff6b22;
|
||||
---theme-color-rgb: 255, 107, 34;
|
||||
---theme-color-shade: #f85200;
|
||||
---theme-color-tint: #ff864b
|
||||
}
|
||||
|
||||
.color-theme-gray {
|
||||
---theme-color: #8e8e93;
|
||||
---theme-color-rgb: 142, 142, 147;
|
||||
---theme-color-shade: #79797f;
|
||||
---theme-color-tint: #a3a3a7
|
||||
}
|
||||
|
||||
.color-theme-white {
|
||||
---theme-color: #ffffff;
|
||||
---theme-color-rgb: 255, 255, 255;
|
||||
---theme-color-shade: #ebebeb;
|
||||
---theme-color-tint: #ffffff
|
||||
}
|
||||
|
||||
.color-theme-black {
|
||||
---theme-color: #000000;
|
||||
---theme-color-rgb: 0, 0, 0;
|
||||
---theme-color-shade: #000000;
|
||||
---theme-color-tint: #141414
|
||||
}
|
||||
|
||||
.color-theme-brown {
|
||||
---theme-color: #5d463d;
|
||||
---theme-color-rgb: 255, 107, 34;
|
||||
---theme-color-shade: #5d463d;
|
||||
---theme-color-tint: #5d463d
|
||||
}
|
||||
|
||||
.color-theme-darkgreen {
|
||||
---theme-color: #228B22;
|
||||
---theme-color-rgb: 142, 142, 147;
|
||||
---theme-color-shade: #79797f;
|
||||
---theme-color-tint: #a3a3a7
|
||||
}
|
||||
|
||||
.color-theme-deeppink {
|
||||
---theme-color: #12baaf;
|
||||
---theme-color-rgb: 255, 255, 255;
|
||||
---theme-color-shade: #6ae2da;
|
||||
---theme-color-tint: #6ae2da
|
||||
}
|
||||
|
||||
.color-theme-darkorchid {
|
||||
---theme-color: #9932cc;
|
||||
---theme-color-rgb: 0, 0, 0;
|
||||
---theme-color-shade: #000000;
|
||||
---theme-color-tint: #141414
|
||||
}
|
||||
|
||||
.inter-font {font-family: 'Inter', sans-serif;}
|
||||
.mont-font {font-family: 'Montserrat', sans-serif;}
|
||||
.lato-font {font-family: 'Lato', sans-serif;}
|
||||
.dm-font {font-family: 'DM Serif Display', serif; }
|
||||
.play-font {font-family: 'Playfair Display', serif;}
|
||||
|
||||
|
||||
|
||||
185
smc/temp/scss/abstract/_variable.scss
Normal file
185
smc/temp/scss/abstract/_variable.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- C O L O R ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
|
||||
//to ignore cli warning about deprecated mixin
|
||||
// $enable-deprecation-messages: false;
|
||||
// $ignore-warning : true;
|
||||
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$primary : #1E74FD !default;
|
||||
$secondary : #673BB7 !default;
|
||||
$success : #10d876 !default;
|
||||
$info : #2754e6 !default;
|
||||
$warning : #FE9431 !default;
|
||||
$danger : #E50202 !default;
|
||||
$light : #f7f7f7 !default;
|
||||
$dark : #343a40;
|
||||
|
||||
// Body
|
||||
$body-bg : #fff;
|
||||
$body-color: #515184;
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- FONT WEIGHT ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
$fw-100: 100 !default;
|
||||
$fw-200: 200 !default;
|
||||
$fw-300: 300 !default;
|
||||
$fw-400: 400 !default;
|
||||
$fw-500: 500 !default;
|
||||
$fw-600: 600 !default;
|
||||
$fw-700: 700 !default;
|
||||
$fw-800: 800 !default;
|
||||
$fw-900: 900 !default;
|
||||
|
||||
$fws: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$fws: map-merge(
|
||||
(
|
||||
"100": $fw-100,
|
||||
"200": $fw-200,
|
||||
"300": $fw-300,
|
||||
"400": $fw-400,
|
||||
"500": $fw-500,
|
||||
"600": $fw-600,
|
||||
"700": $fw-700,
|
||||
"800": $fw-800,
|
||||
"900": $fw-900
|
||||
),
|
||||
$fws
|
||||
);
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- F O N T S ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
// Google Font
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
|
||||
|
||||
|
||||
|
||||
|
||||
$headings-font-weight : 400;
|
||||
|
||||
$font-size-base : 1rem;
|
||||
$font-weight-base : 400 !default;
|
||||
|
||||
|
||||
$h1-font-size : 24px;
|
||||
$h2-font-size : 20px;
|
||||
$h3-font-size : 18px;
|
||||
$h4-font-size : 16px;
|
||||
$h5-font-size : 14px;
|
||||
$h6-font-size : 12px;
|
||||
|
||||
|
||||
$display1-size : 70px;
|
||||
$display2-size : 56px;
|
||||
$display3-size : 42px;
|
||||
$display4-size : 34px;
|
||||
|
||||
$text-muted : #AEAED5;
|
||||
$colors : () !default;
|
||||
|
||||
$heading-primary-size: 1.8rem;
|
||||
$sub-heading-size : 1.6rem !default;
|
||||
$grid-gutter-width : 30px;
|
||||
$dropdown-lik-color : $body-color;
|
||||
$border-color : #E1E1F0;
|
||||
$headings-color :#111 !default;
|
||||
$grid-breakpoints : (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400);
|
||||
$container-max-widths: (sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1199px) !default;
|
||||
|
||||
$input-btn-focus-width: 0rem !default;
|
||||
$border-radius-base : 4px !default;
|
||||
|
||||
$shadow-color: rgba(160, 159, 202, 0.15);
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- HEADER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$header-bg:transparent;
|
||||
$header-padding:20px;
|
||||
$header-menu-font-size:16px;
|
||||
$header-menu-font-color:#888;
|
||||
$header-avater-radius:35px;
|
||||
$header-search-height:40px;
|
||||
$header-search-width:250px;
|
||||
$header-search-border-radius:5px;
|
||||
$header-search-border-color:#ddd;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- BANNER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$banner-height:500px;
|
||||
$banner-border-radius:7px;
|
||||
$banner-title-font-color:#fff;
|
||||
$banner-title-font-size:68px;
|
||||
$banner-subtitle-font-color:#fff;
|
||||
$banner-subtitle-font-size:14px;
|
||||
$banner-tag-font-color:#ddd;
|
||||
$banner-tag-font-size:14px;
|
||||
$banner-btn-height:40px;
|
||||
$banner-btn-width:200px;
|
||||
$banner-btn-font-size:13px;
|
||||
$banner-btn-font-color:#fff;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- SLIDER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$slider-border-radius:6px;
|
||||
$slider-headline-size:22px;
|
||||
$slider-headline-color:#222;
|
||||
$slider-post-title-size:18px;
|
||||
$slider-post-title-color:#fff;
|
||||
$slider-post-subtitle-size:12px;
|
||||
$slider-post-subtitle-color:#ddd;
|
||||
$slider-post-icon-size:20px;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- PAGE NAV ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$pagenav-padding:100px;
|
||||
$pagenav-post-title-size:46px;
|
||||
$pagenav-post-title-color:#111;
|
||||
$pagenav-post-subtitle-size:14px;
|
||||
$pagenav-post-subtitle-color:#666;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- LANGUAGE ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$language-border-radius:6px;
|
||||
$language-height:120px;
|
||||
$language-post-title-size:14px;
|
||||
$language-post-title-color:#fff;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- CREW ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$crew-width:150px;
|
||||
$crew-post-title-size:14px;
|
||||
$crew-post-title-color:#222;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- FOOTER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$footer-title-font-color:#ddd;
|
||||
$footer-title-font-size:24px;
|
||||
$footer-search-input-height:50px;
|
||||
$footer-search-input-font-size:12px;
|
||||
$footer-link-title-font-size:11px;
|
||||
$footer-link-title-font-color:#ddd;
|
||||
$footer-link-font-size:12px;
|
||||
$footer-link-font-color:#999;
|
||||
10
smc/temp/scss/base/_base.scss
Normal file
10
smc/temp/scss/base/_base.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "./reset";
|
||||
@import "./mixins";
|
||||
@import "./fonts";
|
||||
@import "./preloader";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
0
smc/temp/scss/base/_fonts.scss
Normal file
0
smc/temp/scss/base/_fonts.scss
Normal file
131
smc/temp/scss/base/_mixins.scss
Normal file
131
smc/temp/scss/base/_mixins.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
//MEDIA QUERY MANAGER
|
||||
// 0 - 500: Phone
|
||||
// 500 - 900: Tablet portrait
|
||||
// 900 - 1200: Tablet landscape
|
||||
// 1200 - 1800: Normal styles
|
||||
// 1800+ : Big Desktop
|
||||
// 1em = 16px
|
||||
// The smaller device rules always should write below the bigger device rules
|
||||
// Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
|
||||
@mixin respond($breakpoint) {
|
||||
@if($breakpoint=="sm") {
|
||||
@media only screen and (max-width: 576px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="md") {
|
||||
@media only screen and (max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="lg") {
|
||||
@media only screen and (max-width: 992px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($breakpoint=="xl") {
|
||||
@media only screen and (max-width: 1200px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="xxl") {
|
||||
@media only screen and (max-width: 1400px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @if($breakpoint=="tab-port-up") {
|
||||
// @media only screen and (min-width: 991px) {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
//don't use it untill you need this too much
|
||||
@mixin custommq($min: null, $max: null) {
|
||||
@if ($min !=null and $max !=null) {
|
||||
@media only screen and (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($min==null and $max !=null) {
|
||||
@media only screen and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($min !=null and $max==null) {
|
||||
@media only screen and (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $gray, $value in $grays {
|
||||
.text-grey-#{$gray} {color:#{$value} !important;}
|
||||
}
|
||||
|
||||
@each $fw, $value in $fws {
|
||||
.fw-#{$fw} {font-weight:#{$value} !important;}
|
||||
}
|
||||
@each $color, $value in $theme-colors {
|
||||
.swatch-#{$color} {
|
||||
background-color: color-yiq($value);
|
||||
}
|
||||
}
|
||||
.pt150 {
|
||||
padding-top: 150px;
|
||||
}
|
||||
|
||||
@mixin webkit-box() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
@mixin box-flex() {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
@mixin box-orient() {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
%avater {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
overflow: hidden;
|
||||
@include border-radius(50%);
|
||||
margin-right: 1em;
|
||||
img {width: 100%;}
|
||||
}
|
||||
|
||||
@mixin avater($radius) {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
height: $radius;
|
||||
width: $radius;
|
||||
overflow: hidden;
|
||||
@include border-radius(50%);
|
||||
margin-right: 1em;
|
||||
img {width: 100%;}
|
||||
}
|
||||
14
smc/temp/scss/base/_preloader.scss
Normal file
14
smc/temp/scss/base/_preloader.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
// PRELOADER
|
||||
.preloader {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
background-color: #ffffff;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../images/preloader.svg);
|
||||
background-size: 80px;
|
||||
}
|
||||
82
smc/temp/scss/base/_reset.scss
Normal file
82
smc/temp/scss/base/_reset.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.75;
|
||||
|
||||
&.fixed {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
|
||||
font-weight:$headings-font-weight;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
// color : $td;
|
||||
text-decoration: none;
|
||||
outline : none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
text-decoration: none;
|
||||
outline : none;
|
||||
color : $primary;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong,
|
||||
.strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
opacity : 1;
|
||||
transition : all 0.25s ease-in;
|
||||
overflow : hidden;
|
||||
position : relative;
|
||||
z-index : 1;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left : 65px;
|
||||
margin-top : 18px;
|
||||
margin-right : 6px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
|
||||
67
smc/temp/scss/components/_accordion.scss
Normal file
67
smc/temp/scss/components/_accordion.scss
Normal 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
223
smc/temp/scss/components/_banner.scss
Normal 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
42
smc/temp/scss/components/_card.scss
Normal 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
17
smc/temp/scss/components/_category.scss
Normal 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
18
smc/temp/scss/components/_components.scss
Normal 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
17
smc/temp/scss/components/_crew.scss
Normal 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
216
smc/temp/scss/components/_dark.scss
Normal 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
116
smc/temp/scss/components/_footer.scss
Normal 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
126
smc/temp/scss/components/_form-wrap.scss
Normal 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
522
smc/temp/scss/components/_form.scss
Normal 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
173
smc/temp/scss/components/_header.scss
Normal 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
389
smc/temp/scss/components/_landing-page.scss
Normal 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
183
smc/temp/scss/components/_member.scss
Normal 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
18
smc/temp/scss/components/_owl-carousel.scss
Normal 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
40
smc/temp/scss/components/_page-nav.scss
Normal 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
218
smc/temp/scss/components/_post.scss
Normal 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
212
smc/temp/scss/components/_settings.scss
Normal 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)}}
|
||||
130
smc/temp/scss/main.scss
Normal file
130
smc/temp/scss/main.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
|
||||
/*-----------------------------------------------------------
|
||||
Theme Name: Starapp
|
||||
Theme URI: http://html.aonecolor.com/Starapp/
|
||||
Description: Mobile Template
|
||||
Version: 1.0.0
|
||||
-------------------------------------------------------------*/
|
||||
|
||||
/*-----------------------------------------------------------
|
||||
Table of Content:
|
||||
|
||||
|
||||
2. Bootstrap CSS
|
||||
1. Abstract
|
||||
3. Base
|
||||
4. Component
|
||||
5. Pages
|
||||
7. Header
|
||||
8. Footer
|
||||
|
||||
|
||||
|
||||
*/
|
||||
@import "./abstract/abstract";
|
||||
@import "./../vendor/bootstrap/scss/bootstrap.scss";
|
||||
@import "./../vendor/owl-carousel/css/owl.carousel.min.css";
|
||||
@import "./../vendor/owl-carousel/css/owl.theme.default.css";
|
||||
|
||||
@import "./base/base";
|
||||
@import "./components/components";
|
||||
|
||||
|
||||
body {font-family: "Montserrat", sans-serif;}
|
||||
|
||||
.search-wrapper {
|
||||
padding: 100px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
@include respond("lg") {
|
||||
padding: 50px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar-toggler {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
height: 40px;
|
||||
@include respond("lg") {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
width: 27px;
|
||||
height: 2px;
|
||||
background-color: #999;
|
||||
position: relative;
|
||||
top:-2px;
|
||||
&:after {
|
||||
content: '';
|
||||
width: 27px;
|
||||
height: 2px;
|
||||
background-color: #999;
|
||||
position: absolute;
|
||||
top:-8px;
|
||||
left:0;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
width: 27px;
|
||||
height: 2px;
|
||||
background-color: #999;
|
||||
position: absolute;
|
||||
bottom:-8px;
|
||||
left:0;
|
||||
}
|
||||
|
||||
}
|
||||
.search-wrap-slide {
|
||||
.owl-nav {display: none;}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar-collapse {
|
||||
display: flex !important;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.md-mb25 {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.footer-wrapper p {
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-nav > li {border-bottom: 1px solid #E1E1F0;margin: 0 15px;padding: 7px 15px; display: block; width: 100%; padding: 20px; }
|
||||
.header-wrapper .user-avater,
|
||||
.header-wrapper .search-div,
|
||||
.header-wrapper .bttn {display: none; }
|
||||
.header-wrapper.posfixed {padding: 15px; position: fixed; top:0; left:0; width: 100%; z-index: 100; background-color: #fff; }
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.middle-footer .col-lg-2 {margin-bottom: 25px; }
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {bottom:50px; }
|
||||
.pt150 {padding-top: 70px; }
|
||||
.col-xs-6 { flex: 0 0 50%; max-width: 50%; }
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.banner-wrapper .slide-wrapper,
|
||||
.slide-wrapper .slide-one .slide-content .tag,
|
||||
.slide-wrapper .slide-one .slide-content p,
|
||||
.banner-wrapper .left-wrap a {display: none; }
|
||||
|
||||
.owl-nav {top:-63px; right: 100px;}
|
||||
.slide-wrapper .slide-slider-full,
|
||||
.category-slider,
|
||||
.slide-wrapper .slide-slider {width: 130%;}
|
||||
.banner-wrapper .left-wrap div.icon-bttn {right: 25%; }
|
||||
.banner-wrapper .owl-dots{display: none; }
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user