mirror of https://github.com/ColorlibHQ/AdminLTE
further scss changes
- changed /* comments to // (to avoid displaying in compiled css file) - added .alert-primary - removed _label.scss (due renamed to badge with BS4) - reworked bg-*, bg-gradient-*, custom-switch-*, custom-range-* as mixin - changed control-sidebar-light border color to main-header border - renamed `.direct-chat-info` to `.direct-chat-infos` (not theme color, its a extra block inside direct-chat & updated demo files - enhanced direct-chat with all colors - added `.dropdown-menu-xl` - reworked color-palette in pages/UI/general - changed `Block Quotes Pulled Right` to `Secondary Block Quotes` in pages/UI/general - removed `@-webkit-keyframes flipInX` due autoprefixer - enhanced demo.js with additional colors for sidebar & renamed `Navbar border` to `No Navbar border`pull/2183/head
REJack
parent
c66ab85940
commit
6773bd1772
|
|
@ -43,7 +43,6 @@
|
|||
@import 'navs';
|
||||
@import 'products';
|
||||
@import 'table';
|
||||
@import 'labels';
|
||||
@import 'direct-chat';
|
||||
@import 'users-list';
|
||||
@import 'carousel';
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
@import 'navs';
|
||||
@import 'products';
|
||||
@import 'table';
|
||||
@import 'labels';
|
||||
@import 'direct-chat';
|
||||
@import 'users-list';
|
||||
@import 'carousel';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Alert
|
||||
* ----------------
|
||||
*/
|
||||
//
|
||||
// Component: Alert
|
||||
//
|
||||
|
||||
.alert {
|
||||
.icon {
|
||||
|
|
@ -44,3 +43,8 @@
|
|||
@extend .bg-info;
|
||||
border-color: darken(theme-color('info'), 5%);
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
@extend .bg-primary;
|
||||
border-color: darken(theme-color('primary'), 5%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Brand
|
||||
* ----------------
|
||||
*/
|
||||
//
|
||||
// Component: Brand
|
||||
//
|
||||
|
||||
.brand-link {
|
||||
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Button
|
||||
* -----------------
|
||||
*/
|
||||
//
|
||||
// Component: Button
|
||||
//
|
||||
|
||||
.btn {
|
||||
// Flat buttons
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Callout
|
||||
* ------------------
|
||||
*/
|
||||
//
|
||||
// Component: Callout
|
||||
//
|
||||
|
||||
// Base styles (regardless of theme)
|
||||
.callout {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Cards
|
||||
* ----------------
|
||||
*/
|
||||
//
|
||||
// Component: Cards
|
||||
//
|
||||
|
||||
.card {
|
||||
@extend .mb-3;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Carousel
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Component: Carousel
|
||||
//
|
||||
|
||||
.carousel-control {
|
||||
&.left,
|
||||
|
|
|
|||
|
|
@ -1,74 +1,15 @@
|
|||
/*
|
||||
* Misc: Colors
|
||||
* ------------
|
||||
*/
|
||||
//
|
||||
// Misc: Colors
|
||||
//
|
||||
|
||||
// Background colors (theme colors)
|
||||
@each $name, $color in $theme-colors {
|
||||
.bg-#{$name} {
|
||||
&,
|
||||
> a {
|
||||
color: color-yiq($color) !important;
|
||||
}
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
@include background-variant($name, $color);
|
||||
}
|
||||
|
||||
// Background colors (colors)
|
||||
@each $name, $color in $colors {
|
||||
.bg-#{$name} {
|
||||
background-color: #{$color};
|
||||
|
||||
&,
|
||||
> a {
|
||||
color: color-yiq($color) !important;
|
||||
}
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
@include background-variant($name, $color);
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
|
|
@ -93,64 +34,12 @@
|
|||
|
||||
// Gradient Background colors (theme colors)
|
||||
@each $name, $color in $theme-colors {
|
||||
.bg-gradient-#{$name} {
|
||||
@include bg-gradient-variant('&', $color);
|
||||
color: color-yiq($color);
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
@include background-gradient-variant($name, $color);
|
||||
}
|
||||
|
||||
// Gradient Background colors (colors)
|
||||
@each $name, $color in $colors {
|
||||
.bg-gradient-#{$name} {
|
||||
@include bg-gradient-variant('&', $color);
|
||||
color: color-yiq($color);
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
@include background-gradient-variant($name, $color);
|
||||
}
|
||||
|
||||
// Backgrund Color Disabled
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Control Sidebar
|
||||
* --------------------------
|
||||
*/
|
||||
//
|
||||
// Component: Control Sidebar
|
||||
//
|
||||
|
||||
html.control-sidebar-animate {
|
||||
overflow-x: hidden;
|
||||
|
|
@ -150,6 +149,6 @@ html.control-sidebar-animate {
|
|||
// Background
|
||||
& {
|
||||
background: $sidebar-light-bg;
|
||||
border-left: 1px solid $gray-500;
|
||||
border-left: $main-header-bottom-border;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Direct Chat
|
||||
* ----------------------
|
||||
*/
|
||||
//
|
||||
// Component: Direct Chat
|
||||
//
|
||||
|
||||
.direct-chat {
|
||||
.card-body {
|
||||
|
|
@ -100,7 +99,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.direct-chat-info {
|
||||
.direct-chat-infos {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -182,23 +181,15 @@
|
|||
color: darken($gray-500, 25%);
|
||||
}
|
||||
|
||||
//Direct Chat Variants
|
||||
.direct-chat-danger {
|
||||
@include direct-chat-variant(theme-color('danger'));
|
||||
// Color variants
|
||||
@each $name, $color in $theme-colors {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-primary {
|
||||
@include direct-chat-variant(theme-color('primary'));
|
||||
}
|
||||
|
||||
.direct-chat-warning {
|
||||
@include direct-chat-variant(theme-color('warning'));
|
||||
}
|
||||
|
||||
.direct-chat-info {
|
||||
@include direct-chat-variant(theme-color('info'));
|
||||
}
|
||||
|
||||
.direct-chat-success {
|
||||
@include direct-chat-variant(theme-color('success'));
|
||||
@each $name, $color in $colors {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Dropdown
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Component: Dropdown
|
||||
//
|
||||
|
||||
// General Dropdown Rules
|
||||
//.dropdown-item {
|
||||
|
|
@ -38,6 +37,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Dropdown Sizes
|
||||
.dropdown-menu-xl {
|
||||
max-width: 420px;
|
||||
min-width: 360px;
|
||||
padding: 0;
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown header and footer
|
||||
.dropdown-footer,
|
||||
.dropdown-header {
|
||||
|
|
@ -47,8 +66,8 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* Add fade animation to dropdown menus by appending
|
||||
the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
|
||||
// Add fade animation to dropdown menus by appending
|
||||
// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
|
||||
.open:not(.dropup) > .animated-dropdown-menu {
|
||||
@include animation(flipInX .7s both);
|
||||
backface-visibility: visible !important;
|
||||
|
|
@ -80,33 +99,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flipInX {
|
||||
0% {
|
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
-webkit-transition-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
-webkit-transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix dropdown menu in navbars */
|
||||
// Fix dropdown menu in navbars
|
||||
.navbar-custom-menu > .navbar-nav {
|
||||
> li {
|
||||
position: relative;
|
||||
|
|
@ -134,11 +127,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* User Menu */
|
||||
// User Menu
|
||||
.navbar-nav > .user-menu {
|
||||
> .nav-link:after {
|
||||
content:none;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
@include border-top-radius(0);
|
||||
padding: 0;
|
||||
|
|
@ -149,12 +143,13 @@
|
|||
> .user-body {
|
||||
@include border-bottom-radius(4px);
|
||||
}
|
||||
|
||||
|
||||
// Header menu
|
||||
> li.user-header {
|
||||
height: 175px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
// User image
|
||||
> img {
|
||||
z-index: 5;
|
||||
|
|
@ -164,11 +159,13 @@
|
|||
border-color: transparent;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
> p {
|
||||
z-index: 5;
|
||||
font-size: 17px;
|
||||
//text-shadow: 2px 2px 3px #333333;
|
||||
margin-top: 10px;
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
|
|
@ -178,46 +175,50 @@
|
|||
|
||||
// Menu Body
|
||||
> .user-body {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
border-top: 1px solid #dddddd;
|
||||
@include clearfix;
|
||||
border-bottom: 1px solid $gray-700;
|
||||
border-top: 1px solid $gray-300;
|
||||
padding: 15px;
|
||||
|
||||
a {
|
||||
color: #444 !important;
|
||||
@include media-breakpoint-up(sm) {
|
||||
background: #fff !important;
|
||||
color: #444 !important;
|
||||
background: $white !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Footer
|
||||
> .user-footer {
|
||||
background-color: #f9f9f9;
|
||||
padding: 10px;
|
||||
@include clearfix;
|
||||
background-color: $gray-100;
|
||||
padding: 10px;
|
||||
|
||||
.btn-default {
|
||||
color: #666666;
|
||||
color: $gray-600;
|
||||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-image {
|
||||
float: left;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
margin-top: -2px;
|
||||
@include media-breakpoint-up(sm) {
|
||||
float: none;
|
||||
line-height: 10px;
|
||||
margin-right: 0;
|
||||
margin-top: -8px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
margin-top: -2px;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Elevation
|
||||
* --------------------
|
||||
*/
|
||||
//
|
||||
// Component: Elevation
|
||||
//
|
||||
|
||||
.elevation-0 {
|
||||
box-shadow: none !important;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Forms
|
||||
* ----------------
|
||||
*/
|
||||
//
|
||||
// Component: Forms
|
||||
//
|
||||
|
||||
.form-group {
|
||||
&.has-icon {
|
||||
|
|
@ -28,7 +27,8 @@
|
|||
// Button groups
|
||||
.btn-group-vertical {
|
||||
.btn {
|
||||
&.btn-flat:first-of-type, &.btn-flat:last-of-type {
|
||||
&.btn-flat:first-of-type,
|
||||
&.btn-flat:last-of-type {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -257,113 +257,21 @@ textarea.form-control {
|
|||
// custom switch color variations
|
||||
.custom-switch {
|
||||
@each $name, $color in $theme-colors {
|
||||
&.custom-switch-off-#{$name} {
|
||||
& .custom-control-input ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input ~ .custom-control-label::after {
|
||||
background: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-switch-on-#{$name} {
|
||||
& .custom-control-input:checked ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: lighten($color, 30%);
|
||||
}
|
||||
}
|
||||
@include custom-switch-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
&.custom-switch-off-#{$name} {
|
||||
& .custom-control-input ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input ~ .custom-control-label::after {
|
||||
background: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-switch-on-#{$name} {
|
||||
& .custom-control-input:checked ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: lighten($color, 30%);
|
||||
}
|
||||
}
|
||||
@include custom-switch-variant($name, $color);
|
||||
}
|
||||
}
|
||||
|
||||
// custom range color variations
|
||||
.custom-range {
|
||||
@each $name, $color in $theme-colors {
|
||||
&.custom-range-#{$name} {
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@include custom-range-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
&.custom-range-#{$name} {
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@include custom-range-variant($name, $color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Info Box
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Component: Info Box
|
||||
//
|
||||
|
||||
.info-box {
|
||||
@extend .d-flex;
|
||||
|
|
@ -14,7 +13,7 @@
|
|||
padding: .5rem;
|
||||
|
||||
.progress {
|
||||
background-color: rgba($black, 0.125);
|
||||
background-color: rgba($black, .125);
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
|
||||
|
|
@ -105,7 +104,7 @@
|
|||
.col-lg-2 &,
|
||||
.col-md-2 & {
|
||||
.progress-description {
|
||||
@include font-size(0.75rem);
|
||||
@include font-size(.75rem);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -114,7 +113,7 @@
|
|||
.col-lg-3 &,
|
||||
.col-md-3 & {
|
||||
.progress-description {
|
||||
@include font-size(0.75rem);
|
||||
@include font-size(.75rem);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
/*
|
||||
* Component: Labels
|
||||
* -----------------
|
||||
*/
|
||||
|
||||
.label-default {
|
||||
background-color: $gray-500;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
@extend .bg-danger;
|
||||
}
|
||||
|
||||
.label-info {
|
||||
@extend .bg-info;
|
||||
}
|
||||
|
||||
.label-warning {
|
||||
@extend .bg-warning;
|
||||
}
|
||||
|
||||
.label-primary {
|
||||
@extend .bg-primary;
|
||||
}
|
||||
|
||||
.label-success {
|
||||
@extend .bg-success;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Core: Layout
|
||||
* ------------
|
||||
*/
|
||||
//
|
||||
// Core: Layout
|
||||
//
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
|
@ -21,7 +20,7 @@ body,
|
|||
}
|
||||
|
||||
.layout-boxed & {
|
||||
@include box-shadow(0 0 10px rgba($black, .3));
|
||||
@include box-shadow(0 0 10 rgba($black, .3));
|
||||
|
||||
&,
|
||||
&::before {
|
||||
|
|
@ -101,7 +100,7 @@ body,
|
|||
|
||||
.sidebar,
|
||||
.content-wrapper {
|
||||
margin-top: 0px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
|
|
@ -181,7 +180,7 @@ body,
|
|||
|
||||
.sidebar,
|
||||
.content-wrapper {
|
||||
margin-top: 0px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
|
|
@ -208,7 +207,7 @@ body,
|
|||
}
|
||||
|
||||
.content-wrapper {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Main Header
|
||||
* ----------------------
|
||||
*/
|
||||
//
|
||||
// Component: Main Header
|
||||
//
|
||||
|
||||
.main-header {
|
||||
border-bottom: $main-header-bottom-border;
|
||||
|
|
@ -79,19 +78,6 @@
|
|||
color: $main-header-dark-placeholder-color;
|
||||
}
|
||||
|
||||
// Support FF and IE
|
||||
:-moz-placeholder {
|
||||
color: $main-header-dark-placeholder-color;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $main-header-dark-placeholder-color;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $main-header-dark-placeholder-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&,
|
||||
& + .input-group-append .btn-navbar {
|
||||
|
|
@ -111,24 +97,14 @@
|
|||
}
|
||||
|
||||
.form-control-navbar {
|
||||
&:ms-placeholder,
|
||||
&:moz-placeholder,
|
||||
&::moz-placeholder,
|
||||
&::placeholder,
|
||||
+ .input-group-append > .btn-navbar {
|
||||
color: $main-header-light-placeholder-color;
|
||||
}
|
||||
|
||||
// Support FF and IE
|
||||
:-moz-placeholder {
|
||||
color: $main-header-light-placeholder-color;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $main-header-light-placeholder-color;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $main-header-light-placeholder-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&,
|
||||
& + .input-group-append .btn-navbar {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/**
|
||||
* Component: Main Sidebar
|
||||
* -----------------------
|
||||
*/
|
||||
//
|
||||
// Component: Main Sidebar
|
||||
//
|
||||
|
||||
.main-sidebar {
|
||||
height: 100vh;
|
||||
|
|
@ -62,7 +61,7 @@
|
|||
// All levels
|
||||
.nav-item {
|
||||
> .nav-link {
|
||||
margin-bottom: 0.2rem;
|
||||
margin-bottom: .2rem;
|
||||
|
||||
.right {
|
||||
@include transition(transform $transition-fn $transition-speed);
|
||||
|
|
@ -143,7 +142,7 @@
|
|||
padding: $nav-link-padding-y;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
padding: 1.7rem 1rem .5rem 1rem;
|
||||
padding: 1.7rem 1rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Misc: Miscellaneous
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Misc: Miscellaneous
|
||||
//
|
||||
|
||||
.border-transparent {
|
||||
border-color: transparent !important;
|
||||
|
|
@ -27,10 +26,8 @@
|
|||
> .description-text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// Description Block Extension
|
||||
.description-block {
|
||||
// Description Block Extension
|
||||
.description-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -57,7 +54,7 @@
|
|||
.list-seperator {
|
||||
background: $card-border-color;
|
||||
height: 1px;
|
||||
margin: 15px 0 9px 0;
|
||||
margin: 15px 0 9px;
|
||||
}
|
||||
|
||||
.list-link {
|
||||
|
|
@ -237,7 +234,7 @@
|
|||
}
|
||||
|
||||
.attachment-text {
|
||||
color: #555;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -295,16 +292,16 @@
|
|||
position: absolute;
|
||||
right: -2px;
|
||||
top: -2px;
|
||||
z-index: 10;
|
||||
width: $ribbon-wrapper-size;
|
||||
z-index: 10;
|
||||
|
||||
&.ribbon-lg {
|
||||
height: $ribbon-lg-wrapper-size;
|
||||
width: $ribbon-lg-wrapper-size;
|
||||
|
||||
.ribbon {
|
||||
top: $ribbon-lg-top;
|
||||
right: $ribbon-lg-right;
|
||||
top: $ribbon-lg-top;
|
||||
width: $ribbon-lg-width;
|
||||
}
|
||||
}
|
||||
|
|
@ -314,8 +311,8 @@
|
|||
width: $ribbon-xl-wrapper-size;
|
||||
|
||||
.ribbon {
|
||||
top: $ribbon-xl-top;
|
||||
right: $ribbon-xl-right;
|
||||
top: $ribbon-xl-top;
|
||||
width: $ribbon-xl-width;
|
||||
}
|
||||
}
|
||||
|
|
@ -340,7 +337,7 @@
|
|||
border-right: $ribbon-border-size solid transparent;
|
||||
border-top: $ribbon-border-size solid #9e9e9e;
|
||||
bottom: -$ribbon-border-size;
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* General: Mixins
|
||||
* ---------------
|
||||
*/
|
||||
//
|
||||
// General: Mixins
|
||||
//
|
||||
|
||||
|
||||
// Cards Variant
|
||||
|
|
@ -72,7 +71,143 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Sidebar Mini Breakpoints
|
||||
@mixin sidebar-mini-breakpoint() {
|
||||
// A fix for text overflow while transitioning from sidebar mini to full sidebar
|
||||
.nav-sidebar,
|
||||
.nav-sidebar > .nav-header,
|
||||
.nav-sidebar .nav-link {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// When the sidebar is collapsed...
|
||||
&.sidebar-collapse {
|
||||
.d-hidden-mini {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Apply the new margins to the main content and footer
|
||||
.content-wrapper,
|
||||
.main-footer,
|
||||
.main-header {
|
||||
margin-left: $sidebar-mini-width !important;
|
||||
}
|
||||
|
||||
// Make the sidebar headers
|
||||
.nav-sidebar .nav-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-link p {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xl {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Modify the sidebar to shrink instead of disappearing
|
||||
.main-sidebar {
|
||||
overflow-x: hidden;
|
||||
|
||||
&,
|
||||
&::before {
|
||||
// Don't go away! Just shrink
|
||||
margin-left: 0;
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
.image {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.sidebar-focused {
|
||||
width: $sidebar-width;
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
text-align: left;
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
// Make the sidebar links, menus, labels, badges
|
||||
// and angle icons disappear
|
||||
.sidebar-form,
|
||||
.user-panel > .info {
|
||||
display: block !important;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.nav-sidebar > .nav-item > .nav-link > span {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make an element visible only when sidebar mini is active
|
||||
.visible-sidebar-mini {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.layout-fixed {
|
||||
.main-sidebar:hover {
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar Variant
|
||||
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
|
||||
background-color: $color;
|
||||
|
||||
|
|
@ -94,6 +229,7 @@
|
|||
// Add color to the sidebar toggle button
|
||||
.sidebar-toggle {
|
||||
color: $font-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $hover-bg;
|
||||
|
|
@ -102,7 +238,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Logo color variation
|
||||
// Logo color Variant
|
||||
@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
|
||||
background-color: $bg-color;
|
||||
border-bottom: $border-bottom-width solid $border-bottom-color;
|
||||
|
|
@ -121,13 +257,115 @@
|
|||
border-color: $bg-color;
|
||||
color: color-yiq($bg-color);
|
||||
|
||||
&:after,
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background Variant
|
||||
@mixin background-variant($name, $color) {
|
||||
.bg-#{$name} {
|
||||
background-color: #{$color};
|
||||
|
||||
&,
|
||||
> a {
|
||||
color: color-yiq($color) !important;
|
||||
}
|
||||
|
||||
&.btn {
|
||||
&:hover {
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background Gradient Variant
|
||||
@mixin background-gradient-variant($name, $color) {
|
||||
.bg-gradient-#{$name} {
|
||||
@include bg-gradient-variant('&', $color);
|
||||
color: color-yiq($color);
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Switch Variant
|
||||
@mixin custom-switch-variant($name, $color) {
|
||||
&.custom-switch-off-#{$name} {
|
||||
& .custom-control-input ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input ~ .custom-control-label::after {
|
||||
background: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-switch-on-#{$name} {
|
||||
& .custom-control-input:checked ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: lighten($color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Range Variant
|
||||
@mixin custom-range-variant($name, $color) {
|
||||
&.custom-range-#{$name} {
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb,
|
||||
&::-moz-range-thumb,
|
||||
&::-ms-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb,
|
||||
&::-moz-range-thumb,
|
||||
&::-ms-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ETC
|
||||
@mixin translate($x, $y) {
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
|
@ -138,12 +376,10 @@
|
|||
}
|
||||
|
||||
@mixin calc($property, $expression) {
|
||||
#{$property}: -webkit-calc(#{$expression});
|
||||
#{$property}: calc(#{$expression});
|
||||
}
|
||||
|
||||
@mixin rotate($value) {
|
||||
-ms-transform: rotate($value);
|
||||
transform: rotate($value);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
/*
|
||||
* Component: Modals
|
||||
* ---------
|
||||
------
|
||||
*/
|
||||
//
|
||||
// Component: Modals
|
||||
//
|
||||
|
||||
// Overlay
|
||||
.modal-dialog {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
/*
|
||||
* Component: Nav
|
||||
* --------------
|
||||
*/
|
||||
//
|
||||
// Component: Nav
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
|
||||
&:not(.active):hover {
|
||||
color: theme-color('primary')
|
||||
color: theme-color('primary');
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&.dropdown.show {
|
||||
.nav-link:hover {
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
// Color variants
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color==dark or $color==light {
|
||||
@if $color == dark or $color == light {
|
||||
.navbar-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color!=dark and $color!=light {
|
||||
@if $color != dark and $color != light {
|
||||
.navbar-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
/*
|
||||
* Misc: Print
|
||||
* -----------
|
||||
*/
|
||||
|
||||
//
|
||||
// Misc: Print
|
||||
//
|
||||
|
||||
@media print {
|
||||
//Add to elements that you do not want to show when printing
|
||||
.no-print {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/*
|
||||
* Component: Products
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Component: Products
|
||||
//
|
||||
|
||||
.products-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include clearfix;
|
||||
|
||||
|
|
@ -19,6 +20,7 @@
|
|||
|
||||
.product-img {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Progress Bar
|
||||
* -----------------------
|
||||
*/
|
||||
//
|
||||
// Component: Progress Bar
|
||||
//
|
||||
|
||||
//General CSS
|
||||
.progress {
|
||||
|
|
@ -59,7 +58,9 @@
|
|||
|
||||
// Remove margins from progress bars when put in a table
|
||||
.table {
|
||||
tr > td .progress {
|
||||
margin: 0;
|
||||
tr > td {
|
||||
.progress {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,145 +1,6 @@
|
|||
/*
|
||||
* Component: Sidebar Mini
|
||||
* -----------------------
|
||||
*/
|
||||
|
||||
// Mixin
|
||||
|
||||
@mixin sidebar-mini-breakpoint() {
|
||||
// A fix for text overflow while transitioning from sidebar mini to full sidebar
|
||||
.nav-sidebar,
|
||||
.nav-sidebar > .nav-header,
|
||||
.nav-sidebar .nav-link {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// When the sidebar is collapsed...
|
||||
&.sidebar-collapse {
|
||||
.d-hidden-mini {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Apply the new margins to the main content and footer
|
||||
.content-wrapper,
|
||||
.main-footer,
|
||||
.main-header {
|
||||
margin-left: $sidebar-mini-width !important;
|
||||
}
|
||||
|
||||
// Make the sidebar headers
|
||||
.nav-sidebar .nav-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-link p {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xl {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Modify the sidebar to shrink instead of disappearing
|
||||
.main-sidebar {
|
||||
overflow-x: hidden;
|
||||
|
||||
&,
|
||||
&::before {
|
||||
// Don't go away! Just shrink
|
||||
margin-left: 0;
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
.image {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.sidebar-focused {
|
||||
width: $sidebar-width;
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
text-align: left;
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
// Make the sidebar links, menus, labels, badges
|
||||
// and angle icons disappear
|
||||
.sidebar-form,
|
||||
.user-panel > .info {
|
||||
display: block !important;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.nav-sidebar > .nav-item > .nav-link > span {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make an element visible only when sidebar mini is active
|
||||
.visible-sidebar-mini {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.layout-fixed {
|
||||
.main-sidebar:hover {
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Component: Sidebar Mini
|
||||
//
|
||||
|
||||
// Logo style
|
||||
.logo-xs,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Small Box
|
||||
* --------------------
|
||||
*/
|
||||
//
|
||||
// Component: Small Box
|
||||
//
|
||||
|
||||
.small-box {
|
||||
@include border-radius($border-radius);
|
||||
|
|
@ -19,7 +18,6 @@
|
|||
|
||||
> .small-box-footer {
|
||||
background: rgba($black, 0.1);
|
||||
color: $white;
|
||||
color: rgba($white, 0.8);
|
||||
display: block;
|
||||
padding: 3px 0;
|
||||
|
|
@ -82,14 +80,15 @@
|
|||
font-size: 1rem;
|
||||
|
||||
> small {
|
||||
color: #f9f9f9;
|
||||
color: $gray-100;
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
h3, p {
|
||||
h3,
|
||||
p {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
/*
|
||||
* Component: Social Widgets
|
||||
* -------------------------
|
||||
*/
|
||||
//
|
||||
// Component: Social Widgets
|
||||
//
|
||||
|
||||
//General widget style
|
||||
.card-widget {
|
||||
border: none;
|
||||
border: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Table
|
||||
* ----------------
|
||||
*/
|
||||
//
|
||||
// Component: Table
|
||||
//
|
||||
|
||||
.table {
|
||||
&:not(.table-dark) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Component: Text
|
||||
* -------------
|
||||
*/
|
||||
//
|
||||
// Component: Text
|
||||
//
|
||||
|
||||
// text modification
|
||||
.text-bold {
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
font-size: $font-size-xl !important;
|
||||
}
|
||||
|
||||
|
||||
// text color variations
|
||||
@each $name, $color in $colors {
|
||||
.text-#{$name} {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
/*
|
||||
* Component: Timeline
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Component: Timeline
|
||||
//
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
margin: 0 0 30px 0;
|
||||
margin: 0 0 30px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -33,7 +32,7 @@
|
|||
@include box-shadow($card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
background: $white;
|
||||
color: #444;
|
||||
color: $gray-700;
|
||||
margin-left: 60px;
|
||||
margin-right: 15px;
|
||||
margin-top: 0;
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
|
||||
> .timeline-header {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
color: #555;
|
||||
color: $gray-700;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
|
|
@ -62,7 +61,8 @@
|
|||
}
|
||||
|
||||
// Item body and footer
|
||||
> .timeline-body, > .timeline-footer {
|
||||
> .timeline-body,
|
||||
> .timeline-footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
> .time-label {
|
||||
> span {
|
||||
@include border-radius(4px);
|
||||
|
||||
|
||||
background-color: $white;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
/*
|
||||
* Component: Users List
|
||||
* ---------------------
|
||||
*/
|
||||
//
|
||||
// Component: Users List
|
||||
//
|
||||
|
||||
.users-list {
|
||||
@extend .list-unstyled;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
padding: 10px;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
/*
|
||||
* Core: Variables
|
||||
* ---------------
|
||||
*/
|
||||
//
|
||||
// Core: Variables
|
||||
//
|
||||
|
||||
// COLORS
|
||||
// --------------------------------------------------------
|
||||
$blue: #0073b7 !default;
|
||||
$navy: #001F3F !default;
|
||||
$teal: #39CCCC !default;
|
||||
$olive: #3D9970 !default;
|
||||
$lime: #01FF70 !default;
|
||||
$orange: #FF851B !default;
|
||||
$fuchsia: #F012BE !default;
|
||||
$navy: #001f3f !default;
|
||||
$teal: #39cccc !default;
|
||||
$olive: #3d9970 !default;
|
||||
$lime: #01ff70 !default;
|
||||
$orange: #ff851b !default;
|
||||
$fuchsia: #f012be !default;
|
||||
$purple: #605ca8 !default;
|
||||
$maroon: #D81B60 !default;
|
||||
$maroon: #d81b60 !default;
|
||||
$black: #111 !default;
|
||||
$gray-x-light: #d2d6de !default;
|
||||
|
||||
|
|
@ -128,7 +127,7 @@ $control-sidebar-width: $sidebar-width !default;
|
|||
|
||||
// Cards
|
||||
// --------------------------------------------------------
|
||||
$card-border-color: #f4f4f4 !default;
|
||||
$card-border-color: $gray-100 !default;
|
||||
$card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
|
||||
$card-title-font-size: $font-size-lg;
|
||||
$card-title-font-weight: $font-weight-normal;
|
||||
|
|
@ -170,7 +169,7 @@ $font-size-xl: ($font-size-base * 2);
|
|||
|
||||
// BUTTON
|
||||
// --------------------------------------------------------
|
||||
$button-default-background-color: #f4f4f4 !default;
|
||||
$button-default-background-color: $gray-100 !default;
|
||||
$button-default-color: #444 !default;
|
||||
$button-default-border-color: #ddd !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,43 @@
|
|||
/*
|
||||
* Pages: 400 and 500 error pages
|
||||
* ------------------------------
|
||||
*/
|
||||
//
|
||||
// Pages: 400 and 500 error pages
|
||||
//
|
||||
|
||||
.error-page {
|
||||
margin: 20px auto 0;
|
||||
width: 600px;
|
||||
margin: 20px auto 0 auto;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//For the error number e.g: 404
|
||||
> .headline {
|
||||
float: left;
|
||||
font-size: 100px;
|
||||
font-weight: 300;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
//For the message
|
||||
> .error-content {
|
||||
display: block;
|
||||
margin-left: 190px;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-weight: 300;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Pages: E-commerce
|
||||
* -----------------
|
||||
*/
|
||||
//
|
||||
// Pages: E-commerce
|
||||
//
|
||||
|
||||
// product image
|
||||
.product-image {
|
||||
|
|
@ -10,15 +9,14 @@
|
|||
}
|
||||
|
||||
// product image thumbnails list
|
||||
.product-image-thumbs {
|
||||
display: flex;
|
||||
.product-image-thumbs {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
// product image thumbnail
|
||||
.product-image-thumb {
|
||||
|
||||
.product-image-thumb {
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
|
||||
|
|
@ -40,6 +38,8 @@
|
|||
}
|
||||
|
||||
// product share
|
||||
.product-share a {
|
||||
margin-right: 0.5rem;
|
||||
.product-share {
|
||||
a {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
/*
|
||||
* Pages: Invoice
|
||||
* --------------
|
||||
*/
|
||||
//
|
||||
// Pages: Invoice
|
||||
//
|
||||
|
||||
.invoice {
|
||||
position: relative;
|
||||
background: $white;
|
||||
border: 1px solid $card-border-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
|
|
|
|||
|
|
@ -1,66 +1,71 @@
|
|||
/*
|
||||
* Pages: Lock Screen
|
||||
* ------------------
|
||||
*/
|
||||
/* ADD THIS CLASS TO THE <BODY> TAG */
|
||||
//
|
||||
// Pages: Lock Screen
|
||||
//
|
||||
|
||||
// ADD THIS CLASS TO THE <BODY> TAG
|
||||
.lockscreen {
|
||||
background: $gray-200;
|
||||
|
||||
// User name [optional]
|
||||
.lockscreen-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lockscreen-logo {
|
||||
font-size: 35px;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.lockscreen-wrapper {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* User name [optional] */
|
||||
.lockscreen .lockscreen-name {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Will contain the image and the sign in form */
|
||||
// Will contain the image and the sign in form
|
||||
.lockscreen-item {
|
||||
@include border-radius(4px);
|
||||
padding: 0;
|
||||
background: $white;
|
||||
margin: 10px auto 30px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 10px auto 30px auto;
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
/* User image */
|
||||
// User image
|
||||
.lockscreen-image {
|
||||
@include border-radius(50%);
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -25px;
|
||||
background: $white;
|
||||
left: -10px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
z-index: 10;
|
||||
|
||||
> img {
|
||||
@include border-radius(50%);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contains the password input and the login button */
|
||||
// Contains the password input and the login button
|
||||
.lockscreen-credentials {
|
||||
margin-left: 70px;
|
||||
|
||||
.form-control {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: $white;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
/*
|
||||
* Pages: Login & Register
|
||||
* -----------------------
|
||||
*/
|
||||
//
|
||||
// Pages: Login & Register
|
||||
//
|
||||
|
||||
.login-logo,
|
||||
.register-logo {
|
||||
font-size: 35px;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -21,35 +21,39 @@
|
|||
|
||||
.login-box,
|
||||
.register-box {
|
||||
width: 360px;
|
||||
margin: 7% auto;
|
||||
width: 360px;
|
||||
|
||||
@media (max-width: map-get($grid-breakpoints, sm)) {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card-body,
|
||||
.register-card-body {
|
||||
background: $white;
|
||||
padding: 20px;
|
||||
border-top: 0;
|
||||
color: #666;
|
||||
padding: 20px;
|
||||
|
||||
.input-group {
|
||||
.form-control {
|
||||
border-right: none;
|
||||
border-right: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
||||
& ~ .input-group-append .input-group-text {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-valid {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& ~ .input-group-append .input-group-text {
|
||||
border-color: $success;
|
||||
}
|
||||
|
|
@ -59,19 +63,20 @@
|
|||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& ~ .input-group-append .input-group-text {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: #777;
|
||||
background-color: transparent;
|
||||
border-left: none;
|
||||
transition: $input-transition;
|
||||
// Fix boostrap issue temporarily https://github.com/twbs/bootstrap/issues/25110
|
||||
border-bottom-right-radius: $border-radius !important;
|
||||
border-left: 0;
|
||||
border-top-right-radius: $border-radius !important;
|
||||
color: #777;
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,8 +84,8 @@
|
|||
.login-box-msg,
|
||||
.register-box-msg {
|
||||
margin: 0;
|
||||
padding: 0 20px 20px;
|
||||
text-align: center;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.social-auth-links {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* Pages: Mailbox
|
||||
* --------------
|
||||
*/
|
||||
//
|
||||
// Pages: Mailbox
|
||||
//
|
||||
|
||||
.mailbox-messages {
|
||||
> .table {
|
||||
margin: 0;
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.mailbox-controls {
|
||||
padding: 5px;
|
||||
|
||||
&.with-border {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
}
|
||||
|
|
@ -18,13 +19,15 @@
|
|||
.mailbox-read-info {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
padding: 10px;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 5px 0 0 0;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,17 +43,17 @@
|
|||
.mailbox-attachments {
|
||||
@extend .list-unstyled;
|
||||
li {
|
||||
float: left;
|
||||
width: 200px;
|
||||
border: 1px solid #eee;
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.mailbox-attachment-name {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mailbox-attachment-icon,
|
||||
|
|
@ -60,13 +63,14 @@
|
|||
}
|
||||
|
||||
.mailbox-attachment-info {
|
||||
background: $gray-100;
|
||||
padding: 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.mailbox-attachment-size {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding-top: 0.75rem;
|
||||
|
|
@ -74,16 +78,18 @@
|
|||
}
|
||||
|
||||
.mailbox-attachment-icon {
|
||||
text-align: center;
|
||||
font-size: 65px;
|
||||
color: #666;
|
||||
padding: 20px 10px;
|
||||
font-size: 65px;
|
||||
max-height: 132.5px;
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
|
||||
&.has-img {
|
||||
padding: 0;
|
||||
|
||||
> img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
/*
|
||||
* Pages: Profile
|
||||
* --------------
|
||||
*/
|
||||
//
|
||||
// Pages: Profile
|
||||
//
|
||||
|
||||
.profile-user-img {
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
padding: 3px;
|
||||
border: 3px solid $gray-500;
|
||||
margin: 0 auto;
|
||||
padding: 3px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
|
|
@ -17,14 +16,16 @@
|
|||
|
||||
.post {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
color: #666;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.user-block {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Pages: Projects
|
||||
* ---------------
|
||||
*/
|
||||
//
|
||||
// Pages: Projects
|
||||
//
|
||||
|
||||
.projects {
|
||||
td {
|
||||
|
|
@ -14,7 +13,7 @@
|
|||
|
||||
// table avatar
|
||||
img.table-avatar,
|
||||
.table-avatar img{
|
||||
.table-avatar img {
|
||||
border-radius: 50%;
|
||||
display: inline;
|
||||
width: 2.5rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Plugin: Bootstrap Slider
|
||||
* ------------------------
|
||||
*/
|
||||
//
|
||||
// Plugin: Bootstrap Slider
|
||||
//
|
||||
|
||||
// Style override
|
||||
.slider {
|
||||
|
|
@ -14,7 +13,7 @@
|
|||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $color in $colors {
|
||||
@each $name, $color in $theme-colors {
|
||||
.slider-#{$name} .slider {
|
||||
.slider-selection {
|
||||
background: $color;
|
||||
|
|
@ -22,4 +21,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.slider-#{$name} .slider {
|
||||
.slider-selection {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
/*
|
||||
* Plugin: Full Calendar
|
||||
* ---------------------
|
||||
*/
|
||||
//
|
||||
// Plugin: Full Calendar
|
||||
//
|
||||
|
||||
// Buttons
|
||||
.fc-button {
|
||||
background: #f4f4f4;
|
||||
background: $gray-100;
|
||||
background-image: none;
|
||||
color: #444;
|
||||
border-color: #ddd;
|
||||
border-bottom-color: #ddd;
|
||||
border-color: #ddd;
|
||||
color: $gray-700;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.hover {
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
|
||||
// Calendar title
|
||||
.fc-header-title h2 {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
line-height: 1.6em;
|
||||
color: #666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
}
|
||||
|
||||
.fc-grid {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-widget-header:first-of-type,
|
||||
|
|
@ -55,8 +55,8 @@
|
|||
}
|
||||
|
||||
.fc-toolbar {
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.fc-day-number {
|
||||
|
|
@ -69,13 +69,21 @@
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
margin-right: 5px;
|
||||
line-height: 30px;
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
|
||||
.fa,
|
||||
.fas,
|
||||
.far,
|
||||
.fab,
|
||||
.glyphicon,
|
||||
.ion {
|
||||
transition: transform linear .3s;
|
||||
|
||||
&:hover {
|
||||
@include rotate(30deg);
|
||||
}
|
||||
|
|
@ -90,11 +98,11 @@
|
|||
.external-event {
|
||||
@include box-shadow($card-shadow);
|
||||
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
border-radius: $border-radius;
|
||||
cursor: move;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
padding: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
/*
|
||||
* Plugin: iCheck Bootstrap
|
||||
* ------------------------
|
||||
*/
|
||||
//
|
||||
// Plugin: iCheck Bootstrap
|
||||
//
|
||||
|
||||
// iCheck colors (theme colors)
|
||||
@each $name, $color in $theme-colors {
|
||||
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
|
||||
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
|
||||
border-color: #{$color};
|
||||
border-color: #{$color};
|
||||
}
|
||||
|
||||
.icheck-#{$name} > input:first-child:checked + label::before,
|
||||
.icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
|
||||
background-color: #{$color};
|
||||
border-color: #{$color};
|
||||
background-color: #{$color};
|
||||
border-color: #{$color};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -21,12 +20,12 @@
|
|||
@each $name, $color in $colors {
|
||||
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
|
||||
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
|
||||
border-color: #{$color};
|
||||
border-color: #{$color};
|
||||
}
|
||||
|
||||
.icheck-#{$name} > input:first-child:checked + label::before,
|
||||
.icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
|
||||
background-color: #{$color};
|
||||
border-color: #{$color};
|
||||
background-color: #{$color};
|
||||
border-color: #{$color};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
/*
|
||||
* Plugins: JQVMap
|
||||
* ---------------
|
||||
*/
|
||||
//
|
||||
// Plugins: JQVMap
|
||||
//
|
||||
|
||||
// Zoom Button size fixes
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
background-color: $button-default-background-color;
|
||||
color: $button-default-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
border-radius: $btn-border-radius;
|
||||
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
border-radius: $btn-border-radius;
|
||||
color: $button-default-color;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.hover {
|
||||
color: darken($button-default-color, 10%);
|
||||
background-color: darken($button-default-background-color, 5%);
|
||||
color: darken($button-default-color, 10%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Plugins: jQuery Mapael
|
||||
* ----------------------
|
||||
*/
|
||||
//
|
||||
// Plugins: jQuery Mapael
|
||||
//
|
||||
|
||||
.mapael {
|
||||
.map {
|
||||
|
|
@ -10,6 +9,8 @@
|
|||
|
||||
.mapTooltip {
|
||||
@include reset-text();
|
||||
@include border-radius($tooltip-border-radius);
|
||||
@include font-size($tooltip-font-size);
|
||||
background-color: $tooltip-bg;
|
||||
color: $tooltip-color;
|
||||
display: block;
|
||||
|
|
@ -19,50 +20,44 @@
|
|||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-radius($tooltip-border-radius);
|
||||
@include font-size($tooltip-font-size);
|
||||
}
|
||||
|
||||
.myLegend {
|
||||
background-color: #f4f4e8;
|
||||
border: 1px solid #bebeb4;
|
||||
background-color: $gray-100;
|
||||
border: 1px solid $gray-500;
|
||||
padding: 10px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.zoomButton {
|
||||
border-radius: $btn-border-radius;
|
||||
background-color: $button-default-background-color;
|
||||
color: $button-default-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
padding-left: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
border-radius: $btn-border-radius;
|
||||
color: $button-default-color;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
left: 10px;
|
||||
line-height: 14px;
|
||||
padding-left: 1px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select : none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select : none;
|
||||
user-select: none;
|
||||
width: 16px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.hover {
|
||||
color: darken($button-default-color, 10%);
|
||||
background-color: darken($button-default-background-color, 5%);
|
||||
color: darken($button-default-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomReset {
|
||||
top: 10px;
|
||||
line-height: 12px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.zoomIn {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
/*
|
||||
* Plugins: Miscellaneous
|
||||
* ----------------------
|
||||
* Old plugin codes
|
||||
*/
|
||||
//
|
||||
// Plugins: Miscellaneous
|
||||
// Old plugin codes
|
||||
//
|
||||
|
||||
// _fix for sparkline tooltip
|
||||
.jqstooltip {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Plugin: Select2
|
||||
* ---------------
|
||||
*/
|
||||
//
|
||||
// Plugin: Select2
|
||||
//
|
||||
|
||||
//Signle select
|
||||
.select2-container--default,
|
||||
|
|
@ -11,16 +10,17 @@
|
|||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-selection--single {
|
||||
border: 1px solid $gray-x-light;
|
||||
//border-radius: $input-radius;
|
||||
padding: 6px 12px;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open {
|
||||
border-color: theme-color("primary");
|
||||
border-color: theme-color('primary');
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
|
|
@ -29,26 +29,25 @@
|
|||
}
|
||||
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: theme-color("primary");
|
||||
color: white;
|
||||
background-color: theme-color('primary');
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: 6px 12px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
height: auto;
|
||||
margin-top: -4px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
|
||||
padding-right: 6px;
|
||||
.select2-container[dir='rtl'] .select2-selection--single .select2-selection__rendered {
|
||||
padding-left: 20px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
|
|
@ -64,9 +63,10 @@
|
|||
.select2-search--inline {
|
||||
.select2-search__field {
|
||||
border: 1px solid $gray-x-light;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid theme-color('primary');
|
||||
outline: none;
|
||||
border: 1px solid theme-color("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,9 +77,10 @@
|
|||
|
||||
.select2-container--default .select2-results__option[aria-selected=true] {
|
||||
background-color: #ddd;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: #444;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,9 +88,9 @@
|
|||
.select2-container--default {
|
||||
.select2-selection--multiple {
|
||||
border: 1px solid $gray-x-light;
|
||||
//border-radius: $input-radius;
|
||||
|
||||
&:focus {
|
||||
border-color: theme-color("primary");
|
||||
border-color: theme-color('primary');
|
||||
}
|
||||
|
||||
.select2-selection__rendered li:first-child.select2-search.select2-search--inline {
|
||||
|
|
@ -100,21 +101,23 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--focus .select2-selection--multiple {
|
||||
border-color: $gray-x-light;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: theme-color("primary");
|
||||
border-color: darken(theme-color("primary"), 5%);
|
||||
padding: 1px 10px;
|
||||
background-color: theme-color('primary');
|
||||
border-color: darken(theme-color('primary'), 5%);
|
||||
color: $white;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
||||
margin-right: 5px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-right: 5px;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,38 @@
|
|||
/*
|
||||
* Plugin: SweetAlert2
|
||||
* -------------------
|
||||
*/
|
||||
//
|
||||
// Plugin: SweetAlert2
|
||||
//
|
||||
|
||||
// Icon Colors
|
||||
.swal2-icon {
|
||||
&.swal2-info {
|
||||
color: $info;
|
||||
border-color: ligthen($info, 20%);
|
||||
color: $info;
|
||||
}
|
||||
|
||||
&.swal2-warning {
|
||||
color: $warning;
|
||||
border-color: ligthen($warning, 20%);
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.swal2-error {
|
||||
color: $danger;
|
||||
border-color: ligthen($danger, 20%);
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
&.swal2-question {
|
||||
color: $secondary;
|
||||
border-color: ligthen($secondary, 20%);
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&.swal2-success {
|
||||
color: $success;
|
||||
border-color: ligthen($success, 20%);
|
||||
|
||||
color: $success;
|
||||
|
||||
.swal2-success-ring {
|
||||
border-color: ligthen($success, 20%);
|
||||
}
|
||||
[class^="swal2-success-line"] {
|
||||
|
||||
[class^='swal2-success-line'] {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*
|
||||
* Plugin: Toastr
|
||||
* --------------
|
||||
*/
|
||||
//
|
||||
// Plugin: Toastr
|
||||
//
|
||||
|
||||
// Background to FontAwesome Icons
|
||||
// #toast-container > .toast {
|
||||
|
|
@ -35,15 +34,19 @@
|
|||
.toast {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -73,17 +73,17 @@
|
|||
var $navbar_border = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.main-header').hasClass('border-bottom'),
|
||||
checked: $('.main-header').hasClass('border-bottom-0'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.main-header').addClass('border-bottom')
|
||||
$('.main-header').addClass('border-bottom-0')
|
||||
} else {
|
||||
$('.main-header').removeClass('border-bottom')
|
||||
$('.main-header').removeClass('border-bottom-0')
|
||||
}
|
||||
})
|
||||
$checkbox_container.append($navbar_border)
|
||||
$checkbox_container.append('<span>Navbar border</span>')
|
||||
$checkbox_container.append('<span>No Navbar border</span>')
|
||||
$container.append($checkbox_container)
|
||||
|
||||
|
||||
|
|
@ -92,7 +92,17 @@
|
|||
'bg-warning',
|
||||
'bg-info',
|
||||
'bg-danger',
|
||||
'bg-success'
|
||||
'bg-success',
|
||||
'bg-indigo',
|
||||
'bg-navy',
|
||||
'bg-purple',
|
||||
'bg-fuchsia',
|
||||
'bg-pink',
|
||||
'bg-maroon',
|
||||
'bg-orange',
|
||||
'bg-lime',
|
||||
'bg-teal',
|
||||
'bg-olive'
|
||||
]
|
||||
|
||||
var sidebar_skins = [
|
||||
|
|
@ -101,11 +111,31 @@
|
|||
'sidebar-dark-info',
|
||||
'sidebar-dark-danger',
|
||||
'sidebar-dark-success',
|
||||
'sidebar-dark-indigo',
|
||||
'sidebar-dark-navy',
|
||||
'sidebar-dark-purple',
|
||||
'sidebar-dark-fuchsia',
|
||||
'sidebar-dark-pink',
|
||||
'sidebar-dark-maroon',
|
||||
'sidebar-dark-orange',
|
||||
'sidebar-dark-lime',
|
||||
'sidebar-dark-teal',
|
||||
'sidebar-dark-olive',
|
||||
'sidebar-light-primary',
|
||||
'sidebar-light-warning',
|
||||
'sidebar-light-info',
|
||||
'sidebar-light-danger',
|
||||
'sidebar-light-success'
|
||||
'sidebar-light-success',
|
||||
'sidebar-light-indigo',
|
||||
'sidebar-light-navy',
|
||||
'sidebar-light-purple',
|
||||
'sidebar-light-fuchsia',
|
||||
'sidebar-light-pink',
|
||||
'sidebar-light-maroon',
|
||||
'sidebar-light-orange',
|
||||
'sidebar-light-lime',
|
||||
'sidebar-light-teal',
|
||||
'sidebar-light-olive'
|
||||
]
|
||||
|
||||
$container.append('<h6>Dark Sidebar Variants</h6>')
|
||||
|
|
|
|||
16
index.html
16
index.html
|
|
@ -741,11 +741,11 @@
|
|||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -757,11 +757,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -773,11 +773,11 @@
|
|||
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -789,11 +789,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
|
|||
16
index2.html
16
index2.html
|
|
@ -881,11 +881,11 @@
|
|||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -897,11 +897,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -913,11 +913,11 @@
|
|||
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -929,11 +929,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
|
|||
|
|
@ -21,9 +21,16 @@
|
|||
.color-palette {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
|
||||
.color-palette.disabled {
|
||||
text-align: center;
|
||||
padding-right: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.color-palette-set {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
@ -37,11 +44,16 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.color-palette.disabled span {
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding-left: .75rem;
|
||||
}
|
||||
|
||||
.color-palette-box h4 {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 25px;
|
||||
margin-top: -40px;
|
||||
left: 1.25rem;
|
||||
margin-top: .75rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
|
|
@ -649,13 +661,26 @@
|
|||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="col-12">
|
||||
<h5>Theme Colors</h5>
|
||||
</div>
|
||||
<!-- /.col-12 -->
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center">Primary</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-primary color-palette"><span>#007bff</span></div>
|
||||
<div class="bg-primary disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-primary color-palette"><span>#3c8dbc</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center">Secondary</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-secondary color-palette"><span>#6c757d</span></div>
|
||||
<div class="bg-secondary disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
|
@ -663,8 +688,8 @@
|
|||
<h4 class="text-center">Info</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-info color-palette"><span>#17a2b8</span></div>
|
||||
<div class="bg-info disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-info color-palette"><span>#00c0ef</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
|
@ -672,17 +697,17 @@
|
|||
<h4 class="text-center">Success</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-success color-palette"><span>#28a745</span></div>
|
||||
<div class="bg-success disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-success color-palette"><span>#00a65a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center">Warning</h4>
|
||||
<h4 class="text-center bg-warning">Warning</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-warning color-palette"><span>#ffc107</span></div>
|
||||
<div class="bg-warning disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-warning color-palette"><span>#f39c12</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
|
@ -690,8 +715,33 @@
|
|||
<h4 class="text-center">Danger</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-danger color-palette"><span>#dc3545</span></div>
|
||||
<div class="bg-danger disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-danger color-palette"><span>#f56954</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="col-12">
|
||||
<h5 class="mt-3">Black/White Nuances</h5>
|
||||
</div>
|
||||
<!-- /.col-12 -->
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center">Black</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-black color-palette"><span>#000000</span></div>
|
||||
<div class="bg-black disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center">Gray Dark</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-gray-dark color-palette"><span>#343a40</span></div>
|
||||
<div class="bg-gray-dark disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
|
@ -699,21 +749,114 @@
|
|||
<h4 class="text-center">Gray</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-gray color-palette"><span>#adb5bd</span></div>
|
||||
<div class="bg-gray disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-gray color-palette"><span>#d2d6de</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-light">Light</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-light color-palette"><span>#1f2d3d</span></div>
|
||||
<div class="bg-light disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="col-12">
|
||||
<h5 class="mt-3">Colors</h5>
|
||||
</div>
|
||||
<!-- /.col-12 -->
|
||||
<div class="row">
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center">Black</h4>
|
||||
<h4 class="text-center bg-indigo">Indigo</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-black disabled color-palette"><span>Disabled</span></div>
|
||||
<div class="bg-black color-palette"><span>#111111</span></div>
|
||||
<div class="bg-indigo color-palette"><span>#6610f2</span></div>
|
||||
<div class="bg-indigo disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-navy">Navy</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-navy color-palette"><span>#001f3f</span></div>
|
||||
<div class="bg-navy disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-purple">Purple</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-purple color-palette"><span>#605ca8</span></div>
|
||||
<div class="bg-purple disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-fuchsia">Fuchsia</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-fuchsia color-palette"><span>#f012be</span></div>
|
||||
<div class="bg-fuchsia disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-pink">Pink</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-pink color-palette"><span>#e83e8c</span></div>
|
||||
<div class="bg-pink disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-maroon">Maroon</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-maroon color-palette"><span>#d81b60</span></div>
|
||||
<div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-orange">Orange</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-orange color-palette"><span>#ff851b</span></div>
|
||||
<div class="bg-orange disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-lime">Lime</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-lime color-palette"><span>#01ff70</span></div>
|
||||
<div class="bg-lime disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-teal">Teal</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-teal color-palette"><span>#39cccc</span></div>
|
||||
<div class="bg-teal disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-4 col-md-2">
|
||||
<h4 class="text-center bg-olive">Olive</h4>
|
||||
|
||||
<div class="color-palette-set">
|
||||
<div class="bg-olive color-palette"><span>#3d9970</span></div>
|
||||
<div class="bg-olive disabled color-palette"><span>Disabled</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
|
@ -1249,7 +1392,7 @@
|
|||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fas fa-text-width"></i>
|
||||
Block Quotes
|
||||
Primary Block Quotes
|
||||
</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
|
|
@ -1269,12 +1412,12 @@
|
|||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fas fa-text-width"></i>
|
||||
Block Quotes Pulled Right
|
||||
Secondary Block Quotes
|
||||
</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body clearfix">
|
||||
<blockquote class="float-right">
|
||||
<blockquote class="quote-secondary">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||||
</blockquote>
|
||||
|
|
|
|||
|
|
@ -1448,11 +1448,11 @@
|
|||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1464,11 +1464,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1543,11 +1543,11 @@
|
|||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1559,11 +1559,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1638,11 +1638,11 @@
|
|||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1654,11 +1654,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1733,11 +1733,11 @@
|
|||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
@ -1749,11 +1749,11 @@
|
|||
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-info clearfix">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-info -->
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
|
|
|
|||
Loading…
Reference in New Issue