diff --git a/explorer/src/App.tsx b/explorer/src/App.tsx index aa55ec2707..608ff303a2 100644 --- a/explorer/src/App.tsx +++ b/explorer/src/App.tsx @@ -13,6 +13,7 @@ import TabbedPage from "components/TabbedPage"; import TopAccountsCard from "components/TopAccountsCard"; import SupplyCard from "components/SupplyCard"; import { pickCluster } from "utils/url"; +import Banner from "components/Banner"; function App() { return ( @@ -36,6 +37,8 @@ function App() { + + diff --git a/explorer/src/components/Banner.tsx b/explorer/src/components/Banner.tsx new file mode 100644 index 0000000000..1862be1f69 --- /dev/null +++ b/explorer/src/components/Banner.tsx @@ -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(); +// 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 ( +
+
+
+

+ + {message} +

+
+ {estimate && ( +
+ Estimated Duration: + {estimate} +
+ )} + {start && ( +
+ Started at: + {displayTimestamp(start.getTime())} +
+ )} + {end && ( +
+ End: + {displayTimestamp(end.getTime())} +
+ )} +
+
+
+ ); +} diff --git a/explorer/src/components/ClusterStatusButton.tsx b/explorer/src/components/ClusterStatusButton.tsx index 9ed65bb587..80e4a88bd6 100644 --- a/explorer/src/components/ClusterStatusButton.tsx +++ b/explorer/src/components/ClusterStatusButton.tsx @@ -27,10 +27,7 @@ function Button({ expand }: { expand?: boolean }) { } }; - let spinnerClasses = "spinner-grow spinner-grow-sm mr-2"; - if (!expand) { - spinnerClasses += " text-warning"; - } + const spinnerClasses = "spinner-grow spinner-grow-sm mr-2"; switch (status) { case ClusterStatus.Connected: diff --git a/explorer/src/components/TransactionDetails.tsx b/explorer/src/components/TransactionDetails.tsx index a559c1f566..d74e033e74 100644 --- a/explorer/src/components/TransactionDetails.tsx +++ b/explorer/src/components/TransactionDetails.tsx @@ -168,7 +168,7 @@ function StatusCard({ signature }: Props) { Timestamp {info.timestamp !== "unavailable" ? ( - displayTimestamp(info.timestamp) + displayTimestamp(info.timestamp * 1000) ) : ( 0) { - const prettyTimestamp = displayTimestamp(unixTimestamp); + const prettyTimestamp = displayTimestamp(unixTimestamp * 1000); return (
Account is locked! Lockup expires on {prettyTimestamp} diff --git a/explorer/src/scss/_solana-variables.scss b/explorer/src/scss/_solana-variables.scss index 31876e0e5b..bd7a29a892 100644 --- a/explorer/src/scss/_solana-variables.scss +++ b/explorer/src/scss/_solana-variables.scss @@ -1,101 +1,101 @@ -// -// solana-variables.scss -// Use this to overwrite Bootstrap and Dashkit variables -// - -// Example of a variable override to change Dashkit's background color -// Remove the "//" to comment it in and see it in action! -$body-bg: #f9fdfc; - -// Dashkit scss needs to know where img masks are stored -$path-to-img: "../../img/dashkit" !default; -$path-to-fonts: "../../fonts" !default; - -// Colors - -$white: #ffffff; -$gray-100: #f9fdfc; -$gray-200: #f1f8f6; -$gray-300: #d9efe7; -$gray-400: #c6e6de; -$gray-500: #abd5c6; -$gray-600: #86b8b6; -$gray-700: #409088; -$gray-800: #387462; -$gray-900: #1b4e3f; -$black: #232323; - -$rainbow-1: #fa62fc; -$rainbow-2: #be84e8; -$rainbow-3: #79abd2; -$rainbow-4: #38d0bd; -$rainbow-5: #1dd79b; - -$primary: #65D39F; -$primary-desat: #42ba96; -$secondary: $gray-700; -$success: #42ba96; -$info: #b45be1; -$info-muted: #9272a3; -$warning: #d83aeb; -$danger: #43b5c5; -$light: $gray-100; -$dark: $gray-900; - -$text-info-muted: $info-muted; -$navbar-light-active-color: $primary; -$theme-colors: ( - "primary-desat": $primary-desat, - "black": $black, - "white": $white -); - -// Global - -$font-family-base: "Rubik"; -.display-2 { - font-family: Saira, Helvetica, sans-serif; -} - -.text-rainbow { - background: linear-gradient(0.3turn, #e400ff, #00ffbd); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.bg-rainbow { - background: linear-gradient(0.3turn, #e400ff, #00ffbd); -} - -.bg-rainbow-1 { - background: #fa62fc; -} -.bg-rainbow-2 { - background: #be84e8; -} -.bg-rainbow-3 { - background: #79abd2; -} -.bg-rainbow-4 { - background: #38d0bd; -} -.bg-rainbow-5 { - background: #1dd79b; -} - -.text-rainbow-1 { - color: #fa62fc; -} -.text-rainbow-2 { - color: #be84e8; -} -.text-rainbow-3 { - color: #79abd2; -} -.text-rainbow-4 { - color: #38d0bd; -} -.text-rainbow-5 { - color: #1dd79b; -} +// +// solana-variables.scss +// Use this to overwrite Bootstrap and Dashkit variables +// + +// Example of a variable override to change Dashkit's background color +// Remove the "//" to comment it in and see it in action! +$body-bg: #f9fdfc; + +// Dashkit scss needs to know where img masks are stored +$path-to-img: "../../img/dashkit" !default; +$path-to-fonts: "../../fonts" !default; + +// Colors + +$white: #ffffff; +$gray-100: #f9fdfc; +$gray-200: #f1f8f6; +$gray-300: #d9efe7; +$gray-400: #c6e6de; +$gray-500: #abd5c6; +$gray-600: #86b8b6; +$gray-700: #409088; +$gray-800: #387462; +$gray-900: #1b4e3f; +$black: #232323; + +$rainbow-1: #fa62fc; +$rainbow-2: #be84e8; +$rainbow-3: #79abd2; +$rainbow-4: #38d0bd; +$rainbow-5: #1dd79b; + +$primary: #65D39F; +$primary-desat: #42ba96; +$secondary: $gray-700; +$success: #42ba96; +$info: #b45be1; +$info-muted: #9272a3; +$warning: #d83aeb; +$danger: #43b5c5; +$light: $gray-100; +$dark: $gray-900; + +$text-info-muted: $info-muted; +$navbar-light-active-color: $primary; +$theme-colors: ( + "primary-desat": $primary-desat, + "black": $black, + "white": $white +); + +// Global + +$font-family-base: "Rubik"; +.display-2 { + font-family: Saira, Helvetica, sans-serif; +} + +.text-rainbow { + background: linear-gradient(0.3turn, #e400ff, #00ffbd); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.bg-rainbow { + background: linear-gradient(0.3turn, #e400ff, #00ffbd); +} + +.bg-rainbow-1 { + background: #fa62fc; +} +.bg-rainbow-2 { + background: #be84e8; +} +.bg-rainbow-3 { + background: #79abd2; +} +.bg-rainbow-4 { + background: #38d0bd; +} +.bg-rainbow-5 { + background: #1dd79b; +} + +.text-rainbow-1 { + color: #fa62fc; +} +.text-rainbow-2 { + color: #be84e8; +} +.text-rainbow-3 { + color: #79abd2; +} +.text-rainbow-4 { + color: #38d0bd; +} +.text-rainbow-5 { + color: #1dd79b; +} diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss index 4ca6b0bf53..be52765f7d 100644 --- a/explorer/src/scss/_solana.scss +++ b/explorer/src/scss/_solana.scss @@ -1,154 +1,148 @@ -// -// solana.scss -// Use this to write your custom SCSS -// - -code { - padding: 0.33rem; - border-radius: $border-radius; - background-color: $gray-200; - color: $black; -} - -.popover-container { - position: relative; - - .popover { - &.bs-popover-top { - background-color: $dark; - top: auto; - bottom: 1.5rem; - } - - &.right { - left: auto; - right: 0; - } - - &.bs-popover-bottom { - background-color: $dark; - top: 1.5rem; - } - - .popover-body { - color: white; - } - - .arrow.right { - right: 1rem; - } - - .arrow::after { - border-top-color: $dark; - border-bottom-color: $dark; - } - } -} - -.modal-backdrop { - pointer-events: none; -} - -.modal.show { - display: block; -} - -.c-pointer { - cursor: pointer; -} - -.b-white { - background: $white; -} - -.dropdown-exit { - position: absolute; - z-index: 100; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.btn-outline-warning:hover { - .spinner-grow { - color: $dark !important; - } -} - -.btn.input-group { - input { - cursor: pointer; - - &:focus { - cursor: text; - } - } -} - -.text-signature, -.text-address { - font-size: 85%; -} - -input.text-signature, -input.text-address { - padding: 0 0.75rem; -} - -h4.ix-pill { - display: inline-block; - padding: 5px; - border-radius: $border-radius; - margin-bottom: 2rem; - margin-left: -5px; - background-color: theme-color-level(info, $badge-soft-bg-level); -} - -h4.slot-pill { - display: inline-block; - padding: 5px; - border-radius: $border-radius; - margin-left: -5px; - background-color: theme-color-level(primary, $badge-soft-bg-level); - margin-bottom: 1.5rem; -} - -.list-group-item:last-child { - &.ix-item, - &.slot-item { - border-bottom-width: 0px; - } -} - -.list-group:last-child .list-group-item:last-child { - &.ix-item, - &.slot-item { - border-bottom-width: 1px; - } -} - -.list-group-item:first-child { - &.ix-item, - &.slot-item { - border-top-width: 1px; - } -} - -.min-width-0 { - min-width: 0; -} - -.mb-last-0 { - &:last-child { - margin-bottom: 0 !important; - } -} - -.vertical-top { - vertical-align: top !important; -} - -.w-1 { - width: 1%; -} +// +// solana.scss +// Use this to write your custom SCSS +// + +code { + padding: 0.33rem; + border-radius: $border-radius; + background-color: $gray-200; + color: $black; +} + +.popover-container { + position: relative; + + .popover { + &.bs-popover-top { + background-color: $dark; + top: auto; + bottom: 1.5rem; + } + + &.right { + left: auto; + right: 0; + } + + &.bs-popover-bottom { + background-color: $dark; + top: 1.5rem; + } + + .popover-body { + color: white; + } + + .arrow.right { + right: 1rem; + } + + .arrow::after { + border-top-color: $dark; + border-bottom-color: $dark; + } + } +} + +.modal-backdrop { + pointer-events: none; +} + +.modal.show { + display: block; +} + +.c-pointer { + cursor: pointer; +} + +.dropdown-exit { + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.opacity-50 { + opacity: 0.5; +} + +.btn.input-group { + input { + cursor: pointer; + + &:focus { + cursor: text; + } + } +} + +.text-signature, +.text-address { + font-size: 85%; +} + +input.text-signature, +input.text-address { + padding: 0 0.75rem; +} + +h4.ix-pill { + display: inline-block; + padding: 5px; + border-radius: $border-radius; + margin-bottom: 2rem; + margin-left: -5px; + background-color: theme-color-level(info, $badge-soft-bg-level); +} + +h4.slot-pill { + display: inline-block; + padding: 5px; + border-radius: $border-radius; + margin-left: -5px; + background-color: theme-color-level(primary, $badge-soft-bg-level); + margin-bottom: 1.5rem; +} + +.list-group-item:last-child { + &.ix-item, + &.slot-item { + border-bottom-width: 0px; + } +} + +.list-group:last-child .list-group-item:last-child { + &.ix-item, + &.slot-item { + border-bottom-width: 1px; + } +} + +.list-group-item:first-child { + &.ix-item, + &.slot-item { + border-top-width: 1px; + } +} + +.min-width-0 { + min-width: 0; +} + +.mb-last-0 { + &:last-child { + margin-bottom: 0 !important; + } +} + +.vertical-top { + vertical-align: top !important; +} + +.w-1 { + width: 1%; +} diff --git a/explorer/src/scss/dashkit/_alert.scss b/explorer/src/scss/dashkit/_alert.scss index 9e5f72fb0d..b11f7278dd 100644 --- a/explorer/src/scss/dashkit/_alert.scss +++ b/explorer/src/scss/dashkit/_alert.scss @@ -1,28 +1,28 @@ -// -// alerts -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -// Allow for a text-decoration since links are the same color as the alert text. - -.alert-link { - text-decoration: $alert-link-text-decoration; -} - -// Color variants -// -// 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 { - .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))); - .close, - .alert-link { - color: color-yiq(theme-color-level($color, $alert-bg-level)); - } - } -} +// +// alerts +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Allow for a text-decoration since links are the same color as the alert text. + +.alert-link { + text-decoration: $alert-link-text-decoration; +} + +// Color variants +// +// 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 { + .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))); + .close, + .alert-link { + color: color-yiq(theme-color-level($color, $alert-bg-level)); + } + } +} diff --git a/explorer/src/scss/dashkit/_avatar.scss b/explorer/src/scss/dashkit/_avatar.scss index 4c806f385b..34393d862a 100644 --- a/explorer/src/scss/dashkit/_avatar.scss +++ b/explorer/src/scss/dashkit/_avatar.scss @@ -1,197 +1,197 @@ -// -// avatar.scss -// Dashkit component -// - -// General - -.avatar { - position: relative; - display: inline-block; - width: $avatar-size-base; - height: $avatar-size-base; - font-size: $avatar-size-base / 3; - - // Loads mask images so they don't lag on hover - - &:after { - content: ''; - position: absolute; - width: 0; - height: 0; - 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-hover.svg), - url(#{$path-to-img}/masks/avatar-group-hover-last.svg); - } -} - -.avatar-img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.avatar-title { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - line-height: 0; - background-color: $avatar-title-bg; - color: $avatar-title-color; -} - - -// Status - -.avatar-online, -.avatar-offline { - - &::before { - content: ''; - position: absolute; - bottom: 5%; - right: 5%; - width: 20%; - height: 20%; - border-radius: 50%; - } - - .avatar-img { - mask-image: url(#{$path-to-img}/masks/avatar-status.svg); - mask-size: 100% 100%; - } -} - -.avatar-online::before { - background-color: $success; -} - -.avatar-offline::before { - background-color: $gray-500; -} - - -// Sizing - -.avatar-xs { - width: $avatar-size-xs; - height: $avatar-size-xs; - font-size: $avatar-size-xs / 3; -} - -.avatar-sm { - width: $avatar-size-sm; - height: $avatar-size-sm; - font-size: $avatar-size-sm / 3; -} - -.avatar-lg { - width: $avatar-size-lg; - height: $avatar-size-lg; - font-size: $avatar-size-lg / 3; -} - -.avatar-xl { - width: $avatar-size-xl; - height: $avatar-size-xl; - font-size: $avatar-size-xl / 3; -} - -.avatar-xxl { - width: $avatar-size-xl; - height: $avatar-size-xl; - font-size: $avatar-size-xl / 3; - - @include media-breakpoint-up(md) { - width: $avatar-size-xxl; - height: $avatar-size-xxl; - font-size: $avatar-size-xxl / 3; - } -} - - -// Ratio - -.avatar.avatar-4by3 { - width: $avatar-size-base * 4 / 3; -} - -.avatar-xs.avatar-4by3 { - width: $avatar-size-xs * 4 / 3; -} - -.avatar-sm.avatar-4by3 { - width: $avatar-size-sm * 4 / 3; -} - -.avatar-lg.avatar-4by3 { - width: $avatar-size-lg * 4 / 3; -} - -.avatar-xl.avatar-4by3 { - width: $avatar-size-xl * 4 / 3; -} - -.avatar-xxl.avatar-4by3 { - width: $avatar-size-xxl * 4 / 3; -} - - -// Group - -.avatar-group { - display: inline-flex; - - // Shift every next avatar left - - .avatar + .avatar { - margin-left: -$avatar-size-base / 4; - } - - .avatar-xs + .avatar-xs { - margin-left: -$avatar-size-xs / 4; - } - - .avatar-sm + .avatar-sm { - margin-left: -$avatar-size-sm / 4; - } - - .avatar-lg + .avatar-lg { - margin-left: -$avatar-size-lg / 4; - } - - .avatar-xl + .avatar-xl { - margin-left: -$avatar-size-xl / 4; - } - - .avatar-xxl + .avatar-xxl { - margin-left: -$avatar-size-xxl / 4; - } - - // Add some spacing between avatars - - .avatar:not(:last-child) { - mask-image: url(#{$path-to-img}/masks/avatar-group.svg); - mask-size: 100% 100%; - } - - // Bring an avatar to front on hover - - .avatar:hover { - mask-image: none; - z-index: 1; - - + .avatar { - mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg); - mask-size: 100% 100%; - - &:last-child { - mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg); - } - } - } - -} +// +// avatar.scss +// Dashkit component +// + +// General + +.avatar { + position: relative; + display: inline-block; + width: $avatar-size-base; + height: $avatar-size-base; + font-size: $avatar-size-base / 3; + + // Loads mask images so they don't lag on hover + + &:after { + content: ''; + position: absolute; + width: 0; + height: 0; + 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-hover.svg), + url(#{$path-to-img}/masks/avatar-group-hover-last.svg); + } +} + +.avatar-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.avatar-title { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + line-height: 0; + background-color: $avatar-title-bg; + color: $avatar-title-color; +} + + +// Status + +.avatar-online, +.avatar-offline { + + &::before { + content: ''; + position: absolute; + bottom: 5%; + right: 5%; + width: 20%; + height: 20%; + border-radius: 50%; + } + + .avatar-img { + mask-image: url(#{$path-to-img}/masks/avatar-status.svg); + mask-size: 100% 100%; + } +} + +.avatar-online::before { + background-color: $success; +} + +.avatar-offline::before { + background-color: $gray-500; +} + + +// Sizing + +.avatar-xs { + width: $avatar-size-xs; + height: $avatar-size-xs; + font-size: $avatar-size-xs / 3; +} + +.avatar-sm { + width: $avatar-size-sm; + height: $avatar-size-sm; + font-size: $avatar-size-sm / 3; +} + +.avatar-lg { + width: $avatar-size-lg; + height: $avatar-size-lg; + font-size: $avatar-size-lg / 3; +} + +.avatar-xl { + width: $avatar-size-xl; + height: $avatar-size-xl; + font-size: $avatar-size-xl / 3; +} + +.avatar-xxl { + width: $avatar-size-xl; + height: $avatar-size-xl; + font-size: $avatar-size-xl / 3; + + @include media-breakpoint-up(md) { + width: $avatar-size-xxl; + height: $avatar-size-xxl; + font-size: $avatar-size-xxl / 3; + } +} + + +// Ratio + +.avatar.avatar-4by3 { + width: $avatar-size-base * 4 / 3; +} + +.avatar-xs.avatar-4by3 { + width: $avatar-size-xs * 4 / 3; +} + +.avatar-sm.avatar-4by3 { + width: $avatar-size-sm * 4 / 3; +} + +.avatar-lg.avatar-4by3 { + width: $avatar-size-lg * 4 / 3; +} + +.avatar-xl.avatar-4by3 { + width: $avatar-size-xl * 4 / 3; +} + +.avatar-xxl.avatar-4by3 { + width: $avatar-size-xxl * 4 / 3; +} + + +// Group + +.avatar-group { + display: inline-flex; + + // Shift every next avatar left + + .avatar + .avatar { + margin-left: -$avatar-size-base / 4; + } + + .avatar-xs + .avatar-xs { + margin-left: -$avatar-size-xs / 4; + } + + .avatar-sm + .avatar-sm { + margin-left: -$avatar-size-sm / 4; + } + + .avatar-lg + .avatar-lg { + margin-left: -$avatar-size-lg / 4; + } + + .avatar-xl + .avatar-xl { + margin-left: -$avatar-size-xl / 4; + } + + .avatar-xxl + .avatar-xxl { + margin-left: -$avatar-size-xxl / 4; + } + + // Add some spacing between avatars + + .avatar:not(:last-child) { + mask-image: url(#{$path-to-img}/masks/avatar-group.svg); + mask-size: 100% 100%; + } + + // Bring an avatar to front on hover + + .avatar:hover { + mask-image: none; + z-index: 1; + + + .avatar { + mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg); + mask-size: 100% 100%; + + &:last-child { + mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg); + } + } + } + +} diff --git a/explorer/src/scss/dashkit/_badge.scss b/explorer/src/scss/dashkit/_badge.scss index 574ccf44f1..3e72fd6c63 100644 --- a/explorer/src/scss/dashkit/_badge.scss +++ b/explorer/src/scss/dashkit/_badge.scss @@ -1,28 +1,28 @@ -// -// badge.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -.badge { - vertical-align: middle; -} - -// Quick fix for badges in buttons -.btn .badge { - top: -2px; -} - -// -// Dashkit ===================================== -// - -// Creates the "soft" badge variant -@each $color, $value in $theme-colors { - .badge-soft-#{$color} { - @include badge-variant-soft(theme-color-level($color, $badge-soft-bg-level), $value); - } -} \ No newline at end of file +// +// badge.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.badge { + vertical-align: middle; +} + +// Quick fix for badges in buttons +.btn .badge { + top: -2px; +} + +// +// Dashkit ===================================== +// + +// Creates the "soft" badge variant +@each $color, $value in $theme-colors { + .badge-soft-#{$color} { + @include badge-variant-soft(theme-color-level($color, $badge-soft-bg-level), $value); + } +} diff --git a/explorer/src/scss/dashkit/_breadcrumb.scss b/explorer/src/scss/dashkit/_breadcrumb.scss index ef70340842..70bd9694b9 100644 --- a/explorer/src/scss/dashkit/_breadcrumb.scss +++ b/explorer/src/scss/dashkit/_breadcrumb.scss @@ -1,55 +1,55 @@ -// -// breadcrumb.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -.breadcrumb-item { - // The separator between breadcrumbs - + .breadcrumb-item::before { - width: .3rem; - height: .6rem; - margin-right: $breadcrumb-item-padding; - -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%; - -webkit-mask-size: contain; - mask-size: contain; - background: $breadcrumb-divider-color; - } -} - - -// -// Dashkit ===================================== -// - -// Small -// -// Reduces font size - -.breadcrumb-sm { - font-size: $breadcrumb-font-size-sm; -} - - -// Overflow -// -// Allows the breadcrumb to be overflown horizontally - -.breadcrumb-overflow { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - overflow-x: auto; - - &::-webkit-scrollbar { - display: none; - } -} - -.breadcrumb-overflow .breadcrumb-item { - white-space: nowrap; -} \ No newline at end of file +// +// breadcrumb.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.breadcrumb-item { + // The separator between breadcrumbs + + .breadcrumb-item::before { + width: .3rem; + height: .6rem; + margin-right: $breadcrumb-item-padding; + -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%; + -webkit-mask-size: contain; + mask-size: contain; + background: $breadcrumb-divider-color; + } +} + + +// +// Dashkit ===================================== +// + +// Small +// +// Reduces font size + +.breadcrumb-sm { + font-size: $breadcrumb-font-size-sm; +} + + +// Overflow +// +// Allows the breadcrumb to be overflown horizontally + +.breadcrumb-overflow { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + + &::-webkit-scrollbar { + display: none; + } +} + +.breadcrumb-overflow .breadcrumb-item { + white-space: nowrap; +} diff --git a/explorer/src/scss/dashkit/_buttons.scss b/explorer/src/scss/dashkit/_buttons.scss index b99456ecb7..1964751479 100644 --- a/explorer/src/scss/dashkit/_buttons.scss +++ b/explorer/src/scss/dashkit/_buttons.scss @@ -1,68 +1,68 @@ -// -// buttons.scss -// Extended from Bootstrap -// - - -// -// Dashkit =================================== -// - -// Button white - -.btn-white { - border-color: $gray-300; - - @include hover-focus { - background-color: $gray-100; - border-color: $gray-400; - } -} - -.btn-group-toggle .btn-white:not(:disabled):not(.disabled):active, -.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active { - background-color: $input-bg; - border-color: $input-focus-border-color; - color: $primary; -} - -.btn-group-toggle .btn-white:focus, -.btn-group-toggle .btn-white.focus { - box-shadow: none; -} - - -// Button outline secondary - -.btn-outline-secondary { - &:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]){ - border-color: $gray-400; - } -} - - -// Button rounded -// -// Creates circle button variations - -.btn-rounded-circle { - width: calc(1em * #{$btn-line-height} + #{$input-btn-padding-y * 2 } + #{$btn-border-width} * 2); - padding-left: 0; - padding-right: 0; - border-radius: 50%; -} -.btn-rounded-circle.btn-lg { - width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2); -} -.btn-rounded-circle.btn-sm { - width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2); -} - - -// Button group -// -// Prevent buttons from jittering on hover - -.btn-group .btn + .btn { - margin-left: 0; -} \ No newline at end of file +// +// buttons.scss +// Extended from Bootstrap +// + + +// +// Dashkit =================================== +// + +// Button white + +.btn-white { + border-color: $gray-300; + + @include hover-focus { + background-color: $gray-100; + border-color: $gray-400; + } +} + +.btn-group-toggle .btn-white:not(:disabled):not(.disabled):active, +.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active { + background-color: $input-bg; + border-color: $input-focus-border-color; + color: $primary; +} + +.btn-group-toggle .btn-white:focus, +.btn-group-toggle .btn-white.focus { + box-shadow: none; +} + + +// Button outline secondary + +.btn-outline-secondary { + &:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]){ + border-color: $gray-400; + } +} + + +// Button rounded +// +// Creates circle button variations + +.btn-rounded-circle { + width: calc(1em * #{$btn-line-height} + #{$input-btn-padding-y * 2 } + #{$btn-border-width} * 2); + padding-left: 0; + padding-right: 0; + border-radius: 50%; +} +.btn-rounded-circle.btn-lg { + width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2); +} +.btn-rounded-circle.btn-sm { + width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2); +} + + +// Button group +// +// Prevent buttons from jittering on hover + +.btn-group .btn + .btn { + margin-left: 0; +} diff --git a/explorer/src/scss/dashkit/_card.scss b/explorer/src/scss/dashkit/_card.scss index a4d826079b..6cd86c14ad 100644 --- a/explorer/src/scss/dashkit/_card.scss +++ b/explorer/src/scss/dashkit/_card.scss @@ -1,298 +1,298 @@ -// -// card.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -.card { - margin-bottom: $card-margin-bottom; - border-color: $card-outline-color; - box-shadow: $card-box-shadow; -} - -.card > * { - flex-shrink: 0; -} - -// Header - -.card-header { - display: flex; - flex-direction: row; - align-items: center; - height: $card-header-height; - padding-top: $card-spacer-y / 2; - padding-bottom: $card-spacer-y / 2; - - > *:first-child { - flex: 1; - } -} - -// Title - -.card-title { - margin-bottom: $card-spacer-y / 2; -} - - -// -// Dashkit =================================== -// - -// Card header -// -// Make sure the card header is always the same height with its content -// centered vertically - -.card-header-title { - margin-bottom: 0; -} - -.card-header-tabs { - margin-top: -$card-spacer-y / 2; - margin-bottom: -$card-spacer-y / 2; - margin-left: 0; - margin-right: 0; -} - -.card-header-tabs .nav-link { - padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; - padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; -} - - -// Card table -// -// Make sure the card table content is aligned with the rest of the card content - -.card-table { - margin-bottom: 0; -} - -.card-table thead th { - border-top-width: 0; -} - -.card-table thead th, -.card-table tbody td { - - &:first-child { - padding-left: $card-spacer-x !important; - } - - &:last-child { - padding-right: $card-spacer-x !important; - } -} - -.card > .card-table:first-child, -.card > .table-responsive:first-child > .card-table { - - > thead, > tbody, > tfoot { - - &:first-child { - - > tr:first-child { - - > th, > td { - - &:first-child { - border-top-left-radius: $card-border-radius; - } - - &:last-child { - border-top-right-radius: $card-border-radius; - } - } - } - } - } -} - - -// Card avatar -// -// Moves card avatar up by 50% - -.card-avatar { - display: block !important; - margin-left: auto; - margin-right: auto; - margin-bottom: $card-spacer-y; -} - -.card-avatar-top { - margin-top: -($card-spacer-x + $avatar-size-base / 2); -} - -.card-avatar-top.avatar-xs { - margin-top: -($card-spacer-x + $avatar-size-xs / 2); -} - -.card-avatar-top.avatar-sm { - margin-top: -($card-spacer-x + $avatar-size-sm / 2); -} - -.card-avatar-top.avatar-lg { - margin-top: -($card-spacer-x + $avatar-size-lg / 2); -} - -.card-avatar-top.avatar-xl { - margin-top: -($card-spacer-x + $avatar-size-xl / 2); -} - -.card-avatar-top.avatar-xxl { - margin-top: -($card-spacer-x + $avatar-size-xxl / 2); -} - - -// Card dropdown -// -// Places dropdowns in the top right corner - -.card-dropdown { - position: absolute; - top: $card-spacer-x; - right: $card-spacer-x; -} - - -// Card inactive -// -// Adds dashed border and removes background - -.card-inactive { - border-color: $border-color; - border-style: dashed; - background-color: transparent; - box-shadow: none; -} - - -// Card flush -// -// Removes borders and background - -.card-flush { - background: none; - border: none; - box-shadow: none; -} - - -// Card sizing -// -// Affects card padding - -.card-sm .card-body, -.card-sm .card-footer-boxed { - padding: $card-spacer-x-sm; -} - - -// Card header flush -// -// Removes border between card header and body and adjusts spacing - -.card-header-flush { - border-bottom: 0; -} - -.card-header-flush + .card-body { - padding-top: 0; -} - - -// Card fill -// -// Fills the whole available space to fit the height of the neighboring card - -.card-fill { - height: calc(100% - #{$card-margin-bottom}); -} - -.card-fill .card-body { - flex-grow: 0; - margin-top: auto; - margin-bottom: auto; -} - -// Responsive - -.card-fill { - - @each $breakpoint, $value in $grid-breakpoints { - - &-#{$breakpoint} { - - @include media-breakpoint-up(#{$breakpoint}) { - height: calc(100% - #{$card-margin-bottom}); - - .card-body { - flex-grow: 0; - margin-top: auto; - margin-bottom: auto; - } - } - } - } -} - - -// Card adjust -// -// Limits the height to the height of the neighboring card and adds a scrollbar to the card body - -.card-adjust { - height: 0; - min-height: 100%; -} - -.card-adjust .card { - height: calc(100% - #{$card-margin-bottom}); -} - -.card-adjust .card-body { - height: calc(100% - #{$card-header-height}); - overflow-y: auto; -} - -// Responsive - -.card-adjust { - - @each $breakpoint, $value in $grid-breakpoints { - - &-#{$breakpoint} { - - @include media-breakpoint-up(#{$breakpoint}) { - height: 0; - min-height: 100%; - - .card { - height: calc(100% - #{$card-margin-bottom}); - } - - .card-body { - height: calc(100% - #{$card-header-height}); - overflow-y: auto; - } - } - } - } -} - - -// Card footer boxed - -.card-footer-boxed { - padding-right: 0; - padding-bottom: $card-spacer-x; - padding-left: 0; - margin-left: $card-spacer-x; - margin-right: $card-spacer-x; -} +// +// card.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.card { + margin-bottom: $card-margin-bottom; + border-color: $card-outline-color; + box-shadow: $card-box-shadow; +} + +.card > * { + flex-shrink: 0; +} + +// Header + +.card-header { + display: flex; + flex-direction: row; + align-items: center; + height: $card-header-height; + padding-top: $card-spacer-y / 2; + padding-bottom: $card-spacer-y / 2; + + > *:first-child { + flex: 1; + } +} + +// Title + +.card-title { + margin-bottom: $card-spacer-y / 2; +} + + +// +// Dashkit =================================== +// + +// Card header +// +// Make sure the card header is always the same height with its content +// centered vertically + +.card-header-title { + margin-bottom: 0; +} + +.card-header-tabs { + margin-top: -$card-spacer-y / 2; + margin-bottom: -$card-spacer-y / 2; + margin-left: 0; + margin-right: 0; +} + +.card-header-tabs .nav-link { + padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; + padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; +} + + +// Card table +// +// Make sure the card table content is aligned with the rest of the card content + +.card-table { + margin-bottom: 0; +} + +.card-table thead th { + border-top-width: 0; +} + +.card-table thead th, +.card-table tbody td { + + &:first-child { + padding-left: $card-spacer-x !important; + } + + &:last-child { + padding-right: $card-spacer-x !important; + } +} + +.card > .card-table:first-child, +.card > .table-responsive:first-child > .card-table { + + > thead, > tbody, > tfoot { + + &:first-child { + + > tr:first-child { + + > th, > td { + + &:first-child { + border-top-left-radius: $card-border-radius; + } + + &:last-child { + border-top-right-radius: $card-border-radius; + } + } + } + } + } +} + + +// Card avatar +// +// Moves card avatar up by 50% + +.card-avatar { + display: block !important; + margin-left: auto; + margin-right: auto; + margin-bottom: $card-spacer-y; +} + +.card-avatar-top { + margin-top: -($card-spacer-x + $avatar-size-base / 2); +} + +.card-avatar-top.avatar-xs { + margin-top: -($card-spacer-x + $avatar-size-xs / 2); +} + +.card-avatar-top.avatar-sm { + margin-top: -($card-spacer-x + $avatar-size-sm / 2); +} + +.card-avatar-top.avatar-lg { + margin-top: -($card-spacer-x + $avatar-size-lg / 2); +} + +.card-avatar-top.avatar-xl { + margin-top: -($card-spacer-x + $avatar-size-xl / 2); +} + +.card-avatar-top.avatar-xxl { + margin-top: -($card-spacer-x + $avatar-size-xxl / 2); +} + + +// Card dropdown +// +// Places dropdowns in the top right corner + +.card-dropdown { + position: absolute; + top: $card-spacer-x; + right: $card-spacer-x; +} + + +// Card inactive +// +// Adds dashed border and removes background + +.card-inactive { + border-color: $border-color; + border-style: dashed; + background-color: transparent; + box-shadow: none; +} + + +// Card flush +// +// Removes borders and background + +.card-flush { + background: none; + border: none; + box-shadow: none; +} + + +// Card sizing +// +// Affects card padding + +.card-sm .card-body, +.card-sm .card-footer-boxed { + padding: $card-spacer-x-sm; +} + + +// Card header flush +// +// Removes border between card header and body and adjusts spacing + +.card-header-flush { + border-bottom: 0; +} + +.card-header-flush + .card-body { + padding-top: 0; +} + + +// Card fill +// +// Fills the whole available space to fit the height of the neighboring card + +.card-fill { + height: calc(100% - #{$card-margin-bottom}); +} + +.card-fill .card-body { + flex-grow: 0; + margin-top: auto; + margin-bottom: auto; +} + +// Responsive + +.card-fill { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + height: calc(100% - #{$card-margin-bottom}); + + .card-body { + flex-grow: 0; + margin-top: auto; + margin-bottom: auto; + } + } + } + } +} + + +// Card adjust +// +// Limits the height to the height of the neighboring card and adds a scrollbar to the card body + +.card-adjust { + height: 0; + min-height: 100%; +} + +.card-adjust .card { + height: calc(100% - #{$card-margin-bottom}); +} + +.card-adjust .card-body { + height: calc(100% - #{$card-header-height}); + overflow-y: auto; +} + +// Responsive + +.card-adjust { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + height: 0; + min-height: 100%; + + .card { + height: calc(100% - #{$card-margin-bottom}); + } + + .card-body { + height: calc(100% - #{$card-header-height}); + overflow-y: auto; + } + } + } + } +} + + +// Card footer boxed + +.card-footer-boxed { + padding-right: 0; + padding-bottom: $card-spacer-x; + padding-left: 0; + margin-left: $card-spacer-x; + margin-right: $card-spacer-x; +} diff --git a/explorer/src/scss/dashkit/_chart.scss b/explorer/src/scss/dashkit/_chart.scss index 2b2b057eb4..57a0b63865 100644 --- a/explorer/src/scss/dashkit/_chart.scss +++ b/explorer/src/scss/dashkit/_chart.scss @@ -1,79 +1,79 @@ -// -// chart.scss -// Dashkit component -// - -// Chart -// -// General styles - -.chart { - position: relative; - height: $chart-height; -} - -.chart.chart-appended { - height: calc(#{$chart-height} - #{$chart-legend-height}); -} - -.chart-sm { - height: $chart-height-sm; -} - -.chart-sm.chart-appended { - height: calc(#{$chart-height-sm} - #{$chart-legend-height}); -} - - -// Sparkline - -.chart-sparkline { - width: $chart-sparkline-width; - height: $chart-sparkline-height; -} - - -// Legend -// -// Custom legend - -.chart-legend { - display: flex; - justify-content: center; - margin-top: $chart-legend-margin-top; - font-size: $chart-legend-font-size; - text-align: center; - color: $chart-legend-color; -} - -.chart-legend-item { - display: inline-flex; - align-items: center; - - + .chart-legend-item { - margin-left: 1rem; - } -} - -.chart-legend-indicator { - display: inline-block; - width: .5rem; - height: .5rem; - margin-right: 0.375rem; - border-radius: 50%; -} - - -// Tooltip -// -// Custom tooltip - -#chart-tooltip { - z-index: 0; -} - -#chart-tooltip .arrow { - top: 100%; - left: 50%; - transform: translateX(-50%) translateX(-.5rem); -} +// +// chart.scss +// Dashkit component +// + +// Chart +// +// General styles + +.chart { + position: relative; + height: $chart-height; +} + +.chart.chart-appended { + height: calc(#{$chart-height} - #{$chart-legend-height}); +} + +.chart-sm { + height: $chart-height-sm; +} + +.chart-sm.chart-appended { + height: calc(#{$chart-height-sm} - #{$chart-legend-height}); +} + + +// Sparkline + +.chart-sparkline { + width: $chart-sparkline-width; + height: $chart-sparkline-height; +} + + +// Legend +// +// Custom legend + +.chart-legend { + display: flex; + justify-content: center; + margin-top: $chart-legend-margin-top; + font-size: $chart-legend-font-size; + text-align: center; + color: $chart-legend-color; +} + +.chart-legend-item { + display: inline-flex; + align-items: center; + + + .chart-legend-item { + margin-left: 1rem; + } +} + +.chart-legend-indicator { + display: inline-block; + width: .5rem; + height: .5rem; + margin-right: 0.375rem; + border-radius: 50%; +} + + +// Tooltip +// +// Custom tooltip + +#chart-tooltip { + z-index: 0; +} + +#chart-tooltip .arrow { + top: 100%; + left: 50%; + transform: translateX(-50%) translateX(-.5rem); +} diff --git a/explorer/src/scss/dashkit/_checklist.scss b/explorer/src/scss/dashkit/_checklist.scss index 9f19c70712..b8abfd842f 100644 --- a/explorer/src/scss/dashkit/_checklist.scss +++ b/explorer/src/scss/dashkit/_checklist.scss @@ -1,36 +1,36 @@ -// -// checklist.scss -// Dashkit component -// - -.checklist { - outline: none; -} - -.checklist-control { - display: flex; - flex-wrap: nowrap; - outline: none; - user-select: none; -} - -.checklist-control .custom-control-input:checked ~ .custom-control-caption { - text-decoration: line-through; - color: $checklist-control-checked-color; -} - -.checklist-control + .checklist-control { - margin-top: $checklist-control-spacer; -} - -.checklist-control:first-child[style*="display: none"] + .checklist-control { - margin-top: 0; -} - -.checklist-control.draggable-mirror { - z-index: $zindex-fixed; -} - -.checklist-control.draggable-source--is-dragging { - opacity: .2; -} +// +// checklist.scss +// Dashkit component +// + +.checklist { + outline: none; +} + +.checklist-control { + display: flex; + flex-wrap: nowrap; + outline: none; + user-select: none; +} + +.checklist-control .custom-control-input:checked ~ .custom-control-caption { + text-decoration: line-through; + color: $checklist-control-checked-color; +} + +.checklist-control + .checklist-control { + margin-top: $checklist-control-spacer; +} + +.checklist-control:first-child[style*="display: none"] + .checklist-control { + margin-top: 0; +} + +.checklist-control.draggable-mirror { + z-index: $zindex-fixed; +} + +.checklist-control.draggable-source--is-dragging { + opacity: .2; +} diff --git a/explorer/src/scss/dashkit/_close.scss b/explorer/src/scss/dashkit/_close.scss index d5c9f2f729..e10e2a2253 100644 --- a/explorer/src/scss/dashkit/_close.scss +++ b/explorer/src/scss/dashkit/_close.scss @@ -1,10 +1,10 @@ -// -// close.scss -// Extended from Bootstrap -// - -// Small - -.close-sm { - font-size: $close-font-size-sm; -} \ No newline at end of file +// +// close.scss +// Extended from Bootstrap +// + +// Small + +.close-sm { + font-size: $close-font-size-sm; +} diff --git a/explorer/src/scss/dashkit/_code.scss b/explorer/src/scss/dashkit/_code.scss index 39cb6a15e8..3fc0ce8dd0 100644 --- a/explorer/src/scss/dashkit/_code.scss +++ b/explorer/src/scss/dashkit/_code.scss @@ -1,16 +1,16 @@ -// -// code.scss -// Extended from Bootstrap -// - -// -// Dashkit ================================= -// - -// Highlight -// -// Hightlight.js overrides - -.highlight { - padding: 0; -} \ No newline at end of file +// +// code.scss +// Extended from Bootstrap +// + +// +// Dashkit ================================= +// + +// Highlight +// +// Hightlight.js overrides + +.highlight { + padding: 0; +} diff --git a/explorer/src/scss/dashkit/_comment.scss b/explorer/src/scss/dashkit/_comment.scss index 072d602230..12c80c4abd 100644 --- a/explorer/src/scss/dashkit/_comment.scss +++ b/explorer/src/scss/dashkit/_comment.scss @@ -1,34 +1,34 @@ -// -// comment.scss -// Dashkit component -// - -// Comment -// -// General styles - -.comment { - margin-bottom: $comment-margin-bottom; -} - -.comment-body { - display: inline-block; - padding: $comment-body-padding-y $comment-body-padding-x; - background-color: $comment-body-bg; - border-radius: $comment-body-border-radius; -} - -.comment-time { - display: block; - margin-bottom: $comment-time-margin-bottom; - font-size: $comment-time-font-size; - color: $comment-time-color; -} - -.comment-text { - font-size: $comment-body-font-size; -} - -.comment-text:last-child { - margin-bottom: 0; -} \ No newline at end of file +// +// comment.scss +// Dashkit component +// + +// Comment +// +// General styles + +.comment { + margin-bottom: $comment-margin-bottom; +} + +.comment-body { + display: inline-block; + padding: $comment-body-padding-y $comment-body-padding-x; + background-color: $comment-body-bg; + border-radius: $comment-body-border-radius; +} + +.comment-time { + display: block; + margin-bottom: $comment-time-margin-bottom; + font-size: $comment-time-font-size; + color: $comment-time-color; +} + +.comment-text { + font-size: $comment-body-font-size; +} + +.comment-text:last-child { + margin-bottom: 0; +} diff --git a/explorer/src/scss/dashkit/_custom-forms.scss b/explorer/src/scss/dashkit/_custom-forms.scss index 1fcde355f8..a857244bcb 100644 --- a/explorer/src/scss/dashkit/_custom-forms.scss +++ b/explorer/src/scss/dashkit/_custom-forms.scss @@ -1,37 +1,37 @@ -// -// custom-forms.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides =================================== -// - -// Switch - -.custom-switch { - min-height: $custom-switch-height; - - .custom-control-label { - - &::before { - top: 0; - height: $custom-switch-height; - border-radius: $custom-switch-height / 2; - } - - &::after { - top: $custom-switch-spacing; - left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width; - background-color: $custom-switch-indicator-bg; - } - } - - .custom-control-input:checked ~ .custom-control-label { - - &::after { - background-color: $custom-switch-indicator-active-bg; - transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size); - } - } -} +// +// custom-forms.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides =================================== +// + +// Switch + +.custom-switch { + min-height: $custom-switch-height; + + .custom-control-label { + + &::before { + top: 0; + height: $custom-switch-height; + border-radius: $custom-switch-height / 2; + } + + &::after { + top: $custom-switch-spacing; + left: $custom-switch-spacing - $custom-control-gutter - $custom-switch-width; + background-color: $custom-switch-indicator-bg; + } + } + + .custom-control-input:checked ~ .custom-control-label { + + &::after { + background-color: $custom-switch-indicator-active-bg; + transform: translateX($custom-switch-width - $custom-switch-spacing * 2 - $custom-switch-indicator-size); + } + } +} diff --git a/explorer/src/scss/dashkit/_dashkit.scss b/explorer/src/scss/dashkit/_dashkit.scss index 9dd6a91f88..608e4b193d 100644 --- a/explorer/src/scss/dashkit/_dashkit.scss +++ b/explorer/src/scss/dashkit/_dashkit.scss @@ -1,38 +1,38 @@ -// Extended Bootstrap components - -@import 'mixins'; -@import 'alert'; -@import 'badge'; -@import 'breadcrumb'; -@import 'buttons'; -@import 'card'; -@import 'close'; -@import 'code'; -@import 'custom-forms'; -@import 'dropdowns'; -@import 'forms'; -@import 'jumbotron'; -@import 'list-group'; -@import 'modal'; -@import 'nav'; -@import 'navbar'; -@import 'popover'; -@import 'progress'; -@import 'reboot'; -@import 'root'; -@import 'tables'; -@import 'toasts'; -@import 'type'; -@import 'utilities'; - -// Dashkit only components - -@import 'avatar'; -@import 'chart'; -@import 'comment'; -@import 'checklist'; -@import 'header'; -@import 'icon'; -@import 'kanban'; -@import 'main-content'; -@import 'vendors'; +// Extended Bootstrap components + +@import 'mixins'; +@import 'alert'; +@import 'badge'; +@import 'breadcrumb'; +@import 'buttons'; +@import 'card'; +@import 'close'; +@import 'code'; +@import 'custom-forms'; +@import 'dropdowns'; +@import 'forms'; +@import 'jumbotron'; +@import 'list-group'; +@import 'modal'; +@import 'nav'; +@import 'navbar'; +@import 'popover'; +@import 'progress'; +@import 'reboot'; +@import 'root'; +@import 'tables'; +@import 'toasts'; +@import 'type'; +@import 'utilities'; + +// Dashkit only components + +@import 'avatar'; +@import 'chart'; +@import 'comment'; +@import 'checklist'; +@import 'header'; +@import 'icon'; +@import 'kanban'; +@import 'main-content'; +@import 'vendors'; diff --git a/explorer/src/scss/dashkit/_dropdowns.scss b/explorer/src/scss/dashkit/_dropdowns.scss index 52fde5027f..89d779ecd3 100644 --- a/explorer/src/scss/dashkit/_dropdowns.scss +++ b/explorer/src/scss/dashkit/_dropdowns.scss @@ -1,124 +1,124 @@ -// -// dropdowns.scss -// Extended from Bootstrap -// - -// -// Bootstrap overrides ================================== -// - -// Dropdown arrows -// -// Replace original arrows with Feather icons - -.dropdown-toggle { - - &::after { - width: auto; - height: auto; - border: none !important; - vertical-align: middle; - font-family: 'Feather'; - } - - &::after { - content: '\e92e'; - } -} - -.dropup > .dropdown-toggle { - - &::after { - content: '\e931'; - } -} - -.dropright > .dropdown-toggle { - - &::after { - content: '\e930'; - } -} - -.dropleft > .dropdown-toggle { - - &::before { - content: '\e92f'; - width: auto; - height: auto; - border: none !important; - vertical-align: middle; - font-family: 'Feather'; - } -} - - -// Dropdown toggle -// -// Right align arrows - -.dropdown-item.dropdown-toggle { - display: flex; - justify-content: space-between; -} - - -// Dropdown menu animation -// -// Animate dropdown menu appearance - -.dropdown-menu { - animation: dropdownMenu .15s; -} - -@keyframes dropdownMenu { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - - - -// -// Dashkit =================================== -// - - -// Dropdown ellipses -// -// Styles the ellipses icon and removes the dropdown arrow - -.dropdown-ellipses { - font-size: $font-size-lg; - color: $gray-400; -} - -.dropdown-ellipses::after { - display: none; -} - - -// Dropdown card -// -// Makes the dropdown menu act like a card - -.dropdown-menu-card { - min-width: $dropdown-card-min-width; - padding-top: 0; - padding-bottom: 0; - background-color: $card-bg; - border-color: $dropdown-card-border-color; - - .card-header { - min-height: $dropdown-card-header-min-height; - } - - .card-body { - max-height: $dropdown-card-body-max-height; - overflow-y: auto; - } -} +// +// dropdowns.scss +// Extended from Bootstrap +// + +// +// Bootstrap overrides ================================== +// + +// Dropdown arrows +// +// Replace original arrows with Feather icons + +.dropdown-toggle { + + &::after { + width: auto; + height: auto; + border: none !important; + vertical-align: middle; + font-family: 'Feather'; + } + + &::after { + content: '\e92e'; + } +} + +.dropup > .dropdown-toggle { + + &::after { + content: '\e931'; + } +} + +.dropright > .dropdown-toggle { + + &::after { + content: '\e930'; + } +} + +.dropleft > .dropdown-toggle { + + &::before { + content: '\e92f'; + width: auto; + height: auto; + border: none !important; + vertical-align: middle; + font-family: 'Feather'; + } +} + + +// Dropdown toggle +// +// Right align arrows + +.dropdown-item.dropdown-toggle { + display: flex; + justify-content: space-between; +} + + +// Dropdown menu animation +// +// Animate dropdown menu appearance + +.dropdown-menu { + animation: dropdownMenu .15s; +} + +@keyframes dropdownMenu { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + + + +// +// Dashkit =================================== +// + + +// Dropdown ellipses +// +// Styles the ellipses icon and removes the dropdown arrow + +.dropdown-ellipses { + font-size: $font-size-lg; + color: $gray-400; +} + +.dropdown-ellipses::after { + display: none; +} + + +// Dropdown card +// +// Makes the dropdown menu act like a card + +.dropdown-menu-card { + min-width: $dropdown-card-min-width; + padding-top: 0; + padding-bottom: 0; + background-color: $card-bg; + border-color: $dropdown-card-border-color; + + .card-header { + min-height: $dropdown-card-header-min-height; + } + + .card-body { + max-height: $dropdown-card-body-max-height; + overflow-y: auto; + } +} diff --git a/explorer/src/scss/dashkit/_forms.scss b/explorer/src/scss/dashkit/_forms.scss index 54874bde21..72ce49816d 100644 --- a/explorer/src/scss/dashkit/_forms.scss +++ b/explorer/src/scss/dashkit/_forms.scss @@ -1,272 +1,272 @@ -// -// forms.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides =================================== -// - -// Help text - -.form-text { - margin-top: 0; - margin-bottom: $label-margin-bottom; -} - - -// Form validation - -.was-validated .form-control:valid:focus, .form-control.is-valid:focus, -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - box-shadow: none; -} - - -// -// Dashkit =================================== -// - -// Form control flush -// -// Removes borders and paddings from inputs and text areas - -.form-control-flush { - padding-left: 0; - padding-right: 0; - border-color: transparent !important; - background-color: transparent !important; - resize: none; -} - - -// Form control auto -// -// Sets the height of the input to auto - -.form-control-auto { - height: auto; - padding-top: 0; - padding-bottom: 0; -} - - -// Form control rounded -// -// Makes input border radius round - -.form-control-rounded { - border-radius: 20rem; -} - - -// Input group merge -// -// Makes input group text and form control visually the same element - -.input-group.input-group-merge { - - > .form-control { - border-radius: $input-border-radius; - - &:focus { - box-shadow: none; - - ~ [class*="input-group"] { - - > .input-group-text { - border-color: $input-focus-border-color; - } - } - } - } - - > .form-control.is-valid ~ [class*="input-group"] > .input-group-text { - border-color: $success; - } - - > .form-control.is-invalid ~ [class*="input-group"] > .input-group-text { - border-color: $danger; - } - - > .form-control-prepended { - padding-left: $input-padding-x / 2; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - border-left-width: 0; - } - - > .form-control-appended { - padding-right: $input-padding-x / 2; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right-width: 0; - } - - > .input-group-prepend { - order: -1; // prepend always goes first - - > .input-group-text { - padding-right: $input-padding-x / 2; - border-top-left-radius: $input-border-radius; - border-bottom-left-radius: $input-border-radius; - border-right-width: 0; - transition: $input-transition; - } - } - - > .input-group-append { - - > .input-group-text { - padding-left: $input-padding-x / 2; - border-top-right-radius: $input-border-radius; - border-bottom-right-radius: $input-border-radius; - border-left-width: 0; - transition: $input-transition; - } - } -} - -.input-group-lg.input-group-merge { - - > .form-control { - border-radius: $input-border-radius-lg; - } - - > .form-control-prepended { - padding-left: $input-padding-x-lg / 2; - - } - - > .form-control-appended { - padding-right: $input-padding-x-lg / 2; - - } - - > .input-group-prepend { - - > .input-group-text { - padding-right: $input-padding-x-lg / 2; - border-top-left-radius: $input-border-radius-lg; - border-bottom-left-radius: $input-border-radius-lg; - } - } - - > .input-group-append { - - > .input-group-text { - padding-left: $input-padding-x-lg / 2; - border-top-right-radius: $input-border-radius-lg; - border-bottom-right-radius: $input-border-radius-lg; - } - } -} - -.input-group-sm.input-group-merge { - - > .form-control { - border-radius: $input-border-radius-sm; - } - - > .form-control-prepended { - padding-left: $input-padding-x-sm / 2; - - } - - > .form-control-appended { - padding-right: $input-padding-x-sm / 2; - } - - > .input-group-prepend { - - > .input-group-text { - padding-right: $input-padding-x-sm / 2; - border-top-left-radius: $input-border-radius-sm; - border-bottom-left-radius: $input-border-radius-sm; - } - } - - > .input-group-append { - - > .input-group-text { - padding-left: $input-padding-x-sm / 2; - border-top-right-radius: $input-border-radius-sm; - border-bottom-right-radius: $input-border-radius-sm; - } - } -} - -.input-group-rounded.input-group-merge { - - > .form-control { - border-radius: 20rem; - } - - > .input-group-prepend { - - > .input-group-text { - border-top-left-radius: 20rem; - border-bottom-left-radius: 20rem; - } - } - - > .input-group-append { - - > .input-group-text { - border-top-right-radius: 20rem; - border-bottom-right-radius: 20rem; - } - } -} - -.input-group-flush { - - > .form-control { - padding-top: 0; - padding-bottom: 0; - border-color: transparent !important; - background-color: transparent !important; - } - - > .input-group-prepend, - > .input-group-append { - - > .input-group-text { - padding: 0; - border-width: 0; - background-color: transparent; - } - } -} - - -// Font size - -.form-control { - - &.h1, &.h2, &.h3, &.h4, &.h5 { - margin-bottom: 0; - font-weight: $headings-font-weight; - letter-spacing: $headings-letter-spacing; - } - - &.h1 { - font-size: $h1-font-size; - } - - &.h2 { - font-size: $h2-font-size; - } - - &.h3 { - font-size: $h3-font-size; - } - - &.h4 { - font-size: $h4-font-size; - } - - &.h5 { - font-size: $h5-font-size; - } -} +// +// forms.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides =================================== +// + +// Help text + +.form-text { + margin-top: 0; + margin-bottom: $label-margin-bottom; +} + + +// Form validation + +.was-validated .form-control:valid:focus, .form-control.is-valid:focus, +.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { + box-shadow: none; +} + + +// +// Dashkit =================================== +// + +// Form control flush +// +// Removes borders and paddings from inputs and text areas + +.form-control-flush { + padding-left: 0; + padding-right: 0; + border-color: transparent !important; + background-color: transparent !important; + resize: none; +} + + +// Form control auto +// +// Sets the height of the input to auto + +.form-control-auto { + height: auto; + padding-top: 0; + padding-bottom: 0; +} + + +// Form control rounded +// +// Makes input border radius round + +.form-control-rounded { + border-radius: 20rem; +} + + +// Input group merge +// +// Makes input group text and form control visually the same element + +.input-group.input-group-merge { + + > .form-control { + border-radius: $input-border-radius; + + &:focus { + box-shadow: none; + + ~ [class*="input-group"] { + + > .input-group-text { + border-color: $input-focus-border-color; + } + } + } + } + + > .form-control.is-valid ~ [class*="input-group"] > .input-group-text { + border-color: $success; + } + + > .form-control.is-invalid ~ [class*="input-group"] > .input-group-text { + border-color: $danger; + } + + > .form-control-prepended { + padding-left: $input-padding-x / 2; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-left-width: 0; + } + + > .form-control-appended { + padding-right: $input-padding-x / 2; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-right-width: 0; + } + + > .input-group-prepend { + order: -1; // prepend always goes first + + > .input-group-text { + padding-right: $input-padding-x / 2; + border-top-left-radius: $input-border-radius; + border-bottom-left-radius: $input-border-radius; + border-right-width: 0; + transition: $input-transition; + } + } + + > .input-group-append { + + > .input-group-text { + padding-left: $input-padding-x / 2; + border-top-right-radius: $input-border-radius; + border-bottom-right-radius: $input-border-radius; + border-left-width: 0; + transition: $input-transition; + } + } +} + +.input-group-lg.input-group-merge { + + > .form-control { + border-radius: $input-border-radius-lg; + } + + > .form-control-prepended { + padding-left: $input-padding-x-lg / 2; + + } + + > .form-control-appended { + padding-right: $input-padding-x-lg / 2; + + } + + > .input-group-prepend { + + > .input-group-text { + padding-right: $input-padding-x-lg / 2; + border-top-left-radius: $input-border-radius-lg; + border-bottom-left-radius: $input-border-radius-lg; + } + } + + > .input-group-append { + + > .input-group-text { + padding-left: $input-padding-x-lg / 2; + border-top-right-radius: $input-border-radius-lg; + border-bottom-right-radius: $input-border-radius-lg; + } + } +} + +.input-group-sm.input-group-merge { + + > .form-control { + border-radius: $input-border-radius-sm; + } + + > .form-control-prepended { + padding-left: $input-padding-x-sm / 2; + + } + + > .form-control-appended { + padding-right: $input-padding-x-sm / 2; + } + + > .input-group-prepend { + + > .input-group-text { + padding-right: $input-padding-x-sm / 2; + border-top-left-radius: $input-border-radius-sm; + border-bottom-left-radius: $input-border-radius-sm; + } + } + + > .input-group-append { + + > .input-group-text { + padding-left: $input-padding-x-sm / 2; + border-top-right-radius: $input-border-radius-sm; + border-bottom-right-radius: $input-border-radius-sm; + } + } +} + +.input-group-rounded.input-group-merge { + + > .form-control { + border-radius: 20rem; + } + + > .input-group-prepend { + + > .input-group-text { + border-top-left-radius: 20rem; + border-bottom-left-radius: 20rem; + } + } + + > .input-group-append { + + > .input-group-text { + border-top-right-radius: 20rem; + border-bottom-right-radius: 20rem; + } + } +} + +.input-group-flush { + + > .form-control { + padding-top: 0; + padding-bottom: 0; + border-color: transparent !important; + background-color: transparent !important; + } + + > .input-group-prepend, + > .input-group-append { + + > .input-group-text { + padding: 0; + border-width: 0; + background-color: transparent; + } + } +} + + +// Font size + +.form-control { + + &.h1, &.h2, &.h3, &.h4, &.h5 { + margin-bottom: 0; + font-weight: $headings-font-weight; + letter-spacing: $headings-letter-spacing; + } + + &.h1 { + font-size: $h1-font-size; + } + + &.h2 { + font-size: $h2-font-size; + } + + &.h3 { + font-size: $h3-font-size; + } + + &.h4 { + font-size: $h4-font-size; + } + + &.h5 { + font-size: $h5-font-size; + } +} diff --git a/explorer/src/scss/dashkit/_header.scss b/explorer/src/scss/dashkit/_header.scss index 6e2d531092..5a81f18c51 100644 --- a/explorer/src/scss/dashkit/_header.scss +++ b/explorer/src/scss/dashkit/_header.scss @@ -1,58 +1,58 @@ -// -// header.scss -// Dashkit component -// - -// Header -// -// General styles - -.header { - margin-bottom: $header-margin-bottom; -} - -.header-img-top { - width: 100%; height: auto; -} - -.header-body { - padding-top: $header-spacing-y; - padding-bottom: $header-spacing-y; - border-bottom: $header-body-border-width solid $header-body-border-color; -} - -.header.bg-dark .header-body, -.header.bg-hero .header-body { - border-bottom-color: $header-body-border-color-dark; -} - -.header-footer { - padding-top: $header-spacing-y; - padding-bottom: $header-spacing-y; -} - -.header-pretitle { - text-transform: uppercase; - letter-spacing: .08em; - color: $text-muted; -} - -.header-title { - margin-bottom: 0; -} - -.header-subtitle { - margin-top: map-get($spacers, 2); - margin-bottom: 0; - color: $text-muted; -} - -.header-tabs { - margin-bottom: -$header-spacing-y; - border-bottom-width: 0; - - .nav-link { - padding-top: $header-spacing-y; - padding-bottom: $header-spacing-y; - } -} \ No newline at end of file +// +// header.scss +// Dashkit component +// + +// Header +// +// General styles + +.header { + margin-bottom: $header-margin-bottom; +} + +.header-img-top { + width: 100%; height: auto; +} + +.header-body { + padding-top: $header-spacing-y; + padding-bottom: $header-spacing-y; + border-bottom: $header-body-border-width solid $header-body-border-color; +} + +.header.bg-dark .header-body, +.header.bg-hero .header-body { + border-bottom-color: $header-body-border-color-dark; +} + +.header-footer { + padding-top: $header-spacing-y; + padding-bottom: $header-spacing-y; +} + +.header-pretitle { + text-transform: uppercase; + letter-spacing: .08em; + color: $text-muted; +} + +.header-title { + margin-bottom: 0; +} + +.header-subtitle { + margin-top: map-get($spacers, 2); + margin-bottom: 0; + color: $text-muted; +} + +.header-tabs { + margin-bottom: -$header-spacing-y; + border-bottom-width: 0; + + .nav-link { + padding-top: $header-spacing-y; + padding-bottom: $header-spacing-y; + } +} diff --git a/explorer/src/scss/dashkit/_icon.scss b/explorer/src/scss/dashkit/_icon.scss index a9bdeac334..d823db5dab 100644 --- a/explorer/src/scss/dashkit/_icon.scss +++ b/explorer/src/scss/dashkit/_icon.scss @@ -1,54 +1,54 @@ -// -// icon.scss -// Dashkit component -// - -// Icon -// -// General styles - -.icon { - display: inline-block; - - // Feather icon - - > .fe { - display: block; - min-width: 1em * $line-height-base; - min-height: 1em * $line-height-base; - text-align: center; - font-size: $font-size-lg; - } - - // Active state - - &.active { - position: relative; - - // Feather icon - - > .fe { - mask-image: url(#{$path-to-img}/masks/icon-status.svg); - mask-size: 100% 100%; - } - - // Indicator - - &::after { - content: ""; - position: absolute; - top: 10%; right: 20%; - width: 20%; height: 20%; - border-radius: 50%; - background-color: $primary; - } - } -} - -// Feather icons -// -// Fixes icon / font vertical alignment issue - -.fe { - line-height: inherit; -} \ No newline at end of file +// +// icon.scss +// Dashkit component +// + +// Icon +// +// General styles + +.icon { + display: inline-block; + + // Feather icon + + > .fe { + display: block; + min-width: 1em * $line-height-base; + min-height: 1em * $line-height-base; + text-align: center; + font-size: $font-size-lg; + } + + // Active state + + &.active { + position: relative; + + // Feather icon + + > .fe { + mask-image: url(#{$path-to-img}/masks/icon-status.svg); + mask-size: 100% 100%; + } + + // Indicator + + &::after { + content: ""; + position: absolute; + top: 10%; right: 20%; + width: 20%; height: 20%; + border-radius: 50%; + background-color: $primary; + } + } +} + +// Feather icons +// +// Fixes icon / font vertical alignment issue + +.fe { + line-height: inherit; +} diff --git a/explorer/src/scss/dashkit/_jumbotron.scss b/explorer/src/scss/dashkit/_jumbotron.scss index 023a35be88..08259faac7 100644 --- a/explorer/src/scss/dashkit/_jumbotron.scss +++ b/explorer/src/scss/dashkit/_jumbotron.scss @@ -1,15 +1,15 @@ -// -// jumbotron.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -.jumbotron { - padding: ($jumbotron-padding / 2); - @include media-breakpoint-up(sm) { - padding: $jumbotron-padding; - } -} \ No newline at end of file +// +// jumbotron.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.jumbotron { + padding: ($jumbotron-padding / 2); + @include media-breakpoint-up(sm) { + padding: $jumbotron-padding; + } +} diff --git a/explorer/src/scss/dashkit/_kanban.scss b/explorer/src/scss/dashkit/_kanban.scss index 160c535377..b44bbbdaef 100644 --- a/explorer/src/scss/dashkit/_kanban.scss +++ b/explorer/src/scss/dashkit/_kanban.scss @@ -1,68 +1,68 @@ -// -// kanban.scss -// Dashkit component -// - -// Container - -.container-fluid.kanban-container { - min-height: calc(100vh - 129px); -} - -.container.kanban-container { - min-height: calc(100vh - 129px - 69px); -} - -.kanban-container { - overflow-x: scroll; - -webkit-overflow-scrolling: touch; -} - -.kanban-container > .row { - flex-wrap: nowrap; -} - -.kanban-container > .row > [class*="col"] { - max-width: $kanban-col-width; -} - - -// Category - -.kanban-category { - min-height: 1rem; -} - - -// Item - -.kanban-item { - outline: none; - user-select: none; -} - -.kanban-item.draggable-source--is-dragging { - opacity: .2; -} - -.kanban-item.draggable-mirror { - z-index: $zindex-fixed; -} - -.card-body .kanban-item.draggable-mirror > .card { - transform: rotateZ(-3deg); -} - - -// Card - -.kanban-item > .card[data-toggle="modal"] { - cursor: pointer; -} - - -// Add form - -.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 -} +// +// kanban.scss +// Dashkit component +// + +// Container + +.container-fluid.kanban-container { + min-height: calc(100vh - 129px); +} + +.container.kanban-container { + min-height: calc(100vh - 129px - 69px); +} + +.kanban-container { + overflow-x: scroll; + -webkit-overflow-scrolling: touch; +} + +.kanban-container > .row { + flex-wrap: nowrap; +} + +.kanban-container > .row > [class*="col"] { + max-width: $kanban-col-width; +} + + +// Category + +.kanban-category { + min-height: 1rem; +} + + +// Item + +.kanban-item { + outline: none; + user-select: none; +} + +.kanban-item.draggable-source--is-dragging { + opacity: .2; +} + +.kanban-item.draggable-mirror { + z-index: $zindex-fixed; +} + +.card-body .kanban-item.draggable-mirror > .card { + transform: rotateZ(-3deg); +} + + +// Card + +.kanban-item > .card[data-toggle="modal"] { + cursor: pointer; +} + + +// Add form + +.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 +} diff --git a/explorer/src/scss/dashkit/_list-group.scss b/explorer/src/scss/dashkit/_list-group.scss index 073030725e..a805105f01 100644 --- a/explorer/src/scss/dashkit/_list-group.scss +++ b/explorer/src/scss/dashkit/_list-group.scss @@ -1,53 +1,53 @@ -// -// list-group.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -// Contextual variants -// -// Changing the Bootstrap color modifier classes to be full opacity background with yiq calculated font color - -@each $color, $value in $theme-colors { - @include list-group-item-variant($color, $value, color-yiq($value)); -} - - -// List group large - -.list-group-lg .list-group-item { - padding-top: $list-group-item-padding-y-lg; - padding-bottom: $list-group-item-padding-y-lg; -} - - -// List group flush - -.list-group-flush > .list-group-item { - padding-left: 0; - padding-right: 0; -} - - -// -// Dashkit =================================== -// - - -// Activity - -.list-group-activity .list-group-item { - border: 0; -} - -.list-group-activity .list-group-item:not(:last-child)::before { - content: ''; - position: absolute; - top: $list-group-item-padding-y; - left: $avatar-size-sm / 2; - height: 100%; - border-left: $border-width solid $border-color; -} +// +// list-group.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Contextual variants +// +// Changing the Bootstrap color modifier classes to be full opacity background with yiq calculated font color + +@each $color, $value in $theme-colors { + @include list-group-item-variant($color, $value, color-yiq($value)); +} + + +// List group large + +.list-group-lg .list-group-item { + padding-top: $list-group-item-padding-y-lg; + padding-bottom: $list-group-item-padding-y-lg; +} + + +// List group flush + +.list-group-flush > .list-group-item { + padding-left: 0; + padding-right: 0; +} + + +// +// Dashkit =================================== +// + + +// Activity + +.list-group-activity .list-group-item { + border: 0; +} + +.list-group-activity .list-group-item:not(:last-child)::before { + content: ''; + position: absolute; + top: $list-group-item-padding-y; + left: $avatar-size-sm / 2; + height: 100%; + border-left: $border-width solid $border-color; +} diff --git a/explorer/src/scss/dashkit/_main-content.scss b/explorer/src/scss/dashkit/_main-content.scss index a222946740..db1917700d 100644 --- a/explorer/src/scss/dashkit/_main-content.scss +++ b/explorer/src/scss/dashkit/_main-content.scss @@ -1,70 +1,70 @@ -// -// main-content.scss -// Dashkit component -// - -// Main content -// -// General styles - -.navbar-vertical:not([style*="display: none"]) ~ .main-content, -.navbar-vertical-sm:not([style*="display: none"]) ~ .main-content { - - .container, - .container-fluid { - - @include media-breakpoint-up(md) { - padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important; - padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important; - } - } -} - - -// Main content offset -// -// Offsets the main content depending on the sidebar positioning - -.navbar-vertical.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - &-#{$breakpoint} { - @include media-breakpoint-up(#{$breakpoint}) { - - // Left - - &.fixed-left:not([style*="display: none"]) ~ .main-content { - margin-left: $navbar-vertical-width; - } - - // Right - - &.fixed-right:not([style*="display: none"]) ~ .main-content { - margin-right: $navbar-vertical-width; - } - } - } - } -} - -.navbar-vertical-sm.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - &-#{$breakpoint} { - @include media-breakpoint-up(#{$breakpoint}) { - - // Left - - &.fixed-left:not([style*="display: none"]) ~ .main-content { - margin-left: $navbar-vertical-width-sm; - } - - // Right - - &.fixed-right:not([style*="display: none"]) ~ .main-content { - margin-right: $navbar-vertical-width-sm; - } - } - } - } -} \ No newline at end of file +// +// main-content.scss +// Dashkit component +// + +// Main content +// +// General styles + +.navbar-vertical:not([style*="display: none"]) ~ .main-content, +.navbar-vertical-sm:not([style*="display: none"]) ~ .main-content { + + .container, + .container-fluid { + + @include media-breakpoint-up(md) { + padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important; + padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important; + } + } +} + + +// Main content offset +// +// Offsets the main content depending on the sidebar positioning + +.navbar-vertical.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + &-#{$breakpoint} { + @include media-breakpoint-up(#{$breakpoint}) { + + // Left + + &.fixed-left:not([style*="display: none"]) ~ .main-content { + margin-left: $navbar-vertical-width; + } + + // Right + + &.fixed-right:not([style*="display: none"]) ~ .main-content { + margin-right: $navbar-vertical-width; + } + } + } + } +} + +.navbar-vertical-sm.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + &-#{$breakpoint} { + @include media-breakpoint-up(#{$breakpoint}) { + + // Left + + &.fixed-left:not([style*="display: none"]) ~ .main-content { + margin-left: $navbar-vertical-width-sm; + } + + // Right + + &.fixed-right:not([style*="display: none"]) ~ .main-content { + margin-right: $navbar-vertical-width-sm; + } + } + } + } +} diff --git a/explorer/src/scss/dashkit/_mixins.scss b/explorer/src/scss/dashkit/_mixins.scss index a1aaa707ce..c27eeb81e0 100644 --- a/explorer/src/scss/dashkit/_mixins.scss +++ b/explorer/src/scss/dashkit/_mixins.scss @@ -1,16 +1,16 @@ -// Mixins -// -// - -// Utilities -@import "mixins/breakpoints"; -@import "mixins/badge"; - -// Components -// ... - -// Skins -// ... - -// Layout -// ... \ No newline at end of file +// Mixins +// +// + +// Utilities +@import "mixins/breakpoints"; +@import "mixins/badge"; + +// Components +// ... + +// Skins +// ... + +// Layout +// ... diff --git a/explorer/src/scss/dashkit/_modal.scss b/explorer/src/scss/dashkit/_modal.scss index 0bca6a4d78..c94f2062b9 100644 --- a/explorer/src/scss/dashkit/_modal.scss +++ b/explorer/src/scss/dashkit/_modal.scss @@ -1,101 +1,101 @@ -// -// modal.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ======================= -// - -.modal-dialog { - - // When fading in the modal, animate it to slide down - .modal.fade & { - transform: translate(0, -150px); - } - - .modal.show & { - transform: translate(0, 0); - } -} - -.modal-header .close { - margin: -1.5rem -1.5rem -1.5rem auto; -} - - -// -// Dashkit =================================== -// - -// Modal dialog vertical -// -// Creates a vertically aligned version of the modal dialog - -.modal-dialog-vertical { - height: 100%; - max-width: $modal-dialog-vertical-width; - margin: 0; - - .modal-content { - height: inherit; - border-width: 0 $modal-content-border-width 0 0; - border-radius: 0; - } - - .modal-header { - border-radius: inherit; - } - - .modal-body { - height: inherit; - overflow-y: auto; - } -} - -.modal.fade .modal-dialog-vertical { - transform: translateX(-100%); -} - -.modal.show .modal-dialog-vertical { - transform: translateX(0); -} - - -// Positioning - -.modal.fixed-right { - padding-right: 0 !important; -} - -.modal.fixed-right .modal-dialog-vertical { - margin-left: auto; -} - -.modal.fixed-right.fade .modal-dialog-vertical { - transform: translateX(100%); -} - -.modal.fixed-right.show .modal-dialog-vertical { - transform: translateX(0); -} - - -// Modal card - -.modal-card { - margin-bottom: 0; - - .card-body { - max-height: $modal-card-body-max-height; - overflow-y: auto; - } -} - - -// Modal tabs - -.modal-header-tabs { - margin-top: -$modal-header-padding-y; - margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width}); -} +// +// modal.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ======================= +// + +.modal-dialog { + + // When fading in the modal, animate it to slide down + .modal.fade & { + transform: translate(0, -150px); + } + + .modal.show & { + transform: translate(0, 0); + } +} + +.modal-header .close { + margin: -1.5rem -1.5rem -1.5rem auto; +} + + +// +// Dashkit =================================== +// + +// Modal dialog vertical +// +// Creates a vertically aligned version of the modal dialog + +.modal-dialog-vertical { + height: 100%; + max-width: $modal-dialog-vertical-width; + margin: 0; + + .modal-content { + height: inherit; + border-width: 0 $modal-content-border-width 0 0; + border-radius: 0; + } + + .modal-header { + border-radius: inherit; + } + + .modal-body { + height: inherit; + overflow-y: auto; + } +} + +.modal.fade .modal-dialog-vertical { + transform: translateX(-100%); +} + +.modal.show .modal-dialog-vertical { + transform: translateX(0); +} + + +// Positioning + +.modal.fixed-right { + padding-right: 0 !important; +} + +.modal.fixed-right .modal-dialog-vertical { + margin-left: auto; +} + +.modal.fixed-right.fade .modal-dialog-vertical { + transform: translateX(100%); +} + +.modal.fixed-right.show .modal-dialog-vertical { + transform: translateX(0); +} + + +// Modal card + +.modal-card { + margin-bottom: 0; + + .card-body { + max-height: $modal-card-body-max-height; + overflow-y: auto; + } +} + + +// Modal tabs + +.modal-header-tabs { + margin-top: -$modal-header-padding-y; + margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width}); +} diff --git a/explorer/src/scss/dashkit/_nav.scss b/explorer/src/scss/dashkit/_nav.scss index 4f9e2af54f..0313cef6f4 100644 --- a/explorer/src/scss/dashkit/_nav.scss +++ b/explorer/src/scss/dashkit/_nav.scss @@ -1,112 +1,112 @@ -// -// nav.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -// Changing nav tabs to be bottom highlight style - -.nav-tabs { - - .nav-item { - margin-left: $nav-tabs-link-margin-x; - margin-right: $nav-tabs-link-margin-x; - } - - .nav-link { - padding: $nav-tabs-link-padding-y 0; - border-bottom: $nav-tabs-link-active-border-width solid transparent; - border-left-width: 0; - border-right-width: 0; - border-top-width: 0; - - &:not(.active) { - color: $gray-600; - - &:hover { - color: $gray-700; - } - } - - } - - .nav-item:first-child { - margin-left: 0; - } - - .nav-item:last-child { - margin-right: 0; - } - - // Removes the primary color underline from dropdowns in .nav-tabs - .nav-item.show .nav-link { - border-color: transparent; - } - -} - - -// -// Dashkit ===================================== -// - -// Nav overflow -// -// Allow links to overflow and make horizontally scrollable - -.nav-overflow { - display: flex; - flex-wrap: nowrap; - overflow-x: auto; - padding-bottom: 1px; // to prevent active links border bottom from hiding - - // Hide scrollbar - - &::-webkit-scrollbar { - display: none; - } -} - - -// Creates a small version of the .nav-tabs - -.nav-tabs-sm { - font-size: $nav-tabs-sm-font-size; - - .nav-item { - margin-left: $nav-tabs-sm-link-margin-x; - margin-right: $nav-tabs-sm-link-margin-x; - } - - .nav-link { - // 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-bottom: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y); - } -} - -// Creates a small version of the .nab - -.nav-sm { - - .nav-link { - font-size: $font-size-sm; - } -} - - -// Nav + button group -// -// Change the look of .btn-white when .active - -.nav.btn-group { - - .btn-white.active { - background-color: $primary; - border-color: $primary; - color: $white; - } -} \ No newline at end of file +// +// nav.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Changing nav tabs to be bottom highlight style + +.nav-tabs { + + .nav-item { + margin-left: $nav-tabs-link-margin-x; + margin-right: $nav-tabs-link-margin-x; + } + + .nav-link { + padding: $nav-tabs-link-padding-y 0; + border-bottom: $nav-tabs-link-active-border-width solid transparent; + border-left-width: 0; + border-right-width: 0; + border-top-width: 0; + + &:not(.active) { + color: $gray-600; + + &:hover { + color: $gray-700; + } + } + + } + + .nav-item:first-child { + margin-left: 0; + } + + .nav-item:last-child { + margin-right: 0; + } + + // Removes the primary color underline from dropdowns in .nav-tabs + .nav-item.show .nav-link { + border-color: transparent; + } + +} + + +// +// Dashkit ===================================== +// + +// Nav overflow +// +// Allow links to overflow and make horizontally scrollable + +.nav-overflow { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + padding-bottom: 1px; // to prevent active links border bottom from hiding + + // Hide scrollbar + + &::-webkit-scrollbar { + display: none; + } +} + + +// Creates a small version of the .nav-tabs + +.nav-tabs-sm { + font-size: $nav-tabs-sm-font-size; + + .nav-item { + margin-left: $nav-tabs-sm-link-margin-x; + margin-right: $nav-tabs-sm-link-margin-x; + } + + .nav-link { + // 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-bottom: (($font-size-base / $nav-tabs-sm-font-size) * $nav-tabs-link-padding-y); + } +} + +// Creates a small version of the .nab + +.nav-sm { + + .nav-link { + font-size: $font-size-sm; + } +} + + +// Nav + button group +// +// Change the look of .btn-white when .active + +.nav.btn-group { + + .btn-white.active { + background-color: $primary; + border-color: $primary; + color: $white; + } +} diff --git a/explorer/src/scss/dashkit/_navbar.scss b/explorer/src/scss/dashkit/_navbar.scss index efef6c971d..c248b2ef66 100644 --- a/explorer/src/scss/dashkit/_navbar.scss +++ b/explorer/src/scss/dashkit/_navbar.scss @@ -1,722 +1,722 @@ -// -// navbar.scss -// Extended from Bootstrap -// - - -// -// Bootstrap Overrides ======================= -// - -.navbar { - border-width: 0 0 $border-width 0; - border-style: solid; -} - - -// Navbar dark - -.navbar-dark { - background-color: $navbar-dark-bg; - border-color: $navbar-dark-border-color; -} - -.navbar-dark .navbar-heading { - color: $navbar-dark-heading-color; -} - -.navbar-dark .navbar-divider { - border-color: $navbar-dark-divider-color; -} - -.navbar-dark .navbar-user { - border-top-color: $navbar-dark-divider-color; -} - -.navbar-dark .navbar-user-link { - color: $navbar-dark-color; - - @include hover-focus { - color: $navbar-dark-hover-color; - } -} - -.navbar-dark .navbar-brand { - filter: $navbar-dark-brand-filter; -} - -.navbar-dark .navbar-collapse::before { - border-top-color: $navbar-dark-divider-color; -} - -.navbar-dark.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - $prev: breakpoint-prev($breakpoint, $grid-breakpoints); - - &-#{$breakpoint} { - - @include media-breakpoint-down(#{$prev}) { - - .navbar-nav .dropdown-item { - color: $navbar-dark-color; - - @include hover-focus { - color: $navbar-dark-hover-color; - } - } - - .navbar-nav .show > .nav-link, - .navbar-nav .dropdown-item.active, - .navbar-nav .dropdown-item:active { - color: $navbar-dark-active-color; - } - } - } - } -} - - -// Navbar vibrant - -.navbar-dark.navbar-vibrant { - background-image: linear-gradient(to bottom right, fade-out(#126FEB, .1), fade-out(#7203E1, .1)), url(#{$path-to-img}/covers/sidebar-cover.jpg); - background-repeat: no-repeat, no-repeat; - background-position: center center, center center; - background-size: cover, cover; - background-origin: border-box; - border-color: $navbar-vibrant-border-color; - - @include media-breakpoint-down(sm) { - background-attachment: fixed, fixed; - } -} - -.navbar-dark.navbar-vibrant .nav-link { - color: $navbar-vibrant-color; - - @include hover-focus { - color: $navbar-vibrant-hover-color; - } -} - -.navbar-dark.navbar-vibrant .nav-item.active .nav-link, -.navbar-dark.navbar-vibrant .nav-item .nav-link.active { - color: $navbar-vibrant-active-color; -} - -.navbar-dark.navbar-vibrant .navbar-heading { - color: $navbar-vibrant-heading-color; -} - -.navbar-dark.navbar-vibrant .navbar-divider { - border-color: $navbar-vibrant-divider-color; -} - -.navbar-dark.navbar-vibrant .navbar-user { - border-top-color: $navbar-vibrant-divider-color; -} - -.navbar-dark.navbar-vibrant .navbar-user-link { - color: $navbar-vibrant-color; - - @include hover-focus { - color: $navbar-vibrant-hover-color; - } -} - -.navbar-dark.navbar-vibrant .navbar-brand { - filter: $navbar-vibrant-brand-filter; -} - -.navbar-dark.navbar-vibrant .navbar-collapse::before { - border-top-color: $navbar-vibrant-divider-color; -} - -.navbar-dark.navbar-vibrant .navbar-nav .nav-link.active::before { - border-color: $white; -} - -.navbar-dark.navbar-vibrant.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - $prev: breakpoint-prev($breakpoint, $grid-breakpoints); - - &-#{$breakpoint} { - - @include media-breakpoint-down(#{$prev}) { - - .navbar-nav .dropdown-item { - color: $navbar-vibrant-color; - - @include hover-focus { - color: $navbar-vibrant-hover-color; - } - } - - .navbar-nav .show > .nav-link, - .navbar-nav .dropdown-item.active, - .navbar-nav .dropdown-item:active { - color: $navbar-vibrant-active-color; - } - - } - } - } -} - -.navbar-dark.navbar-vibrant .navbar-toggler-icon { - background-image: $navbar-vibrant-toggler-icon-bg; -} - - -// Navbar light - -.navbar-light { - background-color: $navbar-light-bg; - border-color: $navbar-light-border-color; -} - -.navbar-light .navbar-heading { - color: $navbar-light-heading-color; -} - -.navbar-light .navbar-divider { - border-color: $navbar-light-divider-color; -} - -.navbar-light .navbar-user { - border-top-color: $navbar-light-divider-color; -} - -.navbar-light .navbar-user-link { - color: $navbar-light-color; - - @include hover-focus { - color: $navbar-light-hover-color; - } -} - -.navbar-light .navbar-brand { - filter: $navbar-light-brand-filter; -} - -.navbar-light .navbar-collapse::before { - border-top-color: $navbar-light-divider-color; -} - - -// Navbar brand - -.navbar-brand { - margin-right: 0; -} - -.navbar-brand-img, -.navbar-brand > img { - max-width: 100%; - max-height: 1.5rem; -} - - -// Navbar collapse - -.navbar-collapse { - margin-left: -$navbar-padding-x; - margin-right: -$navbar-padding-x; - padding-left: $navbar-padding-x; - padding-right: $navbar-padding-x; - - // Spacer to replace margin / padding as those - // cause .navbar-collapse to "jump" when collapsing - &:before { - content: ''; - display: block; - border-top-width: $border-width; - border-top-style: solid; - margin: $navbar-padding-y (-$navbar-padding-x); - } -} - - -// Navbar navigaton - -.navbar-nav { - margin-left: -$navbar-padding-x; - margin-right: -$navbar-padding-x; -} - -.navbar-nav .nav-link { - padding-left: $navbar-padding-x; - padding-right: $navbar-padding-x; - - &.active { - position: relative; - - &:before { - content: ''; - position: absolute; - left: 0; - top: $nav-link-padding-y; - bottom: $nav-link-padding-y; - border-left: 2px solid $primary; - } - } -} - - -// Navbar icons - -.navbar-nav .nav-link > .fe { - min-width: $navbar-icon-min-width; - padding-bottom: .125em; - font-size: $font-size-lg; - line-height: ($font-size-base * $line-height-base); -} - - -// Navbar dropdowns - -.navbar-nav .dropdown-menu { - border: none; -} - -.navbar-nav .dropdown-menu .dropdown-menu { - margin-left: $dropdown-item-padding-x / 2; -} - -.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - $prev: breakpoint-prev($breakpoint, $grid-breakpoints); - - &-#{$breakpoint} { - - @include media-breakpoint-down(#{$prev}) { - - .navbar-nav .dropdown-menu { - background-color: transparent; - } - } - } - } -} - - -// Expanded -// -// Expanded navbar specific styles - -.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - - &-#{$breakpoint} { - - @include media-breakpoint-up(#{$breakpoint}) { - padding-left: 0; - padding-right: 0; - - > [class*="container"] { - padding-left: 0; - padding-right: 0; - } - - .navbar-collapse { - flex-grow: inherit; - - &:before { - display: none; - } - } - - .navbar-nav { - margin-left: 0; - margin-right: 0; - } - - .navbar-nav .nav-link { - - // Increase $nav-link-padding-y value to align the underline - // with the bottom of the navbar - padding: .625rem $navbar-nav-link-padding-x; - - &.active { - position: relative; - - &:before { - top: auto; - bottom: calc(-#{$navbar-padding-y} - #{$border-width}); - right: $navbar-nav-link-padding-x; - left: $navbar-nav-link-padding-x; - border-left: 0; - border-bottom: 1px solid $primary; - } - } - } - - // Toggle dropdown on hover - @if ($navbar-dropdown-toggle-on-hover) { - .dropup, .dropright, .dropdown, .dropleft { - - @include hover { - - > .dropdown-menu { - display: block; - } - } - } - } - - .navbar-nav .dropdown-menu { - border: $dropdown-border-width solid $dropdown-border-color; - } - - .navbar-nav .dropdown-menu .dropdown-menu { - margin-left: 0; - } - } - } - } -} - - -// -// Dashkit =================================== -// - -// Navbar fixed -// -// Adds special zindex to custom fixed-left and fixed-right classes - -.navbar[class*="fixed-"] { - z-index: $zindex-fixed; -} - - -// Navbar overflow -// -// Allows the navbar navigation overflow its parent container -// horizontally - -.navbar-overflow { - display: flex; - flex-grow: 1; - flex-basis: 0; - margin-bottom: -$navbar-padding-y; - overflow-x: auto; - - // Hide scrollbar - &::-webkit-scrollbar { - display: none; - } -} - -.navbar-overflow .navbar-nav { - flex-direction: row; - flex-wrap: nowrap; - margin-left: -$navbar-nav-link-padding-x; - margin-right: -$navbar-nav-link-padding-x; -} - -.navbar-overflow .navbar-nav .nav-link { - padding-bottom: ($nav-link-padding-y + $navbar-padding-y); - - &.active { - - &:before { - bottom: 0; - } - } -} - - -// Navbar breadcrumb -// -// Applies special paddings to the navbar breadcrumb - -.navbar-breadcrumb { - padding: $navbar-breadcrumb-padding-y $navbar-breadcrumb-padding-x; -} - - -// Navbar user -// -// Navbar user notification area - -.navbar-user { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; -} - -.navbar-user .dropdown-toggle { - - // Remove the default dropdown arrow - &:after { - display: none; - } -} - - -// Navbar link icon - -.navbar-nav .nav-link > .fe { - display: inline-block; - min-width: $navbar-icon-min-width; -} - - -// Vertical -// -// Creates a vertically aligned version of the navbar - -.navbar-vertical { - - .navbar-nav .nav-link { - display: flex; - align-items: center; - } - - .navbar-nav .nav-link[data-toggle="collapse"] { - - &:after { - display: block; - content: '\e92e'; - font-family: 'Feather'; - margin-left: auto; - transition: transform .2s; - } - - // Expanded - &[aria-expanded="true"] { - - &:after { - transform: rotate(-180deg); - } - } - } - - .navbar-nav .nav .nav-link { - padding-left: $navbar-padding-x + $navbar-icon-min-width; - } - - .navbar-nav .nav .nav .nav-link { - padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width; - } - - .navbar-nav .nav .nav .nav .nav-link { - padding-left: $navbar-padding-x * 2 + $navbar-icon-min-width; - } - - .navbar-heading { - padding-top: $nav-link-padding-y; - padding-bottom: $nav-link-padding-y; - font-size: $font-size-xs; - text-transform: uppercase; - letter-spacing: .04em; - } - - - // Expanded - // - // Expanded navbar specific styles - - &.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - - &-#{$breakpoint} { - - @include media-breakpoint-up(#{$breakpoint}) { - display: block; - position: fixed; - top: 0; - bottom: 0; - width: 100%; - max-width: $navbar-vertical-width; - padding-left: $navbar-vertical-padding-x; - padding-right: $navbar-vertical-padding-x; - overflow-y: auto; - - > [class*="container"] { - flex-direction: column; - align-items: stretch; - min-height: 100%; - padding-left: 0; - padding-right: 0; - - // Target IE 10 & 11 - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - min-height: none; - height: 100%; - } - } - - &.fixed-left { - left: 0; - border-width: 0 1px 0 0; - } - - &.fixed-right { - right: 0; - border-width: 0 0 0 1px; - } - - .navbar-collapse { - flex: 1; - display: flex; - flex-direction: column; - align-items: stretch; - margin-left: -$navbar-vertical-padding-x; - margin-right: -$navbar-vertical-padding-x; - padding-left: $navbar-vertical-padding-x; - padding-right: $navbar-vertical-padding-x; - - > * { - min-width: 100%; - } - } - - .navbar-nav { - flex-direction: column; - margin-left: -$navbar-vertical-padding-x; - margin-right: -$navbar-vertical-padding-x; - } - - .navbar-nav .nav-link { - padding: $nav-link-padding-y $navbar-vertical-padding-x; - - &.active { - - &:before { - top: $nav-link-padding-y; - bottom: $nav-link-padding-y; - left: 0; - right: auto; - border-left: 2px solid $primary; - border-bottom: 0; - } - } - } - - .navbar-nav .nav .nav-link { - padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width; - } - - .navbar-nav .nav .nav .nav-link { - padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width; - } - - .navbar-nav .nav .nav .nav .nav-link { - padding-left: $navbar-vertical-padding-x * 2 + $navbar-icon-min-width; - } - - .navbar-brand { - display: block; - text-align: center; - padding-top: (2rem - $navbar-padding-y); - padding-bottom: (2rem - $navbar-padding-y); - } - - .navbar-brand-img { - max-height: 3rem; - } - - .navbar-user { - margin-left: -$navbar-vertical-padding-x; - margin-right: -$navbar-vertical-padding-x; - padding-top: $spacer; - padding-bottom: $spacer - $navbar-padding-y; - padding-left: $navbar-vertical-padding-x; - padding-right: $navbar-vertical-padding-x; - border-top-width: 1px; - border-top-style: solid; - - .dropup .dropdown-menu { - left: 50%; - transform: translateX(-50%); - } - } - } - } - } - } -} - - -// Vertical small -// -// Creates a small vertion of the vertical navbar - -.navbar-vertical-sm { - - // Expanded - // - // Expanded navbar specific styles - - &.navbar-expand { - - @each $breakpoint, $value in $grid-breakpoints { - - &-#{$breakpoint} { - - @include media-breakpoint-up(#{$breakpoint}) { - max-width: $navbar-vertical-width-sm; - padding-left: $navbar-vertical-padding-x-sm; - padding-right: $navbar-vertical-padding-x-sm; - overflow: visible; - - .navbar-brand { - padding-top: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2 - $navbar-padding-y; - padding-bottom: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2; - } - - .navbar-brand-img { - width: auto; - max-height: 1.5rem; - } - - .navbar-collapse { - margin-left: -$navbar-vertical-padding-x-sm; - margin-right: -$navbar-vertical-padding-x-sm; - padding-left: $navbar-vertical-padding-x-sm; - padding-right: $navbar-vertical-padding-x-sm; - } - - .navbar-nav { - margin-left: -$navbar-vertical-padding-x-sm; - margin-right: -$navbar-vertical-padding-x-sm; - } - - .navbar-nav > .nav-item > .nav-link { - justify-content: center; - padding-left: $navbar-vertical-padding-x-sm; - padding-right: $navbar-vertical-padding-x-sm; - text-align: center; - } - - .navbar-nav > .nav-item > .dropdown-toggle { - - &::after { - display: none; - } - } - - .navbar-user { - margin-left: -$navbar-vertical-padding-x-sm; - margin-right: -$navbar-vertical-padding-x-sm; - padding-left: $navbar-vertical-padding-x-sm; - padding-right: $navbar-vertical-padding-x-sm; - } - - .navbar-user .dropright .dropdown-menu { - top: auto; - bottom: 0; - } - } - } - } - } -} +// +// navbar.scss +// Extended from Bootstrap +// + + +// +// Bootstrap Overrides ======================= +// + +.navbar { + border-width: 0 0 $border-width 0; + border-style: solid; +} + + +// Navbar dark + +.navbar-dark { + background-color: $navbar-dark-bg; + border-color: $navbar-dark-border-color; +} + +.navbar-dark .navbar-heading { + color: $navbar-dark-heading-color; +} + +.navbar-dark .navbar-divider { + border-color: $navbar-dark-divider-color; +} + +.navbar-dark .navbar-user { + border-top-color: $navbar-dark-divider-color; +} + +.navbar-dark .navbar-user-link { + color: $navbar-dark-color; + + @include hover-focus { + color: $navbar-dark-hover-color; + } +} + +.navbar-dark .navbar-brand { + filter: $navbar-dark-brand-filter; +} + +.navbar-dark .navbar-collapse::before { + border-top-color: $navbar-dark-divider-color; +} + +.navbar-dark.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + + @include media-breakpoint-down(#{$prev}) { + + .navbar-nav .dropdown-item { + color: $navbar-dark-color; + + @include hover-focus { + color: $navbar-dark-hover-color; + } + } + + .navbar-nav .show > .nav-link, + .navbar-nav .dropdown-item.active, + .navbar-nav .dropdown-item:active { + color: $navbar-dark-active-color; + } + } + } + } +} + + +// Navbar vibrant + +.navbar-dark.navbar-vibrant { + background-image: linear-gradient(to bottom right, fade-out(#126FEB, .1), fade-out(#7203E1, .1)), url(#{$path-to-img}/covers/sidebar-cover.jpg); + background-repeat: no-repeat, no-repeat; + background-position: center center, center center; + background-size: cover, cover; + background-origin: border-box; + border-color: $navbar-vibrant-border-color; + + @include media-breakpoint-down(sm) { + background-attachment: fixed, fixed; + } +} + +.navbar-dark.navbar-vibrant .nav-link { + color: $navbar-vibrant-color; + + @include hover-focus { + color: $navbar-vibrant-hover-color; + } +} + +.navbar-dark.navbar-vibrant .nav-item.active .nav-link, +.navbar-dark.navbar-vibrant .nav-item .nav-link.active { + color: $navbar-vibrant-active-color; +} + +.navbar-dark.navbar-vibrant .navbar-heading { + color: $navbar-vibrant-heading-color; +} + +.navbar-dark.navbar-vibrant .navbar-divider { + border-color: $navbar-vibrant-divider-color; +} + +.navbar-dark.navbar-vibrant .navbar-user { + border-top-color: $navbar-vibrant-divider-color; +} + +.navbar-dark.navbar-vibrant .navbar-user-link { + color: $navbar-vibrant-color; + + @include hover-focus { + color: $navbar-vibrant-hover-color; + } +} + +.navbar-dark.navbar-vibrant .navbar-brand { + filter: $navbar-vibrant-brand-filter; +} + +.navbar-dark.navbar-vibrant .navbar-collapse::before { + border-top-color: $navbar-vibrant-divider-color; +} + +.navbar-dark.navbar-vibrant .navbar-nav .nav-link.active::before { + border-color: $white; +} + +.navbar-dark.navbar-vibrant.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + + @include media-breakpoint-down(#{$prev}) { + + .navbar-nav .dropdown-item { + color: $navbar-vibrant-color; + + @include hover-focus { + color: $navbar-vibrant-hover-color; + } + } + + .navbar-nav .show > .nav-link, + .navbar-nav .dropdown-item.active, + .navbar-nav .dropdown-item:active { + color: $navbar-vibrant-active-color; + } + + } + } + } +} + +.navbar-dark.navbar-vibrant .navbar-toggler-icon { + background-image: $navbar-vibrant-toggler-icon-bg; +} + + +// Navbar light + +.navbar-light { + background-color: $navbar-light-bg; + border-color: $navbar-light-border-color; +} + +.navbar-light .navbar-heading { + color: $navbar-light-heading-color; +} + +.navbar-light .navbar-divider { + border-color: $navbar-light-divider-color; +} + +.navbar-light .navbar-user { + border-top-color: $navbar-light-divider-color; +} + +.navbar-light .navbar-user-link { + color: $navbar-light-color; + + @include hover-focus { + color: $navbar-light-hover-color; + } +} + +.navbar-light .navbar-brand { + filter: $navbar-light-brand-filter; +} + +.navbar-light .navbar-collapse::before { + border-top-color: $navbar-light-divider-color; +} + + +// Navbar brand + +.navbar-brand { + margin-right: 0; +} + +.navbar-brand-img, +.navbar-brand > img { + max-width: 100%; + max-height: 1.5rem; +} + + +// Navbar collapse + +.navbar-collapse { + margin-left: -$navbar-padding-x; + margin-right: -$navbar-padding-x; + padding-left: $navbar-padding-x; + padding-right: $navbar-padding-x; + + // Spacer to replace margin / padding as those + // cause .navbar-collapse to "jump" when collapsing + &:before { + content: ''; + display: block; + border-top-width: $border-width; + border-top-style: solid; + margin: $navbar-padding-y (-$navbar-padding-x); + } +} + + +// Navbar navigaton + +.navbar-nav { + margin-left: -$navbar-padding-x; + margin-right: -$navbar-padding-x; +} + +.navbar-nav .nav-link { + padding-left: $navbar-padding-x; + padding-right: $navbar-padding-x; + + &.active { + position: relative; + + &:before { + content: ''; + position: absolute; + left: 0; + top: $nav-link-padding-y; + bottom: $nav-link-padding-y; + border-left: 2px solid $primary; + } + } +} + + +// Navbar icons + +.navbar-nav .nav-link > .fe { + min-width: $navbar-icon-min-width; + padding-bottom: .125em; + font-size: $font-size-lg; + line-height: ($font-size-base * $line-height-base); +} + + +// Navbar dropdowns + +.navbar-nav .dropdown-menu { + border: none; +} + +.navbar-nav .dropdown-menu .dropdown-menu { + margin-left: $dropdown-item-padding-x / 2; +} + +.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + + @include media-breakpoint-down(#{$prev}) { + + .navbar-nav .dropdown-menu { + background-color: transparent; + } + } + } + } +} + + +// Expanded +// +// Expanded navbar specific styles + +.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + padding-left: 0; + padding-right: 0; + + > [class*="container"] { + padding-left: 0; + padding-right: 0; + } + + .navbar-collapse { + flex-grow: inherit; + + &:before { + display: none; + } + } + + .navbar-nav { + margin-left: 0; + margin-right: 0; + } + + .navbar-nav .nav-link { + + // Increase $nav-link-padding-y value to align the underline + // with the bottom of the navbar + padding: .625rem $navbar-nav-link-padding-x; + + &.active { + position: relative; + + &:before { + top: auto; + bottom: calc(-#{$navbar-padding-y} - #{$border-width}); + right: $navbar-nav-link-padding-x; + left: $navbar-nav-link-padding-x; + border-left: 0; + border-bottom: 1px solid $primary; + } + } + } + + // Toggle dropdown on hover + @if ($navbar-dropdown-toggle-on-hover) { + .dropup, .dropright, .dropdown, .dropleft { + + @include hover { + + > .dropdown-menu { + display: block; + } + } + } + } + + .navbar-nav .dropdown-menu { + border: $dropdown-border-width solid $dropdown-border-color; + } + + .navbar-nav .dropdown-menu .dropdown-menu { + margin-left: 0; + } + } + } + } +} + + +// +// Dashkit =================================== +// + +// Navbar fixed +// +// Adds special zindex to custom fixed-left and fixed-right classes + +.navbar[class*="fixed-"] { + z-index: $zindex-fixed; +} + + +// Navbar overflow +// +// Allows the navbar navigation overflow its parent container +// horizontally + +.navbar-overflow { + display: flex; + flex-grow: 1; + flex-basis: 0; + margin-bottom: -$navbar-padding-y; + overflow-x: auto; + + // Hide scrollbar + &::-webkit-scrollbar { + display: none; + } +} + +.navbar-overflow .navbar-nav { + flex-direction: row; + flex-wrap: nowrap; + margin-left: -$navbar-nav-link-padding-x; + margin-right: -$navbar-nav-link-padding-x; +} + +.navbar-overflow .navbar-nav .nav-link { + padding-bottom: ($nav-link-padding-y + $navbar-padding-y); + + &.active { + + &:before { + bottom: 0; + } + } +} + + +// Navbar breadcrumb +// +// Applies special paddings to the navbar breadcrumb + +.navbar-breadcrumb { + padding: $navbar-breadcrumb-padding-y $navbar-breadcrumb-padding-x; +} + + +// Navbar user +// +// Navbar user notification area + +.navbar-user { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.navbar-user .dropdown-toggle { + + // Remove the default dropdown arrow + &:after { + display: none; + } +} + + +// Navbar link icon + +.navbar-nav .nav-link > .fe { + display: inline-block; + min-width: $navbar-icon-min-width; +} + + +// Vertical +// +// Creates a vertically aligned version of the navbar + +.navbar-vertical { + + .navbar-nav .nav-link { + display: flex; + align-items: center; + } + + .navbar-nav .nav-link[data-toggle="collapse"] { + + &:after { + display: block; + content: '\e92e'; + font-family: 'Feather'; + margin-left: auto; + transition: transform .2s; + } + + // Expanded + &[aria-expanded="true"] { + + &:after { + transform: rotate(-180deg); + } + } + } + + .navbar-nav .nav .nav-link { + padding-left: $navbar-padding-x + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav-link { + padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav .nav-link { + padding-left: $navbar-padding-x * 2 + $navbar-icon-min-width; + } + + .navbar-heading { + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; + font-size: $font-size-xs; + text-transform: uppercase; + letter-spacing: .04em; + } + + + // Expanded + // + // Expanded navbar specific styles + + &.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + display: block; + position: fixed; + top: 0; + bottom: 0; + width: 100%; + max-width: $navbar-vertical-width; + padding-left: $navbar-vertical-padding-x; + padding-right: $navbar-vertical-padding-x; + overflow-y: auto; + + > [class*="container"] { + flex-direction: column; + align-items: stretch; + min-height: 100%; + padding-left: 0; + padding-right: 0; + + // Target IE 10 & 11 + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + min-height: none; + height: 100%; + } + } + + &.fixed-left { + left: 0; + border-width: 0 1px 0 0; + } + + &.fixed-right { + right: 0; + border-width: 0 0 0 1px; + } + + .navbar-collapse { + flex: 1; + display: flex; + flex-direction: column; + align-items: stretch; + margin-left: -$navbar-vertical-padding-x; + margin-right: -$navbar-vertical-padding-x; + padding-left: $navbar-vertical-padding-x; + padding-right: $navbar-vertical-padding-x; + + > * { + min-width: 100%; + } + } + + .navbar-nav { + flex-direction: column; + margin-left: -$navbar-vertical-padding-x; + margin-right: -$navbar-vertical-padding-x; + } + + .navbar-nav .nav-link { + padding: $nav-link-padding-y $navbar-vertical-padding-x; + + &.active { + + &:before { + top: $nav-link-padding-y; + bottom: $nav-link-padding-y; + left: 0; + right: auto; + border-left: 2px solid $primary; + border-bottom: 0; + } + } + } + + .navbar-nav .nav .nav-link { + padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav-link { + padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width; + } + + .navbar-nav .nav .nav .nav .nav-link { + padding-left: $navbar-vertical-padding-x * 2 + $navbar-icon-min-width; + } + + .navbar-brand { + display: block; + text-align: center; + padding-top: (2rem - $navbar-padding-y); + padding-bottom: (2rem - $navbar-padding-y); + } + + .navbar-brand-img { + max-height: 3rem; + } + + .navbar-user { + margin-left: -$navbar-vertical-padding-x; + margin-right: -$navbar-vertical-padding-x; + padding-top: $spacer; + padding-bottom: $spacer - $navbar-padding-y; + padding-left: $navbar-vertical-padding-x; + padding-right: $navbar-vertical-padding-x; + border-top-width: 1px; + border-top-style: solid; + + .dropup .dropdown-menu { + left: 50%; + transform: translateX(-50%); + } + } + } + } + } + } +} + + +// Vertical small +// +// Creates a small vertion of the vertical navbar + +.navbar-vertical-sm { + + // Expanded + // + // Expanded navbar specific styles + + &.navbar-expand { + + @each $breakpoint, $value in $grid-breakpoints { + + &-#{$breakpoint} { + + @include media-breakpoint-up(#{$breakpoint}) { + max-width: $navbar-vertical-width-sm; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + overflow: visible; + + .navbar-brand { + padding-top: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2 - $navbar-padding-y; + padding-bottom: ($nav-link-padding-y * 2 + $font-size-base * $line-height-base) / 2; + } + + .navbar-brand-img { + width: auto; + max-height: 1.5rem; + } + + .navbar-collapse { + margin-left: -$navbar-vertical-padding-x-sm; + margin-right: -$navbar-vertical-padding-x-sm; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + } + + .navbar-nav { + margin-left: -$navbar-vertical-padding-x-sm; + margin-right: -$navbar-vertical-padding-x-sm; + } + + .navbar-nav > .nav-item > .nav-link { + justify-content: center; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + text-align: center; + } + + .navbar-nav > .nav-item > .dropdown-toggle { + + &::after { + display: none; + } + } + + .navbar-user { + margin-left: -$navbar-vertical-padding-x-sm; + margin-right: -$navbar-vertical-padding-x-sm; + padding-left: $navbar-vertical-padding-x-sm; + padding-right: $navbar-vertical-padding-x-sm; + } + + .navbar-user .dropright .dropdown-menu { + top: auto; + bottom: 0; + } + } + } + } + } +} diff --git a/explorer/src/scss/dashkit/_popover.scss b/explorer/src/scss/dashkit/_popover.scss index dfbbc2b0ff..71e244f7af 100644 --- a/explorer/src/scss/dashkit/_popover.scss +++ b/explorer/src/scss/dashkit/_popover.scss @@ -1,101 +1,101 @@ -// -// popover.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -.popover { - padding: $popover-padding-y $popover-padding-x; - - &:hover { - visibility: visible !important; - } -} - -.popover-header { - margin-bottom: $popover-header-margin-bottom; - border-bottom: 0; -} - -.popover-body-label { - margin-left: .25rem; -} - -.popover-body-value { - margin-left: .25rem; -} - -.popover-body-indicator { - display: inline-block; - width: .5rem; - height: .5rem; - border-radius: 50%; -} - - -// Large - -.popover-lg { - max-width: $popover-lg-max-width; -} - - -// Dark - -.popover-dark { - background-color: $popover-dark-bg; - border-color: $popover-dark-border-color; -} - -.popover-dark .popover-header { - font-weight: $font-weight-normal; - background-color: $popover-dark-header-bg; - color: $popover-dark-header-color; -} - -.popover-dark.bs-popover-top .arrow { - - &::before { - border-top-color: $popover-dark-border-color; - } - - &::after { - border-top-color: $popover-dark-bg; - } -} - -.popover-dark.bs-popover-right .arrow { - - &::before { - border-right-color: $popover-dark-border-color; - } - - &::after { - border-right-color: $popover-dark-bg; - } -} - -.popover-dark.bs-popover-bottom .arrow { - - &::before { - border-bottom-color: $popover-dark-border-color; - } - - &::after { - border-bottom-color: $popover-dark-bg; - } -} - -.popover-dark.bs-popover-left .arrow { - - &::before { - border-left-color: $popover-dark-border-color; - } - - &::after { - border-left-color: $popover-dark-bg; - } -} +// +// popover.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.popover { + padding: $popover-padding-y $popover-padding-x; + + &:hover { + visibility: visible !important; + } +} + +.popover-header { + margin-bottom: $popover-header-margin-bottom; + border-bottom: 0; +} + +.popover-body-label { + margin-left: .25rem; +} + +.popover-body-value { + margin-left: .25rem; +} + +.popover-body-indicator { + display: inline-block; + width: .5rem; + height: .5rem; + border-radius: 50%; +} + + +// Large + +.popover-lg { + max-width: $popover-lg-max-width; +} + + +// Dark + +.popover-dark { + background-color: $popover-dark-bg; + border-color: $popover-dark-border-color; +} + +.popover-dark .popover-header { + font-weight: $font-weight-normal; + background-color: $popover-dark-header-bg; + color: $popover-dark-header-color; +} + +.popover-dark.bs-popover-top .arrow { + + &::before { + border-top-color: $popover-dark-border-color; + } + + &::after { + border-top-color: $popover-dark-bg; + } +} + +.popover-dark.bs-popover-right .arrow { + + &::before { + border-right-color: $popover-dark-border-color; + } + + &::after { + border-right-color: $popover-dark-bg; + } +} + +.popover-dark.bs-popover-bottom .arrow { + + &::before { + border-bottom-color: $popover-dark-border-color; + } + + &::after { + border-bottom-color: $popover-dark-bg; + } +} + +.popover-dark.bs-popover-left .arrow { + + &::before { + border-left-color: $popover-dark-border-color; + } + + &::after { + border-left-color: $popover-dark-bg; + } +} diff --git a/explorer/src/scss/dashkit/_progress.scss b/explorer/src/scss/dashkit/_progress.scss index 00a9caf1a7..30481fed30 100644 --- a/explorer/src/scss/dashkit/_progress.scss +++ b/explorer/src/scss/dashkit/_progress.scss @@ -1,27 +1,27 @@ -// -// progress.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -// Rounds the progress bar, even for "multiple bar" progress bars -.progress-bar:first-child { - border-top-left-radius: $progress-border-radius; - border-bottom-left-radius: $progress-border-radius; -} -.progress-bar:last-child { - border-top-right-radius: $progress-border-radius; - border-bottom-right-radius: $progress-border-radius; -} - - -// -// Dashkit =================================== -// - -.progress-sm { - height: $progress-height-sm; -} \ No newline at end of file +// +// progress.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +// Rounds the progress bar, even for "multiple bar" progress bars +.progress-bar:first-child { + border-top-left-radius: $progress-border-radius; + border-bottom-left-radius: $progress-border-radius; +} +.progress-bar:last-child { + border-top-right-radius: $progress-border-radius; + border-bottom-right-radius: $progress-border-radius; +} + + +// +// Dashkit =================================== +// + +.progress-sm { + height: $progress-height-sm; +} diff --git a/explorer/src/scss/dashkit/_reboot.scss b/explorer/src/scss/dashkit/_reboot.scss index a5f8a0e351..be773b374c 100644 --- a/explorer/src/scss/dashkit/_reboot.scss +++ b/explorer/src/scss/dashkit/_reboot.scss @@ -1,12 +1,12 @@ -// -// reboot.scss -// Extended from Bootstrap -// - -// -// Remove the cancel buttons in Chrome and Safari on macOS. -// - -[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} \ No newline at end of file +// +// reboot.scss +// Extended from Bootstrap +// + +// +// Remove the cancel buttons in Chrome and Safari on macOS. +// + +[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} diff --git a/explorer/src/scss/dashkit/_root.scss b/explorer/src/scss/dashkit/_root.scss index 0d1eca2930..622a0090c8 100644 --- a/explorer/src/scss/dashkit/_root.scss +++ b/explorer/src/scss/dashkit/_root.scss @@ -1,12 +1,12 @@ -// -// root.scss -// Extended from Bootstrap -// - -html { - height: 100%; -} - -body { - min-height: 100%; -} \ No newline at end of file +// +// root.scss +// Extended from Bootstrap +// + +html { + height: 100%; +} + +body { + min-height: 100%; +} diff --git a/explorer/src/scss/dashkit/_tables.scss b/explorer/src/scss/dashkit/_tables.scss index c7c150fa73..c019bc9fde 100644 --- a/explorer/src/scss/dashkit/_tables.scss +++ b/explorer/src/scss/dashkit/_tables.scss @@ -1,76 +1,76 @@ -// -// tables.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -.table { - - thead th { - background-color: $table-head-bg; - text-transform: uppercase; - font-size: $font-size-sm; - font-weight: $font-weight-bold; - letter-spacing: .08em; - color: $table-head-color; - border-bottom-width: $table-border-width; - } - - thead th, tbody th, tbody td { - vertical-align: middle; - } -} - -.table-sm { - font-size: $font-size-sm; - - thead th { - font-size: $font-size-xs; - } -} - - -// -// Dashkit ===================================== -// - -// No wrap -// -// Prevents table content from wrapping to the next line - -.table-nowrap { - - th, td { - white-space: nowrap; - } -} - - -// Sort -// -// Adds sorting icons - -.table [data-sort] { - white-space: nowrap; - - &::after { - content: str-replace(url("data:image/svg+xml;utf8,"), "#", "%23"); - margin-left: .25rem; - } -} - - -// Table checkbox - -.table-checkbox { - min-height: 0; -} - -.table-checkbox .custom-control-label::before, -.table-checkbox .custom-control-label::after { - top: 50%; - transform: translateY(-50%); -} +// +// tables.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +.table { + + thead th { + background-color: $table-head-bg; + text-transform: uppercase; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + letter-spacing: .08em; + color: $table-head-color; + border-bottom-width: $table-border-width; + } + + thead th, tbody th, tbody td { + vertical-align: middle; + } +} + +.table-sm { + font-size: $font-size-sm; + + thead th { + font-size: $font-size-xs; + } +} + + +// +// Dashkit ===================================== +// + +// No wrap +// +// Prevents table content from wrapping to the next line + +.table-nowrap { + + th, td { + white-space: nowrap; + } +} + + +// Sort +// +// Adds sorting icons + +.table [data-sort] { + white-space: nowrap; + + &::after { + content: str-replace(url("data:image/svg+xml;utf8,"), "#", "%23"); + margin-left: .25rem; + } +} + + +// Table checkbox + +.table-checkbox { + min-height: 0; +} + +.table-checkbox .custom-control-label::before, +.table-checkbox .custom-control-label::after { + top: 50%; + transform: translateY(-50%); +} diff --git a/explorer/src/scss/dashkit/_toasts.scss b/explorer/src/scss/dashkit/_toasts.scss index f424a911e8..93da2881d4 100644 --- a/explorer/src/scss/dashkit/_toasts.scss +++ b/explorer/src/scss/dashkit/_toasts.scss @@ -1,4 +1,4 @@ -// -// toasts.scss -// Extended from Bootstrap -// +// +// toasts.scss +// Extended from Bootstrap +// diff --git a/explorer/src/scss/dashkit/_type.scss b/explorer/src/scss/dashkit/_type.scss index 3ef9248f71..d4033a5462 100644 --- a/explorer/src/scss/dashkit/_type.scss +++ b/explorer/src/scss/dashkit/_type.scss @@ -1,115 +1,115 @@ -// -// type.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides ===================================== -// - -h1, .h1 { - margin-bottom: $headings-margin-bottom; - font-size: 1.5rem; - - @include media-breakpoint-up(md) { - font-size: $h1-font-size; - } -} - -h2, .h2 { - margin-bottom: $headings-margin-bottom; -} - -h3, .h3 { - margin-bottom: ($headings-margin-bottom * .75); -} - -h4, .h4 { - margin-bottom: ($headings-margin-bottom * .5); -} - -h5, .h5 { - margin-bottom: ($headings-margin-bottom * .5); -} - -h6, .h6 { - margin-bottom: ($headings-margin-bottom * .5); -} - - -// Links - -h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { - - > a { - color: inherit; - } -} - -// Type display classes - -.display-1, -.display-2, -.display-3, -.display-4 { - letter-spacing: $display-letter-spacing; -} - -// Headings - -h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { - letter-spacing: $headings-letter-spacing; -} - -h6.text-uppercase { - letter-spacing: .08em; -} - -// Bold, strong - -b, strong { - font-weight: $font-weight-bold; -} - - -// Links, buttons -// -// Removes focus outline - -a, button { - - &:focus { - outline: none !important; - } -} - - -// -// Dashkit ===================================== -// - -// Include Cerebri Sans - -@font-face { - font-family: 'Cerebri Sans'; - 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'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Cerebri Sans'; - 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'); - font-weight: 500; - font-style: normal; -} - -@font-face { - font-family: 'Cerebri Sans'; - 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'); - font-weight: 600; - font-style: normal; -} +// +// type.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides ===================================== +// + +h1, .h1 { + margin-bottom: $headings-margin-bottom; + font-size: 1.5rem; + + @include media-breakpoint-up(md) { + font-size: $h1-font-size; + } +} + +h2, .h2 { + margin-bottom: $headings-margin-bottom; +} + +h3, .h3 { + margin-bottom: ($headings-margin-bottom * .75); +} + +h4, .h4 { + margin-bottom: ($headings-margin-bottom * .5); +} + +h5, .h5 { + margin-bottom: ($headings-margin-bottom * .5); +} + +h6, .h6 { + margin-bottom: ($headings-margin-bottom * .5); +} + + +// Links + +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { + + > a { + color: inherit; + } +} + +// Type display classes + +.display-1, +.display-2, +.display-3, +.display-4 { + letter-spacing: $display-letter-spacing; +} + +// Headings + +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { + letter-spacing: $headings-letter-spacing; +} + +h6.text-uppercase { + letter-spacing: .08em; +} + +// Bold, strong + +b, strong { + font-weight: $font-weight-bold; +} + + +// Links, buttons +// +// Removes focus outline + +a, button { + + &:focus { + outline: none !important; + } +} + + +// +// Dashkit ===================================== +// + +// Include Cerebri Sans + +@font-face { + font-family: 'Cerebri Sans'; + 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'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Cerebri Sans'; + 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'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Cerebri Sans'; + 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'); + font-weight: 600; + font-style: normal; +} diff --git a/explorer/src/scss/dashkit/_utilities.scss b/explorer/src/scss/dashkit/_utilities.scss index 9806da79d5..20d4ed13b0 100644 --- a/explorer/src/scss/dashkit/_utilities.scss +++ b/explorer/src/scss/dashkit/_utilities.scss @@ -1,5 +1,5 @@ -@import 'utilities/background'; -@import 'utilities/borders'; -@import 'utilities/lift'; -@import 'utilities/sizing'; -@import 'utilities/type'; \ No newline at end of file +@import 'utilities/background'; +@import 'utilities/borders'; +@import 'utilities/lift'; +@import 'utilities/sizing'; +@import 'utilities/type'; diff --git a/explorer/src/scss/dashkit/_variables.scss b/explorer/src/scss/dashkit/_variables.scss index 6bcabdfca2..ecfb56c150 100644 --- a/explorer/src/scss/dashkit/_variables.scss +++ b/explorer/src/scss/dashkit/_variables.scss @@ -1,757 +1,757 @@ -// -// variables.scss -// Extended from Bootstrap -// - -// -// Bootstrap Overrides =================================== -// - - -// Variables -// -// Variables should follow the `$component-state-property-size` formula for -// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - - -// -// Color system -// - -// stylelint-disable -$white: #FFFFFF !default; -$gray-100: #F9FBFD !default; -$gray-200: #EDF2F9 !default; -$gray-300: #E3EBF6 !default; -$gray-400: #D2DDEC !default; -$gray-500: #B1C2D9 !default; -$gray-600: #95AAC9 !default; -$gray-700: #6E84A3 !default; -$gray-800: #3B506C !default; -$gray-900: #283E59 !default; -$black: #12263F !default; - -$gray-600-dark: #244166 !default; -$gray-700-dark: #1E3A5C !default; -$gray-800-dark: #152E4D !default; -$gray-900-dark: #132A46 !default; -$black-dark: #12263F !default; - -$blue: #2C7BE5 !default; -$indigo: #727cf5 !default; // NOT USED -$purple: #6b5eae !default; -$pink: #ff679b !default; // NOT USED -$red: #E63757 !default; -$orange: #fd7e14 !default; // NOT USED -$yellow: #F6C343 !default; -$green: #00D97E !default; -$teal: #02a8b5 !default; // NOT USED -$cyan: #39afd1 !default; // NOT USED - -$primary: $blue !default; -$secondary: $gray-700 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-200 !default; -$dark: $black !default; - -$theme-colors: () !default; -$theme-colors: map-merge(("primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark, - "white": $white), $theme-colors); -// stylelint-enable - -$lighter: $gray-100 !default; - -// Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; - - -// Options -// -// Quickly modify global styling by enabling or disabling optional features. - -$enable-validation-icons: false !default; - - -// Spacing -// -// Control the default styling of most Bootstrap elements by modifying these -// variables. Mostly focused on spacing. -// You can add more entries to the $spacers map, should you need more variation. - -$spacer: 1.5rem !default; -$spacers: () !default; -$spacers: map-merge((0: 0, - 1: ($spacer * .125), // 3px - 2: ($spacer * .25), // 6px - 3: ($spacer * .5), // 12px - 4: $spacer, // 24px - 5: ($spacer * 1.5), // 36px - 6: ($spacer * 3), // 72px - 7: ($spacer * 4.5), // 108px - 8: ($spacer * 9) // 216px - ), $spacers); - -// This variable affects the `.h-*` and `.w-*` classes. -$sizes: () !default; -$sizes: map-merge((15: 15%, - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100%), $sizes); - - -// Body -// -// Settings for the `` element. - -$body-bg: $gray-100 !default; -$body-color: $black !default; - - -// Links -// -// Style anchor elements. - -$link-color: theme-color("primary") !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: none !default; - - -// Grid columns -// -// Set the number of columns and specify the width of the gutters. - -$grid-gutter-width: 24px !default; - -// Components -// -// Define common padding and border radius sizes and more. - -$line-height-lg: 1.5 !default; -$line-height-sm: 1.75 !default; - -$border-width: 1px !default; -$border-color: $gray-300 !default; - -$border-radius: 0.375rem !default; -$border-radius-lg: 0.5rem !default; -$border-radius-sm: 0.25rem !default; -$border-radius-xs: .1875rem !default; - -$component-active-bg: $primary !default; - -$caret-width: .25em !default; - - -// Fonts -// -// Font, line-height, and color for body text, headings, and more. - -// stylelint-disable value-keyword-case -$font-family-sans-serif: 'Cerebri Sans', sans-serif !default; -$font-family-base: $font-family-sans-serif !default; -// stylelint-enable value-keyword-case - -$font-size-base: 0.9375rem !default; // 15px -$font-size-lg: ($font-size-base * 1.133333333334) !default; // 17px -$font-size-sm: ($font-size-base * .866666667) !default; // 13px - -$font-weight-light: 400 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 600 !default; - -$line-height-base: 1.5 !default; - -$headings-margin-bottom: $spacer * .75 !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.1 !default; - -$h1-font-size: 1.625rem !default; -$h2-font-size: 1.25rem !default; -$h3-font-size: 1.0625rem !default; -$h4-font-size: 0.9375rem !default; -$h5-font-size: 0.8125rem !default; -$h6-font-size: 0.625rem !default; - -$display1-size: 4rem !default; -$display2-size: 3.25rem !default; -$display3-size: 2.625rem !default; -$display4-size: 2rem !default; - -$display1-weight: 600 !default; -$display2-weight: 600 !default; -$display3-weight: 600 !default; -$display4-weight: 600 !default; -$display-line-height: $headings-line-height !default; - -$lead-font-size: ($font-size-base * 1.25) !default; - -$small-font-size: 0.8125rem !default; - -$text-muted: $gray-600 !default; - -$blockquote-font-size: ($font-size-base * 1.25) !default; - -$hr-border-color: $border-color !default; -$hr-margin-y: 1rem !default; - -$list-inline-padding: 6px !default; - - -// Tables -// -// Customizes the `.table` component with basic values, each used across all table variations. - -$table-cell-padding: 1rem !default; -$table-cell-padding-sm: 1rem !default; - -$table-accent-bg: $gray-100 !default; -$table-hover-bg: $gray-100 !default; -$table-active-bg: $gray-100 !default; - -$table-border-color: $gray-200 !default; - -$table-head-bg: $gray-100 !default; -$table-head-color: $text-muted !default; - -$table-striped-order: even !default; - - -// Buttons + Forms -// -// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. - -$input-btn-padding-y: .5rem !default; -$input-btn-padding-x: .75rem !default; -$input-btn-line-height: $line-height-base !default; - -$input-btn-padding-y-lg: .75rem !default; -$input-btn-padding-x-lg: 1.25rem !default; -$input-btn-font-size-lg: $font-size-base !default; -$input-btn-line-height-lg: $line-height-base !default; - -$input-btn-focus-width: .15rem !default; -$input-btn-focus-color: rgba($primary, .25) !default; -$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; - -$input-btn-padding-y-sm: .125rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: $line-height-sm !default; - -$input-btn-padding-y-lg: .5rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: $line-height-lg !default; - - -// Buttons -// -// For each of Bootstrap's buttons, define text, background, and border color. - -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-line-height: $input-btn-line-height !default; - -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; - -//Custom button color -$btn-text-color: $white !default; - -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; - -$btn-font-weight: $font-weight-normal !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; - -$btn-link-disabled-color: $gray-500 !default; - - -// Forms - -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; - -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; - -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; - -$input-bg: $white !default; -$input-disabled-bg: $input-bg !default; - -$input-color: $body-color !default; -$input-border-color: $gray-400 !default; - -$input-focus-border-color: $primary !default; -$input-focus-box-shadow: transparent !default; - -$input-placeholder-color: $gray-500 !default; - -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; - -$form-group-margin-bottom: 1.375rem !default; - -$input-group-addon-bg: $input-bg !default; -$input-group-addon-color: $text-muted !default; - -$custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; - -$custom-control-indicator-bg: $border-color !default; -$custom-control-indicator-border-width: 0 !default; - -$custom-switch-width: 3rem !default; -$custom-switch-indicator-size: 1.125rem !default; -$custom-switch-indicator-border-radius: $custom-switch-indicator-size / 2 !default; - - -// Dropdowns -// -// Dropdown menu container and contents. - -$dropdown-spacer: 0 !default; -$dropdown-border-color: rgba($black, .1) !default; - -$dropdown-link-color: $gray-700 !default; -$dropdown-link-hover-color: $black !default; -$dropdown-link-hover-bg: transparent !default; - -$dropdown-link-active-color: $dropdown-link-hover-color !default; -$dropdown-link-active-bg: $dropdown-link-hover-bg !default; - -$dropdown-item-padding-y: .375rem !default; - -$dropdown-header-color: inherit !default; - - -// Navs - -$nav-tabs-border-color: $border-color !default; -$nav-tabs-border-radius: 0 !default; -$nav-tabs-link-hover-border-color: transparent transparent transparent !default; -$nav-tabs-link-active-color: $body-color !default; -$nav-tabs-link-active-bg: transparent !default; -$nav-tabs-link-active-border-color: transparent transparent theme-color("primary") !default; - -$nav-pills-link-active-bg: $component-active-bg !default; - - -// Navbar - -$navbar-padding-x: 1rem !default; - -$navbar-brand-font-size: $font-size-lg !default; -$navbar-brand-padding-y: 0 !default; - -$navbar-toggler-padding-x: 0 !default; - -$navbar-dark-color: $gray-700 !default; -$navbar-dark-hover-color: $white !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-toggler-border-color: transparent !default; - -$navbar-light-color: $gray-700 !default; -$navbar-light-hover-color: $black !default; -$navbar-light-active-color: $black !default; -$navbar-light-toggler-border-color: transparent !default; - - -// Pagination - -$pagination-color: $black !default; - -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; - -$pagination-hover-color: $dark !default; -$pagination-hover-bg: $gray-100 !default; -$pagination-hover-border-color: $gray-300 !default !default; - -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; - - -// Jumbotron - -$jumbotron-bg: $gray-200 !default; - - -// Cards - -$card-spacer-y: 1rem !default; -$card-spacer-x: $spacer !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius-lg !default; -$card-border-color: $gray-200 !default; -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: transparent !default; - - -// Tooltips - -$tooltip-color: $black !default; -$tooltip-bg: $gray-300 !default; -$tooltip-opacity: 1 !default; - -$tooltip-arrow-color: $tooltip-bg !default; - - -// Popovers - -$popover-bg: $white !default; -$popover-max-width: 10rem !default; -$popover-padding-x: .95rem !default; -$popover-padding-y: .8rem !default; -$popover-box-shadow: 0 0 1rem transparentize($black, .97) !default; - -$popover-header-bg: $popover-bg !default; -$popover-header-padding-y: 0 !default; -$popover-header-padding-x: 0 !default; -$popover-header-margin-bottom: .25rem !default; - -$popover-body-color: $text-muted !default; - - -// Toasts - -$toast-max-width: 300px !default; -$toast-padding-x: 1rem !default; -$toast-padding-y: 0.75rem !default; -$toast-font-size: $font-size-base !default; -$toast-background-color: $white !default; -$toast-border-color: $border-color !default; -$toast-border-radius: $border-radius !default; -$toast-box-shadow: 0 0.75rem 1.5rem fade-out($black, .9) !default; - -$toast-header-color: $body-color !default; -$toast-header-background-color: $toast-background-color !default; -$toast-header-border-color: $border-color !default; - - -// Badges - -$badge-font-weight: $font-weight-normal !default; -$badge-padding-y: .33em !default; - - -// Modals - -// Padding applied to the modal body -$modal-inner-padding: 1.5rem !default; - -$modal-content-border-color: transparent !default; - -$modal-header-padding-y: 1rem !default; -$modal-header-padding: $modal-header-padding-y $modal-inner-padding !default; -$modal-header-border-color: $border-color !default; -$modal-footer-border-color: $border-color !default; - -$modal-md: 600px !default; - - -// Alerts -// -// Define alert colors, border radius, and padding. - -$alert-link-font-weight: $font-weight-normal !default; -$alert-margin-bottom: $spacer !default; - -$alert-bg-level: 0 !default; -$alert-border-level: 0 !default; -$alert-color-level: 6 !default; - - -// Progress bars - -$progress-border-radius: 200px !default; // Always rounds even if height is manually set higher - - -// List groups - -$list-group-bg: transparent !default; -$list-group-border-color: $border-color !default; - -$list-group-item-padding-y: 1rem !default; - - -// Figures - -$figure-caption-font-size: $small-font-size !default; - - -// Breadcrumbs - -$breadcrumb-padding-x: 0 !default; - -$breadcrumb-margin-bottom: 0 !default; - -$breadcrumb-bg: transparent !default; -$breadcrumb-divider-color: $gray-400 !default; -$breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: "" !default; - - -// Close - -$close-color: $text-muted; -$close-text-shadow: none !default; - - -// Code - -$code-color: $blue !default; - - -// -// Dashkit ===================================== -// - -// Paths - -$path-to-fonts: '../fonts' !default; -$path-to-img: '../img' !default; - - -// Type - -$font-size-xs: ($font-size-base * .6666666667) !default; // 10px - -$headings-letter-spacing: -.02em !default; - -$display-letter-spacing: -.02em !default; - - -// Alerts - -$alert-link-text-decoration: underline !default; - - -// Auth - -$auth-bg: $white !default; - - -// Avatar - -$avatar-size-base: 3rem !default; -$avatar-size-xs: 1.625rem !default; -$avatar-size-sm: 2.5rem !default; -$avatar-size-lg: 4rem !default; -$avatar-size-xl: 5.125rem !default; -$avatar-size-xxl: 8rem !default; - -$avatar-title-bg: $gray-500 !default; -$avatar-title-color: $white !default; - - -// Popover - -$popover-lg-max-width: 300px !default; - -$popover-dark-bg: $black !default; -$popover-dark-border-color: $black !default; - -$popover-dark-header-bg: $black !default; -$popover-dark-header-color: $white !default; - - -// Badges - -$badge-soft-bg-level: -10 !default; - -$badge-padding-x: .5em !default; - - -// Breadcrumb - -$breadcrumb-padding-y-sm: .5rem !default; -$breadcrumb-padding-x-sm: .5rem !default; -$breadcrumb-item-padding-sm: .25rem !default; - -$breadcrumb-margin-bottom-sm: .25rem !default; -$breadcrumb-font-size-sm: $font-size-sm !default; - - -// Cards - -$card-margin-bottom: $spacer !default; -$card-spacer-x-sm: 1rem !default; - -$card-outline-color: $card-border-color !default; -$card-box-shadow: 0 .75rem 1.5rem transparentize($black, .97) !default; - -$card-header-height: 60px !default; - - -// Charts - -$chart-height: 300px !default; -$chart-height-sm: 225px !default; - -$chart-sparkline-width: 75px !default; -$chart-sparkline-height: 35px !default; - -$chart-legend-margin-top: 2.5rem !default; -$chart-legend-font-size: $font-size-sm !default; -$chart-legend-color: $text-muted !default; -$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default; - - -// Comment - -$comment-margin-bottom: 1rem !default; - -$comment-body-padding-y: 1rem !default; -$comment-body-padding-x: 1.25rem !default; -$comment-body-bg: $body-bg !default; -$comment-body-border-radius: $border-radius-lg !default; -$comment-body-font-size: $font-size-sm !default; - -$comment-time-margin-bottom: .5625rem !default; -$comment-time-font-size: $font-size-xs !default; -$comment-time-color: $text-muted !default; - - -// Dropdowns - -$dropdown-card-min-width: 350px !default; -$dropdown-card-border-color: $dropdown-border-color !default; -$dropdown-card-header-min-height: 3.125rem !default; -$dropdown-card-body-max-height: 350px !default; - - -// Header - -$header-margin-bottom: 2rem !default; - -$header-spacing-y: 1.5rem !default; - -$header-body-border-width: 1px !default; -$header-body-border-color: $border-color !default; - -$header-body-border-color-dark: fade-out($header-body-border-color, .9) !default; - - -// List groups - -$list-group-item-padding-y-lg: $spacer !default; - - -// Main content - -$main-content-padding-y: 40px !default; -$main-content-padding-x: 24px !default; // in px to combine with $grid-gutter-width - - -// Modal - -$modal-dialog-vertical-width: 350px !default; - -$modal-card-body-max-height: 350px !default; - - -// Navs - -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; - -$nav-tabs-link-active-border-width: 1px !default; -$nav-tabs-link-margin-x: .75rem !default; // Margin used for X so active underline matches width of label -$nav-tabs-link-padding-y: $card-spacer-y !default; // This keeps the height the same as the card header - -$nav-tabs-sm-font-size: .8125rem !default; -$nav-tabs-sm-link-margin-x: .5rem !default; - - -// Navbar - -$navbar-vertical-width: 250px !default; -$navbar-vertical-width-sm: 66px !default; - -$navbar-vertical-padding-x: 1.5rem !default; -$navbar-vertical-padding-x-sm: 0.75rem !default; - -$navbar-icon-min-width: 1.75rem !default; - -$navbar-breadcrumb-padding-y: $nav-link-padding-y !default; -$navbar-breadcrumb-padding-x: 0 !default; - -$navbar-vibrant-border-color: transparent !default; -$navbar-vibrant-heading-color: fade-out($white, .6) !default; -$navbar-vibrant-divider-color: fade-out($white, .8) !default; -$navbar-vibrant-color: fade-out($white, .3) !default; -$navbar-vibrant-hover-color: $white !default; -$navbar-vibrant-active-color: $white !default; -$navbar-vibrant-brand-filter: brightness(0) invert(1) !default; -$navbar-vibrant-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-vibrant-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; - -$navbar-dark-bg: $gray-800-dark !default; -$navbar-dark-border-color: $gray-800-dark !default; -$navbar-dark-heading-color: $navbar-dark-color !default; -$navbar-dark-divider-color: $gray-700-dark !default; -$navbar-dark-brand-filter: none !default; - -$navbar-light-bg: $white !default; -$navbar-light-border-color: $border-color !default; -$navbar-light-heading-color: $text-muted !default; -$navbar-light-divider-color: $border-color !default; -$navbar-light-brand-filter: none; - -$navbar-dropdown-toggle-on-hover: true !default; - - -// Progress bars - -$progress-height-sm: 0.25rem !default; - - -// Forms - -$custom-switch-height: 1.5rem !default; -$custom-switch-spacing: ($custom-switch-height - $custom-switch-indicator-size) / 2 !default; - -$custom-switch-indicator-bg: $white !default; -$custom-switch-indicator-active-bg: $white !default; - - -// Close - -$close-font-size-sm: $font-size-base !default; - - -// Kanban - -$kanban-col-width: 375px !default; - - -// Components - -$box-shadow-lift: 0 1rem 2.5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .9) !default; -$box-shadow-lift-lg: 0 2rem 5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .95) !default; - - -// Checklist - -$checklist-control-spacer: .75rem !default; -$checklist-control-checked-color: $gray-700 !default; - - -// Backgrounds - -$bg-soft-level: -11 !default; +// +// variables.scss +// Extended from Bootstrap +// + +// +// Bootstrap Overrides =================================== +// + + +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + + +// +// Color system +// + +// stylelint-disable +$white: #FFFFFF !default; +$gray-100: #F9FBFD !default; +$gray-200: #EDF2F9 !default; +$gray-300: #E3EBF6 !default; +$gray-400: #D2DDEC !default; +$gray-500: #B1C2D9 !default; +$gray-600: #95AAC9 !default; +$gray-700: #6E84A3 !default; +$gray-800: #3B506C !default; +$gray-900: #283E59 !default; +$black: #12263F !default; + +$gray-600-dark: #244166 !default; +$gray-700-dark: #1E3A5C !default; +$gray-800-dark: #152E4D !default; +$gray-900-dark: #132A46 !default; +$black-dark: #12263F !default; + +$blue: #2C7BE5 !default; +$indigo: #727cf5 !default; // NOT USED +$purple: #6b5eae !default; +$pink: #ff679b !default; // NOT USED +$red: #E63757 !default; +$orange: #fd7e14 !default; // NOT USED +$yellow: #F6C343 !default; +$green: #00D97E !default; +$teal: #02a8b5 !default; // NOT USED +$cyan: #39afd1 !default; // NOT USED + +$primary: $blue !default; +$secondary: $gray-700 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-200 !default; +$dark: $black !default; + +$theme-colors: () !default; +$theme-colors: map-merge(("primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, + "white": $white), $theme-colors); +// stylelint-enable + +$lighter: $gray-100 !default; + +// Customize the light and dark text colors for use in our YIQ color contrast function. +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; + + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-validation-icons: false !default; + + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +$spacer: 1.5rem !default; +$spacers: () !default; +$spacers: map-merge((0: 0, + 1: ($spacer * .125), // 3px + 2: ($spacer * .25), // 6px + 3: ($spacer * .5), // 12px + 4: $spacer, // 24px + 5: ($spacer * 1.5), // 36px + 6: ($spacer * 3), // 72px + 7: ($spacer * 4.5), // 108px + 8: ($spacer * 9) // 216px + ), $spacers); + +// This variable affects the `.h-*` and `.w-*` classes. +$sizes: () !default; +$sizes: map-merge((15: 15%, + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%), $sizes); + + +// Body +// +// Settings for the `` element. + +$body-bg: $gray-100 !default; +$body-color: $black !default; + + +// Links +// +// Style anchor elements. + +$link-color: theme-color("primary") !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: none !default; + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-gutter-width: 24px !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.75 !default; + +$border-width: 1px !default; +$border-color: $gray-300 !default; + +$border-radius: 0.375rem !default; +$border-radius-lg: 0.5rem !default; +$border-radius-sm: 0.25rem !default; +$border-radius-xs: .1875rem !default; + +$component-active-bg: $primary !default; + +$caret-width: .25em !default; + + +// Fonts +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: 'Cerebri Sans', sans-serif !default; +$font-family-base: $font-family-sans-serif !default; +// stylelint-enable value-keyword-case + +$font-size-base: 0.9375rem !default; // 15px +$font-size-lg: ($font-size-base * 1.133333333334) !default; // 17px +$font-size-sm: ($font-size-base * .866666667) !default; // 13px + +$font-weight-light: 400 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 600 !default; + +$line-height-base: 1.5 !default; + +$headings-margin-bottom: $spacer * .75 !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; + +$h1-font-size: 1.625rem !default; +$h2-font-size: 1.25rem !default; +$h3-font-size: 1.0625rem !default; +$h4-font-size: 0.9375rem !default; +$h5-font-size: 0.8125rem !default; +$h6-font-size: 0.625rem !default; + +$display1-size: 4rem !default; +$display2-size: 3.25rem !default; +$display3-size: 2.625rem !default; +$display4-size: 2rem !default; + +$display1-weight: 600 !default; +$display2-weight: 600 !default; +$display3-weight: 600 !default; +$display4-weight: 600 !default; +$display-line-height: $headings-line-height !default; + +$lead-font-size: ($font-size-base * 1.25) !default; + +$small-font-size: 0.8125rem !default; + +$text-muted: $gray-600 !default; + +$blockquote-font-size: ($font-size-base * 1.25) !default; + +$hr-border-color: $border-color !default; +$hr-margin-y: 1rem !default; + +$list-inline-padding: 6px !default; + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-cell-padding: 1rem !default; +$table-cell-padding-sm: 1rem !default; + +$table-accent-bg: $gray-100 !default; +$table-hover-bg: $gray-100 !default; +$table-active-bg: $gray-100 !default; + +$table-border-color: $gray-200 !default; + +$table-head-bg: $gray-100 !default; +$table-head-color: $text-muted !default; + +$table-striped-order: even !default; + + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: .75rem !default; +$input-btn-line-height: $line-height-base !default; + +$input-btn-padding-y-lg: .75rem !default; +$input-btn-padding-x-lg: 1.25rem !default; +$input-btn-font-size-lg: $font-size-base !default; +$input-btn-line-height-lg: $line-height-base !default; + +$input-btn-focus-width: .15rem !default; +$input-btn-focus-color: rgba($primary, .25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-padding-y-sm: .125rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; + +//Custom button color +$btn-text-color: $white !default; + +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; + +$btn-font-weight: $font-weight-normal !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$btn-link-disabled-color: $gray-500 !default; + + +// Forms + +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; + +$input-bg: $white !default; +$input-disabled-bg: $input-bg !default; + +$input-color: $body-color !default; +$input-border-color: $gray-400 !default; + +$input-focus-border-color: $primary !default; +$input-focus-box-shadow: transparent !default; + +$input-placeholder-color: $gray-500 !default; + +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; + +$form-group-margin-bottom: 1.375rem !default; + +$input-group-addon-bg: $input-bg !default; +$input-group-addon-color: $text-muted !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; + +$custom-control-indicator-bg: $border-color !default; +$custom-control-indicator-border-width: 0 !default; + +$custom-switch-width: 3rem !default; +$custom-switch-indicator-size: 1.125rem !default; +$custom-switch-indicator-border-radius: $custom-switch-indicator-size / 2 !default; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-spacer: 0 !default; +$dropdown-border-color: rgba($black, .1) !default; + +$dropdown-link-color: $gray-700 !default; +$dropdown-link-hover-color: $black !default; +$dropdown-link-hover-bg: transparent !default; + +$dropdown-link-active-color: $dropdown-link-hover-color !default; +$dropdown-link-active-bg: $dropdown-link-hover-bg !default; + +$dropdown-item-padding-y: .375rem !default; + +$dropdown-header-color: inherit !default; + + +// Navs + +$nav-tabs-border-color: $border-color !default; +$nav-tabs-border-radius: 0 !default; +$nav-tabs-link-hover-border-color: transparent transparent transparent !default; +$nav-tabs-link-active-color: $body-color !default; +$nav-tabs-link-active-bg: transparent !default; +$nav-tabs-link-active-border-color: transparent transparent theme-color("primary") !default; + +$nav-pills-link-active-bg: $component-active-bg !default; + + +// Navbar + +$navbar-padding-x: 1rem !default; + +$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-padding-y: 0 !default; + +$navbar-toggler-padding-x: 0 !default; + +$navbar-dark-color: $gray-700 !default; +$navbar-dark-hover-color: $white !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-toggler-border-color: transparent !default; + +$navbar-light-color: $gray-700 !default; +$navbar-light-hover-color: $black !default; +$navbar-light-active-color: $black !default; +$navbar-light-toggler-border-color: transparent !default; + + +// Pagination + +$pagination-color: $black !default; + +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$pagination-hover-color: $dark !default; +$pagination-hover-bg: $gray-100 !default; +$pagination-hover-border-color: $gray-300 !default !default; + +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; + + +// Jumbotron + +$jumbotron-bg: $gray-200 !default; + + +// Cards + +$card-spacer-y: 1rem !default; +$card-spacer-x: $spacer !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius-lg !default; +$card-border-color: $gray-200 !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; +$card-cap-bg: transparent !default; + + +// Tooltips + +$tooltip-color: $black !default; +$tooltip-bg: $gray-300 !default; +$tooltip-opacity: 1 !default; + +$tooltip-arrow-color: $tooltip-bg !default; + + +// Popovers + +$popover-bg: $white !default; +$popover-max-width: 10rem !default; +$popover-padding-x: .95rem !default; +$popover-padding-y: .8rem !default; +$popover-box-shadow: 0 0 1rem transparentize($black, .97) !default; + +$popover-header-bg: $popover-bg !default; +$popover-header-padding-y: 0 !default; +$popover-header-padding-x: 0 !default; +$popover-header-margin-bottom: .25rem !default; + +$popover-body-color: $text-muted !default; + + +// Toasts + +$toast-max-width: 300px !default; +$toast-padding-x: 1rem !default; +$toast-padding-y: 0.75rem !default; +$toast-font-size: $font-size-base !default; +$toast-background-color: $white !default; +$toast-border-color: $border-color !default; +$toast-border-radius: $border-radius !default; +$toast-box-shadow: 0 0.75rem 1.5rem fade-out($black, .9) !default; + +$toast-header-color: $body-color !default; +$toast-header-background-color: $toast-background-color !default; +$toast-header-border-color: $border-color !default; + + +// Badges + +$badge-font-weight: $font-weight-normal !default; +$badge-padding-y: .33em !default; + + +// Modals + +// Padding applied to the modal body +$modal-inner-padding: 1.5rem !default; + +$modal-content-border-color: transparent !default; + +$modal-header-padding-y: 1rem !default; +$modal-header-padding: $modal-header-padding-y $modal-inner-padding !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $border-color !default; + +$modal-md: 600px !default; + + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-link-font-weight: $font-weight-normal !default; +$alert-margin-bottom: $spacer !default; + +$alert-bg-level: 0 !default; +$alert-border-level: 0 !default; +$alert-color-level: 6 !default; + + +// Progress bars + +$progress-border-radius: 200px !default; // Always rounds even if height is manually set higher + + +// List groups + +$list-group-bg: transparent !default; +$list-group-border-color: $border-color !default; + +$list-group-item-padding-y: 1rem !default; + + +// Figures + +$figure-caption-font-size: $small-font-size !default; + + +// Breadcrumbs + +$breadcrumb-padding-x: 0 !default; + +$breadcrumb-margin-bottom: 0 !default; + +$breadcrumb-bg: transparent !default; +$breadcrumb-divider-color: $gray-400 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: "" !default; + + +// Close + +$close-color: $text-muted; +$close-text-shadow: none !default; + + +// Code + +$code-color: $blue !default; + + +// +// Dashkit ===================================== +// + +// Paths + +$path-to-fonts: '../fonts' !default; +$path-to-img: '../img' !default; + + +// Type + +$font-size-xs: ($font-size-base * .6666666667) !default; // 10px + +$headings-letter-spacing: -.02em !default; + +$display-letter-spacing: -.02em !default; + + +// Alerts + +$alert-link-text-decoration: underline !default; + + +// Auth + +$auth-bg: $white !default; + + +// Avatar + +$avatar-size-base: 3rem !default; +$avatar-size-xs: 1.625rem !default; +$avatar-size-sm: 2.5rem !default; +$avatar-size-lg: 4rem !default; +$avatar-size-xl: 5.125rem !default; +$avatar-size-xxl: 8rem !default; + +$avatar-title-bg: $gray-500 !default; +$avatar-title-color: $white !default; + + +// Popover + +$popover-lg-max-width: 300px !default; + +$popover-dark-bg: $black !default; +$popover-dark-border-color: $black !default; + +$popover-dark-header-bg: $black !default; +$popover-dark-header-color: $white !default; + + +// Badges + +$badge-soft-bg-level: -10 !default; + +$badge-padding-x: .5em !default; + + +// Breadcrumb + +$breadcrumb-padding-y-sm: .5rem !default; +$breadcrumb-padding-x-sm: .5rem !default; +$breadcrumb-item-padding-sm: .25rem !default; + +$breadcrumb-margin-bottom-sm: .25rem !default; +$breadcrumb-font-size-sm: $font-size-sm !default; + + +// Cards + +$card-margin-bottom: $spacer !default; +$card-spacer-x-sm: 1rem !default; + +$card-outline-color: $card-border-color !default; +$card-box-shadow: 0 .75rem 1.5rem transparentize($black, .97) !default; + +$card-header-height: 60px !default; + + +// Charts + +$chart-height: 300px !default; +$chart-height-sm: 225px !default; + +$chart-sparkline-width: 75px !default; +$chart-sparkline-height: 35px !default; + +$chart-legend-margin-top: 2.5rem !default; +$chart-legend-font-size: $font-size-sm !default; +$chart-legend-color: $text-muted !default; +$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default; + + +// Comment + +$comment-margin-bottom: 1rem !default; + +$comment-body-padding-y: 1rem !default; +$comment-body-padding-x: 1.25rem !default; +$comment-body-bg: $body-bg !default; +$comment-body-border-radius: $border-radius-lg !default; +$comment-body-font-size: $font-size-sm !default; + +$comment-time-margin-bottom: .5625rem !default; +$comment-time-font-size: $font-size-xs !default; +$comment-time-color: $text-muted !default; + + +// Dropdowns + +$dropdown-card-min-width: 350px !default; +$dropdown-card-border-color: $dropdown-border-color !default; +$dropdown-card-header-min-height: 3.125rem !default; +$dropdown-card-body-max-height: 350px !default; + + +// Header + +$header-margin-bottom: 2rem !default; + +$header-spacing-y: 1.5rem !default; + +$header-body-border-width: 1px !default; +$header-body-border-color: $border-color !default; + +$header-body-border-color-dark: fade-out($header-body-border-color, .9) !default; + + +// List groups + +$list-group-item-padding-y-lg: $spacer !default; + + +// Main content + +$main-content-padding-y: 40px !default; +$main-content-padding-x: 24px !default; // in px to combine with $grid-gutter-width + + +// Modal + +$modal-dialog-vertical-width: 350px !default; + +$modal-card-body-max-height: 350px !default; + + +// Navs + +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; + +$nav-tabs-link-active-border-width: 1px !default; +$nav-tabs-link-margin-x: .75rem !default; // Margin used for X so active underline matches width of label +$nav-tabs-link-padding-y: $card-spacer-y !default; // This keeps the height the same as the card header + +$nav-tabs-sm-font-size: .8125rem !default; +$nav-tabs-sm-link-margin-x: .5rem !default; + + +// Navbar + +$navbar-vertical-width: 250px !default; +$navbar-vertical-width-sm: 66px !default; + +$navbar-vertical-padding-x: 1.5rem !default; +$navbar-vertical-padding-x-sm: 0.75rem !default; + +$navbar-icon-min-width: 1.75rem !default; + +$navbar-breadcrumb-padding-y: $nav-link-padding-y !default; +$navbar-breadcrumb-padding-x: 0 !default; + +$navbar-vibrant-border-color: transparent !default; +$navbar-vibrant-heading-color: fade-out($white, .6) !default; +$navbar-vibrant-divider-color: fade-out($white, .8) !default; +$navbar-vibrant-color: fade-out($white, .3) !default; +$navbar-vibrant-hover-color: $white !default; +$navbar-vibrant-active-color: $white !default; +$navbar-vibrant-brand-filter: brightness(0) invert(1) !default; +$navbar-vibrant-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-vibrant-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; + +$navbar-dark-bg: $gray-800-dark !default; +$navbar-dark-border-color: $gray-800-dark !default; +$navbar-dark-heading-color: $navbar-dark-color !default; +$navbar-dark-divider-color: $gray-700-dark !default; +$navbar-dark-brand-filter: none !default; + +$navbar-light-bg: $white !default; +$navbar-light-border-color: $border-color !default; +$navbar-light-heading-color: $text-muted !default; +$navbar-light-divider-color: $border-color !default; +$navbar-light-brand-filter: none; + +$navbar-dropdown-toggle-on-hover: true !default; + + +// Progress bars + +$progress-height-sm: 0.25rem !default; + + +// Forms + +$custom-switch-height: 1.5rem !default; +$custom-switch-spacing: ($custom-switch-height - $custom-switch-indicator-size) / 2 !default; + +$custom-switch-indicator-bg: $white !default; +$custom-switch-indicator-active-bg: $white !default; + + +// Close + +$close-font-size-sm: $font-size-base !default; + + +// Kanban + +$kanban-col-width: 375px !default; + + +// Components + +$box-shadow-lift: 0 1rem 2.5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .9) !default; +$box-shadow-lift-lg: 0 2rem 5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .95) !default; + + +// Checklist + +$checklist-control-spacer: .75rem !default; +$checklist-control-checked-color: $gray-700 !default; + + +// Backgrounds + +$bg-soft-level: -11 !default; diff --git a/explorer/src/scss/dashkit/_vendors.scss b/explorer/src/scss/dashkit/_vendors.scss index 911dd9d970..7e5d818404 100644 --- a/explorer/src/scss/dashkit/_vendors.scss +++ b/explorer/src/scss/dashkit/_vendors.scss @@ -1,5 +1,5 @@ -@import 'vendors/dropzone'; -@import 'vendors/flatpickr'; -@import 'vendors/quill'; -@import 'vendors/list'; -@import 'vendors/select2'; +@import 'vendors/dropzone'; +@import 'vendors/flatpickr'; +@import 'vendors/quill'; +@import 'vendors/list'; +@import 'vendors/select2'; diff --git a/explorer/src/scss/dashkit/dark/_overrides-dark.scss b/explorer/src/scss/dashkit/dark/_overrides-dark.scss index c4d6d53fdc..bea43be0d1 100644 --- a/explorer/src/scss/dashkit/dark/_overrides-dark.scss +++ b/explorer/src/scss/dashkit/dark/_overrides-dark.scss @@ -1,60 +1,60 @@ -// -// overrides.scss -// Dark mode overrides -// - -// -// Table of contents -// -// 1. Buttons -// 2. Forms -// 3. Input groups -// 4. Quill -// 5. Select2 -// - - -// Buttons - -.btn-white, .btn-light { - @include button-variant($gray-800-dark, $gray-600-dark); - - &:not(:disabled):not(.disabled):hover, - &:not(:disabled):not(.disabled):focus, - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - &:not(:disabled):not(.disabled):active:focus, - &:not(:disabled):not(.disabled).active:focus, - .show > &.dropdown-toggle { - background-color: $black-dark; - border-color: $gray-700-dark; - color: $white; - } -} - - -// Forms - -.form-control { - border-color: $input-bg; -} - - -// Input groups - -.input-group .input-group-text { - border-color: $input-bg; -} - - -// Quill - -.ql-toolbar { - border-color: $input-bg; -} - -.ql-editor { - border-left-color: $input-bg; - border-right-color: $input-bg; - border-bottom-color: $input-bg; -} +// +// overrides.scss +// Dark mode overrides +// + +// +// Table of contents +// +// 1. Buttons +// 2. Forms +// 3. Input groups +// 4. Quill +// 5. Select2 +// + + +// Buttons + +.btn-white, .btn-light { + @include button-variant($gray-800-dark, $gray-600-dark); + + &:not(:disabled):not(.disabled):hover, + &:not(:disabled):not(.disabled):focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active:focus, + &:not(:disabled):not(.disabled).active:focus, + .show > &.dropdown-toggle { + background-color: $black-dark; + border-color: $gray-700-dark; + color: $white; + } +} + + +// Forms + +.form-control { + border-color: $input-bg; +} + + +// Input groups + +.input-group .input-group-text { + border-color: $input-bg; +} + + +// Quill + +.ql-toolbar { + border-color: $input-bg; +} + +.ql-editor { + border-left-color: $input-bg; + border-right-color: $input-bg; + border-bottom-color: $input-bg; +} diff --git a/explorer/src/scss/dashkit/dark/_variables-dark.scss b/explorer/src/scss/dashkit/dark/_variables-dark.scss index 01c42a732f..d158b6e8a9 100644 --- a/explorer/src/scss/dashkit/dark/_variables-dark.scss +++ b/explorer/src/scss/dashkit/dark/_variables-dark.scss @@ -1,219 +1,219 @@ -// -// variables-dark.scss -// Dashkit dark version -// - -// -// Bootstrap Overrides =================================== -// - - -// -// Color system -// - -$white: #FFFFFF !default; -$gray-300: #E3EBF6 !default; -$gray-600: #95AAC9 !default; -$gray-700: #6E84A3 !default; -$gray-900: #283E59 !default; -$black: #12263F !default; - -$gray-600-dark: #244166 !default; -$gray-700-dark: #1E3A5C !default; -$gray-800-dark: #152E4D !default; -$gray-900-dark: #132A46 !default; -$black-dark: #12263F !default; - -$light: $gray-800-dark !default; -$lighter: $gray-900-dark !default; - - -// Body -// -// Settings for the `` element. - -$body-bg: $black-dark !default; -$body-color: $white !default; - - -// Components -// -// Define common padding and border radius sizes and more. - -$border-color: $gray-700-dark !default; - - -// Fonts -// -// Font, line-height, and color for body text, headings, and more. - -$text-muted: $gray-700 !default; - - -// Tables -// -// Customizes the `.table` component with basic values, each used across all table variations. - -$table-border-color: $border-color !default; - -$table-head-bg: $black-dark !default; - -$table-accent-bg: $gray-900-dark !default; -$table-hover-bg: $gray-900-dark !default; -$table-active-bg: $gray-900-dark !default; - -$table-bg-level: 0 !default; -$table-border-level: 0 !default; - - -// Forms - -$input-bg: $gray-700-dark !default; - -$input-color: $white !default; -$input-border-color: $black-dark !default; - -$input-placeholder-color: $gray-600 !default; - -$custom-control-indicator-bg: $gray-600-dark !default; - - -// Dropdowns -// -// Dropdown menu container and contents. - -$dropdown-bg: $gray-800-dark !default; -$dropdown-border-color: $black !default; -$dropdown-divider-bg: $black !default; - -$dropdown-link-color: $text-muted !default; -$dropdown-link-hover-color: $white !default; - - -// Navbar - -$navbar-dark-color: $gray-700 !default; -$navbar-dark-hover-color: $black !default; -$navbar-dark-active-color: $black !default; -$navbar-dark-toggler-border-color: transparent !default; - -$navbar-dark-bg: $white !default; -$navbar-dark-border-color: $white !default; -$navbar-dark-heading-color: $text-muted !default; -$navbar-dark-divider-color: $gray-300 !default; -$navbar-dark-brand-filter: none; - -$navbar-dark-input-bg: $input-bg !default; -$navbar-dark-input-border-color: $input-border-color !default; - -$navbar-light-hover-color: $white !default; -$navbar-light-active-color: $white !default; -$navbar-light-input-bg: $gray-700-dark !default; -$navbar-light-input-border-color: $black-dark !default; - - -// Pagination - -$pagination-color: $white !default; -$pagination-bg: $gray-800-dark !default; -$pagination-border-color: $gray-600-dark !default; - -$pagination-hover-color: $white !default; -$pagination-hover-bg: $gray-900-dark !default; -$pagination-hover-border-color: $gray-700-dark !default; - -$pagination-disabled-bg: $gray-900-dark !default; -$pagination-disabled-border-color: $gray-700-dark !default; - - -// Jumbotron - -$jumbotron-bg: $gray-800-dark !default; - - -// Cards - -$card-bg: $gray-800-dark !default; -$card-border-color: $border-color !default; - - -// Tooltips - -$tooltip-bg: $gray-800-dark !default; -$tooltip-color: $white !default; - - -// Popovers - -$popover-bg: $gray-800-dark !default; -$popover-border-color: $black !default; - - -// Toasts - -$toast-background-color: $gray-800-dark !default; -; - - -// Modals - -$modal-content-bg: $gray-800-dark !default; -$modal-content-border-color: $black !default; - - -// Progress bars - -$progress-bg: $gray-600-dark !default; - - -// -// Dashkit ===================================== -// - -// Auth - -$auth-bg: $body-bg !default; - - -// Avatar - -$avatar-title-bg: $gray-600-dark !default; - - -// Badges - -$badge-soft-bg-level: 10 !default; - - -// Cards - -$card-outline-color: $gray-800-dark !default; -$card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default; - - -// Comment - -$comment-body-bg: $gray-700-dark; - - -// Header - -$header-body-border-color-dark: $border-color !default; - - -// Navbar - -$navbar-light-bg: $gray-800-dark !default; -$navbar-light-border-color: $gray-800-dark !default; - - -// Switch - -$custom-switch-indicator-bg: $gray-800-dark !default; -$custom-switch-indicator-active-bg: $white !default; - - -// Backgrounds - -$bg-soft-level: 10 !default; +// +// variables-dark.scss +// Dashkit dark version +// + +// +// Bootstrap Overrides =================================== +// + + +// +// Color system +// + +$white: #FFFFFF !default; +$gray-300: #E3EBF6 !default; +$gray-600: #95AAC9 !default; +$gray-700: #6E84A3 !default; +$gray-900: #283E59 !default; +$black: #12263F !default; + +$gray-600-dark: #244166 !default; +$gray-700-dark: #1E3A5C !default; +$gray-800-dark: #152E4D !default; +$gray-900-dark: #132A46 !default; +$black-dark: #12263F !default; + +$light: $gray-800-dark !default; +$lighter: $gray-900-dark !default; + + +// Body +// +// Settings for the `` element. + +$body-bg: $black-dark !default; +$body-color: $white !default; + + +// Components +// +// Define common padding and border radius sizes and more. + +$border-color: $gray-700-dark !default; + + +// Fonts +// +// Font, line-height, and color for body text, headings, and more. + +$text-muted: $gray-700 !default; + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-border-color: $border-color !default; + +$table-head-bg: $black-dark !default; + +$table-accent-bg: $gray-900-dark !default; +$table-hover-bg: $gray-900-dark !default; +$table-active-bg: $gray-900-dark !default; + +$table-bg-level: 0 !default; +$table-border-level: 0 !default; + + +// Forms + +$input-bg: $gray-700-dark !default; + +$input-color: $white !default; +$input-border-color: $black-dark !default; + +$input-placeholder-color: $gray-600 !default; + +$custom-control-indicator-bg: $gray-600-dark !default; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-bg: $gray-800-dark !default; +$dropdown-border-color: $black !default; +$dropdown-divider-bg: $black !default; + +$dropdown-link-color: $text-muted !default; +$dropdown-link-hover-color: $white !default; + + +// Navbar + +$navbar-dark-color: $gray-700 !default; +$navbar-dark-hover-color: $black !default; +$navbar-dark-active-color: $black !default; +$navbar-dark-toggler-border-color: transparent !default; + +$navbar-dark-bg: $white !default; +$navbar-dark-border-color: $white !default; +$navbar-dark-heading-color: $text-muted !default; +$navbar-dark-divider-color: $gray-300 !default; +$navbar-dark-brand-filter: none; + +$navbar-dark-input-bg: $input-bg !default; +$navbar-dark-input-border-color: $input-border-color !default; + +$navbar-light-hover-color: $white !default; +$navbar-light-active-color: $white !default; +$navbar-light-input-bg: $gray-700-dark !default; +$navbar-light-input-border-color: $black-dark !default; + + +// Pagination + +$pagination-color: $white !default; +$pagination-bg: $gray-800-dark !default; +$pagination-border-color: $gray-600-dark !default; + +$pagination-hover-color: $white !default; +$pagination-hover-bg: $gray-900-dark !default; +$pagination-hover-border-color: $gray-700-dark !default; + +$pagination-disabled-bg: $gray-900-dark !default; +$pagination-disabled-border-color: $gray-700-dark !default; + + +// Jumbotron + +$jumbotron-bg: $gray-800-dark !default; + + +// Cards + +$card-bg: $gray-800-dark !default; +$card-border-color: $border-color !default; + + +// Tooltips + +$tooltip-bg: $gray-800-dark !default; +$tooltip-color: $white !default; + + +// Popovers + +$popover-bg: $gray-800-dark !default; +$popover-border-color: $black !default; + + +// Toasts + +$toast-background-color: $gray-800-dark !default; +; + + +// Modals + +$modal-content-bg: $gray-800-dark !default; +$modal-content-border-color: $black !default; + + +// Progress bars + +$progress-bg: $gray-600-dark !default; + + +// +// Dashkit ===================================== +// + +// Auth + +$auth-bg: $body-bg !default; + + +// Avatar + +$avatar-title-bg: $gray-600-dark !default; + + +// Badges + +$badge-soft-bg-level: 10 !default; + + +// Cards + +$card-outline-color: $gray-800-dark !default; +$card-box-shadow: 0 .75rem 1.5rem transparentize($black-dark, .5) !default; + + +// Comment + +$comment-body-bg: $gray-700-dark; + + +// Header + +$header-body-border-color-dark: $border-color !default; + + +// Navbar + +$navbar-light-bg: $gray-800-dark !default; +$navbar-light-border-color: $gray-800-dark !default; + + +// Switch + +$custom-switch-indicator-bg: $gray-800-dark !default; +$custom-switch-indicator-active-bg: $white !default; + + +// Backgrounds + +$bg-soft-level: 10 !default; diff --git a/explorer/src/scss/dashkit/mixins/_badge.scss b/explorer/src/scss/dashkit/mixins/_badge.scss index b4a255941e..177463366a 100644 --- a/explorer/src/scss/dashkit/mixins/_badge.scss +++ b/explorer/src/scss/dashkit/mixins/_badge.scss @@ -1,16 +1,16 @@ -// Badge Mixins -// -// This is a custom mixin for badge-#{color}-soft variant of Bootstrap's .badge class - -@mixin badge-variant-soft($bg, $color) { - color: $color; - background-color: $bg; - - &[href] { - @include hover-focus { - color: $color; - text-decoration: none; - background-color: darken($bg, 5%); - } - } -} +// Badge Mixins +// +// This is a custom mixin for badge-#{color}-soft variant of Bootstrap's .badge class + +@mixin badge-variant-soft($bg, $color) { + color: $color; + background-color: $bg; + + &[href] { + @include hover-focus { + color: $color; + text-decoration: none; + background-color: darken($bg, 5%); + } + } +} diff --git a/explorer/src/scss/dashkit/mixins/_breakpoints.scss b/explorer/src/scss/dashkit/mixins/_breakpoints.scss index ae60b41507..6fe646062d 100644 --- a/explorer/src/scss/dashkit/mixins/_breakpoints.scss +++ b/explorer/src/scss/dashkit/mixins/_breakpoints.scss @@ -1,9 +1,9 @@ -// -// breakpoint.scss -// Extended from Bootstrap -// - -@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { - $n: index($breakpoint-names, $name); - @return if($n != null and $n != 1, nth($breakpoint-names, $n - 1), null); -} \ No newline at end of file +// +// breakpoint.scss +// Extended from Bootstrap +// + +@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n != null and $n != 1, nth($breakpoint-names, $n - 1), null); +} diff --git a/explorer/src/scss/dashkit/utilities/_background.scss b/explorer/src/scss/dashkit/utilities/_background.scss index 77874162d4..f7e874a6d1 100644 --- a/explorer/src/scss/dashkit/utilities/_background.scss +++ b/explorer/src/scss/dashkit/utilities/_background.scss @@ -1,80 +1,80 @@ -// -// background.scss -// - - -// Fixed at the bottom - -.bg-fixed-bottom { - background-repeat: no-repeat; - background-position: right bottom; - background-size: 100% auto; - background-attachment: fixed; -} - -// Calculate the width of the main container because -// the background-attachment property will use 100vw instead - -.navbar-vertical ~ .main-content.bg-fixed-bottom { - background-size: 100%; - - @include media-breakpoint-up(md) { - background-size: calc(100% - #{$navbar-vertical-width}); - } -} - - -// Cover - -.bg-cover { - background-repeat: no-repeat; - background-position: center center; - background-size: cover; -} - - -// Auth - -.bg-auth { - background-color: $auth-bg; -} - - -// Ellipses - -@each $color, $value in $theme-colors { - - .bg-ellipses.bg-#{$color} { - background-color: transparent !important; - background-repeat: no-repeat; - background-image: radial-gradient(#{$value}, #{$value} 70%, transparent 70.1%); - background-size: 200% 150%; - background-position: center bottom; - } -} - - -// 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-repeat: no-repeat, no-repeat; - background-position: center center, center center; - background-size: cover, cover; -} - - -// Colors - -.bg-lighter { - background-color: $lighter !important; -} - - -// Soft colors - -@each $color, $value in $theme-colors { - .bg-#{$color}-soft { - background-color: theme-color-level($color, $bg-soft-level) !important; - } -} +// +// background.scss +// + + +// Fixed at the bottom + +.bg-fixed-bottom { + background-repeat: no-repeat; + background-position: right bottom; + background-size: 100% auto; + background-attachment: fixed; +} + +// Calculate the width of the main container because +// the background-attachment property will use 100vw instead + +.navbar-vertical ~ .main-content.bg-fixed-bottom { + background-size: 100%; + + @include media-breakpoint-up(md) { + background-size: calc(100% - #{$navbar-vertical-width}); + } +} + + +// Cover + +.bg-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + + +// Auth + +.bg-auth { + background-color: $auth-bg; +} + + +// Ellipses + +@each $color, $value in $theme-colors { + + .bg-ellipses.bg-#{$color} { + background-color: transparent !important; + background-repeat: no-repeat; + background-image: radial-gradient(#{$value}, #{$value} 70%, transparent 70.1%); + background-size: 200% 150%; + background-position: center bottom; + } +} + + +// 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-repeat: no-repeat, no-repeat; + background-position: center center, center center; + background-size: cover, cover; +} + + +// Colors + +.bg-lighter { + background-color: $lighter !important; +} + + +// Soft colors + +@each $color, $value in $theme-colors { + .bg-#{$color}-soft { + background-color: theme-color-level($color, $bg-soft-level) !important; + } +} diff --git a/explorer/src/scss/dashkit/utilities/_borders.scss b/explorer/src/scss/dashkit/utilities/_borders.scss index 7c397fc838..4daa025a9a 100644 --- a/explorer/src/scss/dashkit/utilities/_borders.scss +++ b/explorer/src/scss/dashkit/utilities/_borders.scss @@ -1,48 +1,48 @@ -// -// borders.scss -// - - -// Sizing - -$border-sizing: () !default; -$border-sizing: map-merge(( - "2": 2, - "3": 3, - "4": 4, - "5": 5 -), $border-sizing); - -@each $size, $value in $border-sizing { - - .border-#{$size} { - border-width: $border-width * $value !important; - } - - .border-top-#{$size} { - border-top-width: $border-width * $value !important; - } - - .border-right-#{$size} { - border-right-width: $border-width * $value !important; - } - - .border-bottom-#{$size} { - border-bottom-width: $border-width * $value !important; - } - - .border-left-#{$size} { - border-left-width: $border-width * $value !important; - } -} - - -// Contextual classes - -.border-body { - border-color: $body-bg !important; -} - -.border-card { - border-color: $card-bg !important; -} \ No newline at end of file +// +// borders.scss +// + + +// Sizing + +$border-sizing: () !default; +$border-sizing: map-merge(( + "2": 2, + "3": 3, + "4": 4, + "5": 5 +), $border-sizing); + +@each $size, $value in $border-sizing { + + .border-#{$size} { + border-width: $border-width * $value !important; + } + + .border-top-#{$size} { + border-top-width: $border-width * $value !important; + } + + .border-right-#{$size} { + border-right-width: $border-width * $value !important; + } + + .border-bottom-#{$size} { + border-bottom-width: $border-width * $value !important; + } + + .border-left-#{$size} { + border-left-width: $border-width * $value !important; + } +} + + +// Contextual classes + +.border-body { + border-color: $body-bg !important; +} + +.border-card { + border-color: $card-bg !important; +} diff --git a/explorer/src/scss/dashkit/utilities/_lift.scss b/explorer/src/scss/dashkit/utilities/_lift.scss index 101732f79a..e7a8af7940 100644 --- a/explorer/src/scss/dashkit/utilities/_lift.scss +++ b/explorer/src/scss/dashkit/utilities/_lift.scss @@ -1,20 +1,20 @@ -// -// lift.scss -// Theme utility -// - -.lift { - transition: box-shadow .25s ease, transform .25s ease; -} - -.lift:hover, -.lift:focus { - box-shadow: $box-shadow-lift !important; - transform: translate3d(0, -3px, 0); -} - -.lift-lg:hover, -.lift-lg:focus { - box-shadow: $box-shadow-lift-lg !important; - transform: translate3d(0, -5px, 0); -} \ No newline at end of file +// +// lift.scss +// Theme utility +// + +.lift { + transition: box-shadow .25s ease, transform .25s ease; +} + +.lift:hover, +.lift:focus { + box-shadow: $box-shadow-lift !important; + transform: translate3d(0, -3px, 0); +} + +.lift-lg:hover, +.lift-lg:focus { + box-shadow: $box-shadow-lift-lg !important; + transform: translate3d(0, -5px, 0); +} diff --git a/explorer/src/scss/dashkit/utilities/_sizing.scss b/explorer/src/scss/dashkit/utilities/_sizing.scss index a397a7e7a9..f7685d6d27 100644 --- a/explorer/src/scss/dashkit/utilities/_sizing.scss +++ b/explorer/src/scss/dashkit/utilities/_sizing.scss @@ -1,10 +1,10 @@ -// -// sizing.scss -// - -.vw-100 { - width: 100vw !important; -} -.vh-100 { - height: 100vh !important; -} \ No newline at end of file +// +// sizing.scss +// + +.vw-100 { + width: 100vw !important; +} +.vh-100 { + height: 100vh !important; +} diff --git a/explorer/src/scss/dashkit/utilities/_type.scss b/explorer/src/scss/dashkit/utilities/_type.scss index 5d79614d19..4cd91ee1cd 100644 --- a/explorer/src/scss/dashkit/utilities/_type.scss +++ b/explorer/src/scss/dashkit/utilities/_type.scss @@ -1,34 +1,34 @@ -// -// type.scss -// Extended from Bootstrap -// - -// Font size - -.font-size-base { - font-size: $font-size-base !important; -} - -.font-size-sm { - font-size: $font-size-sm !important; -} - -.font-size-lg { - font-size: $font-size-lg !important; -} - - -// Decoration - -.text-decoration-underline { - text-decoration: underline !important; -} - - -// Gray colors - -@each $color, $value in $grays { - .text-gray-#{$color} { - color: $value !important; - } -} +// +// type.scss +// Extended from Bootstrap +// + +// Font size + +.font-size-base { + font-size: $font-size-base !important; +} + +.font-size-sm { + font-size: $font-size-sm !important; +} + +.font-size-lg { + font-size: $font-size-lg !important; +} + + +// Decoration + +.text-decoration-underline { + text-decoration: underline !important; +} + + +// Gray colors + +@each $color, $value in $grays { + .text-gray-#{$color} { + color: $value !important; + } +} diff --git a/explorer/src/scss/dashkit/vendors/_dropzone.scss b/explorer/src/scss/dashkit/vendors/_dropzone.scss index 34aa46b065..22343b2ac2 100644 --- a/explorer/src/scss/dashkit/vendors/_dropzone.scss +++ b/explorer/src/scss/dashkit/vendors/_dropzone.scss @@ -1,75 +1,75 @@ -// -// dropzone.scss -// Dropzone plugin overrides -// - -.dropzone { - position: relative; - display: flex; - flex-direction: column; -} - -.dz-message { - padding: 5rem 1rem; - background-color: $input-bg; - border: $input-border-width dashed $input-border-color; - border-radius: $border-radius; - text-align: center; - color: $text-muted; - transition: $transition-base; - order: -1; - cursor: pointer; - z-index: 999; - - &:hover { - border-color: $text-muted; - color: $body-color; - } -} - -.dz-drag-hover .dz-message { - border-color: $primary; - color: $primary; -} - -.dropzone-multiple .dz-message { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.dropzone-single.dz-max-files-reached .dz-message { - background-color: fade-out($black, .1); - color: white; - opacity: 0; - - &:hover { - opacity: 1; - } -} - -.dz-preview-single { - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - border-radius: $border-radius; -} - -.dz-preview-cover { - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - border-radius: $border-radius; -} - -.dz-preview-img { - object-fit: cover; - width: 100%; height: 100%; - border-radius: $border-radius; -} - -.dz-preview-multiple .list-group-item:last-child { - padding-bottom: 0; - border-bottom: 0; -} - -[data-dz-size] strong { - font-weight: $font-weight-normal; -} \ No newline at end of file +// +// dropzone.scss +// Dropzone plugin overrides +// + +.dropzone { + position: relative; + display: flex; + flex-direction: column; +} + +.dz-message { + padding: 5rem 1rem; + background-color: $input-bg; + border: $input-border-width dashed $input-border-color; + border-radius: $border-radius; + text-align: center; + color: $text-muted; + transition: $transition-base; + order: -1; + cursor: pointer; + z-index: 999; + + &:hover { + border-color: $text-muted; + color: $body-color; + } +} + +.dz-drag-hover .dz-message { + border-color: $primary; + color: $primary; +} + +.dropzone-multiple .dz-message { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.dropzone-single.dz-max-files-reached .dz-message { + background-color: fade-out($black, .1); + color: white; + opacity: 0; + + &:hover { + opacity: 1; + } +} + +.dz-preview-single { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + border-radius: $border-radius; +} + +.dz-preview-cover { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + border-radius: $border-radius; +} + +.dz-preview-img { + object-fit: cover; + width: 100%; height: 100%; + border-radius: $border-radius; +} + +.dz-preview-multiple .list-group-item:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +[data-dz-size] strong { + font-weight: $font-weight-normal; +} diff --git a/explorer/src/scss/dashkit/vendors/_flatpickr.scss b/explorer/src/scss/dashkit/vendors/_flatpickr.scss index a1b4386282..06bcf7a03a 100644 --- a/explorer/src/scss/dashkit/vendors/_flatpickr.scss +++ b/explorer/src/scss/dashkit/vendors/_flatpickr.scss @@ -1,69 +1,69 @@ -// -// flatpickr.scss -// Flatpickr plugin overrides -// - -.flatpickr-calendar { - background-color: $input-bg; - border: $input-border-width solid $input-border-color; - color: $input-color; - box-shadow: none; - - * { - color: inherit !important; - fill: currentColor !important; - } - - &.arrowTop:before { - border-bottom-color: $input-border-color; - } - - &.arrowTop:after { - border-bottom-color: $input-bg; - } - - .flatpickr-months { - padding-top: .625rem; - padding-bottom: .625rem; - } - - .flatpickr-prev-month, - .flatpickr-next-month { - top: .625rem; - } - - .flatpickr-current-month { - font-size: 115%; - } - - .flatpickr-day { - border-radius: $border-radius; - - &:hover { - background-color: $light; - border-color: $input-border-color; - } - } - - .flatpickr-day.prevMonthDay { - color: $text-muted !important; - } - - .flatpickr-day.today { - border-color: $border-color; - } - - .flatpickr-day.selected { - background-color: $primary; - border-color: $primary; - color: $white !important; - } - - .flatpickr-day.inRange { - background-color: $light; - border: none; - border-radius: 0; - box-shadow: -5px 0 0 $light, 5px 0 0 $light; - } - -} \ No newline at end of file +// +// flatpickr.scss +// Flatpickr plugin overrides +// + +.flatpickr-calendar { + background-color: $input-bg; + border: $input-border-width solid $input-border-color; + color: $input-color; + box-shadow: none; + + * { + color: inherit !important; + fill: currentColor !important; + } + + &.arrowTop:before { + border-bottom-color: $input-border-color; + } + + &.arrowTop:after { + border-bottom-color: $input-bg; + } + + .flatpickr-months { + padding-top: .625rem; + padding-bottom: .625rem; + } + + .flatpickr-prev-month, + .flatpickr-next-month { + top: .625rem; + } + + .flatpickr-current-month { + font-size: 115%; + } + + .flatpickr-day { + border-radius: $border-radius; + + &:hover { + background-color: $light; + border-color: $input-border-color; + } + } + + .flatpickr-day.prevMonthDay { + color: $text-muted !important; + } + + .flatpickr-day.today { + border-color: $border-color; + } + + .flatpickr-day.selected { + background-color: $primary; + border-color: $primary; + color: $white !important; + } + + .flatpickr-day.inRange { + background-color: $light; + border: none; + border-radius: 0; + box-shadow: -5px 0 0 $light, 5px 0 0 $light; + } + +} diff --git a/explorer/src/scss/dashkit/vendors/_list.scss b/explorer/src/scss/dashkit/vendors/_list.scss index 7c82a04e66..1eade7a5d0 100644 --- a/explorer/src/scss/dashkit/vendors/_list.scss +++ b/explorer/src/scss/dashkit/vendors/_list.scss @@ -1,11 +1,11 @@ -// -// list.scss -// - -[data-toggle="lists"] .pagination > li { - @extend .page-item; -} - -[data-toggle="lists"] .pagination .page { - @extend .page-link; -} +// +// list.scss +// + +[data-toggle="lists"] .pagination > li { + @extend .page-item; +} + +[data-toggle="lists"] .pagination .page { + @extend .page-link; +} diff --git a/explorer/src/scss/dashkit/vendors/_quill.scss b/explorer/src/scss/dashkit/vendors/_quill.scss index c4a83a01d1..ac9add03a5 100644 --- a/explorer/src/scss/dashkit/vendors/_quill.scss +++ b/explorer/src/scss/dashkit/vendors/_quill.scss @@ -1,283 +1,283 @@ -// -// quill.scss -// Quill plugin overrides -// - -.ql-container { - font-family: $font-family-base; -} - -.ql-toolbar { - position: relative; - padding: $input-padding-y $input-padding-x; - background-color: $input-bg; - border: $input-border-width solid $input-border-color; - border-radius: $input-border-radius $input-border-radius 0 0; - color: $input-color; -} - -.ql-toolbar + .ql-container { - margin-top: -$border-width; -} - -.ql-toolbar + .ql-container .ql-editor { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.ql-editor { - min-height: $line-height-base * $font-size-base * 4; - display: block; - width: 100%; - padding: $input-padding-y $input-padding-x; - font-size: $font-size-base; - line-height: $input-line-height; - color: $input-color; - background-color: $input-bg; - background-clip: padding-box; - border: $input-border-width solid $input-border-color; - - // Note: This has no effect on `s in CSS. - @if $enable-rounded { - // Manually use the if/else instead of the mixin to account for iOS override - border-radius: $input-border-radius; - } - - @else { - // Otherwise undo the iOS default - border-radius: 0; - } - - @include box-shadow($input-box-shadow); - @include transition($input-transition); - - // Unstyle the caret on `s in some browsers, due to the limited stylability of ``s in IE10+. + &::-ms-expand { + background-color: transparent; + border: 0; + } + + // Customize the `:focus` state to imitate native WebKit styles. + @include form-control-focus($ignore-warning: true); +} + +.ql-hidden { + position: absolute; + transform: scale(0); +} + + +// Placeholder + +.ql-editor.ql-blank::before { + top: $input-padding-y; + left: $input-padding-x; + font-style: normal; + color: $input-placeholder-color; +} + +.ql-editor:focus::before { + display: none; +} + + +// Toolbar + +.ql-formats { + padding-left: .5rem; + padding-right: .5rem; + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } +} + +.ql-toolbar button { + padding: 0 .25rem; + background: none; + border: none; + color: $body-color; + cursor: pointer; + transition: $transition-base; + + &:hover { + color: $primary; + } + + &:first-child { + margin-left: -.25rem; + } +} + +.ql-toolbar .ql-active { + color: $primary; +} + +.ql-toolbar button svg { + height: $font-size-lg; + width: $font-size-lg; +} + +.ql-toolbar .ql-stroke { + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + fill: none; +} + +.ql-toolbar .ql-thin { + stroke-width: 1; +} + +.ql-toolbar .ql-fill { + fill: currentColor; +} + +.ql-toolbar input.ql-image { + position: absolute; + transform: scale(0); +} + + +// Tooltip + +.ql-tooltip { + position: absolute; + display: flex; + flex-wrap: nowrap; + width: 18.5rem; + background-color: $popover-bg; + border: $popover-border-width solid $popover-border-color; + border-radius: $popover-border-radius; + padding: $input-padding-y $input-padding-x; + margin-top: .6rem; // arrow width + box-shadow: $popover-box-shadow; + + // Arrow + + &:before, &:after { + content: ''; + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + } + + &:before { + border-bottom: .6rem solid $popover-border-color; + border-left: .6rem solid transparent; + border-right: .6rem solid transparent; + } + + &:after { + border-bottom: .5rem solid $popover-bg; + border-left: .5rem solid transparent; + border-right: .5rem solid transparent; + } +} + +.ql-container .ql-tooltip:hover { + display: flex !important; +} + +.ql-tooltip .ql-preview { + 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 transition($btn-transition); +} + +.ql-tooltip.ql-editing .ql-preview { + display: none; +} + +.ql-tooltip input { + display: none; + width: 100%; + padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); + padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); + background-color: transparent; + font-size: $font-size-sm; + line-height: $input-line-height-sm; + border: none; + color: $input-color; + + &:focus { + outline: none; + } +} + +.ql-tooltip.ql-editing input { + display: block; +} + + +.ql-tooltip .ql-action, +.ql-tooltip .ql-remove { + margin-left: .25rem; +} + +.ql-tooltip .ql-action::before, +.ql-tooltip .ql-remove::before { + display: inline-block; + font-weight: $btn-font-weight; + text-align: center; + white-space: nowrap; + vertical-align: middle; + user-select: none; + border: $btn-border-width solid transparent; + 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 transition($btn-transition); + + // Share hover and focus styles + @include hover-focus { + text-decoration: none; + } + + &:focus, + &.focus { + outline: 0; + box-shadow: $btn-focus-box-shadow; + } +} + +.ql-tooltip .ql-action::before, +.ql-tooltip.ql-editing .ql-action::before { + @include button-variant($primary, $primary); +} + +.ql-tooltip .ql-action::before { + content: 'Edit'; +} + +.ql-tooltip.ql-editing .ql-action::before { + content: 'Save'; +} + +.ql-tooltip .ql-remove::before { + @include button-variant($white, $white); + content: 'Remove'; + border-color: $gray-300; +} + +.ql-tooltip.ql-editing .ql-remove::before { + display: none; +} + + +// Formatting + +.ql-editor blockquote { + margin-bottom: $spacer; + font-size: $blockquote-font-size; +} + +.ql-editor img { + max-width: 100%; + height: auto; +} diff --git a/explorer/src/scss/dashkit/vendors/_select2.scss b/explorer/src/scss/dashkit/vendors/_select2.scss index d05967cd54..9c70da9f14 100644 --- a/explorer/src/scss/dashkit/vendors/_select2.scss +++ b/explorer/src/scss/dashkit/vendors/_select2.scss @@ -1,128 +1,128 @@ -// -// select2.scss -// Select2 plugin overrides -// - -[class*="select2"] { - display: block; -} - -.select2 { - width: 100% !important; -} - -.select2-hidden-accessible { - display: none; -} - -.select2-selection[aria-expanded="true"] { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.select2-container { - display: block; -} - -.select2-dropdown { - margin-top: -$input-border-width; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.select2-search--dropdown { - padding: $dropdown-item-padding-y $input-padding-x; -} - -.select2-search--dropdown .select2-search__field { - width: 100%; - height: $input-height-sm; - padding: $input-padding-y-sm $input-padding-x-sm; - background-color: $input-bg; - border: $input-border-width solid $input-border-color; - border-radius: $input-border-radius-sm; - line-height: $input-line-height-sm; - font-size: $input-font-size-sm; - color: $input-color; - transition: $input-transition; - - &:focus { - border-color: $input-focus-border-color; - box-shadow: $input-focus-box-shadow; - outline: none; - } -} - -.select2-results__options { - padding-left: 0; - margin-bottom: 0; -} - -.select2-results__option { - padding: $dropdown-item-padding-y $input-padding-x; - color: $dropdown-link-color; - - &:not(.select2-results__message) { - cursor: pointer; - - @include hover-focus { - color: $dropdown-link-hover-color; - } - } -} - -.select2-results__option[aria-selected="true"], -.select2-results__option--highlighted { - color: $dropdown-link-active-color; -} - -.select2-selection--multiple { - height: auto; -} - -.select2-selection__rendered { - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin: 0 -.25rem -.25rem 0; -} - -.select2-selection__choice { - display: inline-flex; - align-items: center; - padding-left: .375rem; - padding-right: .375rem; - margin: 0 .25rem .25rem 0; - font-size: $font-size-sm; - background-color: $light; - border-radius: $border-radius-xs; -} - -.select2-selection__choice__remove { - order: 2; - margin-left: .5rem; - color: $text-muted; - cursor: pointer; - - @include hover { - color: $body-color; - } -} - -.select2-search--inline .select2-search__field { - height: calc(1em * #{$input-line-height}); - padding-bottom: .25rem; - background-color: transparent; - border: 0; - box-shadow: none; - outline: none; - color: $input-color; - - &::placeholder { - color: $input-placeholder-color; - } -} - -.select2-selection__placeholder { - color: $input-placeholder-color; -} +// +// select2.scss +// Select2 plugin overrides +// + +[class*="select2"] { + display: block; +} + +.select2 { + width: 100% !important; +} + +.select2-hidden-accessible { + display: none; +} + +.select2-selection[aria-expanded="true"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-container { + display: block; +} + +.select2-dropdown { + margin-top: -$input-border-width; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.select2-search--dropdown { + padding: $dropdown-item-padding-y $input-padding-x; +} + +.select2-search--dropdown .select2-search__field { + width: 100%; + height: $input-height-sm; + padding: $input-padding-y-sm $input-padding-x-sm; + background-color: $input-bg; + border: $input-border-width solid $input-border-color; + border-radius: $input-border-radius-sm; + line-height: $input-line-height-sm; + font-size: $input-font-size-sm; + color: $input-color; + transition: $input-transition; + + &:focus { + border-color: $input-focus-border-color; + box-shadow: $input-focus-box-shadow; + outline: none; + } +} + +.select2-results__options { + padding-left: 0; + margin-bottom: 0; +} + +.select2-results__option { + padding: $dropdown-item-padding-y $input-padding-x; + color: $dropdown-link-color; + + &:not(.select2-results__message) { + cursor: pointer; + + @include hover-focus { + color: $dropdown-link-hover-color; + } + } +} + +.select2-results__option[aria-selected="true"], +.select2-results__option--highlighted { + color: $dropdown-link-active-color; +} + +.select2-selection--multiple { + height: auto; +} + +.select2-selection__rendered { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin: 0 -.25rem -.25rem 0; +} + +.select2-selection__choice { + display: inline-flex; + align-items: center; + padding-left: .375rem; + padding-right: .375rem; + margin: 0 .25rem .25rem 0; + font-size: $font-size-sm; + background-color: $light; + border-radius: $border-radius-xs; +} + +.select2-selection__choice__remove { + order: 2; + margin-left: .5rem; + color: $text-muted; + cursor: pointer; + + @include hover { + color: $body-color; + } +} + +.select2-search--inline .select2-search__field { + height: calc(1em * #{$input-line-height}); + padding-bottom: .25rem; + background-color: transparent; + border: 0; + box-shadow: none; + outline: none; + color: $input-color; + + &::placeholder { + color: $input-placeholder-color; + } +} + +.select2-selection__placeholder { + color: $input-placeholder-color; +} diff --git a/explorer/src/scss/theme-dark.scss b/explorer/src/scss/theme-dark.scss index 5a4114ff83..ae6958f4c9 100644 --- a/explorer/src/scss/theme-dark.scss +++ b/explorer/src/scss/theme-dark.scss @@ -1,30 +1,30 @@ -/** - * Dashkit - * - * Custom variables followed by Dashkit variables followed by Bootstrap variables - * to ensure cascade of styles. - */ - -// Bootstrap functions -@import '~bootstrap/scss/functions.scss'; - -// Custom variables -@import 'solana-variables'; - -// Dark mode variables -@import 'dashkit/dark/variables-dark'; - -// Dashkit variables -@import 'dashkit/variables'; - -// Bootstrap core -@import '~bootstrap/scss/bootstrap.scss'; - -// Dashkit core -@import 'dashkit/dashkit'; - -// Dark mode overrides -@import 'dashkit/dark/overrides-dark'; - -// Custom core -@import 'solana'; +/** + * Dashkit + * + * Custom variables followed by Dashkit variables followed by Bootstrap variables + * to ensure cascade of styles. + */ + +// Bootstrap functions +@import '~bootstrap/scss/functions.scss'; + +// Custom variables +@import 'solana-variables'; + +// Dark mode variables +@import 'dashkit/dark/variables-dark'; + +// Dashkit variables +@import 'dashkit/variables'; + +// Bootstrap core +@import '~bootstrap/scss/bootstrap.scss'; + +// Dashkit core +@import 'dashkit/dashkit'; + +// Dark mode overrides +@import 'dashkit/dark/overrides-dark'; + +// Custom core +@import 'solana'; diff --git a/explorer/src/scss/theme.scss b/explorer/src/scss/theme.scss index a332956113..cac3b13565 100644 --- a/explorer/src/scss/theme.scss +++ b/explorer/src/scss/theme.scss @@ -1,27 +1,27 @@ -/** - * Dashkit - * - * Custom variables followed by Dashkit variables followed by Bootstrap variables - * to ensure cascade of styles. - */ - - // Icon font -@import "../fonts/feather/feather"; - -// Bootstrap functions -@import '~bootstrap/scss/functions.scss'; - -// Custom variables -@import 'solana-variables'; - -// Dashkit variables -@import 'dashkit/variables'; - -// Bootstrap core -@import '~bootstrap/scss/bootstrap.scss'; - -// Dashkit core -@import 'dashkit/dashkit'; - -// Custom core -@import 'solana'; +/** + * Dashkit + * + * Custom variables followed by Dashkit variables followed by Bootstrap variables + * to ensure cascade of styles. + */ + + // Icon font +@import "../fonts/feather/feather"; + +// Bootstrap functions +@import '~bootstrap/scss/functions.scss'; + +// Custom variables +@import 'solana-variables'; + +// Dashkit variables +@import 'dashkit/variables'; + +// Bootstrap core +@import '~bootstrap/scss/bootstrap.scss'; + +// Dashkit core +@import 'dashkit/dashkit'; + +// Custom core +@import 'solana'; diff --git a/explorer/src/utils/date.ts b/explorer/src/utils/date.ts index d2a42d6e00..4778d70f8b 100644 --- a/explorer/src/utils/date.ts +++ b/explorer/src/utils/date.ts @@ -1,5 +1,5 @@ export function displayTimestamp(unixTimestamp: number): string { - const expireDate = new Date(unixTimestamp * 1000); + const expireDate = new Date(unixTimestamp); const dateString = new Intl.DateTimeFormat("en-US", { year: "numeric", month: "long",