blockworks-foundation
/
solana
mirror of https://github.com/blockworks-foundation/solana.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add announcement banner to explorer (#11210) 

* Add announcement banner to explorer

* Remove ^M and trailing spaces

* Update Banner.tsx
This commit is contained in:
Justin Starry 2020-07-26 21:11:27 +08:00 committed by GitHub
parent 234449c627
commit f796adc5ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 5143 additions and 5084 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
explorer/src/App.tsx
View File

@ -13,6 +13,7 @@ import TabbedPage from "components/TabbedPage";
import TopAccountsCard from "components/TopAccountsCard"; import TopAccountsCard from "components/TopAccountsCard";
import SupplyCard from "components/SupplyCard"; import SupplyCard from "components/SupplyCard";
import { pickCluster } from "utils/url"; import { pickCluster } from "utils/url";
import Banner from "components/Banner";
function App() { function App() {
return ( return (
@ -36,6 +37,8 @@ function App() {
</div> </div>
</nav> </nav>
<Banner />
<Switch> <Switch>
<Route exact path="/supply"> <Route exact path="/supply">
<TabbedPage tab="Supply"> <TabbedPage tab="Supply">

65
explorer/src/components/Banner.tsx Normal file
View File

@ -0,0 +1,65 @@
import React from "react";
import { useCluster, Cluster } from "providers/cluster";
import { displayTimestamp } from "utils/date";
type Announcement = {
message: string;
estimate?: string;
start?: Date;
end?: Date;
};
const announcements = new Map<Cluster, Announcement>();
// announcements.set(Cluster.Devnet, {
// message: "Devnet API node is restarting",
// start: new Date("July 25, 2020 18:00:00 GMT+8:00"),
// estimate: "2 hours",
// });
// announcements.set(Cluster.MainnetBeta, {
// message: "Mainnet Beta upgrade in progress. Transactions are disabled",
// start: new Date("August 1, 2020 00:00:00 GMT+0:00"),
// end: new Date("August 3, 2020 00:00:00 GMT+0:00"),
// });
export default function Banner() {
const cluster = useCluster().cluster;
const announcement = announcements.get(cluster);
if (!announcement) return null;
const { message, start, end, estimate } = announcement;
const now = new Date();
if (end && now > end) return null;
if (start && now < start) return null;
return (
<div className="bg-danger text-white">
<div className="container">
<div className="d-flex flex-column align-items-center justify-content-center text-center py-3">
<h3 className="mb-3">
<span className="fe fe-alert-circle mr-2"></span>
{message}
</h3>
<hr className="text-gray-500 w-100 mt-0 mb-3 opacity-50" />
{estimate && (
<h5 className="font-sm text-gray-200">
<span className="text-uppercase">Estimated Duration: </span>
{estimate}
</h5>
)}
{start && (
<h5 className="font-sm text-gray-200">
<span className="text-uppercase">Started at: </span>
{displayTimestamp(start.getTime())}
</h5>
)}
{end && (
<h5 className="font-sm text-gray-200">
<span className="text-uppercase">End: </span>
{displayTimestamp(end.getTime())}
</h5>
)}
</div>
</div>
</div>
);
}

5
explorer/src/components/ClusterStatusButton.tsx
View File

@ -27,10 +27,7 @@ function Button({ expand }: { expand?: boolean }) {
} }
}; };
let spinnerClasses = "spinner-grow spinner-grow-sm mr-2"; const spinnerClasses = "spinner-grow spinner-grow-sm mr-2";
if (!expand) {
spinnerClasses += " text-warning";
}
switch (status) { switch (status) {
case ClusterStatus.Connected: case ClusterStatus.Connected:

2
explorer/src/components/TransactionDetails.tsx
View File

@ -168,7 +168,7 @@ function StatusCard({ signature }: Props) {
<td>Timestamp</td> <td>Timestamp</td>
<td className="text-right"> <td className="text-right">
{info.timestamp !== "unavailable" ? ( {info.timestamp !== "unavailable" ? (
displayTimestamp(info.timestamp) displayTimestamp(info.timestamp * 1000)
) : ( ) : (
<InfoTooltip <InfoTooltip
bottom bottom

2
explorer/src/components/account/StakeAccountCards.tsx
View File

@ -27,7 +27,7 @@ export function StakeAccountCards({
function LockupCard({ stakeAccount }: { stakeAccount: StakeAccount }) { function LockupCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
const unixTimestamp = stakeAccount.meta?.lockup.unixTimestamp; const unixTimestamp = stakeAccount.meta?.lockup.unixTimestamp;
if (unixTimestamp && unixTimestamp > 0) { if (unixTimestamp && unixTimestamp > 0) {
const prettyTimestamp = displayTimestamp(unixTimestamp); const prettyTimestamp = displayTimestamp(unixTimestamp * 1000);
return ( return (
<div className="alert alert-warning text-center"> <div className="alert alert-warning text-center">
<strong>Account is locked!</strong> Lockup expires on {prettyTimestamp} <strong>Account is locked!</strong> Lockup expires on {prettyTimestamp}

202
explorer/src/scss/_solana-variables.scss
View File

@ -1,101 +1,101 @@
// //
// solana-variables.scss // solana-variables.scss
// Use this to overwrite Bootstrap and Dashkit variables // Use this to overwrite Bootstrap and Dashkit variables
// //
// Example of a variable override to change Dashkit's background color // Example of a variable override to change Dashkit's background color
// Remove the "//" to comment it in and see it in action! // Remove the "//" to comment it in and see it in action!
$body-bg: #f9fdfc; $body-bg: #f9fdfc;
// Dashkit scss needs to know where img masks are stored // Dashkit scss needs to know where img masks are stored
$path-to-img: "../../img/dashkit" !default; $path-to-img: "../../img/dashkit" !default;
$path-to-fonts: "../../fonts" !default; $path-to-fonts: "../../fonts" !default;
// Colors // Colors
$white: #ffffff; $white: #ffffff;
$gray-100: #f9fdfc; $gray-100: #f9fdfc;
$gray-200: #f1f8f6; $gray-200: #f1f8f6;
$gray-300: #d9efe7; $gray-300: #d9efe7;
$gray-400: #c6e6de; $gray-400: #c6e6de;
$gray-500: #abd5c6; $gray-500: #abd5c6;
$gray-600: #86b8b6; $gray-600: #86b8b6;
$gray-700: #409088; $gray-700: #409088;
$gray-800: #387462; $gray-800: #387462;
$gray-900: #1b4e3f; $gray-900: #1b4e3f;
$black: #232323; $black: #232323;
$rainbow-1: #fa62fc; $rainbow-1: #fa62fc;
$rainbow-2: #be84e8; $rainbow-2: #be84e8;
$rainbow-3: #79abd2; $rainbow-3: #79abd2;
$rainbow-4: #38d0bd; $rainbow-4: #38d0bd;
$rainbow-5: #1dd79b; $rainbow-5: #1dd79b;
$primary: #65D39F; $primary: #65D39F;
$primary-desat: #42ba96; $primary-desat: #42ba96;
$secondary: $gray-700; $secondary: $gray-700;
$success: #42ba96; $success: #42ba96;
$info: #b45be1; $info: #b45be1;
$info-muted: #9272a3; $info-muted: #9272a3;
$warning: #d83aeb; $warning: #d83aeb;
$danger: #43b5c5; $danger: #43b5c5;
$light: $gray-100; $light: $gray-100;
$dark: $gray-900; $dark: $gray-900;
$text-info-muted: $info-muted; $text-info-muted: $info-muted;
$navbar-light-active-color: $primary; $navbar-light-active-color: $primary;
$theme-colors: ( $theme-colors: (
"primary-desat": $primary-desat, "primary-desat": $primary-desat,
"black": $black, "black": $black,
"white": $white "white": $white
); );
// Global // Global
$font-family-base: "Rubik"; $font-family-base: "Rubik";
.display-2 { .display-2 {
font-family: Saira, Helvetica, sans-serif; font-family: Saira, Helvetica, sans-serif;
} }
.text-rainbow { .text-rainbow {
background: linear-gradient(0.3turn, #e400ff, #00ffbd); background: linear-gradient(0.3turn, #e400ff, #00ffbd);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.bg-rainbow { .bg-rainbow {
background: linear-gradient(0.3turn, #e400ff, #00ffbd); background: linear-gradient(0.3turn, #e400ff, #00ffbd);
} }
.bg-rainbow-1 { .bg-rainbow-1 {
background: #fa62fc; background: #fa62fc;
} }
.bg-rainbow-2 { .bg-rainbow-2 {
background: #be84e8; background: #be84e8;
} }
.bg-rainbow-3 { .bg-rainbow-3 {
background: #79abd2; background: #79abd2;
} }
.bg-rainbow-4 { .bg-rainbow-4 {
background: #38d0bd; background: #38d0bd;
} }
.bg-rainbow-5 { .bg-rainbow-5 {
background: #1dd79b; background: #1dd79b;
} }
.text-rainbow-1 { .text-rainbow-1 {
color: #fa62fc; color: #fa62fc;
} }
.text-rainbow-2 { .text-rainbow-2 {
color: #be84e8; color: #be84e8;
} }
.text-rainbow-3 { .text-rainbow-3 {
color: #79abd2; color: #79abd2;
} }
.text-rainbow-4 { .text-rainbow-4 {
color: #38d0bd; color: #38d0bd;
} }
.text-rainbow-5 { .text-rainbow-5 {
color: #1dd79b; color: #1dd79b;
} }

302
explorer/src/scss/_solana.scss
View File

@ -1,154 +1,148 @@
// //
// solana.scss // solana.scss
// Use this to write your custom SCSS // Use this to write your custom SCSS
// //
code { code {
padding: 0.33rem; padding: 0.33rem;
border-radius: $border-radius; border-radius: $border-radius;
background-color: $gray-200; background-color: $gray-200;
color: $black; color: $black;
} }
.popover-container { .popover-container {
position: relative; position: relative;
.popover { .popover {
&.bs-popover-top { &.bs-popover-top {
background-color: $dark; background-color: $dark;
top: auto; top: auto;
bottom: 1.5rem; bottom: 1.5rem;
} }
&.right { &.right {
left: auto; left: auto;
right: 0; right: 0;
} }
&.bs-popover-bottom { &.bs-popover-bottom {
background-color: $dark; background-color: $dark;
top: 1.5rem; top: 1.5rem;
} }
.popover-body { .popover-body {
color: white; color: white;
} }
.arrow.right { .arrow.right {
right: 1rem; right: 1rem;
} }
.arrow::after { .arrow::after {
border-top-color: $dark; border-top-color: $dark;
border-bottom-color: $dark; border-bottom-color: $dark;
} }
} }
} }
.modal-backdrop { .modal-backdrop {
pointer-events: none; pointer-events: none;
} }
.modal.show { .modal.show {
display: block; display: block;
} }
.c-pointer { .c-pointer {
cursor: pointer; cursor: pointer;
} }
.b-white { .dropdown-exit {
background: $white; position: absolute;
} z-index: 100;
top: 0;
.dropdown-exit { left: 0;
position: absolute; right: 0;
z-index: 100; bottom: 0;
top: 0; }
left: 0;
right: 0; .opacity-50 {
bottom: 0; opacity: 0.5;
} }
.btn-outline-warning:hover { .btn.input-group {
.spinner-grow { input {
color: $dark !important; cursor: pointer;
}
} &:focus {
cursor: text;
.btn.input-group { }
input { }
cursor: pointer; }
&:focus { .text-signature,
cursor: text; .text-address {
} font-size: 85%;
} }
}
input.text-signature,
.text-signature, input.text-address {
.text-address { padding: 0 0.75rem;
font-size: 85%; }
}
h4.ix-pill {
input.text-signature, display: inline-block;
input.text-address { padding: 5px;
padding: 0 0.75rem; border-radius: $border-radius;
} margin-bottom: 2rem;
margin-left: -5px;
h4.ix-pill { background-color: theme-color-level(info, $badge-soft-bg-level);
display: inline-block; }
padding: 5px;
border-radius: $border-radius; h4.slot-pill {
margin-bottom: 2rem; display: inline-block;
margin-left: -5px; padding: 5px;
background-color: theme-color-level(info, $badge-soft-bg-level); border-radius: $border-radius;
} margin-left: -5px;
background-color: theme-color-level(primary, $badge-soft-bg-level);
h4.slot-pill { margin-bottom: 1.5rem;
display: inline-block; }
padding: 5px;
border-radius: $border-radius; .list-group-item:last-child {
margin-left: -5px; &.ix-item,
background-color: theme-color-level(primary, $badge-soft-bg-level); &.slot-item {
margin-bottom: 1.5rem; border-bottom-width: 0px;
} }
}
.list-group-item:last-child {
&.ix-item, .list-group:last-child .list-group-item:last-child {
&.slot-item { &.ix-item,
border-bottom-width: 0px; &.slot-item {
} border-bottom-width: 1px;
} }
}
.list-group:last-child .list-group-item:last-child {
&.ix-item, .list-group-item:first-child {
&.slot-item { &.ix-item,
border-bottom-width: 1px; &.slot-item {
} border-top-width: 1px;
} }
}
.list-group-item:first-child {
&.ix-item, .min-width-0 {
&.slot-item { min-width: 0;
border-top-width: 1px; }
}
} .mb-last-0 {
&:last-child {
.min-width-0 { margin-bottom: 0 !important;
min-width: 0; }
} }
.mb-last-0 { .vertical-top {
&:last-child { vertical-align: top !important;
margin-bottom: 0 !important; }
}
} .w-1 {
width: 1%;
.vertical-top { }
vertical-align: top !important;
}
.w-1 {
width: 1%;
}

56
explorer/src/scss/dashkit/_alert.scss
View File

@ -1,28 +1,28 @@
// //
// alerts // alerts
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
// Allow for a text-decoration since links are the same color as the alert text. // Allow for a text-decoration since links are the same color as the alert text.
.alert-link { .alert-link {
text-decoration: $alert-link-text-decoration; text-decoration: $alert-link-text-decoration;
} }
// Color variants // Color variants
// //
// Using Bootstrap's core alert-variant mixin to generate solid background color + yiq colorized text (and making close/links match those colors) // Using Bootstrap's core alert-variant mixin to generate solid background color + yiq colorized text (and making close/links match those colors)
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.alert-#{$color} { .alert-#{$color} {
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), color-yiq(theme-color-level($color, $alert-bg-level))); @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), color-yiq(theme-color-level($color, $alert-bg-level)));
.close, .close,
.alert-link { .alert-link {
color: color-yiq(theme-color-level($color, $alert-bg-level)); color: color-yiq(theme-color-level($color, $alert-bg-level));
} }
} }
} }

394
explorer/src/scss/dashkit/_avatar.scss
View File

@ -1,197 +1,197 @@
// //
// avatar.scss // avatar.scss
// Dashkit component // Dashkit component
// //
// General // General
.avatar { .avatar {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $avatar-size-base; width: $avatar-size-base;
height: $avatar-size-base; height: $avatar-size-base;
font-size: $avatar-size-base / 3; font-size: $avatar-size-base / 3;
// Loads mask images so they don't lag on hover // Loads mask images so they don't lag on hover
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
background-image: url(#{$path-to-img}/masks/avatar-status.svg), background-image: url(#{$path-to-img}/masks/avatar-status.svg),
url(#{$path-to-img}/masks/avatar-group.svg), url(#{$path-to-img}/masks/avatar-group.svg),
url(#{$path-to-img}/masks/avatar-group-hover.svg), url(#{$path-to-img}/masks/avatar-group-hover.svg),
url(#{$path-to-img}/masks/avatar-group-hover-last.svg); url(#{$path-to-img}/masks/avatar-group-hover-last.svg);
} }
} }
.avatar-img { .avatar-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.avatar-title { .avatar-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
line-height: 0; line-height: 0;
background-color: $avatar-title-bg; background-color: $avatar-title-bg;
color: $avatar-title-color; color: $avatar-title-color;
} }
// Status // Status
.avatar-online, .avatar-online,
.avatar-offline { .avatar-offline {
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
right: 5%; right: 5%;
width: 20%; width: 20%;
height: 20%; height: 20%;
border-radius: 50%; border-radius: 50%;
} }
.avatar-img { .avatar-img {
mask-image: url(#{$path-to-img}/masks/avatar-status.svg); mask-image: url(#{$path-to-img}/masks/avatar-status.svg);
mask-size: 100% 100%; mask-size: 100% 100%;
} }
} }
.avatar-online::before { .avatar-online::before {
background-color: $success; background-color: $success;
} }
.avatar-offline::before { .avatar-offline::before {
background-color: $gray-500; background-color: $gray-500;
} }
// Sizing // Sizing
.avatar-xs { .avatar-xs {
width: $avatar-size-xs; width: $avatar-size-xs;
height: $avatar-size-xs; height: $avatar-size-xs;
font-size: $avatar-size-xs / 3; font-size: $avatar-size-xs / 3;
} }
.avatar-sm { .avatar-sm {
width: $avatar-size-sm; width: $avatar-size-sm;
height: $avatar-size-sm; height: $avatar-size-sm;
font-size: $avatar-size-sm / 3; font-size: $avatar-size-sm / 3;
} }
.avatar-lg { .avatar-lg {
width: $avatar-size-lg; width: $avatar-size-lg;
height: $avatar-size-lg; height: $avatar-size-lg;
font-size: $avatar-size-lg / 3; font-size: $avatar-size-lg / 3;
} }
.avatar-xl { .avatar-xl {
width: $avatar-size-xl; width: $avatar-size-xl;
height: $avatar-size-xl; height: $avatar-size-xl;
font-size: $avatar-size-xl / 3; font-size: $avatar-size-xl / 3;
} }
.avatar-xxl { .avatar-xxl {
width: $avatar-size-xl; width: $avatar-size-xl;
height: $avatar-size-xl; height: $avatar-size-xl;
font-size: $avatar-size-xl / 3; font-size: $avatar-size-xl / 3;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
width: $avatar-size-xxl; width: $avatar-size-xxl;
height: $avatar-size-xxl; height: $avatar-size-xxl;
font-size: $avatar-size-xxl / 3; font-size: $avatar-size-xxl / 3;
} }
} }
// Ratio // Ratio
.avatar.avatar-4by3 { .avatar.avatar-4by3 {
width: $avatar-size-base * 4 / 3; width: $avatar-size-base * 4 / 3;
} }
.avatar-xs.avatar-4by3 { .avatar-xs.avatar-4by3 {
width: $avatar-size-xs * 4 / 3; width: $avatar-size-xs * 4 / 3;
} }
.avatar-sm.avatar-4by3 { .avatar-sm.avatar-4by3 {
width: $avatar-size-sm * 4 / 3; width: $avatar-size-sm * 4 / 3;
} }
.avatar-lg.avatar-4by3 { .avatar-lg.avatar-4by3 {
width: $avatar-size-lg * 4 / 3; width: $avatar-size-lg * 4 / 3;
} }
.avatar-xl.avatar-4by3 { .avatar-xl.avatar-4by3 {
width: $avatar-size-xl * 4 / 3; width: $avatar-size-xl * 4 / 3;
} }
.avatar-xxl.avatar-4by3 { .avatar-xxl.avatar-4by3 {
width: $avatar-size-xxl * 4 / 3; width: $avatar-size-xxl * 4 / 3;
} }
// Group // Group
.avatar-group { .avatar-group {
display: inline-flex; display: inline-flex;
// Shift every next avatar left // Shift every next avatar left
.avatar + .avatar { .avatar + .avatar {
margin-left: -$avatar-size-base / 4; margin-left: -$avatar-size-base / 4;
} }
.avatar-xs + .avatar-xs { .avatar-xs + .avatar-xs {
margin-left: -$avatar-size-xs / 4; margin-left: -$avatar-size-xs / 4;
} }
.avatar-sm + .avatar-sm { .avatar-sm + .avatar-sm {
margin-left: -$avatar-size-sm / 4; margin-left: -$avatar-size-sm / 4;
} }
.avatar-lg + .avatar-lg { .avatar-lg + .avatar-lg {
margin-left: -$avatar-size-lg / 4; margin-left: -$avatar-size-lg / 4;
} }
.avatar-xl + .avatar-xl { .avatar-xl + .avatar-xl {
margin-left: -$avatar-size-xl / 4; margin-left: -$avatar-size-xl / 4;
} }
.avatar-xxl + .avatar-xxl { .avatar-xxl + .avatar-xxl {
margin-left: -$avatar-size-xxl / 4; margin-left: -$avatar-size-xxl / 4;
} }
// Add some spacing between avatars // Add some spacing between avatars
.avatar:not(:last-child) { .avatar:not(:last-child) {
mask-image: url(#{$path-to-img}/masks/avatar-group.svg); mask-image: url(#{$path-to-img}/masks/avatar-group.svg);
mask-size: 100% 100%; mask-size: 100% 100%;
} }
// Bring an avatar to front on hover // Bring an avatar to front on hover
.avatar:hover { .avatar:hover {
mask-image: none; mask-image: none;
z-index: 1; z-index: 1;
+ .avatar { + .avatar {
mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg); mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg);
mask-size: 100% 100%; mask-size: 100% 100%;
&:last-child { &:last-child {
mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg); mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg);
} }
} }
} }
} }

56
explorer/src/scss/dashkit/_badge.scss
View File

@ -1,28 +1,28 @@
// //
// badge.scss // badge.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
.badge { .badge {
vertical-align: middle; vertical-align: middle;
} }
// Quick fix for badges in buttons // Quick fix for badges in buttons
.btn .badge { .btn .badge {
top: -2px; top: -2px;
} }
// //
// Dashkit ===================================== // Dashkit =====================================
// //
// Creates the "soft" badge variant // Creates the "soft" badge variant
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.badge-soft-#{$color} { .badge-soft-#{$color} {
@include badge-variant-soft(theme-color-level($color, $badge-soft-bg-level), $value); @include badge-variant-soft(theme-color-level($color, $badge-soft-bg-level), $value);
} }
} }

110
explorer/src/scss/dashkit/_breadcrumb.scss
View File

@ -1,55 +1,55 @@
// //
// breadcrumb.scss // breadcrumb.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
.breadcrumb-item { .breadcrumb-item {
// The separator between breadcrumbs // The separator between breadcrumbs
+ .breadcrumb-item::before { + .breadcrumb-item::before {
width: .3rem; width: .3rem;
height: .6rem; height: .6rem;
margin-right: $breadcrumb-item-padding; margin-right: $breadcrumb-item-padding;
-webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%; -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%; mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
-webkit-mask-size: contain; -webkit-mask-size: contain;
mask-size: contain; mask-size: contain;
background: $breadcrumb-divider-color; background: $breadcrumb-divider-color;
} }
} }
// //
// Dashkit ===================================== // Dashkit =====================================
// //
// Small // Small
// //
// Reduces font size // Reduces font size
.breadcrumb-sm { .breadcrumb-sm {
font-size: $breadcrumb-font-size-sm; font-size: $breadcrumb-font-size-sm;
} }
// Overflow // Overflow
// //
// Allows the breadcrumb to be overflown horizontally // Allows the breadcrumb to be overflown horizontally
.breadcrumb-overflow { .breadcrumb-overflow {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-x: auto; overflow-x: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
} }
.breadcrumb-overflow .breadcrumb-item { .breadcrumb-overflow .breadcrumb-item {
white-space: nowrap; white-space: nowrap;
} }

136
explorer/src/scss/dashkit/_buttons.scss
View File

@ -1,68 +1,68 @@
// //
// buttons.scss // buttons.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Dashkit =================================== // Dashkit ===================================
// //
// Button white // Button white
.btn-white { .btn-white {
border-color: $gray-300; border-color: $gray-300;
@include hover-focus { @include hover-focus {
background-color: $gray-100; background-color: $gray-100;
border-color: $gray-400; border-color: $gray-400;
} }
} }
.btn-group-toggle .btn-white:not(:disabled):not(.disabled):active, .btn-group-toggle .btn-white:not(:disabled):not(.disabled):active,
.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active { .btn-group-toggle .btn-white:not(:disabled):not(.disabled).active {
background-color: $input-bg; background-color: $input-bg;
border-color: $input-focus-border-color; border-color: $input-focus-border-color;
color: $primary; color: $primary;
} }
.btn-group-toggle .btn-white:focus, .btn-group-toggle .btn-white:focus,
.btn-group-toggle .btn-white.focus { .btn-group-toggle .btn-white.focus {
box-shadow: none; box-shadow: none;
} }
// Button outline secondary // Button outline secondary
.btn-outline-secondary { .btn-outline-secondary {
&:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]){ &:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]){
border-color: $gray-400; border-color: $gray-400;
} }
} }
// Button rounded // Button rounded
// //
// Creates circle button variations // Creates circle button variations
.btn-rounded-circle { .btn-rounded-circle {
width: calc(1em * #{$btn-line-height} + #{$input-btn-padding-y * 2 } + #{$btn-border-width} * 2); width: calc(1em * #{$btn-line-height} + #{$input-btn-padding-y * 2 } + #{$btn-border-width} * 2);
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
border-radius: 50%; border-radius: 50%;
} }
.btn-rounded-circle.btn-lg { .btn-rounded-circle.btn-lg {
width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2); width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2);
} }
.btn-rounded-circle.btn-sm { .btn-rounded-circle.btn-sm {
width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2); width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2);
} }
// Button group // Button group
// //
// Prevent buttons from jittering on hover // Prevent buttons from jittering on hover
.btn-group .btn + .btn { .btn-group .btn + .btn {
margin-left: 0; margin-left: 0;
} }

596
explorer/src/scss/dashkit/_card.scss
View File

@ -1,298 +1,298 @@
// //
// card.scss // card.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
.card { .card {
margin-bottom: $card-margin-bottom; margin-bottom: $card-margin-bottom;
border-color: $card-outline-color; border-color: $card-outline-color;
box-shadow: $card-box-shadow; box-shadow: $card-box-shadow;
} }
.card > * { .card > * {
flex-shrink: 0; flex-shrink: 0;
} }
// Header // Header
.card-header { .card-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: $card-header-height; height: $card-header-height;
padding-top: $card-spacer-y / 2; padding-top: $card-spacer-y / 2;
padding-bottom: $card-spacer-y / 2; padding-bottom: $card-spacer-y / 2;
> *:first-child { > *:first-child {
flex: 1; flex: 1;
} }
} }
// Title // Title
.card-title { .card-title {
margin-bottom: $card-spacer-y / 2; margin-bottom: $card-spacer-y / 2;
} }
// //
// Dashkit =================================== // Dashkit ===================================
// //
// Card header // Card header
// //
// Make sure the card header is always the same height with its content // Make sure the card header is always the same height with its content
// centered vertically // centered vertically
.card-header-title { .card-header-title {
margin-bottom: 0; margin-bottom: 0;
} }
.card-header-tabs { .card-header-tabs {
margin-top: -$card-spacer-y / 2; margin-top: -$card-spacer-y / 2;
margin-bottom: -$card-spacer-y / 2; margin-bottom: -$card-spacer-y / 2;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.card-header-tabs .nav-link { .card-header-tabs .nav-link {
padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important;
padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important;
} }
// Card table // Card table
// //
// Make sure the card table content is aligned with the rest of the card content // Make sure the card table content is aligned with the rest of the card content
.card-table { .card-table {
margin-bottom: 0; margin-bottom: 0;
} }
.card-table thead th { .card-table thead th {
border-top-width: 0; border-top-width: 0;
} }
.card-table thead th, .card-table thead th,
.card-table tbody td { .card-table tbody td {
&:first-child { &:first-child {
padding-left: $card-spacer-x !important; padding-left: $card-spacer-x !important;
} }
&:last-child { &:last-child {
padding-right: $card-spacer-x !important; padding-right: $card-spacer-x !important;
} }
} }
.card > .card-table:first-child, .card > .card-table:first-child,
.card > .table-responsive:first-child > .card-table { .card > .table-responsive:first-child > .card-table {
> thead, > tbody, > tfoot { > thead, > tbody, > tfoot {
&:first-child { &:first-child {
> tr:first-child { > tr:first-child {
> th, > td { > th, > td {
&:first-child { &:first-child {
border-top-left-radius: $card-border-radius; border-top-left-radius: $card-border-radius;
} }
&:last-child { &:last-child {
border-top-right-radius: $card-border-radius; border-top-right-radius: $card-border-radius;
} }
} }
} }
} }
} }
} }
// Card avatar // Card avatar
// //
// Moves card avatar up by 50% // Moves card avatar up by 50%
.card-avatar { .card-avatar {
display: block !important; display: block !important;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: $card-spacer-y; margin-bottom: $card-spacer-y;
} }
.card-avatar-top { .card-avatar-top {
margin-top: -($card-spacer-x + $avatar-size-base / 2); margin-top: -($card-spacer-x + $avatar-size-base / 2);
} }
.card-avatar-top.avatar-xs { .card-avatar-top.avatar-xs {
margin-top: -($card-spacer-x + $avatar-size-xs / 2); margin-top: -($card-spacer-x + $avatar-size-xs / 2);
} }
.card-avatar-top.avatar-sm { .card-avatar-top.avatar-sm {
margin-top: -($card-spacer-x + $avatar-size-sm / 2); margin-top: -($card-spacer-x + $avatar-size-sm / 2);
} }
.card-avatar-top.avatar-lg { .card-avatar-top.avatar-lg {
margin-top: -($card-spacer-x + $avatar-size-lg / 2); margin-top: -($card-spacer-x + $avatar-size-lg / 2);
} }
.card-avatar-top.avatar-xl { .card-avatar-top.avatar-xl {
margin-top: -($card-spacer-x + $avatar-size-xl / 2); margin-top: -($card-spacer-x + $avatar-size-xl / 2);
} }
.card-avatar-top.avatar-xxl { .card-avatar-top.avatar-xxl {
margin-top: -($card-spacer-x + $avatar-size-xxl / 2); margin-top: -($card-spacer-x + $avatar-size-xxl / 2);
} }
// Card dropdown // Card dropdown
// //
// Places dropdowns in the top right corner // Places dropdowns in the top right corner
.card-dropdown { .card-dropdown {
position: absolute; position: absolute;
top: $card-spacer-x; top: $card-spacer-x;
right: $card-spacer-x; right: $card-spacer-x;
} }
// Card inactive // Card inactive
// //
// Adds dashed border and removes background // Adds dashed border and removes background
.card-inactive { .card-inactive {
border-color: $border-color; border-color: $border-color;
border-style: dashed; border-style: dashed;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
} }
// Card flush // Card flush
// //
// Removes borders and background // Removes borders and background
.card-flush { .card-flush {
background: none; background: none;
border: none; border: none;
box-shadow: none; box-shadow: none;
} }
// Card sizing // Card sizing
// //
// Affects card padding // Affects card padding
.card-sm .card-body, .card-sm .card-body,
.card-sm .card-footer-boxed { .card-sm .card-footer-boxed {
padding: $card-spacer-x-sm; padding: $card-spacer-x-sm;
} }
// Card header flush // Card header flush
// //
// Removes border between card header and body and adjusts spacing // Removes border between card header and body and adjusts spacing
.card-header-flush { .card-header-flush {
border-bottom: 0; border-bottom: 0;
} }
.card-header-flush + .card-body { .card-header-flush + .card-body {
padding-top: 0; padding-top: 0;
} }
// Card fill // Card fill
// //
// Fills the whole available space to fit the height of the neighboring card // Fills the whole available space to fit the height of the neighboring card
.card-fill { .card-fill {
height: calc(100% - #{$card-margin-bottom}); height: calc(100% - #{$card-margin-bottom});
} }
.card-fill .card-body { .card-fill .card-body {
flex-grow: 0; flex-grow: 0;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
// Responsive // Responsive
.card-fill { .card-fill {
@each $breakpoint, $value in $grid-breakpoints { @each $breakpoint, $value in $grid-breakpoints {
&-#{$breakpoint} { &-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) { @include media-breakpoint-up(#{$breakpoint}) {
height: calc(100% - #{$card-margin-bottom}); height: calc(100% - #{$card-margin-bottom});
.card-body { .card-body {
flex-grow: 0; flex-grow: 0;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
} }
} }
} }
} }
// Card adjust // Card adjust
// //
// Limits the height to the height of the neighboring card and adds a scrollbar to the card body // Limits the height to the height of the neighboring card and adds a scrollbar to the card body
.card-adjust { .card-adjust {
height: 0; height: 0;
min-height: 100%; min-height: 100%;
} }
.card-adjust .card { .card-adjust .card {
height: calc(100% - #{$card-margin-bottom}); height: calc(100% - #{$card-margin-bottom});
} }
.card-adjust .card-body { .card-adjust .card-body {
height: calc(100% - #{$card-header-height}); height: calc(100% - #{$card-header-height});
overflow-y: auto; overflow-y: auto;
} }
// Responsive // Responsive
.card-adjust { .card-adjust {
@each $breakpoint, $value in $grid-breakpoints { @each $breakpoint, $value in $grid-breakpoints {
&-#{$breakpoint} { &-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) { @include media-breakpoint-up(#{$breakpoint}) {
height: 0; height: 0;
min-height: 100%; min-height: 100%;
.card { .card {
height: calc(100% - #{$card-margin-bottom}); height: calc(100% - #{$card-margin-bottom});
} }
.card-body { .card-body {
height: calc(100% - #{$card-header-height}); height: calc(100% - #{$card-header-height});
overflow-y: auto; overflow-y: auto;
} }
} }
} }
} }
} }
// Card footer boxed // Card footer boxed
.card-footer-boxed { .card-footer-boxed {
padding-right: 0; padding-right: 0;
padding-bottom: $card-spacer-x; padding-bottom: $card-spacer-x;
padding-left: 0; padding-left: 0;
margin-left: $card-spacer-x; margin-left: $card-spacer-x;
margin-right: $card-spacer-x; margin-right: $card-spacer-x;
} }

158
explorer/src/scss/dashkit/_chart.scss
View File

@ -1,79 +1,79 @@
// //
// chart.scss // chart.scss
// Dashkit component // Dashkit component
// //
// Chart // Chart
// //
// General styles // General styles
.chart { .chart {
position: relative; position: relative;
height: $chart-height; height: $chart-height;
} }
.chart.chart-appended { .chart.chart-appended {
height: calc(#{$chart-height} - #{$chart-legend-height}); height: calc(#{$chart-height} - #{$chart-legend-height});
} }
.chart-sm { .chart-sm {
height: $chart-height-sm; height: $chart-height-sm;
} }
.chart-sm.chart-appended { .chart-sm.chart-appended {
height: calc(#{$chart-height-sm} - #{$chart-legend-height}); height: calc(#{$chart-height-sm} - #{$chart-legend-height});
} }
// Sparkline // Sparkline
.chart-sparkline { .chart-sparkline {
width: $chart-sparkline-width; width: $chart-sparkline-width;
height: $chart-sparkline-height; height: $chart-sparkline-height;
} }
// Legend // Legend
// //
// Custom legend // Custom legend
.chart-legend { .chart-legend {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: $chart-legend-margin-top; margin-top: $chart-legend-margin-top;
font-size: $chart-legend-font-size; font-size: $chart-legend-font-size;
text-align: center; text-align: center;
color: $chart-legend-color; color: $chart-legend-color;
} }
.chart-legend-item { .chart-legend-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
+ .chart-legend-item { + .chart-legend-item {
margin-left: 1rem; margin-left: 1rem;
} }
} }
.chart-legend-indicator { .chart-legend-indicator {
display: inline-block; display: inline-block;
width: .5rem; width: .5rem;
height: .5rem; height: .5rem;
margin-right: 0.375rem; margin-right: 0.375rem;
border-radius: 50%; border-radius: 50%;
} }
// Tooltip // Tooltip
// //
// Custom tooltip // Custom tooltip
#chart-tooltip { #chart-tooltip {
z-index: 0; z-index: 0;
} }
#chart-tooltip .arrow { #chart-tooltip .arrow {
top: 100%; top: 100%;
left: 50%; left: 50%;
transform: translateX(-50%) translateX(-.5rem); transform: translateX(-50%) translateX(-.5rem);
} }

72
explorer/src/scss/dashkit/_checklist.scss
View File

@ -1,36 +1,36 @@
// //
// checklist.scss // checklist.scss
// Dashkit component // Dashkit component
// //
.checklist { .checklist {
outline: none; outline: none;
} }
.checklist-control { .checklist-control {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
outline: none; outline: none;
user-select: none; user-select: none;
} }
.checklist-control .custom-control-input:checked ~ .custom-control-caption { .checklist-control .custom-control-input:checked ~ .custom-control-caption {
text-decoration: line-through; text-decoration: line-through;
color: $checklist-control-checked-color; color: $checklist-control-checked-color;
} }
.checklist-control + .checklist-control { .checklist-control + .checklist-control {
margin-top: $checklist-control-spacer; margin-top: $checklist-control-spacer;
} }
.checklist-control:first-child[style*="display: none"] + .checklist-control { .checklist-control:first-child[style*="display: none"] + .checklist-control {
margin-top: 0; margin-top: 0;
} }
.checklist-control.draggable-mirror { .checklist-control.draggable-mirror {
z-index: $zindex-fixed; z-index: $zindex-fixed;
} }
.checklist-control.draggable-source--is-dragging { .checklist-control.draggable-source--is-dragging {
opacity: .2; opacity: .2;
} }

20
explorer/src/scss/dashkit/_close.scss
View File

@ -1,10 +1,10 @@
// //
// close.scss // close.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// Small // Small
.close-sm { .close-sm {
font-size: $close-font-size-sm; font-size: $close-font-size-sm;
} }

32
explorer/src/scss/dashkit/_code.scss
View File

@ -1,16 +1,16 @@
// //
// code.scss // code.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Dashkit ================================= // Dashkit =================================
// //
// Highlight // Highlight
// //
// Hightlight.js overrides // Hightlight.js overrides
.highlight { .highlight {
padding: 0; padding: 0;
} }

68
explorer/src/scss/dashkit/_comment.scss
View File

@ -1,34 +1,34 @@
// //
// comment.scss // comment.scss
// Dashkit component // Dashkit component
// //
// Comment // Comment
// //
// General styles // General styles
.comment { .comment {
margin-bottom: $comment-margin-bottom; margin-bottom: $comment-margin-bottom;
} }
.comment-body { .comment-body {
display: inline-block; display: inline-block;
padding: $comment-body-padding-y $comment-body-padding-x; padding: $comment-body-padding-y $comment-body-padding-x;
background-color: $comment-body-bg; background-color: $comment-body-bg;
border-radius: $comment-body-border-radius; border-radius: $comment-body-border-radius;
} }
.comment-time { .comment-time {
display: block; display: block;
margin-bottom: $comment-time-margin-bottom; margin-bottom: $comment-time-margin-bottom;
font-size: $comment-time-font-size; font-size: $comment-time-font-size;
color: $comment-time-color; color: $comment-time-color;
} }
.comment-text { .comment-text {
font-size: $comment-body-font-size; font-size: $comment-body-font-size;
} }
.comment-text:last-child { .comment-text:last-child {
margin-bottom: 0; margin-bottom: 0;
} }

74
explorer/src/scss/dashkit/_custom-forms.scss
View File

@ -1,37 +1,37 @@
// //
// custom-forms.scss // custom-forms.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides =================================== // Bootstrap Overrides ===================================
// //
// Switch // Switch
.custom-switch { .custom-switch {
min-height: $custom-switch-height; min-height: $custom-switch-height;
.custom-control-label { .custom-control-label {
&::before { &::before {
top: 0; top: 0;
height: $custom-switch-height; height: $custom-switch-height;
border-radius: $custom-switch-height / 2; border-radius: $custom-switch-height / 2;
} }
&::after { &::after {
top: $custom-switch-spacing; top: $custom-switch-spacing;
left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width; left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width;
background-color: $custom-switch-indicator-bg; background-color: $custom-switch-indicator-bg;
} }
} }
.custom-control-input:checked ~ .custom-control-label { .custom-control-input:checked ~ .custom-control-label {
&::after { &::after {
background-color: $custom-switch-indicator-active-bg; background-color: $custom-switch-indicator-active-bg;
transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size); transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size);
} }
} }
} }

