Initial commit
This commit is contained in:
Timon Ostertun
35
client/scss/components/_accordion.scss
Normal file
35
client/scss/components/_accordion.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
/*Accordion Settings*/
|
||||
.accordion {
|
||||
* {
|
||||
outline: 0 !important;
|
||||
box-shadow: 0px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn {
|
||||
&:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
transition: all 0ms ease !important;
|
||||
}
|
||||
button {
|
||||
transition: all 0ms ease !important;
|
||||
}
|
||||
[data-card-height] {
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.accordion-btn {
|
||||
text-align: left !important;
|
||||
padding: 15px 17px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.accordion-icon {
|
||||
float: right;
|
||||
transition: all 250ms ease;
|
||||
margin-top: 5px;
|
||||
}
|
||||
82
client/scss/components/_add-to-home.scss
Normal file
82
client/scss/components/_add-to-home.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
/*---Added to Home---*/
|
||||
.add-to-home-visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
.add-to-home {
|
||||
.close-add-to-home {
|
||||
pointer-events: none;
|
||||
}
|
||||
position: fixed;
|
||||
background-color: $color_black;
|
||||
z-index: 99;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
border-radius: 10px;
|
||||
height: 80px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 250ms ease;
|
||||
h1 {
|
||||
position: absolute;
|
||||
padding-left: 75px;
|
||||
padding-top: 8px;
|
||||
color: $color_white;
|
||||
font-size: 13px;
|
||||
}
|
||||
p {
|
||||
color: $gray-400;
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
padding-right: 20px;
|
||||
padding-left: 75px;
|
||||
padding-top: 35px;
|
||||
line-height: 14px;
|
||||
}
|
||||
img {
|
||||
width: 45px;
|
||||
margin-top: 17px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.add-to-home-ios {
|
||||
bottom: 25px;
|
||||
i {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
left: 50%;
|
||||
bottom: -18px !important;
|
||||
margin-left: -21px;
|
||||
transform: rotate(180deg);
|
||||
color: $color_black;
|
||||
display: block;
|
||||
}
|
||||
.close-add-to-home {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 13px;
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
}
|
||||
.add-to-home-android {
|
||||
top: 20px;
|
||||
i {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: 15px;
|
||||
font-size: 30px;
|
||||
margin-left: -20px;
|
||||
color: $color_black;
|
||||
display: block;
|
||||
}
|
||||
.close-add-to-home {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 20px;
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
}
|
||||
85
client/scss/components/_ads.scss
Normal file
85
client/scss/components/_ads.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
/*Ads*/
|
||||
.ad-300x50 {
|
||||
margin: 0 auto;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
.ad-300x250 {
|
||||
margin: 0 auto;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
.ad-300x50-fixed {
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
bottom: 60px;
|
||||
bottom:calc(65px + (constant(safe-area-inset-bottom))*1.1)!important;
|
||||
bottom:calc(65px + (env(safe-area-inset-bottom))*1.1)!important;
|
||||
position: fixed;
|
||||
z-index: 90;
|
||||
}
|
||||
.ad-time-close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
border: solid 2px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
/*Scroll Fixed Ads*/
|
||||
.scroll-ad-visible {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
.is-on-homescreen {
|
||||
.scroll-ad {
|
||||
bottom: 110px;
|
||||
}
|
||||
}
|
||||
.scroll-ad {
|
||||
position: fixed;
|
||||
bottom: 75px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
background-color: $color-white;
|
||||
z-index: 93;
|
||||
height: 80px;
|
||||
box-shadow: $shadow-xs;
|
||||
border-radius: $rounded-sm;
|
||||
transform: translateY(150%);
|
||||
transition: $globalTransitions;
|
||||
img {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
padding: 7px 0px 0px 80px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
em {
|
||||
padding: 0px 85px 0px 80px;
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
display: block;
|
||||
line-height: 15px;
|
||||
}
|
||||
a {
|
||||
width: 60px;
|
||||
font-size: 9px;
|
||||
right: 15px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 5px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
48
client/scss/components/_alerts.scss
Normal file
48
client/scss/components/_alerts.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
$alertBtnColor: transparent;
|
||||
$alertBtnColor2: rgba(255,255,255,0.2);
|
||||
|
||||
.alert {
|
||||
h4 {
|
||||
padding-left: 47px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
span {
|
||||
background-color: $alertBtnColor;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
span {
|
||||
background-color: $alertBtnColor2;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
width: 47px;
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
strong {
|
||||
padding-left: 47px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
70
client/scss/components/_back-to-top.scss
Normal file
70
client/scss/components/_back-to-top.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
/*Back to Top*/
|
||||
.content {
|
||||
.back-to-top-badge {
|
||||
transform: translate(0,0) !important;
|
||||
width: 130px;
|
||||
margin: 10px auto 20px auto !important;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
display: block;
|
||||
position: relative !important;
|
||||
}
|
||||
.back-to-top-icon {
|
||||
transform: scale(1,1) translate(0,0px) !important;
|
||||
margin: 0px auto 30px auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
display: block;
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
.back-to-top-badge {
|
||||
position: fixed;
|
||||
z-index: 90;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 70px);
|
||||
display: inline-block;
|
||||
padding: 5px 20px;
|
||||
border-radius: 35px;
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
transition: $globalTransitions;
|
||||
i {
|
||||
padding: 0px 10px 0px 0px;
|
||||
}
|
||||
}
|
||||
.back-to-top-icon {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: 70px;
|
||||
right: 15px;
|
||||
display: inline-block;
|
||||
width: 35px;
|
||||
line-height: 35px;
|
||||
border-radius: 35px;
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
transform: scale(0,0);
|
||||
transition: $globalTransitions;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.back-to-top-badge.back-to-top-visible {
|
||||
transform: translate(-50%, 0px);
|
||||
}
|
||||
.back-to-top-icon.back-to-top-visible {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.back-to-top-icon-square {
|
||||
border-radius: 0px;
|
||||
}
|
||||
.back-to-top-icon-round {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.back-to-top-icon-circle {
|
||||
border-radius: 40px;
|
||||
}
|
||||
38
client/scss/components/_buttons.scss
Normal file
38
client/scss/components/_buttons.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
/*Buttons*/
|
||||
.btn{transition:$globalTransitions;}
|
||||
.btn:hover{opacity:0.9}
|
||||
.btn-full{display:block;}
|
||||
|
||||
.btn-xxs, .btn-xs, .btn-s, .btn-sm, .btn-m, .btn-l{font-size:12px!important;}
|
||||
|
||||
.btn-xxs{padding:$btn-xxs!important;}
|
||||
.btn-xs{padding:$btn-xs!important;}
|
||||
.btn-s{padding:$btn-s!important;}
|
||||
.btn-sm{padding:$btn-sm!important;}
|
||||
.btn-m{padding:$btn-m!important;}
|
||||
.btn-l{padding:$btn-l!important;}
|
||||
.btn-xl{padding:$btn-xl!important; font-size:15px!important;}
|
||||
.btn-xxl{padding:$btn-xxl!important; font-size:17px!important;}
|
||||
.btn-uppercase{text-transform:uppercase;}
|
||||
.btn-center-xs{width:$btn-center-xs; margin:0 auto; display:block;}
|
||||
.btn-center-s{width:$btn-center-s; margin:0 auto; display:block;}
|
||||
.btn-center-m{width:$btn-center-m; margin:0 auto; display:block;}
|
||||
.btn-center-l{width:$btn-center-l; margin:0 auto; display:block;}
|
||||
.btn-center-xl{width:$btn-center-xl; margin:0 auto; display:block;}
|
||||
.btn.bg-highlight{color:#FFF;}
|
||||
.btn-3d{transition: all 150ms ease; border:none; border-bottom:solid 4px;}
|
||||
.btn-3d:hover{border-width:2px!important; }
|
||||
.btn:focus{outline:none!important;}
|
||||
.btn-margins{margin-left:17px; margin-right:17px; margin-bottom:$globalMargin;}
|
||||
.under-slider-btn{z-index:50; position:relative; margin-top:-20px;}
|
||||
.btn-icon:hover{color:#FFF;}
|
||||
.btn-icon{padding-left:50px!important; overflow:hidden; position:relative;}
|
||||
.btn-icon i{
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
line-height:43px;
|
||||
width:40px;
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.1);
|
||||
}
|
||||
164
client/scss/components/_cards.scss
Normal file
164
client/scss/components/_cards.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
$card-over-bg-zindex:2;
|
||||
$card-under-bg-zindex:1;
|
||||
|
||||
/*Extending Cards Features*/
|
||||
.row{margin-bottom:$globalMargin;}
|
||||
.card {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
background-size: cover;
|
||||
border: $rounded-0 !important;
|
||||
max-height: 150000px;
|
||||
margin-bottom:$globalMargin;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.cover-slider .card{margin-bottom:0px!important;}
|
||||
[data-card-height="cover"].card{margin-bottom:0px!important;}
|
||||
.card-style {
|
||||
overflow: hidden;
|
||||
margin: 0px 16px $globalMargin 16px;
|
||||
border-radius: $rounded-card-style;
|
||||
border: none;
|
||||
box-shadow: $globalShadow;
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
.card-style .card-overlay{
|
||||
border-radius: $rounded-card-style;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
z-index: $card-over-bg-zindex;
|
||||
}
|
||||
.card-header {
|
||||
z-index: $card-over-bg-zindex;
|
||||
}
|
||||
.card-footer {
|
||||
z-index: $card-over-bg-zindex;
|
||||
}
|
||||
.card-top {
|
||||
z-index: $card-over-bg-zindex;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
.card-bottom {
|
||||
z-index: $card-over-bg-zindex;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
.card-center {
|
||||
z-index: $card-over-bg-zindex;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.card-overlay {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
z-index: $card-under-bg-zindex;
|
||||
}
|
||||
.card-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
img {
|
||||
transition: all 450ms ease;
|
||||
}
|
||||
}
|
||||
.card-overflow {
|
||||
overflow: visible !important;
|
||||
z-index: 20;
|
||||
}
|
||||
[data-card-height] {
|
||||
p {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/*Card Effects*/
|
||||
.card-scale-image {
|
||||
transform: scale(1.05, 1.05) !important;
|
||||
}
|
||||
.card-rotate-image {
|
||||
transform: rotate(5deg) scale(1.2, 1.2) !important;
|
||||
}
|
||||
.card-grayscale-image {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.card-blur-image {
|
||||
filter: blur(5px);
|
||||
}
|
||||
.card-hide-image {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.card-hide {
|
||||
div {
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
* {
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
}
|
||||
.polaroid-effect {
|
||||
background-color: $color-white;
|
||||
padding: 5px;
|
||||
border: solid 1px rgba(0,0,0,0.1);
|
||||
}
|
||||
.card-scale {
|
||||
* {
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
}
|
||||
.card-rotate {
|
||||
* {
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
}
|
||||
.card-grayscale {
|
||||
* {
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
}
|
||||
.card-blur {
|
||||
* {
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
}
|
||||
|
||||
.card-overlay{background-position:center center; background-size: cover!important;}
|
||||
.card-overlay-infinite{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 2000px;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
animation: infiniteBG 600s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
background-image: url(images/mountain.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: repeat;
|
||||
background-position: left bottom;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
@keyframes infiniteBG {
|
||||
0% {transform:translateX(0px);}
|
||||
50% {transform:translateX(-1400px);}
|
||||
100% {transform:translateX(0px);}
|
||||
}
|
||||
259
client/scss/components/_checkradio.scss
Normal file
259
client/scss/components/_checkradio.scss
Normal file
@@ -0,0 +1,259 @@
|
||||
$fontAwesome: "Font Awesome 5 Free";
|
||||
|
||||
/*---Checkboxes & Radios---*/
|
||||
.fac {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
label {
|
||||
margin: 0em 1em 0em 0em;
|
||||
padding-left: 1.5em;
|
||||
cursor: pointer;
|
||||
font-weight: inherit;
|
||||
}
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
font-family: $fontAwesome;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: 0.5px;
|
||||
transition: opacity 150ms ease-in-out;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
font-family: $fontAwesome;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: 0.5px;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.checkboxes-demo {
|
||||
.fac {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.fac-checkbox {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
content: "\f45c";
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
>input[type=checkbox] {
|
||||
&+label {
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
color: $color_white !important;
|
||||
font-size: 10px !important;
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-checkbox-round {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
content: "\f111";
|
||||
}
|
||||
}
|
||||
>input[type=checkbox] {
|
||||
&+label {
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
color: $color_white !important;
|
||||
font-size: 8px !important;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-radio {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
content: "\f111";
|
||||
}
|
||||
}
|
||||
>input[type=radio] {
|
||||
&+label {
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
color: $color_white !important;
|
||||
font-size: 10px !important;
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-checkbox-o {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-checkbox-round-o {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-default {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-blue {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-green {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-orange {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-red {
|
||||
>input {
|
||||
&+label {
|
||||
&:before {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
>span {
|
||||
&::after {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fac-radio-full {
|
||||
>span {
|
||||
&::after {
|
||||
content: "\f111";
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
>input[type=radio] {
|
||||
&+label {
|
||||
&:before {
|
||||
content: "\00c";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
client/scss/components/_chips.scss
Normal file
43
client/scss/components/_chips.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
$chip-small: scale(1,1);
|
||||
$chip-medium: scale(1.05,1.05);
|
||||
$chip-large: scale(1.15,1.15);
|
||||
|
||||
|
||||
/*Chips*/
|
||||
.chip {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
display: inline-block;
|
||||
margin: 0px 10px 15px 0px;
|
||||
border-radius: $rounded-l;
|
||||
padding-right: 15px;
|
||||
span {
|
||||
line-height: 29px;
|
||||
}
|
||||
i {
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: $rounded-l;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
img {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-right: 9px;
|
||||
border-radius: $rounded-l;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.chip-small {
|
||||
transform: $chip-small;
|
||||
}
|
||||
.chip-medium {
|
||||
transform: $chip-medium
|
||||
}
|
||||
.chip-large {
|
||||
transform: $chip-large;
|
||||
}
|
||||
40
client/scss/components/_dividers.scss
Normal file
40
client/scss/components/_dividers.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
$dividerColor: rgba(0,0,0,0.05);
|
||||
$dividerIconBackground: #f0f0f0;
|
||||
|
||||
/*Dividers*/
|
||||
.divider {
|
||||
height: 1px;
|
||||
display: block;
|
||||
background-color: $dividerColor;
|
||||
margin-bottom: $globalMargin;
|
||||
}
|
||||
.divider-margins {
|
||||
margin: 0px 17px $globalMargin 17px;
|
||||
}
|
||||
.divider-icon {
|
||||
height: 1px;
|
||||
display: block;
|
||||
background-color: $dividerColor;
|
||||
margin-bottom: 50px;
|
||||
i {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
background-color: $dividerIconBackground;
|
||||
text-align: center;
|
||||
margin-top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.content-boxed {
|
||||
.divider-icon {
|
||||
i {
|
||||
background-color: $dividerIconBackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
.divider-small {
|
||||
height: 2px;
|
||||
width: 80px;
|
||||
margin: auto;
|
||||
}
|
||||
101
client/scss/components/_footer.scss
Normal file
101
client/scss/components/_footer.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
/*--Footer--*/
|
||||
.footer {
|
||||
padding: 20px 30px 10px 30px;
|
||||
margin-bottom: 0px !important;
|
||||
z-index: 11;
|
||||
strong {
|
||||
i {
|
||||
padding: 0px 5px;
|
||||
}
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
margin-top: 0px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.footer-text {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
padding: 5px 10px 0px 10px;
|
||||
}
|
||||
.footer-copyright {
|
||||
border-top: solid 1px rgba(0,0,0,0.05);
|
||||
}
|
||||
.footer-links {
|
||||
border-top: solid 1px rgba(0,0,0,0.05);
|
||||
padding-top: 13px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
padding: 40px 5px 1px 5px;
|
||||
}
|
||||
}
|
||||
.footer-title {
|
||||
color: $color-dark;
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
font-family: $font-heading-family;
|
||||
}
|
||||
.footer-logo {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: auto;
|
||||
margin: 0 auto;
|
||||
color: $color-transparent;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: auto;
|
||||
margin: 0 auto;
|
||||
span {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-title {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
.footer-socials {
|
||||
max-width: 240px;
|
||||
margin: 0px auto 30px auto;
|
||||
a {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
margin: 0px 4px;
|
||||
color: $color-white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 14px 0 rgba(0,0,0,0.08) !important;
|
||||
i {
|
||||
width: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.footer-copyright {
|
||||
border-top: solid 1px rgba(255,255,255,0.03);
|
||||
text-align: center;
|
||||
margin-bottom: -5px;
|
||||
padding-top: 15px;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.footer-logo {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
11
client/scss/components/_icons.scss
Normal file
11
client/scss/components/_icons.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
/*Icons*/
|
||||
.icon:hover{color:#FFF;}
|
||||
.icon{display:inline-block; position:relative; text-align:center;}
|
||||
.icon-xxs i{width:$icon-xxs; line-height:$icon-xxs; font-size:13px;}
|
||||
.icon-xs i{width:$icon-xs; line-height:$icon-xs; font-size:14px;}
|
||||
.icon-s i{width:$icon-s; line-height:$icon-s; font-size:15px;}
|
||||
.icon-m i{width:$icon-m; line-height:$icon-m; font-size:16px;}
|
||||
.icon-l i{width:$icon-l; line-height:$icon-l; font-size:17px;}
|
||||
.icon-xl i{width:$icon-xl; line-height:$icon-xl; font-size:18px;}
|
||||
.icon-xxl i{width:$icon-xxl; line-height:$icon-xxl; font-size:19px;}
|
||||
.icon-center{display:block; margin:0 auto;}
|
||||
38
client/scss/components/_iframes.scss
Normal file
38
client/scss/components/_iframes.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
/*Responsive Videos and iframes*/
|
||||
.max-iframe {
|
||||
max-height: 200px !important;
|
||||
height: 300px !important;
|
||||
padding-bottom: 0px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.responsive-iframe {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
object {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
330
client/scss/components/_inputs.scss
Normal file
330
client/scss/components/_inputs.scss
Normal file
@@ -0,0 +1,330 @@
|
||||
/*Input Style 1*/
|
||||
.input-style-1 {
|
||||
position: relative;
|
||||
input {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
background-color: $color_transparent;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.08);
|
||||
transition: all 250ms ease;
|
||||
&:focus {
|
||||
border-bottom: solid 1px rgba(0,0,0,1);
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 28px;
|
||||
padding-right: 15px;
|
||||
padding-top: 14px;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 15px;
|
||||
background-color: $color_transparent;
|
||||
margin-left: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
text-indent: 0px !important;
|
||||
border: none;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.08);
|
||||
transition: all 250ms ease;
|
||||
&:focus {
|
||||
line-height: 24px;
|
||||
height: 150px;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
margin-top: -3px;
|
||||
opacity: 0;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
em {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
right: 0px;
|
||||
color: $gray-300;
|
||||
i {
|
||||
font-size: 12px;
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
margin-top: 7px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
input[type="date"] {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 15px;
|
||||
background-color: $color_transparent;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.08);
|
||||
transition: all 250ms ease;
|
||||
color: $gray-600;
|
||||
&::-webkit-inner-spin-button {
|
||||
opacity: 0;
|
||||
}
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
&::-webkit-clear-button {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
select {
|
||||
&:focus {
|
||||
border-bottom: solid 1px rgba(0,0,0,1);
|
||||
}
|
||||
color: $gray-600;
|
||||
border: none;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.08);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 15px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 0px;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: $color_transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.input-style-1-active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.input-style-1-inactive {
|
||||
color: $gray-300 !important;
|
||||
}
|
||||
.input-style-1.has-icon {
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin-top: 20px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
input {
|
||||
padding-left: 30px;
|
||||
}
|
||||
span {
|
||||
margin-left: 25px;
|
||||
}
|
||||
.input-style-1-active {
|
||||
color: $blue !important;
|
||||
transform: translateX(-25px);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
}
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #F26B5E;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
&:after {
|
||||
content: " ";
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 20px;
|
||||
top: 5px;
|
||||
background: #ff5b32;
|
||||
background: linear-gradient(to right, #f088fc 1%, #AC6CFF 70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*Input Style 2*/
|
||||
.input-style-2 {
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
span {
|
||||
pointer-events: none;
|
||||
color: $black !important;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
padding: 2px 5px 2px 5px;
|
||||
top: 14px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
background-color: $color_white;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
.input-style-1-active {
|
||||
color: $blue !important;
|
||||
transform: translateY(-25px);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
em {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
color: $gray-300;
|
||||
line-height: 53px;
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
}
|
||||
input {
|
||||
background-color: $color_transparent;
|
||||
border-radius: 10px !important;
|
||||
border-color:rgba(0,0,0,0.1);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 14px;
|
||||
font-size: 13px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
textarea {
|
||||
background-color: $color_transparent;
|
||||
border-radius: 10px !important;
|
||||
display: block;
|
||||
border-color:rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 14px;
|
||||
font-size: 13px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
select {
|
||||
background-color: $color_transparent;
|
||||
border-radius: 10px !important;
|
||||
display: block;
|
||||
border-color:rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0px 14px;
|
||||
font-size: 13px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type="date"] {
|
||||
&::-webkit-inner-spin-button {
|
||||
opacity: 0;
|
||||
}
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
&::-webkit-clear-button {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.input-style-1-active {
|
||||
opacity: 1;
|
||||
padding-right: 10px !important;
|
||||
right: auto !important;
|
||||
}
|
||||
.input-style-2.has-icon {
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin-top: 20px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
input {
|
||||
padding-left: 40px;
|
||||
}
|
||||
span {
|
||||
margin-left: 25px;
|
||||
}
|
||||
.input-style-1-active {
|
||||
color: $blue !important;
|
||||
transform: translate(-25px, -25px);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
}
|
||||
.input-light {
|
||||
i {
|
||||
color: $color_white;
|
||||
}
|
||||
span {
|
||||
color: $color_white !important;
|
||||
}
|
||||
em {
|
||||
color: $gray-600 !important;
|
||||
}
|
||||
input {
|
||||
color: $color_white !important;
|
||||
border-bottom: solid 1px rgba(255,255,255,0.1) !important;
|
||||
&::placeholder {
|
||||
color: $color_white;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*File Upload*/
|
||||
.upload-file {
|
||||
text-indent: -999px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
color: $color_transparent !important;
|
||||
}
|
||||
.upload-file-text {
|
||||
pointer-events: none;
|
||||
margin-top: -36px !important;
|
||||
text-align: center;
|
||||
color: $color_white;
|
||||
height: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
.file-data {
|
||||
input[type='file'] {
|
||||
font-size: 0px !important;
|
||||
}
|
||||
}
|
||||
input {
|
||||
font-size: 12px !important;
|
||||
&::placeholder {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
select {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip{font-size:13px;}
|
||||
code{font-size:11px; line-height:22px;}
|
||||
218
client/scss/components/_list-group.scss
Normal file
218
client/scss/components/_list-group.scss
Normal file
@@ -0,0 +1,218 @@
|
||||
/*List Groups*/
|
||||
.list-custom-small {
|
||||
line-height: 50px;
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
margin-top: 16px !important;
|
||||
font-size: 9px;
|
||||
padding: 5px 8px 5px 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
color: $color_dark;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
i {
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:last-child {
|
||||
float: right;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
i {
|
||||
line-height: 50px;
|
||||
}
|
||||
.custom-control {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
margin-top: -40px;
|
||||
input {
|
||||
transform: translateY(-5px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
.list-custom-small {
|
||||
a {
|
||||
i {
|
||||
&:first-child {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-custom-large {
|
||||
a {
|
||||
line-height: 70px;
|
||||
color: $color_dark;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
span {
|
||||
&:not(.badge) {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-size: 7px;
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
margin-top: 10px;
|
||||
color: $gray-500;
|
||||
font-weight: 500;
|
||||
}
|
||||
i {
|
||||
&:first-child {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-top: 21px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
&:last-child {
|
||||
float: right;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 30px;
|
||||
font-size: 9px;
|
||||
padding: 5px 8px 5px 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
i {
|
||||
line-height: 74px;
|
||||
}
|
||||
.custom-control {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
margin-top: 22px;
|
||||
input {
|
||||
transform: translateY(-12px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-boxes {
|
||||
a {
|
||||
line-height: 60px;
|
||||
margin-bottom: 10px;
|
||||
color: $color_dark;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
span {
|
||||
&:not(.badge) {
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
padding-left: 10px;
|
||||
font-size: 7px;
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
margin-top: 10px;
|
||||
color: $gray-600;
|
||||
font-weight: 500;
|
||||
}
|
||||
i {
|
||||
&:first-child {
|
||||
width: 40px;
|
||||
float: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
&:last-child {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
margin-top: -5px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
u {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
margin-right: 9px;
|
||||
width: 60px;
|
||||
font-size: 7px;
|
||||
text-align: center;
|
||||
margin-top: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 30px;
|
||||
font-size: 9px;
|
||||
padding: 5px 8px 5px 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
i {
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
.short-border {
|
||||
margin-left: 45px;
|
||||
i {
|
||||
&:first-child {
|
||||
margin-left: -45px;
|
||||
margin-top: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-group {
|
||||
.badge {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.list-icon-0 {
|
||||
a {
|
||||
i {
|
||||
&:first-child {
|
||||
margin-left: -3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-list {
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
li {
|
||||
list-style: none;
|
||||
i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Badge Text in Lists*/
|
||||
.badge-text {
|
||||
margin-top: 13px !important;
|
||||
transform:translateY(-3px);
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
132
client/scss/components/_notifications.scss
Normal file
132
client/scss/components/_notifications.scss
Normal file
@@ -0,0 +1,132 @@
|
||||
/*Notifications*/
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
opacity: 0.98;
|
||||
transform: translateY(-120%);
|
||||
transition: all 250ms ease;
|
||||
.notification-icon {
|
||||
padding: 5px 5px;
|
||||
display: block;
|
||||
background-color: $gray-800;
|
||||
i {
|
||||
&:first-child {
|
||||
margin: 0px 5px 0px 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
line-height: 30px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
em {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin: 10px 15px -7px 15px;
|
||||
}
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin: 5px 15px 18px 15px;
|
||||
color: $color_white;
|
||||
}
|
||||
}
|
||||
.notification.show {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
.is-ios.is-on-homescreen .notification.show {
|
||||
transform: translateY(30px) !important;
|
||||
}
|
||||
.notification-android {
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
border-radius: 3px;
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-55%);
|
||||
width: 35px;
|
||||
margin-left: 15px;
|
||||
line-height: 35px;
|
||||
border-radius: 35px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
h1 {
|
||||
padding-left: 55px;
|
||||
}
|
||||
p {
|
||||
padding-right: 60px;
|
||||
padding-left: 55px;
|
||||
font-size: 12px;
|
||||
}
|
||||
strong {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.notification-buttons {
|
||||
width: 100%;
|
||||
margin-left: 70px;
|
||||
padding-top: 5px;
|
||||
border-top: solid 1px rgba(255,255,255,0.1);
|
||||
i {
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0px 10px 0px 0px;
|
||||
width: auto;
|
||||
transform: translateY(-22px);
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-size: 11px;
|
||||
color: $color_white;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.notification-material {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
border-radius: 0px;
|
||||
strong {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
em {
|
||||
text-transform: none !important;
|
||||
}
|
||||
.notification-icon {
|
||||
background-color: $color_transparent !important;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
border-radius: 50px;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
p {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
43
client/scss/components/_offline.scss
Normal file
43
client/scss/components/_offline.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
/*Offline Detector*/
|
||||
.offline-message {
|
||||
position: fixed;
|
||||
transform: translateY(-200%);
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
transition: $globalTransitions;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 9999;
|
||||
line-height: 55px;
|
||||
}
|
||||
.online-message {
|
||||
position: fixed;
|
||||
transform: translateY(-200%);
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
transition: $globalTransitions;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 9999;
|
||||
line-height: 55px;
|
||||
}
|
||||
.is-on-homescreen {
|
||||
.offline-message {
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
.online-message {
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
}
|
||||
.offline-message-active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
.online-message-active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
16
client/scss/components/_pagination.scss
Normal file
16
client/scss/components/_pagination.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
/*Pagination*/
|
||||
.pagination {
|
||||
margin-bottom: $globalMargin;
|
||||
.page-link {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
.page-item {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.page-item.active {
|
||||
a {
|
||||
color: $color_white !important;
|
||||
}
|
||||
}
|
||||
30
client/scss/components/_preloader.scss
Normal file
30
client/scss/components/_preloader.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
/*Prealoder*/
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 99999;
|
||||
transition: all 150ms ease;
|
||||
.spinner-border {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
.preloader-hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.theme-light {
|
||||
#preloader {
|
||||
background-color: $color_white;
|
||||
}
|
||||
}
|
||||
.theme-dark {
|
||||
#preloader {
|
||||
background-color: $theme-dark-background;
|
||||
}
|
||||
}
|
||||
234
client/scss/components/_pricing.scss
Normal file
234
client/scss/components/_pricing.scss
Normal file
@@ -0,0 +1,234 @@
|
||||
/*Pricing*/
|
||||
.pricing-1 {
|
||||
max-width: 280px;
|
||||
margin: 0 auto $globalMargin auto;
|
||||
border: solid 1px rgba(0,0,0,0.05);
|
||||
padding: 20px 0px 30px 0px;
|
||||
* {
|
||||
list-style: none;
|
||||
}
|
||||
.pricing-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
.pricing-title {
|
||||
font-size: 32px;
|
||||
padding: 20px 0px 0px 0px;
|
||||
}
|
||||
.pricing-value {
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
padding: 20px 0px 0px 0px;
|
||||
sup {
|
||||
font-size: 12px;
|
||||
top: -18px;
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
top: -13px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-subtitle {
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
padding: 0px 0px 10px 0px;
|
||||
}
|
||||
.pricing-list {
|
||||
padding: 0px;
|
||||
li {
|
||||
line-height: 40px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-2 {
|
||||
max-width: 280px;
|
||||
margin: 0 auto $globalMargin auto;
|
||||
border: solid 1px rgba(0,0,0,0.05);
|
||||
padding: 0px 0px 10px 0px;
|
||||
overflow: hidden;
|
||||
* {
|
||||
list-style: none;
|
||||
}
|
||||
.pricing-icon {
|
||||
font-size: 50px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
}
|
||||
.pricing-title {
|
||||
font-size: 25px;
|
||||
padding: 15px 0px 15px 0px;
|
||||
margin: -10px 0px 20px 0px;
|
||||
}
|
||||
.pricing-overtitle {
|
||||
font-size: 25px;
|
||||
padding: 15px 0px 15px 0px;
|
||||
margin: -10px 0px 0px 0px;
|
||||
}
|
||||
.pricing-value {
|
||||
font-size: 43px;
|
||||
padding: 15px 0px 0px 0px;
|
||||
sup {
|
||||
font-size: 12px;
|
||||
top: -18px;
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
top: -13px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-subtitle {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
.pricing-list {
|
||||
padding: 0px;
|
||||
li {
|
||||
line-height: 40px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.04);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-3 {
|
||||
max-width: 280px;
|
||||
margin: 0 auto $globalMargin auto;
|
||||
border: solid 1px rgba(0,0,0,0.05);
|
||||
padding: 0px 0px 10px 0px;
|
||||
overflow: hidden;
|
||||
* {
|
||||
list-style: none;
|
||||
}
|
||||
.btn {
|
||||
max-width: 90%;
|
||||
margin: -10px auto 10px auto;
|
||||
}
|
||||
.pricing-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
.pricing-title {
|
||||
font-size: 28px;
|
||||
padding: 30px 0px 0px 20px;
|
||||
}
|
||||
.pricing-value {
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
padding: 20px 0px 20px 0px;
|
||||
sup {
|
||||
font-size: 12px;
|
||||
top: -18px;
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
top: -13px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-subtitle {
|
||||
opacity: 0.6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
padding: 0px 0px 30px 20px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.1);
|
||||
}
|
||||
.pricing-list {
|
||||
padding: 0px;
|
||||
i {
|
||||
padding-right: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
li {
|
||||
line-height: 50px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 0px 0px 0px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-4 {
|
||||
max-width: 280px;
|
||||
margin: 0 auto $globalMargin auto;
|
||||
border: solid 1px rgba(0,0,0,0.05);
|
||||
padding: 0px 0px 10px 0px;
|
||||
overflow: hidden;
|
||||
* {
|
||||
list-style: none;
|
||||
}
|
||||
.pricing-title {
|
||||
font-size: 18px;
|
||||
padding: 15px 0px 15px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
.pricing-value {
|
||||
font-size: 43px;
|
||||
padding: 30px 0px 20px 0px;
|
||||
sup {
|
||||
font-size: 12px;
|
||||
top: -18px;
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
top: -13px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-subtitle {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
padding: 0px 0px 20px 0px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.pricing-list {
|
||||
padding: 0px;
|
||||
margin-bottom: 20px;
|
||||
li {
|
||||
line-height: 40px;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-single {
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pricing-double-1 {
|
||||
width: 48%;
|
||||
float: left;
|
||||
margin-right: 4%;
|
||||
}
|
||||
.pricing-double-2 {
|
||||
width: 48%;
|
||||
float: left;
|
||||
}
|
||||
.pricing-list {
|
||||
list-style: none !important;
|
||||
ul {
|
||||
list-style: none !important;
|
||||
}
|
||||
li {
|
||||
list-style: none !important;
|
||||
}
|
||||
}
|
||||
72
client/scss/components/_range.scss
Normal file
72
client/scss/components/_range.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
/*Range Sliders*/
|
||||
.ios-slider {
|
||||
height: 40px !important;
|
||||
background: linear-gradient(to right, #5D9CEC 0%, #5D9CEC 100%);
|
||||
background-size: 100% 3px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color_white !important;
|
||||
border: solid 1px rgba(0,0,0,0.1);
|
||||
border-radius: 30px;
|
||||
height: 25px !important;
|
||||
width: 25px !important;
|
||||
box-shadow: -3px 3px 10px 1px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
}
|
||||
.material-slider {
|
||||
height: 40px !important;
|
||||
background: linear-gradient(to right, #CCD1D9 0%, #CCD1D9 100%);
|
||||
background-size: 100% 18px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0px 3px 0px 3px;
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color_dark !important;
|
||||
border: solid 1px rgba(0,0,0,0.1);
|
||||
height: 10px !important;
|
||||
width: 30px !important;
|
||||
}
|
||||
}
|
||||
.classic-slider {
|
||||
height: 20px !important;
|
||||
background-color: $color_white;
|
||||
border: solid 1px rgba(0,0,0,0.1);
|
||||
border-radius: 30px !important;
|
||||
background-size: 100% 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color_transparent;
|
||||
padding: 0px 3px 0px 3px;
|
||||
-webkit-box-shadow: inset 0 2px 2px 1px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 2px 2px 1px rgba(0,0,0,0.1);
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $blue !important;
|
||||
border: solid 1px rgba(0,0,0,0.0);
|
||||
height: 16px !important;
|
||||
border-radius: 20px;
|
||||
width: 16px !important;
|
||||
box-shadow: -3px 3px 10px 1px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
}
|
||||
.range-slider-icons {
|
||||
padding: 0px 30px 0px 30px;
|
||||
}
|
||||
.range-slider.range-slider-icons {
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.range-slider {
|
||||
position: relative;
|
||||
.fa-range-icon-1 {
|
||||
left: 0px;
|
||||
}
|
||||
.fa-range-icon-2 {
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
104
client/scss/components/_search.scss
Normal file
104
client/scss/components/_search.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
/*Search*/
|
||||
.search-results {
|
||||
overflow: scroll;
|
||||
}
|
||||
.disabled-search-list {
|
||||
position: relative;
|
||||
max-height: 0px !important;
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.disabled-search {
|
||||
display: none;
|
||||
}
|
||||
.search-box {
|
||||
line-height: 50px;
|
||||
border: solid 1px rgba(0,0,0,0.08);
|
||||
input {
|
||||
outline: none !important;
|
||||
width: 100%;
|
||||
background-color: $color_transparent;
|
||||
padding-left: 40px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.fa-search {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
line-height: 52px;
|
||||
padding: 0px 15px 0px 30px;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 52px;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
}
|
||||
input.bg-white {
|
||||
color: $color_black !important;
|
||||
}
|
||||
}
|
||||
.search-color {
|
||||
input {
|
||||
color: $color_white;
|
||||
&::placeholder {
|
||||
color: $color_white;
|
||||
}
|
||||
}
|
||||
i {
|
||||
color: $color_white !important;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.search-icon-list {
|
||||
a {
|
||||
color: $color_dark;
|
||||
line-height: 35px;
|
||||
i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.search-page {
|
||||
.search-result-list {
|
||||
position: relative;
|
||||
min-height: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.search-results {
|
||||
img {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding-left: 100px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding-left: 100px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
line-height: 31px;
|
||||
padding: 0px 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: $color_white;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
122
client/scss/components/_sliders_carousels.scss
Normal file
122
client/scss/components/_sliders_carousels.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
/* Owl Custom Settings*/
|
||||
.task-slider {
|
||||
.owl-stage-outer {
|
||||
overflow: visible !important;
|
||||
}
|
||||
transform: translateX(-35px);
|
||||
}
|
||||
.single-slider {
|
||||
z-index: 50 !important;
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.under-slider-btn {
|
||||
z-index: 90;
|
||||
margin-top: -53px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.double-slider {
|
||||
.owl-stage-outer {
|
||||
overflow: visible !important;
|
||||
}
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px;
|
||||
.under-slider-button {
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
}
|
||||
.cta-buttons {
|
||||
display: block;
|
||||
width: 280px;
|
||||
margin: 0px auto -1px auto;
|
||||
z-index: 10;
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.owl-has-controls {
|
||||
.owl-nav {
|
||||
display: block !important;
|
||||
}
|
||||
.owl-prev {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.owl-next {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.slider-boxed {
|
||||
* {
|
||||
overflow: visible !important;
|
||||
}
|
||||
padding: 0px 15px;
|
||||
.owl-nav {
|
||||
margin-top: -25px !important;
|
||||
}
|
||||
.owl-dots {
|
||||
transform: translateX(0px) !important;
|
||||
}
|
||||
}
|
||||
.carousel-boxed {
|
||||
padding: 0px 15px;
|
||||
}
|
||||
.card-slider {
|
||||
* {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
.card-carousel {
|
||||
* {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
.cover-slider {
|
||||
.owl-dots {
|
||||
transform: translateY(-70px) !important;
|
||||
}
|
||||
}
|
||||
.walkthrough-slider {
|
||||
.owl-dots {
|
||||
transform: translateY(-22px) !important;
|
||||
}
|
||||
}
|
||||
.cover-button-bottom {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
bottom: 70px;
|
||||
z-index: 99;
|
||||
font-size: 12px;
|
||||
}
|
||||
.cover-button-top {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
left: 50%;
|
||||
margin-left: -85px;
|
||||
top: 20px;
|
||||
top: calc(20px + (constant(safe-area-inset-top))*1.1) !important;
|
||||
top: calc(20px + (env(safe-area-inset-top))*1.1) !important;
|
||||
z-index: 99;
|
||||
font-size: 12px;
|
||||
}
|
||||
.cover-next {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
}
|
||||
.cover-prev {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
bottom: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.cover-slider{
|
||||
touch-action: pan-x;
|
||||
}
|
||||
|
||||
.cover-slider .content{
|
||||
margin-bottom:0px!important;
|
||||
}
|
||||
19
client/scss/components/_snackbars.scss
Normal file
19
client/scss/components/_snackbars.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
/*Snackbars*/
|
||||
.snackbar-toast {
|
||||
bottom: 70px !important;
|
||||
bottom: calc(70px + (constant(safe-area-inset-bottom))*1.1) !important;
|
||||
bottom: calc(70px + (env(safe-area-inset-bottom))*1.1) !important;
|
||||
position: fixed;
|
||||
left: 10px !important;
|
||||
right: 10px !important;
|
||||
padding: 0px 18px;
|
||||
line-height: 50px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
z-index: 95;
|
||||
transform: translateY(100px);
|
||||
transition: $globalTransitions;
|
||||
}
|
||||
.snackbar-toast.show {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
185
client/scss/components/_switches.scss
Normal file
185
client/scss/components/_switches.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
$switch_green: #8CC152;
|
||||
$switch_blue: #458be3;
|
||||
$switch_red : #DA4453;
|
||||
$switch_gray_ios: #e8e9ea;
|
||||
$switch_gray_android: #AAB2BD;
|
||||
|
||||
/*Custom Switches*/
|
||||
.custom-control {
|
||||
* {
|
||||
cursor: pointer;
|
||||
user-select: none !important;
|
||||
}
|
||||
}
|
||||
.switch-is-unchecked {
|
||||
display: none;
|
||||
}
|
||||
.switch-is-checked {
|
||||
display: block;
|
||||
}
|
||||
.scale-switch {
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
/*iOS Switcher*/
|
||||
.ios-switch {
|
||||
padding-left: 10px;
|
||||
label {
|
||||
&::before {
|
||||
background-color: $switch_gray_ios;
|
||||
pointer-events: all;
|
||||
margin-top: -5px;
|
||||
margin-left: -1px;
|
||||
width: 58px !important;
|
||||
height: 32px !important;
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
&::after {
|
||||
margin-top: -4px;
|
||||
z-index: 6;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
transition: all 250ms ease;
|
||||
border-radius: 50px !important;
|
||||
background-color: $color_white;
|
||||
border: solid 1px rgba(152, 152, 152, 0.4);
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ios-input {
|
||||
&:checked {
|
||||
&~.custom-control-label {
|
||||
&::after {
|
||||
-webkit-transform: translateX(26px) !important;
|
||||
}
|
||||
&::before {
|
||||
background-color: $switch_green !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ios-switch-icon {
|
||||
label {
|
||||
&::before {
|
||||
background-color: $switch_red !important;
|
||||
}
|
||||
}
|
||||
i {
|
||||
line-height: 32px;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
&:last-child {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
margin-left: 29px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: $color_white;
|
||||
line-height: 32px;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
&:last-child {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*Android Switcher*/
|
||||
.android-switch {
|
||||
padding-left: 10px;
|
||||
label {
|
||||
&::before {
|
||||
pointer-events: all;
|
||||
margin-top: 0px;
|
||||
margin-left: -2px;
|
||||
width: 53px !important;
|
||||
height: 17px !important;
|
||||
border-radius: 50px !important;
|
||||
background-color: $switch_gray_android;
|
||||
}
|
||||
&::after {
|
||||
border: solid 1px rgba(0,0,0,0.1) !important;
|
||||
margin-top: -6px;
|
||||
margin-left: -3px;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
background-color: $color_white !important;
|
||||
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.20) !important;
|
||||
border-radius: 50px !important;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
.android-input {
|
||||
transform:translateY(1px)!important;
|
||||
&:checked {
|
||||
&~.custom-control-label {
|
||||
&::after {
|
||||
background-color: $switch_blue !important;
|
||||
border: none !important;
|
||||
-webkit-transform: translateX(30px) !important;
|
||||
}
|
||||
&::before {
|
||||
background-color: $switch_blue !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-activate] {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
/*Classic Switcher*/
|
||||
.classic-switch {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
label {
|
||||
&::before {
|
||||
pointer-events: all;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
transform: translateX(11px);
|
||||
margin-top: -10px;
|
||||
border: none;
|
||||
background-color: $color_transparent !important;
|
||||
}
|
||||
}
|
||||
i {
|
||||
pointer-events: none;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
}
|
||||
.classic-input {
|
||||
&:checked {
|
||||
&~.custom-control-label {
|
||||
&::after {
|
||||
-webkit-transform: translateX(26px) !important;
|
||||
}
|
||||
}
|
||||
&~.fa-plus {
|
||||
color: $switch_red !important;
|
||||
transform: rotate(45deg);
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
&~.fa-angle-down {
|
||||
color: $switch_red !important;
|
||||
transform: rotate(180deg);
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
&~.fa-circle {
|
||||
color: $switch_red !important;
|
||||
transform: scale(1.3, 1.3);
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
client/scss/components/_tabs.scss
Normal file
68
client/scss/components/_tabs.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
/*Tabs*/
|
||||
.tab-content {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
}
|
||||
.tab-controls {
|
||||
a {
|
||||
border: solid 1px rgba(0,0,0,0.07);
|
||||
border-right: none;
|
||||
text-align: center;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
margin-right: -1px;
|
||||
color: $color_dark;
|
||||
transition: all 250ms ease;
|
||||
&:last-child {
|
||||
border: solid 1px rgba(0,0,0,0.07);
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-large {
|
||||
a {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tabs-medium {
|
||||
a {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.tabs-small {
|
||||
a {
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.tabs-rounded {
|
||||
a {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-bottom-left-radius: 8px !important;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 8px !important;
|
||||
border-bottom-right-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-circled {
|
||||
a {
|
||||
&:first-child {
|
||||
border-top-left-radius: 30px !important;
|
||||
border-bottom-left-radius: 30px !important;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 30px !important;
|
||||
border-bottom-right-radius: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
client/scss/components/_toasts.scss
Normal file
32
client/scss/components/_toasts.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
/*Toasts*/
|
||||
.toast-tiny {
|
||||
z-index: 90;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
line-height: 35px;
|
||||
padding: 0px 20px;
|
||||
color: $color_white;
|
||||
transition: all 200ms ease;
|
||||
max-width: auto !important;
|
||||
font-size: 12px;
|
||||
border-radius: 60px;
|
||||
border: 0px !important;
|
||||
}
|
||||
.toast-bottom {
|
||||
bottom: 60px;
|
||||
bottom: calc(65px + (constant(safe-area-inset-bottom))*1.1) !important;
|
||||
bottom: calc(65px + (env(safe-area-inset-bottom))*1.1) !important;
|
||||
transform: translate(-50%, 60px);
|
||||
}
|
||||
.toast-bottom.toast-tiny.show {
|
||||
transform: translate(-50%, 0px);
|
||||
}
|
||||
.toast-top {
|
||||
top: 60px;
|
||||
top: calc(65px + (constant(safe-area-inset-bottom))*1.1) !important;
|
||||
top: calc(65px + (env(safe-area-inset-bottom))*1.1) !important;
|
||||
transform: translate(-50%, -60px);
|
||||
}
|
||||
.toast-top.toast-tiny.show {
|
||||
transform: translate(-50%, 0px);
|
||||
}
|
||||
27
client/scss/components/_working-hours.scss
Normal file
27
client/scss/components/_working-hours.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
/*Working Hours*/
|
||||
.working-hours {
|
||||
border-radius: 5px;
|
||||
p {
|
||||
padding-top: 34px;
|
||||
padding-bottom: 15px !important;
|
||||
line-height: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-top: -8px !important;
|
||||
width: 33.3%;
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
&:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
98
client/scss/components/_zdemo.scss
Normal file
98
client/scss/components/_zdemo.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
/*Styles used to showcase the demo product on ThemeForest and create backgrounds. These can be deleted to increase speed of loading*/
|
||||
.bg-0{background-image:url(../images/pictures/0l.jpg);}
|
||||
.bg-1{background-image:url(../images/pictures/1.jpg);}
|
||||
.bg-2{background-image:url(../images/pictures/2.jpg);}
|
||||
.bg-3{background-image:url(../images/pictures/3.jpg);}
|
||||
.bg-4{background-image:url(../images/pictures/4.jpg);}
|
||||
.bg-5{background-image:url(../images/pictures/5.jpg);}
|
||||
.bg-6{background-image:url(../images/pictures/6.jpg);}
|
||||
.bg-7{background-image:url(../images/pictures/7.jpg);}
|
||||
.bg-8{background-image:url(../images/pictures/8.jpg);}
|
||||
.bg-9{background-image:url(../images/pictures/9.jpg);}
|
||||
.bg-10{background-image:url(../images/pictures/10.jpg);}
|
||||
.bg-11{background-image:url(../images/pictures/11.jpg);}
|
||||
.bg-12{background-image:url(../images/pictures/12.jpg);}
|
||||
.bg-13{background-image:url(../images/pictures/13.jpg);}
|
||||
.bg-14{background-image:url(../images/pictures/14.jpg);}
|
||||
.bg-15{background-image:url(../images/pictures/15.jpg);}
|
||||
.bg-16{background-image:url(../images/pictures/16.jpg);}
|
||||
.bg-17{background-image:url(../images/pictures/17.jpg);}
|
||||
.bg-18{background-image:url(../images/pictures/18.jpg);}
|
||||
.bg-19{background-image:url(../images/pictures/19.jpg);}
|
||||
.bg-20{background-image:url(../images/pictures/20.jpg);}
|
||||
.bg-21{background-image:url(../images/pictures/21.jpg);}
|
||||
.bg-22{background-image:url(../images/pictures/22.jpg);}
|
||||
.bg-23{background-image:url(../images/pictures/23.jpg);}
|
||||
.bg-24{background-image:url(../images/pictures/24.jpg);}
|
||||
.bg-25{background-image:url(../images/pictures/25.jpg);}
|
||||
.bg-26{background-image:url(../images/pictures/26.jpg);}
|
||||
.bg-27{background-image:url(../images/pictures/27.jpg);}
|
||||
.bg-28{background-image:url(../images/pictures/28.jpg);}
|
||||
.bg-29{background-image:url(../images/pictures/29.jpg);}
|
||||
.bg-30{background-image:url(../images/pictures/30.jpg);}
|
||||
|
||||
/*Demo Colors*/
|
||||
.demo-color{
|
||||
width:100%;
|
||||
line-height:45px;
|
||||
padding-left:20px;
|
||||
text-transform:capitalize;
|
||||
border-bottom:solid 1px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.demo-color span{
|
||||
font-size:10px;
|
||||
position:absolute;
|
||||
right:20px;
|
||||
line-height:48px;
|
||||
color:rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/*Highlight Changer*/
|
||||
.theme-change-transition{
|
||||
transition:all 150ms ease!important;
|
||||
}
|
||||
.highlight-changer a{
|
||||
width:20%;
|
||||
float:left;
|
||||
text-align:center;
|
||||
line-height:42px;
|
||||
font-size:20px;
|
||||
margin-top:10px;
|
||||
margin-bottom:-5px;
|
||||
}
|
||||
.highlight-changer a i{margin-top:10px; display:block; font-size:26px!important;}
|
||||
.highlight-changer a span{
|
||||
font-size:11px;
|
||||
display:block;
|
||||
margin-top:-10px;
|
||||
margin-bottom:-5px;
|
||||
}
|
||||
|
||||
.background-changer a{
|
||||
width:20%;
|
||||
float:left;
|
||||
text-align:center;
|
||||
line-height:42px;
|
||||
font-size:20px;
|
||||
margin-top:10px;
|
||||
margin-bottom:-5px;
|
||||
}
|
||||
.background-changer a i{
|
||||
margin-top:10px;
|
||||
display:block;
|
||||
width:26px;
|
||||
height:26px;
|
||||
border-radius:100%;
|
||||
color:rgba(255,255,255,0);
|
||||
margin:10px auto 0px auto;
|
||||
}
|
||||
.background-changer .bg-theme{
|
||||
border:solid 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
.background-changer a span{
|
||||
font-size:11px;
|
||||
display:block;
|
||||
margin-top:-10px;
|
||||
margin-bottom:-5px;
|
||||
}
|
||||
Reference in New Issue
Block a user