mirror of
https://github.com/tabler/tabler.git
synced 2026-07-25 20:44:38 +04:00
Merge branch 'dev' into dev-nouislider
This commit is contained in:
Dawid Harat
+34
-21
@@ -1,30 +1,37 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@mixin dark-mode {
|
||||
$dark-body-bg: #222935;
|
||||
$dark-body-color: #afbdd1;
|
||||
$dark-border-color: rgba($border-color, .01);
|
||||
|
||||
@mixin dark-mode {
|
||||
&,
|
||||
.modal-content,
|
||||
.dropdown-menu {
|
||||
color: #afbdd1;
|
||||
background: $dark;
|
||||
}
|
||||
|
||||
.dropdown-menu-arrow::after {
|
||||
border-bottom-color: $dark;
|
||||
.dropdown-menu,
|
||||
.example-bg {
|
||||
color: $dark-body-color;
|
||||
background: $dark-body-bg;
|
||||
}
|
||||
|
||||
.card,
|
||||
.header,
|
||||
.sidebar,
|
||||
.sidenav,
|
||||
.topnav,
|
||||
.navbar,
|
||||
.form-control,
|
||||
.form-select,
|
||||
.form-switch .form-check-input,
|
||||
.selectgroup-button {
|
||||
.topbar {
|
||||
color: inherit;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: rgba($white, .02);
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.form-control-light {
|
||||
background: $dark-border-color;
|
||||
}
|
||||
|
||||
.example,
|
||||
.card-footer,
|
||||
.card-header,
|
||||
.table th, .markdown table th, .table td, .markdown table td,
|
||||
.dropdown-menu {
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
@@ -32,20 +39,26 @@
|
||||
}
|
||||
|
||||
.avatar-list-stacked .avatar {
|
||||
box-shadow: 0 0 0 2px #2b3648;
|
||||
box-shadow: 0 0 0 2px #222226;
|
||||
}
|
||||
|
||||
.navbar-brand-logo {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.form-fieldset {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
@include dark-mode ();
|
||||
@media not print {
|
||||
body.theme-dark {
|
||||
@include dark-mode;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.auto-theme-dark {
|
||||
@include dark-mode ();
|
||||
@include dark-mode;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
$debug: false;
|
||||
|
||||
@if $debug {
|
||||
$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "lime": $lime, "green": $green, "teal": $teal, "cyan": $cyan);
|
||||
|
||||
@each $name, $color in $colors {
|
||||
@debug ("#{$name}: '#{$color}'");
|
||||
@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
|
||||
@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
|
||||
@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
|
||||
@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
|
||||
@debug ("#{$name}-500: '#{$color}'");
|
||||
@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
|
||||
@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
|
||||
@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
|
||||
@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
|
||||
}
|
||||
|
||||
@debug ("gray: '#{$gray-500}'");
|
||||
@debug ("gray-100: '#{$gray-100}'");
|
||||
@debug ("gray-200: '#{$gray-200}'");
|
||||
@debug ("gray-300: '#{$gray-300}'");
|
||||
@debug ("gray-400: '#{$gray-400}'");
|
||||
@debug ("gray-500: '#{$gray-500}'");
|
||||
@debug ("gray-600: '#{$gray-600}'");
|
||||
@debug ("gray-700: '#{$gray-700}'");
|
||||
@debug ("gray-800: '#{$gray-800}'");
|
||||
@debug ("gray-900: '#{$gray-900}'");
|
||||
|
||||
@debug ("border-color: '#{$border-color}'");
|
||||
@debug ("text-muted: '#{$text-muted}'");
|
||||
}
|
||||
|
||||
|
||||
+40
-10
@@ -20,16 +20,6 @@ $utilities: (
|
||||
wide: .05em,
|
||||
)
|
||||
),
|
||||
"leading": (
|
||||
property: line-height,
|
||||
class: leading,
|
||||
values: (
|
||||
none: 1,
|
||||
tight: 1.25,
|
||||
normal: $line-height-base,
|
||||
loose: 2 !important,
|
||||
)
|
||||
),
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
class: cursor,
|
||||
@@ -66,4 +56,44 @@ $utilities: (
|
||||
black: 900,
|
||||
)
|
||||
),
|
||||
"border": (
|
||||
property: border,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
wide: $border-width-wide solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
wide: $border-width-wide solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-right": (
|
||||
property: border-right,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
wide: $border-width-wide solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
wide: $border-width-wide solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-left": (
|
||||
property: border-left,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
wide: $border-width-wide solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
) !default;
|
||||
|
||||
+95
-94
@@ -1,3 +1,6 @@
|
||||
//ASSETS BASE
|
||||
$assets-base: ".." !default;
|
||||
|
||||
// FONTS
|
||||
$google-font: "Source Sans Pro" !default;
|
||||
|
||||
@@ -8,22 +11,25 @@ $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
||||
$icon-fonts: () !default;
|
||||
|
||||
// COLORS
|
||||
$full-black: rgba(0, 0, 0, 1) !default;
|
||||
$full-white: rgba(255, 255, 255, 1) !default;
|
||||
$light-black: rgba(0, 0, 0, .4) !default;
|
||||
$light-white: rgba(255, 255, 255, .4) !default;
|
||||
$min-black: rgba(135, 150, 165, .032) !default;
|
||||
$min-white: rgba(255, 255, 255, .032) !default;
|
||||
$theme-color-interval: 10% !default;
|
||||
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$light: #f5f7fb !default;
|
||||
$dark: #354052 !default;
|
||||
|
||||
$light-black: rgba($dark, .4) !default;
|
||||
$light-white: rgba($light, .4) !default;
|
||||
$min-black: rgba($dark, .02) !default;
|
||||
$min-white: rgba($light, .02) !default;
|
||||
|
||||
$gray-100: $light !default;
|
||||
$gray-200: mix($light, $dark, 98%) !default;
|
||||
$gray-300: mix($light, $dark, 94%) !default;
|
||||
$gray-400: mix($light, $dark, 88%) !default;
|
||||
$gray-500: mix($light, $dark, 79%) !default;
|
||||
$gray-600: mix($light, $dark, 63%) !default;
|
||||
$gray-700: mix($light, $dark, 45%) !default;
|
||||
$gray-800: mix($light, $dark, 22%) !default;
|
||||
$gray-900: $dark !default;
|
||||
|
||||
$blue: #206bc4 !default;
|
||||
$azure: #45aaf2 !default;
|
||||
@@ -40,26 +46,21 @@ $cyan: #17a2b8 !default;
|
||||
$black: #000000 !default;
|
||||
$white: #ffffff !default;
|
||||
|
||||
$light: #f5f7fb !default;
|
||||
$dark: #354052 !default;
|
||||
$text-muted: $gray-700 !default;
|
||||
$border-color: $gray-400 !default;
|
||||
$hover-bg: $gray-200 !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$secondary: $text-muted !default;
|
||||
$success: $green !default;
|
||||
$info: $azure !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$body-bg: $light !default;
|
||||
$body-color: $dark !default;
|
||||
|
||||
$text-muted: #8a91a5 !default;
|
||||
|
||||
$border-color: #dce3e9 !default;
|
||||
$border-color-alpha: rgba(138, 160, 180, .3) !default;
|
||||
|
||||
$hover-bg: rgba(138, 160, 180, 0.1) !default;
|
||||
|
||||
$social-colors: (
|
||||
"facebook": #3b5998,
|
||||
@@ -78,16 +79,6 @@ $social-colors: (
|
||||
"tabler": #206bc4
|
||||
) !default;
|
||||
|
||||
$status-colors: (
|
||||
"primary": $blue,
|
||||
"secondary": $gray-600,
|
||||
"success": $green,
|
||||
"info": $cyan,
|
||||
"warning": $yellow,
|
||||
"danger": $red,
|
||||
"dark": $dark,
|
||||
) !default;
|
||||
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"azure": $azure,
|
||||
@@ -108,31 +99,37 @@ $colors: (
|
||||
) !default;
|
||||
|
||||
$avatar-sizes: (
|
||||
"sm": 1.25rem,
|
||||
"xs": 1.5rem,
|
||||
"sm": 2rem,
|
||||
"md": 3rem,
|
||||
"lg": 4.5rem,
|
||||
"xl": 6rem
|
||||
) !default;
|
||||
|
||||
//Fonts
|
||||
$font-size-base: 1rem !default;
|
||||
$font-weight-base: 400 !default;
|
||||
$line-height-base: 1.6 !default;
|
||||
$font-size-base: .9375rem !default;
|
||||
$font-weight-bold: 600 !default;
|
||||
$body-letter-spacing: null !default;
|
||||
|
||||
$line-height-base: 1.6 !default;
|
||||
$line-height-sm: 1.3333334 !default;
|
||||
$line-height-lg: 2 !default;
|
||||
|
||||
$border-width: 1px !default;
|
||||
$border-width-wide: 2px !default;
|
||||
$border-radius: 3px !default;
|
||||
|
||||
//Typography
|
||||
$headings-font-weight: 600 !default;
|
||||
$headings-font-weight: $font-weight-bold !default;
|
||||
|
||||
$small-font-size: 87.5% !default;
|
||||
|
||||
$h1-font-size: (26rem / 16) !default;
|
||||
$h2-font-size: (21rem / 16) !default;
|
||||
$h3-font-size: (18rem / 16) !default;
|
||||
$h4-font-size: (16rem / 16) !default;
|
||||
$h5-font-size: (14rem / 16) !default;
|
||||
$h6-font-size: (12rem / 16) !default;
|
||||
$h1-font-size: (26em / 15) !default;
|
||||
$h2-font-size: (23em / 15) !default;
|
||||
$h3-font-size: (18em / 15) !default;
|
||||
$h4-font-size: (15em / 15) !default;
|
||||
$h5-font-size: (13em / 15) !default;
|
||||
$h6-font-size: (11em / 15) !default;
|
||||
|
||||
$blockquote-font-size: $h4-font-size !default;
|
||||
|
||||
@@ -179,14 +176,6 @@ $sizes-percentage: (
|
||||
) !default;
|
||||
|
||||
|
||||
|
||||
$enable-social-colors: true !default;
|
||||
$enable-ghost-buttons: true !default;
|
||||
$enable-color-hues: true !default;
|
||||
$enable-extra-colors: true !default;
|
||||
|
||||
$enable-gradients: false !default;
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
@@ -195,7 +184,10 @@ $container-max-widths: (
|
||||
) !default;
|
||||
|
||||
//alerts
|
||||
$alert-link-font-weight: 600 !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-bg-level: -8 !default;
|
||||
$alert-border-level: -6 !default;
|
||||
$alert-color-level: 8 !default;
|
||||
|
||||
//breadcrumb
|
||||
$breadcrumb-variants: (
|
||||
@@ -205,19 +197,21 @@ $breadcrumb-variants: (
|
||||
) !default;
|
||||
|
||||
//badges
|
||||
$badge-font-weight: 500 !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-empty-size: .5rem !default;
|
||||
|
||||
//buttons
|
||||
$input-btn-line-height: 1.5 !default;
|
||||
$input-btn-font-size: 15px !default;
|
||||
$input-color: $body-color !default;
|
||||
$input-btn-line-height: (22/15) !default;
|
||||
$input-btn-font-size: $font-size-base !default;
|
||||
|
||||
$input-btn-font-size-sm: 12px !default;
|
||||
$input-btn-padding-x-sm: 6px !default;
|
||||
$input-btn-padding-y-sm: 1px !default;
|
||||
$input-btn-font-size-sm: $h5-font-size !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
$input-btn-padding-y-sm: .125rem !default;
|
||||
|
||||
$input-btn-font-size-lg: 20px !default;
|
||||
$input-btn-padding-x-lg: 20px !default;
|
||||
$input-btn-padding-y-lg: 8px !default;
|
||||
$input-btn-font-size-lg: $h2-font-size !default;
|
||||
$input-btn-padding-x-lg: 1.5rem !default;
|
||||
$input-btn-padding-y-lg: .5rem !default;
|
||||
|
||||
$input-height: null !default;
|
||||
$input-height-sm: null !default;
|
||||
@@ -233,11 +227,11 @@ $card-border-radius: $border-radius !default;
|
||||
$card-cap-bg: $min-black !default;
|
||||
|
||||
$card-active-border-color: $primary !default;
|
||||
$card-status-size: 2px !default;
|
||||
$card-status-size: $border-width-wide !default;
|
||||
$card-group-margin: 1.5rem !default;
|
||||
|
||||
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
|
||||
$card-shadow-hover: rgba($dark, .08) 0 2px 12px 0 !default;
|
||||
$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
|
||||
|
||||
//close
|
||||
$close-font-weight: 400 !default;
|
||||
@@ -245,32 +239,33 @@ $close-font-size: 1.5rem !default;
|
||||
|
||||
//dropdown
|
||||
$dropdown-item-padding-x: 1rem !default;
|
||||
$dropdown-font-size: $h5-font-size !default;
|
||||
$dropdown-divider-bg: $border-color-alpha !default;
|
||||
$dropdown-font-size: $h4-font-size !default;
|
||||
$dropdown-divider-bg: $border-color !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-link-hover-bg: $hover-bg !default;
|
||||
$dropdown-link-hover-color: inherit !default;
|
||||
$dropdown-spacer: 1px !default;
|
||||
|
||||
//grid
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1280px
|
||||
) !default;
|
||||
|
||||
//loader
|
||||
$loader-size: 2.5rem !default;
|
||||
|
||||
//navbar
|
||||
$navbar-bg: $white !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
|
||||
//nav
|
||||
$nav-link-padding-y: .25rem !default;
|
||||
$nav-link-padding-y: 1rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
//pagination
|
||||
$pagination-border-width: 0 !default;
|
||||
@@ -281,20 +276,6 @@ $pagination-bg: transparent !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-color: rgba($text-muted, .5) !default;
|
||||
|
||||
//sidenav
|
||||
$sidenav-width: 16rem !default;
|
||||
$sidenav-folded-width: 4rem !default;
|
||||
$sidenav-bg: $white !default;
|
||||
$sidenav-border-color: $border-color-alpha !default;
|
||||
$sidenav-dark-bg: $dark !default;
|
||||
$sidenav-link-padding-x: .75rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
//steps
|
||||
$steps-border-width: 2px !default;
|
||||
@@ -340,16 +321,22 @@ $input-border-radius: $border-radius !default;
|
||||
|
||||
|
||||
//Forms
|
||||
$form-check-input-width: 1em !default;
|
||||
$form-check-input-width: 1rem !default;
|
||||
$form-check-padding-left: $form-check-input-width + .5rem !default;
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: 1px solid $border-color !default;
|
||||
$form-check-input-border-radius: $border-radius !default;
|
||||
$form-check-input-checked-bg-size: .75rem !default;
|
||||
|
||||
$form-switch-width: 1.75rem !default;
|
||||
$form-switch-padding-left: $form-switch-width + .5rem !default;
|
||||
|
||||
$form-range-track-height: .25rem !default;
|
||||
|
||||
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
|
||||
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
|
||||
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
|
||||
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
|
||||
|
||||
$caret-width: .32em !default;
|
||||
|
||||
//Flags
|
||||
$generate-flags: true !default;
|
||||
@@ -359,3 +346,17 @@ $flag-sizes: (
|
||||
"xl": 4rem
|
||||
) !default;
|
||||
|
||||
//Payments
|
||||
$payment-sizes: (
|
||||
"md": 2rem,
|
||||
"lg": 3rem,
|
||||
"xl": 4rem
|
||||
) !default;
|
||||
|
||||
|
||||
|
||||
$enable-social-colors: true !default;
|
||||
$enable-ghost-buttons: true !default;
|
||||
$enable-color-hues: true !default;
|
||||
$enable-extra-colors: true !default;
|
||||
$enable-gradients: false !default;
|
||||
|
||||
+8
-20
@@ -11,25 +11,13 @@ body {
|
||||
touch-action: manipulation;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga" 0;
|
||||
|
||||
* {
|
||||
@include scrollbar;
|
||||
}
|
||||
|
||||
@media print {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
body *::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: .3s background;
|
||||
}
|
||||
|
||||
body *::-webkit-scrollbar-thumb {
|
||||
background: $gray-400;
|
||||
}
|
||||
|
||||
body *:hover::-webkit-scrollbar-thumb {
|
||||
background: $gray-500;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
+366
-139
@@ -1,182 +1,409 @@
|
||||
/**
|
||||
Layout
|
||||
*/
|
||||
@mixin menu-side {
|
||||
align-items: flex-start;
|
||||
}
|
||||
//sidenav
|
||||
$sidenav-width: 16rem;
|
||||
$sidenav-width-folded: 4rem;
|
||||
$sidenav-bg: $white;
|
||||
$sidenav-border-color: $border-color;
|
||||
$sidenav-dark-bg: $dark;
|
||||
$sidenav-padding: 1.25rem;
|
||||
$sidenav-breakpoint-show: 'sm';
|
||||
$sidenav-breakpoint-folded: 'lg';
|
||||
$sidenav-folded-item-height: 3.5rem;
|
||||
|
||||
@mixin menu-collapsed {
|
||||
.layout-area-menu {
|
||||
position: fixed;
|
||||
left: -($sidenav-width);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $dark;
|
||||
color: $white;
|
||||
width: $sidenav-width;
|
||||
z-index: $zindex-fixed;
|
||||
transition: .3s left;
|
||||
@mixin sidebar-folded($breakpoint-folded) {
|
||||
@if $breakpoint-folded {
|
||||
|
||||
@include menu-side;
|
||||
}
|
||||
@include media-breakpoint-down($breakpoint-folded) {
|
||||
width: $sidenav-width-folded;
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: rgba($dark, .1);
|
||||
z-index: $zindex-fixed - 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.sidebar-brand {
|
||||
width: $sidenav-width-folded;
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-content {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
.layout-area-menu {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .sidebar-nav-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
.layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
&:hover {
|
||||
background: $primary;
|
||||
width: $sidenav-width;
|
||||
|
||||
grid-template: "head" auto "menu" auto "main" auto /
|
||||
100%;
|
||||
}
|
||||
> .sidebar-nav-link {
|
||||
color: #ffffff;
|
||||
|
||||
.layout-collapsed {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@if $infix != '' {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.icon {
|
||||
margin-right: add(1rem, $sidenav-padding);
|
||||
}
|
||||
}
|
||||
|
||||
&#{$infix} {
|
||||
@include menu-collapsed;
|
||||
.sidebar-subnav {
|
||||
display: block;
|
||||
|
||||
.sidebar-nav-link {
|
||||
padding-left: $sidenav-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .sidebar-nav-link {
|
||||
min-height: $sidenav-folded-item-height;
|
||||
padding: 0 1rem !important;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
width: 2rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 2.5rem;
|
||||
top: 1rem;
|
||||
|
||||
text-indent: -99999px;
|
||||
width: $badge-empty-size;
|
||||
height: $badge-empty-size;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include menu-collapsed;
|
||||
|
||||
.sidebar-subnav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: $sidenav-folded-item-height;
|
||||
left: $sidenav-width-folded;
|
||||
right: 0;
|
||||
padding: .5rem 0;
|
||||
background: $dark;
|
||||
box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
|
||||
}
|
||||
|
||||
.sidebar-nav-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-nav-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
@mixin sidebar-show($breakpoint-show) {
|
||||
@include media-breakpoint-down($breakpoint-show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.layout-toggler {
|
||||
|
||||
/**
|
||||
Topnav
|
||||
*/
|
||||
.topnav {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
|
||||
.navbar-brand-logo {
|
||||
&-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||
&-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-width;
|
||||
}
|
||||
}
|
||||
|
||||
&-folded#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-folded-width;
|
||||
}
|
||||
&-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
width: 2rem;
|
||||
/**
|
||||
Topbar
|
||||
*/
|
||||
.topbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 .5rem;
|
||||
z-index: $zindex-sticky;
|
||||
min-height: $navbar-height;
|
||||
|
||||
& + & {
|
||||
top: add($navbar-height, 1px);
|
||||
}
|
||||
|
||||
& + & + & {
|
||||
top: add($navbar-height * 2, 2px);
|
||||
}
|
||||
|
||||
.sidebar + .content & {
|
||||
left: $sidenav-width;
|
||||
|
||||
@if $sidenav-breakpoint-folded {
|
||||
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||
left: $sidenav-width-folded;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||
left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-fixed {
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
/**
|
||||
Wrapper
|
||||
*/
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
Content
|
||||
*/
|
||||
.content {
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
padding: 0 .5rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar + & {
|
||||
margin-left: $sidenav-width;
|
||||
|
||||
@if $sidenav-breakpoint-folded {
|
||||
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||
margin-left: $sidenav-width-folded;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
@media print {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.topbar + & {
|
||||
padding-top: add($navbar-height, 1px);
|
||||
}
|
||||
|
||||
.topbar + .topbar + & {
|
||||
padding-top: add($navbar-height * 2, 2px);
|
||||
}
|
||||
|
||||
.topbar + .topbar + .topbar + & {
|
||||
padding-top: add($navbar-height * 3, 3px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Sidebar
|
||||
*/
|
||||
.sidebar {
|
||||
width: $sidenav-width;
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
padding: 0;
|
||||
background: $sidenav-bg;
|
||||
box-shadow: inset -1px 0 $sidenav-border-color;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include sidebar-folded($sidenav-breakpoint-folded);
|
||||
@include sidebar-show($sidenav-breakpoint-show);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
line-height: $navbar-height;
|
||||
width: $sidenav-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand-logo {
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
opacity: .8;
|
||||
|
||||
&-icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
margin-left: -.75rem;
|
||||
&-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
||||
transition-duration: 75ms;
|
||||
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -.5rem;
|
||||
transition: top 75ms ease .12s, opacity 75ms ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: -.5rem;
|
||||
transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
||||
}
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
transform: rotate(45deg);
|
||||
transition-delay: .12s;
|
||||
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
transition: top 75ms ease, opacity 75ms ease .12s;
|
||||
opacity: 0;
|
||||
@if $sidenav-breakpoint-folded {
|
||||
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||
&-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
||||
transform: rotate(-90deg);
|
||||
&-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-topnav {
|
||||
grid-area: head;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
.sidebar-content {
|
||||
padding: $sidenav-padding;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
@include scrollbar(true);
|
||||
|
||||
.sidebar-brand + & {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-menu {
|
||||
grid-area: menu;
|
||||
/**
|
||||
Sidebar menu
|
||||
*/
|
||||
.sidebar-nav {
|
||||
margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: none;
|
||||
.sidebar-nav-link {
|
||||
padding: .5rem $sidenav-padding;
|
||||
transition: .3s color, .3s background-color;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sidebar-nav-item .sidebar-nav-item & {
|
||||
padding-left: add(1.5rem, $sidenav-padding);
|
||||
}
|
||||
|
||||
.sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
|
||||
padding-left: add(3rem, $sidenav-padding);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#fff, .02);
|
||||
text-decoration: none;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
box-shadow: inset 3px 0 $primary;
|
||||
background-color: rgba(#fff, .01);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-main {
|
||||
grid-area: main;
|
||||
.sidebar-nav-arrow {
|
||||
display: block;
|
||||
|
||||
margin-left: auto;
|
||||
@include caret(right);
|
||||
|
||||
&:after {
|
||||
transition: .3s transform;
|
||||
}
|
||||
|
||||
.sidebar-nav-link[aria-expanded="true"] &:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-subnav {
|
||||
}
|
||||
|
||||
.sidebar-nav-title {
|
||||
@include subheader(false);
|
||||
color: inherit;
|
||||
opacity: .8;
|
||||
padding: $sidenav-padding $sidenav-padding .5rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Sidebar dark
|
||||
*/
|
||||
.sidebar-dark {
|
||||
background: $sidenav-dark-bg;
|
||||
color: $text-muted;
|
||||
box-shadow: none;
|
||||
|
||||
.sidebar-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
+11
-13
@@ -1,7 +1,6 @@
|
||||
.navbar {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
//padding-top: 0;
|
||||
//padding-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -21,19 +20,18 @@ Navbar logo
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
position: relative;
|
||||
.nav-item {
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
bottom: subtract(-$navbar-padding-y, 1px);
|
||||
right: $navbar-nav-link-padding-x;
|
||||
left: $navbar-nav-link-padding-x;
|
||||
border-bottom: 1px solid $primary;
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.page-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.5rem;
|
||||
margin: .25rem 0 1.5rem;
|
||||
min-height: 2.25rem;
|
||||
margin: .25rem 0 $card-spacer-y;
|
||||
|
||||
>* {
|
||||
flex: 1;
|
||||
@@ -18,5 +18,5 @@
|
||||
font-size: $h2-font-size;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: $body-color;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -1,161 +0,0 @@
|
||||
$sidenav-padding-x: 1rem;
|
||||
$sidenav-padding-y: 1rem;
|
||||
$sidenav-active-color: $primary;
|
||||
$breakpoints: $grid-breakpoints;
|
||||
|
||||
@mixin sidenav-overlay {
|
||||
display: none;
|
||||
|
||||
body.show-sidenav & {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed - 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba($dark, .1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidenav-base {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: .3s opacity, .3s transform;
|
||||
will-change: transform;
|
||||
width: $sidenav-width;
|
||||
min-width: $sidenav-width;
|
||||
|
||||
&.sidenav-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
body.show-sidenav & {
|
||||
@include sidenav-visible-common;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidenav-visible-common {
|
||||
transform: translateX(0) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@mixin sidenav-expanded {
|
||||
@include sidenav-visible-common;
|
||||
width: $sidenav-width;
|
||||
min-width: $sidenav-width;
|
||||
|
||||
&:not(.sidenav-right) ~ .layout-main {
|
||||
//padding-left: $sidenav-width;
|
||||
}
|
||||
|
||||
&.sidenav-right ~ .layout-main {
|
||||
//padding-right: $sidenav-width;
|
||||
}
|
||||
|
||||
& ~ .sidenav-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidenav-folded {
|
||||
@include sidenav-visible-common;
|
||||
width: $sidenav-folded-width;
|
||||
min-width: $sidenav-folded-width;
|
||||
|
||||
&:not(.sidenav-right) ~ .layout-main {
|
||||
//padding-left: $sidenav-folded-width;
|
||||
}
|
||||
|
||||
&.sidenav-right ~ .layout-main {
|
||||
//padding-right: $sidenav-folded-width;
|
||||
}
|
||||
|
||||
& ~ .sidenav-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Sidebar
|
||||
*/
|
||||
.sidenav {
|
||||
@include sidenav-base;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: inherit;
|
||||
justify-content: flex-start;
|
||||
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
pointer-events: inherit;
|
||||
user-select: none;
|
||||
background: $sidenav-bg;
|
||||
padding: $sidenav-padding-y $sidenav-padding-x;
|
||||
padding: 0; //todo: remove
|
||||
|
||||
box-shadow: 1px 0 $sidenav-border-color;
|
||||
|
||||
/*
|
||||
Right navbar
|
||||
*/
|
||||
&.sidenav-right {
|
||||
order: 9;
|
||||
box-shadow: -1px 0 $sidenav-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-overlay {
|
||||
@include sidenav-overlay;
|
||||
}
|
||||
|
||||
/*
|
||||
Folded navbar
|
||||
*/
|
||||
.sidenav-folded {
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
&#{$infix} {
|
||||
@include sidenav-folded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-expanded {
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
&#{$infix} {
|
||||
@include sidenav-expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Utils
|
||||
*/
|
||||
.hide-sidenav-folded {
|
||||
.sidenav.sidenav-folded & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-sidenav-expanded {
|
||||
.sidenav:not(.sidenav-folded) & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,14 @@
|
||||
@function px2rem($px) {
|
||||
@return ($px / 16px) * 1rem;
|
||||
}
|
||||
|
||||
@function alpha-attribute($color, $background) {
|
||||
$percent: alpha($color) * 100%;
|
||||
$opaque: opacify($color, 1);
|
||||
|
||||
@return mix($opaque, $background, $percent);
|
||||
}
|
||||
//@function alpha-attribute($color, $background) {
|
||||
// $percent: alpha($color) * 100%;
|
||||
// $opaque: opacify($color, 1);
|
||||
//
|
||||
// @return mix($opaque, $background, $percent);
|
||||
//}
|
||||
|
||||
@function theme-color-lighter($color) {
|
||||
@return alpha-attribute(rgba($color, .2), #fff);
|
||||
@return tint-color($color, 8);
|
||||
}
|
||||
|
||||
@function theme-color-lightest($color) {
|
||||
@return mix($color, #fff, 10%);
|
||||
}
|
||||
|
||||
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@mixin subheader($include-color: true) {
|
||||
font-size: $h6-font-size;
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
|
||||
@@ -8,3 +8,31 @@
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar($is-dark: false) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: .3s background;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
|
||||
@if ($is-dark) {
|
||||
background: transparent;
|
||||
} @else {
|
||||
background: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background: $gray-500;
|
||||
|
||||
@if ($is-dark) {
|
||||
background: mix(#fff, $dark, 20%);
|
||||
} @else {
|
||||
background: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/*!
|
||||
* Tabler Charts (v0.9.0)
|
||||
* Tabler Payments (v0.1.0)
|
||||
* Copyright 2018-2019 The Tabler Authors
|
||||
* Copyright 2018-2019 codecalm
|
||||
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
@import "config";
|
||||
@import "ui/charts";
|
||||
@import "config";
|
||||
@import "ui/payments";
|
||||
|
||||
+11
-6
@@ -31,11 +31,12 @@
|
||||
@import "ui/grid";
|
||||
@import "ui/highlight";
|
||||
@import "ui/icons";
|
||||
@import "ui/inputs";
|
||||
@import "ui/forms/input.colorinput";
|
||||
@import "ui/forms/input.imagecheck";
|
||||
@import "ui/forms/input.selectgroup";
|
||||
@import "ui/forms/input.custom";
|
||||
@import "ui/forms";
|
||||
@import "ui/forms/form-icon";
|
||||
@import "ui/forms/form-colorinput";
|
||||
@import "ui/forms/form-imagecheck";
|
||||
@import "ui/forms/form-selectgroup";
|
||||
@import "ui/forms/form-custom";
|
||||
@import "ui/legend";
|
||||
@import "ui/lists";
|
||||
@import "ui/loaders";
|
||||
@@ -53,6 +54,7 @@
|
||||
@import "ui/toasts";
|
||||
@import "ui/toolbar";
|
||||
@import "ui/typo";
|
||||
@import "ui/charts";
|
||||
|
||||
@import "ui/examples";
|
||||
|
||||
@@ -60,7 +62,6 @@
|
||||
@import "vendor/selectize";
|
||||
@import "vendor/jqvmap";
|
||||
@import "vendor/apexcharts";
|
||||
@import "vendor/sparkline";
|
||||
@import "vendor/fullcalendar";
|
||||
|
||||
@import "utils/border";
|
||||
@@ -73,3 +74,7 @@
|
||||
|
||||
@import "dark";
|
||||
@import "rtl";
|
||||
|
||||
@import "debug";
|
||||
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
|
||||
|
||||
.badge {
|
||||
@include subheader(false);
|
||||
background: $gray-200;
|
||||
@@ -8,9 +10,9 @@
|
||||
|
||||
&:empty {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
width: $badge-empty-size;
|
||||
height: $badge-empty-size;
|
||||
min-width: 0;
|
||||
height: 8px;
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
+39
-66
@@ -1,12 +1,26 @@
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
letter-spacing: .01em;
|
||||
.btn-secondary {
|
||||
@include button-variant($white, $border-color, $dark);
|
||||
}
|
||||
|
||||
&:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]):not(.btn-secondary) {
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
|
||||
.btn-outlined-secondary {
|
||||
@include button-outline-variant($white, $border-color, $dark);
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: 600;
|
||||
|
||||
&:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]) {
|
||||
&:not(.btn-secondary) {
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, .02);
|
||||
}
|
||||
|
||||
&:not(.btn-light):not(.btn-link) {
|
||||
background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 90%);
|
||||
}
|
||||
|
||||
&:not(:focus):not(.focus) {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
|
||||
@@ -18,13 +32,19 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
margin: 0 .5em 0 -.25em;
|
||||
margin: 0 .25em 0 -.25em;
|
||||
font-size: 1.2em;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
vertical-align: text-top;
|
||||
margin: 0 .5em 0 -.25em;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
margin: 0 -.25em 0 .5em;
|
||||
}
|
||||
@@ -36,16 +56,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-avatar {
|
||||
margin: 0 .25rem 0 -.25rem;
|
||||
|
||||
@at-root .btn #{&} {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
.btn-lg {
|
||||
svg.icon {
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,8 +69,10 @@
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
min-width: add($btn-line-height * $btn-font-size + $btn-padding-y * 2, $btn-border-width * 2);
|
||||
|
||||
.icon {
|
||||
margin: 0 -.5em;
|
||||
margin: 0 -1em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,17 +81,15 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@include button-variant(#fff, $border-color, $body-color);
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -.5rem;
|
||||
font-size: 0;
|
||||
margin-right: -.5rem;
|
||||
|
||||
> .btn,
|
||||
> .dropdown {
|
||||
@@ -120,17 +133,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-loader {
|
||||
display: none;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: inherit;
|
||||
|
||||
@at-root .btn-loading & {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -149,32 +151,3 @@
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-floating {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
/**
|
||||
Button with label
|
||||
*/
|
||||
.btn-label {
|
||||
position: relative;
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
.btn-label-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: px2rem(36px);
|
||||
padding-top: px2rem(6px);
|
||||
padding-bottom: px2rem(6px);
|
||||
margin-bottom: 0;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
+24
-2
@@ -2,6 +2,11 @@
|
||||
margin-bottom: $card-group-margin;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
@media print {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@at-root a#{&} {
|
||||
color: inherit;
|
||||
transition: .3s box-shadow;
|
||||
@@ -15,7 +20,7 @@
|
||||
|
||||
.card-sm {
|
||||
.card-body {
|
||||
padding: .75rem;
|
||||
padding: map-get($spacers, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,6 +118,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin-left: auto;
|
||||
font-size: $h5-font-size;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -154,6 +168,7 @@
|
||||
font-size: $h3-font-size;
|
||||
font-weight: $headings-font-weight;
|
||||
color: $headings-color;
|
||||
line-height: (24/18);
|
||||
|
||||
@at-root a#{&}:hover {
|
||||
color: inherit;
|
||||
@@ -172,9 +187,17 @@
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@media print {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body-scrollable {
|
||||
@@ -330,7 +353,6 @@ Card list group
|
||||
|
||||
.list-group-item {
|
||||
padding-right: $card-spacer-x;
|
||||
|
||||
padding-left: $card-spacer-x;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
|
||||
+30
-3
@@ -17,8 +17,35 @@
|
||||
//outline: 1px solid red;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
background-image: linear-gradient(135deg, $border-color 25%, transparent 25%, transparent 50%, $border-color 50%, $border-color 75%, transparent 75%, transparent 100%);
|
||||
background-size: 14.14px 14.14px;
|
||||
|
||||
.chart-sparkline {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chart-sparkline-square {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.chart-sparkline-wide {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.chart-sparkline-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $h6-font-size;
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
+5
-1
@@ -4,9 +4,13 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 3rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 2rem;
|
||||
|
||||
+1
-1
@@ -31,7 +31,7 @@
|
||||
|
||||
@each $country in $countries {
|
||||
.flag-#{$country} {
|
||||
background-image: url("/img/flags/#{$country}.svg");
|
||||
background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,19 +5,12 @@ textarea {
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@extend .h5;
|
||||
font-size: $h4-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
display: block;
|
||||
|
||||
&.row {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -65,7 +58,7 @@ Form help
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: px2rem(12px);
|
||||
font-size: $h5-font-size;
|
||||
line-height: 1rem;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
@@ -2,7 +2,7 @@
|
||||
max-height: 40rem;
|
||||
margin: 1rem 0 2rem;
|
||||
overflow: auto;
|
||||
font-size: px2rem(15px);
|
||||
font-size: $font-size-base;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 3px;
|
||||
@@ -232,7 +232,7 @@
|
||||
.c1 { color: #75715e; } /* Comment.Single */
|
||||
.cs { color: #75715e; } /* Comment.Special */
|
||||
.ge { font-style: italic; } /* Generic.Emph */
|
||||
.gs { font-weight: 700; } /* Generic.Strong */
|
||||
.gs { font-weight: $font-weight-bold; } /* Generic.Strong */
|
||||
.kc { color: #66d9ef; } /* Keyword.Constant */
|
||||
.kd { color: #66d9ef; } /* Keyword.Declaration */
|
||||
.kn { color: #f92672; } /* Keyword.Namespace */
|
||||
|
||||
+3
-2
@@ -18,13 +18,14 @@
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
font-size: px2rem(20px);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
font-size: px2rem(40px);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.icons-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
+3
-3
@@ -12,7 +12,7 @@
|
||||
|
||||
.list-bordered {
|
||||
.list-item {
|
||||
border-top: 1px solid $border-color-alpha;
|
||||
border-top: 1px solid $border-color;
|
||||
margin-top: -1px;
|
||||
|
||||
&:first-child {
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
.list-timeline-title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.list-timeline-content {
|
||||
@@ -154,7 +154,7 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $primary;
|
||||
background: rgba($primary, .06);
|
||||
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
padding: $card-title-spacer-y $card-spacer-x;
|
||||
line-height: 20px;
|
||||
color: $text-muted;
|
||||
cursor: pointer;
|
||||
@@ -34,7 +34,7 @@
|
||||
.nav-tabs-alt {
|
||||
.nav-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.page-link {
|
||||
min-width: px2rem(26px);
|
||||
min-width: 1.5rem;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
$payment-icons: ('2checkout-dark', '2checkout', 'alipay-dark', 'alipay', 'amazon-dark', 'amazon', 'americanexpress-dark', 'americanexpress', 'applepay-dark', 'applepay', 'bancontact-dark', 'bancontact', 'bitcoin-dark', 'bitcoin', 'bitpay-dark', 'bitpay', 'cirrus-dark', 'cirrus', 'clickandbuy-dark', 'clickandbuy', 'coinkite-dark', 'coinkite', 'dinersclub-dark', 'dinersclub', 'directdebit-dark', 'directdebit', 'discover-dark', 'discover', 'dwolla-dark', 'dwolla', 'ebay-dark', 'ebay', 'eway-dark', 'eway', 'giropay-dark', 'giropay', 'googlewallet-dark', 'googlewallet', 'ingenico-dark', 'ingenico', 'jcb-dark', 'jcb', 'klarna-dark', 'klarna', 'laser-dark', 'laser', 'maestro-dark', 'maestro', 'mastercard-dark', 'mastercard', 'monero-dark', 'monero', 'neteller-dark', 'neteller', 'ogone-dark', 'ogone', 'okpay-dark', 'okpay', 'paybox-dark', 'paybox', 'paymill-dark', 'paymill', 'payone-dark', 'payone', 'payoneer-dark', 'payoneer', 'paypal-dark', 'paypal', 'paysafecard-dark', 'paysafecard', 'payu-dark', 'payu', 'payza-dark', 'payza', 'ripple-dark', 'ripple', 'sage-dark', 'sage', 'sepa-dark', 'sepa', 'shopify-dark', 'shopify', 'skrill-dark', 'skrill', 'solo-dark', 'solo', 'square-dark', 'square', 'stripe-dark', 'stripe', 'switch-dark', 'switch', 'ukash-dark', 'ukash', 'unionpay-dark', 'unionpay', 'verifone-dark', 'verifone', 'verisign-dark', 'verisign', 'visa-dark', 'visa', 'webmoney-dark', 'webmoney', 'westernunion-dark', 'westernunion', 'worldpay-dark', 'worldpay');
|
||||
|
||||
.payment {
|
||||
width: 2.5rem;
|
||||
height: 1.5rem;
|
||||
display: inline-block;
|
||||
background: no-repeat center/100% 100%;
|
||||
vertical-align: bottom;
|
||||
font-style: normal;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
|
||||
border-radius: 2px;
|
||||
|
||||
}
|
||||
|
||||
@each $payment in $payment-icons {
|
||||
.payment-#{$payment} {
|
||||
background-image: url("#{$assets-base}/img/payments/#{$payment}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@each $payment-size, $size in $payment-sizes {
|
||||
.payment-size-#{$payment-size} {
|
||||
width: $size * 1.66666;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
@@ -39,6 +39,10 @@
|
||||
height: .25rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress-bar-indeterminate {
|
||||
&::after,
|
||||
&::before {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
z-index: 1;
|
||||
padding: .25rem .75rem;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: 700;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 1.5rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
padding: 0 .25rem;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
background: $gray-200;
|
||||
|
||||
+1
-1
@@ -87,7 +87,7 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
&::before {
|
||||
background: #fff;
|
||||
|
||||
@@ -6,6 +6,10 @@
|
||||
background: $min-black;
|
||||
border-width: $table-border-width;
|
||||
@include subheader;
|
||||
|
||||
@media print {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+10
-1
@@ -27,8 +27,9 @@ h6,
|
||||
}
|
||||
|
||||
strong,
|
||||
.strong,
|
||||
b {
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@@ -50,6 +51,14 @@ blockquote {
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
dd {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 3px;
|
||||
background: rgba($code-color, .03);
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
Bootstrap color input
|
||||
*/
|
||||
.form-control-color {
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
.form-check-input {
|
||||
margin-top: .25rem;
|
||||
transition: .3s background-position, .3s background-color;
|
||||
}
|
||||
@@ -35,18 +35,3 @@ Icon input
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Bootstrap color input
|
||||
*/
|
||||
|
||||
.form-control-color {
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
background: $white;
|
||||
transition: .3s background-position, .3s background-color;
|
||||
}
|
||||
@@ -1,40 +1,3 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
$border-sizing: () !default;
|
||||
$border-sizing: map-merge(
|
||||
(
|
||||
2: 2,
|
||||
4: 4
|
||||
),
|
||||
$border-sizing
|
||||
) !default;
|
||||
|
||||
@each $size, $value in $border-sizing {
|
||||
|
||||
.border-#{$size} {
|
||||
border-width: $border-width * $value !important;
|
||||
}
|
||||
|
||||
.border-top-#{$size} {
|
||||
border-top-style: solid;
|
||||
border-top-width: $border-width * $value !important;
|
||||
}
|
||||
|
||||
.border-right-#{$size} {
|
||||
border-right-style: solid;
|
||||
border-right-width: $border-width * $value !important;
|
||||
}
|
||||
|
||||
.border-bottom-#{$size} {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: $border-width * $value !important;
|
||||
}
|
||||
|
||||
.border-left-#{$size} {
|
||||
border-left-style: solid;
|
||||
border-left-width: $border-width * $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
||||
@@ -5,12 +5,10 @@ COLORS VARIATIONS
|
||||
*/
|
||||
@if $enable-color-hues {
|
||||
@each $color, $value in $colors {
|
||||
.bg-#{$color}-lightest { background: mix($value, #fff, 10%); }
|
||||
.bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
|
||||
.bg-#{$color}-light { background: mix($value, #fff, 70%); }
|
||||
.bg-#{$color}-dark { background: mix($value, #000, 80%); }
|
||||
.bg-#{$color}-darker { background: mix($value, #000, 40%); }
|
||||
.bg-#{$color}-darkest { background: mix($value, #000, 20%); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Vendored
+2
-2
@@ -1,9 +1,9 @@
|
||||
.apexcharts-title-text {
|
||||
font-weight: 600 !important;
|
||||
font-weight: $font-weight-bold !important;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
font-weight: 600 !important;
|
||||
font-weight: $font-weight-bold !important;
|
||||
padding-bottom: .25rem !important;
|
||||
}
|
||||
|
||||
|
||||
Vendored
+2
-2
@@ -32,7 +32,7 @@
|
||||
|
||||
.fc-day-header {
|
||||
padding-bottom: .25rem;
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
&.card-calendar {
|
||||
@@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
.fc-time {
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
|
||||
Vendored
+11
@@ -1,9 +1,20 @@
|
||||
.selectize-control {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&.multi .selectize-input > div {
|
||||
font-size: $h5-font-size;
|
||||
margin: 0 8px 2px 0;
|
||||
padding: 2px 8px;
|
||||
border-radius: $border-radius;
|
||||
background-color: $gray-200;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
display: flex !important;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $input-font-size;
|
||||
|
||||
Vendored
-31
@@ -1,31 +0,0 @@
|
||||
.sparkline {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sparkline-square {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.sparkline-wide {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.sparkline-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: px2rem(11px);
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user