mirror of https://github.com/ColorlibHQ/AdminLTE
enhanced SCSS style & added projects example
- fixed scss code style & headers - moved pages scss to seperate folder - added pages/_projects scss - added pages/examples/projects demopull/2149/head
REJack
parent
33a3044d54
commit
f6dcb64c05
|
|
@ -6,66 +6,72 @@
|
|||
*/
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import "../../node_modules/bootstrap/scss/functions";
|
||||
@import "bootstrap-variables";
|
||||
@import "../../node_modules/bootstrap/scss/bootstrap";
|
||||
// VARIABLES AND MIXINS
|
||||
@import '../../node_modules/bootstrap/scss/functions';
|
||||
@import 'bootstrap-variables';
|
||||
@import '../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
// Core
|
||||
// ---------------------------------------------------
|
||||
@import "layout";
|
||||
// COMPONENTS
|
||||
@import 'layout';
|
||||
|
||||
// Components
|
||||
// ---------------------------------------------------
|
||||
@import "main-header";
|
||||
@import "brand";
|
||||
@import "main-sidebar";
|
||||
@import "sidebar-mini";
|
||||
@import "control-sidebar";
|
||||
@import "dropdown";
|
||||
@import "forms";
|
||||
@import "progress-bars";
|
||||
@import "small-box";
|
||||
@import "cards";
|
||||
@import "info-box";
|
||||
@import "timeline";
|
||||
@import "buttons";
|
||||
@import "callout";
|
||||
@import "alerts";
|
||||
@import "navs";
|
||||
@import "products";
|
||||
@import "table";
|
||||
@import "labels";
|
||||
@import "direct-chat";
|
||||
@import "users-list";
|
||||
@import "carousel";
|
||||
@import "social-widgets";
|
||||
@import "modals";
|
||||
// PAGES
|
||||
// ---------------------------------------------------
|
||||
@import "mailbox";
|
||||
@import "lockscreen";
|
||||
@import "login_and_register";
|
||||
@import "404_500_errors";
|
||||
@import "invoice";
|
||||
@import "profile";
|
||||
@import 'main-header';
|
||||
@import 'brand';
|
||||
@import 'main-sidebar';
|
||||
@import 'sidebar-mini';
|
||||
@import 'control-sidebar';
|
||||
@import 'dropdown';
|
||||
@import 'forms';
|
||||
@import 'progress-bars';
|
||||
@import 'small-box';
|
||||
@import 'cards';
|
||||
@import 'info-box';
|
||||
@import 'timeline';
|
||||
@import 'buttons';
|
||||
@import 'callout';
|
||||
@import 'alerts';
|
||||
@import 'navs';
|
||||
@import 'products';
|
||||
@import 'table';
|
||||
@import 'labels';
|
||||
@import 'direct-chat';
|
||||
@import 'users-list';
|
||||
@import 'carousel';
|
||||
@import 'social-widgets';
|
||||
@import 'modals';
|
||||
|
||||
// Pages
|
||||
// ---------------------------------------------------
|
||||
@import "pages/e_commerce";
|
||||
@import 'pages/mailbox';
|
||||
@import 'pages/lockscreen';
|
||||
@import 'pages/login_and_register';
|
||||
@import 'pages/404_500_errors';
|
||||
@import 'pages/invoice';
|
||||
@import 'pages/profile';
|
||||
@import 'pages/e_commerce';
|
||||
@import 'pages/projects';
|
||||
|
||||
// Plugins
|
||||
// ---------------------------------------------------
|
||||
@import "plugins/fullcalendar";
|
||||
@import "plugins/select2";
|
||||
@import "plugins/bootstrap-slider";
|
||||
@import "plugins/icheck-bootstrap";
|
||||
@import "plugins/mapael";
|
||||
@import "plugins/jqvmap";
|
||||
@import "plugins/sweetalert2";
|
||||
@import "plugins/toastr";
|
||||
@import 'plugins/fullcalendar';
|
||||
@import 'plugins/select2';
|
||||
@import 'plugins/bootstrap-slider';
|
||||
@import 'plugins/icheck-bootstrap';
|
||||
@import 'plugins/mapael';
|
||||
@import 'plugins/jqvmap';
|
||||
@import 'plugins/sweetalert2';
|
||||
@import 'plugins/toastr';
|
||||
|
||||
// Miscellaneous
|
||||
// ---------------------------------------------------
|
||||
@import "miscellaneous";
|
||||
@import "print";
|
||||
@import "text";
|
||||
@import "elevation";
|
||||
@import 'miscellaneous';
|
||||
@import 'print';
|
||||
@import 'text';
|
||||
@import 'elevation';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Component: alert
|
||||
* Component: Alert
|
||||
* ----------------
|
||||
*/
|
||||
|
||||
|
|
@ -9,8 +9,9 @@
|
|||
}
|
||||
|
||||
.close {
|
||||
color: #000;
|
||||
color: $black;
|
||||
opacity: .2;
|
||||
|
||||
&:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
|
@ -25,21 +26,21 @@
|
|||
//Alert Variants
|
||||
.alert-success {
|
||||
@extend .bg-success;
|
||||
border-color: darken(theme-color("success"), 5%);
|
||||
border-color: darken(theme-color('success'), 5%);
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
@extend .bg-danger;
|
||||
border-color: darken(theme-color("danger"), 5%);
|
||||
border-color: darken(theme-color('danger'), 5%);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
@extend .bg-warning;
|
||||
border-color: darken(theme-color("warning"), 5%);
|
||||
border-color: darken(theme-color('warning'), 5%);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
@extend .bg-info;
|
||||
border-color: darken(theme-color("info"), 5%);
|
||||
border-color: darken(theme-color('info'), 5%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
/*
|
||||
* Component: Brand
|
||||
* ----------------
|
||||
*/
|
||||
|
||||
.brand-link {
|
||||
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
|
||||
padding: $brand-link-padding-y $sidebar-padding-x;
|
||||
font-size: $navbar-brand-font-size;
|
||||
display: block;
|
||||
font-size: $navbar-brand-font-size;
|
||||
line-height: $line-height-lg;
|
||||
padding: $brand-link-padding-y $sidebar-padding-x;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -11,23 +16,23 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="sidebar-dark"] & {
|
||||
color: rgba(255,255,255,.8);
|
||||
[class*='sidebar-dark'] & {
|
||||
border-bottom: 1px solid lighten($dark, 10%);
|
||||
color: rgba($white, .8);
|
||||
}
|
||||
|
||||
[class*="sidebar-light"] & {
|
||||
color: rgba(0,0,0,.8);
|
||||
[class*='sidebar-light'] & {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
color: rgba($black, .8);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
float:left;
|
||||
float: left;
|
||||
line-height: .8;
|
||||
max-height: 34px;
|
||||
width: auto;
|
||||
margin-left: .8rem;
|
||||
margin-right: .5rem;
|
||||
margin-top: -3px;
|
||||
max-height: 34px;
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,27 +7,28 @@
|
|||
// Flat buttons
|
||||
&.btn-flat {
|
||||
@include border-radius(0);
|
||||
box-shadow: none;
|
||||
border-width: 1px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// input file btn
|
||||
&.btn-file {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
> input[type='file'] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
font-size: 100px;
|
||||
text-align: right;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
background: white;
|
||||
background: $white;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
font-size: 100px;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,29 +36,31 @@
|
|||
// Button color variations
|
||||
.btn-default {
|
||||
background-color: $button-default-background-color;
|
||||
color: $button-default-color;
|
||||
border-color: $button-default-border-color;
|
||||
color: $button-default-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.hover {
|
||||
color: darken($button-default-color, 10%);
|
||||
background-color: darken($button-default-background-color, 5%);
|
||||
color: darken($button-default-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Application buttons
|
||||
.btn-app {
|
||||
@include border-radius(3px);
|
||||
position: relative;
|
||||
padding: 15px 5px;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
color: $gray-600;
|
||||
font-size: 12px;
|
||||
height: 60px;
|
||||
margin: 0 0 10px 10px;
|
||||
min-width: 80px;
|
||||
height: 60px;
|
||||
padding: 15px 5px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
border: 1px solid $button-default-border-color;
|
||||
background-color: $button-default-background-color;
|
||||
font-size: 12px;
|
||||
|
||||
// Icons within the btn
|
||||
> .fa,
|
||||
> .fas,
|
||||
|
|
@ -65,28 +68,28 @@
|
|||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $button-default-background-color;
|
||||
color: $button-default-color;
|
||||
border-color: darken($button-default-border-color, 20%);
|
||||
color: $button-default-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
|
||||
@include box-shadow(inset 0 3px 5px rgba($black, 0.125));
|
||||
}
|
||||
|
||||
// The badge
|
||||
> .badge {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -10px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,14 +17,15 @@
|
|||
|
||||
@extend .mb-3;
|
||||
background-color: $white;
|
||||
border-left: 5px solid $gray-200;
|
||||
padding: .5rem 1rem .5rem .5rem;
|
||||
border-left: 5px solid #eee;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: #eee;
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,15 +35,18 @@
|
|||
|
||||
// Themes for different contexts
|
||||
&.callout-danger {
|
||||
border-left-color: darken(theme-color("danger"), 10%);
|
||||
border-left-color: darken(theme-color('danger'), 10%);
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
border-left-color: darken(theme-color("warning"), 10%);
|
||||
border-left-color: darken(theme-color('warning'), 10%);
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
border-left-color: darken(theme-color("info"), 10%);
|
||||
border-left-color: darken(theme-color('info'), 10%);
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
border-left-color: darken(theme-color("success"), 10%);
|
||||
border-left-color: darken(theme-color('success'), 10%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Component: Box
|
||||
* --------------
|
||||
* Component: Cards
|
||||
* ----------------
|
||||
*/
|
||||
|
||||
.card {
|
||||
|
|
@ -15,20 +15,20 @@
|
|||
}
|
||||
|
||||
&.maximized-card {
|
||||
z-index: 9999;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
left: 0;
|
||||
max-height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100% !important;
|
||||
z-index: 9999;
|
||||
|
||||
&.was-collapsed .card-body {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
[data-widget="collapse"] {
|
||||
[data-widget='collapse'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
> li {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
margin: 0;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -82,14 +83,14 @@ html.maximized-card {
|
|||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Box header
|
||||
.card-header {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
position: relative;
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-top-radius($border-radius);
|
||||
|
|
@ -104,7 +105,7 @@ html.maximized-card {
|
|||
right: 1rem;
|
||||
top: .5rem;
|
||||
|
||||
[data-toggle="tooltip"] {
|
||||
[data-toggle='tooltip'] {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -118,10 +119,10 @@ html.maximized-card {
|
|||
|
||||
// Box Tools Buttons
|
||||
.btn-tool {
|
||||
padding: .25rem .5rem;
|
||||
font-size: $font-size-sm;
|
||||
background: transparent;
|
||||
color: $gray-500;
|
||||
font-size: $font-size-sm;
|
||||
padding: .25rem .5rem;
|
||||
|
||||
.btn-group.show &,
|
||||
&:hover {
|
||||
|
|
@ -140,9 +141,11 @@ html.maximized-card {
|
|||
.no-header & {
|
||||
// @include border-top-radius($border-radius);
|
||||
}
|
||||
|
||||
// Tables within the box body
|
||||
> .table {
|
||||
margin-bottom: 0;
|
||||
|
||||
> thead > tr > th,
|
||||
> thead > tr > td {
|
||||
border-top-width: 0;
|
||||
|
|
@ -166,6 +169,7 @@ html.maximized-card {
|
|||
.chart-legend {
|
||||
@extend .list-unstyled;
|
||||
margin: 10px 0;
|
||||
|
||||
> li {
|
||||
@media (max-width: map-get($grid-breakpoints, sm)) {
|
||||
float: left;
|
||||
|
|
@ -176,34 +180,41 @@ html.maximized-card {
|
|||
|
||||
// Comment Box
|
||||
.card-comments {
|
||||
background: #f7f7f7;
|
||||
background: $gray-100;
|
||||
|
||||
.card-comment {
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
@extend .img-sm;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: lighten($gray-700, 20%);
|
||||
margin-left: 40px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.username {
|
||||
color: #444;
|
||||
color: $gray-700;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -212,18 +223,20 @@ html.maximized-card {
|
|||
|
||||
// Widget: TODO LIST
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
|
||||
// Todo list element
|
||||
> li {
|
||||
@include border-radius(2px);
|
||||
padding: 10px;
|
||||
background: #f4f4f4;
|
||||
background: $gray-100;
|
||||
border-left: 2px solid $gray-200;
|
||||
color: $gray-700;
|
||||
margin-bottom: 2px;
|
||||
border-left: 2px solid #e6e7e8;
|
||||
color: #444;
|
||||
padding: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -234,42 +247,44 @@ html.maximized-card {
|
|||
|
||||
.text {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Time labels
|
||||
.label {
|
||||
margin-left: 10px;
|
||||
font-size: 9px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
// Tools and options box
|
||||
.tools {
|
||||
color: theme-color('danger');
|
||||
display: none;
|
||||
float: right;
|
||||
color: theme-color("danger");
|
||||
// icons
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// icons
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .tools {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.done {
|
||||
color: #999;
|
||||
color: darken($gray-500, 25%);
|
||||
|
||||
.text {
|
||||
text-decoration: line-through;
|
||||
font-weight: 500;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -280,24 +295,28 @@ html.maximized-card {
|
|||
|
||||
// Color varaity
|
||||
.danger {
|
||||
border-left-color: theme-color("danger");
|
||||
border-left-color: theme-color('danger');
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-left-color: theme-color("warning");
|
||||
border-left-color: theme-color('warning');
|
||||
}
|
||||
|
||||
.info {
|
||||
border-left-color: theme-color("info");
|
||||
border-left-color: theme-color('info');
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left-color: theme-color("success");
|
||||
border-left-color: theme-color('success');
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-left-color: theme-color("primary");
|
||||
border-left-color: theme-color('primary');
|
||||
}
|
||||
|
||||
.handle {
|
||||
display: inline-block;
|
||||
cursor: move;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -315,6 +334,7 @@ html.maximized-card {
|
|||
.card-header {
|
||||
background-color: $color;
|
||||
border-bottom: 0;
|
||||
|
||||
&,
|
||||
a {
|
||||
color: color-yiq($color);
|
||||
|
|
@ -332,6 +352,7 @@ html.maximized-card {
|
|||
.card-#{$name}:not(.card-outline) {
|
||||
.btn-tool {
|
||||
color: rgba(color-yiq($color), 0.8);
|
||||
|
||||
&:hover {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
|
@ -345,7 +366,7 @@ html.maximized-card {
|
|||
.table th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
table thead tr:first-child th:hover,
|
||||
table td.day:hover,
|
||||
table td.hour:hover,
|
||||
|
|
@ -355,7 +376,6 @@ html.maximized-card {
|
|||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
|
||||
table td.active,
|
||||
table td.active:hover {
|
||||
background: lighten($color, 10%);
|
||||
|
|
|
|||
|
|
@ -2,17 +2,24 @@
|
|||
* Component: Carousel
|
||||
* -------------------
|
||||
*/
|
||||
|
||||
.carousel-control {
|
||||
&.left,
|
||||
&.right {
|
||||
background-image: none;
|
||||
}
|
||||
> .fa {
|
||||
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
display: inline-block;
|
||||
font-size: 40px;
|
||||
margin-top: -20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
/*
|
||||
* Component: Control sidebar. By default, this is the right sidebar.
|
||||
* Component: Control Sidebar
|
||||
* --------------------------
|
||||
*/
|
||||
|
||||
|
||||
.control-sidebar {
|
||||
position: absolute;
|
||||
top: $main-header-height;
|
||||
z-index: 830;
|
||||
|
||||
&,
|
||||
&:before {
|
||||
width: $control-sidebar-width;
|
||||
right: -$control-sidebar-width;
|
||||
&::before {
|
||||
bottom: 0;
|
||||
right: -$control-sidebar-width;
|
||||
width: $control-sidebar-width;
|
||||
@include transition(right $transition-speed $transition-fn);
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
&::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: fixed;
|
||||
content: " ";
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
@include media-breakpoint-up(md) {
|
||||
.control-sidebar {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
@include media-breakpoint-down(md) {
|
||||
.control-sidebar {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
.control-sidebar-slide-open {
|
||||
.control-sidebar {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -70,7 +71,7 @@
|
|||
|
||||
// Background
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
background: $sidebar-dark-bg;
|
||||
}
|
||||
|
||||
|
|
@ -91,8 +92,8 @@
|
|||
|
||||
// Tabs
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
background-color: $sidebar-dark-hover-bg;
|
||||
border-bottom: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.nav-item {
|
||||
|
|
@ -100,10 +101,10 @@
|
|||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
|
|
@ -117,8 +118,8 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&.active {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
color: $sidebar-dark-hover-color;
|
||||
}
|
||||
|
|
@ -140,7 +141,7 @@
|
|||
|
||||
// Background
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
background: $sidebar-light-bg;
|
||||
border-left: 1px solid $gray-500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
* Component: Direct Chat
|
||||
* ----------------------
|
||||
*/
|
||||
|
||||
.direct-chat {
|
||||
.card-body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.chat-pane-open {
|
||||
.direct-chat-contacts {
|
||||
@include translate(0, 0);
|
||||
|
|
@ -17,9 +19,9 @@
|
|||
|
||||
.direct-chat-messages {
|
||||
@include translate(0, 0);
|
||||
padding: 10px;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.direct-chat-msg,
|
||||
|
|
@ -28,7 +30,7 @@
|
|||
}
|
||||
|
||||
.direct-chat-msg {
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -42,44 +44,47 @@
|
|||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: 5px 10px;
|
||||
background: $direct-chat-default-msg-bg;
|
||||
border: 1px solid $direct-chat-default-msg-border-color;
|
||||
margin: 5px 0 0 50px;
|
||||
color: $direct-chat-default-font-color;
|
||||
margin: 5px 0 0 50px;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
|
||||
//Create the arrow
|
||||
&:after,
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 15px;
|
||||
&::after,
|
||||
&::before {
|
||||
border: solid transparent;
|
||||
border-right-color: $direct-chat-default-msg-border-color;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 15px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-width: 5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
border-width: 6px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.right & {
|
||||
margin-right: 50px;
|
||||
margin-left: 0;
|
||||
&:after,
|
||||
&:before {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
border-right-color: transparent;
|
||||
margin-right: 50px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $direct-chat-default-msg-border-color;
|
||||
border-right-color: transparent;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,8 +92,9 @@
|
|||
.direct-chat-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
.right & {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -96,8 +102,8 @@
|
|||
|
||||
.direct-chat-info {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.direct-chat-name {
|
||||
|
|
@ -105,7 +111,7 @@
|
|||
}
|
||||
|
||||
.direct-chat-timestamp {
|
||||
color: #999;
|
||||
color: darken($gray-500, 25%);
|
||||
}
|
||||
|
||||
//Direct chat contacts pane
|
||||
|
|
@ -117,24 +123,26 @@
|
|||
|
||||
.direct-chat-contacts {
|
||||
@include translate(101%, 0);
|
||||
background: $gray-900;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
background: #222d32;
|
||||
color: $white;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//Contacts list -- for displaying contacts in direct chat contacts pane
|
||||
.contacts-list {
|
||||
@extend .list-unstyled;
|
||||
|
||||
> li {
|
||||
@include clearfix();
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
padding: 10px;
|
||||
@include clearfix;
|
||||
border-bottom: 1px solid rgba($black, 0.2);
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -143,13 +151,13 @@
|
|||
|
||||
.contacts-list-img {
|
||||
@include border-radius(50%);
|
||||
width: 40px;
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.contacts-list-info {
|
||||
margin-left: 45px;
|
||||
color: $white;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.contacts-list-name,
|
||||
|
|
@ -166,31 +174,31 @@
|
|||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: #aaa;
|
||||
color: $gray-500;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: #999;
|
||||
color: darken($gray-500, 25%);
|
||||
}
|
||||
|
||||
//Direct Chat Variants
|
||||
.direct-chat-danger {
|
||||
@include direct-chat-variant(theme-color("danger"));
|
||||
@include direct-chat-variant(theme-color('danger'));
|
||||
}
|
||||
|
||||
.direct-chat-primary {
|
||||
@include direct-chat-variant(theme-color("primary"));
|
||||
@include direct-chat-variant(theme-color('primary'));
|
||||
}
|
||||
|
||||
.direct-chat-warning {
|
||||
@include direct-chat-variant(theme-color("warning"));
|
||||
@include direct-chat-variant(theme-color('warning'));
|
||||
}
|
||||
|
||||
.direct-chat-info {
|
||||
@include direct-chat-variant(theme-color("info"));
|
||||
@include direct-chat-variant(theme-color('info'));
|
||||
}
|
||||
|
||||
.direct-chat-success {
|
||||
@include direct-chat-variant(theme-color("success"));
|
||||
@include direct-chat-variant(theme-color('success'));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Component: Dropdown menus
|
||||
* -------------------------
|
||||
* Component: Dropdown
|
||||
* -------------------
|
||||
*/
|
||||
|
||||
// General Dropdown Rules
|
||||
|
|
@ -20,35 +20,38 @@
|
|||
|
||||
// Dropdown Sizes
|
||||
.dropdown-menu-lg {
|
||||
min-width: 280px;
|
||||
max-width: 300px;
|
||||
min-width: 280px;
|
||||
padding: 0;
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
p {
|
||||
white-space: normal;
|
||||
margin: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown header and footer
|
||||
.dropdown-footer,
|
||||
.dropdown-header {
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding: .5rem $dropdown-item-padding-x;
|
||||
font-size: $font-size-sm;
|
||||
padding: .5rem $dropdown-item-padding-x;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
backface-visibility: visible !important;
|
||||
@include animation(flipInX .7s both);
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
@keyframes flipInX {
|
||||
|
|
@ -178,7 +181,7 @@
|
|||
padding: 15px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
border-top: 1px solid #dddddd;
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
a {
|
||||
color: #444 !important;
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
@ -192,7 +195,7 @@
|
|||
> .user-footer {
|
||||
background-color: #f9f9f9;
|
||||
padding: 10px;
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
.btn-default {
|
||||
color: #666666;
|
||||
&:hover {
|
||||
|
|
@ -217,4 +220,4 @@
|
|||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
/*
|
||||
* Component: Elevation
|
||||
* --------------------
|
||||
*/
|
||||
|
||||
.elevation-0 {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.elevation-1 {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23);
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23);
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22);
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,31 @@
|
|||
/*
|
||||
* Component: Form
|
||||
* ---------------
|
||||
* Component: Forms
|
||||
* ----------------
|
||||
*/
|
||||
|
||||
.form-group {
|
||||
&.has-icon {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
// margin-top: -3px;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 0;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
// margin-top: -3px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* button groups */
|
||||
// Button groups
|
||||
.btn-group-vertical {
|
||||
.btn {
|
||||
&.btn-flat:first-of-type, &.btn-flat:last-of-type {
|
||||
|
|
@ -31,44 +34,66 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Support Font Awesome icons in form-control */
|
||||
// Support icons in form-control
|
||||
.form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
line-height: $input-height;
|
||||
}
|
||||
}
|
||||
|
||||
.input-lg + .form-control-feedback.fa,
|
||||
.input-group-lg + .form-control-feedback.fa,
|
||||
.form-group-lg .form-control + .form-control-feedback.fa,
|
||||
.input-lg + .form-control-feedback.fas,
|
||||
.input-group-lg + .form-control-feedback.fas,
|
||||
.form-group-lg .form-control + .form-control-feedback.fas,
|
||||
.input-lg + .form-control-feedback.far,
|
||||
.input-group-lg + .form-control-feedback.far,
|
||||
.form-group-lg .form-control + .form-control-feedback.far,
|
||||
.input-lg + .form-control-feedback.fab,
|
||||
.input-group-lg + .form-control-feedback.fab,
|
||||
.form-group-lg .form-control + .form-control-feedback.fab {
|
||||
line-height: $input-height-lg;
|
||||
.input-lg + .form-control-feedback,
|
||||
.input-group-lg + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.input-sm + .form-control-feedback.fa,
|
||||
.input-group-sm + .form-control-feedback.fa,
|
||||
.form-group-sm .form-control + .form-control-feedback.fa,
|
||||
.input-sm + .form-control-feedback.fas,
|
||||
.input-group-sm + .form-control-feedback.fas,
|
||||
.form-group-sm .form-control + .form-control-feedback.fas,
|
||||
.input-sm + .form-control-feedback.far,
|
||||
.input-group-sm + .form-control-feedback.far,
|
||||
.form-group-sm .form-control + .form-control-feedback.far,
|
||||
.input-sm + .form-control-feedback.fab,
|
||||
.input-group-sm + .form-control-feedback.fab,
|
||||
.form-group-sm .form-control + .form-control-feedback.fab {
|
||||
line-height: $input-height-sm;
|
||||
.form-group-lg {
|
||||
.form-control + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-sm + .form-control-feedback,
|
||||
.input-group-sm + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
line-height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-sm {
|
||||
.form-control + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
line-height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label:not(.form-check-label, .custom-file-label) {
|
||||
|
|
@ -76,26 +101,26 @@ label:not(.form-check-label, .custom-file-label) {
|
|||
}
|
||||
|
||||
.warning-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: $form-feedback-margin-top;
|
||||
@include font-size($form-feedback-font-size);
|
||||
color: theme-color('warning');
|
||||
display: none;
|
||||
margin-top: $form-feedback-margin-top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.warning-tooltip {
|
||||
@include border-radius($form-feedback-tooltip-border-radius);
|
||||
@include font-size($form-feedback-tooltip-font-size);
|
||||
background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
|
||||
color: color-yiq(theme-color('warning'));
|
||||
display: none;
|
||||
line-height: $form-feedback-tooltip-line-height;
|
||||
margin-top: .1rem;
|
||||
max-width: 100%; // Contain to parent when possible
|
||||
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%; // Contain to parent when possible
|
||||
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
||||
margin-top: .1rem;
|
||||
@include font-size($form-feedback-tooltip-font-size);
|
||||
line-height: $form-feedback-tooltip-line-height;
|
||||
color: color-yiq(theme-color('warning'));
|
||||
background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
|
||||
@include border-radius($form-feedback-tooltip-border-radius);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
|
|
@ -176,36 +201,34 @@ textarea.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&.is-warning {
|
||||
~ .custom-control-label {
|
||||
color: theme-color('warning');
|
||||
.custom-control-input.is-warning {
|
||||
~ .custom-control-label {
|
||||
color: theme-color('warning');
|
||||
|
||||
&::before {
|
||||
border-color: theme-color('warning');
|
||||
}
|
||||
&::before {
|
||||
border-color: theme-color('warning');
|
||||
}
|
||||
}
|
||||
|
||||
~ .warning-feedback,
|
||||
~ .warning-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
@include gradient-bg(lighten(theme-color('warning'), 10%));
|
||||
border-color: lighten(theme-color('warning'), 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
|
||||
}
|
||||
|
||||
~ .warning-feedback,
|
||||
~ .warning-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
border-color: lighten(theme-color('warning'), 10%);
|
||||
@include gradient-bg(lighten(theme-color('warning'), 10%));
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
|
||||
}
|
||||
|
||||
&:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: theme-color('warning');
|
||||
}
|
||||
&:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: theme-color('warning');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -234,20 +257,23 @@ textarea.form-control {
|
|||
// custom switch color variations
|
||||
.custom-switch {
|
||||
@each $name, $color in $theme-colors {
|
||||
&.custom-switch-off-#{$name} {
|
||||
&.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-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%);
|
||||
}
|
||||
|
|
@ -255,31 +281,34 @@ textarea.form-control {
|
|||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
&.custom-switch-off-#{$name} {
|
||||
&.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-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 {
|
||||
@each $name, $color in $theme-colors {
|
||||
&.custom-range-#{$name} {
|
||||
&.custom-range-#{$name} {
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: lighten($color, 35%);
|
||||
|
|
@ -293,7 +322,7 @@ textarea.form-control {
|
|||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
|
@ -323,7 +352,7 @@ textarea.form-control {
|
|||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
|
@ -336,7 +365,5 @@ textarea.form-control {
|
|||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,20 +2,22 @@
|
|||
* Component: Info Box
|
||||
* -------------------
|
||||
*/
|
||||
|
||||
.info-box {
|
||||
@extend .d-flex;
|
||||
@extend .mb-3;
|
||||
@include box-shadow($card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
padding: .5rem;
|
||||
min-height: 80px;
|
||||
background: $white;
|
||||
min-height: 80px;
|
||||
padding: .5rem;
|
||||
|
||||
.progress {
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
margin: 5px 0;
|
||||
background-color: rgba($black, 0.125);
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
|
||||
.progress-bar {
|
||||
background-color: $white;
|
||||
}
|
||||
|
|
@ -32,9 +34,9 @@
|
|||
}
|
||||
|
||||
display: block;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
width: 70px;
|
||||
|
||||
> img {
|
||||
max-width: 100%;
|
||||
|
|
@ -42,8 +44,8 @@
|
|||
}
|
||||
|
||||
.info-box-content {
|
||||
padding: 5px 10px;
|
||||
flex: 1;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.info-box-number {
|
||||
|
|
@ -54,18 +56,20 @@
|
|||
.progress-description,
|
||||
.info-box-text {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
.info-box.bg-#{$name},
|
||||
.info-box.bg-gradient-#{$name} {
|
||||
color: color-yiq($color);
|
||||
.info-box {
|
||||
.bg-#{$name},
|
||||
.bg-gradient-#{$name} {
|
||||
color: color-yiq($color);
|
||||
|
||||
.progress-bar {
|
||||
background-color: color-yiq($color);
|
||||
.progress-bar {
|
||||
background-color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
/*
|
||||
* Component: Label
|
||||
* ----------------
|
||||
* Component: Labels
|
||||
* -----------------
|
||||
*/
|
||||
|
||||
.label-default {
|
||||
background-color: $gray-500;
|
||||
color: #444;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
/*
|
||||
* Core: General Layout Style
|
||||
* -------------------------
|
||||
* Core: Layout
|
||||
* ------------
|
||||
*/
|
||||
|
||||
html,
|
||||
body,
|
||||
.wrapper {
|
||||
|
|
@ -18,10 +19,10 @@ body,
|
|||
}
|
||||
|
||||
.layout-boxed & {
|
||||
@include box-shadow(0 0 10px rgba(0, 0, 0, .3));
|
||||
@include box-shadow(0 0 10px rgba($black, .3));
|
||||
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
margin: 0 auto;
|
||||
max-width: $boxed-layout-max-width;
|
||||
}
|
||||
|
|
@ -37,21 +38,21 @@ body,
|
|||
}
|
||||
|
||||
.main-header {
|
||||
position: fixed;
|
||||
z-index: $zindex-main-sidebar - 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: $zindex-main-sidebar - 1;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-footer-fixed & {
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
z-index: $zindex-main-sidebar - 1;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-main-sidebar - 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +70,7 @@ body,
|
|||
height: 33px;
|
||||
}
|
||||
|
||||
& .main-sidebar{
|
||||
& .main-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +98,7 @@ body,
|
|||
|
||||
@include media-breakpoint-down(sm) {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -113,7 +114,7 @@ body,
|
|||
|
||||
.main-sidebar {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
$local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
|
||||
@include transition($local-sidebar-transition);
|
||||
width: $sidebar-width;
|
||||
|
|
@ -121,21 +122,21 @@ body,
|
|||
|
||||
.sidebar-collapse & {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
margin-left: -$sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
&,
|
||||
&:before {
|
||||
box-shadow: none!important;
|
||||
&::before {
|
||||
box-shadow: none !important;
|
||||
margin-left: -$sidebar-width;
|
||||
}
|
||||
|
||||
.sidebar-open & {
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -144,10 +145,10 @@ body,
|
|||
|
||||
:not(.layout-fixed) {
|
||||
.main-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: inherit;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,9 +156,9 @@ body,
|
|||
|
||||
&.sidebar-collapse {
|
||||
.brand-link {
|
||||
height: 57px;
|
||||
transition: width $transition-speed $transition-fn;
|
||||
width: $sidebar-mini-width;
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.main-sidebar:hover {
|
||||
|
|
@ -168,18 +169,17 @@ body,
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
margin-top: 57px;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
transition: width $transition-speed $transition-fn;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: $zindex-main-sidebar + 1;
|
||||
transition: width $transition-speed $transition-fn;
|
||||
width: $sidebar-width;
|
||||
z-index: $zindex-main-sidebar + 1;
|
||||
}
|
||||
|
||||
// Sidebar variants
|
||||
|
|
@ -196,21 +196,21 @@ body,
|
|||
|
||||
.layout-fixed {
|
||||
.main-sidebar {
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
float: none;
|
||||
}
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-footer {
|
||||
padding: $main-footer-padding;
|
||||
color: #555;
|
||||
border-top: $main-footer-border-top;
|
||||
background: $main-footer-bg;
|
||||
border-top: $main-footer-border-top;
|
||||
color: lighten($gray-700, 25%);
|
||||
padding: $main-footer-padding;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
|
|
@ -220,11 +220,12 @@ body,
|
|||
font-size: 1.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
line-height: 1.8rem;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -232,6 +233,6 @@ body,
|
|||
.content-wrapper,
|
||||
.main-header,
|
||||
.main-footer {
|
||||
transition: none!important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,26 +2,30 @@
|
|||
* Component: Main Header
|
||||
* ----------------------
|
||||
*/
|
||||
|
||||
.main-header {
|
||||
z-index: $zindex-main-header;
|
||||
|
||||
.navbar-nav .nav-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
height: $nav-link-height;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-nav[class*="-right"] {
|
||||
.dropdown-menu {
|
||||
margin-top: -3px;
|
||||
right: 0;
|
||||
left: auto;
|
||||
@media (max-width: breakpoint-max(xs)) {
|
||||
left: 0;
|
||||
right: auto;
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&[class*='-right'] {
|
||||
.dropdown-menu {
|
||||
left: auto;
|
||||
margin-top: -3px;
|
||||
right: 0;
|
||||
|
||||
@media (max-width: breakpoint-max(xs)) {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,21 +39,22 @@
|
|||
|
||||
// Navbar badge
|
||||
.navbar-badge {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 5px;
|
||||
font-size: .6rem;
|
||||
font-weight: 300;
|
||||
padding: 2px 4px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
border-left-width: 0;
|
||||
background-color: transparent;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.form-control-navbar {
|
||||
border-right-width: 0;
|
||||
|
||||
& + .input-group-append {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -89,8 +94,8 @@
|
|||
&:focus {
|
||||
&,
|
||||
& + .input-group-append .btn-navbar {
|
||||
border: $main-header-dark-form-control-focused-border !important;
|
||||
background-color: $main-header-dark-form-control-focused-bg;
|
||||
border: $main-header-dark-form-control-focused-border !important;
|
||||
color: $main-header-dark-form-control-focused-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -126,8 +131,8 @@
|
|||
&:focus {
|
||||
&,
|
||||
& + .input-group-append .btn-navbar {
|
||||
border: $main-header-light-form-control-focused-border !important;
|
||||
background-color: $main-header-light-form-control-focused-bg;
|
||||
border: $main-header-light-form-control-focused-border !important;
|
||||
color: $main-header-light-form-control-focused-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
/**
|
||||
* Component: Sidebar
|
||||
* ------------------
|
||||
* Component: Main Sidebar
|
||||
* -----------------------
|
||||
*/
|
||||
|
||||
.main-sidebar {
|
||||
z-index: $zindex-main-sidebar;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
z-index: $zindex-main-sidebar;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: calc(100% - 4rem);
|
||||
overflow-y: auto;
|
||||
padding-bottom: $sidebar-padding-y;
|
||||
padding-top: $sidebar-padding-y;
|
||||
padding-left: $sidebar-padding-x;
|
||||
padding-right: $sidebar-padding-x;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 4rem);
|
||||
padding-top: $sidebar-padding-y;
|
||||
}
|
||||
|
||||
// Sidebar user panel
|
||||
.user-panel {
|
||||
position: relative;
|
||||
|
||||
[class*="sidebar-dark"] & {
|
||||
[class*='sidebar-dark'] & {
|
||||
border-bottom: 1px solid lighten($dark, 12%);
|
||||
}
|
||||
|
||||
[class*="sidebar-light"] & {
|
||||
[class*='sidebar-light'] & {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
}
|
||||
|
||||
.image {
|
||||
padding-left: $nav-link-padding-x - .2;
|
||||
display: inline-block;
|
||||
padding-left: $nav-link-padding-x - .2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: $sidebar-user-image-width;
|
||||
height: auto;
|
||||
width: $sidebar-user-image-width;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
.nav-item {
|
||||
> .nav-link {
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.right {
|
||||
@include transition(transform $transition-fn $transition-speed);
|
||||
}
|
||||
|
|
@ -104,7 +105,9 @@
|
|||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab {
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -151,13 +154,13 @@
|
|||
}
|
||||
|
||||
#sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba($black, 0.1);
|
||||
bottom: 0;
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: $zindex-main-sidebar - 1;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
/*
|
||||
* General: Miscellaneous
|
||||
* ----------------------
|
||||
* Misc: Miscellaneous
|
||||
* -------------------
|
||||
*/
|
||||
a.text-muted:hover {
|
||||
color: theme-color(primary) !important;
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
border-color: transparent !important;
|
||||
|
|
@ -15,15 +12,18 @@ a.text-muted:hover {
|
|||
display: block;
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
|
||||
&.margin-bottom {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
> .description-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
> .description-text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -51,8 +51,8 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
.bg-gray {
|
||||
color: #000;
|
||||
background-color: $gray-500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.bg-gray-light {
|
||||
|
|
@ -86,16 +86,16 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: color-yiq(darken($color, 10%));
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -117,29 +117,30 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: color-yiq(darken($color, 7.5%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: color-yiq(darken($color, 10%));
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Backgrund Color Disabled
|
||||
[class^="bg-"].disabled {
|
||||
[class^='bg-'].disabled {
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
// Link Styles
|
||||
.link-muted {
|
||||
color: darken($gray-500, 30%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken($gray-500, 40%);
|
||||
|
|
@ -147,10 +148,11 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
.link-black {
|
||||
color: #666;
|
||||
color: $gray-600;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #999;
|
||||
color: lighten($gray-500, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -176,9 +178,9 @@ a.text-muted:hover {
|
|||
|
||||
// _fix for sparkline tooltip
|
||||
.jqstooltip {
|
||||
height: auto !important;
|
||||
padding: 5px !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
// Description Block Extension
|
||||
|
|
@ -198,67 +200,75 @@ a.text-muted:hover {
|
|||
.list-group-unbordered {
|
||||
> .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
color: $gray-600;
|
||||
font-size: 15px;
|
||||
padding: 10px 4px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
padding: 10px 4px;
|
||||
}
|
||||
|
||||
.list-seperator {
|
||||
height: 1px;
|
||||
background: $card-border-color;
|
||||
height: 1px;
|
||||
margin: 15px 0 9px 0;
|
||||
}
|
||||
|
||||
.list-link {
|
||||
> a {
|
||||
color: $gray-600;
|
||||
padding: 4px;
|
||||
color: #777;
|
||||
|
||||
&:hover {
|
||||
color: #222;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User block
|
||||
.user-block {
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.username,
|
||||
.description,
|
||||
.comment {
|
||||
display: block;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.user-block-sm {
|
||||
img {
|
||||
@extend .img-sm;
|
||||
}
|
||||
|
||||
.username,
|
||||
.description,
|
||||
.comment {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -273,8 +283,9 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
.img-sm {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
|
||||
+ .img-push {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
|
@ -283,6 +294,7 @@ a.text-muted:hover {
|
|||
.img-md {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
+ .img-push {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
|
@ -291,6 +303,7 @@ a.text-muted:hover {
|
|||
.img-lg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
+ .img-push {
|
||||
margin-left: 110px;
|
||||
}
|
||||
|
|
@ -344,42 +357,45 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
.size-32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.size-40 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.size-50 {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
// General attachemnt block
|
||||
.attachment-block {
|
||||
background: $gray-100;
|
||||
border: 1px solid $card-border-color;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
background: #f7f7f7;
|
||||
padding: 5px;
|
||||
|
||||
.attachment-img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
height: auto;
|
||||
float: left;
|
||||
height: auto;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.attachment-pushed {
|
||||
margin-left: 110px;
|
||||
}
|
||||
|
||||
.attachment-heading {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.attachment-text {
|
||||
color: #555;
|
||||
}
|
||||
|
|
@ -401,15 +417,15 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
.sort-highlight {
|
||||
background: #f4f4f4;
|
||||
border: 1px dashed #ddd;
|
||||
background: $gray-100;
|
||||
border: 1px dashed $gray-300;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Charts
|
||||
.chart {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
|
|
@ -425,33 +441,39 @@ a.text-muted:hover {
|
|||
// Box overlay for LOADING STATE effect
|
||||
> .overlay,
|
||||
> .loading-img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@include border-radius($border-radius);
|
||||
align-items: center;
|
||||
background: rgba($white, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 50;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
@include border-radius($border-radius);
|
||||
> .fa,
|
||||
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab {
|
||||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
> .fa,
|
||||
background: rgba($black, 0.5);
|
||||
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab {
|
||||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// AdminLTE mixins
|
||||
// ===============
|
||||
/*
|
||||
* General: Mixins
|
||||
* ---------------
|
||||
*/
|
||||
|
||||
// Changes the color and the hovering properties of the navbar
|
||||
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
|
||||
|
|
@ -25,8 +27,8 @@
|
|||
color: $font-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $hover-color;
|
||||
background: $hover-bg;
|
||||
color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,8 +36,8 @@
|
|||
// Logo color variation
|
||||
@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
|
||||
background-color: $bg-color;
|
||||
color: $color;
|
||||
border-bottom: $border-bottom-width solid $border-bottom-color;
|
||||
color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -46,10 +48,12 @@
|
|||
// Box solid color variantion creator
|
||||
@mixin box-solid-variant($color, $text-color: #fff) {
|
||||
border: 1px solid $color;
|
||||
|
||||
> .card-header {
|
||||
color: $text-color;
|
||||
background: $color;
|
||||
background-color: $color;
|
||||
color: $text-color;
|
||||
|
||||
a,
|
||||
.btn {
|
||||
color: $text-color;
|
||||
|
|
@ -63,16 +67,15 @@
|
|||
background: $bg-color;
|
||||
border-color: $bg-color;
|
||||
color: color-yiq($bg-color);
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y); // IE9 only
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
|
|
@ -118,19 +121,20 @@
|
|||
}
|
||||
|
||||
.status {
|
||||
color: $sidebar-dark-color;
|
||||
background: $sidebar-dark-hover-bg;
|
||||
color: $sidebar-dark-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $sidebar-dark-hover-color;
|
||||
background: darken($sidebar-dark-hover-bg, 3%);
|
||||
color: $sidebar-dark-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-color: darken($sidebar-dark-hover-bg, 5%);
|
||||
@include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
|
||||
border-color: darken($sidebar-dark-hover-bg, 5%);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
|
|
@ -152,13 +156,14 @@
|
|||
&.menu-open > .nav-link,
|
||||
&:hover > .nav-link,
|
||||
& > .nav-link:focus {
|
||||
color: $sidebar-dark-hover-color;
|
||||
background-color: $sidebar-dark-hover-bg;
|
||||
color: $sidebar-dark-hover-color;
|
||||
}
|
||||
|
||||
> .nav-link.active {
|
||||
color: $sidebar-dark-hover-color;
|
||||
background-color: $link-hover-border-color;
|
||||
color: $sidebar-dark-hover-color;
|
||||
|
||||
@if $enable-shadows {
|
||||
@extend .elevation-1;
|
||||
}
|
||||
|
|
@ -172,13 +177,14 @@
|
|||
|
||||
// Section Heading
|
||||
.nav-header {
|
||||
color: lighten($sidebar-dark-color, 5%);
|
||||
background: inherit; //darken($sidebar-dark-bg, 3%);
|
||||
color: lighten($sidebar-dark-color, 5%);
|
||||
}
|
||||
|
||||
// All links within the sidebar menu
|
||||
.sidebar a {
|
||||
color: $sidebar-dark-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
|
@ -193,8 +199,8 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $sidebar-dark-submenu-hover-bg;
|
||||
color: $sidebar-dark-submenu-hover-color;
|
||||
background-color: $sidebar-dark-submenu-hover-bg
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,8 +208,8 @@
|
|||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $sidebar-dark-submenu-active-color;
|
||||
background-color: $sidebar-dark-submenu-active-bg;
|
||||
color: $sidebar-dark-submenu-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -222,19 +228,20 @@
|
|||
}
|
||||
|
||||
.status {
|
||||
color: $sidebar-light-color;
|
||||
background: $sidebar-light-hover-bg;
|
||||
color: $sidebar-light-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $sidebar-light-hover-color;
|
||||
background: darken($sidebar-light-hover-bg, 3%);
|
||||
color: $sidebar-light-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-color: darken($sidebar-light-hover-bg, 5%);
|
||||
@include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
|
||||
border-color: darken($sidebar-light-hover-bg, 5%);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
|
|
@ -256,13 +263,14 @@
|
|||
// Hover and active states
|
||||
&.menu-open > .nav-link,
|
||||
&:hover > .nav-link {
|
||||
color: $sidebar-light-hover-color;
|
||||
background-color: $sidebar-light-hover-bg;
|
||||
color: $sidebar-light-hover-color;
|
||||
}
|
||||
|
||||
> .nav-link.active {
|
||||
color: $sidebar-light-active-color;
|
||||
background-color: $link-hover-border-color;
|
||||
color: $sidebar-light-active-color;
|
||||
|
||||
@if $enable-shadows {
|
||||
@extend .elevation-1;
|
||||
}
|
||||
|
|
@ -276,13 +284,14 @@
|
|||
|
||||
// Section Heading
|
||||
.nav-header {
|
||||
color: darken($sidebar-light-color, 5%);
|
||||
background: inherit;
|
||||
color: darken($sidebar-light-color, 5%);
|
||||
}
|
||||
|
||||
// All links within the sidebar menu
|
||||
.sidebar a {
|
||||
color: $sidebar-light-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -298,8 +307,8 @@
|
|||
> .nav-link.active {
|
||||
&,
|
||||
&:hover {
|
||||
color: $sidebar-light-submenu-active-color;
|
||||
background-color: $sidebar-light-submenu-active-bg;
|
||||
color: $sidebar-light-submenu-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
/*
|
||||
* General: Modals
|
||||
* ----------------------
|
||||
* Component: Modals
|
||||
* ---------
|
||||
------
|
||||
*/
|
||||
|
||||
// Overlay
|
||||
.modal-dialog {
|
||||
.overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: ($zindex-modal + 2);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $black;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: .7;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: ($zindex-modal + 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BG Color Variations Fixes
|
||||
.modal-content {
|
||||
&.bg-warning {
|
||||
|
|
@ -25,14 +28,13 @@
|
|||
border-color: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-info,
|
||||
&.bg-danger,
|
||||
&.bg-success, {
|
||||
.close{
|
||||
.close {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
* Component: Nav
|
||||
* --------------
|
||||
*/
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
|
||||
&:not(.active):hover {
|
||||
color: theme-color("primary")
|
||||
color: theme-color('primary')
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
|
|
@ -19,12 +20,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Vertical Tabs
|
||||
//
|
||||
.nav-tabs.flex-column {
|
||||
border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
border-bottom: 0;
|
||||
border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
|
||||
.nav-link {
|
||||
margin-right: -$nav-tabs-border-width;
|
||||
|
|
@ -40,8 +39,8 @@
|
|||
}
|
||||
|
||||
&.nav-tabs-right {
|
||||
border-right: 0;
|
||||
border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
border-right: 0;
|
||||
|
||||
|
||||
.nav-link {
|
||||
|
|
@ -59,9 +58,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Color variants
|
||||
//
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color==dark or $color==light {
|
||||
.navbar-#{$color} {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
/*
|
||||
* Misc: print
|
||||
* Misc: Print
|
||||
* -----------
|
||||
*/
|
||||
|
||||
@media print {
|
||||
//Add to elements that you do not want to show when printing
|
||||
.no-print {
|
||||
|
|
@ -18,9 +19,9 @@
|
|||
//This is the only element that should appear, so let's remove the margins
|
||||
.content-wrapper,
|
||||
.main-footer {
|
||||
@include translate(0, 0);
|
||||
margin-left: 0 !important;
|
||||
min-height: 0 !important;
|
||||
@include translate(0, 0);
|
||||
}
|
||||
|
||||
.layout-fixed .content-wrapper {
|
||||
|
|
@ -29,10 +30,10 @@
|
|||
|
||||
//Invoice printing
|
||||
.invoice {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invoice-col {
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
//Make sure table content displays properly
|
||||
.table-responsive {
|
||||
overflow: auto;
|
||||
|
||||
> .table tr th,
|
||||
> .table tr td {
|
||||
white-space: normal !important;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,51 @@
|
|||
/*
|
||||
* Component: Products List
|
||||
* ------------------------
|
||||
* Component: Products
|
||||
* -------------------
|
||||
*/
|
||||
.products-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> .item {
|
||||
@include clearfix;
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
@include clearfix();
|
||||
padding: 10px 0;
|
||||
|
||||
background: $white;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
float: left;
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
display: block;
|
||||
color: $gray-600;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-list-in-card > .item {
|
||||
@include border-radius(0);
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,37 @@
|
|||
.progress {
|
||||
@include box-shadow(none);
|
||||
@include border-radius($progress-bar-border-radius);
|
||||
|
||||
// Vertical bars
|
||||
&.vertical {
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
|
||||
> .progress-bar {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//Sizes
|
||||
&.sm,
|
||||
&.progress-sm {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.xs,
|
||||
&.progress-xs {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&.xxs,
|
||||
&.progress-xxs {
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
|
|
@ -26,35 +57,6 @@
|
|||
height: 3px;
|
||||
}
|
||||
|
||||
// Vertical bars
|
||||
.progress.vertical {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
> .progress-bar {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
//Sizes
|
||||
&.sm,
|
||||
&.progress-sm {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.xs,
|
||||
&.progress-xs {
|
||||
width: 10px;
|
||||
}
|
||||
&.xxs,
|
||||
&.progress-xxs {
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove margins from progress bars when put in a table
|
||||
.table {
|
||||
tr > td .progress {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
* Component: Sidebar Mini
|
||||
* -----------------------
|
||||
*/
|
||||
|
||||
// Mixin
|
||||
|
|
@ -38,9 +39,9 @@
|
|||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Modify the sidebar to shrink instead of disappearing
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
overflow-x: hidden;
|
||||
|
||||
&,
|
||||
&:before {
|
||||
&::before {
|
||||
// Don't go away! Just shrink
|
||||
margin-left: 0;
|
||||
width: $sidebar-mini-width;
|
||||
|
|
@ -63,8 +64,10 @@
|
|||
&:hover,
|
||||
&.sidebar-focused {
|
||||
width: $sidebar-width;
|
||||
|
||||
.user-panel {
|
||||
text-align: left;
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -73,10 +76,10 @@
|
|||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
margin-left: 0;
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
|
|
@ -108,17 +111,19 @@
|
|||
// Add sidebar-mini class to the body tag to activate this feature
|
||||
.sidebar-mini {
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include sidebar-mini-breakpoint();
|
||||
@include sidebar-mini-breakpoint;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini-md {
|
||||
@include media-breakpoint-up(md) {
|
||||
@include sidebar-mini-breakpoint();
|
||||
@include sidebar-mini-breakpoint;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -132,11 +137,12 @@
|
|||
|
||||
.nav-sidebar .nav-item > .nav-link {
|
||||
position: relative;
|
||||
|
||||
> .float-right {
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
@include box-shadow($card-shadow);
|
||||
@extend .mb-3;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
// content wrapper
|
||||
> .inner {
|
||||
|
|
@ -18,18 +18,19 @@
|
|||
}
|
||||
|
||||
> .small-box-footer {
|
||||
background: rgba($black, 0.1);
|
||||
color: $white;
|
||||
color: rgba($white, 0.8);
|
||||
display: block;
|
||||
padding: 3px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
color: $white;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
display: block;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
text-decoration: none;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background: rgba($black, 0.15);
|
||||
color: $white;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,16 +38,17 @@
|
|||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
margin: 0 0 10px 0;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
color: #f9f9f9;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
@ -58,20 +60,22 @@
|
|||
|
||||
// the icon
|
||||
.icon {
|
||||
color: rgba($black, 0.15);
|
||||
z-index: 0;
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
|
||||
> i {
|
||||
transition: all $transition-speed linear;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
font-size: 90px;
|
||||
|
||||
&.fa,
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
transition: all $transition-speed linear;
|
||||
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab {
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
font-size: 70px;
|
||||
top: 20px;
|
||||
}
|
||||
|
|
@ -82,14 +86,17 @@
|
|||
// Small box hover state
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
// Animate icons on small box hover
|
||||
.icon > i {
|
||||
font-size: 95px;
|
||||
|
||||
&.fa,
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab {
|
||||
&.fab,
|
||||
&.glyphicon,
|
||||
&.ion {
|
||||
font-size: 75px;
|
||||
}
|
||||
}
|
||||
|
|
@ -100,9 +107,11 @@
|
|||
// No need for icons on very small devices
|
||||
.small-box {
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,36 +10,42 @@
|
|||
|
||||
//User Widget Style 1
|
||||
.widget-user {
|
||||
|
||||
//User name container
|
||||
.widget-user-header {
|
||||
padding: 1rem;
|
||||
height: 120px;
|
||||
@if $enable-rounded {
|
||||
@include border-top-radius($border-radius);
|
||||
}
|
||||
|
||||
height: 120px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
//User name
|
||||
.widget-user-username {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0;
|
||||
text-shadow: 0 1px 1px rgba($black, 0.2);
|
||||
}
|
||||
|
||||
//User single line description
|
||||
.widget-user-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
//User image container
|
||||
.widget-user-image {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
|
||||
> img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
border: 3px solid $white;
|
||||
height: auto;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,32 +56,37 @@
|
|||
|
||||
//User Widget Style 2
|
||||
.widget-user-2 {
|
||||
|
||||
//User name container
|
||||
.widget-user-header {
|
||||
padding: 1rem;
|
||||
@include border-top-radius($border-radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
//User name
|
||||
.widget-user-username {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
//User single line description
|
||||
.widget-user-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.widget-user-username,
|
||||
.widget-user-desc {
|
||||
margin-left: 75px;
|
||||
}
|
||||
|
||||
//User image container
|
||||
.widget-user-image {
|
||||
> img {
|
||||
width: 65px;
|
||||
height: auto;
|
||||
float: left;
|
||||
height: auto;
|
||||
width: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,15 @@
|
|||
/*
|
||||
* Component: Text
|
||||
* -------------
|
||||
*/
|
||||
|
||||
// text muted hover
|
||||
a.text-muted:hover {
|
||||
color: theme-color(primary) !important;
|
||||
}
|
||||
|
||||
|
||||
// text modification
|
||||
.text-bold {
|
||||
&, &.table td, &.table th {
|
||||
font-weight: 700;
|
||||
|
|
@ -21,6 +33,7 @@
|
|||
}
|
||||
|
||||
|
||||
// text color variations
|
||||
@each $name, $color in $colors {
|
||||
.text-#{$name} {
|
||||
color: #{$color};
|
||||
|
|
|
|||
|
|
@ -4,39 +4,39 @@
|
|||
*/
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0 0 30px 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
||||
// The line
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
&::before {
|
||||
@include border-radius($border-radius);
|
||||
background: $gray-300;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: #ddd;
|
||||
content: '';
|
||||
left: 31px;
|
||||
margin: 0;
|
||||
@include border-radius($border-radius);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
@include clearfix;
|
||||
margin-bottom: 15px;
|
||||
@include clearfix();
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
|
||||
// The content
|
||||
> .timeline-item {
|
||||
@include box-shadow($card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
margin-top: 0;
|
||||
background: $white;
|
||||
color: #444;
|
||||
margin-left: 60px;
|
||||
margin-right: 15px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -44,20 +44,23 @@
|
|||
> .time {
|
||||
color: #999;
|
||||
float: right;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
> .timeline-header {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> .timeline-header {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
color: #555;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
> a {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// Item body and footer
|
||||
> .timeline-body, > .timeline-footer {
|
||||
padding: 10px;
|
||||
|
|
@ -67,30 +70,33 @@
|
|||
|
||||
// The icons
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
background: $gray-500;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
height: 30px;
|
||||
left: 18px;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Time label
|
||||
> .time-label {
|
||||
> span {
|
||||
@include border-radius(4px);
|
||||
|
||||
background-color: $white;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
background-color: $white;
|
||||
|
||||
@include border-radius(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -98,11 +104,12 @@
|
|||
.timeline-inverse {
|
||||
> li {
|
||||
> .timeline-item {
|
||||
background: $gray-100;
|
||||
border: 1px solid #ddd;
|
||||
@include box-shadow(none);
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-300;
|
||||
|
||||
> .timeline-header {
|
||||
border-bottom-color: #ddd;
|
||||
border-bottom-color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,18 +2,21 @@
|
|||
* Component: Users List
|
||||
* ---------------------
|
||||
*/
|
||||
|
||||
.users-list {
|
||||
@extend .list-unstyled;
|
||||
> li {
|
||||
width: 25%;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
|
||||
img {
|
||||
@include border-radius(50%);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
&,
|
||||
.users-list-name {
|
||||
|
|
@ -29,14 +32,14 @@
|
|||
}
|
||||
|
||||
.users-list-name {
|
||||
color: $gray-700;
|
||||
font-size: $font-size-sm;
|
||||
color: #444;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.users-list-date {
|
||||
color: #999;
|
||||
color: darken($gray-500, 20%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// AdminLTE 3 Variables.less
|
||||
// =========================
|
||||
/*
|
||||
* Core: Variables
|
||||
* ---------------
|
||||
*/
|
||||
|
||||
// COLORS
|
||||
// --------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
/*
|
||||
* Page: 400 and 500 error pages
|
||||
* Pages: 400 and 500 error pages
|
||||
* ------------------------------
|
||||
*/
|
||||
|
||||
.error-page {
|
||||
width: 600px;
|
||||
margin: 20px auto 0 auto;
|
||||
|
|
@ -1,14 +1,22 @@
|
|||
/*
|
||||
* Pages: E-commerce
|
||||
* -----------------
|
||||
*/
|
||||
|
||||
// product image
|
||||
.product-image {
|
||||
@include img-fluid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// product image thumbnails list
|
||||
.product-image-thumbs {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
// product image thumbnail
|
||||
.product-image-thumb {
|
||||
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
|
@ -31,6 +39,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// product share
|
||||
.product-share a {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Page: Invoice
|
||||
* -------------
|
||||
* Pages: Invoice
|
||||
* --------------
|
||||
*/
|
||||
|
||||
.invoice {
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Page: Lock Screen
|
||||
* -----------------
|
||||
* Pages: Lock Screen
|
||||
* ------------------
|
||||
*/
|
||||
/* ADD THIS CLASS TO THE <BODY> TAG */
|
||||
.lockscreen {
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Page: Login & Register
|
||||
* ----------------------
|
||||
* Pages: Login & Register
|
||||
* -----------------------
|
||||
*/
|
||||
|
||||
.login-logo,
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Page: Mailbox
|
||||
* -------------
|
||||
* Pages: Mailbox
|
||||
* --------------
|
||||
*/
|
||||
.mailbox-messages {
|
||||
> .table {
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Page: Profile
|
||||
* -------------
|
||||
* Pages: Profile
|
||||
* --------------
|
||||
*/
|
||||
|
||||
.profile-user-img {
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
* Pages: Projects
|
||||
* ---------------
|
||||
*/
|
||||
|
||||
.projects {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// table avatar
|
||||
img.table-avatar,
|
||||
.table-avatar img{
|
||||
border-radius: 50%;
|
||||
display: inline;
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
// project state
|
||||
.project-state {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Plugin: Bootstrap Slider
|
||||
* ---------------------
|
||||
* ------------------------
|
||||
*/
|
||||
|
||||
// Style override
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Plugin: iCheck Bootstrap
|
||||
* ---------------------
|
||||
* ------------------------
|
||||
*/
|
||||
|
||||
// iCheck colors (theme colors)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Plugin: SweetAlert2
|
||||
* ---------------
|
||||
* -------------------
|
||||
*/
|
||||
|
||||
// Icon Colors
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Plugin: Toastr
|
||||
* ---------------
|
||||
* --------------
|
||||
*/
|
||||
|
||||
// Background to FontAwesome Icons
|
||||
|
|
|
|||
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
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue