clean-up
This commit is contained in:
Łukasz Holeczek
parent
df584f4644
commit
25cb3070b4
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -1,130 +0,0 @@
|
||||
// Bootstrap overrides
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f0f3f5;
|
||||
$gray-200: #c2cfd6;
|
||||
$gray-300: #a4b7c1;
|
||||
$gray-400: #869fac;
|
||||
$gray-500: #678898;
|
||||
$gray-600: #536c79;
|
||||
$gray-700: #3e515b;
|
||||
$gray-800: #29363d;
|
||||
$gray-900: #151b1e;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #20a8d8;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f86c6b;
|
||||
$orange: #f8cb00;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #4dbd74;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #63c2de;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
);
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-300,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800,
|
||||
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
|
||||
gray-100: $gray-100,
|
||||
gray-200: $gray-200,
|
||||
gray-300: $gray-300,
|
||||
gray-400: $gray-400,
|
||||
gray-500: $gray-500,
|
||||
gray-600: $gray-600,
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900
|
||||
);
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-transitions: true;
|
||||
$enable-rounded: false;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #e4e5e6;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-size-base: 0.875rem;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: #fff;
|
||||
$breadcrumb-margin-bottom: 1.5rem;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $gray-200;
|
||||
$card-cap-bg: $gray-100;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-padding-y: 0;
|
||||
$dropdown-border-color: $gray-200;
|
||||
$dropdown-divider-bg: $gray-100;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-secondary-border: $gray-300;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-100;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-accent: $gray-100;
|
||||
$table-bg-hover: $gray-100;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-group-addon-bg: $gray-100;
|
||||
$input-border-color: $gray-200;
|
||||
$input-group-addon-border-color: $gray-200;
|
||||
@ -1 +0,0 @@
|
||||
// core overrides
|
||||
@ -1 +0,0 @@
|
||||
// Here you can add other styles
|
||||
@ -1,27 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
// animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
.aside-menu {
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $aside-menu-width;
|
||||
color: $aside-menu-color;
|
||||
background: $aside-menu-bg;
|
||||
@include borders($aside-menu-borders);
|
||||
|
||||
.nav-tabs {
|
||||
border-color: $border-color;
|
||||
.nav-link {
|
||||
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
|
||||
color: $body-color;
|
||||
border-top: 0;
|
||||
&.active {
|
||||
color: theme-color("primary");
|
||||
border-right-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
.nav-item:first-child {
|
||||
.nav-link {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($aside-menu-bg, 5%);
|
||||
border-right: 1px solid darken($aside-menu-bg, 5%);
|
||||
border-left: 1px solid darken($aside-menu-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($aside-menu-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
.img-avatar {
|
||||
border-radius: 50em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
$width: 36px;
|
||||
$status-width: 10px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-xs {
|
||||
$width: 20px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-sm {
|
||||
$width: 24px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-lg {
|
||||
$width: 72px;
|
||||
$status-width: 12px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatars-stack {
|
||||
.avatar.avatar-xs {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
// .avatar.avatar-sm {
|
||||
//
|
||||
// }
|
||||
|
||||
.avatar {
|
||||
margin-right: -15px;
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
|
||||
|
||||
&:hover {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .avatar.avatar-lg {
|
||||
//
|
||||
// }
|
||||
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.badge-pill {
|
||||
border-radius: $badge-pill-border-radius;
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.breadcrumb-menu {
|
||||
margin-left: auto;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 $input-btn-padding-x;
|
||||
color: $text-muted;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.btn {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 180px;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
@ -1,566 +0,0 @@
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook,
|
||||
.btn-twitter,
|
||||
.btn-linkedin,
|
||||
.btn-flickr,
|
||||
.btn-tumblr,
|
||||
.btn-xing,
|
||||
.btn-github,
|
||||
.btn-html5,
|
||||
.btn-openid,
|
||||
.btn-stack-overflow,
|
||||
.btn-youtube,
|
||||
.btn-css3,
|
||||
.btn-dribbble,
|
||||
.btn-google-plus,
|
||||
.btn-instagram,
|
||||
.btn-pinterest,
|
||||
.btn-vk,
|
||||
.btn-yahoo,
|
||||
.btn-behance,
|
||||
.btn-dropbox,
|
||||
.btn-reddit,
|
||||
.btn-spotify,
|
||||
.btn-vine,
|
||||
.btn-foursquare,
|
||||
.btn-vimeo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@include button-social-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
|
||||
|
||||
&.btn-lg {
|
||||
@include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@include button-social-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
$color: $facebook;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09a";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
$color: $twitter;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f099";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
$color: $linkedin;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0e1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flickr {
|
||||
$color: $flickr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tumblr {
|
||||
$color: $tumblr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f173";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xing {
|
||||
$color: $xing;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f168";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
$color: $github;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-html5 {
|
||||
$color: $html5;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-openid {
|
||||
$color: $openid;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-stack-overflow {
|
||||
$color: $stack-overflow;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-css3 {
|
||||
$color: $css3;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
$color: $youtube;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f167";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
$color: $dribbble;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f17d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
$color: $google-plus;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d5";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
$color: $instagram;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
$color: $pinterest;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d2";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vk {
|
||||
$color: $vk;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f189";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-yahoo {
|
||||
$color: $yahoo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-behance {
|
||||
$color: $behance;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1b4";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dropbox {
|
||||
$color: $dropbox;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reddit {
|
||||
$color: $reddit;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1a1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spotify {
|
||||
$color: $spotify;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1bc";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vine {
|
||||
$color: $vine;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1ca";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-foursquare {
|
||||
$color: $foursquare;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f180";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vimeo {
|
||||
$color: $vimeo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f194";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
.callout {
|
||||
position: relative;
|
||||
padding: 0 $spacer;
|
||||
margin: $spacer 0;
|
||||
border: 0 solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
|
||||
@if $enable-rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-bordered {
|
||||
border: 1px solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
}
|
||||
.callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.callout + .callout {
|
||||
margin-top: - .25rem;
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-left-color: $text-muted;
|
||||
|
||||
h4 {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.callout-#{$color} {
|
||||
border-left-color: $value;
|
||||
|
||||
h4 {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
.card {
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: darken($value, 12.5%);
|
||||
.card-header {
|
||||
background-color: darken($value, 3%);
|
||||
border-color: darken($value, 12.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-white .text-muted {
|
||||
color: rgba(255,255,255,.6) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
||||
.icon-bg {
|
||||
display: inline-block;
|
||||
padding: $card-spacer-y $card-spacer-x !important;
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-right: $card-spacer-x;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -$card-spacer-x;
|
||||
line-height: inherit;
|
||||
color: $card-icon-color;
|
||||
vertical-align: bottom;
|
||||
background: $card-icon-bg;
|
||||
border-right: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $card-spacer-y $card-spacer-x / 2;
|
||||
color: $text-muted;
|
||||
border-top: 0;
|
||||
|
||||
&.active {
|
||||
color: $body-color;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-header-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: - $input-btn-padding-y;
|
||||
}
|
||||
.btn-sm {
|
||||
margin-top: - $input-btn-padding-y-sm;
|
||||
}
|
||||
.btn-lg {
|
||||
margin-top: - $input-btn-padding-y-lg;
|
||||
}
|
||||
}
|
||||
//
|
||||
.card-footer {
|
||||
|
||||
ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
padding: 0 $card-spacer-x;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="card-outline-"] {
|
||||
.card-body {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
&.card-outline-top {
|
||||
border-top-width: 2px;
|
||||
border-right-color: $border-color;
|
||||
border-bottom-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-accent-#{$color} {
|
||||
@include card-accent-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Card Actions
|
||||
.card-header {
|
||||
> i {
|
||||
margin-right: $spacer / 2;
|
||||
}
|
||||
.card-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
//height: inherit;
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50px;
|
||||
padding: $card-spacer-y 0;
|
||||
margin: 0 !important;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-left: 1px solid $border-color;
|
||||
box-shadow: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.r180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 230px;
|
||||
margin: 6px;
|
||||
|
||||
.input-group-prepend, .input-group-append {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-full {
|
||||
margin-top: - $spacer;
|
||||
margin-right: - $grid-gutter-width / 2;
|
||||
margin-left: - $grid-gutter-width / 2;
|
||||
border: 0;
|
||||
border-bottom: $card-border-width solid $border-color;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
|
||||
&.cols-2 {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&.drag, .drag {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
.card-placeholder {
|
||||
background: rgba(0,0,0,.025);
|
||||
border: 1px dashed $gray-300;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.chart-wrapper {
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
// scss-lint:disable QualifyingElement
|
||||
base-chart.chart {
|
||||
display: block !important;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// Temp fix for reactstrap
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu-right {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: -10px;
|
||||
color: $dropdown-border-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
padding: 8px 20px;
|
||||
background: $dropdown-divider-bg;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
.btn {
|
||||
margin-top: -7px;
|
||||
color: $dropdown-header-color;
|
||||
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
width: 250px;
|
||||
}
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.app-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 $spacer;
|
||||
color: $footer-color;
|
||||
background: $footer-bg;
|
||||
@include borders($footer-borders);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.row.row-equal {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
|
||||
[class*="col-"] {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.main .container-fluid {
|
||||
padding: 0 30px;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
@ -1,387 +0,0 @@
|
||||
// IE10&11 Flexbox fix
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
|
||||
.app,
|
||||
app-dashboard,
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
flex: 0 0 $navbar-height;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
flex: 0 0 $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
// $sidebar-width is the width of the columns
|
||||
flex: 0 0 $sidebar-width;
|
||||
// put the nav on the left
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
// $aside-menu-width is the width of the columns
|
||||
flex: 0 0 $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// header
|
||||
//
|
||||
.header-fixed {
|
||||
.app-header {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
}
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-off-canvas {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
position: fixed;
|
||||
top: $navbar-height;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky - 2;
|
||||
}
|
||||
|
||||
// if sidebar + main + aside
|
||||
.main:nth-child(2) {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
// if sidebar + main
|
||||
.main:first-child {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// if main + aside
|
||||
.main:last-child {
|
||||
.breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-minimized {
|
||||
.main .breadcrumb {
|
||||
left: $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden, &.sidebar-off-canvas {
|
||||
.main .breadcrumb {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.aside-menu-hidden, &.aside-menu-off-canvas {
|
||||
.main .breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky;
|
||||
height: $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-bottom: $footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
.app-header,
|
||||
.app-footer,
|
||||
.sidebar,
|
||||
.main,
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile layout
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
color: $navbar-color;
|
||||
} @else {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: - ($navbar-brand-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
|
||||
.breadcrumb-fixed {
|
||||
.main:nth-child(2) .breadcrumb {
|
||||
right: auto;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
|
||||
.sidebar-nav,
|
||||
.nav {
|
||||
width: $mobile-sidebar-width;
|
||||
min-height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// .aside-menu {
|
||||
// margin-right: - $aside-menu-width;
|
||||
// }
|
||||
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-right: - $mobile-sidebar-width !important;
|
||||
margin-left: $mobile-sidebar-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,128 +0,0 @@
|
||||
// Angular Version
|
||||
// Make clicks pass-through
|
||||
// scss-lint:disable all
|
||||
#loading-bar,
|
||||
#loading-bar-spinner {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
-moz-transition: 350ms linear all;
|
||||
-o-transition: 350ms linear all;
|
||||
-webkit-transition: 350ms linear all;
|
||||
transition: 350ms linear all;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter,
|
||||
#loading-bar.ng-leave.ng-leave-active,
|
||||
#loading-bar-spinner.ng-enter,
|
||||
#loading-bar-spinner.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter.ng-enter-active,
|
||||
#loading-bar.ng-leave,
|
||||
#loading-bar-spinner.ng-enter.ng-enter-active,
|
||||
#loading-bar-spinner.ng-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#loading-bar .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20002;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
border-top-right-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
-moz-transition: width 350ms;
|
||||
-o-transition: width 350ms;
|
||||
-webkit-transition: width 350ms;
|
||||
transition: width 350ms;
|
||||
}
|
||||
|
||||
// Fancy blur effect
|
||||
#loading-bar .peg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70px;
|
||||
height: 2px;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
-moz-box-shadow: #29d 1px 0 6px 1px;
|
||||
-ms-box-shadow: #29d 1px 0 6px 1px;
|
||||
-webkit-box-shadow: #29d 1px 0 6px 1px;
|
||||
box-shadow: #29d 1px 0 6px 1px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
#loading-bar-spinner {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10002;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#loading-bar-spinner .spinner-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #29d;
|
||||
border-left-color: #29d;
|
||||
border-radius: 50%;
|
||||
|
||||
-moz-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-ms-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-o-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-webkit-animation: loading-bar-spinner 400ms linear infinite;
|
||||
animation: loading-bar-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loading-bar-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes loading-bar-spinner {
|
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes loading-bar-spinner {
|
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes loading-bar-spinner {
|
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes loading-bar-spinner {
|
||||
0% { transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//Ajax & Static Version
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pace-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border: 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
padding: $padding-y 0;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar($width, $status-width) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $width;
|
||||
|
||||
.img-avatar {
|
||||
width: $width;
|
||||
height: $width;
|
||||
}
|
||||
|
||||
.avatar-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: $status-width;
|
||||
height: $status-width;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin borders($borders) {
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border: $size $style $color;
|
||||
} @else if $direction == "top" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-top: $size $style $color;
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-right: $size $style $color;
|
||||
} @else if $direction == "bottom" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-bottom: $size $style $color;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-left: $size $style $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-width($borders, $width) {
|
||||
$sidebar-width: $width;
|
||||
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: ($sidebar-width - (2 * $size));
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
}
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
|
||||
color: #fff !important;
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-accent-variant($color) {
|
||||
border-top-width: 2px;
|
||||
border-top-color: $color;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
|
||||
.modal-content {
|
||||
border-color: $value;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: #fff;
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
color: $gray-800;
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: -1px;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
.tab-pane {
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
.tab-content {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
@include borders($navbar-border);
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
width: $navbar-brand-width;
|
||||
height: $navbar-height;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
margin-right: 0;
|
||||
background-color: $navbar-brand-bg;
|
||||
background-image: $navbar-brand-logo;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $navbar-brand-logo-size;
|
||||
@include borders($navbar-brand-border);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
min-width: 50px;
|
||||
padding: $navbar-toggler-padding-y 0;
|
||||
|
||||
&:hover .navbar-toggler-icon {
|
||||
background-image: $navbar-toggler-icon-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
height: 23px;
|
||||
background-image: $navbar-toggler-icon;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
min-width: 50px;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: 0;
|
||||
border: 0;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding-bottom: 0;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.brand-minimized {
|
||||
.app-header.navbar {
|
||||
.navbar-brand {
|
||||
width: $navbar-brand-minimized-width;
|
||||
background-color: $navbar-brand-minimized-bg;
|
||||
background-image: $navbar-brand-minimized-logo;
|
||||
background-size: $navbar-brand-minimized-logo-size;
|
||||
@include borders($navbar-brand-minimized-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
hr.transparent {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.progress-xs {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.progress-sm {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// White progress bar
|
||||
.progress-white {
|
||||
background-color: rgba(255,255,255,.2) !important;
|
||||
.progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@ -1,281 +0,0 @@
|
||||
//
|
||||
// RTL Support
|
||||
//
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
*[dir="rtl"] {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
|
||||
ul {
|
||||
-webkit-padding-start: 0;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
.breadcrumb-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.breadcrumb-menu {
|
||||
right: auto;
|
||||
left: $breadcrumb-padding-x;
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
.dropdown-item {
|
||||
text-align: right;
|
||||
|
||||
i {
|
||||
margin-right: -10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
//margin-right: 0;
|
||||
margin-left: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
&.nav-dropdown-toggle {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized .sidebar {
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
i {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.nav > .nav-dropdown {
|
||||
|
||||
&:hover {
|
||||
> .nav-dropdown-items {
|
||||
right: $sidebar-minimized-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal bars
|
||||
.horizontal-bars {
|
||||
|
||||
li {
|
||||
|
||||
.bars {
|
||||
padding-right: 100px;
|
||||
padding-left: 0;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon list
|
||||
.icons-list {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-right: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
right: auto;
|
||||
left: 45px;
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Callouts
|
||||
.callout {
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-right-color: $text-muted;
|
||||
}
|
||||
}
|
||||
@ -1,454 +0,0 @@
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@include borders($sidebar-borders);
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: none;
|
||||
padding: 0 $spacer;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: $navbar-height;
|
||||
color: $sidebar-color;
|
||||
background: 0;
|
||||
border: 0;
|
||||
opacity: .8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Will be added soon
|
||||
// .sidebar-brand { }
|
||||
|
||||
.sidebar-header {
|
||||
flex: 0 0 $sidebar-header-height;
|
||||
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
|
||||
text-align: center;
|
||||
background: $sidebar-header-bg;
|
||||
}
|
||||
|
||||
.sidebar-form .form-control {
|
||||
color: $sidebar-form-color;
|
||||
background: $sidebar-form-bg;
|
||||
border: $sidebar-form-border;
|
||||
|
||||
&::placeholder {
|
||||
color: $sidebar-form-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $sidebar-nav-title-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
.nav-item {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-link-color;
|
||||
text-decoration: none;
|
||||
background: $sidebar-nav-link-bg;
|
||||
@include borders($sidebar-nav-link-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $sidebar-nav-link-active-color;
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
@include borders($sidebar-nav-link-active-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.nav-link-#{$color} {
|
||||
background: $value;
|
||||
i {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
&:hover {
|
||||
background: darken($value,5%) !important;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <li class="nav-item nav-dropdown">
|
||||
.nav-dropdown.open {
|
||||
background: $sidebar-nav-dropdown-bg;
|
||||
@include borders($sidebar-nav-dropdown-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1500px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $sidebar-nav-dropdown-color;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-dropdown.open {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: block;
|
||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-title-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 10px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@if (lightness( $sidebar-bg ) < 40) {
|
||||
.progress {
|
||||
background-color: lighten($sidebar-bg, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex: 0 0 $sidebar-footer-height;
|
||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||
background: $sidebar-footer-bg;
|
||||
@include borders($sidebar-footer-borders);
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
position: relative;
|
||||
flex: 0 0 $sidebar-minimizer-height;
|
||||
background-color: $sidebar-minimizer-bg;
|
||||
border: 0;
|
||||
@include borders($sidebar-minimizer-borders);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $sidebar-minimizer-height;
|
||||
height: $sidebar-minimizer-height;
|
||||
content: "";
|
||||
background-image: $sidebar-minimizer-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: $sidebar-minimizer-height / 4;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $sidebar-minimizer-hover-bg;
|
||||
&::before {
|
||||
background-image: $sidebar-minimizer-hover-indicator;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
|
||||
.nav-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-compact-width;
|
||||
border-left: 0 !important;
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: $spacer / 4 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Minimized Sidebar
|
||||
.sidebar-minimized {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
}
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-minimizer::before {
|
||||
width: 100%;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-minimized-width;
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
overflow: visible;
|
||||
|
||||
> .nav-link {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border-left: 0 !important;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: $sidebar-minimized-height;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,301 +0,0 @@
|
||||
@mixin switch-size($width, $height, $font-size, $handle-margin) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
.switch-label {
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch($type, $width, $height, $font-size, $handle-margin) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.switch-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
@if $type == icon {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
font-size: $font-size;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@if $type == ddd {
|
||||
background-color: $gray-100;
|
||||
} @else {
|
||||
background-color: #fff;
|
||||
}
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
transition: opacity background .15s ease-out;
|
||||
}
|
||||
@if $type == text or $type == icon {
|
||||
.switch-label::before,
|
||||
.switch-label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
transition: inherit;
|
||||
}
|
||||
.switch-label::before {
|
||||
right: 1px;
|
||||
color: $gray-200;
|
||||
content: attr(data-off);
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 1px;
|
||||
color: #fff;
|
||||
content: attr(data-on);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.switch-input:checked ~ .switch-label {
|
||||
//background: $gray-lightest;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::before {
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
position: absolute;
|
||||
top: $handle-margin;
|
||||
left: $handle-margin;
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 1px;
|
||||
transition: left .15s ease-out;
|
||||
@if $type == ddd {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
|
||||
|
||||
@if $type == ddd {
|
||||
@extend .switch-pill;
|
||||
}
|
||||
|
||||
//size variations
|
||||
@if $type == default {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == text {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == icon {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == ddd {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: $color !important;
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-alt-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
background: $color !important;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
$switch-lg-width: 48px;
|
||||
$switch-lg-height: 28px;
|
||||
$switch-lg-font-size: 12px;
|
||||
|
||||
$switch-width: 40px;
|
||||
$switch-height: 24px;
|
||||
$switch-font-size: 10px;
|
||||
|
||||
$handle-margin: 2px;
|
||||
|
||||
$switch-sm-width: 32px;
|
||||
$switch-sm-height: 20px;
|
||||
$switch-sm-font-size: 8px;
|
||||
|
||||
$switch-xs-width: 24px;
|
||||
$switch-xs-height: 16px;
|
||||
$switch-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-text-lg-width: 56px;
|
||||
$switch-text-lg-height: 28px;
|
||||
$switch-text-lg-font-size: 12px;
|
||||
|
||||
$switch-text-width: 48px;
|
||||
$switch-text-height: 24px;
|
||||
$switch-text-font-size: 10px;
|
||||
|
||||
$switch-text-sm-width: 40px;
|
||||
$switch-text-sm-height: 20px;
|
||||
$switch-text-sm-font-size: 8px;
|
||||
|
||||
$switch-text-xs-width: 32px;
|
||||
$switch-text-xs-height: 16px;
|
||||
$switch-text-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-icon-lg-width: 56px;
|
||||
$switch-icon-lg-height: 28px;
|
||||
$switch-icon-lg-font-size: 12px;
|
||||
|
||||
$switch-icon-width: 48px;
|
||||
$switch-icon-height: 24px;
|
||||
$switch-icon-font-size: 10px;
|
||||
|
||||
$switch-icon-sm-width: 40px;
|
||||
$switch-icon-sm-height: 20px;
|
||||
$switch-icon-sm-font-size: 8px;
|
||||
|
||||
$switch-icon-xs-width: 32px;
|
||||
$switch-icon-xs-height: 16px;
|
||||
$switch-icon-xs-font-size: 7px;
|
||||
|
||||
.switch.switch-default {
|
||||
@include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-text {
|
||||
@include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-icon {
|
||||
@include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-3d {
|
||||
@include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
|
||||
}
|
||||
|
||||
//pills style
|
||||
.switch-pill {
|
||||
.switch-label,
|
||||
.switch-handle {
|
||||
border-radius: 50em !important;
|
||||
}
|
||||
|
||||
.switch-label::before {
|
||||
right: 2px !important;
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
//normal style
|
||||
.switch-#{$color} {
|
||||
@include switch-variant($value);
|
||||
}
|
||||
//outline style
|
||||
.switch-#{$color}-outline {
|
||||
@include switch-outline-variant($value);
|
||||
}
|
||||
//outline alternative style
|
||||
.switch-#{$color}-outline-alt {
|
||||
@include switch-outline-alt-variant($value);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
.table-outline {
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-align-middle {
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-clear {
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
.pagination-datatables, .pagination {
|
||||
li {
|
||||
@extend .page-item;
|
||||
|
||||
a {
|
||||
@extend .page-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
// temp fix for Vue & React
|
||||
|
||||
// Open state for the dropdown
|
||||
.open, .show {
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
.img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
@extend .card-body;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: .75rem !important;
|
||||
}
|
||||
|
||||
.font-sm {
|
||||
font-size: .85rem !important;
|
||||
}
|
||||
|
||||
.font-lg {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.font-xl {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.font-2xl {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.font-3xl {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.font-5xl {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/display";
|
||||
@ -1,219 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
// Core Admin Variables
|
||||
|
||||
$enable-sidebar-nav-rounded: false !default;
|
||||
|
||||
$border-color: $gray-200 !default;
|
||||
$layout-transition-speed: .25s !default;
|
||||
|
||||
// Social Colors
|
||||
|
||||
$facebook: #3b5998 !default;
|
||||
$twitter: #00aced !default;
|
||||
$linkedin: #4875b4 !default;
|
||||
$google-plus: #d34836 !default;
|
||||
$flickr: #ff0084 !default;
|
||||
$tumblr: #32506d !default;
|
||||
$xing: #026466 !default;
|
||||
$github: #4183c4 !default;
|
||||
$html5: #e34f26 !default;
|
||||
$openid: #f78c40 !default;
|
||||
$stack-overflow: #fe7a15 !default;
|
||||
$youtube: #b00 !default;
|
||||
$css3: #0170ba !default;
|
||||
$dribbble: #ea4c89 !default;
|
||||
$google-plus: #bb4b39 !default;
|
||||
$instagram: #517fa4 !default;
|
||||
$pinterest: #cb2027 !default;
|
||||
$vk: #45668e !default;
|
||||
$yahoo: #400191 !default;
|
||||
$behance: #1769ff !default;
|
||||
$dropbox: #007ee5 !default;
|
||||
$reddit: #ff4500 !default;
|
||||
$spotify: #7ab800 !default;
|
||||
$vine: #00bf8f !default;
|
||||
$foursquare: #1073af !default;
|
||||
$vimeo: #aad450 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-height: 55px !default;
|
||||
$navbar-bg: #fff !default;
|
||||
$navbar-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$navbar-brand-width: 155px !default;
|
||||
$navbar-brand-bg: #fff !default;
|
||||
$navbar-brand-logo: url('../img/logo.png') !default;
|
||||
$navbar-brand-logo-size: 70px auto !default;
|
||||
$navbar-brand-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$navbar-brand-minimized-width: 50px !default;
|
||||
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
||||
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
||||
$navbar-brand-minimized-logo-size: 24px !default;
|
||||
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
||||
|
||||
$navbar-color: $gray-600 !default;
|
||||
$navbar-hover-color: $gray-800 !default;
|
||||
$navbar-active-color: $gray-800 !default;
|
||||
$navbar-disabled-color: $gray-300 !default;
|
||||
|
||||
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar
|
||||
|
||||
$sidebar-width: 200px !default;
|
||||
$sidebar-padding: 0 !default;
|
||||
$sidebar-minimized-width: 50px !default;
|
||||
$sidebar-minimized-height: $sidebar-minimized-width !default;
|
||||
$sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !default;
|
||||
$sidebar-bg: $gray-800 !default;
|
||||
$sidebar-borders: none !default;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
$sidebar-nav-title-padding-y: .75rem !default;
|
||||
$sidebar-nav-title-padding-x: 1rem !default;
|
||||
$sidebar-nav-title-color: $gray-200 !default;
|
||||
$sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-hover-color: #fff !default;
|
||||
$sidebar-nav-link-hover-bg: theme-color("primary") !default;
|
||||
$sidebar-nav-link-hover-icon-color: #fff !default;
|
||||
$sidebar-nav-link-hover-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-active-color: #fff !default;
|
||||
$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%) !default;
|
||||
$sidebar-nav-link-active-icon-color: theme-color("primary") !default;
|
||||
$sidebar-nav-link-active-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-dropdown-color: #fff !default;
|
||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
$sidebar-footer-borders: 0 !default;
|
||||
|
||||
// Sidebar Minimizer
|
||||
|
||||
$sidebar-minimizer-height: 50px !default;
|
||||
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-minimizer-borders: 0 !default;
|
||||
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
||||
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
||||
$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
|
||||
$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
|
||||
// Top Navigation
|
||||
|
||||
$top-nav-bg: #fff !default;
|
||||
$top-nav-color: $body-color !default;
|
||||
$top-nav-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$top-nav-ul-borders: (
|
||||
all: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$top-nav-hover-color: #fff !default;
|
||||
$top-nav-hover-bg: theme-color("primary") !default;
|
||||
$top-nav-active-color: #fff !default;
|
||||
$top-nav-active-bg: theme-color("primary") !default;
|
||||
$top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Aside
|
||||
|
||||
$aside-menu-width: 250px !default;
|
||||
$aside-menu-color: $gray-800 !default;
|
||||
$aside-menu-bg: #fff !default;
|
||||
$aside-menu-borders: (
|
||||
left: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$aside-menu-nav-padding-y: .75rem !default;
|
||||
$aside-menu-nav-padding-x: 1rem !default;
|
||||
|
||||
// Footer
|
||||
|
||||
$footer-height: 50px !default;
|
||||
$footer-bg: $gray-100 !default;
|
||||
$footer-color: $body-color !default;
|
||||
$footer-borders: (
|
||||
top: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-icon-bg: transparent !default;
|
||||
$card-icon-color: $body-color !default;
|
||||
@ -1,253 +0,0 @@
|
||||
// .social-box
|
||||
.social-box {
|
||||
min-height: 160px;
|
||||
margin-bottom: 2 * $card-spacer-y;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
i {
|
||||
display: block;
|
||||
margin: -1px -1px 0;
|
||||
font-size: 40px;
|
||||
line-height: 90px;
|
||||
background: $gray-200;
|
||||
|
||||
@include border-radius($card-border-radius $card-border-radius 0 0);
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
height: 90px;
|
||||
margin: -90px 0 0;
|
||||
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
height: 90px !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 10px 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: $border-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $facebook;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $twitter;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $linkedin;
|
||||
}
|
||||
}
|
||||
|
||||
&.google-plus {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $google-plus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-bars {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
.title {
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.legend {
|
||||
text-align: center;
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: -9px;
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 40px;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
margin: 2px;
|
||||
line-height: 35px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc {
|
||||
height: 40px;
|
||||
margin-left: 50px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
padding: 2px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 45px;
|
||||
text-align: right;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
float: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 2px 0 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
// Import core styles
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// Additional typography
|
||||
@import "typography";
|
||||
|
||||
// Animations
|
||||
@import "animate";
|
||||
|
||||
// Components
|
||||
@import "aside";
|
||||
@import "avatars";
|
||||
@import "badge";
|
||||
@import "breadcrumb-menu";
|
||||
@import "breadcrumb";
|
||||
@import "buttons";
|
||||
@import "callout";
|
||||
@import "card";
|
||||
@import "charts";
|
||||
@import "dropdown";
|
||||
@import "footer";
|
||||
@import "grid";
|
||||
@import "input-group";
|
||||
@import "loading";
|
||||
@import "modal";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "progress";
|
||||
@import "sidebar";
|
||||
@import "switches";
|
||||
@import "tables";
|
||||
@import "widgets";
|
||||
|
||||
// Layout Options
|
||||
@import "layout";
|
||||
|
||||
@import "others";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities";
|
||||
|
||||
// Temporary fixes
|
||||
@import "temp";
|
||||
|
||||
// Right-to-left
|
||||
@import "rtl";
|
||||
@ -1,8 +0,0 @@
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
//border
|
||||
@each $prop, $abbrev in (border: b) {
|
||||
@each $size in (0,1,2) {
|
||||
@if $size == 0 {
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: 0 !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: 0 !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: 0 !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: 0 !important; }
|
||||
} @else {
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: $size * $border-width solid $border-color !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: $size * $border-width solid $border-color !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
//
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.d#{$infix}-down-none { display: none !important; }
|
||||
// .d#{$infix}-inline { display: inline !important; }
|
||||
// .d#{$infix}-inline-block { display: inline-block !important; }
|
||||
// .d#{$infix}-block { display: block !important; }
|
||||
// .d#{$infix}-table { display: table !important; }
|
||||
// .d#{$infix}-table-cell { display: table-cell !important; }
|
||||
// .d#{$infix}-flex { display: flex !important; }
|
||||
// .d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/*!
|
||||
* CoreUI - Open Source Bootstrap Admin Template
|
||||
* @version v1.0.10
|
||||
* @link http://coreui.io
|
||||
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
// Override Boostrap variables
|
||||
@import "bootstrap-variables";
|
||||
|
||||
// Import Bootstrap source files
|
||||
@import "node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
// Override core variables
|
||||
@import "core-variables";
|
||||
|
||||
// Import core styles
|
||||
@import "core/core";
|
||||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
@ -1,6 +0,0 @@
|
||||
@import "node_modules/bootstrap/scss/functions";
|
||||
@import "../bootstrap-variables";
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins";
|
||||
@import "../core-variables";
|
||||
@import "../core/variables";
|
||||
@ -1,48 +0,0 @@
|
||||
// Import variables
|
||||
@import '../variables';
|
||||
|
||||
.chart-legend,
|
||||
.bar-legend,
|
||||
.line-legend,
|
||||
.pie-legend,
|
||||
.radar-legend,
|
||||
.polararea-legend,
|
||||
.doughnut-legend {
|
||||
list-style-type: none;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
-webkit-padding-start: 0;
|
||||
-moz-padding-start: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.chart-legend li,
|
||||
.bar-legend li,
|
||||
.line-legend li,
|
||||
.pie-legend li,
|
||||
.radar-legend li,
|
||||
.polararea-legend li,
|
||||
.doughnut-legend li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
@include border-radius($border-radius);
|
||||
padding: 2px 8px 2px 28px;
|
||||
font-size: smaller;
|
||||
cursor: default;
|
||||
}
|
||||
.chart-legend li span,
|
||||
.bar-legend li span,
|
||||
.line-legend li span,
|
||||
.pie-legend li span,
|
||||
.radar-legend li span,
|
||||
.polararea-legend li span,
|
||||
.doughnut-legend li span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -1,130 +0,0 @@
|
||||
// Bootstrap overrides
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f0f3f5;
|
||||
$gray-200: #c2cfd6;
|
||||
$gray-300: #a4b7c1;
|
||||
$gray-400: #869fac;
|
||||
$gray-500: #678898;
|
||||
$gray-600: #536c79;
|
||||
$gray-700: #3e515b;
|
||||
$gray-800: #29363d;
|
||||
$gray-900: #151b1e;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #20a8d8;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f86c6b;
|
||||
$orange: #f8cb00;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #4dbd74;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #63c2de;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
);
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-300,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800,
|
||||
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
|
||||
gray-100: $gray-100,
|
||||
gray-200: $gray-200,
|
||||
gray-300: $gray-300,
|
||||
gray-400: $gray-400,
|
||||
gray-500: $gray-500,
|
||||
gray-600: $gray-600,
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900
|
||||
);
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-transitions: true;
|
||||
$enable-rounded: false;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #e4e5e6;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-size-base: 0.875rem;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: #fff;
|
||||
$breadcrumb-margin-bottom: 1.5rem;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $gray-200;
|
||||
$card-cap-bg: $gray-100;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-padding-y: 0;
|
||||
$dropdown-border-color: $gray-200;
|
||||
$dropdown-divider-bg: $gray-100;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-secondary-border: $gray-300;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-100;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-accent: $gray-100;
|
||||
$table-bg-hover: $gray-100;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-group-addon-bg: $gray-100;
|
||||
$input-border-color: $gray-200;
|
||||
$input-group-addon-border-color: $gray-200;
|
||||
@ -1 +0,0 @@
|
||||
// core overrides
|
||||
@ -1 +0,0 @@
|
||||
// Here you can add other styles
|
||||
@ -1,27 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
// animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
.aside-menu {
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $aside-menu-width;
|
||||
color: $aside-menu-color;
|
||||
background: $aside-menu-bg;
|
||||
@include borders($aside-menu-borders);
|
||||
|
||||
.nav-tabs {
|
||||
border-color: $border-color;
|
||||
.nav-link {
|
||||
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
|
||||
color: $body-color;
|
||||
border-top: 0;
|
||||
&.active {
|
||||
color: theme-color("primary");
|
||||
border-right-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
.nav-item:first-child {
|
||||
.nav-link {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($aside-menu-bg, 5%);
|
||||
border-right: 1px solid darken($aside-menu-bg, 5%);
|
||||
border-left: 1px solid darken($aside-menu-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($aside-menu-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
.img-avatar {
|
||||
border-radius: 50em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
$width: 36px;
|
||||
$status-width: 10px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-xs {
|
||||
$width: 20px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-sm {
|
||||
$width: 24px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-lg {
|
||||
$width: 72px;
|
||||
$status-width: 12px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatars-stack {
|
||||
.avatar.avatar-xs {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
// .avatar.avatar-sm {
|
||||
//
|
||||
// }
|
||||
|
||||
.avatar {
|
||||
margin-right: -15px;
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
|
||||
|
||||
&:hover {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .avatar.avatar-lg {
|
||||
//
|
||||
// }
|
||||
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.badge-pill {
|
||||
border-radius: $badge-pill-border-radius;
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.breadcrumb-menu {
|
||||
margin-left: auto;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 $input-btn-padding-x;
|
||||
color: $text-muted;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.btn {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 180px;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
@ -1,566 +0,0 @@
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook,
|
||||
.btn-twitter,
|
||||
.btn-linkedin,
|
||||
.btn-flickr,
|
||||
.btn-tumblr,
|
||||
.btn-xing,
|
||||
.btn-github,
|
||||
.btn-html5,
|
||||
.btn-openid,
|
||||
.btn-stack-overflow,
|
||||
.btn-youtube,
|
||||
.btn-css3,
|
||||
.btn-dribbble,
|
||||
.btn-google-plus,
|
||||
.btn-instagram,
|
||||
.btn-pinterest,
|
||||
.btn-vk,
|
||||
.btn-yahoo,
|
||||
.btn-behance,
|
||||
.btn-dropbox,
|
||||
.btn-reddit,
|
||||
.btn-spotify,
|
||||
.btn-vine,
|
||||
.btn-foursquare,
|
||||
.btn-vimeo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@include button-social-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
|
||||
|
||||
&.btn-lg {
|
||||
@include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@include button-social-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
$color: $facebook;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09a";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
$color: $twitter;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f099";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
$color: $linkedin;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0e1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flickr {
|
||||
$color: $flickr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tumblr {
|
||||
$color: $tumblr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f173";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xing {
|
||||
$color: $xing;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f168";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
$color: $github;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-html5 {
|
||||
$color: $html5;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-openid {
|
||||
$color: $openid;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-stack-overflow {
|
||||
$color: $stack-overflow;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-css3 {
|
||||
$color: $css3;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
$color: $youtube;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f167";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
$color: $dribbble;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f17d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
$color: $google-plus;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d5";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
$color: $instagram;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
$color: $pinterest;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d2";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vk {
|
||||
$color: $vk;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f189";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-yahoo {
|
||||
$color: $yahoo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-behance {
|
||||
$color: $behance;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1b4";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dropbox {
|
||||
$color: $dropbox;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reddit {
|
||||
$color: $reddit;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1a1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spotify {
|
||||
$color: $spotify;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1bc";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vine {
|
||||
$color: $vine;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1ca";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-foursquare {
|
||||
$color: $foursquare;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f180";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vimeo {
|
||||
$color: $vimeo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f194";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
.callout {
|
||||
position: relative;
|
||||
padding: 0 $spacer;
|
||||
margin: $spacer 0;
|
||||
border: 0 solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
|
||||
@if $enable-rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-bordered {
|
||||
border: 1px solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
}
|
||||
.callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.callout + .callout {
|
||||
margin-top: - .25rem;
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-left-color: $text-muted;
|
||||
|
||||
h4 {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.callout-#{$color} {
|
||||
border-left-color: $value;
|
||||
|
||||
h4 {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
.card {
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: darken($value, 12.5%);
|
||||
.card-header {
|
||||
background-color: darken($value, 3%);
|
||||
border-color: darken($value, 12.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-white .text-muted {
|
||||
color: rgba(255,255,255,.6) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
||||
.icon-bg {
|
||||
display: inline-block;
|
||||
padding: $card-spacer-y $card-spacer-x !important;
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-right: $card-spacer-x;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -$card-spacer-x;
|
||||
line-height: inherit;
|
||||
color: $card-icon-color;
|
||||
vertical-align: bottom;
|
||||
background: $card-icon-bg;
|
||||
border-right: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $card-spacer-y $card-spacer-x / 2;
|
||||
color: $text-muted;
|
||||
border-top: 0;
|
||||
|
||||
&.active {
|
||||
color: $body-color;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-header-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: - $input-btn-padding-y;
|
||||
}
|
||||
.btn-sm {
|
||||
margin-top: - $input-btn-padding-y-sm;
|
||||
}
|
||||
.btn-lg {
|
||||
margin-top: - $input-btn-padding-y-lg;
|
||||
}
|
||||
}
|
||||
//
|
||||
.card-footer {
|
||||
|
||||
ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
padding: 0 $card-spacer-x;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="card-outline-"] {
|
||||
.card-body {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
&.card-outline-top {
|
||||
border-top-width: 2px;
|
||||
border-right-color: $border-color;
|
||||
border-bottom-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-accent-#{$color} {
|
||||
@include card-accent-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Card Actions
|
||||
.card-header {
|
||||
> i {
|
||||
margin-right: $spacer / 2;
|
||||
}
|
||||
.card-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
//height: inherit;
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50px;
|
||||
padding: $card-spacer-y 0;
|
||||
margin: 0 !important;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-left: 1px solid $border-color;
|
||||
box-shadow: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.r180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 230px;
|
||||
margin: 6px;
|
||||
|
||||
.input-group-prepend, .input-group-append {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-full {
|
||||
margin-top: - $spacer;
|
||||
margin-right: - $grid-gutter-width / 2;
|
||||
margin-left: - $grid-gutter-width / 2;
|
||||
border: 0;
|
||||
border-bottom: $card-border-width solid $border-color;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
|
||||
&.cols-2 {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&.drag, .drag {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
.card-placeholder {
|
||||
background: rgba(0,0,0,.025);
|
||||
border: 1px dashed $gray-300;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.chart-wrapper {
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
// scss-lint:disable QualifyingElement
|
||||
base-chart.chart {
|
||||
display: block !important;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// Temp fix for reactstrap
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu-right {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: -10px;
|
||||
color: $dropdown-border-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
padding: 8px 20px;
|
||||
background: $dropdown-divider-bg;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
.btn {
|
||||
margin-top: -7px;
|
||||
color: $dropdown-header-color;
|
||||
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
width: 250px;
|
||||
}
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.app-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 $spacer;
|
||||
color: $footer-color;
|
||||
background: $footer-bg;
|
||||
@include borders($footer-borders);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.row.row-equal {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
|
||||
[class*="col-"] {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.main .container-fluid {
|
||||
padding: 0 30px;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
@ -1,387 +0,0 @@
|
||||
// IE10&11 Flexbox fix
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
|
||||
.app,
|
||||
app-dashboard,
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
flex: 0 0 $navbar-height;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
flex: 0 0 $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
// $sidebar-width is the width of the columns
|
||||
flex: 0 0 $sidebar-width;
|
||||
// put the nav on the left
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
// $aside-menu-width is the width of the columns
|
||||
flex: 0 0 $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// header
|
||||
//
|
||||
.header-fixed {
|
||||
.app-header {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
}
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-off-canvas {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
position: fixed;
|
||||
top: $navbar-height;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky - 2;
|
||||
}
|
||||
|
||||
// if sidebar + main + aside
|
||||
.main:nth-child(2) {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
// if sidebar + main
|
||||
.main:first-child {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// if main + aside
|
||||
.main:last-child {
|
||||
.breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-minimized {
|
||||
.main .breadcrumb {
|
||||
left: $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden, &.sidebar-off-canvas {
|
||||
.main .breadcrumb {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.aside-menu-hidden, &.aside-menu-off-canvas {
|
||||
.main .breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky;
|
||||
height: $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-bottom: $footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
.app-header,
|
||||
.app-footer,
|
||||
.sidebar,
|
||||
.main,
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile layout
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
color: $navbar-color;
|
||||
} @else {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: - ($navbar-brand-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
|
||||
.breadcrumb-fixed {
|
||||
.main:nth-child(2) .breadcrumb {
|
||||
right: auto;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
|
||||
.sidebar-nav,
|
||||
.nav {
|
||||
width: $mobile-sidebar-width;
|
||||
min-height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// .aside-menu {
|
||||
// margin-right: - $aside-menu-width;
|
||||
// }
|
||||
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-right: - $mobile-sidebar-width !important;
|
||||
margin-left: $mobile-sidebar-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,128 +0,0 @@
|
||||
// Angular Version
|
||||
// Make clicks pass-through
|
||||
// scss-lint:disable all
|
||||
#loading-bar,
|
||||
#loading-bar-spinner {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
-moz-transition: 350ms linear all;
|
||||
-o-transition: 350ms linear all;
|
||||
-webkit-transition: 350ms linear all;
|
||||
transition: 350ms linear all;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter,
|
||||
#loading-bar.ng-leave.ng-leave-active,
|
||||
#loading-bar-spinner.ng-enter,
|
||||
#loading-bar-spinner.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter.ng-enter-active,
|
||||
#loading-bar.ng-leave,
|
||||
#loading-bar-spinner.ng-enter.ng-enter-active,
|
||||
#loading-bar-spinner.ng-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#loading-bar .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20002;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
border-top-right-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
-moz-transition: width 350ms;
|
||||
-o-transition: width 350ms;
|
||||
-webkit-transition: width 350ms;
|
||||
transition: width 350ms;
|
||||
}
|
||||
|
||||
// Fancy blur effect
|
||||
#loading-bar .peg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70px;
|
||||
height: 2px;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
-moz-box-shadow: #29d 1px 0 6px 1px;
|
||||
-ms-box-shadow: #29d 1px 0 6px 1px;
|
||||
-webkit-box-shadow: #29d 1px 0 6px 1px;
|
||||
box-shadow: #29d 1px 0 6px 1px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
#loading-bar-spinner {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10002;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#loading-bar-spinner .spinner-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #29d;
|
||||
border-left-color: #29d;
|
||||
border-radius: 50%;
|
||||
|
||||
-moz-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-ms-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-o-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-webkit-animation: loading-bar-spinner 400ms linear infinite;
|
||||
animation: loading-bar-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loading-bar-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes loading-bar-spinner {
|
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes loading-bar-spinner {
|
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes loading-bar-spinner {
|
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes loading-bar-spinner {
|
||||
0% { transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//Ajax & Static Version
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pace-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border: 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
padding: $padding-y 0;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar($width, $status-width) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $width;
|
||||
|
||||
.img-avatar {
|
||||
width: $width;
|
||||
height: $width;
|
||||
}
|
||||
|
||||
.avatar-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: $status-width;
|
||||
height: $status-width;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin borders($borders) {
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border: $size $style $color;
|
||||
} @else if $direction == "top" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-top: $size $style $color;
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-right: $size $style $color;
|
||||
} @else if $direction == "bottom" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-bottom: $size $style $color;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-left: $size $style $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-width($borders, $width) {
|
||||
$sidebar-width: $width;
|
||||
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: ($sidebar-width - (2 * $size));
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
}
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
|
||||
color: #fff !important;
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-accent-variant($color) {
|
||||
border-top-width: 2px;
|
||||
border-top-color: $color;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
|
||||
.modal-content {
|
||||
border-color: $value;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: #fff;
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
color: $gray-800;
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: -1px;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
.tab-pane {
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
.tab-content {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
@include borders($navbar-border);
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
width: $navbar-brand-width;
|
||||
height: $navbar-height;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
margin-right: 0;
|
||||
background-color: $navbar-brand-bg;
|
||||
background-image: $navbar-brand-logo;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $navbar-brand-logo-size;
|
||||
@include borders($navbar-brand-border);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
min-width: 50px;
|
||||
padding: $navbar-toggler-padding-y 0;
|
||||
|
||||
&:hover .navbar-toggler-icon {
|
||||
background-image: $navbar-toggler-icon-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
height: 23px;
|
||||
background-image: $navbar-toggler-icon;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
min-width: 50px;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: 0;
|
||||
border: 0;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding-bottom: 0;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.brand-minimized {
|
||||
.app-header.navbar {
|
||||
.navbar-brand {
|
||||
width: $navbar-brand-minimized-width;
|
||||
background-color: $navbar-brand-minimized-bg;
|
||||
background-image: $navbar-brand-minimized-logo;
|
||||
background-size: $navbar-brand-minimized-logo-size;
|
||||
@include borders($navbar-brand-minimized-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
hr.transparent {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.progress-xs {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.progress-sm {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// White progress bar
|
||||
.progress-white {
|
||||
background-color: rgba(255,255,255,.2) !important;
|
||||
.progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@ -1,281 +0,0 @@
|
||||
//
|
||||
// RTL Support
|
||||
//
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
*[dir="rtl"] {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
|
||||
ul {
|
||||
-webkit-padding-start: 0;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
.breadcrumb-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.breadcrumb-menu {
|
||||
right: auto;
|
||||
left: $breadcrumb-padding-x;
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
.dropdown-item {
|
||||
text-align: right;
|
||||
|
||||
i {
|
||||
margin-right: -10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
//margin-right: 0;
|
||||
margin-left: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
&.nav-dropdown-toggle {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized .sidebar {
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
i {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.nav > .nav-dropdown {
|
||||
|
||||
&:hover {
|
||||
> .nav-dropdown-items {
|
||||
right: $sidebar-minimized-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal bars
|
||||
.horizontal-bars {
|
||||
|
||||
li {
|
||||
|
||||
.bars {
|
||||
padding-right: 100px;
|
||||
padding-left: 0;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon list
|
||||
.icons-list {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-right: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
right: auto;
|
||||
left: 45px;
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Callouts
|
||||
.callout {
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-right-color: $text-muted;
|
||||
}
|
||||
}
|
||||
@ -1,454 +0,0 @@
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@include borders($sidebar-borders);
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: none;
|
||||
padding: 0 $spacer;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: $navbar-height;
|
||||
color: $sidebar-color;
|
||||
background: 0;
|
||||
border: 0;
|
||||
opacity: .8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Will be added soon
|
||||
// .sidebar-brand { }
|
||||
|
||||
.sidebar-header {
|
||||
flex: 0 0 $sidebar-header-height;
|
||||
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
|
||||
text-align: center;
|
||||
background: $sidebar-header-bg;
|
||||
}
|
||||
|
||||
.sidebar-form .form-control {
|
||||
color: $sidebar-form-color;
|
||||
background: $sidebar-form-bg;
|
||||
border: $sidebar-form-border;
|
||||
|
||||
&::placeholder {
|
||||
color: $sidebar-form-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $sidebar-nav-title-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
.nav-item {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-link-color;
|
||||
text-decoration: none;
|
||||
background: $sidebar-nav-link-bg;
|
||||
@include borders($sidebar-nav-link-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $sidebar-nav-link-active-color;
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
@include borders($sidebar-nav-link-active-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.nav-link-#{$color} {
|
||||
background: $value;
|
||||
i {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
&:hover {
|
||||
background: darken($value,5%) !important;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <li class="nav-item nav-dropdown">
|
||||
.nav-dropdown.open {
|
||||
background: $sidebar-nav-dropdown-bg;
|
||||
@include borders($sidebar-nav-dropdown-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1500px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $sidebar-nav-dropdown-color;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-dropdown.open {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: block;
|
||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-title-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 10px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@if (lightness( $sidebar-bg ) < 40) {
|
||||
.progress {
|
||||
background-color: lighten($sidebar-bg, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex: 0 0 $sidebar-footer-height;
|
||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||
background: $sidebar-footer-bg;
|
||||
@include borders($sidebar-footer-borders);
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
position: relative;
|
||||
flex: 0 0 $sidebar-minimizer-height;
|
||||
background-color: $sidebar-minimizer-bg;
|
||||
border: 0;
|
||||
@include borders($sidebar-minimizer-borders);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $sidebar-minimizer-height;
|
||||
height: $sidebar-minimizer-height;
|
||||
content: "";
|
||||
background-image: $sidebar-minimizer-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: $sidebar-minimizer-height / 4;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $sidebar-minimizer-hover-bg;
|
||||
&::before {
|
||||
background-image: $sidebar-minimizer-hover-indicator;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
|
||||
.nav-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-compact-width;
|
||||
border-left: 0 !important;
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: $spacer / 4 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Minimized Sidebar
|
||||
.sidebar-minimized {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
}
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-minimizer::before {
|
||||
width: 100%;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-minimized-width;
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
overflow: visible;
|
||||
|
||||
> .nav-link {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border-left: 0 !important;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: $sidebar-minimized-height;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,301 +0,0 @@
|
||||
@mixin switch-size($width, $height, $font-size, $handle-margin) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
.switch-label {
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch($type, $width, $height, $font-size, $handle-margin) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.switch-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
@if $type == icon {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
font-size: $font-size;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@if $type == ddd {
|
||||
background-color: $gray-100;
|
||||
} @else {
|
||||
background-color: #fff;
|
||||
}
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
transition: opacity background .15s ease-out;
|
||||
}
|
||||
@if $type == text or $type == icon {
|
||||
.switch-label::before,
|
||||
.switch-label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
transition: inherit;
|
||||
}
|
||||
.switch-label::before {
|
||||
right: 1px;
|
||||
color: $gray-200;
|
||||
content: attr(data-off);
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 1px;
|
||||
color: #fff;
|
||||
content: attr(data-on);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.switch-input:checked ~ .switch-label {
|
||||
//background: $gray-lightest;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::before {
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
position: absolute;
|
||||
top: $handle-margin;
|
||||
left: $handle-margin;
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 1px;
|
||||
transition: left .15s ease-out;
|
||||
@if $type == ddd {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
|
||||
|
||||
@if $type == ddd {
|
||||
@extend .switch-pill;
|
||||
}
|
||||
|
||||
//size variations
|
||||
@if $type == default {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == text {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == icon {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == ddd {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: $color !important;
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-alt-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
background: $color !important;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
$switch-lg-width: 48px;
|
||||
$switch-lg-height: 28px;
|
||||
$switch-lg-font-size: 12px;
|
||||
|
||||
$switch-width: 40px;
|
||||
$switch-height: 24px;
|
||||
$switch-font-size: 10px;
|
||||
|
||||
$handle-margin: 2px;
|
||||
|
||||
$switch-sm-width: 32px;
|
||||
$switch-sm-height: 20px;
|
||||
$switch-sm-font-size: 8px;
|
||||
|
||||
$switch-xs-width: 24px;
|
||||
$switch-xs-height: 16px;
|
||||
$switch-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-text-lg-width: 56px;
|
||||
$switch-text-lg-height: 28px;
|
||||
$switch-text-lg-font-size: 12px;
|
||||
|
||||
$switch-text-width: 48px;
|
||||
$switch-text-height: 24px;
|
||||
$switch-text-font-size: 10px;
|
||||
|
||||
$switch-text-sm-width: 40px;
|
||||
$switch-text-sm-height: 20px;
|
||||
$switch-text-sm-font-size: 8px;
|
||||
|
||||
$switch-text-xs-width: 32px;
|
||||
$switch-text-xs-height: 16px;
|
||||
$switch-text-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-icon-lg-width: 56px;
|
||||
$switch-icon-lg-height: 28px;
|
||||
$switch-icon-lg-font-size: 12px;
|
||||
|
||||
$switch-icon-width: 48px;
|
||||
$switch-icon-height: 24px;
|
||||
$switch-icon-font-size: 10px;
|
||||
|
||||
$switch-icon-sm-width: 40px;
|
||||
$switch-icon-sm-height: 20px;
|
||||
$switch-icon-sm-font-size: 8px;
|
||||
|
||||
$switch-icon-xs-width: 32px;
|
||||
$switch-icon-xs-height: 16px;
|
||||
$switch-icon-xs-font-size: 7px;
|
||||
|
||||
.switch.switch-default {
|
||||
@include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-text {
|
||||
@include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-icon {
|
||||
@include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-3d {
|
||||
@include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
|
||||
}
|
||||
|
||||
//pills style
|
||||
.switch-pill {
|
||||
.switch-label,
|
||||
.switch-handle {
|
||||
border-radius: 50em !important;
|
||||
}
|
||||
|
||||
.switch-label::before {
|
||||
right: 2px !important;
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
//normal style
|
||||
.switch-#{$color} {
|
||||
@include switch-variant($value);
|
||||
}
|
||||
//outline style
|
||||
.switch-#{$color}-outline {
|
||||
@include switch-outline-variant($value);
|
||||
}
|
||||
//outline alternative style
|
||||
.switch-#{$color}-outline-alt {
|
||||
@include switch-outline-alt-variant($value);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
.table-outline {
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-align-middle {
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-clear {
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
.pagination-datatables, .pagination {
|
||||
li {
|
||||
@extend .page-item;
|
||||
|
||||
a {
|
||||
@extend .page-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
// temp fix for Vue & React
|
||||
|
||||
// Open state for the dropdown
|
||||
.open, .show {
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
.img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
@extend .card-body;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: .75rem !important;
|
||||
}
|
||||
|
||||
.font-sm {
|
||||
font-size: .85rem !important;
|
||||
}
|
||||
|
||||
.font-lg {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.font-xl {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.font-2xl {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.font-3xl {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.font-5xl {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/display";
|
||||
@ -1,219 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
// Core Admin Variables
|
||||
|
||||
$enable-sidebar-nav-rounded: false !default;
|
||||
|
||||
$border-color: $gray-200 !default;
|
||||
$layout-transition-speed: .25s !default;
|
||||
|
||||
// Social Colors
|
||||
|
||||
$facebook: #3b5998 !default;
|
||||
$twitter: #00aced !default;
|
||||
$linkedin: #4875b4 !default;
|
||||
$google-plus: #d34836 !default;
|
||||
$flickr: #ff0084 !default;
|
||||
$tumblr: #32506d !default;
|
||||
$xing: #026466 !default;
|
||||
$github: #4183c4 !default;
|
||||
$html5: #e34f26 !default;
|
||||
$openid: #f78c40 !default;
|
||||
$stack-overflow: #fe7a15 !default;
|
||||
$youtube: #b00 !default;
|
||||
$css3: #0170ba !default;
|
||||
$dribbble: #ea4c89 !default;
|
||||
$google-plus: #bb4b39 !default;
|
||||
$instagram: #517fa4 !default;
|
||||
$pinterest: #cb2027 !default;
|
||||
$vk: #45668e !default;
|
||||
$yahoo: #400191 !default;
|
||||
$behance: #1769ff !default;
|
||||
$dropbox: #007ee5 !default;
|
||||
$reddit: #ff4500 !default;
|
||||
$spotify: #7ab800 !default;
|
||||
$vine: #00bf8f !default;
|
||||
$foursquare: #1073af !default;
|
||||
$vimeo: #aad450 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-height: 55px !default;
|
||||
$navbar-bg: #fff !default;
|
||||
$navbar-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$navbar-brand-width: 155px !default;
|
||||
$navbar-brand-bg: #fff !default;
|
||||
$navbar-brand-logo: url('../img/logo.png') !default;
|
||||
$navbar-brand-logo-size: 70px auto !default;
|
||||
$navbar-brand-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$navbar-brand-minimized-width: 50px !default;
|
||||
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
||||
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
||||
$navbar-brand-minimized-logo-size: 24px !default;
|
||||
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
||||
|
||||
$navbar-color: $gray-600 !default;
|
||||
$navbar-hover-color: $gray-800 !default;
|
||||
$navbar-active-color: $gray-800 !default;
|
||||
$navbar-disabled-color: $gray-300 !default;
|
||||
|
||||
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar
|
||||
|
||||
$sidebar-width: 200px !default;
|
||||
$sidebar-padding: 0 !default;
|
||||
$sidebar-minimized-width: 50px !default;
|
||||
$sidebar-minimized-height: $sidebar-minimized-width !default;
|
||||
$sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !default;
|
||||
$sidebar-bg: $gray-800 !default;
|
||||
$sidebar-borders: none !default;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
$sidebar-nav-title-padding-y: .75rem !default;
|
||||
$sidebar-nav-title-padding-x: 1rem !default;
|
||||
$sidebar-nav-title-color: $gray-200 !default;
|
||||
$sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-hover-color: #fff !default;
|
||||
$sidebar-nav-link-hover-bg: theme-color("primary") !default;
|
||||
$sidebar-nav-link-hover-icon-color: #fff !default;
|
||||
$sidebar-nav-link-hover-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-active-color: #fff !default;
|
||||
$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%) !default;
|
||||
$sidebar-nav-link-active-icon-color: theme-color("primary") !default;
|
||||
$sidebar-nav-link-active-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-dropdown-color: #fff !default;
|
||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
$sidebar-footer-borders: 0 !default;
|
||||
|
||||
// Sidebar Minimizer
|
||||
|
||||
$sidebar-minimizer-height: 50px !default;
|
||||
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-minimizer-borders: 0 !default;
|
||||
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
||||
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
||||
$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
|
||||
$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
|
||||
// Top Navigation
|
||||
|
||||
$top-nav-bg: #fff !default;
|
||||
$top-nav-color: $body-color !default;
|
||||
$top-nav-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$top-nav-ul-borders: (
|
||||
all: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$top-nav-hover-color: #fff !default;
|
||||
$top-nav-hover-bg: theme-color("primary") !default;
|
||||
$top-nav-active-color: #fff !default;
|
||||
$top-nav-active-bg: theme-color("primary") !default;
|
||||
$top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Aside
|
||||
|
||||
$aside-menu-width: 250px !default;
|
||||
$aside-menu-color: $gray-800 !default;
|
||||
$aside-menu-bg: #fff !default;
|
||||
$aside-menu-borders: (
|
||||
left: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$aside-menu-nav-padding-y: .75rem !default;
|
||||
$aside-menu-nav-padding-x: 1rem !default;
|
||||
|
||||
// Footer
|
||||
|
||||
$footer-height: 50px !default;
|
||||
$footer-bg: $gray-100 !default;
|
||||
$footer-color: $body-color !default;
|
||||
$footer-borders: (
|
||||
top: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-icon-bg: transparent !default;
|
||||
$card-icon-color: $body-color !default;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user