github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

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 2019-07-18 16:22:11 +02:00
parent c66ab85940
commit 6773bd1772
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
60 changed files with 1639 additions and 2350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/scss/AdminLTE-raw.scss
View File

@ -43,7 +43,6 @@
@import 'navs'; @import 'navs';
@import 'products'; @import 'products';
@import 'table'; @import 'table';
@import 'labels';
@import 'direct-chat'; @import 'direct-chat';
@import 'users-list'; @import 'users-list';
@import 'carousel'; @import 'carousel';

1
build/scss/AdminLTE.scss
View File

@ -39,7 +39,6 @@
@import 'navs'; @import 'navs';
@import 'products'; @import 'products';
@import 'table'; @import 'table';
@import 'labels';
@import 'direct-chat'; @import 'direct-chat';
@import 'users-list'; @import 'users-list';
@import 'carousel'; @import 'carousel';

12
build/scss/_alerts.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Alert // Component: Alert
* ---------------- //
*/
.alert { .alert {
.icon { .icon {
@ -44,3 +43,8 @@
@extend .bg-info; @extend .bg-info;
border-color: darken(theme-color('info'), 5%); border-color: darken(theme-color('info'), 5%);
} }
.alert-primary {
@extend .bg-primary;
border-color: darken(theme-color('primary'), 5%);
}

7
build/scss/_brand.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Brand // Component: Brand
* ---------------- //
*/
.brand-link { .brand-link {
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y; $brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;

7
build/scss/_buttons.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Button // Component: Button
* ----------------- //
*/
.btn { .btn {
// Flat buttons // Flat buttons

7
build/scss/_callout.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Callout // Component: Callout
* ------------------ //
*/
// Base styles (regardless of theme) // Base styles (regardless of theme)
.callout { .callout {

7
build/scss/_cards.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Cards // Component: Cards
* ---------------- //
*/
.card { .card {
@extend .mb-3; @extend .mb-3;

7
build/scss/_carousel.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Carousel // Component: Carousel
* ------------------- //
*/
.carousel-control { .carousel-control {
&.left, &.left,

125
build/scss/_colors.scss
View File

@ -1,74 +1,15 @@
/* //
* Misc: Colors // Misc: Colors
* ------------ //
*/
// Background colors (theme colors) // Background colors (theme colors)
@each $name, $color in $theme-colors { @each $name, $color in $theme-colors {
.bg-#{$name} { @include background-variant($name, $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%));
}
}
}
} }
// Background colors (colors) // Background colors (colors)
@each $name, $color in $colors { @each $name, $color in $colors {
.bg-#{$name} { @include background-variant($name, $color);
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%));
}
}
}
} }
.bg-gray { .bg-gray {
@ -93,64 +34,12 @@
// Gradient Background colors (theme colors) // Gradient Background colors (theme colors)
@each $name, $color in $theme-colors { @each $name, $color in $theme-colors {
.bg-gradient-#{$name} { @include background-gradient-variant($name, $color);
@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%));
}
}
}
} }
// Gradient Background colors (colors) // Gradient Background colors (colors)
@each $name, $color in $colors { @each $name, $color in $colors {
.bg-gradient-#{$name} { @include background-gradient-variant($name, $color);
@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%));
}
}
}
} }
// Backgrund Color Disabled // Backgrund Color Disabled

9
build/scss/_control-sidebar.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Control Sidebar // Component: Control Sidebar
* -------------------------- //
*/
html.control-sidebar-animate { html.control-sidebar-animate {
overflow-x: hidden; overflow-x: hidden;
@ -150,6 +149,6 @@ html.control-sidebar-animate {
// Background // Background
& { & {
background: $sidebar-light-bg; background: $sidebar-light-bg;
border-left: 1px solid $gray-500; border-left: $main-header-bottom-border;
} }
} }

35
build/scss/_direct-chat.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Direct Chat // Component: Direct Chat
* ---------------------- //
*/
.direct-chat { .direct-chat {
.card-body { .card-body {
@ -100,7 +99,7 @@
} }
} }
.direct-chat-info { .direct-chat-infos {
display: block; display: block;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-bottom: 2px; margin-bottom: 2px;
@ -182,23 +181,15 @@
color: darken($gray-500, 25%); color: darken($gray-500, 25%);
} }
//Direct Chat Variants // Color variants
.direct-chat-danger { @each $name, $color in $theme-colors {
@include direct-chat-variant(theme-color('danger')); .direct-chat-#{$name} {
@include direct-chat-variant($color);
}
} }
.direct-chat-primary { @each $name, $color in $colors {
@include direct-chat-variant(theme-color('primary')); .direct-chat-#{$name} {
} @include direct-chat-variant($color);
}
.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'));
} }

103
build/scss/_dropdown.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Dropdown // Component: Dropdown
* ------------------- //
*/
// General Dropdown Rules // General Dropdown Rules
//.dropdown-item { //.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 header and footer
.dropdown-footer, .dropdown-footer,
.dropdown-header { .dropdown-header {
@ -47,8 +66,8 @@
text-align: center; text-align: center;
} }
/* Add fade animation to dropdown menus by appending // Add fade animation to dropdown menus by appending
the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/ // the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
.open:not(.dropup) > .animated-dropdown-menu { .open:not(.dropup) > .animated-dropdown-menu {
@include animation(flipInX .7s both); @include animation(flipInX .7s both);
backface-visibility: visible !important; backface-visibility: visible !important;
@ -80,33 +99,7 @@
} }
} }
@-webkit-keyframes flipInX { // Fix dropdown menu in navbars
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 */
.navbar-custom-menu > .navbar-nav { .navbar-custom-menu > .navbar-nav {
> li { > li {
position: relative; position: relative;
@ -134,11 +127,12 @@
} }
} }
/* User Menu */ // User Menu
.navbar-nav > .user-menu { .navbar-nav > .user-menu {
> .nav-link:after { > .nav-link:after {
content:none; content:none;
} }
> .dropdown-menu { > .dropdown-menu {
@include border-top-radius(0); @include border-top-radius(0);
padding: 0; padding: 0;
@ -155,6 +149,7 @@
height: 175px; height: 175px;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
// User image // User image
> img { > img {
z-index: 5; z-index: 5;
@ -164,11 +159,13 @@
border-color: transparent; border-color: transparent;
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
} }
> p { > p {
z-index: 5; z-index: 5;
font-size: 17px; font-size: 17px;
//text-shadow: 2px 2px 3px #333333; //text-shadow: 2px 2px 3px #333333;
margin-top: 10px; margin-top: 10px;
> small { > small {
display: block; display: block;
font-size: 12px; font-size: 12px;
@ -178,46 +175,50 @@
// Menu Body // Menu Body
> .user-body { > .user-body {
padding: 15px;
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #dddddd;
@include clearfix; @include clearfix;
border-bottom: 1px solid $gray-700;
border-top: 1px solid $gray-300;
padding: 15px;
a { a {
color: #444 !important;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
background: #fff !important; background: $white !important;
color: #444 !important; color: $gray-700 !important;
} }
} }
} }
// Menu Footer // Menu Footer
> .user-footer { > .user-footer {
background-color: #f9f9f9;
padding: 10px;
@include clearfix; @include clearfix;
background-color: $gray-100;
padding: 10px;
.btn-default { .btn-default {
color: #666666; color: $gray-600;
&:hover { &:hover {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
background-color: #f9f9f9; background-color: $gray-100;
} }
} }
} }
} }
} }
.user-image { .user-image {
float: left;
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 10px;
margin-top: -2px;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
float: none; float: none;
line-height: 10px;
margin-right: 0; margin-right: 0;
margin-top: -8px; margin-top: -8px;
line-height: 10px;
} }
border-radius: 50%;
float: left;
height: 25px;
margin-right: 10px;
margin-top: -2px;
width: 25px;
} }
} }

