Add Lotusdocs theme

This commit is contained in:
Abner Coimbre
2026-01-11 16:46:05 -08:00
parent d051d46d1f
commit 8a4d04db58
577 changed files with 40404 additions and 0 deletions

View 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;
}
}

View 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;
}

View 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;
}

View File

@@ -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*/