76
explorer/src/scss/dashkit/_dashkit.scss
View File

@ -1,38 +1,38 @@
// Extended Bootstrap components // Extended Bootstrap components
@import 'mixins'; @import 'mixins';
@import 'alert'; @import 'alert';
@import 'badge'; @import 'badge';
@import 'breadcrumb'; @import 'breadcrumb';
@import 'buttons'; @import 'buttons';
@import 'card'; @import 'card';
@import 'close'; @import 'close';
@import 'code'; @import 'code';
@import 'custom-forms'; @import 'custom-forms';
@import 'dropdowns'; @import 'dropdowns';
@import 'forms'; @import 'forms';
@import 'jumbotron'; @import 'jumbotron';
@import 'list-group'; @import 'list-group';
@import 'modal'; @import 'modal';
@import 'nav'; @import 'nav';
@import 'navbar'; @import 'navbar';
@import 'popover'; @import 'popover';
@import 'progress'; @import 'progress';
@import 'reboot'; @import 'reboot';
@import 'root'; @import 'root';
@import 'tables'; @import 'tables';
@import 'toasts'; @import 'toasts';
@import 'type'; @import 'type';
@import 'utilities'; @import 'utilities';
// Dashkit only components // Dashkit only components
@import 'avatar'; @import 'avatar';
@import 'chart'; @import 'chart';
@import 'comment'; @import 'comment';
@import 'checklist'; @import 'checklist';
@import 'header'; @import 'header';
@import 'icon'; @import 'icon';
@import 'kanban'; @import 'kanban';
@import 'main-content'; @import 'main-content';
@import 'vendors'; @import 'vendors';

248
explorer/src/scss/dashkit/_dropdowns.scss
View File

