WIP
This commit is contained in:
Marek Lesko
@@ -1,109 +1,109 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.blank-layout-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-size: cover;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.bg-gredient {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(rgb(210, 241, 223),
|
||||
rgb(211, 215, 250),
|
||||
rgb(186, 216, 244)) 0% 0% / 400% 400%;
|
||||
animation: 15s ease 0s infinite normal none running gradient;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 50% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-height {
|
||||
height: calc(100vh - 83px);
|
||||
}
|
||||
|
||||
.custom-row {
|
||||
&.row {
|
||||
margin-right: -8px;
|
||||
margin-left: -8px;
|
||||
|
||||
.col-2,
|
||||
.col-12 {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.or-border {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-auth {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.max-width-form {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-form-field-invalid {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: $error !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
position: absolute;
|
||||
top: -19px;
|
||||
right: 3px;
|
||||
@use "../variables" as *;
|
||||
|
||||
.blank-layout-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-size: cover;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.bg-gredient {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(rgb(210, 241, 223),
|
||||
rgb(211, 215, 250),
|
||||
rgb(186, 216, 244)) 0% 0% / 400% 400%;
|
||||
animation: 15s ease 0s infinite normal none running gradient;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 50% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-height {
|
||||
height: calc(100vh - 83px);
|
||||
}
|
||||
|
||||
.custom-row {
|
||||
&.row {
|
||||
margin-right: -8px;
|
||||
margin-left: -8px;
|
||||
|
||||
.col-2,
|
||||
.col-12 {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.or-border {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: var(--mat-sys-outline);
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-auth {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.max-width-form {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-form-field-invalid {
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: $error !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
position: absolute;
|
||||
top: -19px;
|
||||
right: 3px;
|
||||
}
|
||||
@@ -1,126 +1,126 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.social-chips {
|
||||
img {
|
||||
margin-left: -9px;
|
||||
border: 2px solid $white;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minus-img {
|
||||
margin-bottom: -65px !important;
|
||||
}
|
||||
|
||||
// theme select
|
||||
.theme-select {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
// dashboard 2
|
||||
.welcome-img {
|
||||
margin-bottom: -82px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
|
||||
.time {
|
||||
padding: 6px 16px 6px 0;
|
||||
min-width: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
.timline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.point {
|
||||
flex-direction: column;
|
||||
|
||||
.timeline-badge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50px;
|
||||
background-color: transparent;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.border-primary {
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
|
||||
&.border-accent {
|
||||
border: 2px solid $accent;
|
||||
}
|
||||
|
||||
&.border-success {
|
||||
border: 2px solid $success;
|
||||
}
|
||||
|
||||
&.border-warning {
|
||||
border: 2px solid $warning;
|
||||
}
|
||||
|
||||
&.border-error {
|
||||
border: 2px solid $error;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.timeline-border {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expansion panel
|
||||
|
||||
html .mat-expansion-panel:not([class*="mat-elevation-z"]) {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
}
|
||||
|
||||
.most-visit-chart {
|
||||
.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
|
||||
clip-path: inset(0 0 5% 0 round 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// User Profile Tab
|
||||
.profileTabs {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
|
||||
.mat-mdc-tab-label-container{
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-tab.mdc-tab-indicator--active{
|
||||
.mdc-tab__text-label{
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.social-chips {
|
||||
img {
|
||||
margin-left: -9px;
|
||||
border: 2px solid $white;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minus-img {
|
||||
margin-bottom: -65px !important;
|
||||
}
|
||||
|
||||
// theme select
|
||||
.theme-select {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
// dashboard 2
|
||||
.welcome-img {
|
||||
margin-bottom: -82px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
|
||||
.time {
|
||||
padding: 6px 16px 6px 0;
|
||||
min-width: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
.timline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.point {
|
||||
flex-direction: column;
|
||||
|
||||
.timeline-badge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50px;
|
||||
background-color: transparent;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.border-primary {
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
|
||||
&.border-accent {
|
||||
border: 2px solid $accent;
|
||||
}
|
||||
|
||||
&.border-success {
|
||||
border: 2px solid $success;
|
||||
}
|
||||
|
||||
&.border-warning {
|
||||
border: 2px solid $warning;
|
||||
}
|
||||
|
||||
&.border-error {
|
||||
border: 2px solid $error;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-border {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $borderColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.timeline-border {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expansion panel
|
||||
|
||||
html .mat-expansion-panel:not([class*="mat-elevation-z"]) {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
}
|
||||
|
||||
.most-visit-chart {
|
||||
.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
|
||||
clip-path: inset(0 0 5% 0 round 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// User Profile Tab
|
||||
.profileTabs {
|
||||
background-color: var(--mat-sys-surface-bright);
|
||||
|
||||
.mat-mdc-tab-label-container{
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-tab.mdc-tab-indicator--active{
|
||||
.mdc-tab__text-label{
|
||||
color: var(--mat-sys-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,143 +1,143 @@
|
||||
.front-topbar {
|
||||
&.fixed-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--mat-sys-background) !important;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
|
||||
.profileTabs {
|
||||
|
||||
.mat-mdc-tab {
|
||||
padding: 30px 16px;
|
||||
height: auto;
|
||||
border-right: 1px solid var(--mat-sys-outline);
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.home-page .expansion-panel .mat-expansion-panel-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
.mat-expansion-panel-body {
|
||||
padding: 16px 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sidebar {
|
||||
.mdc-list {
|
||||
.mdc-list-item {
|
||||
.mat-mdc-button {
|
||||
color: var(--mat-sys-on-background);
|
||||
min-width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.section-sub-title {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.section-sub-title {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.footer-content .left-side-content {
|
||||
padding: 30px !important;
|
||||
}
|
||||
.front-topbar {
|
||||
&.fixed-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--mat-sys-background) !important;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
|
||||
.profileTabs {
|
||||
|
||||
.mat-mdc-tab {
|
||||
padding: 30px 16px;
|
||||
height: auto;
|
||||
border-right: 1px solid var(--mat-sys-outline);
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.home-page .expansion-panel .mat-expansion-panel-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
.mat-expansion-panel-body {
|
||||
padding: 16px 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sidebar {
|
||||
.mdc-list {
|
||||
.mdc-list-item {
|
||||
.mat-mdc-button {
|
||||
color: var(--mat-sys-on-background);
|
||||
min-width: 100%;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 959px) {
|
||||
.section-sub-title {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.section-sub-title {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.spacing-left-right {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.spacing-left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.spacing-top {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.spacing-bottom {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.footer-content .left-side-content {
|
||||
padding: 30px !important;
|
||||
}
|
||||
}
|
||||
@@ -1,244 +1,244 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.demos-dd {
|
||||
max-width: $boxedWidth !important;
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: relative;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
.overlay-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
background-color: rgba(55, 114, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-xl {
|
||||
height: 80px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// banner
|
||||
// ----------------------------------------------------------
|
||||
@media (min-width: 900px) {
|
||||
.banner-title {
|
||||
font-size: 54px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.banner-section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
height: 56px !important;
|
||||
padding: 0 52px !important;
|
||||
font-size: 16px;
|
||||
|
||||
&.sm {
|
||||
padding: 0 34px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.btn-custom {
|
||||
padding: 0 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
background-color: $light-primary;
|
||||
min-width: 2000px;
|
||||
height: calc(100vh - 100px);
|
||||
max-height: 790px;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-img {
|
||||
animation: slideup 35s linear infinite;
|
||||
}
|
||||
|
||||
.slider-img2 {
|
||||
animation: slidedown 35s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slideup {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, -100%, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidedown {
|
||||
0% {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, 0, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
// sections
|
||||
|
||||
.spacer {
|
||||
padding: 80px 0 100px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
line-height: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
// demo slider
|
||||
.demo-slider {
|
||||
margin-top: 40px;
|
||||
|
||||
.demo-slide {
|
||||
animation: slide 45s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
// call to action
|
||||
|
||||
.shape-card {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacer-sm {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.spacer-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title2 {
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.c2a-card {
|
||||
margin-top: -70px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border: 1px solid $white !important;
|
||||
}
|
||||
|
||||
.border-accent {
|
||||
border: 1px solid $accent !important;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border: 1px solid $primary !important;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bg-size-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.shapes-component {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -32px;
|
||||
width: 388px;
|
||||
height: 382px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-2.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -125px;
|
||||
right: -96px;
|
||||
width: 267px;
|
||||
height: 252px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-1.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
.demos-dd {
|
||||
max-width: $boxedWidth !important;
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: relative;
|
||||
border: 1px solid var(--mat-sys-outline);
|
||||
.overlay-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
background-color: rgba(55, 114, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-xl {
|
||||
height: 80px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// banner
|
||||
// ----------------------------------------------------------
|
||||
@media (min-width: 900px) {
|
||||
.banner-title {
|
||||
font-size: 54px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.banner-section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
height: 56px !important;
|
||||
padding: 0 52px !important;
|
||||
font-size: 16px;
|
||||
|
||||
&.sm {
|
||||
padding: 0 34px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.btn-custom {
|
||||
padding: 0 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
background-color: $light-primary;
|
||||
min-width: 2000px;
|
||||
height: calc(100vh - 100px);
|
||||
max-height: 790px;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-img {
|
||||
animation: slideup 35s linear infinite;
|
||||
}
|
||||
|
||||
.slider-img2 {
|
||||
animation: slidedown 35s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slideup {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, -100%, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidedown {
|
||||
0% {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0px, 0, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
// sections
|
||||
|
||||
.spacer {
|
||||
padding: 80px 0 100px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
line-height: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
// demo slider
|
||||
.demo-slider {
|
||||
margin-top: 40px;
|
||||
|
||||
.demo-slide {
|
||||
animation: slide 45s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
// call to action
|
||||
|
||||
.shape-card {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacer-sm {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.spacer-bottom {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title2 {
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.c2a-card {
|
||||
margin-top: -70px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border: 1px solid $white !important;
|
||||
}
|
||||
|
||||
.border-accent {
|
||||
border: 1px solid $accent !important;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border: 1px solid $primary !important;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bg-size-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.shapes-component {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -32px;
|
||||
width: 388px;
|
||||
height: 382px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-2.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -125px;
|
||||
right: -96px;
|
||||
width: 267px;
|
||||
height: 252px;
|
||||
z-index: -1;
|
||||
background-image: url(/assets/images/shapes/shape-1.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
.plan-title {
|
||||
font-size: 50px;
|
||||
margin-top: 40px;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dollar-sign {
|
||||
margin-top: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.per-month {
|
||||
margin-top: 45px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.popular-badge {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
// widget cards
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: -21px;
|
||||
}
|
||||
.plan-title {
|
||||
font-size: 50px;
|
||||
margin-top: 40px;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dollar-sign {
|
||||
margin-top: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.per-month {
|
||||
margin-top: 45px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.popular-badge {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
// widget cards
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: -21px;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
html {
|
||||
.toast-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.toast-container .ngx-toastr {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
@use "../variables" as *;
|
||||
|
||||
html {
|
||||
.toast-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.toast-container .ngx-toastr {
|
||||
box-shadow: var(--mat-sys-level2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user