5 * @link https://www.open-emr.org
6 * @author Jerry Padgett <sjpadgett@gmail.com>
7 * @copyright Copyright (c) 2016-2017 Jerry Padgett <sjpadgett@gmail.com>
8 * @license https://github.com/openemr/openemr/blob/master/LICENSE GNU General Public License 3
10 @import './../../../interface/themes/oe-common/oe-sidebar.scss';
13 ----------------------------
40 /* Define 2 column template */
47 /*right side - contins main content*/
49 /*background-color: #f1f2f7;*/
53 /*left side - contains sidebar*/
60 @media screen and
(min-width: 992px) {
65 /*Right side strech mode*/
70 .right-side.strech > .content-header {
74 /* Left side collapse */
75 .left-side.collapse-left {
80 /*Give content full width on xs screens*/
81 @media screen and
(max-width: 992px) {
88 By default the layout is not fixed but if you add the class .fixed to the body element
89 the sidebar and the navbar will automatically become poisitioned fixed
92 body
.fixed
.left-side
,
97 body
.fixed
> .header
{
108 body
.fixed
.wrapper
{
121 margin: 10px 0 20px 0;
125 .page-header > small {
131 /* All images should be responsive */
133 max-width: 100% !important
;
142 /*Hide elements by display none only*/
144 display: none
!important
;
149 border: 0px !important
;
154 padding: 0px !important
;
159 margin: 0px !important
;
162 /* Remove box shadow */
164 box-shadow: none
!important
;
167 /* Don't display when printing */
184 /* Remove border radius */
186 -webkit-border-radius: 0 !important
;
187 -moz-border-radius: 0 !important
;
188 border-radius: 0 !important
;
193 .table.no-border th {
197 /* .text-center in tables */
199 table
.text-center td
,
200 table
.text-center th
{
214 .text-bold.table th {
218 .border-radius-none {
219 -webkit-border-radius: 0 !important
;
220 -moz-border-radius: 0 !important
;
221 border-radius: 0 !important
;
228 /*---------------------------------------------------
230 ---------------------------------------------------
231 A set of useful LESS mixins
232 More info at: http://lesselements.com
233 ---------------------------------------------------*/
235 Components: navbar, logo and content header
236 -------------------------------------------------
244 body
> .header
.navbar
{
247 margin-left: 220px;*/
250 body
> .header
.navbar
.sidebar-toggle
{
257 background-color: transparent
;
258 background-image: none
;
259 border: 1px solid transparent
;
260 -webkit-border-radius: 0 !important
;
261 -moz-border-radius: 0 !important
;
262 border-radius: 0 !important
;
265 body
> .header
.navbar
.sidebar-toggle:hover
.icon-bar
{
269 body
> .header
.navbar
.sidebar-toggle
.icon-bar
{
273 -webkit-border-radius: 4px;
274 -moz-border-radius: 4px;
278 body
> .header
.navbar
.sidebar-toggle
.icon-bar
+ .icon-bar
{
282 body
> .header
.navbar
.nav
> li
.user
> a
{
286 body
> .header
.navbar
.nav
> li
.user
> a
> .fa
,
287 body
> .header
.navbar
.nav
> li
.user
> a
> .glyphicon
,
288 body
> .header
.navbar
.nav
> li
.user
> a
> .ion
{
292 body
> .header
.navbar
.nav
> li
> a
> .label
{
293 -webkit-border-radius: 50%;
294 -moz-border-radius: 50%;
308 body
> .header
.navbar
.nav
> li
> a:hover
> .label
{
312 .right-side > .content-header {
317 .right-side > .content-header > h1 {
322 .right-side > .content-header > h1 > small {
324 display: inline-block
;
330 background-color: #fff;
337 .right-side > .content-header > .breadcrumb {
339 background: transparent
;
347 -webkit-border-radius: 2px;
348 -moz-border-radius: 2px;
352 @media screen and
(max-width: 767px) {
353 .right-side > .content-header > .breadcrumb {
363 @media (max-width: 767px) {
364 .navbar .navbar-nav > li {
373 .navbar-nav > li > a {
375 padding-bottom: 15px;
379 .navbar .navbar-right {
384 @media screen and
(max-width: 560px) {
389 body
> .header
.logo
,
390 body
> .header
.navbar
{
393 position: relative
!important
;
396 body
> .header
.navbar
{
400 body
.fixed
> .header
{
404 body
.fixed
> .wrapper
,
405 body
.fixed
.sidebar-offcanvas
{
406 /*margin-top: 100px!important;*/
412 --------------------------
418 .sidebar .sidebar-form input:focus {
419 -webkit-box-shadow: none
;
420 -moz-box-shadow: none
;
422 border-color: transparent
!important
;
425 .sidebar .sidebar-menu {
431 .sidebar .sidebar-menu > li {
436 .sidebar .sidebar-menu > li > a {
437 padding: 12px 5px 12px 15px;
441 .sidebar
.sidebar-menu
> li
> a
> .fa
,
442 .sidebar
.sidebar-menu
> li
> a
> .glyphicon
,
443 .sidebar .sidebar-menu > li > a > .icon {
447 .sidebar .sidebar-menu .treeview-menu {
454 .sidebar .sidebar-menu .treeview-menu > li {
458 .sidebar .sidebar-menu .treeview-menu > li > a {
459 padding: 8px 5px 8px 15px;
465 .sidebar
.sidebar-menu
.treeview-menu
> li
> a
> .fa
,
466 .sidebar
.sidebar-menu
.treeview-menu
> li
> a
> .glyphicon
,
467 .sidebar .sidebar-menu .treeview-menu > li > a > .icon {
485 .user-panel > .image > img {
490 .user-panel > .info {
492 padding: 5px 5px 5px 15px;
497 .user-panel > .info > p {
501 .user-panel > .info > a {
502 text-decoration: none
;
509 .user-panel
> .info
> a
> .fa
,
510 .user-panel
> .info
> a
> .ion
,
511 .user-panel > .info > a > .glyphicon {
517 * --------------------------------------------------
518 * Gives us the push menu effect
520 @media screen and
(max-width: 992px) {
525 .row-offcanvas-right .sidebar-offcanvas {
529 .row-offcanvas-left .sidebar-offcanvas {
533 .row-offcanvas-right.active {
537 .row-offcanvas-left.active {
545 body
.fixed
.sidebar-offcanvas
{
550 body
.fixed
.row-offcanvas-left
.active
.navbar
{
551 left: 220px !important
;
555 body
.fixed
.row-offcanvas-left
.active
.sidebar-offcanvas
{
562 ----------------------------
564 /*Dropdowns in general*/
566 -webkit-box-shadow: 0px 3px 6px rgba
(0, 0, 0, 0.1);
567 -moz-box-shadow: 0px 3px 6px rgba
(0, 0, 0, 0.1);
568 box-shadow: 0px 3px 6px rgba
(0, 0, 0, 0.1);
572 .dropdown-menu
> li
> a
> .glyphicon
,
573 .dropdown-menu
> li
> a
> .fa
,
574 .dropdown-menu > li > a > .ion {
578 .dropdown-menu > li > a:hover {
579 background-color: #3c8dbc;
583 .dropdown-menu-right > li > a:hover {
584 background-color: #39435c;
589 Navbar custom dropdown menu
590 ------------------------------------
592 .navbar-nav
> .notifications-menu
> .dropdown-menu
,
593 .navbar-nav
> .messages-menu
> .dropdown-menu
,
594 .navbar-nav > .tasks-menu > .dropdown-menu {
596 padding: 0 0 0 0 !important
;
597 margin: 0 !important
;
599 border: 1px solid
#dfdfdf;
600 -webkit-border-radius: 4px !important
;
601 -moz-border-radius: 4px !important
;
602 border-radius: 4px !important
;
605 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.header
,
606 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.header
,
607 .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
608 -webkit-border-top-left-radius: 4px;
609 -webkit-border-top-right-radius: 4px;
610 -webkit-border-bottom-right-radius: 0;
611 -webkit-border-bottom-left-radius: 0;
612 -moz-border-radius-topleft: 4px;
613 -moz-border-radius-topright: 4px;
614 -moz-border-radius-bottomright: 0;
615 -moz-border-radius-bottomleft: 0;
616 border-top-left-radius: 4px;
617 border-top-right-radius: 4px;
618 border-bottom-right-radius: 0;
619 border-bottom-left-radius: 0;
620 background-color: #ffffff;
622 border-bottom: 1px solid
#f4f4f4;
627 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.header:after
,
628 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.header:after
,
629 .navbar-nav > .tasks-menu > .dropdown-menu > li.header:after {
632 border: solid transparent
;
637 pointer-events: none
;
638 border-color: rgba
(255, 255, 255, 0);
639 border-bottom-color: #ffffff;
644 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.footer
> a
,
645 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.footer
> a
,
646 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
647 -webkit-border-top-left-radius: 0px;
648 -webkit-border-top-right-radius: 0px;
649 -webkit-border-bottom-right-radius: 4px;
650 -webkit-border-bottom-left-radius: 4px;
651 -moz-border-radius-topleft: 0px;
652 -moz-border-radius-topright: 0px;
653 -moz-border-radius-bottomright: 4px;
654 -moz-border-radius-bottomleft: 4px;
655 border-top-left-radius: 0px;
656 border-top-right-radius: 0px;
657 border-bottom-right-radius: 4px;
658 border-bottom-left-radius: 4px;
660 background-color: #f4f4f4;
662 border-bottom: 1px solid
#eeeeee;
667 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.footer
> a:hover
,
668 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.footer
> a:hover
,
669 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
671 text-decoration: none
;
675 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
,
676 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.menu
,
677 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
684 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
,
685 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.menu
> li
> a
,
686 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
689 /* Prevent text from breaking */
690 border-bottom: 1px solid
#f4f4f4;
693 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a:hover
,
694 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.menu
> li
> a:hover
,
695 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
697 text-decoration: none
;
700 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
705 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > i {
709 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .glyphicon
,
710 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .fa
,
711 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
717 /* Default background and font colors */
720 /* Fallback for browsers that doesn't support rgba */
721 color: rgba
(255, 255, 255, 0.7);
724 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .glyphicon
.danger
,
725 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .fa
.danger
,
726 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.danger {
730 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .glyphicon
.warning
,
731 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .fa
.warning
,
732 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.warning {
736 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .glyphicon
.success
,
737 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .fa
.success
,
738 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.success {
742 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .glyphicon
.info
,
743 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.menu
> li
> a
> .fa
.info
,
744 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.info {
748 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
751 padding: 10px 5px 10px 5px;
752 -webkit-border-radius: 4px;
753 -moz-border-radius: 4px;
757 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
758 margin: auto
10px auto auto
;
761 border: 1px solid
#dddddd;
764 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
771 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
777 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
783 .navbar-nav
> .messages-menu
> .dropdown-menu
> li
.menu
> li
> a:before
,
784 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
789 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
793 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
797 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
804 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
809 .navbar-nav > .user-menu > .dropdown-menu {
810 -webkit-border-radius: 0;
811 -moz-border-radius: 0;
818 .navbar-nav > .user-menu > .dropdown-menu:after {
821 border: solid transparent
;
826 pointer-events: none
;
827 border-color: rgba
(255, 255, 255, 0);
828 border-bottom-color: #f9fafc;
833 .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
840 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
845 border-color: transparent
;
846 border-color: rgba
(255, 255, 255, 0.2);
849 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
852 color: rgba
(255, 255, 255, 0.8);
854 text-shadow: 2px 2px 3px #333333;
858 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
863 .navbar-nav > .user-menu > .dropdown-menu > li.user-body {
865 border-bottom: 1px solid
#f4f4f4;
866 border-top: 1px solid
#dddddd;
869 .navbar-nav
> .user-menu
> .dropdown-menu
> li
.user-body:before
,
870 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
875 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
879 .navbar-nav > .user-menu > .dropdown-menu > li.user-body > div > a {
883 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
884 background-color: #f9f9f9;
888 .navbar-nav
> .user-menu
> .dropdown-menu
> li
.user-footer:before
,
889 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
894 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
898 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-secondary {
902 /* Add fade animation to dropdown menus */
903 .open > .dropdown-menu {
904 animation-name: fadeAnimation
;
905 animation-duration: .7s;
906 animation-iteration-count: 1;
907 animation-timing-function: ease
;
908 animation-fill-mode: forwards
;
909 -webkit-animation-name: fadeAnimation
;
910 -webkit-animation-duration: .7s;
911 -webkit-animation-iteration-count: 1;
912 -webkit-animation-timing-function: ease
;
913 -webkit-animation-fill-mode: forwards
;
914 -moz-animation-name: fadeAnimation
;
915 -moz-animation-duration: .7s;
916 -moz-animation-iteration-count: 1;
917 -moz-animation-timing-function: ease
;
918 -moz-animation-fill-mode: forwards
;
921 @keyframes fadeAnimation
{
933 @-webkit-keyframes fadeAnimation
{
945 /* Fix dropdown menu for small screens to display correctly on small screens */
946 @media screen and
(max-width: 767px) {
948 .navbar-nav
> .notifications-menu
> .dropdown-menu
,
949 .navbar-nav
> .user-menu
> .dropdown-menu
,
950 .navbar-nav
> .tasks-menu
> .dropdown-menu
,
951 .navbar-nav > .messages-menu > .dropdown-menu {
956 border-right: 1px solid
#dddddd;
957 border-bottom: 1px solid
#dddddd;
958 border-left: 1px solid
#dddddd;
963 /* Fix menu positions on xs screens to appear correctly and fully */
964 @media screen and
(max-width: 480px) {
966 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.header
,
967 .navbar-nav
> .tasks-menu
> .dropdown-menu
> li
.header
,
968 .navbar-nav > .messages-menu > .dropdown-menu > li.header {
969 /* Remove arrow from the top */
972 .navbar-nav
> .notifications-menu
> .dropdown-menu
> li
.header:after
,
973 .navbar-nav
> .tasks-menu
> .dropdown-menu
> li
.header:after
,
974 .navbar-nav > .messages-menu > .dropdown-menu > li.header:after {
975 border-width: 0px !important
;
978 .navbar-nav > .tasks-menu > .dropdown-menu {
984 .navbar-nav > .notifications-menu > .dropdown-menu {
990 .navbar-nav > .messages-menu > .dropdown-menu {
998 All form elements including input, select, textarea etc.
999 -----------------------------------------------------------------
1002 -webkit-border-radius: 3px !important
;
1003 -moz-border-radius: 3px !important
;
1004 border-radius: 3px !important
;
1009 .form-control:focus {
1010 border-color: #3c8dbc !important
;
1014 .form-group.has-success label {
1018 .form-group.has-success .form-control {
1019 border-color: #00a65a !important
;
1023 .form-group.has-warning label {
1027 .form-group.has-warning .form-control {
1028 border-color: #f39c12 !important
;
1032 .form-group.has-error label {
1036 .form-group.has-error .form-control {
1037 border-color: #f56954 !important
;
1042 .input-group .input-group-addon {
1044 background-color: #f4f4f4;
1048 .btn-group-vertical
.btn
.btn-flat:first-of-type
,
1049 .btn-group-vertical .btn.btn-flat:last-of-type {
1053 /* Checkbox and radio inputs */
1056 /*padding-left: 0;*/
1060 Compenent: Progress bars
1061 --------------------------------
1063 /* size variation */
1073 .progress.vertical {
1077 display: inline-block
;
1081 .progress.vertical > .progress-bar {
1082 width: 100% !important
;
1087 .progress.vertical.sm {
1091 .progress.vertical.xs {
1095 /* Remove margins from progress bars when put in a table */
1096 .table tr > td .progress {
1100 .progress-bar-light-blue
,
1101 .progress-bar-primary {
1102 background-color: #3c8dbc;
1105 .progress-striped
.progress-bar-light-blue
,
1106 .progress-striped .progress-bar-primary {
1107 background-image: -webkit-gradient
(linear
, 0 100%, 100% 0, color-stop
(0.25, rgba
(255, 255, 255, 0.15)), color-stop
(0.25, transparent
), color-stop
(0.5, transparent
), color-stop
(0.5, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, transparent
), to
(transparent
));
1108 background-image: -webkit-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1109 background-image: -moz-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1110 background-image: linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1113 .progress-bar-green
,
1114 .progress-bar-success {
1115 background-color: #00a65a;
1118 .progress-striped
.progress-bar-green
,
1119 .progress-striped .progress-bar-success {
1120 background-image: -webkit-gradient
(linear
, 0 100%, 100% 0, color-stop
(0.25, rgba
(255, 255, 255, 0.15)), color-stop
(0.25, transparent
), color-stop
(0.5, transparent
), color-stop
(0.5, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, transparent
), to
(transparent
));
1121 background-image: -webkit-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1122 background-image: -moz-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1123 background-image: linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1127 .progress-bar-info {
1128 background-color: #00c0ef;
1131 .progress-striped
.progress-bar-aqua
,
1132 .progress-striped .progress-bar-info {
1133 background-image: -webkit-gradient
(linear
, 0 100%, 100% 0, color-stop
(0.25, rgba
(255, 255, 255, 0.15)), color-stop
(0.25, transparent
), color-stop
(0.5, transparent
), color-stop
(0.5, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, transparent
), to
(transparent
));
1134 background-image: -webkit-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1135 background-image: -moz-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1136 background-image: linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1139 .progress-bar-yellow
,
1140 .progress-bar-warning {
1141 background-color: #f39c12;
1144 .progress-striped
.progress-bar-yellow
,
1145 .progress-striped .progress-bar-warning {
1146 background-image: -webkit-gradient
(linear
, 0 100%, 100% 0, color-stop
(0.25, rgba
(255, 255, 255, 0.15)), color-stop
(0.25, transparent
), color-stop
(0.5, transparent
), color-stop
(0.5, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, transparent
), to
(transparent
));
1147 background-image: -webkit-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1148 background-image: -moz-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1149 background-image: linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1153 .progress-bar-danger {
1154 background-color: #f56954;
1157 .progress-striped
.progress-bar-red
,
1158 .progress-striped .progress-bar-danger {
1159 background-image: -webkit-gradient
(linear
, 0 100%, 100% 0, color-stop
(0.25, rgba
(255, 255, 255, 0.15)), color-stop
(0.25, transparent
), color-stop
(0.5, transparent
), color-stop
(0.5, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, rgba
(255, 255, 255, 0.15)), color-stop
(0.75, transparent
), to
(transparent
));
1160 background-image: -webkit-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1161 background-image: -moz-linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1162 background-image: linear-gradient
(45deg, rgba
(255, 255, 255, 0.15) 25%, transparent
25%, transparent
50%, rgba
(255, 255, 255, 0.15) 50%, rgba
(255, 255, 255, 0.15) 75%, transparent
75%, transparent
);
1166 Component: Small boxes
1171 -webkit-border-radius: 2px;
1172 -moz-border-radius: 2px;
1174 margin-bottom: 15px;
1177 .small-box > .inner {
1181 .small-box > .small-box-footer {
1186 color: rgba
(255, 255, 255, 0.8);
1189 background: rgba
(0, 0, 0, 0.1);
1190 text-decoration: none
;
1193 .small-box > .small-box-footer:hover {
1195 background: rgba
(0, 0, 0, 0.15);
1202 white-space: nowrap
;
1210 .small-box p > small {
1229 color: rgba
(0, 0, 0, 0.15);
1233 text-decoration: none
;
1237 .small-box:hover .icon {
1238 /*animation-name: tansformAnimation;
1239 animation-duration: .5s;
1240 animation-iteration-count: 1;
1241 animation-timing-function: ease;
1242 animation-fill-mode: forwards;
1243 -webkit-animation-name: tansformAnimation;
1244 -webkit-animation-duration: .5s;
1245 -webkit-animation-iteration-count: 1;
1246 -webkit-animation-timing-function: ease;
1247 -webkit-animation-fill-mode: forwards;
1248 -moz-animation-name: tansformAnimation;
1249 -moz-animation-duration: .5s;
1250 -moz-animation-iteration-count: 1;
1251 -moz-animation-timing-function: ease;
1252 -moz-animation-fill-mode: forwards;*/
1255 @keyframes tansformAnimation
{
1265 @-webkit-keyframes tansformAnimation
{
1275 @media screen and
(max-width: 480px) {
1291 -------------------------
1295 background: #ffffff;
1296 /*border-top: 2px solid #c1c1c1;*/
1297 margin-bottom: 20px;
1298 -webkit-border-radius: 3px;
1299 -moz-border-radius: 3px;
1302 /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
1306 border-top-color: #3c8dbc;
1310 border-top-color: #00c0ef;
1314 border-top-color: #f56954;
1318 border-top-color: #f39c12;
1322 border-top-color: #00a65a;
1325 .box.height-control .box-body {
1332 -webkit-border-top-left-radius: 3px;
1333 -webkit-border-top-right-radius: 3px;
1334 -webkit-border-bottom-right-radius: 0;
1335 -webkit-border-bottom-left-radius: 0;
1336 -moz-border-radius-topleft: 3px;
1337 -moz-border-radius-topright: 3px;
1338 -moz-border-radius-bottomright: 0;
1339 -moz-border-radius-bottomleft: 0;
1340 border-top-left-radius: 3px;
1341 border-top-right-radius: 3px;
1342 border-bottom-right-radius: 0;
1343 border-bottom-left-radius: 0;
1344 border-bottom: 0px solid
#f4f4f4;
1348 .box
.box-header:before
,
1349 .box .box-header:after {
1354 .box .box-header:after {
1358 .box
.box-header
> .fa
,
1359 .box
.box-header
> .glyphicon
,
1360 .box
.box-header
> .ion
,
1361 .box .box-header .box-title {
1362 display: inline-block
;
1363 padding: 10px 10px 10px 10px;
1371 .box .box-header a {
1375 .box .box-header > .box-tools {
1376 padding: 5px 10px 5px 5px;
1381 -webkit-border-top-left-radius: 0;
1382 -webkit-border-top-right-radius: 0;
1383 -webkit-border-bottom-right-radius: 3px;
1384 -webkit-border-bottom-left-radius: 3px;
1385 -moz-border-radius-topleft: 0;
1386 -moz-border-radius-topright: 0;
1387 -moz-border-radius-bottomright: 3px;
1388 -moz-border-radius-bottomleft: 3px;
1389 border-top-left-radius: 0;
1390 border-top-right-radius: 0;
1391 border-bottom-right-radius: 3px;
1392 border-bottom-left-radius: 3px;
1395 .box
.box-body
> table
,
1396 .box .box-body > .table {
1400 .box .box-body.chart-responsive {
1405 .box .box-body > .chart {
1411 .box
.box-body
> .chart svg
,
1412 .box .box-body > .chart canvas {
1413 width: 100% !important
;
1416 .box .box-body .fc {
1420 .box .box-body .fc-header-title h2 {
1427 .box .box-body .fc-header-right {
1428 padding-right: 10px;
1431 .box .box-body .fc-header-left {
1435 .box .box-body .fc-widget-header {
1436 background: #fafafa;
1437 box-shadow: inset
0px -3px 1px rgba
(0, 0, 0, 0.02);
1440 .box .box-body .fc-grid {
1445 .box
.box-body
.fc-widget-header:first-of-type
,
1446 .box .box-body .fc-widget-content:first-of-type {
1451 .box
.box-body
.fc-widget-header:last-of-type
,
1452 .box .box-body .fc-widget-content:last-of-type {
1456 .box .box-body .table {
1460 .box .box-body .full-width-chart {
1464 .box .box-body.no-padding .full-width-chart {
1469 border-top: 1px solid
#f4f4f4;
1470 -webkit-border-top-left-radius: 0;
1471 -webkit-border-top-right-radius: 0;
1472 -webkit-border-bottom-right-radius: 3px;
1473 -webkit-border-bottom-left-radius: 3px;
1474 -moz-border-radius-topleft: 0;
1475 -moz-border-radius-topright: 0;
1476 -moz-border-radius-bottomright: 3px;
1477 -moz-border-radius-bottomleft: 3px;
1478 border-top-left-radius: 0;
1479 border-top-right-radius: 0;
1480 border-bottom-right-radius: 3px;
1481 border-bottom-left-radius: 3px;
1483 background-color: #ffffff;
1490 .box.box-solid > .box-header {
1491 padding-bottom: 0px !important
;
1494 .box.box-solid > .box-header .btn.btn-secondary {
1495 background: transparent
;
1498 .box.box-solid.box-primary > .box-header {
1500 background: #3c8dbc;
1501 background-color: #3c8dbc;
1504 .box.box-solid.box-primary > .box-header a {
1508 .box.box-solid.box-info > .box-header {
1510 background: #00c0ef;
1511 background-color: #00c0ef;
1514 .box.box-solid.box-info > .box-header a {
1518 .box.box-solid.box-danger > .box-header {
1520 background: #f56954;
1521 background-color: #f56954;
1524 .box.box-solid.box-danger > .box-header a {
1528 .box.box-solid.box-warning > .box-header {
1530 background: #f39c12;
1531 background-color: #f39c12;
1534 .box.box-solid.box-warning > .box-header a {
1538 .box.box-solid.box-success > .box-header {
1540 background: #00a65a;
1541 background-color: #00a65a;
1544 .box.box-solid.box-success > .box-header a {
1548 .box.box-solid > .box-header > .box-tools .btn {
1553 .box.box-solid.collapsed-box .box-header {
1554 -webkit-border-radius: 3px;
1555 -moz-border-radius: 3px;
1559 .box.box-solid[class*='bg'] > .box-header {
1563 .box .box-group > .box {
1572 margin-bottom: 0.3em;
1581 .box .todo-list > li {
1582 -webkit-border-radius: 2px;
1583 -moz-border-radius: 2px;
1586 background: #f3f4f5;
1588 border-left: 2px solid
#e6e7e8;
1592 .box .todo-list > li:last-of-type {
1596 .box .todo-list > li.danger {
1597 border-left-color: #f56954;
1600 .box .todo-list > li.warning {
1601 border-left-color: #f39c12;
1604 .box .todo-list > li.info {
1605 border-left-color: #00c0ef;
1608 .box .todo-list > li.success {
1609 border-left-color: #00a65a;
1612 .box .todo-list > li.primary {
1613 border-left-color: #3c8dbc;
1616 .box .todo-list > li > input[type='checkbox'] {
1617 margin: 0 10px 0 5px;
1620 .box .todo-list > li .text {
1621 display: inline-block
;
1626 .box .todo-list > li .label {
1631 .box .todo-list > li .tools {
1637 .box
.todo-list
> li
.tools
> .fa
,
1638 .box
.todo-list
> li
.tools
> .glyphicon
,
1639 .box .todo-list > li .tools > .ion {
1644 .box .todo-list > li:hover .tools {
1645 display: inline-block
;
1648 .box .todo-list > li.done {
1652 .box .todo-list > li.done .text {
1653 text-decoration: line-through
;
1657 .box .todo-list > li.done .label {
1658 background: #eaeaec !important
;
1661 .box .todo-list .handle {
1662 display: inline-block
;
1668 .box > .loading-img {
1678 background: rgba
(255, 255, 255, 0.7);
1681 .box > .overlay.dark {
1682 background: rgba
(0, 0, 0, 0.5);
1685 .box > .loading-img {
1687 background: transparent url
('../img/ajax-loader1.gif') 50% 50% no-repeat
;
1694 .nav.nav-pills > li > a {
1695 border-top: 3px solid transparent
;
1696 -webkit-border-radius: 0;
1697 -moz-border-radius: 0;
1702 .nav
.nav-pills
> li
> a
> .fa
,
1703 .nav
.nav-pills
> li
> a
> .glyphicon
,
1704 .nav.nav-pills > li > a > .ion {
1708 .nav
.nav-pills
> li
.active
> a
,
1709 .nav.nav-pills > li.active > a:hover {
1710 background-color: #f6f6f6;
1711 border-top-color: #3c8dbc;
1715 .nav.nav-pills > li.active > a {
1719 .nav.nav-pills > li > a:hover {
1720 background-color: #f6f6f6;
1723 .nav.nav-pills.nav-stacked > li > a {
1725 border-left: 3px solid transparent
;
1726 -webkit-border-radius: 0;
1727 -moz-border-radius: 0;
1732 .nav.nav-pills.nav-stacked > li > a:hover {
1733 background-color: #f6f6f6;
1734 border-left-color: #3c8dbc;
1737 .nav
.nav-pills
.nav-stacked
> li
.active
> a
,
1738 .nav.nav-pills.nav-stacked > li.active > a:hover {
1739 background-color: #f6f6f6;
1740 border-left-color: #3c8dbc;
1744 .nav.nav-pills.nav-stacked > li.header {
1745 border-bottom: 1px solid
#ddd;
1747 margin-bottom: 10px;
1749 text-transform: uppercase
;
1754 margin-bottom: 20px;
1756 /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
1759 .nav-tabs-custom > .nav-tabs {
1761 border-bottom-color: #f4f4f4;
1764 .nav-tabs-custom > .nav-tabs > li {
1765 border-top: 3px solid transparent
;
1766 margin-bottom: -2px;
1770 .nav-tabs-custom > .nav-tabs > li > a {
1771 -webkit-border-radius: 0 !important
;
1772 -moz-border-radius: 0 !important
;
1773 border-radius: 0 !important
;
1776 .nav-tabs-custom
> .nav-tabs
> li
> a
,
1777 .nav-tabs-custom > .nav-tabs > li > a:hover {
1778 background: transparent
;
1782 .nav-tabs-custom
> .nav-tabs
> li:not
(.active
) > a:hover
,
1783 .nav-tabs-custom
> .nav-tabs
> li:not
(.active
) > a:focus
,
1784 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
1785 border-color: transparent
;
1788 .nav-tabs-custom > .nav-tabs > li.active {
1789 border-top-color: #3c8dbc;
1792 .nav-tabs-custom
> .nav-tabs
> li
.active
> a
,
1793 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
1794 background-color: #fff;
1797 .nav-tabs-custom > .nav-tabs > li.active > a {
1799 border-left-color: #f4f4f4;
1800 border-right-color: #f4f4f4;
1803 .nav-tabs-custom > .nav-tabs > li:first-of-type {
1807 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
1808 border-left-width: 0;
1811 .nav-tabs-custom > .nav-tabs.float-right {
1812 float: none
!important
;
1815 .nav-tabs-custom > .nav-tabs.float-right > li {
1819 .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type {
1823 .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type.active > a {
1824 border-left-width: 1px;
1825 border-right-width: 0px;
1828 .nav-tabs-custom > .nav-tabs > li.header {
1837 .nav-tabs-custom
> .nav-tabs
> li
.header
> .fa
,
1838 .nav-tabs-custom
> .nav-tabs
> li
.header
> .glyphicon
,
1839 .nav-tabs-custom > .nav-tabs > li.header > .ion {
1843 .nav-tabs-custom > .tab-content {
1848 /* Nav tabs bottom */
1849 .tabs-bottom.nav-3 li a {
1850 width: 3333.33333333% !important
;
1858 .pagination > li > a {
1859 background: #fafafa;
1861 /*-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
1862 -moz-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
1863 box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);*/
1866 .pagination
> li:first-of-type a
,
1867 .pagination > li:last-of-type a {
1868 -webkit-border-radius: 2px;
1869 -moz-border-radius: 2px;
1877 display: table-cell
;
1881 vertical-align: top
;
1884 .mailbox .table-mailbox {
1885 border-left: 1px solid
#ddd;
1886 border-right: 1px solid
#ddd;
1887 border-bottom: 1px solid
#ddd;
1890 .mailbox .table-mailbox tr.unread > td {
1891 background-color: rgba
(0, 0, 0, 0.05);
1896 .mailbox
.table-mailbox tr
> td
> .fa
.fa-star
,
1897 .mailbox
.table-mailbox tr
> td
> .fa
.fa-star-o
,
1898 .mailbox
.table-mailbox tr
> td
> .glyphicon
.glyphicon-star
,
1899 .mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star-empty {
1904 .mailbox .table-mailbox tr > td.small-col {
1908 .mailbox .table-mailbox tr > td.name {
1913 .mailbox .table-mailbox tr > td.time {
1918 .mailbox .table-mailbox tr > td {
1919 white-space: nowrap
;
1922 .mailbox .table-mailbox tr > td > a {
1926 @media screen and
(max-width: 767px) {
1927 .mailbox .nav-stacked > li:not(.header) {
1932 .mailbox .nav-stacked > li:not(.header).header {
1933 border: 0 !important
;
1936 .mailbox .search-form {
1951 /* skin-blue navbar */
1952 .skin-blue .navbar {
1953 background-color: #d3e7f0;
1957 .skin-blue .navbar .nav a {
1958 color: rgba
(0, 0, 0, 0.8);
1959 /* rgba(255, 255, 255, 0.8); */
1962 .skin-blue
.navbar
.nav
> li
> a:hover
,
1963 .skin-blue
.navbar
.nav
> li
> a:active
,
1964 .skin-blue
.navbar
.nav
> li
> a:focus
,
1965 .skin-blue
.navbar
.nav
.open
> a
,
1966 .skin-blue
.navbar
.nav
.open
> a:hover
,
1967 .skin-blue .navbar .nav .open > a:focus {
1968 background: rgba
(0, 0, 0, 0.1);
1972 .skin-blue .navbar .navbar-right > .nav {
1976 .skin-blue .navbar .sidebar-toggle .icon-bar {
1977 background: rgba
(255, 255, 255, 0.8);
1980 .skin-blue .navbar .sidebar-toggle:hover .icon-bar {
1981 background: #f6f6f6 !important
;
1984 /* skin-blue logo */
1986 background-color: #367fa9;
1990 .skin-blue .logo > a {
1994 .skin-blue .logo:hover {
1999 /* skin-blue content header */
2000 .skin-blue .right-side > .content-header {
2001 background: #fbfbfb;
2002 box-shadow: 1px 1px 2px rgba
(0, 0, 0, 0.1);
2005 /* Skin-blue user panel */
2006 .skin-blue .user-panel > .image > img {
2007 border: 1px solid
#dfdfdf;
2010 .skin-blue
.user-panel
> .info
,
2011 .skin-blue .user-panel > .info > a {
2015 /* skin-blue sidebar */
2016 .skin-blue .sidebar {
2017 background: #d3e7f0;
2018 border-bottom: 1px solid
#fff;
2021 .skin-blue .sidebar > .sidebar-menu > li {
2022 border-top: 1px solid
#fff;
2023 border-bottom: 1px solid
#dbdbdb;
2026 .skin-blue .sidebar > .sidebar-menu > li:first-of-type {
2027 border-top: 1px solid
#dbdbdb;
2030 .skin-blue .sidebar > .sidebar-menu > li:first-of-type > a {
2031 border-top: 1px solid
#fff;
2034 .skin-blue .sidebar > .sidebar-menu > li > a {
2038 .skin-blue
.sidebar
> .sidebar-menu
> li
> a:hover
,
2039 .skin-blue .sidebar > .sidebar-menu > li.active > a {
2041 background: #f9f9f9;
2044 .skin-blue .sidebar > .sidebar-menu > li > .treeview-menu {
2046 background: #f9f9f9;
2049 .skin-blue .left-side {
2050 background: #d3e7f0;
2053 -webkit-box-shadow: inset
-3px 0px 8px -4px rgba
(0, 0, 0, 0.1);
2054 -moz-box-shadow: inset
-3px 0px 8px -4px rgba
(0, 0, 0, 0.1);
2055 box-shadow: inset
-3px 0px 8px -4px rgba
(0, 0, 0, 0.07);
2058 .skin-blue .sidebar a {
2062 .skin-blue .sidebar a:hover {
2063 text-decoration: none
;
2066 .skin-blue .treeview-menu > li > a {
2070 .skin-blue
.treeview-menu
> li
.active
> a
,
2071 .skin-blue .treeview-menu > li > a:hover {
2075 .skin-blue .sidebar-form {
2076 -webkit-border-radius: 2px;
2077 -moz-border-radius: 2px;
2079 border: 1px solid
#dbdbdb;
2083 .skin-blue
.sidebar-form input
[type
="text"],
2084 .skin-blue .sidebar-form .btn {
2086 background-color: #fafafa;
2087 border: 1px solid
#fafafa;
2091 .skin-blue .sidebar-form input[type="text"] {
2093 -webkit-border-top-left-radius: 2px !important
;
2094 -webkit-border-top-right-radius: 0 !important
;
2095 -webkit-border-bottom-right-radius: 0 !important
;
2096 -webkit-border-bottom-left-radius: 2px !important
;
2097 -moz-border-radius-topleft: 2px !important
;
2098 -moz-border-radius-topright: 0 !important
;
2099 -moz-border-radius-bottomright: 0 !important
;
2100 -moz-border-radius-bottomleft: 2px !important
;
2101 border-top-left-radius: 2px !important
;
2102 border-top-right-radius: 0 !important
;
2103 border-bottom-right-radius: 0 !important
;
2104 border-bottom-left-radius: 2px !important
;
2107 .skin-blue
.sidebar-form input
[type
="text"]:focus
,
2108 .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
2109 background-color: #fff;
2113 .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
2114 border-left-color: #fff;
2117 .skin-blue .sidebar-form .btn {
2119 -webkit-border-top-left-radius: 0 !important
;
2120 -webkit-border-top-right-radius: 2px !important
;
2121 -webkit-border-bottom-right-radius: 2px !important
;
2122 -webkit-border-bottom-left-radius: 0 !important
;
2123 -moz-border-radius-topleft: 0 !important
;
2124 -moz-border-radius-topright: 2px !important
;
2125 -moz-border-radius-bottomright: 2px !important
;
2126 -moz-border-radius-bottomleft: 0 !important
;
2127 border-top-left-radius: 0 !important
;
2128 border-top-right-radius: 2px !important
;
2129 border-bottom-right-radius: 2px !important
;
2130 border-bottom-left-radius: 0 !important
;
2148 border-bottom: 1px solid
#eee;
2149 background-color: #FAFAFA;
2152 .card .card-header {
2155 text-transform: capitalize
;
2163 border: medium none
;
2165 margin: -10px -15px -15px;
2168 .card-header
.nav
> li
> a
,
2169 .card-header
.nav
> li
.active
> a
,
2170 .card-header
.nav
> li
.active
> a:hover
,
2171 .card-header .nav > li.active > a:focus {
2176 .card-header .nav > li > a {
2180 .card-header
.nav
> li
.active
> a
,
2181 .card-header .nav > li > a:hover {
2186 .card-header
.nav
> li:first-child
.active
> a
,
2187 .card-header .nav > li:first-child > a:hover {
2188 border-radius: 0px 0 0 0;
2189 -webkit-border-radius: 0px 0 0 0;
2190 /*border: 1px solid #eee;*/
2198 .dropdown-menu.dropdown-custom > li {
2203 .dropdown-menu li:first-child.dropdown-header {
2205 border-top-left-radius: 3px;
2206 border-top-right-radius: 3px;
2209 li
.dropdown-header
{
2212 background-color: #f9fafc;
2213 border-top: 1px solid
#eaedf1;
2214 border-bottom: 1px solid
#eaedf1;
2217 .dropdown-menu .divider {
2219 padding: 0 !important
;
2220 background-color: #f0f0f0;
2223 .dropdown-menu.dropdown-custom > li > a {
2227 .dropdown-menu > li > a {
2231 .dropdown-menu.dropdown-custom > li > a:hover {
2235 .dropdown-menu.dropdown-custom {
2239 .horizontal .dropdown-menu > li > a {
2243 .horizontal .dropdown-menu > li > a:hover {
2244 background-color: #eee;