Add Lotusdocs theme
This commit is contained in:
Abner Coimbre
241
themes/lotusdocs/assets/docs/scss/custom/components/_alerts.scss
Normal file
241
themes/lotusdocs/assets/docs/scss/custom/components/_alerts.scss
Normal file
@@ -0,0 +1,241 @@
|
||||
:root {
|
||||
--alert-border-color: #dee2e6;
|
||||
|
||||
// Default
|
||||
--alert-default-color: 225.9, 68%, 95.1%;
|
||||
--alert-default-bg: hsl(var(--alert-default-color));
|
||||
--alert-default-border-color: var(--alert-border-color);
|
||||
|
||||
// Primary
|
||||
--alert-primary-color: var(--primary-50-hsl);
|
||||
--alert-primary-bg: hsl(var(--alert-primary-color),0.5);
|
||||
--alert-primary-border-color: var(--alert-border-color);
|
||||
|
||||
// Info
|
||||
--alert-info-color: 204, 45.5%, 97.8%;
|
||||
--alert-info-bg: hsl(var(--alert-info-color));
|
||||
--alert-info-border-color: var(--alert-border-color);
|
||||
|
||||
// Success
|
||||
--alert-success-color: var(--emerald-50-hsl);
|
||||
--alert-success-bg: hsl(var(--alert-success-color),0.4);
|
||||
--alert-success-border-color: var(--alert-border-color);
|
||||
|
||||
// Danger
|
||||
--alert-danger-color: var(--cardinal-50-hsl);
|
||||
--alert-danger-bg: hsl(var(--alert-danger-color),0.5);
|
||||
--alert-danger-border-color: var(--alert-border-color);
|
||||
|
||||
// Warning
|
||||
--alert-warning-color: var(--yellow-50-hsl);
|
||||
--alert-warning-bg: hsl(var(--alert-warning-color),0.5);
|
||||
--alert-warning-border-color: var(--alert-border-color);
|
||||
|
||||
// Light
|
||||
--alert-light-bg: var(--gray-200);
|
||||
--alert-light-border-color: var(--alert-border-color);
|
||||
|
||||
// Dark
|
||||
--alert-dark-bg: var(--gray-800);
|
||||
--alert-dark-border-color: var(--alert-border-color);
|
||||
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--alert-border-color: var(--gray-800);
|
||||
|
||||
// Default
|
||||
--alert-default-bg: hsl(var(--alert-default-color),0.05);
|
||||
--alert-default-border-color: var(--alert-border-color);
|
||||
|
||||
// Primary
|
||||
--alert-primary-bg: hsl(var(--primary-hsl),0.1);
|
||||
--alert-primary-icon-color: var(--primary-200);
|
||||
--alert-primary-border-color: var(--primary-800);
|
||||
|
||||
// Info
|
||||
--alert-info-bg: hsl(var(--blue-500-hsl),0.1);
|
||||
--alert-info-icon-color: var(--blue-200);
|
||||
--alert-info-border-color: var(--blue-800);
|
||||
|
||||
// Success
|
||||
--alert-success-bg: hsl(var(--emerald-500-hsl),0.1);
|
||||
--alert-success-icon-color: var(--emerald-200);
|
||||
--alert-success-border-color: var(--emerald-800);
|
||||
|
||||
// Danger
|
||||
--alert-danger-bg: hsl(var(--cardinal-500-hsl),0.1);
|
||||
--alert-danger-icon-color: var(--cardinal-200);
|
||||
--alert-danger-border-color: var(--cardinal-800);
|
||||
|
||||
// Warning
|
||||
--alert-warning-bg: hsl(var(--yellow-500-hsl),0.1);
|
||||
--alert-warning-icon-color: var(--yellow-200);
|
||||
--alert-warning-border-color: var(--yellow-800);
|
||||
|
||||
// Light
|
||||
--alert-light-bg: var(--gray-900);
|
||||
--alert-light-icon-color: var(--gray-200);
|
||||
--alert-light-border-color: var(--gray-800);
|
||||
|
||||
// Dark
|
||||
--alert-dark-bg: var(--gray-400);
|
||||
--alert-dark-icon-color: var(--gray-800);
|
||||
--alert-dark-border-color: var(--gray-200);
|
||||
}
|
||||
.alert {
|
||||
// font-family: $font-family-monospace;
|
||||
font-size: var(--font-size-sm);
|
||||
border-radius: 4px;
|
||||
color: var(--gray-700);
|
||||
|
||||
p {
|
||||
line-height: 1.525rem;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
margin-right: 0.35rem;
|
||||
}
|
||||
|
||||
.alert-default {
|
||||
background-color: var(--alert-default-bg);
|
||||
border-color: var(--alert-border-color);
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
||||
.alert-white {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
background-color: var(--alert-primary-bg);
|
||||
border-color: var(--alert-primary-border-color);
|
||||
color: var(--text-default);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-primary-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-primary a {
|
||||
font-weight: bold;
|
||||
// color: $white;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--alert-success-bg);
|
||||
border-color: var(--alert-success-border-color);
|
||||
color: var(--text-default);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-success-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: var(--alert-info-bg);
|
||||
border-color: var(--alert-info-border-color);
|
||||
color: var(--text-default);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-info-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-info a {
|
||||
font-weight: bold;
|
||||
// color: #04414d;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: var(--alert-warning-bg);
|
||||
border-color: var(--alert-warning-border-color);
|
||||
color: var(--text-default);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-warning-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning .alert-link {
|
||||
color: #523e02;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: var(--alert-danger-bg);
|
||||
border-color: var(--alert-danger-border-color);
|
||||
color: var(--text-default);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-danger-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger .alert-link {
|
||||
color: #6a1a21;
|
||||
}
|
||||
|
||||
.alert-light {
|
||||
background-color: var(--alert-light-bg);
|
||||
border-color: var(--alert-light-border-color);
|
||||
color: var(--text-default);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-light-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-light .alert-link {
|
||||
color: #4f5050;
|
||||
}
|
||||
|
||||
.alert-dark {
|
||||
background-color: var(--alert-dark-bg);
|
||||
border-color: var(--alert-dark-border-color);
|
||||
color: var(--text-default-inv);
|
||||
|
||||
> .alert-icon span {
|
||||
color: var(--alert-dark-icon-color);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dark .alert-link {
|
||||
color: #101214;
|
||||
}
|
||||
|
||||
.alert .alert-link:hover,
|
||||
.alert .alert-link:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.alert-dismissible .btn-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 1rem;
|
||||
z-index: 2;
|
||||
padding: 0.5rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-size: 1.5rem;
|
||||
filter: invert(1) grayscale(100%) brightness(200%);
|
||||
}
|
||||
|
||||
[data-global-alert="closed"] #announcement {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// backgrounds.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--bg-default: hsl(var(--primary-800-hsl),0.1);
|
||||
--bg-default-border: hsl(var(--primary-800-hsl),0.1);
|
||||
--bg-default-color: var(--text-default);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--bg-default: var(--gray-800);
|
||||
--bg-default-border: hsl(var(--primary-200-hsl),0.1);
|
||||
--bg-default-color: var(--text-default);
|
||||
}
|
||||
|
||||
.bg-default {
|
||||
background-color: var(--bg-default) !important;
|
||||
border: 1px solid var(--bg-default-border) !important;
|
||||
color: var(--bg-default-color) !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--btn-primary-bg) !important;
|
||||
border: 1px solid var(--btn-primary-border) !important;
|
||||
color: var(--btn-primary-color) !important;
|
||||
}
|
||||
// .bg-light {
|
||||
// background-color: rgba($value, 0.1) !important;
|
||||
// border: 1px solid rgba($value, 0.1) !important;
|
||||
// color: #{$value} !important;
|
||||
// }
|
||||
// .bg-dark {
|
||||
// background-color: rgba($value, 0.1) !important;
|
||||
// border: 1px solid rgba($value, 0.1) !important;
|
||||
// color: #{$value} !important;
|
||||
// }
|
||||
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// _badge.scss
|
||||
//
|
||||
|
||||
//Badges
|
||||
.badge {
|
||||
letter-spacing: 1.1px;
|
||||
padding: 6px 8px 7px 8px;
|
||||
font-weight: 600;
|
||||
line-height: 11px;
|
||||
border-radius: 4px;
|
||||
&.badge-link {
|
||||
&:hover {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
//
|
||||
// breadcrumb.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--breadcrumb-item-color: var(--primary);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--breadcrumb-item-color: var(--primary-300);
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumb-item a {
|
||||
color: var(--breadcrumb-item-color);
|
||||
}
|
||||
.breadcrumb .breadcrumb-item.active {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.breadcrumb {
|
||||
--bs-breadcrumb-padding-x: 0.7rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
//
|
||||
// _buttons.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--invert: invert(0%);
|
||||
--btn-modal-hover-bg: var(--gray-200);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--invert: invert(100%);
|
||||
--btn-modal-hover-bg: var(--gray-800);
|
||||
}
|
||||
|
||||
//Buttons
|
||||
.btn-soft {
|
||||
background-color: var(--btn-soft-bg) !important;
|
||||
border: 1px solid var(--btn-soft-border) !important;
|
||||
color: var(--btn-soft-color) !important;
|
||||
// box-shadow: 0 3px 5px 0 hsl(var(--primary-hsl), 0.1);
|
||||
|
||||
&:hover,
|
||||
// &:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.focus {
|
||||
// background-color: var(--primary) !important;
|
||||
background: var(--btn-soft-bg);
|
||||
border-color: var(--btn-soft-border) !important;
|
||||
color: var(--btn-soft-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--btn-primary-bg) !important;
|
||||
border: 1px solid var(--btn-primary-border) !important;
|
||||
color: var(--btn-primary-color) !important;
|
||||
// box-shadow: 0 3px 5px 0 hsl(var(--primary-hsl), 0.1);
|
||||
|
||||
&:hover,
|
||||
// &:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.focus {
|
||||
// background-color: var(--primary) !important;
|
||||
background: var(--btn-primary-bg);
|
||||
border-color: var(--btn-primary-border) !important;
|
||||
color: var(--btn-primary-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background-color: var(--btn-default-bg) !important;
|
||||
border: 1px solid var(--btn-default-border) !important;
|
||||
color: var(--btn-default-color) !important;
|
||||
// box-shadow: 0 3px 5px 0 hsl(var(--primary-hsl), 0.1);
|
||||
|
||||
&:hover,
|
||||
// &:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.focus {
|
||||
// background-color: var(--primary) !important;
|
||||
background: var(--btn-default-bg);
|
||||
border-color: var(--btn-default-border) !important;
|
||||
color: var(--btn-default-hover-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link-modal {
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--text-default);
|
||||
--bs-btn-bg: none;
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--btn-default-hover-color);
|
||||
--bs-btn-hover-bg: var(--btn-modal-hover-bg);
|
||||
--bs-btn-hover-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: var(--bd-violet-bg);
|
||||
--bs-btn-active-border-color: var(--bd-violet-bg);
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: var(--invert);
|
||||
}
|
||||
|
||||
body .toggle-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body .toggle-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .toggle-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-dark-mode] body .toggle-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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: 6px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
padding: 7px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.btn-xs {
|
||||
padding: 4px 10px;
|
||||
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: var(--gray-200) !important;
|
||||
}
|
||||
|
||||
&.btn-soft-light {
|
||||
color: var(--gray-500) !important;
|
||||
border-color: var(--gray-200) !important;
|
||||
}
|
||||
|
||||
&.btn-soft-dark {
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.focus {
|
||||
color: var(--gray-400) !important;
|
||||
border-color: var(--gray-200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-dark,
|
||||
&.btn-secondary {
|
||||
color: var(--gray-200);
|
||||
}
|
||||
|
||||
&.btn-outline-light {
|
||||
color: var(--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;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
//
|
||||
// _card.scss
|
||||
//
|
||||
//card
|
||||
:root {
|
||||
--card-title-color: var(--text-default);
|
||||
--card-text-color: var(--text-muted);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--card-title-color: var(--text-default);
|
||||
--card-text-color: var(--gray-500);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--card-border-color);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--card-border-hover-color);
|
||||
.card-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--card-title-color);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--card-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// dropdown.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--dropdown-link-color: var(--text-default);
|
||||
--dropdown-bg: var(--body-bg);
|
||||
--dropdown-border-color: var(--alert-border-color);
|
||||
--dropdown-border-radius: 0 0 4px 4px;
|
||||
|
||||
--dropdown-link-hover-color: var(--primary);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--dropdown-link-color: var(--text-default);
|
||||
--dropdown-bg: var(--body-bg);
|
||||
--dropdown-border-color: var(--alert-border-color);
|
||||
--dropdown-border-radius: 0 0 4px 4px;
|
||||
|
||||
--dropdown-link-hover-color: var(--primary-300);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-min-width: 7rem;
|
||||
--#{$prefix}dropdown-link-color: var(--dropdown-link-color);
|
||||
--#{$prefix}dropdown-bg: var(--dropdown-bg);
|
||||
--#{$prefix}dropdown-border-color: var(--dropdown-border-color);
|
||||
|
||||
--#{$prefix}dropdown-link-hover-bg: none;
|
||||
--#{$prefix}dropdown-link-hover-color: var(--dropdown-link-hover-color);
|
||||
|
||||
--#{$prefix}dropdown-border-radius: var(--dropdown-border-radius);
|
||||
|
||||
transform: translate(0px, 57px) !important;
|
||||
border-top: none;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// Forms.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--form-border-color: var(--gray-200);
|
||||
--form-control-focus-color: var(--gray-900);
|
||||
--form-control-focus-bg-color: none;
|
||||
--form-control-focus-border-color: var(--primary);
|
||||
--form-control-placeholder-color: #666d78;
|
||||
|
||||
--form-check-input-border-color:var(--gray-400);
|
||||
--form-check-input-background-color:var(--primary);
|
||||
--form-check-input-checked-border-color:var(--primary);
|
||||
--form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%23fff'/></svg>");
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--form-border-color: var(--gray-800);
|
||||
--form-control-focus-color: var(--gray-200);
|
||||
--form-control-focus-bg-color: #000;
|
||||
--form-control-focus-border-color: var(--primary-300);
|
||||
--form-control-placeholder-color: #7f8497;
|
||||
|
||||
--form-check-input-border-color:var(--gray-700);
|
||||
--form-check-input-background-color:var(--primary-300);
|
||||
--form-check-input-checked-border-color:var(--primary-300);
|
||||
--form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%23181921'/></svg>");
|
||||
}
|
||||
|
||||
//Form
|
||||
.form-label,
|
||||
.form-check-label {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid var(--form-border-color);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-default) !important;
|
||||
background-color: var(--body-bg);
|
||||
text-align: left;
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly] {
|
||||
background-color: var(--white);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: var(--gray-300);
|
||||
}
|
||||
&::placeholder{
|
||||
color: var(--form-control-placeholder-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
color: var(--form-control-focus-color);
|
||||
border-color: var(--form-control-focus-border-color);
|
||||
background-color: var(--form-control-focus-bg-color);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
border: 1px solid var(--form-check-input-border-color);
|
||||
background-color: var(--body-bg);
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
&.form-check-input:checked {
|
||||
background-color: var(--form-check-input-background-color);
|
||||
border-color: var(--form-check-input-checked-border-color);
|
||||
--bs-form-check-bg-image: var(--form-check-input-checked-bg-image);
|
||||
}
|
||||
}
|
||||
156
themes/lotusdocs/assets/docs/scss/custom/components/_table.scss
Normal file
156
themes/lotusdocs/assets/docs/scss/custom/components/_table.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
//
|
||||
// _table.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--table-hover-bg: rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--table-hover-bg: rgba(255, 255, 255, 0.075);
|
||||
}
|
||||
|
||||
// Default Table
|
||||
table {
|
||||
td {
|
||||
border-top: 1px solid var(--card-border-color);
|
||||
}
|
||||
td, th {
|
||||
border-right: 1px solid var(--card-border-color);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
td:last-child, th:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Shortcode Table
|
||||
.table {
|
||||
--bs-table-color: var(--text-default);
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-accent-bg: none;
|
||||
--bs-table-striped-color: var(--text-default);
|
||||
--bs-table-striped-bg: var(--alert-primary-bg);
|
||||
--bs-table-hover-color: var(--text-default);
|
||||
--bs-table-hover-bg: var(--table-hover-bg);
|
||||
|
||||
color: var(--text-default);
|
||||
font-size: 0.875rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
|
||||
> :not(caption) > * > * {
|
||||
padding: 1rem 1rem;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
tbody {
|
||||
vertical-align: top;
|
||||
|
||||
td {
|
||||
border-top: inherit;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: inherit;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
td {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
td:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
td:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
td:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
td:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
thead, tbody, tfoot, tr, td, th {
|
||||
border-color: var(--card-border-color);
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
text-transform: uppercase;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sm,
|
||||
.table-striped,
|
||||
.table-borderless,
|
||||
.table-hover,
|
||||
.table-striped-columns {
|
||||
> :not(caption) > * > * {
|
||||
padding: 0.6rem 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
.table-sm,
|
||||
.table-striped,
|
||||
.table-borderless,
|
||||
.table-hover,
|
||||
.table-striped-columns {
|
||||
> :not(caption)>*>* {
|
||||
padding: 0.6rem 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-xs {
|
||||
> :not(caption) > * > * {
|
||||
padding: 0.25rem 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table-borderless {
|
||||
> :not(caption)>*>* {
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
tr:first-child td {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped-columns > :not(caption) > tr > th:nth-child(2n) {
|
||||
--bs-table-striped-bg: none;
|
||||
}
|
||||
|
||||
// Responsive Table
|
||||
.table-responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
//
|
||||
// _tabs.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--nav-tabs-border-width: none;
|
||||
--nav-tabs-link-active-bg: none;
|
||||
--nav-tabs-link-active-color: var(--text-default);
|
||||
--nav-tabs-border-color: var(--gray-400);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--nav-tabs-border-color: var(--gray-800);
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
--bs-nav-tabs-border-width: var(--nav-tabs-border-width);
|
||||
--bs-nav-tabs-link-active-bg: var(--nav-tabs-link-active-bg);
|
||||
--bs-nav-tabs-link-active-color: var(--nav-tabs-link-active-color);
|
||||
|
||||
border-bottom: 1px solid var(--nav-tabs-border-color);
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-muted) !important;
|
||||
margin-bottom: -1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
border-bottom: 2px solid var(--content-link-color);
|
||||
color: var(--content-link-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
//
|
||||
// _tooltip.scss
|
||||
//
|
||||
|
||||
:root {
|
||||
--tooltip-bg: var(--white);
|
||||
--tooltip-border-color: var(--content-link-color);
|
||||
--tooltip-drop-shadow-color: var(--gray-500);
|
||||
--tooltip-link-color: var(--gray-700);
|
||||
}
|
||||
|
||||
[data-dark-mode] {
|
||||
--tooltip-bg: var(--dark-alt);
|
||||
--tooltip-border-color: var(--primary-300);
|
||||
--tooltip-drop-shadow-color: var(--gray-900);
|
||||
--tooltip-link-color: var(--gray-500);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
--#{$prefix}tooltip-bg: var(--tooltip-bg);
|
||||
--#{$prefix}tooltip-opacity: 1.0;
|
||||
--#{$prefix}tooltip-font-size: 0.575rem;
|
||||
--#{$prefix}tooltip-max-width: 300px;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
text-align: left;
|
||||
border: 2px solid var(--tooltip-border-color);
|
||||
border-width: 2px 2px 2px 8px;
|
||||
filter: drop-shadow(4px 4px 5px var(--tooltip-drop-shadow-color));
|
||||
--#{$prefix}tooltip-border-radius: 4px;
|
||||
|
||||
a {
|
||||
color: var(--tooltip-link-color);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
p {
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
strong {
|
||||
font-size: 0.975rem;
|
||||
line-height: 2;
|
||||
color: var(--text-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user