@ -1,124 +1,124 @@
// //
// dropdowns.scss // dropdowns.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap overrides ================================== // Bootstrap overrides ==================================
// //
// Dropdown arrows // Dropdown arrows
// //
// Replace original arrows with Feather icons // Replace original arrows with Feather icons
.dropdown-toggle { .dropdown-toggle {
&::after { &::after {
width: auto; width: auto;
height: auto; height: auto;
border: none !important; border: none !important;
vertical-align: middle; vertical-align: middle;
font-family: 'Feather'; font-family: 'Feather';
} }
&::after { &::after {
content: '\e92e'; content: '\e92e';
} }
} }
.dropup > .dropdown-toggle { .dropup > .dropdown-toggle {
&::after { &::after {
content: '\e931'; content: '\e931';
} }
} }
.dropright > .dropdown-toggle { .dropright > .dropdown-toggle {
&::after { &::after {
content: '\e930'; content: '\e930';
} }
} }
.dropleft > .dropdown-toggle { .dropleft > .dropdown-toggle {
&::before { &::before {
content: '\e92f'; content: '\e92f';
width: auto; width: auto;
height: auto; height: auto;
border: none !important; border: none !important;
vertical-align: middle; vertical-align: middle;
font-family: 'Feather'; font-family: 'Feather';
} }
} }
// Dropdown toggle // Dropdown toggle
// //
// Right align arrows // Right align arrows
.dropdown-item.dropdown-toggle { .dropdown-item.dropdown-toggle {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
// Dropdown menu animation // Dropdown menu animation
// //
// Animate dropdown menu appearance // Animate dropdown menu appearance
.dropdown-menu { .dropdown-menu {
animation: dropdownMenu .15s; animation: dropdownMenu .15s;
} }
@keyframes dropdownMenu { @keyframes dropdownMenu {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
// //
// Dashkit =================================== // Dashkit ===================================
// //
// Dropdown ellipses // Dropdown ellipses
// //
// Styles the ellipses icon and removes the dropdown arrow // Styles the ellipses icon and removes the dropdown arrow
.dropdown-ellipses { .dropdown-ellipses {
font-size: $font-size-lg; font-size: $font-size-lg;
color: $gray-400; color: $gray-400;
} }
.dropdown-ellipses::after { .dropdown-ellipses::after {
display: none; display: none;
} }
// Dropdown card // Dropdown card
// //
// Makes the dropdown menu act like a card // Makes the dropdown menu act like a card
.dropdown-menu-card { .dropdown-menu-card {
min-width: $dropdown-card-min-width; min-width: $dropdown-card-min-width;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
background-color: $card-bg; background-color: $card-bg;
border-color: $dropdown-card-border-color; border-color: $dropdown-card-border-color;
.card-header { .card-header {
min-height: $dropdown-card-header-min-height; min-height: $dropdown-card-header-min-height;
} }
.card-body { .card-body {
max-height: $dropdown-card-body-max-height; max-height: $dropdown-card-body-max-height;
overflow-y: auto; overflow-y: auto;
} }
} }

544
explorer/src/scss/dashkit/_forms.scss
View File

@ -1,272 +1,272 @@
// //
// forms.scss // forms.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides =================================== // Bootstrap Overrides ===================================
// //
// Help text // Help text
.form-text { .form-text {
margin-top: 0; margin-top: 0;
margin-bottom: $label-margin-bottom; margin-bottom: $label-margin-bottom;
} }
// Form validation // Form validation
.was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated .form-control:valid:focus, .form-control.is-valid:focus,
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
box-shadow: none; box-shadow: none;
} }
// //
// Dashkit =================================== // Dashkit ===================================
// //
// Form control flush // Form control flush
// //
// Removes borders and paddings from inputs and text areas // Removes borders and paddings from inputs and text areas
.form-control-flush { .form-control-flush {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
border-color: transparent !important; border-color: transparent !important;
background-color: transparent !important; background-color: transparent !important;
resize: none; resize: none;
} }
// Form control auto // Form control auto
// //
// Sets the height of the input to auto // Sets the height of the input to auto
.form-control-auto { .form-control-auto {
height: auto; height: auto;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
// Form control rounded // Form control rounded
// //
// Makes input border radius round // Makes input border radius round
.form-control-rounded { .form-control-rounded {
border-radius: 20rem; border-radius: 20rem;
} }
// Input group merge // Input group merge
// //
// Makes input group text and form control visually the same element // Makes input group text and form control visually the same element
.input-group.input-group-merge { .input-group.input-group-merge {
> .form-control { > .form-control {
border-radius: $input-border-radius; border-radius: $input-border-radius;
&:focus { &:focus {
box-shadow: none; box-shadow: none;
~ [class*="input-group"] { ~ [class*="input-group"] {
> .input-group-text { > .input-group-text {
border-color: $input-focus-border-color; border-color: $input-focus-border-color;
} }
} }
} }
} }
> .form-control.is-valid ~ [class*="input-group"] > .input-group-text { > .form-control.is-valid ~ [class*="input-group"] > .input-group-text {
border-color: $success; border-color: $success;
} }
> .form-control.is-invalid ~ [class*="input-group"] > .input-group-text { > .form-control.is-invalid ~ [class*="input-group"] > .input-group-text {
border-color: $danger; border-color: $danger;
} }
> .form-control-prepended { > .form-control-prepended {
padding-left: $input-padding-x / 2; padding-left: $input-padding-x / 2;
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-left-width: 0; border-left-width: 0;
} }
> .form-control-appended { > .form-control-appended {
padding-right: $input-padding-x / 2; padding-right: $input-padding-x / 2;
border-top-right-radius: 0 !important; border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
border-right-width: 0; border-right-width: 0;
} }
> .input-group-prepend { > .input-group-prepend {
order: -1; // prepend always goes first order: -1; // prepend always goes first
> .input-group-text { > .input-group-text {
padding-right: $input-padding-x / 2; padding-right: $input-padding-x / 2;
border-top-left-radius: $input-border-radius; border-top-left-radius: $input-border-radius;
border-bottom-left-radius: $input-border-radius; border-bottom-left-radius: $input-border-radius;
border-right-width: 0; border-right-width: 0;
transition: $input-transition; transition: $input-transition;
} }
} }
> .input-group-append { > .input-group-append {
> .input-group-text { > .input-group-text {
padding-left: $input-padding-x / 2; padding-left: $input-padding-x / 2;
border-top-right-radius: $input-border-radius; border-top-right-radius: $input-border-radius;
border-bottom-right-radius: $input-border-radius; border-bottom-right-radius: $input-border-radius;
border-left-width: 0; border-left-width: 0;
transition: $input-transition; transition: $input-transition;
} }
} }
} }
.input-group-lg.input-group-merge { .input-group-lg.input-group-merge {
> .form-control { > .form-control {
border-radius: $input-border-radius-lg; border-radius: $input-border-radius-lg;
} }
> .form-control-prepended { > .form-control-prepended {
padding-left: $input-padding-x-lg / 2; padding-left: $input-padding-x-lg / 2;
} }
> .form-control-appended { > .form-control-appended {
padding-right: $input-padding-x-lg / 2; padding-right: $input-padding-x-lg / 2;
} }
> .input-group-prepend { > .input-group-prepend {
> .input-group-text { > .input-group-text {
padding-right: $input-padding-x-lg / 2; padding-right: $input-padding-x-lg / 2;
border-top-left-radius: $input-border-radius-lg; border-top-left-radius: $input-border-radius-lg;
border-bottom-left-radius: $input-border-radius-lg; border-bottom-left-radius: $input-border-radius-lg;
} }
} }
> .input-group-append { > .input-group-append {
> .input-group-text { > .input-group-text {
padding-left: $input-padding-x-lg / 2; padding-left: $input-padding-x-lg / 2;
border-top-right-radius: $input-border-radius-lg; border-top-right-radius: $input-border-radius-lg;
border-bottom-right-radius: $input-border-radius-lg; border-bottom-right-radius: $input-border-radius-lg;
} }
} }
} }
.input-group-sm.input-group-merge { .input-group-sm.input-group-merge {
> .form-control { > .form-control {
border-radius: $input-border-radius-sm; border-radius: $input-border-radius-sm;
} }
> .form-control-prepended { > .form-control-prepended {
padding-left: $input-padding-x-sm / 2; padding-left: $input-padding-x-sm / 2;
} }
> .form-control-appended { > .form-control-appended {
padding-right: $input-padding-x-sm / 2; padding-right: $input-padding-x-sm / 2;
} }
> .input-group-prepend { > .input-group-prepend {
> .input-group-text { > .input-group-text {
padding-right: $input-padding-x-sm / 2; padding-right: $input-padding-x-sm / 2;
border-top-left-radius: $input-border-radius-sm; border-top-left-radius: $input-border-radius-sm;
border-bottom-left-radius: $input-border-radius-sm; border-bottom-left-radius: $input-border-radius-sm;
} }
} }
> .input-group-append { > .input-group-append {
> .input-group-text { > .input-group-text {
padding-left: $input-padding-x-sm / 2; padding-left: $input-padding-x-sm / 2;
border-top-right-radius: $input-border-radius-sm; border-top-right-radius: $input-border-radius-sm;
border-bottom-right-radius: $input-border-radius-sm; border-bottom-right-radius: $input-border-radius-sm;
} }
} }
} }
.input-group-rounded.input-group-merge { .input-group-rounded.input-group-merge {
> .form-control { > .form-control {
border-radius: 20rem; border-radius: 20rem;
} }
> .input-group-prepend { > .input-group-prepend {
> .input-group-text { > .input-group-text {
border-top-left-radius: 20rem; border-top-left-radius: 20rem;
border-bottom-left-radius: 20rem; border-bottom-left-radius: 20rem;
} }
} }
> .input-group-append { > .input-group-append {
> .input-group-text { > .input-group-text {
border-top-right-radius: 20rem; border-top-right-radius: 20rem;
border-bottom-right-radius: 20rem; border-bottom-right-radius: 20rem;
} }
} }
} }
.input-group-flush { .input-group-flush {
> .form-control { > .form-control {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
border-color: transparent !important; border-color: transparent !important;
background-color: transparent !important; background-color: transparent !important;
} }
> .input-group-prepend, > .input-group-prepend,
> .input-group-append { > .input-group-append {
> .input-group-text { > .input-group-text {
padding: 0; padding: 0;
border-width: 0; border-width: 0;
background-color: transparent; background-color: transparent;
} }
} }
} }
// Font size // Font size
.form-control { .form-control {
&.h1, &.h2, &.h3, &.h4, &.h5 { &.h1, &.h2, &.h3, &.h4, &.h5 {
margin-bottom: 0; margin-bottom: 0;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
letter-spacing: $headings-letter-spacing; letter-spacing: $headings-letter-spacing;
} }
&.h1 { &.h1 {
font-size: $h1-font-size; font-size: $h1-font-size;
} }
&.h2 { &.h2 {
font-size: $h2-font-size; font-size: $h2-font-size;
} }
&.h3 { &.h3 {
font-size: $h3-font-size; font-size: $h3-font-size;
} }
&.h4 { &.h4 {
font-size: $h4-font-size; font-size: $h4-font-size;
} }
&.h5 { &.h5 {
font-size: $h5-font-size; font-size: $h5-font-size;
} }
} }

116
explorer/src/scss/dashkit/_header.scss
View File

@ -1,58 +1,58 @@
// //
// header.scss // header.scss
// Dashkit component // Dashkit component
// //
// Header // Header
// //
// General styles // General styles
.header { .header {
margin-bottom: $header-margin-bottom; margin-bottom: $header-margin-bottom;
} }
.header-img-top { .header-img-top {
width: 100%; height: auto; width: 100%; height: auto;
} }
.header-body { .header-body {
padding-top: $header-spacing-y; padding-top: $header-spacing-y;
padding-bottom: $header-spacing-y; padding-bottom: $header-spacing-y;
border-bottom: $header-body-border-width solid $header-body-border-color; border-bottom: $header-body-border-width solid $header-body-border-color;
} }
.header.bg-dark .header-body, .header.bg-dark .header-body,
.header.bg-hero .header-body { .header.bg-hero .header-body {
border-bottom-color: $header-body-border-color-dark; border-bottom-color: $header-body-border-color-dark;
} }
.header-footer { .header-footer {
padding-top: $header-spacing-y; padding-top: $header-spacing-y;
padding-bottom: $header-spacing-y; padding-bottom: $header-spacing-y;
} }
.header-pretitle { .header-pretitle {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .08em; letter-spacing: .08em;
color: $text-muted; color: $text-muted;
} }
.header-title { .header-title {
margin-bottom: 0; margin-bottom: 0;
} }
.header-subtitle { .header-subtitle {
margin-top: map-get($spacers, 2); margin-top: map-get($spacers, 2);
margin-bottom: 0; margin-bottom: 0;
color: $text-muted; color: $text-muted;
} }
.header-tabs { .header-tabs {
margin-bottom: -$header-spacing-y; margin-bottom: -$header-spacing-y;
border-bottom-width: 0; border-bottom-width: 0;
.nav-link { .nav-link {
padding-top: $header-spacing-y; padding-top: $header-spacing-y;
padding-bottom: $header-spacing-y; padding-bottom: $header-spacing-y;
} }
} }

108
explorer/src/scss/dashkit/_icon.scss
View File

@ -1,54 +1,54 @@
// //
// icon.scss // icon.scss
// Dashkit component // Dashkit component
// //
// Icon // Icon
// //
// General styles // General styles
.icon { .icon {
display: inline-block; display: inline-block;
// Feather icon // Feather icon
> .fe { > .fe {
display: block; display: block;
min-width: 1em * $line-height-base; min-width: 1em * $line-height-base;
min-height: 1em * $line-height-base; min-height: 1em * $line-height-base;
text-align: center; text-align: center;
font-size: $font-size-lg; font-size: $font-size-lg;
} }
// Active state // Active state
&.active { &.active {
position: relative; position: relative;
// Feather icon // Feather icon
> .fe { > .fe {
mask-image: url(#{$path-to-img}/masks/icon-status.svg); mask-image: url(#{$path-to-img}/masks/icon-status.svg);
mask-size: 100% 100%; mask-size: 100% 100%;
} }
// Indicator // Indicator
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 10%; right: 20%; top: 10%; right: 20%;
width: 20%; height: 20%; width: 20%; height: 20%;
border-radius: 50%; border-radius: 50%;
background-color: $primary; background-color: $primary;
} }
} }
} }
// Feather icons // Feather icons
// //
// Fixes icon / font vertical alignment issue // Fixes icon / font vertical alignment issue
.fe { .fe {
line-height: inherit; line-height: inherit;
} }

30
explorer/src/scss/dashkit/_jumbotron.scss
View File

@ -1,15 +1,15 @@
// //
// jumbotron.scss // jumbotron.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
.jumbotron { .jumbotron {
padding: ($jumbotron-padding / 2); padding: ($jumbotron-padding / 2);
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
padding: $jumbotron-padding; padding: $jumbotron-padding;
} }
} }

136
explorer/src/scss/dashkit/_kanban.scss
View File

@ -1,68 +1,68 @@
// //
// kanban.scss // kanban.scss
// Dashkit component // Dashkit component
// //
// Container // Container
.container-fluid.kanban-container { .container-fluid.kanban-container {
min-height: calc(100vh - 129px); min-height: calc(100vh - 129px);
} }
.container.kanban-container { .container.kanban-container {
min-height: calc(100vh - 129px - 69px); min-height: calc(100vh - 129px - 69px);
} }
.kanban-container { .kanban-container {
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.kanban-container > .row { .kanban-container > .row {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.kanban-container > .row > [class*="col"] { .kanban-container > .row > [class*="col"] {
max-width: $kanban-col-width; max-width: $kanban-col-width;
} }
// Category // Category
.kanban-category { .kanban-category {
min-height: 1rem; min-height: 1rem;
} }
// Item // Item
.kanban-item { .kanban-item {
outline: none; outline: none;
user-select: none; user-select: none;
} }
.kanban-item.draggable-source--is-dragging { .kanban-item.draggable-source--is-dragging {
opacity: .2; opacity: .2;
} }
.kanban-item.draggable-mirror { .kanban-item.draggable-mirror {
z-index: $zindex-fixed; z-index: $zindex-fixed;
} }
.card-body .kanban-item.draggable-mirror > .card { .card-body .kanban-item.draggable-mirror > .card {
transform: rotateZ(-3deg); transform: rotateZ(-3deg);
} }
// Card // Card
.kanban-item > .card[data-toggle="modal"] { .kanban-item > .card[data-toggle="modal"] {
cursor: pointer; cursor: pointer;
} }
// Add form // Add form
.kanban-add-form .form-control[data-toggle="flatpickr"] { .kanban-add-form .form-control[data-toggle="flatpickr"] {
width: 12ch; // there is no CSS way to set input's width to auto so hardcoding this value width: 12ch; // there is no CSS way to set input's width to auto so hardcoding this value
} }

106
explorer/src/scss/dashkit/_list-group.scss
View File

@ -1,53 +1,53 @@
// //
// list-group.scss // list-group.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
// Contextual variants // Contextual variants
// //
// Changing the Bootstrap color modifier classes to be full opacity background with yiq calculated font color // Changing the Bootstrap color modifier classes to be full opacity background with yiq calculated font color
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@include list-group-item-variant($color, $value, color-yiq($value)); @include list-group-item-variant($color, $value, color-yiq($value));
} }
// List group large // List group large
.list-group-lg .list-group-item { .list-group-lg .list-group-item {
padding-top: $list-group-item-padding-y-lg; padding-top: $list-group-item-padding-y-lg;
padding-bottom: $list-group-item-padding-y-lg; padding-bottom: $list-group-item-padding-y-lg;
} }
// List group flush // List group flush
.list-group-flush > .list-group-item { .list-group-flush > .list-group-item {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
// //
// Dashkit =================================== // Dashkit ===================================
// //
// Activity // Activity
.list-group-activity .list-group-item { .list-group-activity .list-group-item {
border: 0; border: 0;
} }
.list-group-activity .list-group-item:not(:last-child)::before { .list-group-activity .list-group-item:not(:last-child)::before {
content: ''; content: '';
position: absolute; position: absolute;
top: $list-group-item-padding-y; top: $list-group-item-padding-y;
left: $avatar-size-sm / 2; left: $avatar-size-sm / 2;
height: 100%; height: 100%;
border-left: $border-width solid $border-color; border-left: $border-width solid $border-color;
} }

140
explorer/src/scss/dashkit/_main-content.scss
View File

@ -1,70 +1,70 @@
// //
// main-content.scss // main-content.scss
// Dashkit component // Dashkit component
// //
// Main content // Main content
// //
// General styles // General styles
.navbar-vertical:not([style*="display: none"]) ~ .main-content, .navbar-vertical:not([style*="display: none"]) ~ .main-content,
.navbar-vertical-sm:not([style*="display: none"]) ~ .main-content { .navbar-vertical-sm:not([style*="display: none"]) ~ .main-content {
.container, .container,
.container-fluid { .container-fluid {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important; padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important;
padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important; padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important;
} }
} }
} }
// Main content offset // Main content offset
// //
// Offsets the main content depending on the sidebar positioning // Offsets the main content depending on the sidebar positioning
.navbar-vertical.navbar-expand { .navbar-vertical.navbar-expand {
@each $breakpoint, $value in $grid-breakpoints { @each $breakpoint, $value in $grid-breakpoints {
&-#{$breakpoint} { &-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) { @include media-breakpoint-up(#{$breakpoint}) {
// Left // Left
&.fixed-left:not([style*="display: none"]) ~ .main-content { &.fixed-left:not([style*="display: none"]) ~ .main-content {
margin-left: $navbar-vertical-width; margin-left: $navbar-vertical-width;
} }
// Right // Right
&.fixed-right:not([style*="display: none"]) ~ .main-content { &.fixed-right:not([style*="display: none"]) ~ .main-content {
margin-right: $navbar-vertical-width; margin-right: $navbar-vertical-width;
} }
} }
} }
} }
} }
.navbar-vertical-sm.navbar-expand { .navbar-vertical-sm.navbar-expand {
@each $breakpoint, $value in $grid-breakpoints { @each $breakpoint, $value in $grid-breakpoints {
&-#{$breakpoint} { &-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) { @include media-breakpoint-up(#{$breakpoint}) {
// Left // Left
&.fixed-left:not([style*="display: none"]) ~ .main-content { &.fixed-left:not([style*="display: none"]) ~ .main-content {
margin-left: $navbar-vertical-width-sm; margin-left: $navbar-vertical-width-sm;
} }
// Right // Right
&.fixed-right:not([style*="display: none"]) ~ .main-content { &.fixed-right:not([style*="display: none"]) ~ .main-content {
margin-right: $navbar-vertical-width-sm; margin-right: $navbar-vertical-width-sm;
} }
} }
} }
} }
} }