7
build/scss/_elevation.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Elevation // Component: Elevation
* -------------------- //
*/
.elevation-0 { .elevation-0 {
box-shadow: none !important; box-shadow: none !important;

110
build/scss/_forms.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Forms // Component: Forms
* ---------------- //
*/
.form-group { .form-group {
&.has-icon { &.has-icon {
@ -28,7 +27,8 @@
// Button groups // Button groups
.btn-group-vertical { .btn-group-vertical {
.btn { .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); @include border-radius(0);
} }
} }
@ -257,113 +257,21 @@ textarea.form-control {
// custom switch color variations // custom switch color variations
.custom-switch { .custom-switch {
@each $name, $color in $theme-colors { @each $name, $color in $theme-colors {
&.custom-switch-off-#{$name} { @include custom-switch-variant($name, $color);
& .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%);
}
}
} }
@each $name, $color in $colors { @each $name, $color in $colors {
&.custom-switch-off-#{$name} { @include custom-switch-variant($name, $color);
& .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 color variations // custom range color variations
.custom-range { .custom-range {
@each $name, $color in $theme-colors { @each $name, $color in $theme-colors {
&.custom-range-#{$name} { @include custom-range-variant($name, $color);
&: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;
}
}
} }
@each $name, $color in $colors { @each $name, $color in $colors {
&.custom-range-#{$name} { @include custom-range-variant($name, $color);
&: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;
}
}
} }
} }

13
build/scss/_info-box.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Info Box // Component: Info Box
* ------------------- //
*/
.info-box { .info-box {
@extend .d-flex; @extend .d-flex;
@ -14,7 +13,7 @@
padding: .5rem; padding: .5rem;
.progress { .progress {
background-color: rgba($black, 0.125); background-color: rgba($black, .125);
height: 2px; height: 2px;
margin: 5px 0; margin: 5px 0;
@ -105,7 +104,7 @@
.col-lg-2 &, .col-lg-2 &,
.col-md-2 & { .col-md-2 & {
.progress-description { .progress-description {
@include font-size(0.75rem); @include font-size(.75rem);
display: block; display: block;
} }
} }
@ -114,7 +113,7 @@
.col-lg-3 &, .col-lg-3 &,
.col-md-3 & { .col-md-3 & {
.progress-description { .progress-description {
@include font-size(0.75rem); @include font-size(.75rem);
display: block; display: block;
} }
} }

29
build/scss/_labels.scss
View File

@ -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;
}

15
build/scss/_layout.scss
View File

@ -1,7 +1,6 @@
/* //
* Core: Layout // Core: Layout
* ------------ //
*/
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
@ -21,7 +20,7 @@ body,
} }
.layout-boxed & { .layout-boxed & {
@include box-shadow(0 0 10px rgba($black, .3)); @include box-shadow(0 0 10 rgba($black, .3));
&, &,
&::before { &::before {
@ -101,7 +100,7 @@ body,
.sidebar, .sidebar,
.content-wrapper { .content-wrapper {
margin-top: 0px; margin-top: 0;
} }
.main-header { .main-header {
@ -181,7 +180,7 @@ body,
.sidebar, .sidebar,
.content-wrapper { .content-wrapper {
margin-top: 0px; margin-top: 0;
} }
.main-header { .main-header {
@ -208,7 +207,7 @@ body,
} }
.content-wrapper { .content-wrapper {
margin-bottom: 0px; margin-bottom: 0;
} }
} }

36
build/scss/_main-header.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Main Header // Component: Main Header
* ---------------------- //
*/
.main-header { .main-header {
border-bottom: $main-header-bottom-border; border-bottom: $main-header-bottom-border;
@ -79,19 +78,6 @@
color: $main-header-dark-placeholder-color; 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 { &:focus {
&, &,
& + .input-group-append .btn-navbar { & + .input-group-append .btn-navbar {
@ -111,24 +97,14 @@
} }
.form-control-navbar { .form-control-navbar {
&:ms-placeholder,
&:moz-placeholder,
&::moz-placeholder,
&::placeholder, &::placeholder,
+ .input-group-append > .btn-navbar { + .input-group-append > .btn-navbar {
color: $main-header-light-placeholder-color; 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 { &:focus {
&, &,
& + .input-group-append .btn-navbar { & + .input-group-append .btn-navbar {

11
build/scss/_main-sidebar.scss
View File

@ -1,7 +1,6 @@
/** //
* Component: Main Sidebar // Component: Main Sidebar
* ----------------------- //
*/
.main-sidebar { .main-sidebar {
height: 100vh; height: 100vh;
@ -62,7 +61,7 @@
// All levels // All levels
.nav-item { .nav-item {
> .nav-link { > .nav-link {
margin-bottom: 0.2rem; margin-bottom: .2rem;
.right { .right {
@include transition(transform $transition-fn $transition-speed); @include transition(transform $transition-fn $transition-speed);
@ -143,7 +142,7 @@
padding: $nav-link-padding-y; padding: $nav-link-padding-y;
&:not(:first-of-type) { &:not(:first-of-type) {
padding: 1.7rem 1rem .5rem 1rem; padding: 1.7rem 1rem .5rem;
} }
} }

23
build/scss/_miscellaneous.scss
View File

@ -1,7 +1,6 @@
/* //
* Misc: Miscellaneous // Misc: Miscellaneous
* ------------------- //
*/
.border-transparent { .border-transparent {
border-color: transparent !important; border-color: transparent !important;
@ -27,10 +26,8 @@
> .description-text { > .description-text {
text-transform: uppercase; text-transform: uppercase;
} }
}
// Description Block Extension // Description Block Extension
.description-block {
.description-icon { .description-icon {
font-size: 16px; font-size: 16px;
} }
@ -57,7 +54,7 @@
.list-seperator { .list-seperator {
background: $card-border-color; background: $card-border-color;
height: 1px; height: 1px;
margin: 15px 0 9px 0; margin: 15px 0 9px;
} }
.list-link { .list-link {
@ -237,7 +234,7 @@
} }
.attachment-text { .attachment-text {
color: #555; color: $gray-700;
} }
} }
@ -295,16 +292,16 @@
position: absolute; position: absolute;
right: -2px; right: -2px;
top: -2px; top: -2px;
z-index: 10;
width: $ribbon-wrapper-size; width: $ribbon-wrapper-size;
z-index: 10;
&.ribbon-lg { &.ribbon-lg {
height: $ribbon-lg-wrapper-size; height: $ribbon-lg-wrapper-size;
width: $ribbon-lg-wrapper-size; width: $ribbon-lg-wrapper-size;
.ribbon { .ribbon {
top: $ribbon-lg-top;
right: $ribbon-lg-right; right: $ribbon-lg-right;
top: $ribbon-lg-top;
width: $ribbon-lg-width; width: $ribbon-lg-width;
} }
} }
@ -314,8 +311,8 @@
width: $ribbon-xl-wrapper-size; width: $ribbon-xl-wrapper-size;
.ribbon { .ribbon {
top: $ribbon-xl-top;
right: $ribbon-xl-right; right: $ribbon-xl-right;
top: $ribbon-xl-top;
width: $ribbon-xl-width; width: $ribbon-xl-width;
} }
} }
@ -340,7 +337,7 @@
border-right: $ribbon-border-size solid transparent; border-right: $ribbon-border-size solid transparent;
border-top: $ribbon-border-size solid #9e9e9e; border-top: $ribbon-border-size solid #9e9e9e;
bottom: -$ribbon-border-size; bottom: -$ribbon-border-size;
content: ""; content: '';
position: absolute; position: absolute;
} }

252
build/scss/_mixins.scss
View File

@ -1,7 +1,6 @@
/* //
* General: Mixins // General: Mixins
* --------------- //
*/
// Cards Variant // 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)) { @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; background-color: $color;
@ -94,6 +229,7 @@
// Add color to the sidebar toggle button // Add color to the sidebar toggle button
.sidebar-toggle { .sidebar-toggle {
color: $font-color; color: $font-color;
&:hover, &:hover,
&:focus { &:focus {
background: $hover-bg; 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) { @mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
background-color: $bg-color; background-color: $bg-color;
border-bottom: $border-bottom-width solid $border-bottom-color; border-bottom: $border-bottom-width solid $border-bottom-color;
@ -121,13 +257,115 @@
border-color: $bg-color; border-color: $bg-color;
color: color-yiq($bg-color); color: color-yiq($bg-color);
&:after, &::after,
&::before { &::before {
border-left-color: $bg-color; 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) { @mixin translate($x, $y) {
transform: translate($x, $y); transform: translate($x, $y);
} }
@ -138,12 +376,10 @@
} }
@mixin calc($property, $expression) { @mixin calc($property, $expression) {
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression}); #{$property}: calc(#{$expression});
} }
@mixin rotate($value) { @mixin rotate($value) {
-ms-transform: rotate($value);
transform: rotate($value); transform: rotate($value);
} }

8
build/scss/_modals.scss
View File

@ -1,8 +1,6 @@
/* //
* Component: Modals // Component: Modals
* --------- //
------
*/
// Overlay // Overlay
.modal-dialog { .modal-dialog {

14
build/scss/_navs.scss
View File

@ -1,16 +1,16 @@
/* //
* Component: Nav // Component: Nav
* -------------- //
*/
.nav-pills { .nav-pills {
.nav-link { .nav-link {
color: $gray-600; color: $gray-600;
&:not(.active):hover { &:not(.active):hover {
color: theme-color('primary') color: theme-color('primary');
} }
} }
.nav-item { .nav-item {
&.dropdown.show { &.dropdown.show {
.nav-link:hover { .nav-link:hover {
@ -60,7 +60,7 @@
// Color variants // Color variants
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@if $color==dark or $color==light { @if $color == dark or $color == light {
.navbar-#{$color} { .navbar-#{$color} {
background-color: $value; background-color: $value;
} }
@ -68,7 +68,7 @@
} }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@if $color!=dark and $color!=light { @if $color != dark and $color != light {
.navbar-#{$color} { .navbar-#{$color} {
background-color: $value; background-color: $value;
} }

7
build/scss/_print.scss
View File

@ -1,7 +1,6 @@
/* //
* Misc: Print // Misc: Print
* ----------- //
*/
@media print { @media print {
//Add to elements that you do not want to show when printing //Add to elements that you do not want to show when printing

10
build/scss/_products.scss
View File

@ -1,11 +1,12 @@
/* //
* Component: Products // Component: Products
* ------------------- //
*/
.products-list { .products-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
> .item { > .item {
@include clearfix; @include clearfix;
@ -19,6 +20,7 @@
.product-img { .product-img {
float: left; float: left;
img { img {
height: 50px; height: 50px;
width: 50px; width: 50px;

13
build/scss/_progress-bars.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Progress Bar // Component: Progress Bar
* ----------------------- //
*/
//General CSS //General CSS
.progress { .progress {
@ -59,7 +58,9 @@
// Remove margins from progress bars when put in a table // Remove margins from progress bars when put in a table
.table { .table {
tr > td .progress { tr > td {
margin: 0; .progress {
margin: 0;
}
} }
} }

145
build/scss/_sidebar-mini.scss
View File

@ -1,145 +1,6 @@
/* //
* Component: Sidebar Mini // 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;
}
}
}
}
// Logo style // Logo style
.logo-xs, .logo-xs,

13
build/scss/_small-box.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Small Box // Component: Small Box
* -------------------- //
*/
.small-box { .small-box {
@include border-radius($border-radius); @include border-radius($border-radius);
@ -19,7 +18,6 @@
> .small-box-footer { > .small-box-footer {
background: rgba($black, 0.1); background: rgba($black, 0.1);
color: $white;
color: rgba($white, 0.8); color: rgba($white, 0.8);
display: block; display: block;
padding: 3px 0; padding: 3px 0;
@ -82,14 +80,15 @@
font-size: 1rem; font-size: 1rem;
> small { > small {
color: #f9f9f9; color: $gray-100;
display: block; display: block;
font-size: 0.9rem; font-size: 0.9rem;
margin-top: 5px; margin-top: 5px;
} }
} }
h3, p { h3,
p {
z-index: 5; z-index: 5;
} }

10
build/scss/_social-widgets.scss
View File

@ -1,10 +1,10 @@
/* //
* Component: Social Widgets // Component: Social Widgets
* ------------------------- //
*/
//General widget style //General widget style
.card-widget { .card-widget {
border: none; border: 0;
position: relative; position: relative;
} }

7
build/scss/_table.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Table // Component: Table
* ---------------- //
*/
.table { .table {
&:not(.table-dark) { &:not(.table-dark) {

8
build/scss/_text.scss
View File

@ -1,7 +1,6 @@
/* //
* Component: Text // Component: Text
* ------------- //
*/
// text modification // text modification
.text-bold { .text-bold {
@ -26,7 +25,6 @@
font-size: $font-size-xl !important; font-size: $font-size-xl !important;
} }
// text color variations // text color variations
@each $name, $color in $colors { @each $name, $color in $colors {
.text-#{$name} { .text-#{$name} {

16
build/scss/_timeline.scss
View File

@ -1,11 +1,10 @@
/* //
* Component: Timeline // Component: Timeline
* ------------------- //
*/
.timeline { .timeline {
list-style: none; list-style: none;
margin: 0 0 30px 0; margin: 0 0 30px;
padding: 0; padding: 0;
position: relative; position: relative;
@ -33,7 +32,7 @@
@include box-shadow($card-shadow); @include box-shadow($card-shadow);
@include border-radius($border-radius); @include border-radius($border-radius);
background: $white; background: $white;
color: #444; color: $gray-700;
margin-left: 60px; margin-left: 60px;
margin-right: 15px; margin-right: 15px;
margin-top: 0; margin-top: 0;
@ -50,7 +49,7 @@
> .timeline-header { > .timeline-header {
border-bottom: 1px solid $card-border-color; border-bottom: 1px solid $card-border-color;
color: #555; color: $gray-700;
font-size: 16px; font-size: 16px;
line-height: 1.1; line-height: 1.1;
margin: 0; margin: 0;
@ -62,7 +61,8 @@
} }
// Item body and footer // Item body and footer
> .timeline-body, > .timeline-footer { > .timeline-body,
> .timeline-footer {
padding: 10px; padding: 10px;
} }

8
build/scss/_users-list.scss
View File

@ -1,10 +1,10 @@
/* //
* Component: Users List // Component: Users List
* --------------------- //
*/
.users-list { .users-list {
@extend .list-unstyled; @extend .list-unstyled;
> li { > li {
float: left; float: left;
padding: 10px; padding: 10px;

25
build/scss/_variables.scss
View File

@ -1,19 +1,18 @@
/* //
* Core: Variables // Core: Variables
* --------------- //
*/
// COLORS // COLORS
// -------------------------------------------------------- // --------------------------------------------------------
$blue: #0073b7 !default; $blue: #0073b7 !default;
$navy: #001F3F !default; $navy: #001f3f !default;
$teal: #39CCCC !default; $teal: #39cccc !default;
$olive: #3D9970 !default; $olive: #3d9970 !default;
$lime: #01FF70 !default; $lime: #01ff70 !default;
$orange: #FF851B !default; $orange: #ff851b !default;
$fuchsia: #F012BE !default; $fuchsia: #f012be !default;
$purple: #605ca8 !default; $purple: #605ca8 !default;
$maroon: #D81B60 !default; $maroon: #d81b60 !default;
$black: #111 !default; $black: #111 !default;
$gray-x-light: #d2d6de !default; $gray-x-light: #d2d6de !default;
@ -128,7 +127,7 @@ $control-sidebar-width: $sidebar-width !default;
// Cards // 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-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-size: $font-size-lg;
$card-title-font-weight: $font-weight-normal; $card-title-font-weight: $font-weight-normal;
@ -170,7 +169,7 @@ $font-size-xl: ($font-size-base * 2);
// BUTTON // BUTTON
// -------------------------------------------------------- // --------------------------------------------------------
$button-default-background-color: #f4f4f4 !default; $button-default-background-color: $gray-100 !default;
$button-default-color: #444 !default; $button-default-color: #444 !default;
$button-default-border-color: #ddd !default; $button-default-border-color: #ddd !default;

20
build/scss/pages/_404_500_errors.scss
View File

@ -1,37 +1,43 @@
/* //
* Pages: 400 and 500 error pages // Pages: 400 and 500 error pages
* ------------------------------ //
*/
.error-page { .error-page {
margin: 20px auto 0;
width: 600px; width: 600px;
margin: 20px auto 0 auto;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
width: 100%; width: 100%;
} }
//For the error number e.g: 404 //For the error number e.g: 404
> .headline { > .headline {
float: left; float: left;
font-size: 100px; font-size: 100px;
font-weight: 300; font-weight: 300;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
float: none; float: none;
text-align: center; text-align: center;
} }
} }
//For the message //For the message
> .error-content { > .error-content {
display: block;
margin-left: 190px; margin-left: 190px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-left: 0; margin-left: 0;
} }
> h3 { > h3 {
font-weight: 300;
font-size: 25px; font-size: 25px;
font-weight: 300;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
text-align: center; text-align: center;
} }
} }
display: block;
} }
} }

20
build/scss/pages/_e_commerce.scss
View File

@ -1,7 +1,6 @@
/* //
* Pages: E-commerce // Pages: E-commerce
* ----------------- //
*/
// product image // product image
.product-image { .product-image {
@ -10,15 +9,14 @@
} }
// product image thumbnails list // product image thumbnails list
.product-image-thumbs { .product-image-thumbs {
display: flex;
align-items: stretch; align-items: stretch;
display: flex;
margin-top: 2rem; margin-top: 2rem;
} }
// product image thumbnail // product image thumbnail
.product-image-thumb { .product-image-thumb {
@include box-shadow($thumbnail-box-shadow); @include box-shadow($thumbnail-box-shadow);
@include border-radius($thumbnail-border-radius); @include border-radius($thumbnail-border-radius);
@ -40,6 +38,8 @@
} }
// product share // product share
.product-share a { .product-share {
margin-right: 0.5rem; a {
margin-right: .5rem;
}
} }

9
build/scss/pages/_invoice.scss
View File

@ -1,12 +1,11 @@
/* //
* Pages: Invoice // Pages: Invoice
* -------------- //
*/
.invoice { .invoice {
position: relative;
background: $white; background: $white;
border: 1px solid $card-border-color; border: 1px solid $card-border-color;
position: relative;
} }
.invoice-title { .invoice-title {

51
build/scss/pages/_lockscreen.scss
View File

@ -1,66 +1,71 @@
/* //
* Pages: Lock Screen // Pages: Lock Screen
* ------------------ //
*/
/* ADD THIS CLASS TO THE <BODY> TAG */ // ADD THIS CLASS TO THE <BODY> TAG
.lockscreen { .lockscreen {
background: $gray-200; background: $gray-200;
// User name [optional]
.lockscreen-name {
font-weight: 600;
text-align: center;
}
} }
.lockscreen-logo { .lockscreen-logo {
font-size: 35px; font-size: 35px;
text-align: center;
margin-bottom: 25px;
font-weight: 300; font-weight: 300;
margin-bottom: 25px;
text-align: center;
a { a {
color: #444; color: $gray-700;
} }
} }
.lockscreen-wrapper { .lockscreen-wrapper {
max-width: 400px;
margin: 0 auto; margin: 0 auto;
margin-top: 10%; 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 { .lockscreen-item {
@include border-radius(4px); @include border-radius(4px);
padding: 0;
background: $white; background: $white;
margin: 10px auto 30px;
padding: 0;
position: relative; position: relative;
margin: 10px auto 30px auto;
width: 290px; width: 290px;
} }
/* User image */ // User image
.lockscreen-image { .lockscreen-image {
@include border-radius(50%); @include border-radius(50%);
position: absolute;
left: -10px;
top: -25px;
background: $white; background: $white;
left: -10px;
padding: 5px; padding: 5px;
position: absolute;
top: -25px;
z-index: 10; z-index: 10;
> img { > img {
@include border-radius(50%); @include border-radius(50%);
width: 70px;
height: 70px; height: 70px;
width: 70px;
} }
} }
/* Contains the password input and the login button */ // Contains the password input and the login button
.lockscreen-credentials { .lockscreen-credentials {
margin-left: 70px; margin-left: 70px;
.form-control { .form-control {
border: 0; border: 0;
} }
.btn { .btn {
background-color: $white; background-color: $white;
border: 0; border: 0;

37
build/scss/pages/_login_and_register.scss
View File

@ -1,16 +1,16 @@
/* //
* Pages: Login & Register // Pages: Login & Register
* ----------------------- //
*/
.login-logo, .login-logo,
.register-logo { .register-logo {
font-size: 35px; font-size: 35px;
text-align: center;
margin-bottom: 25px;
font-weight: 300; font-weight: 300;
margin-bottom: 25px;
text-align: center;
a { a {
color: #444; color: $gray-700;
} }
} }
@ -21,26 +21,29 @@
.login-box, .login-box,
.register-box { .register-box {
width: 360px;
margin: 7% auto; margin: 7% auto;
width: 360px;
@media (max-width: map-get($grid-breakpoints, sm)) { @media (max-width: map-get($grid-breakpoints, sm)) {
width: 90%;
margin-top: 20px; margin-top: 20px;
width: 90%;
} }
} }
.login-card-body, .login-card-body,
.register-card-body { .register-card-body {
background: $white; background: $white;
padding: 20px;
border-top: 0; border-top: 0;
color: #666; color: #666;
padding: 20px;
.input-group { .input-group {
.form-control { .form-control {
border-right: none; border-right: 0;
&:focus { &:focus {
box-shadow: none; box-shadow: none;
& ~ .input-group-append .input-group-text { & ~ .input-group-append .input-group-text {
border-color: $input-focus-border-color; border-color: $input-focus-border-color;
} }
@ -50,6 +53,7 @@
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
& ~ .input-group-append .input-group-text { & ~ .input-group-append .input-group-text {
border-color: $success; border-color: $success;
} }
@ -59,19 +63,20 @@
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
& ~ .input-group-append .input-group-text { & ~ .input-group-append .input-group-text {
border-color: $danger; border-color: $danger;
} }
} }
} }
.input-group-text { .input-group-text {
color: #777;
background-color: transparent; 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-bottom-right-radius: $border-radius !important;
border-left: 0;
border-top-right-radius: $border-radius !important; border-top-right-radius: $border-radius !important;
color: #777;
transition: $input-transition;
} }
} }
} }
@ -79,8 +84,8 @@
.login-box-msg, .login-box-msg,
.register-box-msg { .register-box-msg {
margin: 0; margin: 0;
padding: 0 20px 20px;
text-align: center; text-align: center;
padding: 0 20px 20px 20px;
} }
.social-auth-links { .social-auth-links {

32
build/scss/pages/_mailbox.scss
View File

@ -1,7 +1,7 @@
/* //
* Pages: Mailbox // Pages: Mailbox
* -------------- //
*/
.mailbox-messages { .mailbox-messages {
> .table { > .table {
margin: 0; margin: 0;
@ -10,6 +10,7 @@
.mailbox-controls { .mailbox-controls {
padding: 5px; padding: 5px;
&.with-border { &.with-border {
border-bottom: 1px solid $card-border-color; border-bottom: 1px solid $card-border-color;
} }
@ -18,13 +19,15 @@
.mailbox-read-info { .mailbox-read-info {
border-bottom: 1px solid $card-border-color; border-bottom: 1px solid $card-border-color;
padding: 10px; padding: 10px;
h3 { h3 {
font-size: 20px; font-size: 20px;
margin: 0; margin: 0;
} }
h5 { h5 {
margin: 0; margin: 0;
padding: 5px 0 0 0; padding: 5px 0 0;
} }
} }
@ -40,17 +43,17 @@
.mailbox-attachments { .mailbox-attachments {
@extend .list-unstyled; @extend .list-unstyled;
li { li {
float: left;
width: 200px;
border: 1px solid #eee; border: 1px solid #eee;
float: left;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; margin-right: 10px;
width: 200px;
} }
} }
.mailbox-attachment-name { .mailbox-attachment-name {
font-weight: bold;
color: #666; color: #666;
font-weight: bold;
} }
.mailbox-attachment-icon, .mailbox-attachment-icon,
@ -60,13 +63,14 @@
} }
.mailbox-attachment-info { .mailbox-attachment-info {
background: $gray-100;
padding: 10px; padding: 10px;
background: #f4f4f4;
} }
.mailbox-attachment-size { .mailbox-attachment-size {
color: #999; color: #999;
font-size: 12px; font-size: 12px;
> span { > span {
display: inline-block; display: inline-block;
padding-top: 0.75rem; padding-top: 0.75rem;
@ -74,16 +78,18 @@
} }
.mailbox-attachment-icon { .mailbox-attachment-icon {
text-align: center;
font-size: 65px;
color: #666; color: #666;
padding: 20px 10px; font-size: 65px;
max-height: 132.5px; max-height: 132.5px;
padding: 20px 10px;
text-align: center;
&.has-img { &.has-img {
padding: 0; padding: 0;
> img { > img {
max-width: 100%;
height: auto; height: auto;
max-width: 100%;
} }
} }
} }

17
build/scss/pages/_profile.scss
View File

@ -1,13 +1,12 @@
/* //
* Pages: Profile // Pages: Profile
* -------------- //
*/
.profile-user-img { .profile-user-img {
margin: 0 auto;
width: 100px;
padding: 3px;
border: 3px solid $gray-500; border: 3px solid $gray-500;
margin: 0 auto;
padding: 3px;
width: 100px;
} }
.profile-username { .profile-username {
@ -17,14 +16,16 @@
.post { .post {
border-bottom: 1px solid $gray-500; border-bottom: 1px solid $gray-500;
color: #666;
margin-bottom: 15px; margin-bottom: 15px;
padding-bottom: 15px; padding-bottom: 15px;
color: #666;
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.user-block { .user-block {
margin-bottom: 15px; margin-bottom: 15px;
} }

9
build/scss/pages/_projects.scss
View File

@ -1,7 +1,6 @@
/* //
* Pages: Projects // Pages: Projects
* --------------- //
*/
.projects { .projects {
td { td {
@ -14,7 +13,7 @@
// table avatar // table avatar
img.table-avatar, img.table-avatar,
.table-avatar img{ .table-avatar img {
border-radius: 50%; border-radius: 50%;
display: inline; display: inline;
width: 2.5rem; width: 2.5rem;

17
build/scss/plugins/_bootstrap-slider.scss
View File

@ -1,7 +1,6 @@
/* //
* Plugin: Bootstrap Slider // Plugin: Bootstrap Slider
* ------------------------ //
*/
// Style override // Style override
.slider { .slider {
@ -14,7 +13,7 @@
} }
// Colors // Colors
@each $name, $color in $colors { @each $name, $color in $theme-colors {
.slider-#{$name} .slider { .slider-#{$name} .slider {
.slider-selection { .slider-selection {
background: $color; background: $color;
@ -22,4 +21,10 @@
} }
} }
@each $name, $color in $colors {
.slider-#{$name} .slider {
.slider-selection {
background: $color;
}
}
}

38
build/scss/plugins/_fullcalendar.scss
View File

@ -1,15 +1,15 @@
/* //
* Plugin: Full Calendar // Plugin: Full Calendar
* --------------------- //
*/
// Buttons // Buttons
.fc-button { .fc-button {
background: #f4f4f4; background: $gray-100;
background-image: none; background-image: none;
color: #444;
border-color: #ddd;
border-bottom-color: #ddd; border-bottom-color: #ddd;
border-color: #ddd;
color: $gray-700;
&:hover, &:hover,
&:active, &:active,
&.hover { &.hover {
@ -19,9 +19,9 @@
// Calendar title // Calendar title
.fc-header-title h2 { .fc-header-title h2 {
color: #666;
font-size: 15px; font-size: 15px;
line-height: 1.6em; line-height: 1.6em;
color: #666;
margin-left: 10px; margin-left: 10px;
} }
@ -39,8 +39,8 @@
} }
.fc-grid { .fc-grid {
width: 100%;
border: 0; border: 0;
width: 100%;
} }
.fc-widget-header:first-of-type, .fc-widget-header:first-of-type,
@ -55,8 +55,8 @@
} }
.fc-toolbar { .fc-toolbar {
padding: 1rem;
margin: 0; margin: 0;
padding: 1rem;
} }
.fc-day-number { .fc-day-number {
@ -69,13 +69,21 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
> li { > li {
float: left; float: left;
font-size: 30px; font-size: 30px;
margin-right: 5px;
line-height: 30px; line-height: 30px;
.fa { margin-right: 5px;
.fa,
.fas,
.far,
.fab,
.glyphicon,
.ion {
transition: transform linear .3s; transition: transform linear .3s;
&:hover { &:hover {
@include rotate(30deg); @include rotate(30deg);
} }
@ -90,11 +98,11 @@
.external-event { .external-event {
@include box-shadow($card-shadow); @include box-shadow($card-shadow);
padding: 5px 10px;
font-weight: bold;
margin-bottom: 4px;
border-radius: $border-radius; border-radius: $border-radius;
cursor: move; cursor: move;
font-weight: bold;
margin-bottom: 4px;
padding: 5px 10px;
&:hover { &:hover {
@include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2)); @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));

19
build/scss/plugins/_icheck-bootstrap.scss
View File

@ -1,19 +1,18 @@
/* //
* Plugin: iCheck Bootstrap // Plugin: iCheck Bootstrap
* ------------------------ //
*/
// iCheck colors (theme colors) // iCheck colors (theme colors)
@each $name, $color in $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 + label::before,
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + 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 + label::before,
.icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before { .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #{$color}; background-color: #{$color};
border-color: #{$color}; border-color: #{$color};
} }
} }
@ -21,12 +20,12 @@
@each $name, $color in $colors { @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 + label::before,
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + 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 + label::before,
.icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before { .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #{$color}; background-color: #{$color};
border-color: #{$color}; border-color: #{$color};
} }
} }

22
build/scss/plugins/_jqvmap.scss
View File

@ -1,23 +1,21 @@
/* //
* Plugins: JQVMap // Plugins: JQVMap
* --------------- //
*/
// Zoom Button size fixes // Zoom Button size fixes
.jqvmap-zoomin, .jqvmap-zoomin,
.jqvmap-zoomout { .jqvmap-zoomout {
background-color: $button-default-background-color; background-color: $button-default-background-color;
color: $button-default-color; border: 1px solid $button-default-border-color;
border: 1px solid $button-default-border-color; border-radius: $btn-border-radius;
border-radius: $btn-border-radius; color: $button-default-color;
height: 15px;
width: 15px; width: 15px;
height: 15px;
&:hover, &:hover,
&:active, &:active,
&.hover { &.hover {
color: darken($button-default-color, 10%);
background-color: darken($button-default-background-color, 5%); background-color: darken($button-default-background-color, 5%);
color: darken($button-default-color, 10%);
} }
} }

41
build/scss/plugins/_mapael.scss
View File

@ -1,7 +1,6 @@
/* //
* Plugins: jQuery Mapael // Plugins: jQuery Mapael
* ---------------------- //
*/
.mapael { .mapael {
.map { .map {
@ -10,6 +9,8 @@
.mapTooltip { .mapTooltip {
@include reset-text(); @include reset-text();
@include border-radius($tooltip-border-radius);
@include font-size($tooltip-font-size);
background-color: $tooltip-bg; background-color: $tooltip-bg;
color: $tooltip-color; color: $tooltip-color;
display: block; display: block;
@ -19,50 +20,44 @@
text-align: center; text-align: center;
word-wrap: break-word; word-wrap: break-word;
z-index: $zindex-tooltip; z-index: $zindex-tooltip;
@include border-radius($tooltip-border-radius);
@include font-size($tooltip-font-size);
} }
.myLegend { .myLegend {
background-color: #f4f4e8; background-color: $gray-100;
border: 1px solid #bebeb4; border: 1px solid $gray-500;
padding: 10px; padding: 10px;
width: 600px; width: 600px;
} }
.zoomButton { .zoomButton {
border-radius: $btn-border-radius;
background-color: $button-default-background-color; background-color: $button-default-background-color;
color: $button-default-color;
border: 1px solid $button-default-border-color; border: 1px solid $button-default-border-color;
padding-left: 1px; border-radius: $btn-border-radius;
width: 16px; color: $button-default-color;
height: 16px;
line-height: 14px;
text-align: center;
cursor: pointer; cursor: pointer;
position: absolute;
top: 0;
font-weight: bold; font-weight: bold;
height: 16px;
left: 10px; 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; user-select: none;
width: 16px;
&:hover, &:hover,
&:active, &:active,
&.hover { &.hover {
color: darken($button-default-color, 10%);
background-color: darken($button-default-background-color, 5%); background-color: darken($button-default-background-color, 5%);
color: darken($button-default-color, 10%);
} }
} }
.zoomReset { .zoomReset {
top: 10px;
line-height: 12px; line-height: 12px;
top: 10px;
} }
.zoomIn { .zoomIn {

9
build/scss/plugins/_miscellaneous.scss
View File

@ -1,8 +1,7 @@
/* //
* Plugins: Miscellaneous // Plugins: Miscellaneous
* ---------------------- // Old plugin codes
* Old plugin codes //
*/
// _fix for sparkline tooltip // _fix for sparkline tooltip
.jqstooltip { .jqstooltip {

45
build/scss/plugins/_select2.scss
View File

@ -1,7 +1,6 @@
/* //
* Plugin: Select2 // Plugin: Select2
* --------------- //
*/
//Signle select //Signle select
.select2-container--default, .select2-container--default,
@ -11,16 +10,17 @@
&:active { &:active {
outline: none; outline: none;
} }
.select2-selection--single { .select2-selection--single {
border: 1px solid $gray-x-light; border: 1px solid $gray-x-light;
//border-radius: $input-radius; //border-radius: $input-radius;
padding: 6px 12px;
height: 34px; height: 34px;
padding: 6px 12px;
} }
} }
.select2-container--default.select2-container--open { .select2-container--default.select2-container--open {
border-color: theme-color("primary"); border-color: theme-color('primary');
} }
.select2-dropdown { .select2-dropdown {
@ -29,26 +29,25 @@
} }
.select2-container--default .select2-results__option--highlighted[aria-selected] { .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: theme-color("primary"); background-color: theme-color('primary');
color: white; color: $white;
} }
.select2-results__option { .select2-results__option {
padding: 6px 12px; padding: 6px 12px;
user-select: none; user-select: none;
-webkit-user-select: none;
} }
.select2-container .select2-selection--single .select2-selection__rendered { .select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 0;
padding-right: 0;
height: auto; height: auto;
margin-top: -4px; margin-top: -4px;
padding-left: 0;
padding-right: 0;
} }
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { .select2-container[dir='rtl'] .select2-selection--single .select2-selection__rendered {
padding-right: 6px;
padding-left: 20px; padding-left: 20px;
padding-right: 6px;
} }
.select2-container--default .select2-selection--single .select2-selection__arrow { .select2-container--default .select2-selection--single .select2-selection__arrow {
@ -64,9 +63,10 @@
.select2-search--inline { .select2-search--inline {
.select2-search__field { .select2-search__field {
border: 1px solid $gray-x-light; border: 1px solid $gray-x-light;
&:focus { &:focus {
border: 1px solid theme-color('primary');
outline: none; outline: none;
border: 1px solid theme-color("primary");
} }
} }
} }
@ -77,9 +77,10 @@
.select2-container--default .select2-results__option[aria-selected=true] { .select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd; background-color: #ddd;
&, &,
&:hover { &:hover {
color: #444; color: $gray-700;
} }
} }
@ -87,9 +88,9 @@
.select2-container--default { .select2-container--default {
.select2-selection--multiple { .select2-selection--multiple {
border: 1px solid $gray-x-light; border: 1px solid $gray-x-light;
//border-radius: $input-radius;
&:focus { &:focus {
border-color: theme-color("primary"); border-color: theme-color('primary');
} }
.select2-selection__rendered li:first-child.select2-search.select2-search--inline { .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
@ -100,21 +101,23 @@
} }
} }
} }
&.select2-container--focus .select2-selection--multiple { &.select2-container--focus .select2-selection--multiple {
border-color: $gray-x-light; border-color: $gray-x-light;
} }
} }
.select2-container--default .select2-selection--multiple .select2-selection__choice { .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: theme-color("primary"); background-color: theme-color('primary');
border-color: darken(theme-color("primary"), 5%); border-color: darken(theme-color('primary'), 5%);
padding: 1px 10px;
color: $white; color: $white;
padding: 1px 10px;
} }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
margin-right: 5px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
margin-right: 5px;
&:hover { &:hover {
color: $white; color: $white;
} }

24
build/scss/plugins/_sweetalert2.scss
View File

@ -1,34 +1,38 @@
/* //
* Plugin: SweetAlert2 // Plugin: SweetAlert2
* ------------------- //
*/
// Icon Colors // Icon Colors
.swal2-icon { .swal2-icon {
&.swal2-info { &.swal2-info {
color: $info;
border-color: ligthen($info, 20%); border-color: ligthen($info, 20%);
color: $info;
} }
&.swal2-warning { &.swal2-warning {
color: $warning;
border-color: ligthen($warning, 20%); border-color: ligthen($warning, 20%);
color: $warning;
} }
&.swal2-error { &.swal2-error {
color: $danger;
border-color: ligthen($danger, 20%); border-color: ligthen($danger, 20%);
color: $danger;
} }
&.swal2-question { &.swal2-question {
color: $secondary;
border-color: ligthen($secondary, 20%); border-color: ligthen($secondary, 20%);
color: $secondary;
} }
&.swal2-success { &.swal2-success {
color: $success;
border-color: ligthen($success, 20%); border-color: ligthen($success, 20%);
color: $success;
.swal2-success-ring { .swal2-success-ring {
border-color: ligthen($success, 20%); border-color: ligthen($success, 20%);
} }
[class^="swal2-success-line"] {
[class^='swal2-success-line'] {
background-color: $success; background-color: $success;
} }
} }

11
build/scss/plugins/_toastr.scss
View File

@ -1,7 +1,6 @@
/* //
* Plugin: Toastr // Plugin: Toastr
* -------------- //
*/
// Background to FontAwesome Icons // Background to FontAwesome Icons
// #toast-container > .toast { // #toast-container > .toast {
@ -35,15 +34,19 @@
.toast { .toast {
background-color: $primary; background-color: $primary;
} }
.toast-success { .toast-success {
background-color: $success; background-color: $success;
} }
.toast-error { .toast-error {
background-color: $danger; background-color: $danger;
} }
.toast-info { .toast-info {
background-color: $info; background-color: $info;
} }
.toast-warning { .toast-warning {
background-color: $warning; background-color: $warning;
} }

2162
dist/css/adminlte.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

42
dist/js/demo.js vendored
View File

@ -73,17 +73,17 @@
var $navbar_border = $('<input />', { var $navbar_border = $('<input />', {
type : 'checkbox', type : 'checkbox',
value : 1, value : 1,
checked: $('.main-header').hasClass('border-bottom'), checked: $('.main-header').hasClass('border-bottom-0'),
'class': 'mr-1' 'class': 'mr-1'
}).on('click', function () { }).on('click', function () {
if ($(this).is(':checked')) { if ($(this).is(':checked')) {
$('.main-header').addClass('border-bottom') $('.main-header').addClass('border-bottom-0')
} else { } else {
$('.main-header').removeClass('border-bottom') $('.main-header').removeClass('border-bottom-0')
} }
}) })
$checkbox_container.append($navbar_border) $checkbox_container.append($navbar_border)
$checkbox_container.append('<span>Navbar border</span>') $checkbox_container.append('<span>No Navbar border</span>')
$container.append($checkbox_container) $container.append($checkbox_container)
@ -92,7 +92,17 @@
'bg-warning', 'bg-warning',
'bg-info', 'bg-info',
'bg-danger', '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 = [ var sidebar_skins = [
@ -101,11 +111,31 @@
'sidebar-dark-info', 'sidebar-dark-info',
'sidebar-dark-danger', 'sidebar-dark-danger',
'sidebar-dark-success', '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-primary',
'sidebar-light-warning', 'sidebar-light-warning',
'sidebar-light-info', 'sidebar-light-info',
'sidebar-light-danger', '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>') $container.append('<h6>Dark Sidebar Variants</h6>')

16
index.html
View File

@ -741,11 +741,11 @@
<div class="direct-chat-messages"> <div class="direct-chat-messages">
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -757,11 +757,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -773,11 +773,11 @@
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -789,11 +789,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">

16
index2.html
View File

@ -881,11 +881,11 @@
<div class="direct-chat-messages"> <div class="direct-chat-messages">
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -897,11 +897,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -913,11 +913,11 @@
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -929,11 +929,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"> <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">

177
pages/UI/general.html
View File

@ -21,7 +21,14 @@
.color-palette { .color-palette {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
text-align: right;
padding-right: .75rem;
}
.color-palette.disabled {
text-align: center; text-align: center;
padding-right: 0;
display: block;
} }
.color-palette-set { .color-palette-set {
@ -37,11 +44,16 @@
display: block; display: block;
} }
.color-palette.disabled span {
display: block;
text-align: left;
padding-left: .75rem;
}
.color-palette-box h4 { .color-palette-box h4 {
position: absolute; position: absolute;
top: 100%; left: 1.25rem;
left: 25px; margin-top: .75rem;
margin-top: -40px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 12px; font-size: 12px;
display: block; display: block;
@ -649,13 +661,26 @@
</h3> </h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="col-12">
<h5>Theme Colors</h5>
</div>
<!-- /.col-12 -->
<div class="row"> <div class="row">
<div class="col-sm-4 col-md-2"> <div class="col-sm-4 col-md-2">
<h4 class="text-center">Primary</h4> <h4 class="text-center">Primary</h4>
<div class="color-palette-set"> <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 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>
</div> </div>
<!-- /.col --> <!-- /.col -->
@ -663,8 +688,8 @@
<h4 class="text-center">Info</h4> <h4 class="text-center">Info</h4>
<div class="color-palette-set"> <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 disabled color-palette"><span>Disabled</span></div>
<div class="bg-info color-palette"><span>#00c0ef</span></div>
</div> </div>
</div> </div>
<!-- /.col --> <!-- /.col -->
@ -672,17 +697,17 @@
<h4 class="text-center">Success</h4> <h4 class="text-center">Success</h4>
<div class="color-palette-set"> <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 disabled color-palette"><span>Disabled</span></div>
<div class="bg-success color-palette"><span>#00a65a</span></div>
</div> </div>
</div> </div>
<!-- /.col --> <!-- /.col -->
<div class="col-sm-4 col-md-2"> <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="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 disabled color-palette"><span>Disabled</span></div>
<div class="bg-warning color-palette"><span>#f39c12</span></div>
</div> </div>
</div> </div>
<!-- /.col --> <!-- /.col -->
@ -690,8 +715,33 @@
<h4 class="text-center">Danger</h4> <h4 class="text-center">Danger</h4>
<div class="color-palette-set"> <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 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>
</div> </div>
<!-- /.col --> <!-- /.col -->
@ -699,21 +749,114 @@
<h4 class="text-center">Gray</h4> <h4 class="text-center">Gray</h4>
<div class="color-palette-set"> <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 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>
</div> </div>
<!-- /.col --> <!-- /.col -->
</div> </div>
<!-- /.row --> <!-- /.row -->
<div class="col-12">
<h5 class="mt-3">Colors</h5>
</div>
<!-- /.col-12 -->
<div class="row"> <div class="row">
<!-- /.col -->
<div class="col-sm-4 col-md-2"> <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="color-palette-set">
<div class="bg-black disabled color-palette"><span>Disabled</span></div> <div class="bg-indigo color-palette"><span>#6610f2</span></div>
<div class="bg-black color-palette"><span>#111111</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>
</div> </div>
<!-- /.col --> <!-- /.col -->
@ -1249,7 +1392,7 @@
<div class="card-header"> <div class="card-header">
<h3 class="card-title"> <h3 class="card-title">
<i class="fas fa-text-width"></i> <i class="fas fa-text-width"></i>
Block Quotes Primary Block Quotes
</h3> </h3>
</div> </div>
<!-- /.card-header --> <!-- /.card-header -->
@ -1269,12 +1412,12 @@
<div class="card-header"> <div class="card-header">
<h3 class="card-title"> <h3 class="card-title">
<i class="fas fa-text-width"></i> <i class="fas fa-text-width"></i>
Block Quotes Pulled Right Secondary Block Quotes
</h3> </h3>
</div> </div>
<!-- /.card-header --> <!-- /.card-header -->
<div class="card-body clearfix"> <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> <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> <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote> </blockquote>

32
pages/widgets.html
View File

@ -1448,11 +1448,11 @@
<div class="direct-chat-messages"> <div class="direct-chat-messages">
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1464,11 +1464,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1543,11 +1543,11 @@
<div class="direct-chat-messages"> <div class="direct-chat-messages">
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1559,11 +1559,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1638,11 +1638,11 @@
<div class="direct-chat-messages"> <div class="direct-chat-messages">
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1654,11 +1654,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1733,11 +1733,11 @@
<div class="direct-chat-messages"> <div class="direct-chat-messages">
<!-- Message. Default to the left --> <!-- Message. Default to the left -->
<div class="direct-chat-msg"> <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-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span> <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">
@ -1749,11 +1749,11 @@
<!-- Message to the right --> <!-- Message to the right -->
<div class="direct-chat-msg 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-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span> <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div> </div>
<!-- /.direct-chat-info --> <!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"> <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
<!-- /.direct-chat-img --> <!-- /.direct-chat-img -->
<div class="direct-chat-text"> <div class="direct-chat-text">