776 lines
16 KiB
SCSS
776 lines
16 KiB
SCSS
/*-----------------------------------------------
|
|
| Sidebar
|
|
-----------------------------------------------*/
|
|
.sticky-sidebar {
|
|
position: sticky;
|
|
z-index: $zindex-sticky;
|
|
top: $navbar-top-height + 1;
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| Custom circle
|
|
-----------------------------------------------*/
|
|
.circle-dashed {
|
|
border: 1px dashed var(--#{$prefix}primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| Miscellaneous
|
|
-----------------------------------------------*/
|
|
|
|
.hover-text-decoration-none {
|
|
@include hover-focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.resize-none {
|
|
resize: none;
|
|
}
|
|
|
|
.collapsed .collapse-icon {
|
|
transition: $transition-base;
|
|
transform: rotate(0deg);
|
|
}
|
|
.collapse-icon {
|
|
transition: $transition-base;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
[data-dismiss='dropdown'],
|
|
[data-bs-offset-top],
|
|
[data-bs-toggle='collapse'],
|
|
[data-bs-toggle='tooltip'],
|
|
[data-bs-toggle='popover'] {
|
|
* {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| Outline
|
|
-----------------------------------------------*/
|
|
|
|
.outline-none {
|
|
outline: none;
|
|
box-shadow: none;
|
|
@include hover-focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| Vertical Line (used in kanban header)
|
|
-----------------------------------------------*/
|
|
.vertical-line {
|
|
&:after {
|
|
position: absolute;
|
|
content: '';
|
|
height: 75%;
|
|
width: 1px;
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
&.vertical-line-400 {
|
|
&:after {
|
|
background-color: var(--#{$prefix}quaternary-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Transition */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.transition-base {
|
|
transition: $transition-base;
|
|
}
|
|
.transition-none {
|
|
transition: none;
|
|
}
|
|
|
|
.fsp-75 {
|
|
font-size: 75%;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Width */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
// used in chat
|
|
.min-w-0 {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Terms sidebar */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.terms-sidebar {
|
|
.nav-link {
|
|
color: var(--#{$prefix}quaternary-color);
|
|
font-weight: $font-weight-medium;
|
|
font-family: var(--#{$prefix}font-sans-serif);
|
|
&.active {
|
|
color: var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider-content-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
padding-left: map-get($spacers, 2);
|
|
padding-right: map-get($spacers, 2);
|
|
background-color: var(--#{$prefix}body-bg);
|
|
font-family: var(--#{$prefix}font-sans-serif);
|
|
font-size: map-get($font-sizes, 9);
|
|
color: rgba(var(--#{$prefix}tertiary-color-rgb), 0.85);
|
|
white-space: nowrap;
|
|
font-weight: $font-weight-bold;
|
|
.bg-auth-card & {
|
|
[data-bs-theme='dark'] & {
|
|
background-color: $body-bg-dark !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-check[data-theme-control]:checked + label {
|
|
display: none;
|
|
}
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Height */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
// html {
|
|
// position: relative;
|
|
// }
|
|
.content {
|
|
min-height: 100vh;
|
|
// min-height: calc(100vh - $navbar-top-height);
|
|
padding: $content-padding-top map-get($spacers, 4) $content-padding-bottom
|
|
map-get($spacers, 4);
|
|
position: relative;
|
|
padding-bottom: $footer-height + 2;
|
|
@include media-breakpoint-up(sm) {
|
|
padding-bottom: $footer-height;
|
|
}
|
|
}
|
|
.footer {
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: $footer-height + 2;
|
|
border-top: 1px solid $navbar-footer-border-color;
|
|
padding: 0 map-get($spacers, 4);
|
|
left: 0;
|
|
@include media-breakpoint-up(sm) {
|
|
height: $footer-height;
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
padding: 0 map-get($spacers, 6);
|
|
}
|
|
}
|
|
|
|
.bullet-item {
|
|
height: 0.5rem;
|
|
width: 1rem;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Padding */
|
|
/* -------------------------------------------------------------------------- */
|
|
.pt-navbar {
|
|
padding-top: var(--#{$prefix}navbar-top-height);
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Logo */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.logo-text {
|
|
font-size: 1.63625rem;
|
|
color: var(--#{$prefix}logo-text);
|
|
font-weight: $font-weight-semibold;
|
|
letter-spacing: -0.04em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.notification-card {
|
|
&.unread {
|
|
background-color: var(--#{$prefix}body-highlight-bg);
|
|
}
|
|
}
|
|
.notification-card:hover {
|
|
background-color: var(--#{$prefix}secondary-bg) !important;
|
|
}
|
|
.notification-dropdown {
|
|
.dropdown-toggle {
|
|
&:hover {
|
|
border-color: var(--#{$prefix}border-color);
|
|
background: transparent;
|
|
}
|
|
}
|
|
.dropdown-menu {
|
|
right: 0;
|
|
left: unset !important;
|
|
}
|
|
}
|
|
|
|
.btn-square-sm {
|
|
height: 1.875rem;
|
|
width: 1.875rem;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.btn-square {
|
|
height: 2.375rem;
|
|
width: 2.375rem;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Pricing Grid
|
|
.pricing--hover {
|
|
@include hover-focus {
|
|
.warning-boxshadow {
|
|
box-shadow: 0px 0px 0px 4px rgba(229, 120, 11, 0.2);
|
|
border-radius: 0.5rem;
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
.card-form-check-input {
|
|
// + {
|
|
// label {
|
|
// border: 1px solid transparent;
|
|
// border-radius: 0.5rem;
|
|
// }
|
|
// }
|
|
&:checked {
|
|
+ {
|
|
div {
|
|
.card {
|
|
border: 1px solid var(--#{$prefix}primary-light);
|
|
box-shadow: 0px 0px 0px 4px rgba(56, 116, 255, 0.2);
|
|
.radio-circle {
|
|
border: 5px solid var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.pricing-plan-recommended {
|
|
&:checked {
|
|
+ {
|
|
div {
|
|
.card {
|
|
border: 1px solid var(--#{$prefix}warning-light);
|
|
box-shadow: 0px 0px 0px 4px rgba(229, 120, 11, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-bs-theme='dark'] {
|
|
.footer-bg {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.text-illustration-underline {
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.bg-linear-gradient {
|
|
background: linear-gradient(
|
|
95.11deg,
|
|
#f24e1e -21.8%,
|
|
#ff7262 -2.23%,
|
|
#a259ff 46.16%,
|
|
#1abcfe 79.11%,
|
|
#0acf83 116.18%
|
|
);
|
|
}
|
|
|
|
// ---- hover bg transparent
|
|
.hover-bg-transparent {
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------ font-awesome ------------------------------ */
|
|
.fa-ul {
|
|
[dir='rtl'] & {
|
|
--fa-li-margin: -0.5em !important;
|
|
&.pricing {
|
|
margin-left: var(--fa-li-margin, 2.5em) !important;
|
|
}
|
|
}
|
|
margin-left: var(--fa-li-margin, 2.5em);
|
|
.fa-li {
|
|
left: calc(var(--fa-li-width, 2em) * -1) !important;
|
|
}
|
|
}
|
|
.page-title-sticky-top {
|
|
@include media-breakpoint-up(xl) {
|
|
position: sticky;
|
|
top: calc(var(--phoenix-navbar-top-height) + 3.725rem);
|
|
}
|
|
}
|
|
|
|
.pricing-business-plus {
|
|
[data-bs-theme='dark'] & {
|
|
background-color: rgba(var(--#{$prefix}warning-rgb), 0.08) !important;
|
|
border: 1px solid rgba(var(--#{$prefix}warning-rgb), 0.2);
|
|
}
|
|
}
|
|
|
|
// echarts example
|
|
.echart-quartet-scatter-chart-example {
|
|
min-height: 31.25rem;
|
|
|
|
@include media-breakpoint-down(md) {
|
|
min-height: 65.625rem;
|
|
}
|
|
}
|
|
.echart-radar-customized-chart-example {
|
|
height: 22rem;
|
|
|
|
@include media-breakpoint-down(xl) {
|
|
height: 45rem;
|
|
}
|
|
}
|
|
.echart-radar-multiple-chart-example {
|
|
height: 21rem;
|
|
|
|
@include media-breakpoint-down(xxl) {
|
|
height: 35rem;
|
|
}
|
|
@include media-breakpoint-down(lg) {
|
|
height: 50rem;
|
|
}
|
|
}
|
|
|
|
.faq-list {
|
|
li {
|
|
.fa-circle {
|
|
font-size: 6px;
|
|
margin-right: 1.25rem;
|
|
margin-top: 6px;
|
|
color: var(--#{$prefix}quaternary-bg);
|
|
}
|
|
}
|
|
}
|
|
.faq-title-box {
|
|
top: map-get($spacers, 5);
|
|
width: 90%;
|
|
@include media-breakpoint-up(md) {
|
|
width: 75%;
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
width: 55%;
|
|
}
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| fontawesome stack icon border color
|
|
-----------------------------------------------*/
|
|
.stack-circle path {
|
|
stroke: var(--#{$prefix}body-bg);
|
|
stroke-width: 60;
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| action dropdown btn
|
|
-----------------------------------------------*/
|
|
.action-btn {
|
|
min-height: 32px;
|
|
min-width: 45px;
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| additional class
|
|
-----------------------------------------------*/
|
|
.w-max-content {
|
|
width: max-content !important;
|
|
}
|
|
.w-min-content {
|
|
width: min-content !important;
|
|
}
|
|
|
|
/*-----------------------------------------------
|
|
| widgets scrollspy
|
|
-----------------------------------------------*/
|
|
.widgets-scrollspy-nav {
|
|
position: sticky;
|
|
top: var(--#{$prefix}navbar-top-height);
|
|
.nav {
|
|
.nav-item {
|
|
.nav-link {
|
|
&.active {
|
|
color: var(--#{$prefix}primary) !important;
|
|
border-bottom: 1px solid var(--#{$prefix}primary) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fill-body-bg {
|
|
fill: var(--#{$prefix}body-bg);
|
|
}
|
|
.fill-emphasis-bg {
|
|
fill: var(--#{$prefix}emphasis-bg);
|
|
}
|
|
|
|
.text-stats-circle-success {
|
|
color: var(--#{$prefix}success-bg-subtle) !important;
|
|
[data-bs-theme='dark'] & {
|
|
color: #134207 !important;
|
|
}
|
|
}
|
|
.text-stats-circle-warning {
|
|
color: var(--#{$prefix}warning-bg-subtle) !important;
|
|
[data-bs-theme='dark'] & {
|
|
color: #52310b !important;
|
|
}
|
|
}
|
|
.text-stats-circle-danger {
|
|
color: var(--#{$prefix}danger-bg-subtle) !important;
|
|
[data-bs-theme='dark'] & {
|
|
color: #612017 !important;
|
|
}
|
|
}
|
|
|
|
.circle-icon-item {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.circle-icon-item-md {
|
|
width: 2.375rem;
|
|
height: 2.375rem;
|
|
border-radius: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-wish {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
color: var(--#{$prefix}white);
|
|
border: 1px solid var(--#{$prefix}white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
padding: 0;
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.active {
|
|
background-color: var(--#{$prefix}white) !important;
|
|
color: var(--#{$prefix}black) !important;
|
|
}
|
|
&.btn-wish-primary {
|
|
color: var(--#{$prefix}primary);
|
|
border: 1px solid var(--#{$prefix}primary);
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background-color: var(--#{$prefix}primary) !important;
|
|
color: var(--#{$prefix}white) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rating-radio {
|
|
+ {
|
|
label {
|
|
padding: map-get($spacers, 3);
|
|
border: 1px solid var(--#{$prefix}border-color-translucent) !important;
|
|
.check-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&:checked {
|
|
+ {
|
|
label {
|
|
border: 1px solid var(--#{$prefix}primary) !important;
|
|
.check-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-layout-fixed {
|
|
table-layout: fixed;
|
|
}
|
|
.table-compare {
|
|
--column-numbers: 3;
|
|
--column-width: 250px;
|
|
tbody {
|
|
tr {
|
|
width: calc(var(--column-numbers) * var(--column-width));
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
td {
|
|
&:first-child {
|
|
flex: 0 0 100%;
|
|
~ td {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
tbody {
|
|
tr {
|
|
display: table-row;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ping icon
|
|
.ping-icon-wrapper {
|
|
position: relative;
|
|
width: 10px;
|
|
height: 10px;
|
|
display: flex;
|
|
.ping-icon-bg {
|
|
position: absolute;
|
|
background-color: var(--#{$prefix}success);
|
|
display: inline-flex;
|
|
border-radius: 50%;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 0.75;
|
|
animation: animatePing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
.ping-icon {
|
|
position: relative;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
color: var(--#{$prefix}success);
|
|
}
|
|
}
|
|
|
|
@keyframes animatePing {
|
|
75%,
|
|
100% {
|
|
transform: scale(2.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rtl__flip {
|
|
[dir='rtl'] & {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
.radio-circle {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
border-radius: 50%;
|
|
transition: border 0.2s ease;
|
|
}
|
|
|
|
.video-container {
|
|
position: relative;
|
|
&:hover {
|
|
.circle-icon-item {
|
|
display: none;
|
|
}
|
|
.circle-icon-item-md {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tour-direction-bg {
|
|
background-position: top 35% center !important;
|
|
background-size: auto 80% !important;
|
|
[dir='rtl'] & {
|
|
transform: scaleY(-1);
|
|
background-position: top 62% center !important;
|
|
}
|
|
}
|
|
|
|
// password toggle
|
|
[data-password-toggle] {
|
|
.hide {
|
|
display: none;
|
|
}
|
|
&.show-password {
|
|
.hide {
|
|
display: block;
|
|
}
|
|
.show {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gallery-column-separator {
|
|
position: absolute;
|
|
height: 100%;
|
|
padding: 0;
|
|
width: auto;
|
|
border-right: 1px solid var(--#{$prefix}border-color-translucent);
|
|
}
|
|
|
|
.gallery-column-separator-1 {
|
|
display: none;
|
|
@include media-breakpoint-up(sm) {
|
|
display: block;
|
|
left: 50%;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
left: calc(100% / 3);
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
left: 25%;
|
|
}
|
|
}
|
|
.gallery-column-separator-2 {
|
|
display: none;
|
|
@include media-breakpoint-up(md) {
|
|
display: block;
|
|
left: calc((100% / 3) * 2);
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
left: 50%;
|
|
}
|
|
}
|
|
.gallery-column-separator-3 {
|
|
display: none;
|
|
@include media-breakpoint-up(xl) {
|
|
display: block;
|
|
left: 75%;
|
|
}
|
|
}
|
|
|
|
.album-item {
|
|
.photo-stack {
|
|
position: relative;
|
|
.photo-stack-top {
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 3;
|
|
.video-container {
|
|
video {
|
|
@include media-breakpoint-up(md) {
|
|
height: 160px !important;
|
|
}
|
|
@include media-breakpoint-up(xxl) {
|
|
height: 260px !important;
|
|
}
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
img {
|
|
@include media-breakpoint-up(md) {
|
|
height: 160px;
|
|
}
|
|
@include media-breakpoint-up(xxl) {
|
|
height: 260px;
|
|
}
|
|
transition: transform 0.5s ease;
|
|
}
|
|
}
|
|
.photo-stack-middle {
|
|
position: absolute;
|
|
width: 90%;
|
|
left: 50%;
|
|
bottom: -(map-get($spacers, 2));
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
}
|
|
.photo-stack-bottom {
|
|
position: absolute;
|
|
width: 80%;
|
|
left: 50%;
|
|
bottom: -(map-get($spacers, 3));
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
&:hover {
|
|
.top {
|
|
img {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
.title {
|
|
color: var(--#{$prefix}primary);
|
|
}
|
|
.dropdown-toggle {
|
|
background-color: var(--#{$prefix}emphasis-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.square-icon-box {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: $border-radius;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-check-input-transparent {
|
|
background-color: transparent;
|
|
&:checked {
|
|
background-color: var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
|
|
.pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
.underline-on-hover {
|
|
&:hover {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|