32
explorer/src/scss/dashkit/_mixins.scss
View File

@ -1,16 +1,16 @@
// Mixins // Mixins
// //
// //
// Utilities // Utilities
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/badge"; @import "mixins/badge";
// Components // Components
// ... // ...
// Skins // Skins
// ... // ...
// Layout // Layout
// ... // ...

202
explorer/src/scss/dashkit/_modal.scss
View File

@ -1,101 +1,101 @@
// //
// modal.scss // modal.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ======================= // Bootstrap Overrides =======================
// //
.modal-dialog { .modal-dialog {
// When fading in the modal, animate it to slide down // When fading in the modal, animate it to slide down
.modal.fade & { .modal.fade & {
transform: translate(0, -150px); transform: translate(0, -150px);
} }
.modal.show & { .modal.show & {
transform: translate(0, 0); transform: translate(0, 0);
} }
} }
.modal-header .close { .modal-header .close {
margin: -1.5rem -1.5rem -1.5rem auto; margin: -1.5rem -1.5rem -1.5rem auto;
} }
// //
// Dashkit =================================== // Dashkit ===================================
// //
// Modal dialog vertical // Modal dialog vertical
// //
// Creates a vertically aligned version of the modal dialog // Creates a vertically aligned version of the modal dialog
.modal-dialog-vertical { .modal-dialog-vertical {
height: 100%; height: 100%;
max-width: $modal-dialog-vertical-width; max-width: $modal-dialog-vertical-width;
margin: 0; margin: 0;
.modal-content { .modal-content {
height: inherit; height: inherit;
border-width: 0 $modal-content-border-width 0 0; border-width: 0 $modal-content-border-width 0 0;
border-radius: 0; border-radius: 0;
} }
.modal-header { .modal-header {
border-radius: inherit; border-radius: inherit;
} }
.modal-body { .modal-body {
height: inherit; height: inherit;
overflow-y: auto; overflow-y: auto;
} }
} }
.modal.fade .modal-dialog-vertical { .modal.fade .modal-dialog-vertical {
transform: translateX(-100%); transform: translateX(-100%);
} }
.modal.show .modal-dialog-vertical { .modal.show .modal-dialog-vertical {
transform: translateX(0); transform: translateX(0);
} }
// Positioning // Positioning
.modal.fixed-right { .modal.fixed-right {
padding-right: 0 !important; padding-right: 0 !important;
} }
.modal.fixed-right .modal-dialog-vertical { .modal.fixed-right .modal-dialog-vertical {
margin-left: auto; margin-left: auto;
} }
.modal.fixed-right.fade .modal-dialog-vertical { .modal.fixed-right.fade .modal-dialog-vertical {
transform: translateX(100%); transform: translateX(100%);
} }
.modal.fixed-right.show .modal-dialog-vertical { .modal.fixed-right.show .modal-dialog-vertical {
transform: translateX(0); transform: translateX(0);
} }
// Modal card // Modal card
.modal-card { .modal-card {
margin-bottom: 0; margin-bottom: 0;
.card-body { .card-body {
max-height: $modal-card-body-max-height; max-height: $modal-card-body-max-height;
overflow-y: auto; overflow-y: auto;
} }
} }
// Modal tabs // Modal tabs
.modal-header-tabs { .modal-header-tabs {
margin-top: -$modal-header-padding-y; margin-top: -$modal-header-padding-y;
margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width}); margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width});
} }

224
explorer/src/scss/dashkit/_nav.scss
View File

@ -1,112 +1,112 @@
// //
// nav.scss // nav.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
// Changing nav tabs to be bottom highlight style // Changing nav tabs to be bottom highlight style
.nav-tabs { .nav-tabs {
.nav-item { .nav-item {
margin-left: $nav-tabs-link-margin-x; margin-left: $nav-tabs-link-margin-x;
margin-right: $nav-tabs-link-margin-x; margin-right: $nav-tabs-link-margin-x;
} }
.nav-link { .nav-link {
padding: $nav-tabs-link-padding-y 0; padding: $nav-tabs-link-padding-y 0;
border-bottom: $nav-tabs-link-active-border-width solid transparent; border-bottom: $nav-tabs-link-active-border-width solid transparent;
border-left-width: 0; border-left-width: 0;
border-right-width: 0; border-right-width: 0;
border-top-width: 0; border-top-width: 0;
&:not(.active) { &:not(.active) {
color: $gray-600; color: $gray-600;
&:hover { &:hover {
color: $gray-700; color: $gray-700;
} }
} }
} }
.nav-item:first-child { .nav-item:first-child {
margin-left: 0; margin-left: 0;
} }
.nav-item:last-child { .nav-item:last-child {
margin-right: 0; margin-right: 0;
} }
// Removes the primary color underline from dropdowns in .nav-tabs // Removes the primary color underline from dropdowns in .nav-tabs
.nav-item.show .nav-link { .nav-item.show .nav-link {
border-color: transparent; border-color: transparent;
} }
} }
// //
// Dashkit ===================================== // Dashkit =====================================
// //
// Nav overflow // Nav overflow
// //
// Allow links to overflow and make horizontally scrollable // Allow links to overflow and make horizontally scrollable
.nav-overflow { .nav-overflow {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-x: auto; overflow-x: auto;
padding-bottom: 1px; // to prevent active links border bottom from hiding padding-bottom: 1px; // to prevent active links border bottom from hiding
// Hide scrollbar // Hide scrollbar
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
} }
// Creates a small version of the .nav-tabs // Creates a small version of the .nav-tabs
.nav-tabs-sm { .nav-tabs-sm {
font-size: $nav-tabs-sm-font-size; font-size: $nav-tabs-sm-font-size;
.nav-item { .nav-item {
margin-left: $nav-tabs-sm-link-margin-x; margin-left: $nav-tabs-sm-link-margin-x;
margin-right: $nav-tabs-sm-link-margin-x; margin-right: $nav-tabs-sm-link-margin-x;
} }
.nav-link { .nav-link {
// Calculates the exact padding necessary to vertically fill the .card-header // Calculates the exact padding necessary to vertically fill the .card-header
padding-top: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y); padding-top: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y);
padding-bottom: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y); padding-bottom: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y);
} }
} }
// Creates a small version of the .nab // Creates a small version of the .nab
.nav-sm { .nav-sm {
.nav-link { .nav-link {
font-size: $font-size-sm; font-size: $font-size-sm;
} }
} }
// Nav + button group // Nav + button group
// //
// Change the look of .btn-white when .active // Change the look of .btn-white when .active
.nav.btn-group { .nav.btn-group {
.btn-white.active { .btn-white.active {
background-color: $primary; background-color: $primary;
border-color: $primary; border-color: $primary;
color: $white; color: $white;
} }
} }

1444
explorer/src/scss/dashkit/_navbar.scss
View File

File diff suppressed because it is too large Load Diff

202
explorer/src/scss/dashkit/_popover.scss
View File

@ -1,101 +1,101 @@
// //
// popover.scss // popover.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
.popover { .popover {
padding: $popover-padding-y $popover-padding-x; padding: $popover-padding-y $popover-padding-x;
&:hover { &:hover {
visibility: visible !important; visibility: visible !important;
} }
} }
.popover-header { .popover-header {
margin-bottom: $popover-header-margin-bottom; margin-bottom: $popover-header-margin-bottom;
border-bottom: 0; border-bottom: 0;
} }
.popover-body-label { .popover-body-label {
margin-left: .25rem; margin-left: .25rem;
} }
.popover-body-value { .popover-body-value {
margin-left: .25rem; margin-left: .25rem;
} }
.popover-body-indicator { .popover-body-indicator {
display: inline-block; display: inline-block;
width: .5rem; width: .5rem;
height: .5rem; height: .5rem;
border-radius: 50%; border-radius: 50%;
} }
// Large // Large
.popover-lg { .popover-lg {
max-width: $popover-lg-max-width; max-width: $popover-lg-max-width;
} }
// Dark // Dark
.popover-dark { .popover-dark {
background-color: $popover-dark-bg; background-color: $popover-dark-bg;
border-color: $popover-dark-border-color; border-color: $popover-dark-border-color;
} }
.popover-dark .popover-header { .popover-dark .popover-header {
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
background-color: $popover-dark-header-bg; background-color: $popover-dark-header-bg;
color: $popover-dark-header-color; color: $popover-dark-header-color;
} }
.popover-dark.bs-popover-top .arrow { .popover-dark.bs-popover-top .arrow {
&::before { &::before {
border-top-color: $popover-dark-border-color; border-top-color: $popover-dark-border-color;
} }
&::after { &::after {
border-top-color: $popover-dark-bg; border-top-color: $popover-dark-bg;
} }
} }
.popover-dark.bs-popover-right .arrow { .popover-dark.bs-popover-right .arrow {
&::before { &::before {
border-right-color: $popover-dark-border-color; border-right-color: $popover-dark-border-color;
} }
&::after { &::after {
border-right-color: $popover-dark-bg; border-right-color: $popover-dark-bg;
} }
} }
.popover-dark.bs-popover-bottom .arrow { .popover-dark.bs-popover-bottom .arrow {
&::before { &::before {
border-bottom-color: $popover-dark-border-color; border-bottom-color: $popover-dark-border-color;
} }
&::after { &::after {
border-bottom-color: $popover-dark-bg; border-bottom-color: $popover-dark-bg;
} }
} }
.popover-dark.bs-popover-left .arrow { .popover-dark.bs-popover-left .arrow {
&::before { &::before {
border-left-color: $popover-dark-border-color; border-left-color: $popover-dark-border-color;
} }
&::after { &::after {
border-left-color: $popover-dark-bg; border-left-color: $popover-dark-bg;
} }
} }

54
explorer/src/scss/dashkit/_progress.scss
View File

@ -1,27 +1,27 @@
// //
// progress.scss // progress.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
// Rounds the progress bar, even for "multiple bar" progress bars // Rounds the progress bar, even for "multiple bar" progress bars
.progress-bar:first-child { .progress-bar:first-child {
border-top-left-radius: $progress-border-radius; border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius; border-bottom-left-radius: $progress-border-radius;
} }
.progress-bar:last-child { .progress-bar:last-child {
border-top-right-radius: $progress-border-radius; border-top-right-radius: $progress-border-radius;
border-bottom-right-radius: $progress-border-radius; border-bottom-right-radius: $progress-border-radius;
} }
// //
// Dashkit =================================== // Dashkit ===================================
// //
.progress-sm { .progress-sm {
height: $progress-height-sm; height: $progress-height-sm;
} }

24
explorer/src/scss/dashkit/_reboot.scss
View File

@ -1,12 +1,12 @@
// //
// reboot.scss // reboot.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Remove the cancel buttons in Chrome and Safari on macOS. // Remove the cancel buttons in Chrome and Safari on macOS.
// //
[type="search"]::-webkit-search-cancel-button { [type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
} }

24
explorer/src/scss/dashkit/_root.scss
View File

@ -1,12 +1,12 @@
// //
// root.scss // root.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
html { html {
height: 100%; height: 100%;
} }
body { body {
min-height: 100%; min-height: 100%;
} }

152
explorer/src/scss/dashkit/_tables.scss
View File

@ -1,76 +1,76 @@
// //
// tables.scss // tables.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
.table { .table {
thead th { thead th {
background-color: $table-head-bg; background-color: $table-head-bg;
text-transform: uppercase; text-transform: uppercase;
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
letter-spacing: .08em; letter-spacing: .08em;
color: $table-head-color; color: $table-head-color;
border-bottom-width: $table-border-width; border-bottom-width: $table-border-width;
} }
thead th, tbody th, tbody td { thead th, tbody th, tbody td {
vertical-align: middle; vertical-align: middle;
} }
} }
.table-sm { .table-sm {
font-size: $font-size-sm; font-size: $font-size-sm;
thead th { thead th {
font-size: $font-size-xs; font-size: $font-size-xs;
} }
} }
// //
// Dashkit ===================================== // Dashkit =====================================
// //
// No wrap // No wrap
// //
// Prevents table content from wrapping to the next line // Prevents table content from wrapping to the next line
.table-nowrap { .table-nowrap {
th, td { th, td {
white-space: nowrap; white-space: nowrap;
} }
} }
// Sort // Sort
// //
// Adds sorting icons // Adds sorting icons
.table [data-sort] { .table [data-sort] {
white-space: nowrap; white-space: nowrap;
&::after { &::after {
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$text-muted}'/></svg>"), "#", "%23"); content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$text-muted}'/></svg>"), "#", "%23");
margin-left: .25rem; margin-left: .25rem;
} }
} }
// Table checkbox // Table checkbox
.table-checkbox { .table-checkbox {
min-height: 0; min-height: 0;
} }
.table-checkbox .custom-control-label::before, .table-checkbox .custom-control-label::before,
.table-checkbox .custom-control-label::after { .table-checkbox .custom-control-label::after {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }

8
explorer/src/scss/dashkit/_toasts.scss
View File

@ -1,4 +1,4 @@
// //
// toasts.scss // toasts.scss
// Extended from Bootstrap // Extended from Bootstrap
// //

230
explorer/src/scss/dashkit/_type.scss
View File

@ -1,115 +1,115 @@
// //
// type.scss // type.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// //
// Bootstrap Overrides ===================================== // Bootstrap Overrides =====================================
// //
h1, .h1 { h1, .h1 {
margin-bottom: $headings-margin-bottom; margin-bottom: $headings-margin-bottom;
font-size: 1.5rem; font-size: 1.5rem;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
font-size: $h1-font-size; font-size: $h1-font-size;
} }
} }
h2, .h2 { h2, .h2 {
margin-bottom: $headings-margin-bottom; margin-bottom: $headings-margin-bottom;
} }
h3, .h3 { h3, .h3 {
margin-bottom: ($headings-margin-bottom * .75); margin-bottom: ($headings-margin-bottom * .75);
} }
h4, .h4 { h4, .h4 {
margin-bottom: ($headings-margin-bottom * .5); margin-bottom: ($headings-margin-bottom * .5);
} }
h5, .h5 { h5, .h5 {
margin-bottom: ($headings-margin-bottom * .5); margin-bottom: ($headings-margin-bottom * .5);
} }
h6, .h6 { h6, .h6 {
margin-bottom: ($headings-margin-bottom * .5); margin-bottom: ($headings-margin-bottom * .5);
} }
// Links // Links
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
> a { > a {
color: inherit; color: inherit;
} }
} }
// Type display classes // Type display classes
.display-1, .display-1,
.display-2, .display-2,
.display-3, .display-3,
.display-4 { .display-4 {
letter-spacing: $display-letter-spacing; letter-spacing: $display-letter-spacing;
} }
// Headings // Headings
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
letter-spacing: $headings-letter-spacing; letter-spacing: $headings-letter-spacing;
} }
h6.text-uppercase { h6.text-uppercase {
letter-spacing: .08em; letter-spacing: .08em;
} }
// Bold, strong // Bold, strong
b, strong { b, strong {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
// Links, buttons // Links, buttons
// //
// Removes focus outline // Removes focus outline
a, button { a, button {
&:focus { &:focus {
outline: none !important; outline: none !important;
} }
} }
// //
// Dashkit ===================================== // Dashkit =====================================
// //
// Include Cerebri Sans // Include Cerebri Sans
@font-face { @font-face {
font-family: 'Cerebri Sans'; font-family: 'Cerebri Sans';
src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.eot'); src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.eot');
src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.ttf') format('truetype'); src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Cerebri Sans'; font-family: 'Cerebri Sans';
src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.eot'); src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.eot');
src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.ttf') format('truetype'); src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Cerebri Sans'; font-family: 'Cerebri Sans';
src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.eot'); src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.eot');
src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.ttf') format('truetype'); src: url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.eot?#iefix') format('embedded-opentype'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.woff') format('woff'), url('#{$path-to-fonts}/cerebrisans/cerebrisans-semibold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }

10
explorer/src/scss/dashkit/_utilities.scss
View File

@ -1,5 +1,5 @@
@import 'utilities/background'; @import 'utilities/background';
@import 'utilities/borders'; @import 'utilities/borders';
@import 'utilities/lift'; @import 'utilities/lift';
@import 'utilities/sizing'; @import 'utilities/sizing';
@import 'utilities/type'; @import 'utilities/type';

1514
explorer/src/scss/dashkit/_variables.scss
View File

File diff suppressed because it is too large Load Diff

10
explorer/src/scss/dashkit/_vendors.scss
View File

@ -1,5 +1,5 @@
@import 'vendors/dropzone'; @import 'vendors/dropzone';
@import 'vendors/flatpickr'; @import 'vendors/flatpickr';
@import 'vendors/quill'; @import 'vendors/quill';
@import 'vendors/list'; @import 'vendors/list';
@import 'vendors/select2'; @import 'vendors/select2';

120
explorer/src/scss/dashkit/dark/_overrides-dark.scss
View File

@ -1,60 +1,60 @@
// //
// overrides.scss // overrides.scss
// Dark mode overrides // Dark mode overrides
// //
// //
// Table of contents // Table of contents
// //
// 1. Buttons // 1. Buttons
// 2. Forms // 2. Forms
// 3. Input groups // 3. Input groups
// 4. Quill // 4. Quill
// 5. Select2 // 5. Select2
// //
// Buttons // Buttons
.btn-white, .btn-light { .btn-white, .btn-light {
@include button-variant($gray-800-dark, $gray-600-dark); @include button-variant($gray-800-dark, $gray-600-dark);
&:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):hover,
&:not(:disabled):not(.disabled):focus, &:not(:disabled):not(.disabled):focus,
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active, &:not(:disabled):not(.disabled).active,
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled):active:focus,
&:not(:disabled):not(.disabled).active:focus, &:not(:disabled):not(.disabled).active:focus,
.show > &.dropdown-toggle { .show > &.dropdown-toggle {
background-color: $black-dark; background-color: $black-dark;
border-color: $gray-700-dark; border-color: $gray-700-dark;
color: $white; color: $white;
} }
} }
// Forms // Forms
.form-control { .form-control {
border-color: $input-bg; border-color: $input-bg;
} }
// Input groups // Input groups
.input-group .input-group-text { .input-group .input-group-text {
border-color: $input-bg; border-color: $input-bg;
} }
// Quill // Quill
.ql-toolbar { .ql-toolbar {
border-color: $input-bg; border-color: $input-bg;
} }
.ql-editor { .ql-editor {
border-left-color: $input-bg; border-left-color: $input-bg;
border-right-color: $input-bg; border-right-color: $input-bg;
border-bottom-color: $input-bg; border-bottom-color: $input-bg;
} }

438
explorer/src/scss/dashkit/dark/_variables-dark.scss
View File

@ -1,219 +1,219 @@
// //
// variables-dark.scss // variables-dark.scss
// Dashkit dark version // Dashkit dark version
// //
// //
// Bootstrap Overrides =================================== // Bootstrap Overrides ===================================
// //
// //
// Color system // Color system
// //
$white: #FFFFFF !default; $white: #FFFFFF !default;
$gray-300: #E3EBF6 !default; $gray-300: #E3EBF6 !default;
$gray-600: #95AAC9 !default; $gray-600: #95AAC9 !default;
$gray-700: #6E84A3 !default; $gray-700: #6E84A3 !default;
$gray-900: #283E59 !default; $gray-900: #283E59 !default;
$black: #12263F !default; $black: #12263F !default;
$gray-600-dark: #244166 !default; $gray-600-dark: #244166 !default;
$gray-700-dark: #1E3A5C !default; $gray-700-dark: #1E3A5C !default;
$gray-800-dark: #152E4D !default; $gray-800-dark: #152E4D !default;
$gray-900-dark: #132A46 !default; $gray-900-dark: #132A46 !default;
$black-dark: #12263F !default; $black-dark: #12263F !default;
$light: $gray-800-dark !default; $light: $gray-800-dark !default;
$lighter: $gray-900-dark !default; $lighter: $gray-900-dark !default;
// Body // Body
// //
// Settings for the `<body>` element. // Settings for the `<body>` element.
$body-bg: $black-dark !default; $body-bg: $black-dark !default;
$body-color: $white !default; $body-color: $white !default;
// Components // Components
// //
// Define common padding and border radius sizes and more. // Define common padding and border radius sizes and more.
$border-color: $gray-700-dark !default; $border-color: $gray-700-dark !default;
// Fonts // Fonts
// //
// Font, line-height, and color for body text, headings, and more. // Font, line-height, and color for body text, headings, and more.
$text-muted: $gray-700 !default; $text-muted: $gray-700 !default;
// Tables // Tables
// //
// Customizes the `.table` component with basic values, each used across all table variations. // Customizes the `.table` component with basic values, each used across all table variations.
$table-border-color: $border-color !default; $table-border-color: $border-color !default;
$table-head-bg: $black-dark !default; $table-head-bg: $black-dark !default;
$table-accent-bg: $gray-900-dark !default; $table-accent-bg: $gray-900-dark !default;
$table-hover-bg: $gray-900-dark !default; $table-hover-bg: $gray-900-dark !default;
$table-active-bg: $gray-900-dark !default; $table-active-bg: $gray-900-dark !default;
$table-bg-level: 0 !default; $table-bg-level: 0 !default;
$table-border-level: 0 !default; $table-border-level: 0 !default;
// Forms // Forms
$input-bg: $gray-700-dark !default; $input-bg: $gray-700-dark !default;
$input-color: $white !default; $input-color: $white !default;
$input-border-color: $black-dark !default; $input-border-color: $black-dark !default;
$input-placeholder-color: $gray-600 !default; $input-placeholder-color: $gray-600 !default;
$custom-control-indicator-bg: $gray-600-dark !default; $custom-control-indicator-bg: $gray-600-dark !default;
// Dropdowns // Dropdowns
// //
// Dropdown menu container and contents. // Dropdown menu container and contents.
$dropdown-bg: $gray-800-dark !default; $dropdown-bg: $gray-800-dark !default;
$dropdown-border-color: $black !default; $dropdown-border-color: $black !default;
$dropdown-divider-bg: $black !default; $dropdown-divider-bg: $black !default;
$dropdown-link-color: $text-muted !default; $dropdown-link-color: $text-muted !default;
$dropdown-link-hover-color: $white !default; $dropdown-link-hover-color: $white !default;
// Navbar // Navbar
$navbar-dark-color: $gray-700 !default; $navbar-dark-color: $gray-700 !default;
$navbar-dark-hover-color: $black !default; $navbar-dark-hover-color: $black !default;
$navbar-dark-active-color: $black !default; $navbar-dark-active-color: $black !default;
$navbar-dark-toggler-border-color: transparent !default; $navbar-dark-toggler-border-color: transparent !default;
$navbar-dark-bg: $white !default; $navbar-dark-bg: $white !default;
$navbar-dark-border-color: $white !default; $navbar-dark-border-color: $white !default;
$navbar-dark-heading-color: $text-muted !default; $navbar-dark-heading-color: $text-muted !default;
$navbar-dark-divider-color: $gray-300 !default; $navbar-dark-divider-color: $gray-300 !default;
$navbar-dark-brand-filter: none; $navbar-dark-brand-filter: none;
$navbar-dark-input-bg: $input-bg !default; $navbar-dark-input-bg: $input-bg !default;
$navbar-dark-input-border-color: $input-border-color !default; $navbar-dark-input-border-color: $input-border-color !default;
$navbar-light-hover-color: $white !default; $navbar-light-hover-color: $white !default;
$navbar-light-active-color: $white !default; $navbar-light-active-color: $white !default;
$navbar-light-input-bg: $gray-700-dark !default; $navbar-light-input-bg: $gray-700-dark !default;
$navbar-light-input-border-color: $black-dark !default; $navbar-light-input-border-color: $black-dark !default;
// Pagination // Pagination
$pagination-color: $white !default; $pagination-color: $white !default;
$pagination-bg: $gray-800-dark !default; $pagination-bg: $gray-800-dark !default;
$pagination-border-color: $gray-600-dark !default; $pagination-border-color: $gray-600-dark !default;
$pagination-hover-color: $white !default; $pagination-hover-color: $white !default;
$pagination-hover-bg: $gray-900-dark !default; $pagination-hover-bg: $gray-900-dark !default;
$pagination-hover-border-color: $gray-700-dark !default; $pagination-hover-border-color: $gray-700-dark !default;
$pagination-disabled-bg: $gray-900-dark !default; $pagination-disabled-bg: $gray-900-dark !default;
$pagination-disabled-border-color: $gray-700-dark !default; $pagination-disabled-border-color: $gray-700-dark !default;
// Jumbotron // Jumbotron
$jumbotron-bg: $gray-800-dark !default; $jumbotron-bg: $gray-800-dark !default;
// Cards // Cards
$card-bg: $gray-800-dark !default; $card-bg: $gray-800-dark !default;
$card-border-color: $border-color !default; $card-border-color: $border-color !default;
// Tooltips // Tooltips
$tooltip-bg: $gray-800-dark !default; $tooltip-bg: $gray-800-dark !default;
$tooltip-color: $white !default; $tooltip-color: $white !default;
// Popovers // Popovers
$popover-bg: $gray-800-dark !default; $popover-bg: $gray-800-dark !default;
$popover-border-color: $black !default; $popover-border-color: $black !default;
// Toasts // Toasts
$toast-background-color: $gray-800-dark !default; $toast-background-color: $gray-800-dark !default;
; ;
// Modals // Modals
$modal-content-bg: $gray-800-dark !default; $modal-content-bg: $gray-800-dark !default;
$modal-content-border-color: $black !default; $modal-content-border-color: $black !default;
// Progress bars // Progress bars
$progress-bg: $gray-600-dark !default; $progress-bg: $gray-600-dark !default;
// //
// Dashkit ===================================== // Dashkit =====================================
// //
// Auth // Auth
$auth-bg: $body-bg !default; $auth-bg: $body-bg !default;
// Avatar // Avatar
$avatar-title-bg: $gray-600-dark !default; $avatar-title-bg: $gray-600-dark !default;
// Badges // Badges
$badge-soft-bg-level: 10 !default; $badge-soft-bg-level: 10 !default;
// Cards // Cards
$card-outline-color: $gray-800-dark !default; $card-outline-color: $gray-800-dark !default;
$card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default; $card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default;
// Comment // Comment
$comment-body-bg: $gray-700-dark; $comment-body-bg: $gray-700-dark;
// Header // Header
$header-body-border-color-dark: $border-color !default; $header-body-border-color-dark: $border-color !default;
// Navbar // Navbar
$navbar-light-bg: $gray-800-dark !default; $navbar-light-bg: $gray-800-dark !default;
$navbar-light-border-color: $gray-800-dark !default; $navbar-light-border-color: $gray-800-dark !default;
// Switch // Switch
$custom-switch-indicator-bg: $gray-800-dark !default; $custom-switch-indicator-bg: $gray-800-dark !default;
$custom-switch-indicator-active-bg: $white !default; $custom-switch-indicator-active-bg: $white !default;
// Backgrounds // Backgrounds
$bg-soft-level: 10 !default; $bg-soft-level: 10 !default;

32
explorer/src/scss/dashkit/mixins/_badge.scss
View File

@ -1,16 +1,16 @@
// Badge Mixins // Badge Mixins
// //
// This is a custom mixin for badge-#{color}-soft variant of Bootstrap's .badge class // This is a custom mixin for badge-#{color}-soft variant of Bootstrap's .badge class
@mixin badge-variant-soft($bg, $color) { @mixin badge-variant-soft($bg, $color) {
color: $color; color: $color;
background-color: $bg; background-color: $bg;
&[href] { &[href] {
@include hover-focus { @include hover-focus {
color: $color; color: $color;
text-decoration: none; text-decoration: none;
background-color: darken($bg, 5%); background-color: darken($bg, 5%);
} }
} }
} }

18
explorer/src/scss/dashkit/mixins/_breakpoints.scss
View File

@ -1,9 +1,9 @@
// //
// breakpoint.scss // breakpoint.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { @function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name); $n: index($breakpoint-names, $name);
@return if($n != null and $n != 1, nth($breakpoint-names, $n - 1), null); @return if($n != null and $n != 1, nth($breakpoint-names, $n - 1), null);
} }

160
explorer/src/scss/dashkit/utilities/_background.scss
View File

@ -1,80 +1,80 @@
// //
// background.scss // background.scss
// //
// Fixed at the bottom // Fixed at the bottom
.bg-fixed-bottom { .bg-fixed-bottom {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
background-size: 100% auto; background-size: 100% auto;
background-attachment: fixed; background-attachment: fixed;
} }
// Calculate the width of the main container because // Calculate the width of the main container because
// the background-attachment property will use 100vw instead // the background-attachment property will use 100vw instead
.navbar-vertical ~ .main-content.bg-fixed-bottom { .navbar-vertical ~ .main-content.bg-fixed-bottom {
background-size: 100%; background-size: 100%;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
background-size: calc(100% - #{$navbar-vertical-width}); background-size: calc(100% - #{$navbar-vertical-width});
} }
} }
// Cover // Cover
.bg-cover { .bg-cover {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
// Auth // Auth
.bg-auth { .bg-auth {
background-color: $auth-bg; background-color: $auth-bg;
} }
// Ellipses // Ellipses
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.bg-ellipses.bg-#{$color} { .bg-ellipses.bg-#{$color} {
background-color: transparent !important; background-color: transparent !important;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: radial-gradient(#{$value}, #{$value} 70%, transparent 70.1%); background-image: radial-gradient(#{$value}, #{$value} 70%, transparent 70.1%);
background-size: 200% 150%; background-size: 200% 150%;
background-position: center bottom; background-position: center bottom;
} }
} }
// Hero // Hero
.bg-hero { .bg-hero {
background-image: linear-gradient(to bottom, fade-out($black, .15), fade-out($black, .15)), url(../#{$path-to-img}/covers/header-cover.jpg); background-image: linear-gradient(to bottom, fade-out($black, .15), fade-out($black, .15)), url(../#{$path-to-img}/covers/header-cover.jpg);
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
background-position: center center, center center; background-position: center center, center center;
background-size: cover, cover; background-size: cover, cover;
} }
// Colors // Colors
.bg-lighter { .bg-lighter {
background-color: $lighter !important; background-color: $lighter !important;
} }
// Soft colors // Soft colors
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.bg-#{$color}-soft { .bg-#{$color}-soft {
background-color: theme-color-level($color, $bg-soft-level) !important; background-color: theme-color-level($color, $bg-soft-level) !important;
} }
} }

96
explorer/src/scss/dashkit/utilities/_borders.scss
View File

@ -1,48 +1,48 @@
// //
// borders.scss // borders.scss
// //
// Sizing // Sizing
$border-sizing: () !default; $border-sizing: () !default;
$border-sizing: map-merge(( $border-sizing: map-merge((
"2": 2, "2": 2,
"3": 3, "3": 3,
"4": 4, "4": 4,
"5": 5 "5": 5
), $border-sizing); ), $border-sizing);
@each $size, $value in $border-sizing { @each $size, $value in $border-sizing {
.border-#{$size} { .border-#{$size} {
border-width: $border-width * $value !important; border-width: $border-width * $value !important;
} }
.border-top-#{$size} { .border-top-#{$size} {
border-top-width: $border-width * $value !important; border-top-width: $border-width * $value !important;
} }
.border-right-#{$size} { .border-right-#{$size} {
border-right-width: $border-width * $value !important; border-right-width: $border-width * $value !important;
} }
.border-bottom-#{$size} { .border-bottom-#{$size} {
border-bottom-width: $border-width * $value !important; border-bottom-width: $border-width * $value !important;
} }
.border-left-#{$size} { .border-left-#{$size} {
border-left-width: $border-width * $value !important; border-left-width: $border-width * $value !important;
} }
} }
// Contextual classes // Contextual classes
.border-body { .border-body {
border-color: $body-bg !important; border-color: $body-bg !important;
} }
.border-card { .border-card {
border-color: $card-bg !important; border-color: $card-bg !important;
} }

40
explorer/src/scss/dashkit/utilities/_lift.scss
View File

@ -1,20 +1,20 @@
// //
// lift.scss // lift.scss
// Theme utility // Theme utility
// //
.lift { .lift {
transition: box-shadow .25s ease, transform .25s ease; transition: box-shadow .25s ease, transform .25s ease;
} }
.lift:hover, .lift:hover,
.lift:focus { .lift:focus {
box-shadow: $box-shadow-lift !important; box-shadow: $box-shadow-lift !important;
transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
} }
.lift-lg:hover, .lift-lg:hover,
.lift-lg:focus { .lift-lg:focus {
box-shadow: $box-shadow-lift-lg !important; box-shadow: $box-shadow-lift-lg !important;
transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0);
} }

20
explorer/src/scss/dashkit/utilities/_sizing.scss
View File

@ -1,10 +1,10 @@
// //
// sizing.scss // sizing.scss
// //
.vw-100 { .vw-100 {
width: 100vw !important; width: 100vw !important;
} }
.vh-100 { .vh-100 {
height: 100vh !important; height: 100vh !important;
} }

68
explorer/src/scss/dashkit/utilities/_type.scss
View File

@ -1,34 +1,34 @@
// //
// type.scss // type.scss
// Extended from Bootstrap // Extended from Bootstrap
// //
// Font size // Font size
.font-size-base { .font-size-base {
font-size: $font-size-base !important; font-size: $font-size-base !important;
} }
.font-size-sm { .font-size-sm {
font-size: $font-size-sm !important; font-size: $font-size-sm !important;
} }
.font-size-lg { .font-size-lg {
font-size: $font-size-lg !important; font-size: $font-size-lg !important;
} }
// Decoration // Decoration
.text-decoration-underline { .text-decoration-underline {
text-decoration: underline !important; text-decoration: underline !important;
} }
// Gray colors // Gray colors
@each $color, $value in $grays { @each $color, $value in $grays {
.text-gray-#{$color} { .text-gray-#{$color} {
color: $value !important; color: $value !important;
} }
} }

150
explorer/src/scss/dashkit/vendors/_dropzone.scss vendored
View File

@ -1,75 +1,75 @@
// //
// dropzone.scss // dropzone.scss
// Dropzone plugin overrides // Dropzone plugin overrides
// //
.dropzone { .dropzone {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.dz-message { .dz-message {
padding: 5rem 1rem; padding: 5rem 1rem;
background-color: $input-bg; background-color: $input-bg;
border: $input-border-width dashed $input-border-color; border: $input-border-width dashed $input-border-color;
border-radius: $border-radius; border-radius: $border-radius;
text-align: center; text-align: center;
color: $text-muted; color: $text-muted;
transition: $transition-base; transition: $transition-base;
order: -1; order: -1;
cursor: pointer; cursor: pointer;
z-index: 999; z-index: 999;
&:hover { &:hover {
border-color: $text-muted; border-color: $text-muted;
color: $body-color; color: $body-color;
} }
} }
.dz-drag-hover .dz-message { .dz-drag-hover .dz-message {
border-color: $primary; border-color: $primary;
color: $primary; color: $primary;
} }
.dropzone-multiple .dz-message { .dropzone-multiple .dz-message {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.dropzone-single.dz-max-files-reached .dz-message { .dropzone-single.dz-max-files-reached .dz-message {
background-color: fade-out($black, .1); background-color: fade-out($black, .1);
color: white; color: white;
opacity: 0; opacity: 0;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
} }
.dz-preview-single { .dz-preview-single {
position: absolute; position: absolute;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
border-radius: $border-radius; border-radius: $border-radius;
} }
.dz-preview-cover { .dz-preview-cover {
position: absolute; position: absolute;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
border-radius: $border-radius; border-radius: $border-radius;
} }
.dz-preview-img { .dz-preview-img {
object-fit: cover; object-fit: cover;
width: 100%; height: 100%; width: 100%; height: 100%;
border-radius: $border-radius; border-radius: $border-radius;
} }
.dz-preview-multiple .list-group-item:last-child { .dz-preview-multiple .list-group-item:last-child {
padding-bottom: 0; padding-bottom: 0;
border-bottom: 0; border-bottom: 0;
} }
[data-dz-size] strong { [data-dz-size] strong {
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
} }

138
explorer/src/scss/dashkit/vendors/_flatpickr.scss vendored
View File

@ -1,69 +1,69 @@
// //
// flatpickr.scss // flatpickr.scss
// Flatpickr plugin overrides // Flatpickr plugin overrides
// //
.flatpickr-calendar { .flatpickr-calendar {
background-color: $input-bg; background-color: $input-bg;
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
color: $input-color; color: $input-color;
box-shadow: none; box-shadow: none;
* { * {
color: inherit !important; color: inherit !important;
fill: currentColor !important; fill: currentColor !important;
} }
&.arrowTop:before { &.arrowTop:before {
border-bottom-color: $input-border-color; border-bottom-color: $input-border-color;
} }
&.arrowTop:after { &.arrowTop:after {
border-bottom-color: $input-bg; border-bottom-color: $input-bg;
} }
.flatpickr-months { .flatpickr-months {
padding-top: .625rem; padding-top: .625rem;
padding-bottom: .625rem; padding-bottom: .625rem;
} }
.flatpickr-prev-month, .flatpickr-prev-month,
.flatpickr-next-month { .flatpickr-next-month {
top: .625rem; top: .625rem;
} }
.flatpickr-current-month { .flatpickr-current-month {
font-size: 115%; font-size: 115%;
} }
.flatpickr-day { .flatpickr-day {
border-radius: $border-radius; border-radius: $border-radius;
&:hover { &:hover {
background-color: $light; background-color: $light;
border-color: $input-border-color; border-color: $input-border-color;
} }
} }
.flatpickr-day.prevMonthDay { .flatpickr-day.prevMonthDay {
color: $text-muted !important; color: $text-muted !important;
} }
.flatpickr-day.today { .flatpickr-day.today {
border-color: $border-color; border-color: $border-color;
} }
.flatpickr-day.selected { .flatpickr-day.selected {
background-color: $primary; background-color: $primary;
border-color: $primary; border-color: $primary;
color: $white !important; color: $white !important;
} }
.flatpickr-day.inRange { .flatpickr-day.inRange {
background-color: $light; background-color: $light;
border: none; border: none;
border-radius: 0; border-radius: 0;
box-shadow: -5px 0 0 $light, 5px 0 0 $light; box-shadow: -5px 0 0 $light, 5px 0 0 $light;
} }
} }

22
explorer/src/scss/dashkit/vendors/_list.scss vendored
View File

@ -1,11 +1,11 @@
// //
// list.scss // list.scss
// //
[data-toggle="lists"] .pagination > li { [data-toggle="lists"] .pagination > li {
@extend .page-item; @extend .page-item;
} }
[data-toggle="lists"] .pagination .page { [data-toggle="lists"] .pagination .page {
@extend .page-link; @extend .page-link;
} }

566
explorer/src/scss/dashkit/vendors/_quill.scss vendored
View File

@ -1,283 +1,283 @@
// //
// quill.scss // quill.scss
// Quill plugin overrides // Quill plugin overrides
// //
.ql-container { .ql-container {
font-family: $font-family-base; font-family: $font-family-base;
} }
.ql-toolbar { .ql-toolbar {
position: relative; position: relative;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
background-color: $input-bg; background-color: $input-bg;
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
border-radius: $input-border-radius $input-border-radius 0 0; border-radius: $input-border-radius $input-border-radius 0 0;
color: $input-color; color: $input-color;
} }
.ql-toolbar + .ql-container { .ql-toolbar + .ql-container {
margin-top: -$border-width; margin-top: -$border-width;
} }
.ql-toolbar + .ql-container .ql-editor { .ql-toolbar + .ql-container .ql-editor {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.ql-editor { .ql-editor {
min-height: $line-height-base * $font-size-base * 4; min-height: $line-height-base * $font-size-base * 4;
display: block; display: block;
width: 100%; width: 100%;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
background-clip: padding-box; background-clip: padding-box;
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@if $enable-rounded { @if $enable-rounded {
// Manually use the if/else instead of the mixin to account for iOS override // Manually use the if/else instead of the mixin to account for iOS override
border-radius: $input-border-radius; border-radius: $input-border-radius;
} }
@else { @else {
// Otherwise undo the iOS default // Otherwise undo the iOS default
border-radius: 0; border-radius: 0;
} }
@include box-shadow($input-box-shadow); @include box-shadow($input-box-shadow);
@include transition($input-transition); @include transition($input-transition);
// Unstyle the caret on `<select>`s in IE10+. // Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand { &::-ms-expand {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus($ignore-warning: true); @include form-control-focus($ignore-warning: true);
} }
.ql-hidden { .ql-hidden {
position: absolute; position: absolute;
transform: scale(0); transform: scale(0);
} }
// Placeholder // Placeholder
.ql-editor.ql-blank::before { .ql-editor.ql-blank::before {
top: $input-padding-y; top: $input-padding-y;
left: $input-padding-x; left: $input-padding-x;
font-style: normal; font-style: normal;
color: $input-placeholder-color; color: $input-placeholder-color;
} }
.ql-editor:focus::before { .ql-editor:focus::before {
display: none; display: none;
} }
// Toolbar // Toolbar
.ql-formats { .ql-formats {
padding-left: .5rem; padding-left: .5rem;
padding-right: .5rem; padding-right: .5rem;
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
} }
} }
.ql-toolbar button { .ql-toolbar button {
padding: 0 .25rem; padding: 0 .25rem;
background: none; background: none;
border: none; border: none;
color: $body-color; color: $body-color;
cursor: pointer; cursor: pointer;
transition: $transition-base; transition: $transition-base;
&:hover { &:hover {
color: $primary; color: $primary;
} }
&:first-child { &:first-child {
margin-left: -.25rem; margin-left: -.25rem;
} }
} }
.ql-toolbar .ql-active { .ql-toolbar .ql-active {
color: $primary; color: $primary;
} }
.ql-toolbar button svg { .ql-toolbar button svg {
height: $font-size-lg; height: $font-size-lg;
width: $font-size-lg; width: $font-size-lg;
} }
.ql-toolbar .ql-stroke { .ql-toolbar .ql-stroke {
stroke: currentColor; stroke: currentColor;
stroke-width: 2; stroke-width: 2;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
fill: none; fill: none;
} }
.ql-toolbar .ql-thin { .ql-toolbar .ql-thin {
stroke-width: 1; stroke-width: 1;
} }
.ql-toolbar .ql-fill { .ql-toolbar .ql-fill {
fill: currentColor; fill: currentColor;
} }
.ql-toolbar input.ql-image { .ql-toolbar input.ql-image {
position: absolute; position: absolute;
transform: scale(0); transform: scale(0);
} }
// Tooltip // Tooltip
.ql-tooltip { .ql-tooltip {
position: absolute; position: absolute;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 18.5rem; width: 18.5rem;
background-color: $popover-bg; background-color: $popover-bg;
border: $popover-border-width solid $popover-border-color; border: $popover-border-width solid $popover-border-color;
border-radius: $popover-border-radius; border-radius: $popover-border-radius;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-top: .6rem; // arrow width margin-top: .6rem; // arrow width
box-shadow: $popover-box-shadow; box-shadow: $popover-box-shadow;
// Arrow // Arrow
&:before, &:after { &:before, &:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 100%; bottom: 100%;
transform: translateX(-50%); transform: translateX(-50%);
} }
&:before { &:before {
border-bottom: .6rem solid $popover-border-color; border-bottom: .6rem solid $popover-border-color;
border-left: .6rem solid transparent; border-left: .6rem solid transparent;
border-right: .6rem solid transparent; border-right: .6rem solid transparent;
} }
&:after { &:after {
border-bottom: .5rem solid $popover-bg; border-bottom: .5rem solid $popover-bg;
border-left: .5rem solid transparent; border-left: .5rem solid transparent;
border-right: .5rem solid transparent; border-right: .5rem solid transparent;
} }
} }
.ql-container .ql-tooltip:hover { .ql-container .ql-tooltip:hover {
display: flex !important; display: flex !important;
} }
.ql-tooltip .ql-preview { .ql-tooltip .ql-preview {
width: 100%; width: 100%;
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
@include transition($btn-transition); @include transition($btn-transition);
} }
.ql-tooltip.ql-editing .ql-preview { .ql-tooltip.ql-editing .ql-preview {
display: none; display: none;
} }
.ql-tooltip input { .ql-tooltip input {
display: none; display: none;
width: 100%; width: 100%;
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
background-color: transparent; background-color: transparent;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $input-line-height-sm; line-height: $input-line-height-sm;
border: none; border: none;
color: $input-color; color: $input-color;
&:focus { &:focus {
outline: none; outline: none;
} }
} }
.ql-tooltip.ql-editing input { .ql-tooltip.ql-editing input {
display: block; display: block;
} }
.ql-tooltip .ql-action, .ql-tooltip .ql-action,
.ql-tooltip .ql-remove { .ql-tooltip .ql-remove {
margin-left: .25rem; margin-left: .25rem;
} }
.ql-tooltip .ql-action::before, .ql-tooltip .ql-action::before,
.ql-tooltip .ql-remove::before { .ql-tooltip .ql-remove::before {
display: inline-block; display: inline-block;
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
border: $btn-border-width solid transparent; border: $btn-border-width solid transparent;
cursor: pointer; cursor: pointer;
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
@include transition($btn-transition); @include transition($btn-transition);
// Share hover and focus styles // Share hover and focus styles
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
} }
&:focus, &:focus,
&.focus { &.focus {
outline: 0; outline: 0;
box-shadow: $btn-focus-box-shadow; box-shadow: $btn-focus-box-shadow;
} }
} }
.ql-tooltip .ql-action::before, .ql-tooltip .ql-action::before,
.ql-tooltip.ql-editing .ql-action::before { .ql-tooltip.ql-editing .ql-action::before {
@include button-variant($primary, $primary); @include button-variant($primary, $primary);
} }
.ql-tooltip .ql-action::before { .ql-tooltip .ql-action::before {
content: 'Edit'; content: 'Edit';
} }
.ql-tooltip.ql-editing .ql-action::before { .ql-tooltip.ql-editing .ql-action::before {
content: 'Save'; content: 'Save';
} }
.ql-tooltip .ql-remove::before { .ql-tooltip .ql-remove::before {
@include button-variant($white, $white); @include button-variant($white, $white);
content: 'Remove'; content: 'Remove';
border-color: $gray-300; border-color: $gray-300;
} }
.ql-tooltip.ql-editing .ql-remove::before { .ql-tooltip.ql-editing .ql-remove::before {
display: none; display: none;
} }
// Formatting // Formatting
.ql-editor blockquote { .ql-editor blockquote {
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: $blockquote-font-size; font-size: $blockquote-font-size;
} }
.ql-editor img { .ql-editor img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }

256
explorer/src/scss/dashkit/vendors/_select2.scss vendored
View File

@ -1,128 +1,128 @@
// //
// select2.scss // select2.scss
// Select2 plugin overrides // Select2 plugin overrides
// //
[class*="select2"] { [class*="select2"] {
display: block; display: block;
} }
.select2 { .select2 {
width: 100% !important; width: 100% !important;
} }
.select2-hidden-accessible { .select2-hidden-accessible {
display: none; display: none;
} }
.select2-selection[aria-expanded="true"] { .select2-selection[aria-expanded="true"] {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.select2-container { .select2-container {
display: block; display: block;
} }
.select2-dropdown { .select2-dropdown {
margin-top: -$input-border-width; margin-top: -$input-border-width;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.select2-search--dropdown { .select2-search--dropdown {
padding: $dropdown-item-padding-y $input-padding-x; padding: $dropdown-item-padding-y $input-padding-x;
} }
.select2-search--dropdown .select2-search__field { .select2-search--dropdown .select2-search__field {
width: 100%; width: 100%;
height: $input-height-sm; height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm; padding: $input-padding-y-sm $input-padding-x-sm;
background-color: $input-bg; background-color: $input-bg;
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
border-radius: $input-border-radius-sm; border-radius: $input-border-radius-sm;
line-height: $input-line-height-sm; line-height: $input-line-height-sm;
font-size: $input-font-size-sm; font-size: $input-font-size-sm;
color: $input-color; color: $input-color;
transition: $input-transition; transition: $input-transition;
&:focus { &:focus {
border-color: $input-focus-border-color; border-color: $input-focus-border-color;
box-shadow: $input-focus-box-shadow; box-shadow: $input-focus-box-shadow;
outline: none; outline: none;
} }
} }
.select2-results__options { .select2-results__options {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.select2-results__option { .select2-results__option {
padding: $dropdown-item-padding-y $input-padding-x; padding: $dropdown-item-padding-y $input-padding-x;
color: $dropdown-link-color; color: $dropdown-link-color;
&:not(.select2-results__message) { &:not(.select2-results__message) {
cursor: pointer; cursor: pointer;
@include hover-focus { @include hover-focus {
color: $dropdown-link-hover-color; color: $dropdown-link-hover-color;
} }
} }
} }
.select2-results__option[aria-selected="true"], .select2-results__option[aria-selected="true"],
.select2-results__option--highlighted { .select2-results__option--highlighted {
color: $dropdown-link-active-color; color: $dropdown-link-active-color;
} }
.select2-selection--multiple { .select2-selection--multiple {
height: auto; height: auto;
} }
.select2-selection__rendered { .select2-selection__rendered {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-left: 0;
margin: 0 -.25rem -.25rem 0; margin: 0 -.25rem -.25rem 0;
} }
.select2-selection__choice { .select2-selection__choice {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding-left: .375rem; padding-left: .375rem;
padding-right: .375rem; padding-right: .375rem;
margin: 0 .25rem .25rem 0; margin: 0 .25rem .25rem 0;
font-size: $font-size-sm; font-size: $font-size-sm;
background-color: $light; background-color: $light;
border-radius: $border-radius-xs; border-radius: $border-radius-xs;
} }
.select2-selection__choice__remove { .select2-selection__choice__remove {
order: 2; order: 2;
margin-left: .5rem; margin-left: .5rem;
color: $text-muted; color: $text-muted;
cursor: pointer; cursor: pointer;
@include hover { @include hover {
color: $body-color; color: $body-color;
} }
} }
.select2-search--inline .select2-search__field { .select2-search--inline .select2-search__field {
height: calc(1em * #{$input-line-height}); height: calc(1em * #{$input-line-height});
padding-bottom: .25rem; padding-bottom: .25rem;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
color: $input-color; color: $input-color;
&::placeholder { &::placeholder {
color: $input-placeholder-color; color: $input-placeholder-color;
} }
} }
.select2-selection__placeholder { .select2-selection__placeholder {
color: $input-placeholder-color; color: $input-placeholder-color;
} }

60
explorer/src/scss/theme-dark.scss
View File

@ -1,30 +1,30 @@
/** /**
* Dashkit * Dashkit
* *
* Custom variables followed by Dashkit variables followed by Bootstrap variables * Custom variables followed by Dashkit variables followed by Bootstrap variables
* to ensure cascade of styles. * to ensure cascade of styles.
*/ */
// Bootstrap functions // Bootstrap functions
@import '~bootstrap/scss/functions.scss'; @import '~bootstrap/scss/functions.scss';
// Custom variables // Custom variables
@import 'solana-variables'; @import 'solana-variables';
// Dark mode variables // Dark mode variables
@import 'dashkit/dark/variables-dark'; @import 'dashkit/dark/variables-dark';
// Dashkit variables // Dashkit variables
@import 'dashkit/variables'; @import 'dashkit/variables';
// Bootstrap core // Bootstrap core
@import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap/scss/bootstrap.scss';
// Dashkit core // Dashkit core
@import 'dashkit/dashkit'; @import 'dashkit/dashkit';
// Dark mode overrides // Dark mode overrides
@import 'dashkit/dark/overrides-dark'; @import 'dashkit/dark/overrides-dark';
// Custom core // Custom core
@import 'solana'; @import 'solana';

54
explorer/src/scss/theme.scss
View File

@ -1,27 +1,27 @@
/** /**
* Dashkit * Dashkit
* *
* Custom variables followed by Dashkit variables followed by Bootstrap variables * Custom variables followed by Dashkit variables followed by Bootstrap variables
* to ensure cascade of styles. * to ensure cascade of styles.
*/ */
// Icon font // Icon font
@import "../fonts/feather/feather"; @import "../fonts/feather/feather";
// Bootstrap functions // Bootstrap functions
@import '~bootstrap/scss/functions.scss'; @import '~bootstrap/scss/functions.scss';
// Custom variables // Custom variables
@import 'solana-variables'; @import 'solana-variables';
// Dashkit variables // Dashkit variables
@import 'dashkit/variables'; @import 'dashkit/variables';
// Bootstrap core // Bootstrap core
@import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap/scss/bootstrap.scss';
// Dashkit core // Dashkit core
@import 'dashkit/dashkit'; @import 'dashkit/dashkit';
// Custom core // Custom core
@import 'solana'; @import 'solana';

2
explorer/src/utils/date.ts
View File

@ -1,5 +1,5 @@
export function displayTimestamp(unixTimestamp: number): string { export function displayTimestamp(unixTimestamp: number): string {
const expireDate = new Date(unixTimestamp * 1000); const expireDate = new Date(unixTimestamp);
const dateString = new Intl.DateTimeFormat("en-US", { const dateString = new Intl.DateTimeFormat("en-US", {
year: "numeric", year: "numeric",
month: "long", month: "long",