Add announcement banner to explorer (#11210)
* Add announcement banner to explorer * Remove ^M and trailing spaces * Update Banner.tsx
This commit is contained in:
Justin Starry
GitHub
parent
234449c627
commit
f796adc5ea
|
|
@ -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() {
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<Banner />
|
||||
|
||||
<Switch>
|
||||
<Route exact path="/supply">
|
||||
<TabbedPage tab="Supply">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
import React from "react";
|
||||
import { useCluster, Cluster } from "providers/cluster";
|
||||
import { displayTimestamp } from "utils/date";
|
||||
|
||||
type Announcement = {
|
||||
message: string;
|
||||
estimate?: string;
|
||||
start?: Date;
|
||||
end?: Date;
|
||||
};
|
||||
|
||||
const announcements = new Map<Cluster, Announcement>();
|
||||
// announcements.set(Cluster.Devnet, {
|
||||
// message: "Devnet API node is restarting",
|
||||
// start: new Date("July 25, 2020 18:00:00 GMT+8:00"),
|
||||
// estimate: "2 hours",
|
||||
// });
|
||||
// announcements.set(Cluster.MainnetBeta, {
|
||||
// message: "Mainnet Beta upgrade in progress. Transactions are disabled",
|
||||
// start: new Date("August 1, 2020 00:00:00 GMT+0:00"),
|
||||
// end: new Date("August 3, 2020 00:00:00 GMT+0:00"),
|
||||
// });
|
||||
|
||||
export default function Banner() {
|
||||
const cluster = useCluster().cluster;
|
||||
const announcement = announcements.get(cluster);
|
||||
if (!announcement) return null;
|
||||
const { message, start, end, estimate } = announcement;
|
||||
|
||||
const now = new Date();
|
||||
if (end && now > end) return null;
|
||||
if (start && now < start) return null;
|
||||
|
||||
return (
|
||||
<div className="bg-danger text-white">
|
||||
<div className="container">
|
||||
<div className="d-flex flex-column align-items-center justify-content-center text-center py-3">
|
||||
<h3 className="mb-3">
|
||||
<span className="fe fe-alert-circle mr-2"></span>
|
||||
{message}
|
||||
</h3>
|
||||
<hr className="text-gray-500 w-100 mt-0 mb-3 opacity-50" />
|
||||
{estimate && (
|
||||
<h5 className="font-sm text-gray-200">
|
||||
<span className="text-uppercase">Estimated Duration: </span>
|
||||
{estimate}
|
||||
</h5>
|
||||
)}
|
||||
{start && (
|
||||
<h5 className="font-sm text-gray-200">
|
||||
<span className="text-uppercase">Started at: </span>
|
||||
{displayTimestamp(start.getTime())}
|
||||
</h5>
|
||||
)}
|
||||
{end && (
|
||||
<h5 className="font-sm text-gray-200">
|
||||
<span className="text-uppercase">End: </span>
|
||||
{displayTimestamp(end.getTime())}
|
||||
</h5>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ function StatusCard({ signature }: Props) {
|
|||
<td>Timestamp</td>
|
||||
<td className="text-right">
|
||||
{info.timestamp !== "unavailable" ? (
|
||||
displayTimestamp(info.timestamp)
|
||||
displayTimestamp(info.timestamp * 1000)
|
||||
) : (
|
||||
<InfoTooltip
|
||||
bottom
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export function StakeAccountCards({
|
|||
function LockupCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
|
||||
const unixTimestamp = stakeAccount.meta?.lockup.unixTimestamp;
|
||||
if (unixTimestamp && unixTimestamp > 0) {
|
||||
const prettyTimestamp = displayTimestamp(unixTimestamp);
|
||||
const prettyTimestamp = displayTimestamp(unixTimestamp * 1000);
|
||||
return (
|
||||
<div className="alert alert-warning text-center">
|
||||
<strong>Account is locked!</strong> Lockup expires on {prettyTimestamp}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
//
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
//
|
||||
// close.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Small
|
||||
|
||||
.close-sm {
|
||||
font-size: $close-font-size-sm;
|
||||
}
|
||||
//
|
||||
// close.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Small
|
||||
|
||||
.close-sm {
|
||||
font-size: $close-font-size-sm;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
//
|
||||
// code.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Dashkit =================================
|
||||
//
|
||||
|
||||
// Highlight
|
||||
//
|
||||
// Hightlight.js overrides
|
||||
|
||||
.highlight {
|
||||
padding: 0;
|
||||
}
|
||||
//
|
||||
// code.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Dashkit =================================
|
||||
//
|
||||
|
||||
// Highlight
|
||||
//
|
||||
// Hightlight.js overrides
|
||||
|
||||
.highlight {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
//
|
||||
// jumbotron.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Bootstrap Overrides =====================================
|
||||
//
|
||||
|
||||
.jumbotron {
|
||||
padding: ($jumbotron-padding / 2);
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
//
|
||||
// jumbotron.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Bootstrap Overrides =====================================
|
||||
//
|
||||
|
||||
.jumbotron {
|
||||
padding: ($jumbotron-padding / 2);
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
// Mixins
|
||||
//
|
||||
//
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/badge";
|
||||
|
||||
// Components
|
||||
// ...
|
||||
|
||||
// Skins
|
||||
// ...
|
||||
|
||||
// Layout
|
||||
// ...
|
||||
// Mixins
|
||||
//
|
||||
//
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/badge";
|
||||
|
||||
// Components
|
||||
// ...
|
||||
|
||||
// Skins
|
||||
// ...
|
||||
|
||||
// Layout
|
||||
// ...
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// reboot.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Remove the cancel buttons in Chrome and Safari on macOS.
|
||||
//
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
//
|
||||
// root.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
//
|
||||
// root.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$text-muted}'/></svg>"), "#", "%23");
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$text-muted}'/></svg>"), "#", "%23");
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table checkbox
|
||||
|
||||
.table-checkbox {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.table-checkbox .custom-control-label::before,
|
||||
.table-checkbox .custom-control-label::after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
//
|
||||
// toasts.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
//
|
||||
// toasts.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import 'utilities/background';
|
||||
@import 'utilities/borders';
|
||||
@import 'utilities/lift';
|
||||
@import 'utilities/sizing';
|
||||
@import 'utilities/type';
|
||||
@import 'utilities/background';
|
||||
@import 'utilities/borders';
|
||||
@import 'utilities/lift';
|
||||
@import 'utilities/sizing';
|
||||
@import 'utilities/type';
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 `<body>` 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 `<body>` 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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
//
|
||||
// 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
//
|
||||
// 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
//
|
||||
// sizing.scss
|
||||
//
|
||||
|
||||
.vw-100 {
|
||||
width: 100vw !important;
|
||||
}
|
||||
.vh-100 {
|
||||
height: 100vh !important;
|
||||
}
|
||||
//
|
||||
// sizing.scss
|
||||
//
|
||||
|
||||
.vw-100 {
|
||||
width: 100vw !important;
|
||||
}
|
||||
.vh-100 {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <select>s in some browsers, due to the limited stylability of `<select>`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 `<select>`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;
|
||||
}
|
||||
//
|
||||
// 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 <select>s in some browsers, due to the limited stylability of `<select>`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 `<select>`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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue