Add Lotusdocs theme
This commit is contained in:
Abner Coimbre
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// backgrounds.scss
|
||||
//
|
||||
|
||||
@each $name,
|
||||
$value in $theme-colors {
|
||||
.bg-#{$name} {
|
||||
background-color: rgba($value, 0.04) !important;
|
||||
}
|
||||
.bg-hard-#{$name} {
|
||||
background-color: rgba($value, 1) !important;
|
||||
}
|
||||
.bg-soft-#{$name} {
|
||||
background-color: rgba($value, 0.1) !important;
|
||||
border: 1px solid rgba($value, 0.1) !important;
|
||||
color: #{$value} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-white-color {
|
||||
background-color: $bg-white-color !important;
|
||||
}
|
||||
16
themes/lotusdocs/assets/scss/custom/components/_badge.scss
Normal file
16
themes/lotusdocs/assets/scss/custom/components/_badge.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
//
|
||||
// _badge.scss
|
||||
//
|
||||
|
||||
//Badges
|
||||
.badge {
|
||||
letter-spacing: 0.5px;
|
||||
padding: 4px 8px;
|
||||
font-weight: 600;
|
||||
line-height: 11px;
|
||||
&.badge-link {
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
105
themes/lotusdocs/assets/scss/custom/components/_buttons.scss
Normal file
105
themes/lotusdocs/assets/scss/custom/components/_buttons.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
//
|
||||
// _buttons.scss
|
||||
//
|
||||
//Buttons
|
||||
@each $name,
|
||||
$value in $theme-colors {
|
||||
.btn-soft-#{$name} {
|
||||
background-color: rgba($value, 0.05) !important;
|
||||
border: 1px solid rgba($value, 0.05) !important;
|
||||
color: #{$value} !important;
|
||||
box-shadow: 0 2px 1px 0 rgba($value, 0.1);
|
||||
&:hover, &:focus, &:active, &.active, &.focus{
|
||||
background-color: #{$value} !important;
|
||||
border-color: #{$value} !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.3s;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
&.btn-sm {
|
||||
padding: 7px 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
&.btn-lg {
|
||||
padding: 14px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.searchbtn {
|
||||
padding: 6px 20px;
|
||||
}
|
||||
&.btn-pills {
|
||||
border-radius: 30px;
|
||||
}
|
||||
&.btn-light{
|
||||
border: 1px solid darken($light, 2%);
|
||||
}
|
||||
&.btn-outline-light {
|
||||
border-color: $gray-200 !important;
|
||||
}
|
||||
&.btn-soft-light {
|
||||
color: $gray-400 !important;
|
||||
border-color: $gray-200 !important;
|
||||
}
|
||||
&.btn-soft-dark {
|
||||
&:hover, &:focus, &:active, &.active, &.focus {
|
||||
color: $gray-400 !important;
|
||||
border-color: $gray-200 !important;
|
||||
}
|
||||
}
|
||||
&.btn-dark,
|
||||
&.btn-secondary{
|
||||
color: $gray-200;
|
||||
}
|
||||
&.btn-outline-light{
|
||||
color: $gray-900;
|
||||
}
|
||||
&.btn-icon {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
.icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.btn-lg {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
line-height: 46px;
|
||||
.icons {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button:not(:disabled) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-landing {
|
||||
color: #3c4858;
|
||||
}
|
||||
49
themes/lotusdocs/assets/scss/custom/components/_nav.scss
Normal file
49
themes/lotusdocs/assets/scss/custom/components/_nav.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
//
|
||||
// _nav.scss
|
||||
//
|
||||
|
||||
// //Nav
|
||||
// .nav-pills {
|
||||
// margin-bottom: 15px;
|
||||
// background: darken($light, 1%);
|
||||
// .nav-link {
|
||||
// color: $gray-700 !important;
|
||||
// padding: 5px;
|
||||
// transition: all 0.5s ease;
|
||||
// &.nav-link-alt {
|
||||
// color: $nav-pills-color !important;
|
||||
// &.active {
|
||||
// background: $nav-pills-bg !important;
|
||||
// }
|
||||
// }
|
||||
// &.active {
|
||||
// background: $primary;
|
||||
// color: $nav-pills-color !important;
|
||||
// .tab-para {
|
||||
// color: rgba($nav-pills-color, 0.65) !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
//Nav
|
||||
.nav-bg {
|
||||
background: $navs-bg !important;
|
||||
}
|
||||
.nav-pills {
|
||||
.nav-link{
|
||||
color: $dark !important;
|
||||
&.nav-link-alt {
|
||||
color: rgba($white, 0.5) !important;
|
||||
&:hover {
|
||||
background: none !important;
|
||||
}
|
||||
&.active {
|
||||
background: $nav-link-alt !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
185
themes/lotusdocs/assets/scss/custom/pages/_features.scss
Normal file
185
themes/lotusdocs/assets/scss/custom/pages/_features.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
//
|
||||
// features.scss
|
||||
//
|
||||
|
||||
@each $name,
|
||||
$value in $theme-colors {
|
||||
.features {
|
||||
&.feature-#{$name} {
|
||||
.icon {
|
||||
background: rgba($value, 0.05);
|
||||
}
|
||||
|
||||
.no-icon {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.image {
|
||||
&:before {
|
||||
background: linear-gradient(45deg, transparent, rgba($value, 0.1));
|
||||
}
|
||||
}
|
||||
|
||||
.read-more,
|
||||
.color {
|
||||
color: $value !important;
|
||||
}
|
||||
|
||||
&.feature-clean {
|
||||
.icons {
|
||||
color: $value !important;
|
||||
i {
|
||||
background-color: rgba($value, 0.1);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
&:hover {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.feature-full-bg {
|
||||
.icon-color {
|
||||
color: $value !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.key-feature {
|
||||
.icon {
|
||||
background: linear-gradient(45deg, transparent, rgba($value, 0.15));
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
&.course-feature {
|
||||
.full-img {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.explore-feature {
|
||||
&:hover {
|
||||
.icons,
|
||||
.title {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-soft {
|
||||
background-color: rgba($value, 0.05) !important;
|
||||
border: 1px solid rgba($value, 0.05) !important;
|
||||
color: #{$value} !important;
|
||||
box-shadow: 0 3px 5px 0 rgba($value, 0.1);
|
||||
&:hover, &:focus, &:active, &.active, &.focus{
|
||||
background-color: #{$value} !important;
|
||||
border-color: #{$value} !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.image {
|
||||
&:before {
|
||||
background: rgba($value, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
.image {
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
transform: rotate(33.75deg);
|
||||
}
|
||||
}
|
||||
&.feature-clean {
|
||||
background-color: $body-bg;
|
||||
.icons {
|
||||
i {
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ride-image {
|
||||
transform: rotate(-45deg);
|
||||
img {
|
||||
border-radius: 100% 100% 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.key-feature {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: $shadow-md !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.image {
|
||||
&:before {
|
||||
animation: spinner-border 5s linear infinite !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.feature-full-bg {
|
||||
transition: all 0.5s ease;
|
||||
.big-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0.015;
|
||||
font-size: 180px;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: $shadow-lg;
|
||||
color: $white !important;
|
||||
.icon-color i,
|
||||
.para {
|
||||
color: rgba($white, 0.5) !important;
|
||||
}
|
||||
.content,
|
||||
.icon-color {
|
||||
z-index: 2;
|
||||
}
|
||||
.big-icon {
|
||||
opacity: 0.05;
|
||||
}
|
||||
.readmore {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.features,
|
||||
.key-feature {
|
||||
.title {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
.icon,
|
||||
.no-icon {
|
||||
height: 45px;
|
||||
min-width: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
533
themes/lotusdocs/assets/scss/custom/pages/_helper.scss
Normal file
533
themes/lotusdocs/assets/scss/custom/pages/_helper.scss
Normal file
@@ -0,0 +1,533 @@
|
||||
//
|
||||
// _helper.scss
|
||||
//
|
||||
.fw-medium {
|
||||
font-weight: $fw-medium;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 100px 0;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-two {
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
background-color: $overlay;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.bg-overlay-white {
|
||||
background-color: $bg-overlay-white;
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: $bg-gradient-primary;
|
||||
}
|
||||
|
||||
.bg-linear-gradient {
|
||||
background: $linear-gradient;
|
||||
}
|
||||
|
||||
.bg-linear-gradient-2 {
|
||||
background: $linear-gradient-2;
|
||||
}
|
||||
|
||||
.bg-linear-gradient-3 {
|
||||
background: $linear-gradient-3;
|
||||
}
|
||||
|
||||
.bg-gradient-overlay {
|
||||
background: $gradient-overlay;
|
||||
}
|
||||
|
||||
.bg-gradient-overlay-2 {
|
||||
background: $gradient-overlay-2;
|
||||
}
|
||||
|
||||
.bg-primary-gradient-overlay {
|
||||
background: $primary-gradient-overlay;
|
||||
}
|
||||
|
||||
.bg-gradient-white-overlay {
|
||||
background: $gradient-white-overlay;
|
||||
}
|
||||
|
||||
//Title
|
||||
.title-heading {
|
||||
line-height: 26px;
|
||||
|
||||
.heading {
|
||||
font-size: 65px !important;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 35px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.para-desc {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
||||
// position: relative;
|
||||
.title {
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 30px !important;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-shadow-title {
|
||||
text-shadow: 2px 0 0 $white,
|
||||
-2px 0 0 $white,
|
||||
0 4px 0 rgba($white, 0.4),
|
||||
0 -2px 0 $white,
|
||||
1px 1px $white,
|
||||
-1px -1px 0 $white,
|
||||
1px -1px 0 $white,
|
||||
-1px 1px 0 $white;
|
||||
}
|
||||
|
||||
.para-desc {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.mt-100 {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
//Feature post placeholder
|
||||
.feature-posts-placeholder {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 66.6%;
|
||||
|
||||
@media (max-width: 425px) {
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.margin-top-100 {
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mt-60 {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded
|
||||
.rounded {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.rounded-top {
|
||||
border-top-left-radius: 4px !important;
|
||||
border-top-right-radius: 4px !important;
|
||||
}
|
||||
|
||||
.rounded-top-1 {
|
||||
border-top-left-radius: $border-radius-sm !important;
|
||||
border-top-right-radius: $border-radius-sm !important;
|
||||
}
|
||||
|
||||
.rounded-top-2 {
|
||||
border-top-left-radius: $border-radius !important;
|
||||
border-top-right-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-top-3 {
|
||||
border-top-left-radius: $border-radius-lg !important;
|
||||
border-top-right-radius: $border-radius-lg !important;
|
||||
}
|
||||
|
||||
.rounded-top-4 {
|
||||
border-top-left-radius: $border-radius-xl !important;
|
||||
border-top-right-radius: $border-radius-xl !important;
|
||||
}
|
||||
|
||||
.rounded-top-5 {
|
||||
border-top-left-radius: $border-radius-2xl !important;
|
||||
border-top-right-radius: $border-radius-2xl !important;
|
||||
}
|
||||
|
||||
.rounded-left {
|
||||
border-top-left-radius: 6px !important;
|
||||
border-bottom-left-radius: 6px !important;
|
||||
}
|
||||
|
||||
.rounded-left-1 {
|
||||
border-top-left-radius: $border-radius-sm !important;
|
||||
border-bottom-left-radius: $border-radius-sm !important;
|
||||
}
|
||||
|
||||
.rounded-left-2 {
|
||||
border-top-left-radius: $border-radius !important;
|
||||
border-bottom-left-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-left-3 {
|
||||
border-top-left-radius: $border-radius-lg !important;
|
||||
border-bottom-left-radius: $border-radius-lg !important;
|
||||
}
|
||||
|
||||
.rounded-left-4 {
|
||||
border-top-left-radius: $border-radius-xl !important;
|
||||
border-bottom-left-radius: $border-radius-xl !important;
|
||||
}
|
||||
|
||||
.rounded-left-5 {
|
||||
border-top-left-radius: $border-radius-2xl !important;
|
||||
border-bottom-left-radius: $border-radius-2xl !important;
|
||||
}
|
||||
|
||||
.rounded-bottom {
|
||||
border-bottom-left-radius: 6px !important;
|
||||
border-bottom-right-radius: 6px !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-1 {
|
||||
border-bottom-right-radius: $border-radius-sm !important;
|
||||
border-bottom-left-radius: $border-radius-sm !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-2 {
|
||||
border-bottom-right-radius: $border-radius !important;
|
||||
border-bottom-left-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-3 {
|
||||
border-bottom-right-radius: $border-radius-lg !important;
|
||||
border-bottom-left-radius: $border-radius-lg !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-4 {
|
||||
border-bottom-right-radius: $border-radius-xl !important;
|
||||
border-bottom-left-radius: $border-radius-xl !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-5 {
|
||||
border-bottom-right-radius: $border-radius-2xl !important;
|
||||
border-bottom-left-radius: $border-radius-2xl !important;
|
||||
}
|
||||
|
||||
.rounded-right {
|
||||
border-top-right-radius: 6px !important;
|
||||
border-bottom-right-radius: 6px !important;
|
||||
}
|
||||
|
||||
.rounded-right-1 {
|
||||
border-bottom-right-radius: $border-radius-sm !important;
|
||||
border-top-right-radius: $border-radius-sm !important;
|
||||
}
|
||||
|
||||
.rounded-right-2 {
|
||||
border-bottom-right-radius: $border-radius !important;
|
||||
border-top-right-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-right-3 {
|
||||
border-bottom-right-radius: $border-radius-lg !important;
|
||||
border-top-right-radius: $border-radius-lg !important;
|
||||
}
|
||||
|
||||
.rounded-right-4 {
|
||||
border-bottom-right-radius: $border-radius-xl !important;
|
||||
border-top-right-radius: $border-radius-xl !important;
|
||||
}
|
||||
|
||||
.rounded-right-5 {
|
||||
border-bottom-right-radius: $border-radius-2xl !important;
|
||||
border-top-right-radius: $border-radius-2xl !important;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
//Border
|
||||
@each $name,
|
||||
$value in $theme-colors {
|
||||
.border-#{$name} {
|
||||
border-color: #{$value} !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Opacity
|
||||
.opacity-05 {
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.opacity-075 {
|
||||
opacity: 0.075;
|
||||
}
|
||||
|
||||
.opacity-1 {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.opacity-2 {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.opacity-3 {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.opacity-4 {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.opacity-5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.opacity-6 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.opacity-7 {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.opacity-8 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.opacity-9 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
//Z Index css
|
||||
.z-index-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.z-index-0 {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.z-index-m-1 {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
//Small
|
||||
.small,
|
||||
small {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
//Social icons
|
||||
.social-icon {
|
||||
li {
|
||||
a {
|
||||
color: $dark;
|
||||
border: 1px solid $dark;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: all 0.4s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.fea-social {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
border-color: $primary !important;
|
||||
color: $foot-social-color-white !important;
|
||||
|
||||
.fea-social {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.social {
|
||||
li {
|
||||
a {
|
||||
color: $foot-social-color;
|
||||
border-color: $social-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.foot-social-icon {
|
||||
li {
|
||||
a {
|
||||
color: $foot-social-color;
|
||||
border-color: lighten($footer, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//back to top
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
display: none;
|
||||
transition: all 0.5s ease;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
line-height: 33px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
text-align: center;
|
||||
text-align: -moz-center;
|
||||
text-align: -webkit-center;
|
||||
padding-top: 7px;
|
||||
background: $primary;
|
||||
color: $back-to-top-color !important;
|
||||
|
||||
.icons {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: rotate(45deg);
|
||||
|
||||
.icons {
|
||||
transform: rotate(-45deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//position-middle-bottom
|
||||
.position-middle-bottom {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//Text-color-white
|
||||
.text-color-white {
|
||||
color: $text-color-white !important;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//Google Material Symbol Icons
|
||||
.material-icons {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
overflow: hidden;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
/* Recommended icon sizes */
|
||||
span,
|
||||
i {
|
||||
&.size-16 {
|
||||
font-size: 16px !important;
|
||||
font-variation-settings: 'OPSZ' 16;
|
||||
}
|
||||
&.size-20 {
|
||||
font-size: 20px !important;
|
||||
font-variation-settings: 'OPSZ' 20;
|
||||
}
|
||||
&.size-24 {
|
||||
font-size: 24px !important;
|
||||
font-variation-settings: 'OPSZ' 24;
|
||||
}
|
||||
&.size-40 {
|
||||
font-size: 40px !important;
|
||||
font-variation-settings: 'OPSZ' 40;
|
||||
}
|
||||
&.size-48 {
|
||||
font-size: 48px !important;
|
||||
font-variation-settings: 'OPSZ' 48;
|
||||
}
|
||||
}
|
||||
|
||||
/* NavBar menu icon - add rounded square background */
|
||||
span.icon-bg {
|
||||
background: $primary;
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
font-variation-settings: 'GRAD' -25;
|
||||
margin-left: -8px !important;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* NavBar menu icon spacing */
|
||||
span.menu-icon {
|
||||
margin: 0px 5px 3px -2px;
|
||||
}
|
||||
15
themes/lotusdocs/assets/scss/custom/pages/_hero.scss
Normal file
15
themes/lotusdocs/assets/scss/custom/pages/_hero.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// hero.scss
|
||||
//
|
||||
|
||||
@media (max-width:767px) {
|
||||
.classic-hero-image img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-size: cover;
|
||||
padding-top: 70px;
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
.icv{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
cursor:row-resize
|
||||
}
|
||||
.icv__icv--vertical{
|
||||
cursor:row-resize
|
||||
}
|
||||
.icv__icv--horizontal{
|
||||
cursor:col-resize
|
||||
}
|
||||
.icv__img{
|
||||
pointer-events:none;
|
||||
-o-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-webkit-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
max-width:none;
|
||||
width:100%;
|
||||
margin:0 !important;
|
||||
padding:0 !important;
|
||||
border:0 !important;
|
||||
border-radius:0 !important;
|
||||
top:0;
|
||||
display:block
|
||||
}
|
||||
.icv__is--fluid .icv__img{
|
||||
display:none
|
||||
}
|
||||
.icv__img-a{
|
||||
height:auto;
|
||||
position:static;
|
||||
z-index:1;
|
||||
left:0px
|
||||
}
|
||||
.icv__img-b{
|
||||
height:100%;
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
left:auto;
|
||||
right:0px;
|
||||
width:auto
|
||||
}
|
||||
.icv__icv--vertical .icv__img-b{
|
||||
width:100%;
|
||||
height:auto
|
||||
}
|
||||
.icv__imposter{
|
||||
z-index:4;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:100%
|
||||
}
|
||||
.icv__wrapper{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
right:0px;
|
||||
top:0px;
|
||||
overflow:hidden;
|
||||
background-size:cover;
|
||||
background-position:center center;
|
||||
z-index:3
|
||||
}
|
||||
.icv__is--fluid .icv__wrapper,.icv__icv--vertical .icv__wrapper{
|
||||
width:100% !important
|
||||
}
|
||||
.icv__is--fluid .icv__wrapper,.icv__icv--horizontal .icv__wrapper{
|
||||
height:100% !important
|
||||
}
|
||||
.icv__fluidwrapper{
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%
|
||||
}
|
||||
.icv__control{
|
||||
position:absolute;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-direction:normal;
|
||||
-ms-flex-direction:column;
|
||||
flex-direction:column;
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
height:100%;
|
||||
top:0px;
|
||||
z-index:5
|
||||
}
|
||||
.icv__icv--vertical .icv__control{
|
||||
-webkit-box-orient:horizontal;
|
||||
-webkit-box-direction:normal;
|
||||
-ms-flex-direction:row;
|
||||
flex-direction:row;
|
||||
left:0;
|
||||
width:100%
|
||||
}
|
||||
.icv__control-line{
|
||||
height:50%;
|
||||
width:2px;
|
||||
z-index:6
|
||||
}
|
||||
.icv__icv--vertical .icv__control-line{
|
||||
width:50%
|
||||
}
|
||||
.icv__theme-wrapper{
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-pack:justify;
|
||||
-ms-flex-pack:justify;
|
||||
justify-content:space-between;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
position:absolute;
|
||||
-webkit-transition:all 0.1s ease-out 0s;
|
||||
transition:all 0.1s ease-out 0s;
|
||||
z-index:5
|
||||
}
|
||||
.icv__icv--vertical .icv__theme-wrapper{
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-direction:normal;
|
||||
-ms-flex-direction:column;
|
||||
flex-direction:column
|
||||
}
|
||||
.icv__arrow-wrapper{
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
-webkit-transition:all 0.1s ease-out 0s;
|
||||
transition:all 0.1s ease-out 0s
|
||||
}
|
||||
.icv__arrow-a{
|
||||
-webkit-transform:scale(1.5) rotateZ(180deg);
|
||||
transform:scale(1.5) rotateZ(180deg);
|
||||
height:20px;
|
||||
width:20px;
|
||||
-webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,0.33));
|
||||
filter:drop-shadow(0px -3px 5px rgba(0,0,0,0.33))
|
||||
}
|
||||
.icv__arrow-b{
|
||||
-webkit-transform:scale(1.5) rotateZ(0deg);
|
||||
transform:scale(1.5) rotateZ(0deg);
|
||||
height:20px;
|
||||
width:20px;
|
||||
-webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,0.33));
|
||||
filter:drop-shadow(0px 3px 5px rgba(0,0,0,0.33))
|
||||
}
|
||||
.icv__circle{
|
||||
width:50px;
|
||||
height:50px;
|
||||
-webkit-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
-ms-flex-negative:0;
|
||||
flex-shrink:0;
|
||||
border-radius:999px
|
||||
}
|
||||
.icv__label{
|
||||
position:absolute;
|
||||
bottom:1rem;
|
||||
z-index:12;
|
||||
background:rgba(0,0,0,0.33);
|
||||
color:white;
|
||||
border-radius:3px;
|
||||
padding:0.5rem 0.75rem;
|
||||
font-size:0.85rem;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
.icv__label.vertical{
|
||||
bottom:auto;
|
||||
left:1rem
|
||||
}
|
||||
.icv__label.on-hover{
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0);
|
||||
-webkit-transition:0.25s cubic-bezier(0.68, 0.26, 0.58, 1.22);
|
||||
transition:0.25s cubic-bezier(0.68, 0.26, 0.58, 1.22)
|
||||
}
|
||||
.icv:hover .icv__label.on-hover{
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
.icv__label-before{
|
||||
left:1rem
|
||||
}
|
||||
.icv__label-after{
|
||||
right:1rem
|
||||
}
|
||||
.icv__label-before.vertical{
|
||||
top:1rem
|
||||
}
|
||||
.icv__label-after.vertical{
|
||||
bottom:1rem;
|
||||
right:auto
|
||||
}
|
||||
.icv__body{
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
/*# sourceMappingURL=image-compare-viewer.min.css.map*/
|
||||
@@ -0,0 +1,12 @@
|
||||
// Google Material Icon Font via
|
||||
// https://github.com/marella/material-symbols/tree/main/material-symbols
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
font-style: normal;
|
||||
src: local('Material Icons'), local('MaterialIcons-Outlined'),
|
||||
url('../docs/fonts/material-symbols-outlined.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
// url('../docs/fonts/material-symbols-outlined.woff') format('woff'); /* Modern Browsers */
|
||||
}
|
||||
102
themes/lotusdocs/assets/scss/custom/structure/_footer.scss
Normal file
102
themes/lotusdocs/assets/scss/custom/structure/_footer.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
//
|
||||
// footer.scss
|
||||
//
|
||||
|
||||
.footer {
|
||||
background: $footer;
|
||||
position: relative;
|
||||
color: $footer-text;
|
||||
|
||||
.footer-py-60 {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.footer-py-30 {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.logo-footer {
|
||||
font-size: 22px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-footer svg {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.footer-head {
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
color: $footer-head-color;
|
||||
}
|
||||
.text-foot {
|
||||
color: $footer-text;
|
||||
}
|
||||
.footer-list {
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
a{
|
||||
transition: all 0.5s ease;
|
||||
&:hover {
|
||||
color: lighten($footer-text, 20%);
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-border,
|
||||
.footer-bar {
|
||||
border-top: 1px solid lighten($footer, 5%);
|
||||
}
|
||||
.border {
|
||||
border-color: lighten($footer, 5%) !important;
|
||||
}
|
||||
|
||||
//Footer Light
|
||||
&.footer-light {
|
||||
background: $light;
|
||||
color: $gray-700;
|
||||
.footer-head {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.foot-subscribe {
|
||||
.form-control {
|
||||
background-color: $light;
|
||||
border: 1px solid $border-color;
|
||||
color: $light;
|
||||
}
|
||||
&.foot-white {
|
||||
.form-control {
|
||||
color: $footer-text;
|
||||
}
|
||||
}
|
||||
input{
|
||||
&::placeholder{
|
||||
color: $footer-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border-color: $border-color !important;
|
||||
}
|
||||
.text-foot {
|
||||
color: $muted;
|
||||
}
|
||||
.footer-list {
|
||||
li {
|
||||
a{
|
||||
&:hover {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
themes/lotusdocs/assets/scss/custom/structure/_general.scss
Normal file
35
themes/lotusdocs/assets/scss/custom/structure/_general.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
body {
|
||||
font-family: $font-family-secondary;
|
||||
overflow-x: hidden !important;
|
||||
font-size: $font-size-base;
|
||||
color: $body-color;
|
||||
background-color: $body-bg;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
html {
|
||||
scroll-padding-top: 80px;
|
||||
}
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $font-family-base;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
}
|
||||
::selection {
|
||||
background: rgba($primary, 0.9);
|
||||
color: $white;
|
||||
}
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.four-oh-four {
|
||||
min-height: calc(100vh - 180px);
|
||||
@media (max-width: 767px) {
|
||||
min-height: calc(100vh - 241px);
|
||||
}
|
||||
}
|
||||
387
themes/lotusdocs/assets/scss/custom/structure/_topbar.scss
Normal file
387
themes/lotusdocs/assets/scss/custom/structure/_topbar.scss
Normal file
@@ -0,0 +1,387 @@
|
||||
//
|
||||
// menu.scss
|
||||
//
|
||||
|
||||
#topnav {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
z-index: 999;
|
||||
border: 0;
|
||||
-webkit-transition: all .5s ease;
|
||||
transition: all .5s ease;
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
color: $dark !important;
|
||||
.l-dark,
|
||||
.logo-dark-mode {
|
||||
display: none;
|
||||
}
|
||||
.l-light,
|
||||
.logo-light-mode {
|
||||
display: inline-block;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
#navigation {
|
||||
&.toggle-menu {
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 0;
|
||||
border: none;
|
||||
.toggle-menu-item {
|
||||
display: block;
|
||||
>li {
|
||||
float: none;
|
||||
margin: 0 16px !important;
|
||||
text-align: center;
|
||||
>a {
|
||||
padding: 16px 0;
|
||||
min-height: auto;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
border: 0;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
.lines {
|
||||
width: 20px;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 4px 0 0 0;
|
||||
height: 18px;
|
||||
}
|
||||
span {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: $primary;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
transition: transform .5s ease;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
&.open {
|
||||
span {
|
||||
position: absolute;
|
||||
&:first-child {
|
||||
top: 6px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
visibility: hidden;
|
||||
}
|
||||
&:last-child {
|
||||
width: 100%;
|
||||
top: 6px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
&:hover,
|
||||
&:focus,
|
||||
.navigation-menu > li > a:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
float: left;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
&:hover > a,
|
||||
&.active > a{
|
||||
color: $primary !important;
|
||||
}
|
||||
> a {
|
||||
display: flex;
|
||||
color: $dark;
|
||||
font-size: 15px;
|
||||
background-color: transparent !important;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
line-height: 24px;
|
||||
// text-transform: uppercase;
|
||||
font-family: $font-family-base;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
align-items: center;
|
||||
&:hover,
|
||||
&:active{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll {
|
||||
background-color: $white;
|
||||
border: none;
|
||||
box-shadow: $shadow;
|
||||
.navigation-menu {
|
||||
> li {
|
||||
> a {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
> .menu-arrow {
|
||||
border-color: $dark;
|
||||
}
|
||||
&:hover, &.active {
|
||||
> a {
|
||||
color: $primary;
|
||||
}
|
||||
> .menu-arrow {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-sticky{
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 0 3px rgba(60,72,88,.15);
|
||||
box-shadow: 0 0 3px rgba(60,72,88,.15);
|
||||
.navigation-menu {
|
||||
&.nav-light {
|
||||
> li {
|
||||
> a {
|
||||
color: $dark;
|
||||
}
|
||||
&.active {
|
||||
> a {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
> .menu-arrow {
|
||||
border-color: $primary !important;
|
||||
}
|
||||
> a {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tagline-height {
|
||||
top: 0 !important;
|
||||
}
|
||||
.logo {
|
||||
.l-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
.l-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
margin-right: 15px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 0;
|
||||
|
||||
svg {
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#topnav {
|
||||
.navigation-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
> li {
|
||||
> a {
|
||||
min-height: 70px;
|
||||
}
|
||||
&:hover {
|
||||
> .menu-arrow {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
&:hover > a,
|
||||
&.active > a{
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
&.nav-light {
|
||||
> li {
|
||||
> a {
|
||||
color: rgba($white, 0.5);
|
||||
}
|
||||
&.active {
|
||||
> a {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
> .menu-arrow {
|
||||
border-color: $white !important;
|
||||
}
|
||||
> a {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-right {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
&.nav-left {
|
||||
justify-content: flex-start !important;
|
||||
> li {
|
||||
&.last-elements {
|
||||
.submenu {
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
&:before {
|
||||
left: 45px !important;
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
display: none;
|
||||
}
|
||||
#navigation {
|
||||
display: block!important;
|
||||
}
|
||||
&.scroll {
|
||||
top: 0;
|
||||
.navigation-menu {
|
||||
> li {
|
||||
> a {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll-active {
|
||||
.navigation-menu {
|
||||
> li {
|
||||
> a {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#topnav {
|
||||
background-color: $topnav-bg;
|
||||
min-height: 74px;
|
||||
.logo {
|
||||
.l-dark {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.l-light {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
width: auto;
|
||||
height: 71px;
|
||||
}
|
||||
|
||||
#navigation{
|
||||
max-height: 400px;
|
||||
}
|
||||
.navigation-menu {
|
||||
float: none;
|
||||
> li {
|
||||
float: none;
|
||||
> a {
|
||||
color: $dark;
|
||||
padding: 10px 20px;
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigation-menu > li > a:hover,
|
||||
.menu-extras .menu-item {
|
||||
border-color: $muted;
|
||||
}
|
||||
.navbar-header {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: none;
|
||||
height: auto;
|
||||
padding-bottom: 0;
|
||||
overflow: auto;
|
||||
border-top: 1px solid darken($light,2%);
|
||||
border-bottom: 1px solid darken($light,2%);
|
||||
background-color: $topnav-bg;
|
||||
&.open {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-white-bg {
|
||||
background-color: $navbar-white-bg !important;
|
||||
}
|
||||
|
||||
//Nav Social Button
|
||||
.social-link {
|
||||
> li {
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user