├── index.html ├── assets ├── img │ ├── mask.png │ ├── favicon.ico │ ├── new_logo.png │ ├── apple-icon.png │ ├── sidebar-1.jpg │ ├── sidebar-2.jpg │ ├── sidebar-3.jpg │ ├── sidebar-4.jpg │ ├── sidebar-5.jpg │ ├── tim_80x80.png │ ├── faces │ │ ├── face-0.jpg │ │ ├── face-1.jpg │ │ ├── face-2.jpg │ │ ├── face-3.jpg │ │ ├── face-4.jpg │ │ ├── face-5.jpg │ │ ├── face-6.jpg │ │ ├── face-7.jpg │ │ └── tim_vector.jpe │ ├── default-avatar.png │ ├── full-screen-image-3.jpg │ └── loading-bubbles.svg ├── sass │ ├── lbd │ │ ├── mixins │ │ │ ├── _tabs.scss │ │ │ ├── _cards.scss │ │ │ ├── _navbars.scss │ │ │ ├── _icons.scss │ │ │ ├── _inputs.scss │ │ │ ├── _transparency.scss │ │ │ ├── _labels.scss │ │ │ ├── _social-buttons.scss │ │ │ ├── _morphing-buttons.scss │ │ │ ├── _buttons.scss │ │ │ ├── _chartist.scss │ │ │ └── _vendor-prefixes.scss │ │ ├── _mixins.scss │ │ ├── _tables.scss │ │ ├── _footers.scss │ │ ├── _alerts.scss │ │ ├── _typography.scss │ │ ├── _misc.scss │ │ ├── _bootstrap-switch.scss │ │ ├── _dropdown.scss │ │ ├── _buttons.scss │ │ ├── _checkbox-radio-switch.scss │ │ ├── _inputs.scss │ │ ├── plugins │ │ │ └── _animate.scss │ │ ├── _cards.scss │ │ ├── _chartist.scss │ │ └── _variables.scss │ └── light-bootstrap-dashboard.scss ├── fonts │ ├── nucleo-icons.eot │ ├── nucleo-icons.ttf │ ├── nucleo-icons.woff │ └── nucleo-icons.woff2 └── js │ └── light-bootstrap-dashboard.js ├── BS3 ├── assets │ ├── img │ │ ├── mask.png │ │ ├── favicon.ico │ │ ├── new_logo.png │ │ ├── sidebar-1.jpg │ │ ├── sidebar-2.jpg │ │ ├── sidebar-3.jpg │ │ ├── sidebar-4.jpg │ │ ├── sidebar-5.jpg │ │ ├── tim_80x80.png │ │ ├── faces │ │ │ ├── face-0.jpg │ │ │ ├── face-1.jpg │ │ │ ├── face-2.jpg │ │ │ ├── face-3.jpg │ │ │ ├── face-4.jpg │ │ │ ├── face-5.jpg │ │ │ ├── face-6.jpg │ │ │ ├── face-7.jpg │ │ │ └── tim_vector.jpe │ │ ├── default-avatar.png │ │ ├── full-screen-image-3.jpg │ │ └── loading-bubbles.svg │ ├── sass │ │ ├── lbd │ │ │ ├── mixins │ │ │ │ ├── _tabs.scss │ │ │ │ ├── _cards.scss │ │ │ │ ├── _navbars.scss │ │ │ │ ├── _icons.scss │ │ │ │ ├── _inputs.scss │ │ │ │ ├── _transparency.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _social-buttons.scss │ │ │ │ ├── _morphing-buttons.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _chartist.scss │ │ │ │ └── _vendor-prefixes.scss │ │ │ ├── _mixins.scss │ │ │ ├── _tables.scss │ │ │ ├── _misc.scss │ │ │ ├── _footers.scss │ │ │ ├── _alerts.scss │ │ │ ├── _typography.scss │ │ │ ├── _buttons.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _inputs.scss │ │ │ ├── _cards.scss │ │ │ ├── _sidebar-and-main-panel.scss │ │ │ ├── _chartist.scss │ │ │ └── _navbars.scss │ │ └── light-bootstrap-dashboard.scss │ ├── fonts │ │ ├── Pe-icon-7-stroke.eot │ │ ├── Pe-icon-7-stroke.ttf │ │ └── Pe-icon-7-stroke.woff │ ├── css │ │ └── demo.css │ └── js │ │ └── light-bootstrap-dashboard.js ├── LICENSE.md ├── CHANGELOG.md ├── README.md ├── documentation │ ├── css │ │ └── documentation.css │ └── tutorial-components.html ├── template.html └── maps.html ├── genezio.yaml ├── ISSUE_TEMPLATE.md ├── LICENSE ├── .github └── workflows │ └── main.yml ├── CHANGELOG.md ├── README.md └── documentation └── tutorial-components.html /index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/mask.png -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color){ 2 | border: 1px solid $color; 3 | color: $color; 4 | } -------------------------------------------------------------------------------- /BS3/assets/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/mask.png -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color){ 2 | border: 1px solid $color; 3 | color: $color; 4 | } -------------------------------------------------------------------------------- /assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/favicon.ico -------------------------------------------------------------------------------- /assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/new_logo.png -------------------------------------------------------------------------------- /BS3/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/favicon.ico -------------------------------------------------------------------------------- /assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/apple-icon.png -------------------------------------------------------------------------------- /assets/img/sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/sidebar-1.jpg -------------------------------------------------------------------------------- /assets/img/sidebar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/sidebar-2.jpg -------------------------------------------------------------------------------- /assets/img/sidebar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/sidebar-3.jpg -------------------------------------------------------------------------------- /assets/img/sidebar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/sidebar-4.jpg -------------------------------------------------------------------------------- /assets/img/sidebar-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/sidebar-5.jpg -------------------------------------------------------------------------------- /assets/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/tim_80x80.png -------------------------------------------------------------------------------- /BS3/assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/new_logo.png -------------------------------------------------------------------------------- /BS3/assets/img/sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/sidebar-1.jpg -------------------------------------------------------------------------------- /BS3/assets/img/sidebar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/sidebar-2.jpg -------------------------------------------------------------------------------- /BS3/assets/img/sidebar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/sidebar-3.jpg -------------------------------------------------------------------------------- /BS3/assets/img/sidebar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/sidebar-4.jpg -------------------------------------------------------------------------------- /BS3/assets/img/sidebar-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/sidebar-5.jpg -------------------------------------------------------------------------------- /BS3/assets/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/tim_80x80.png -------------------------------------------------------------------------------- /assets/img/faces/face-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-0.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-1.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-2.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-3.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-4.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-5.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-6.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/face-7.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-0.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-1.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-2.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-3.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-4.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-5.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-6.jpg -------------------------------------------------------------------------------- /BS3/assets/img/faces/face-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/face-7.jpg -------------------------------------------------------------------------------- /assets/fonts/nucleo-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/fonts/nucleo-icons.eot -------------------------------------------------------------------------------- /assets/fonts/nucleo-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/fonts/nucleo-icons.ttf -------------------------------------------------------------------------------- /assets/fonts/nucleo-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/fonts/nucleo-icons.woff -------------------------------------------------------------------------------- /assets/fonts/nucleo-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/fonts/nucleo-icons.woff2 -------------------------------------------------------------------------------- /assets/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/default-avatar.png -------------------------------------------------------------------------------- /assets/img/faces/tim_vector.jpe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/faces/tim_vector.jpe -------------------------------------------------------------------------------- /BS3/assets/img/default-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/default-avatar.png -------------------------------------------------------------------------------- /BS3/assets/img/faces/tim_vector.jpe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/faces/tim_vector.jpe -------------------------------------------------------------------------------- /assets/img/full-screen-image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/assets/img/full-screen-image-3.jpg -------------------------------------------------------------------------------- /BS3/assets/fonts/Pe-icon-7-stroke.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/fonts/Pe-icon-7-stroke.eot -------------------------------------------------------------------------------- /BS3/assets/fonts/Pe-icon-7-stroke.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/fonts/Pe-icon-7-stroke.ttf -------------------------------------------------------------------------------- /BS3/assets/fonts/Pe-icon-7-stroke.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/fonts/Pe-icon-7-stroke.woff -------------------------------------------------------------------------------- /BS3/assets/img/full-screen-image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/light-bootstrap-dashboard/HEAD/BS3/assets/img/full-screen-image-3.jpg -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($color){ 2 | @if $color == #FFFFFF{ 3 | background-color: rgba($color,.91); 4 | } @else { 5 | background-color: rgba($color,.69); 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($color){ 2 | @if $color == #FFFFFF{ 3 | background-color: rgba($color,.91); 4 | } @else { 5 | background-color: rgba($color,.69); 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color){ 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item(){ 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color){ 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item(){ 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: light-bootstrap-dashboard 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: . 9 | yamlVersion: 2 -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-background ($icon-url){ 2 | background-image : url($icon-url); 3 | 4 | } 5 | 6 | @mixin icon-shape ($size, $padding, $border-radius) { 7 | height: $size; 8 | width: $size; 9 | padding: $padding; 10 | border-radius: $border-radius; 11 | display: inline-table; 12 | 13 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-background ($icon-url){ 2 | background-image : url($icon-url); 3 | 4 | } 5 | 6 | @mixin icon-shape ($size, $padding, $border-radius) { 7 | height: $size; 8 | width: $size; 9 | padding: $padding; 10 | border-radius: $border-radius; 11 | display: inline-table; 12 | 13 | } -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height){ 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin placeholder($color, $opacity){ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | 11 | @mixin light-form(){ 12 | border-radius: 0; 13 | border:0; 14 | padding: 0; 15 | background-color: transparent; 16 | 17 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height){ 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin placeholder($color, $opacity){ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | 11 | @mixin light-form(){ 12 | border-radius: 0; 13 | border:0; 14 | padding: 0; 15 | background-color: transparent; 16 | 17 | } -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /assets/sass/lbd/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | 3 | @import "mixins/transparency"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | 7 | //Components 8 | 9 | @import "mixins/buttons"; 10 | @import "mixins/inputs"; 11 | @import "mixins/labels"; 12 | @import "mixins/tabs"; 13 | 14 | @import "mixins/navbars"; 15 | @import "mixins/icons"; 16 | @import "mixins/social-buttons"; 17 | 18 | @import "mixins/morphing-buttons"; 19 | 20 | @import "mixins/cards"; 21 | 22 | @import "mixins/chartist"; -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | 3 | @import "mixins/transparency"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | 7 | //Components 8 | 9 | @import "mixins/buttons"; 10 | @import "mixins/inputs"; 11 | @import "mixins/labels"; 12 | @import "mixins/tabs"; 13 | 14 | @import "mixins/navbars"; 15 | @import "mixins/icons"; 16 | @import "mixins/social-buttons"; 17 | 18 | @import "mixins/morphing-buttons"; 19 | 20 | @import "mixins/cards"; 21 | 22 | @import "mixins/chartist"; -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style(){ 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color){ 14 | border-color: $color; 15 | color: $color; 16 | } 17 | @mixin label-color-fill($color){ 18 | border-color: $color; 19 | color: $white-color; 20 | background-color: $color; 21 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style(){ 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color){ 14 | border-color: $color; 15 | color: $color; 16 | } 17 | @mixin label-color-fill($color){ 18 | border-color: $color; 19 | color: $white-color; 20 | background-color: $color; 21 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin social-buttons-color ($color){ 2 | 3 | border-color: $color; 4 | color: $color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $color; 13 | border-color: $color; 14 | opacity: 1; 15 | } 16 | 17 | &:disabled, 18 | &[disabled], 19 | &.disabled { 20 | background-color: $transparent-bg; 21 | border-color: $color; 22 | } 23 | 24 | &.btn-fill { 25 | color: $white-color; 26 | background-color: $color; 27 | opacity: 0.9; 28 | 29 | &:hover, 30 | &:focus, 31 | &:active, 32 | &.active, 33 | .open > &.dropdown-toggle{ 34 | background-color: $color; 35 | color: $white-color; 36 | opacity: 1; 37 | } 38 | 39 | } 40 | 41 | 42 | } 43 | -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin social-buttons-color ($color){ 2 | 3 | border-color: $color; 4 | color: $color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $color; 13 | border-color: $color; 14 | opacity: 1; 15 | } 16 | 17 | &:disabled, 18 | &[disabled], 19 | &.disabled { 20 | background-color: $transparent-bg; 21 | border-color: $color; 22 | } 23 | 24 | &.btn-fill { 25 | color: $white-color; 26 | background-color: $color; 27 | opacity: 0.9; 28 | 29 | &:hover, 30 | &:focus, 31 | &:active, 32 | &.active, 33 | .open > &.dropdown-toggle{ 34 | background-color: $color; 35 | color: $white-color; 36 | opacity: 1; 37 | } 38 | 39 | } 40 | 41 | 42 | } 43 | -------------------------------------------------------------------------------- /assets/img/loading-bubbles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /BS3/assets/img/loading-bubbles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_morphing-buttons.scss: -------------------------------------------------------------------------------- 1 | $prefixes: ('', '-moz-', '-webkit-', '-ms-') !default; 2 | 3 | @mixin circle-animation(){ 4 | @for $i from 0 to length($prefixes) { 5 | @include circle-animation-details(nth($prefixes, $i + 1)); 6 | } 7 | } 8 | 9 | @mixin circle-animation-details($name){ 10 | #{$name}animation-name: spin; 11 | #{$name}animation-duration: 1250ms; 12 | #{$name}animation-iteration-count: infinite; 13 | #{$name}animation-timing-function: linear; 14 | 15 | } 16 | @keyframes spin { 17 | from { transform:rotate(0deg); } 18 | to { transform:rotate(360deg); } 19 | } 20 | 21 | @-webkit-keyframes spin { 22 | from { -webkit-transform: rotate(0deg); } 23 | to { -webkit-transform: rotate(360deg); } 24 | } 25 | 26 | @-moz-keyframes spin { 27 | from { -moz-transform: rotate(0deg); } 28 | to { -moz-transform: rotate(360deg); } 29 | } 30 | 31 | @-ms-keyframes spin { 32 | from { -ms-transform: rotate(0deg); } 33 | to { -ms-transform: rotate(360deg); } 34 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_morphing-buttons.scss: -------------------------------------------------------------------------------- 1 | $prefixes: ('', '-moz-', '-webkit-', '-ms-') !default; 2 | 3 | @mixin circle-animation(){ 4 | @for $i from 0 to length($prefixes) { 5 | @include circle-animation-details(nth($prefixes, $i + 1)); 6 | } 7 | } 8 | 9 | @mixin circle-animation-details($name){ 10 | #{$name}animation-name: spin; 11 | #{$name}animation-duration: 1250ms; 12 | #{$name}animation-iteration-count: infinite; 13 | #{$name}animation-timing-function: linear; 14 | 15 | } 16 | @keyframes spin { 17 | from { transform:rotate(0deg); } 18 | to { transform:rotate(360deg); } 19 | } 20 | 21 | @-webkit-keyframes spin { 22 | from { -webkit-transform: rotate(0deg); } 23 | to { -webkit-transform: rotate(360deg); } 24 | } 25 | 26 | @-moz-keyframes spin { 27 | from { -moz-transform: rotate(0deg); } 28 | to { -moz-transform: rotate(360deg); } 29 | } 30 | 31 | @-ms-keyframes spin { 32 | from { -ms-transform: rotate(0deg); } 33 | to { -ms-transform: rotate(360deg); } 34 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /BS3/LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /BS3/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.4.0] 2017-11-03 4 | ### Library Updates 5 | - jQuery - `3.2.1` 6 | - bootstrap - `3.3.7` 7 | - chartist - `0.11.0` 8 | 9 | ### Bug Fixing 10 | - replaced old javascript checkboxes and radios with only css checkboxes and radios 11 | - fixed responsive sidebar 12 | - small bug fixes 13 | 14 | ## [1.3.1] 2017-01-19 15 | - switched to MIT license 16 | 17 | ## [1.3] 2016-01-22 18 | ### New Template page + Video Tutorial [current version] 19 | - added the default template page + youtube video tutorial on how to create an Admin Template (link: https://www.youtube.com/watch...) 20 | 21 | ## [1.2] 2016-01-17 22 | ### New Page 23 | - for those who want to upsell inside their dashboard we added a new page "Upgrade to PRO" with a pricing and options table 24 | 25 | ## [1.1] 2015-09-08 26 | ### Bug Fixing 27 | - added company name/logo inside the sidebar for small screens 28 | - fixed bug for notification with close button on small screens 29 | - fix live preview bug for download on small screens 30 | - fix table responsive for small screens 31 | - added new labels for chartist on small screens 32 | 33 | ## [1.0] 2015-08-20 34 | ### Initial Release 35 | -------------------------------------------------------------------------------- /BS3/assets/sass/light-bootstrap-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Light Bootstrap Dashboard - v1.4.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | @import "lbd/variables"; 18 | @import "lbd/mixins"; 19 | 20 | @import "lbd/typography"; 21 | 22 | // Core CSS 23 | @import "lbd/misc"; 24 | @import "lbd/sidebar-and-main-panel"; 25 | @import "lbd/buttons"; 26 | @import "lbd/inputs"; 27 | 28 | @import "lbd/alerts"; 29 | @import "lbd/tables"; 30 | 31 | @import "lbd/checkbox-radio-switch"; 32 | @import "lbd/navbars"; 33 | @import "lbd/footers"; 34 | 35 | // Fancy Stuff 36 | @import "lbd/dropdown"; 37 | @import "lbd/cards"; 38 | @import "lbd/chartist"; 39 | @import "lbd/responsive"; 40 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/light-bootstrap-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | 3 | .radio, 4 | .checkbox{ 5 | position: relative; 6 | height: 20px; 7 | display: block; 8 | width: 20px; 9 | padding: 0px 0px; 10 | margin: 0px 5px; 11 | text-align: center; 12 | 13 | .icons{ 14 | left: 5px; 15 | } 16 | } 17 | > thead > tr > th, 18 | > tbody > tr > th, 19 | > tfoot > tr > th, 20 | > thead > tr > td, 21 | > tbody > tr > td, 22 | > tfoot > tr > td{ 23 | padding: 12px 8px; 24 | vertical-align: middle; 25 | } 26 | 27 | > thead > tr > th{ 28 | border-bottom-width: 1px; 29 | font-size: $font-size-small; 30 | text-transform: uppercase; 31 | color: $dark-gray; 32 | font-weight: $font-weight-normal; 33 | padding-bottom: 5px; 34 | } 35 | 36 | .td-actions .btn{ 37 | @include opacity(0.36); 38 | 39 | &.btn-xs{ 40 | padding-left: 3px; 41 | padding-right: 3px; 42 | } 43 | } 44 | .td-actions{ 45 | min-width: 90px; 46 | } 47 | 48 | > tbody > tr{ 49 | position: relative; 50 | 51 | &:hover{ 52 | .td-actions .btn{ 53 | @include opacity(1); 54 | } 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [2.0.0] 2017-12-11 4 | ### Major Release 5 | - update to Bootstrap 4 Beta 6 | - added new icons by Nucleo 7 | - bug fixes and improvements 8 | - code refactoring 9 | 10 | ## [1.4.0] 2017-11-02 11 | ### Library Updates 12 | - jQuery - `3.2.1` 13 | - bootstrap - `3.3.7` 14 | - chartist - `0.11.0` 15 | 16 | ### Bug Fixing 17 | - replaced old javascript checkboxes and radios with only css checkboxes and radios 18 | - fixed responsive sidebar 19 | - small bug fixes 20 | 21 | ## [1.3.1] 2017-01-19 22 | - switched to MIT license 23 | 24 | ## [1.3] 2016-01-22 25 | ### New Template page + Video Tutorial [current version] 26 | - added the default template page + youtube video tutorial on how to create an Admin Template (link: https://www.youtube.com/watch...) 27 | 28 | ## [1.2] 2016-01-17 29 | ### New Page 30 | - for those who want to upsell inside their dashboard we added a new page "Upgrade to PRO" with a pricing and options table 31 | 32 | ## [1.1] 2015-09-08 33 | ### Bug Fixing 34 | - added company name/logo inside the sidebar for small screens 35 | - fixed bug for notification with close button on small screens 36 | - fix live preview bug for download on small screens 37 | - fix table responsive for small screens 38 | - added new labels for chartist on small screens 39 | 40 | ## [1.0] 2015-08-20 41 | ### Initial Release 42 | -------------------------------------------------------------------------------- /assets/sass/light-bootstrap-dashboard.scss: -------------------------------------------------------------------------------- 1 | // ========================================================= 2 | // Light Bootstrap Dashboard - v2.0.1 3 | // ========================================================= 4 | // 5 | // Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard 6 | // Copyright 2019 Creative Tim (https://www.creative-tim.com) 7 | // Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE) 8 | // 9 | // Coded by Creative Tim 10 | // 11 | // ========================================================= 12 | // 13 | // The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | @import "lbd/variables"; 16 | @import "lbd/mixins"; 17 | 18 | @import "lbd/typography"; 19 | 20 | // Core CSS 21 | @import "lbd/misc"; 22 | @import "lbd/sidebar-and-main-panel"; 23 | @import "lbd/buttons"; 24 | @import "lbd/inputs"; 25 | 26 | @import "lbd/alerts"; 27 | @import "lbd/tables"; 28 | 29 | @import "lbd/checkbox-radio-switch"; 30 | @import "lbd/navbars"; 31 | @import "lbd/footers"; 32 | 33 | // Fancy Stuff 34 | @import "lbd/plugins/animate"; 35 | @import "lbd/dropdown"; 36 | @import "lbd/cards"; 37 | @import "lbd/chartist"; 38 | @import "lbd/responsive"; 39 | @import "lbd/bootstrap-switch"; 40 | 41 | // Nucleo Icons 42 | @import "lbd/partial-nucleo-icons"; 43 | strap-switch"; 44 | 45 | // Nucleo Icons 46 | @import "lbd/partial-nucleo-icons"; 47 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_misc.scss: -------------------------------------------------------------------------------- 1 | /* General overwrite */ 2 | body, 3 | .wrapper{ 4 | min-height: 100vh; 5 | position: relative; 6 | } 7 | 8 | body{ 9 | background: rgba(203,203,210,.15); 10 | } 11 | 12 | a{ 13 | color: $info-color; 14 | 15 | &:hover, &:focus{ 16 | color: $info-states-color; 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | a:focus, a:active, 22 | button::-moz-focus-inner, 23 | input::-moz-focus-inner, 24 | input[type="reset"]::-moz-focus-inner, 25 | input[type="button"]::-moz-focus-inner, 26 | input[type="submit"]::-moz-focus-inner, 27 | select::-moz-focus-inner, 28 | input[type="file"] > input[type="button"]::-moz-focus-inner{ 29 | outline:0; 30 | } 31 | .ui-slider-handle:focus, 32 | .navbar-toggle, 33 | input:focus { 34 | outline : 0 !important; 35 | } 36 | 37 | /* Animations */ 38 | .form-control, 39 | .input-group-addon, 40 | .tagsinput, 41 | .navbar, 42 | .navbar .alert{ 43 | @include transition($general-transition-time, $transition-linear); 44 | } 45 | 46 | .sidebar .nav a, 47 | .table > tbody > tr .td-actions .btn{ 48 | @include transition($fast-transition-time, $transition-ease-in); 49 | } 50 | 51 | .btn{ 52 | @include transition($ultra-fast-transition-time, $transition-ease-in); 53 | } 54 | .fa{ 55 | width: 18px; 56 | text-align: center; 57 | } 58 | .margin-top{ 59 | margin-top: 50px; 60 | } 61 | 62 | .wrapper{ 63 | position: relative; 64 | top: 0; 65 | height: 100vh; 66 | } 67 | -------------------------------------------------------------------------------- /BS3/assets/css/demo.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 992px){ 2 | .typo-line{ 3 | padding-left: 140px; 4 | margin-bottom: 40px; 5 | position: relative; 6 | } 7 | 8 | .typo-line .category{ 9 | transform: translateY(-50%); 10 | top: 50%; 11 | left: 0px; 12 | position: absolute; 13 | } 14 | } 15 | 16 | .all-icons [class*="pe-"]{ 17 | font-size: 40px; 18 | } 19 | .all-icons input{ 20 | border: 0; 21 | } 22 | .all-icons .font-icon-detail{ 23 | text-align: center; 24 | padding: 45px 0px 30px; 25 | border: 1px solid #e5e5e5; 26 | border-radius: 6px; 27 | margin: 15px 0; 28 | } 29 | .all-icons .font-icon-detail input{ 30 | margin: 25px auto 0; 31 | width: 100%; 32 | text-align: center; 33 | display: block; 34 | color: #aaa; 35 | font-size: 13px; 36 | } 37 | 38 | #map{ 39 | position:relative; 40 | width:100%; 41 | height: calc(100% - 60px); 42 | } 43 | 44 | .places-buttons .btn{ 45 | margin-bottom: 30px 46 | } 47 | .sidebar .nav > li.active-pro{ 48 | position: absolute; 49 | width: 100%; 50 | bottom: 10px; 51 | } 52 | .sidebar .nav > li.active-pro a{ 53 | background: rgba(255, 255, 255, 0.14); 54 | opacity: 1; 55 | color: #FFFFFF; 56 | } 57 | 58 | .table-upgrade td:nth-child(2), 59 | .table-upgrade td:nth-child(3){ 60 | text-align: center; 61 | } 62 | 63 | @media all and (max-width: 991px) { 64 | .sidebar .nav > li.active-pro{ 65 | position: initial; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | border-color: $btn-color; 4 | color: $btn-color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $btn-states-color; 13 | border-color: $btn-states-color; 14 | } 15 | 16 | &.disabled, 17 | &:disabled, 18 | &[disabled], 19 | fieldset[disabled] & { 20 | &, 21 | &:hover, 22 | &:focus, 23 | &.focus, 24 | &:active, 25 | &.active { 26 | background-color: $transparent-bg; 27 | border-color: $btn-color; 28 | } 29 | } 30 | 31 | 32 | &.btn-fill { 33 | color: $white-color; 34 | background-color: $btn-color; 35 | @include opacity(1); 36 | 37 | &:hover, 38 | &:focus, 39 | &:active, 40 | &.active, 41 | .open > &.dropdown-toggle{ 42 | background-color: $btn-states-color; 43 | color: $white-color; 44 | } 45 | 46 | .caret{ 47 | border-top-color: $white-color; 48 | } 49 | } 50 | 51 | .caret{ 52 | border-top-color: $btn-color; 53 | } 54 | } 55 | 56 | 57 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 58 | font-size: $font-size; 59 | border-radius: $border; 60 | padding: $padding-vertical $padding-horizontal; 61 | 62 | &.btn-round{ 63 | padding: $padding-vertical + 1 $padding-horizontal; 64 | } 65 | 66 | &.btn-simple{ 67 | padding: $padding-vertical + 2 $padding-horizontal; 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | border-color: $btn-color; 4 | color: $btn-color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $btn-states-color; 13 | border-color: $btn-states-color; 14 | } 15 | 16 | &.disabled, 17 | &:disabled, 18 | &[disabled], 19 | fieldset[disabled] & { 20 | &, 21 | &:hover, 22 | &:focus, 23 | &.focus, 24 | &:active, 25 | &.active { 26 | background-color: $transparent-bg; 27 | border-color: $btn-color; 28 | } 29 | } 30 | 31 | 32 | &.btn-fill { 33 | color: $white-color; 34 | background-color: $btn-color; 35 | @include opacity(1); 36 | 37 | &:hover, 38 | &:focus, 39 | &:active, 40 | &.active, 41 | .open > &.dropdown-toggle{ 42 | background-color: $btn-states-color; 43 | color: $white-color; 44 | } 45 | 46 | .caret{ 47 | border-top-color: $white-color; 48 | } 49 | } 50 | 51 | .caret{ 52 | border-top-color: $btn-color; 53 | } 54 | } 55 | 56 | 57 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 58 | font-size: $font-size; 59 | border-radius: $border; 60 | padding: $padding-vertical $padding-horizontal; 61 | 62 | &.btn-round{ 63 | padding: $padding-vertical + 1 $padding-horizontal; 64 | } 65 | 66 | &.btn-simple{ 67 | padding: $padding-vertical + 2 $padding-horizontal; 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /assets/sass/lbd/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | 3 | .radio, 4 | .checkbox{ 5 | position: relative; 6 | height: 20px; 7 | display: block; 8 | width: 20px; 9 | padding: 0px 0px; 10 | margin: 0px 5px; 11 | text-align: center; 12 | 13 | .icons{ 14 | left: 5px; 15 | } 16 | } 17 | > thead > tr > th, 18 | > tbody > tr > th, 19 | > tfoot > tr > th, 20 | > thead > tr > td, 21 | > tbody > tr > td, 22 | > tfoot > tr > td{ 23 | padding: 12px 8px; 24 | vertical-align: middle; 25 | } 26 | 27 | > thead > tr > th{ 28 | border-bottom-width: 1px; 29 | font-size: $font-size-small; 30 | text-transform: uppercase; 31 | color: $dark-gray; 32 | font-weight: $font-weight-normal; 33 | padding-bottom: 5px; 34 | border-top: none !important; 35 | border-bottom: none; 36 | text-align: left !important; 37 | } 38 | 39 | .td-actions .btn{ 40 | @include opacity(0.36); 41 | 42 | &.btn-xs{ 43 | padding-left: 3px; 44 | padding-right: 3px; 45 | } 46 | } 47 | .td-actions{ 48 | min-width: 90px; 49 | } 50 | 51 | > tbody > tr{ 52 | position: relative; 53 | 54 | &:hover{ 55 | .td-actions .btn{ 56 | @include opacity(1); 57 | } 58 | } 59 | } 60 | 61 | .btn:focus{ 62 | box-shadow: none !important; 63 | } 64 | } 65 | .table-upgrade{ 66 | .table{ 67 | tr{ 68 | td{ 69 | width: 100% 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /assets/sass/lbd/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | background-color: $white-color; 3 | 4 | .footer-menu{ 5 | height: 41px; 6 | } 7 | 8 | nav > ul{ 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | font-weight: normal; 13 | 14 | a:not(.btn){ 15 | color: $dark-gray; 16 | display: block; 17 | margin-bottom: 3px; 18 | &:hover, 19 | &:focus{ 20 | color: $default-states-color; 21 | } 22 | } 23 | } 24 | .social-area{ 25 | padding: 15px 0; 26 | h5{ 27 | padding-bottom: 15px; 28 | } 29 | } 30 | .social-area > a:not(.btn){ 31 | color: $dark-gray; 32 | display: inline-block; 33 | vertical-align: top; 34 | padding: $padding-social-a; 35 | font-size: $font-size-large-navbar; 36 | font-weight: normal; 37 | line-height: $line-height; 38 | text-align: center; 39 | &:hover, 40 | &:focus{ 41 | color: $default-states-color; 42 | } 43 | } 44 | .copyright{ 45 | color: $default-states-color; 46 | padding: 10px 15px; 47 | margin: 10px 3px; 48 | line-height: 20px; 49 | font-size: $font-size-base; 50 | } 51 | hr{ 52 | border-color: $medium-gray; 53 | } 54 | .title{ 55 | color: $default-states-color; 56 | } 57 | } 58 | 59 | .footer-default{ 60 | background-color: $smoke-bg; 61 | } 62 | 63 | .footer:not(.footer-big){ 64 | nav > ul{ 65 | font-size: $font-size-base; 66 | li{ 67 | margin-left: 20px; 68 | float: left; 69 | } 70 | a{ 71 | padding: 10px 0px; 72 | margin: 10px 10px 10px 0px; 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | background-color: $white-color; 3 | line-height: $line-height; 4 | 5 | nav > ul{ 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | font-weight: normal; 10 | 11 | a:not(.btn){ 12 | color: $dark-gray; 13 | display: block; 14 | margin-bottom: 3px; 15 | &:hover, 16 | &:focus{ 17 | color: $default-states-color; 18 | } 19 | } 20 | } 21 | .social-area{ 22 | padding: 15px 0; 23 | h5{ 24 | padding-bottom: 15px; 25 | } 26 | } 27 | .social-area > a:not(.btn){ 28 | color: $dark-gray; 29 | display: inline-block; 30 | vertical-align: top; 31 | padding: $padding-social-a; 32 | font-size: $font-size-large-navbar; 33 | font-weight: normal; 34 | line-height: $line-height; 35 | text-align: center; 36 | &:hover, 37 | &:focus{ 38 | color: $default-states-color; 39 | } 40 | } 41 | .copyright{ 42 | color: $default-states-color; 43 | padding: 10px 15px; 44 | margin: 10px 3px; 45 | line-height: 20px; 46 | font-size: $font-size-base; 47 | } 48 | hr{ 49 | border-color: $medium-gray; 50 | } 51 | .title{ 52 | color: $default-states-color; 53 | } 54 | } 55 | 56 | .footer-default{ 57 | background-color: $smoke-bg; 58 | } 59 | 60 | .footer:not(.footer-big){ 61 | nav > ul{ 62 | font-size: $font-size-base; 63 | li{ 64 | margin-left: 20px; 65 | float: left; 66 | } 67 | a{ 68 | padding: 10px 0px; 69 | margin: 10px 10px 10px 0px; 70 | } 71 | } 72 | } 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: 0; 4 | color: #FFFFFF; 5 | padding: 10px 15px; 6 | font-size: 14px; 7 | 8 | .container &{ 9 | border-radius: 4px; 10 | 11 | } 12 | .navbar &{ 13 | border-radius: 0; 14 | left: 0; 15 | position: absolute; 16 | right: 0; 17 | top: 85px; 18 | width: 100%; 19 | z-index: 3; 20 | } 21 | .navbar:not(.navbar-transparent) &{ 22 | top: 70px; 23 | } 24 | 25 | span[data-notify="icon"]{ 26 | font-size: 30px; 27 | display: block; 28 | left: 15px; 29 | position: absolute; 30 | top: 50%; 31 | margin-top: -15px; 32 | } 33 | 34 | button.close{ 35 | position: absolute; 36 | right: 10px; 37 | top: 50%; 38 | margin-top: -13px; 39 | z-index: 1033; 40 | background-color: #FFFFFF; 41 | display: block; 42 | border-radius: 50%; 43 | opacity: .4; 44 | line-height: 11px; 45 | width: 25px; 46 | height: 25px; 47 | outline: 0 !important; 48 | text-align: center; 49 | padding: 3px; 50 | padding-top: 1px; 51 | font-weight: 300; 52 | 53 | &:hover{ 54 | opacity: .55; 55 | } 56 | } 57 | 58 | .close ~ span{ 59 | display: block; 60 | max-width: 89%; 61 | } 62 | 63 | &[data-notify="container"]{ 64 | padding: 10px 10px 10px 20px; 65 | border-radius: $border-radius-base; 66 | } 67 | 68 | &.alert-with-icon{ 69 | padding-left: 65px; 70 | } 71 | } 72 | .alert-info{ 73 | background-color: $azure-navbar; 74 | } 75 | .alert-success { 76 | background-color: $green-navbar; 77 | } 78 | .alert-warning { 79 | background-color: $orange-navbar; 80 | } 81 | .alert-danger { 82 | background-color: $red-navbar; 83 | } 84 | -------------------------------------------------------------------------------- /assets/sass/lbd/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: 0; 4 | color: #FFFFFF; 5 | padding: 10px 15px; 6 | font-size: 14px; 7 | 8 | .container &{ 9 | border-radius: 4px; 10 | 11 | } 12 | .navbar &{ 13 | border-radius: 0; 14 | left: 0; 15 | position: absolute; 16 | right: 0; 17 | top: 85px; 18 | width: 100%; 19 | z-index: 3; 20 | } 21 | .navbar:not(.navbar-transparent) &{ 22 | top: 70px; 23 | } 24 | 25 | span[data-notify="icon"]{ 26 | font-size: 30px; 27 | display: block; 28 | left: 15px; 29 | position: absolute; 30 | top: 50%; 31 | margin-top: -15px; 32 | } 33 | 34 | i.nc-simple-remove{ 35 | font-size: 12px !important; 36 | font: bold normal normal 14px/1 'nucleo-icons'; 37 | } 38 | 39 | button.close{ 40 | position: absolute; 41 | right: 10px; 42 | top: 50%; 43 | margin-top: -13px; 44 | z-index: 1033; 45 | background-color: #FFFFFF; 46 | display: block; 47 | border-radius: 50%; 48 | opacity: .4; 49 | line-height: 9px; 50 | width: 25px; 51 | height: 25px; 52 | outline: 0 !important; 53 | text-align: center; 54 | padding: 3px; 55 | font-weight: 300; 56 | 57 | &:hover{ 58 | opacity: .55; 59 | } 60 | } 61 | 62 | .close ~ span{ 63 | display: block; 64 | max-width: 89%; 65 | } 66 | 67 | &[data-notify="container"]{ 68 | padding: 10px 10px 10px 20px; 69 | border-radius: $border-radius-base; 70 | } 71 | 72 | &.alert-with-icon{ 73 | padding-left: 65px; 74 | } 75 | } 76 | .alert-primary{ 77 | background-color: $blue-navbar; 78 | } 79 | .alert-info{ 80 | background-color: $azure-navbar; 81 | } 82 | .alert-success { 83 | background-color: $green-navbar; 84 | } 85 | .alert-warning { 86 | background-color: $orange-navbar; 87 | } 88 | .alert-danger { 89 | background-color: $red-navbar; 90 | } 91 | -------------------------------------------------------------------------------- /assets/sass/lbd/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Font Smoothing */ 2 | body, 3 | h1, .h1, 4 | h2, .h2, 5 | h3, .h3, 6 | h4, .h4, 7 | h5, .h5, 8 | h6, .h6, 9 | p, 10 | .navbar, 11 | .brand, 12 | .btn-simple, 13 | .alert, 14 | a, 15 | .td-name, 16 | td, 17 | button.close{ 18 | -moz-osx-font-smoothing: grayscale; 19 | -webkit-font-smoothing: antialiased; 20 | font-family: "Roboto","Helvetica Neue",Arial,sans-serif; 21 | font-weight: $font-weight-normal; 22 | } 23 | 24 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{ 25 | font-weight: $font-weight-light; 26 | margin: $margin-large-vertical 0 $margin-base-vertical; 27 | } 28 | 29 | h1, .h1 { 30 | font-size: $font-size-h1; 31 | } 32 | h2, .h2{ 33 | font-size: $font-size-h2; 34 | } 35 | h3, .h3{ 36 | font-size: $font-size-h3; 37 | margin: 20px 0 10px; 38 | } 39 | h4, .h4{ 40 | font-size: $font-size-h4; 41 | line-height: 30px; 42 | } 43 | h5, .h5 { 44 | font-size: $font-size-h5; 45 | margin-bottom: 15px; 46 | } 47 | h6, .h6{ 48 | font-size: $font-size-h6; 49 | font-weight: $font-weight-bold; 50 | text-transform: uppercase; 51 | } 52 | p{ 53 | font-size: $font-paragraph; 54 | line-height: $line-height-general; 55 | } 56 | 57 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 58 | color: $dark-gray; 59 | font-weight: $font-weight-light; 60 | line-height: $line-height-general; 61 | } 62 | 63 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 64 | font-size: 60%; 65 | } 66 | 67 | h1 .subtitle{ 68 | display: block; 69 | margin: 0 0 $margin-large-vertical; 70 | } 71 | 72 | .text-muted{ 73 | color: #9A9A9A; 74 | } 75 | .text-primary, .text-primary:hover{ 76 | color: #1D62F0 !important; 77 | } 78 | .text-info, .text-info:hover{ 79 | color: $info-color !important; 80 | } 81 | .text-success, .text-success:hover{ 82 | color: $success-color !important; 83 | } 84 | .text-warning, .text-warning:hover{ 85 | color: $warning-color !important; 86 | } 87 | .text-danger, .text-danger:hover{ 88 | color: $danger-color !important; 89 | } 90 | 91 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Font Smoothing */ 2 | body, 3 | h1, .h1, 4 | h2, .h2, 5 | h3, .h3, 6 | h4, .h4, 7 | h5, .h5, 8 | h6, .h6, 9 | p, 10 | .navbar, 11 | .brand, 12 | .btn-simple, 13 | .alert, 14 | a, 15 | .td-name, 16 | td, 17 | button.close{ 18 | -moz-osx-font-smoothing: grayscale; 19 | -webkit-font-smoothing: antialiased; 20 | font-family: "Roboto","Helvetica Neue",Arial,sans-serif; 21 | font-weight: $font-weight-normal; 22 | } 23 | 24 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{ 25 | font-weight: $font-weight-light; 26 | margin: $margin-large-vertical 0 $margin-base-vertical; 27 | } 28 | 29 | h1, .h1 { 30 | font-size: $font-size-h1; 31 | } 32 | h2, .h2{ 33 | font-size: $font-size-h2; 34 | } 35 | h3, .h3{ 36 | font-size: $font-size-h3; 37 | margin: 20px 0 10px; 38 | } 39 | h4, .h4{ 40 | font-size: $font-size-h4; 41 | line-height: 30px; 42 | } 43 | h5, .h5 { 44 | font-size: $font-size-h5; 45 | margin-bottom: 15px; 46 | } 47 | h6, .h6{ 48 | font-size: $font-size-h6; 49 | font-weight: $font-weight-bold; 50 | text-transform: uppercase; 51 | } 52 | p{ 53 | font-size: $font-paragraph; 54 | line-height: $line-height-general; 55 | } 56 | 57 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 58 | color: $dark-gray; 59 | font-weight: $font-weight-light; 60 | line-height: $line-height-general; 61 | } 62 | 63 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 64 | font-size: 60%; 65 | } 66 | 67 | h1 .subtitle{ 68 | display: block; 69 | margin: 0 0 $margin-large-vertical; 70 | } 71 | 72 | .text-muted{ 73 | color: #9A9A9A; 74 | } 75 | .text-primary, .text-primary:hover{ 76 | color: #1D62F0 !important; 77 | } 78 | .text-info, .text-info:hover{ 79 | color: $info-color !important; 80 | } 81 | .text-success, .text-success:hover{ 82 | color: $success-color !important; 83 | } 84 | .text-warning, .text-warning:hover{ 85 | color: $warning-color !important; 86 | } 87 | .text-danger, .text-danger:hover{ 88 | color: $danger-color !important; 89 | } 90 | 91 | -------------------------------------------------------------------------------- /assets/sass/lbd/_misc.scss: -------------------------------------------------------------------------------- 1 | /* General overwrite */ 2 | body, 3 | .wrapper{ 4 | min-height: 100vh; 5 | position: relative; 6 | } 7 | a{ 8 | color: $info-color; 9 | 10 | &:hover, &:focus{ 11 | color: $info-states-color; 12 | text-decoration: none; 13 | } 14 | } 15 | 16 | a:focus, a:active, 17 | button::-moz-focus-inner, 18 | input::-moz-focus-inner, 19 | input[type="reset"]::-moz-focus-inner, 20 | input[type="button"]::-moz-focus-inner, 21 | input[type="submit"]::-moz-focus-inner, 22 | select::-moz-focus-inner, 23 | input[type="file"] > input[type="button"]::-moz-focus-inner{ 24 | outline:0; 25 | } 26 | .ui-slider-handle:focus, 27 | .navbar-toggle, 28 | input:focus { 29 | outline : 0 !important; 30 | } 31 | 32 | /* Animations */ 33 | .form-control, 34 | .input-group-addon, 35 | .tagsinput, 36 | .navbar, 37 | .navbar .alert{ 38 | @include transition($general-transition-time, $transition-linear); 39 | } 40 | 41 | .sidebar .nav a, 42 | .table > tbody > tr .td-actions .btn{ 43 | @include transition($fast-transition-time, $transition-ease-in); 44 | } 45 | 46 | .btn{ 47 | @include transition($ultra-fast-transition-time, $transition-ease-in); 48 | } 49 | .fa{ 50 | width: 18px; 51 | text-align: center; 52 | } 53 | .margin-top{ 54 | margin-top: 50px; 55 | } 56 | 57 | .wrapper{ 58 | position: relative; 59 | top: 0; 60 | height: 100vh; 61 | } 62 | 63 | // documentation 64 | 65 | .page-header{ 66 | .page-header-image{ 67 | background-position: center center; 68 | background-size: cover; 69 | overflow: hidden; 70 | width: 100%; 71 | z-index: 1; 72 | } 73 | .title-container{ 74 | color: #fff; 75 | position: relative; 76 | top: 250px; 77 | z-index: 3; 78 | } 79 | .filter:after{ 80 | background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #9368e9 0%, #943bea 100%) repeat scroll 0 0 / 150% 150%; 81 | content: ""; 82 | display: block; 83 | height: 100%; 84 | left: 0; 85 | opacity: 0.77; 86 | position: absolute; 87 | top: 0; 88 | width: 100%; 89 | z-index: 2; 90 | } 91 | } 92 | 93 | .documentation .page-header, 94 | .documentation .page-header-image, 95 | .documentation .page-header-image .filter:after{ 96 | height: 100vh; 97 | } 98 | 99 | .documentation .footer{ 100 | z-index: 3; 101 | } 102 | .documentation .wrapper{ 103 | margin-top: -61px; 104 | height: 100vh; 105 | } 106 | .documentation .navbar{ 107 | z-index: 21; 108 | } 109 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn{ 2 | border-width: $border-thick; 3 | background-color: $transparent-bg; 4 | font-weight: $font-weight-normal; 5 | 6 | @include opacity(.8); 7 | padding: $padding-base-vertical $padding-base-horizontal; 8 | 9 | @include btn-styles($default-color, $default-states-color); 10 | 11 | &:hover, 12 | &:focus{ 13 | @include opacity(1); 14 | outline: 0 !important; 15 | } 16 | &:active, 17 | &.active, 18 | .open > &.dropdown-toggle { 19 | @include box-shadow(none); 20 | outline: 0 !important; 21 | } 22 | 23 | &.btn-icon{ 24 | padding: $padding-base-vertical; 25 | } 26 | 27 | } 28 | 29 | // Apply the mixin to the buttons 30 | //.btn-default { @include btn-styles($default-color, $default-states-color); } 31 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 32 | .btn-success { @include btn-styles($success-color, $success-states-color); } 33 | .btn-info { @include btn-styles($info-color, $info-states-color); } 34 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 35 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 36 | .btn-neutral { 37 | @include btn-styles($white-color, $white-color); 38 | 39 | &:active, 40 | &.active, 41 | .open > &.dropdown-toggle{ 42 | background-color: $white-color; 43 | color: $default-color; 44 | } 45 | 46 | &.btn-fill, 47 | &.btn-fill:hover, 48 | &.btn-fill:focus{ 49 | color: $default-color; 50 | } 51 | 52 | &.btn-simple:active, 53 | &.btn-simple.active{ 54 | background-color: transparent; 55 | } 56 | } 57 | 58 | .btn{ 59 | &:disabled, 60 | &[disabled], 61 | &.disabled{ 62 | @include opacity(.5); 63 | } 64 | } 65 | .btn-round{ 66 | border-width: $border-thin; 67 | border-radius: $btn-round-radius !important; 68 | padding: $padding-round-vertical $padding-round-horizontal; 69 | 70 | &.btn-icon{ 71 | padding: $padding-round-vertical; 72 | } 73 | } 74 | .btn-simple{ 75 | border: $none; 76 | font-size: $font-size-medium; 77 | padding: $padding-base-vertical $padding-base-horizontal; 78 | 79 | &.btn-icon{ 80 | padding: $padding-base-vertical; 81 | } 82 | } 83 | .btn-lg{ 84 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 85 | font-weight: $font-weight-normal; 86 | } 87 | .btn-sm{ 88 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 89 | } 90 | .btn-xs { 91 | @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small); 92 | } 93 | .btn-wd { 94 | min-width: 140px; 95 | } 96 | 97 | .btn-group.select{ 98 | width: 100%; 99 | } 100 | .btn-group.select .btn{ 101 | text-align: left; 102 | } 103 | .btn-group.select .caret{ 104 | position: absolute; 105 | top: 50%; 106 | margin-top: -1px; 107 | right: 8px; 108 | } 109 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu{ 2 | visibility: hidden; 3 | margin: 0; 4 | padding: 0; 5 | border-radius: $border-radius-extreme; 6 | display: block; 7 | z-index: 9000; 8 | position: absolute; 9 | 10 | @include opacity(0); 11 | @include box-shadow($dropdown-shadow); 12 | 13 | .open &{ 14 | @include opacity(1); 15 | visibility: visible; 16 | } 17 | .select &{ 18 | border-radius: $border-radius-bottom; 19 | @include box-shadow(none); 20 | @include transform-origin($select-coordinates); 21 | @include transform-scale(1); 22 | @include transition($fast-transition-time, $transition-linear); 23 | margin-top: -20px; 24 | } 25 | .select.open &{ 26 | margin-top: -1px; 27 | } 28 | 29 | > li > a { 30 | padding: $padding-base-vertical $padding-base-horizontal; 31 | color: #333333; 32 | 33 | img{ 34 | margin-top: -3px; 35 | } 36 | } 37 | > li > a:focus{ 38 | outline: 0 !important; 39 | } 40 | 41 | .btn-group.select &{ 42 | min-width: 100%; 43 | } 44 | 45 | > li:first-child > a{ 46 | border-top-left-radius: $border-radius-extreme; 47 | border-top-right-radius: $border-radius-extreme; 48 | } 49 | 50 | > li:last-child > a{ 51 | border-bottom-left-radius: $border-radius-extreme; 52 | border-bottom-right-radius: $border-radius-extreme; 53 | } 54 | 55 | .select & > li:first-child > a{ 56 | border-radius: 0; 57 | border-bottom: 0 none; 58 | } 59 | 60 | > li > a:hover, 61 | > li > a:focus { 62 | background-color: $smoke-bg; 63 | color: #333333; 64 | opacity: 1; 65 | text-decoration: none; 66 | } 67 | 68 | &.dropdown-blue > li > a:hover, 69 | &.dropdown-blue > li > a:focus{ 70 | background-color: $light-blue; 71 | } 72 | &.dropdown-azure > li > a:hover, 73 | &.dropdown-azure > li > a:focus{ 74 | background-color: $light-azure; 75 | } 76 | &.ct-green > li > a:hover, 77 | &.ct-green > li > a:focus{ 78 | background-color: $light-green; 79 | } 80 | &.dropdown-orange > li > a:hover, 81 | &.dropdown-orange > li > a:focus{ 82 | background-color: $light-orange; 83 | } 84 | &.dropdown-red > li > a:hover, 85 | &.dropdown-red > li > a:focus{ 86 | background-color: $light-red; 87 | } 88 | 89 | } 90 | 91 | .dropdown-with-icons{ 92 | > li > a{ 93 | padding-left: 0px; 94 | line-height: 28px; 95 | } 96 | i{ 97 | text-align: center; 98 | line-height: 28px; 99 | float: left; 100 | 101 | &[class^="pe-"]{ 102 | font-size: 24px; 103 | width: 46px; 104 | } 105 | &[class^="fa"]{ 106 | font-size: 14px; 107 | width: 38px; 108 | } 109 | } 110 | } 111 | 112 | //fix bug for the select items in btn-group 113 | .btn-group.select{ 114 | overflow: hidden; 115 | } 116 | .btn-group.select.open{ 117 | overflow: visible; 118 | } 119 | 120 | 121 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_chartist.scss: -------------------------------------------------------------------------------- 1 | // Scales for responsive SVG containers 2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; 3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; 4 | 5 | // Class names to be used when generating CSS 6 | $ct-class-chart: ct-chart !default; 7 | $ct-class-chart-line: ct-chart-line !default; 8 | $ct-class-chart-bar: ct-chart-bar !default; 9 | $ct-class-horizontal-bars: ct-horizontal-bars !default; 10 | $ct-class-chart-pie: ct-chart-pie !default; 11 | $ct-class-chart-donut: ct-chart-donut !default; 12 | $ct-class-label: ct-label !default; 13 | $ct-class-series: ct-series !default; 14 | $ct-class-line: ct-line !default; 15 | $ct-class-point: ct-point !default; 16 | $ct-class-area: ct-area !default; 17 | $ct-class-bar: ct-bar !default; 18 | $ct-class-slice-pie: ct-slice-pie !default; 19 | $ct-class-slice-donut: ct-slice-donut !default; 20 | $ct-class-grid: ct-grid !default; 21 | $ct-class-vertical: ct-vertical !default; 22 | $ct-class-horizontal: ct-horizontal !default; 23 | $ct-class-start: ct-start !default; 24 | $ct-class-end: ct-end !default; 25 | 26 | // Container ratio 27 | $ct-container-ratio: (1/1.618) !default; 28 | 29 | // Text styles for labels 30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default; 31 | $ct-text-size: 1.3rem !default; 32 | $ct-text-align: flex-start !default; 33 | $ct-text-justify: flex-start !default; 34 | $ct-text-line-height: 1; 35 | 36 | // Grid styles 37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default; 38 | $ct-grid-dasharray: 2px !default; 39 | $ct-grid-width: 1px !default; 40 | 41 | // Line chart properties 42 | $ct-line-width: 3px !default; 43 | $ct-line-dasharray: false !default; 44 | $ct-point-size: 8px !default; 45 | // Line chart point, can be either round or square 46 | $ct-point-shape: round !default; 47 | // Area fill transparency between 0 and 1 48 | $ct-area-opacity: 0.8 !default; 49 | 50 | // Bar chart bar width 51 | $ct-bar-width: 10px !default; 52 | 53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted) 54 | $ct-donut-width: 60px !default; 55 | 56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you 57 | // should set this property to false 58 | $ct-include-classes: true !default; 59 | 60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the 61 | // properties below 62 | $ct-include-colored-series: $ct-include-classes !default; 63 | 64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script 65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default; 66 | 67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors. 68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; 69 | $ct-series-colors: ( 70 | $new-blue, 71 | $new-red, 72 | $new-orange, 73 | $new-purple, 74 | $new-green, 75 | $new-dark-blue, 76 | $new-black, 77 | $social-google, 78 | $social-tumblr, 79 | $social-youtube, 80 | $social-twitter, 81 | $social-pinterest, 82 | $social-behance, 83 | #6188e2, 84 | #a748ca 85 | ) !default; -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_chartist.scss: -------------------------------------------------------------------------------- 1 | // Scales for responsive SVG containers 2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; 3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; 4 | 5 | // Class names to be used when generating CSS 6 | $ct-class-chart: ct-chart !default; 7 | $ct-class-chart-line: ct-chart-line !default; 8 | $ct-class-chart-bar: ct-chart-bar !default; 9 | $ct-class-horizontal-bars: ct-horizontal-bars !default; 10 | $ct-class-chart-pie: ct-chart-pie !default; 11 | $ct-class-chart-donut: ct-chart-donut !default; 12 | $ct-class-label: ct-label !default; 13 | $ct-class-series: ct-series !default; 14 | $ct-class-line: ct-line !default; 15 | $ct-class-point: ct-point !default; 16 | $ct-class-area: ct-area !default; 17 | $ct-class-bar: ct-bar !default; 18 | $ct-class-slice-pie: ct-slice-pie !default; 19 | $ct-class-slice-donut: ct-slice-donut !default; 20 | $ct-class-grid: ct-grid !default; 21 | $ct-class-vertical: ct-vertical !default; 22 | $ct-class-horizontal: ct-horizontal !default; 23 | $ct-class-start: ct-start !default; 24 | $ct-class-end: ct-end !default; 25 | 26 | // Container ratio 27 | $ct-container-ratio: (1/1.618) !default; 28 | 29 | // Text styles for labels 30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default; 31 | $ct-text-size: 1.3rem !default; 32 | $ct-text-align: flex-start !default; 33 | $ct-text-justify: flex-start !default; 34 | $ct-text-line-height: 1; 35 | 36 | // Grid styles 37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default; 38 | $ct-grid-dasharray: 2px !default; 39 | $ct-grid-width: 1px !default; 40 | 41 | // Line chart properties 42 | $ct-line-width: 3px !default; 43 | $ct-line-dasharray: false !default; 44 | $ct-point-size: 8px !default; 45 | // Line chart point, can be either round or square 46 | $ct-point-shape: round !default; 47 | // Area fill transparency between 0 and 1 48 | $ct-area-opacity: 0.8 !default; 49 | 50 | // Bar chart bar width 51 | $ct-bar-width: 10px !default; 52 | 53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted) 54 | $ct-donut-width: 60px !default; 55 | 56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you 57 | // should set this property to false 58 | $ct-include-classes: true !default; 59 | 60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the 61 | // properties below 62 | $ct-include-colored-series: $ct-include-classes !default; 63 | 64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script 65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default; 66 | 67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors. 68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; 69 | $ct-series-colors: ( 70 | $new-blue, 71 | $new-red, 72 | $new-orange, 73 | $new-purple, 74 | $new-green, 75 | $new-dark-blue, 76 | $new-black, 77 | $social-google, 78 | $social-tumblr, 79 | $social-youtube, 80 | $social-twitter, 81 | $social-pinterest, 82 | $social-behance, 83 | #6188e2, 84 | #a748ca 85 | ) !default; 86 | -------------------------------------------------------------------------------- /assets/sass/lbd/_bootstrap-switch.scss: -------------------------------------------------------------------------------- 1 | .bootstrap-switch { 2 | display: inline-block; 3 | direction: ltr; 4 | cursor: pointer; 5 | border-radius: 30px; 6 | border: 0; 7 | position: relative; 8 | text-align: left; 9 | overflow: hidden; 10 | margin-bottom: 5px; 11 | margin-left: 66px; 12 | line-height: 8px; 13 | width: 61px !important; 14 | height: 26px; 15 | outline: none; 16 | z-index: 0; 17 | margin-right: 1px; 18 | -webkit-user-select: none; 19 | -moz-user-select: none; 20 | -ms-user-select: none; 21 | user-select: none; 22 | vertical-align: middle; 23 | -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 24 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 25 | } 26 | 27 | .bootstrap-switch .bootstrap-switch-container { 28 | display: inline-flex; 29 | top: 0; 30 | height: 26px; 31 | border-radius: 4px; 32 | -webkit-transform: translate3d(0, 0, 0); 33 | transform: translate3d(0, 0, 0); 34 | width: 100px !important; 35 | } 36 | 37 | .bootstrap-switch .bootstrap-switch-handle-on, 38 | .bootstrap-switch .bootstrap-switch-handle-off, 39 | .bootstrap-switch .bootstrap-switch-label { 40 | -webkit-box-sizing: border-box; 41 | -moz-box-sizing: border-box; 42 | box-sizing: border-box; 43 | cursor: pointer; 44 | display: inline-block !important; 45 | height: 100%; 46 | color: #fff; 47 | padding: 6px 10px; 48 | font-size: 11px; 49 | text-indent: -5px; 50 | line-height: 15px; 51 | -webkit-transition: 0.25s ease-out; 52 | transition: 0.25s ease-out; 53 | 54 | i{ 55 | font-size: 12px; 56 | line-height: 14px; 57 | } 58 | } 59 | 60 | .bootstrap-switch .bootstrap-switch-handle-on, 61 | .bootstrap-switch .bootstrap-switch-handle-off { 62 | text-align: center; 63 | z-index: 1; 64 | float: left; 65 | width: 50% !important; 66 | background-color: $info-color; 67 | } 68 | 69 | 70 | .bootstrap-switch .bootstrap-switch-label { 71 | text-align: center; 72 | z-index: 100; 73 | color: #333333; 74 | background: #ffffff; 75 | width: 22px !important; 76 | height: 22px; 77 | margin: 2px -11px; 78 | border-radius: 12px; 79 | position: relative; 80 | float: left; 81 | padding: 0; 82 | background-color: #FFFFFF; 83 | box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25); 84 | } 85 | 86 | .bootstrap-switch .bootstrap-switch-handle-on { 87 | border-bottom-left-radius: 3px; 88 | border-top-left-radius: 3px; 89 | } 90 | 91 | .bootstrap-switch .bootstrap-switch-handle-off { 92 | text-indent: 6px; 93 | } 94 | 95 | .bootstrap-switch input[type='radio'], 96 | .bootstrap-switch input[type='checkbox'] { 97 | position: absolute !important; 98 | top: 0; 99 | left: 0; 100 | opacity: 0; 101 | filter: alpha(opacity=0); 102 | z-index: -1; 103 | } 104 | 105 | 106 | .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { 107 | -webkit-transition: margin-left 0.5s; 108 | transition: margin-left 0.5s; 109 | } 110 | 111 | 112 | .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container { 113 | margin-left: -2px !important; 114 | } 115 | 116 | .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container { 117 | margin-left: -37px !important; 118 | } 119 | 120 | .bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label { 121 | width: 26px !important; 122 | margin: 2px -15px; 123 | } 124 | 125 | .bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label { 126 | width: 26px !important; 127 | margin: 2px -15px -13px -11px; 128 | } 129 | -------------------------------------------------------------------------------- /BS3/README.md: -------------------------------------------------------------------------------- 1 | # [Light Bootstrap Dashboard](http://www.creative-tim.com/product/light-bootstrap-dashboard) 2 | [![version][version-badge]][CHANGELOG] [![license][license-badge]][LICENSE] 3 | 4 | ![alt text](http://s3.amazonaws.com/creativetim_bucket/products/32/original/opt_lbd_thumbnail.jpg "Light Bootstrap Dashboard") 5 | 6 | Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 3 and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM. 7 | 8 | The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard contains multiple handpicked and optimised plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product. 9 | 10 | It comes with 6 filter colors for the sidebar (“black”, “azure”,”green”,”orange”,”red”,”purple”) and an option to have a background image. 11 | 12 | Special thanks go to: 13 | Robert McIntosh for the notification system 14 | Chartist for the wonderful charts 15 | We are very excited to share this dashboard with you and we look forward to hearing your feedback! 16 | 17 | ## Links: 18 | 19 | + [Live Preview](http://demos.creative-tim.com/light-bootstrap-dashboard) 20 | + [Video Tutorial](https://www.youtube.com/watch?v=c3M3NQtFyqM) 21 | + [Light Bootstrap Dashboard PRO](http://www.creative-tim.com/product/light-bootstrap-dashboard-pro) (from $39) 22 | 23 | ## Quick start 24 | 25 | Quick start options: 26 | 27 | - [Download from Github](https://github.com/creativetimofficial/light-bootstrap-dashboard.git). 28 | - [Download from Creative Tim](http://www.creative-tim.com/product/light-bootstrap-dashboard). 29 | - Clone the repo: `git clone https://github.com/creativetimofficial/light-bootstrap-dashboard.git`. 30 | 31 | 32 | ### What's included 33 | 34 | Within the download you'll find the following directories and files: 35 | 36 | ``` 37 | x_lbd_free/ 38 | ├── assets/ 39 | | ├── css/ 40 | | ├── js/ 41 | | ├── fonts/ 42 | | └── img/ 43 | ├── dashboard.html 44 | ├── CHANGELOG.md 45 | ├── documentation 46 | ├── icons.html 47 | ├── maps.html 48 | ├── notifications.html 49 | ├── table.html 50 | ├── template.html 51 | ├── typography.html 52 | ├── upgrade.html 53 | └── user.html 54 | 55 | ``` 56 | ### License 57 | 58 | - Copyright 2017 Creative Tim (http://www.creative-tim.com) 59 | - Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE.md) 60 | 61 | ## Useful Links 62 | 63 | More products from Creative Tim: 64 | 65 | Tutorials: 66 | 67 | Freebies: 68 | 69 | Affiliate Program (earn money): 70 | 71 | Social Media: 72 | 73 | Twitter: 74 | 75 | Facebook: 76 | 77 | Dribbble: 78 | 79 | Google+: 80 | 81 | Instagram: 82 | 83 | 84 | [CHANGELOG]: ./CHANGELOG.md 85 | [LICENSE]: ./LICENSE.md 86 | [version-badge]: https://img.shields.io/badge/version-1.4.0-blue.svg 87 | [license-badge]: https://img.shields.io/badge/license-MIT-blue.svg 88 | -------------------------------------------------------------------------------- /assets/sass/lbd/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu{ 2 | visibility: hidden; 3 | margin: 0; 4 | padding: 0; 5 | border-radius: $border-radius-extreme; 6 | display: block; 7 | z-index: 9000; 8 | position: absolute; 9 | 10 | @include opacity(0); 11 | @include box-shadow($dropdown-shadow); 12 | 13 | .show &{ 14 | @include opacity(1); 15 | visibility: visible; 16 | } 17 | .select &{ 18 | border-radius: $border-radius-bottom; 19 | @include box-shadow(none); 20 | @include transform-origin($select-coordinates); 21 | @include transform-scale(1); 22 | @include transition($fast-transition-time, $transition-linear); 23 | margin-top: -20px; 24 | } 25 | .select.show &{ 26 | margin-top: -1px; 27 | } 28 | 29 | .dropdown-item { 30 | padding: $padding-base-vertical $padding-base-horizontal; 31 | color: #333333; 32 | 33 | img{ 34 | margin-top: -3px; 35 | } 36 | } 37 | .dropdown-item:focus{ 38 | outline: 0 !important; 39 | } 40 | 41 | .btn-group.select &{ 42 | min-width: 100%; 43 | } 44 | 45 | > li:first-child > a{ 46 | border-top-left-radius: $border-radius-extreme; 47 | border-top-right-radius: $border-radius-extreme; 48 | } 49 | 50 | > li:last-child > a{ 51 | border-bottom-left-radius: $border-radius-extreme; 52 | border-bottom-right-radius: $border-radius-extreme; 53 | } 54 | 55 | .select & > li:first-child > a{ 56 | border-radius: 0; 57 | border-bottom: 0 none; 58 | } 59 | 60 | .dropdown-item:hover, 61 | .dropdown-item:focus { 62 | background-color: $smoke-bg; 63 | color: #333333; 64 | opacity: 1; 65 | text-decoration: none; 66 | } 67 | 68 | &.dropdown-blue > li > a:hover, 69 | &.dropdown-blue > li > a:focus{ 70 | background-color: $light-blue; 71 | } 72 | &.dropdown-azure > li > a:hover, 73 | &.dropdown-azure > li > a:focus{ 74 | background-color: $light-azure; 75 | } 76 | &.ct-green > li > a:hover, 77 | &.ct-green > li > a:focus{ 78 | background-color: $light-green; 79 | } 80 | &.dropdown-orange > li > a:hover, 81 | &.dropdown-orange > li > a:focus{ 82 | background-color: $light-orange; 83 | } 84 | &.dropdown-red > li > a:hover, 85 | &.dropdown-red > li > a:focus{ 86 | background-color: $light-red; 87 | } 88 | 89 | .dropdown-item{ 90 | i[class*="nc-icon"]{ 91 | font-size: 18px; 92 | text-align: center; 93 | line-height: 25px; 94 | float: left; 95 | padding-right: 10px; 96 | } 97 | } 98 | 99 | &.dropdown-menu-right{ 100 | &:before, 101 | &:after{ 102 | right: 12px !important; 103 | left: auto !important; 104 | } 105 | } 106 | 107 | } 108 | 109 | .dropdown-with-icons{ 110 | > li > a{ 111 | padding-left: 0px; 112 | line-height: 28px; 113 | } 114 | i{ 115 | text-align: center; 116 | line-height: 28px; 117 | float: left; 118 | 119 | &[class^="pe-"]{ 120 | font-size: 24px; 121 | width: 46px; 122 | } 123 | &[class^="fa"]{ 124 | font-size: 14px; 125 | width: 38px; 126 | } 127 | } 128 | } 129 | 130 | //fix bug for the select items in btn-group 131 | .btn-group.select{ 132 | overflow: hidden; 133 | } 134 | .btn-group.select.show{ 135 | overflow: visible; 136 | } 137 | -------------------------------------------------------------------------------- /assets/sass/lbd/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn{ 2 | border-width: $border-thick; 3 | background-color: $transparent-bg; 4 | font-weight: $font-weight-normal; 5 | 6 | @include opacity(.8); 7 | padding: $padding-base-vertical $padding-base-horizontal; 8 | 9 | @include btn-styles($default-color, $default-states-color); 10 | 11 | &:hover, 12 | &:focus{ 13 | @include opacity(1); 14 | outline: 0 !important; 15 | box-shadow: none; 16 | } 17 | &:active, 18 | &.active, 19 | .open > &.dropdown-toggle { 20 | @include box-shadow(none); 21 | outline: 0 !important; 22 | } 23 | 24 | &.btn-icon{ 25 | padding: $padding-base-vertical; 26 | } 27 | 28 | } 29 | 30 | // Apply the mixin to the buttons 31 | //.btn-default { @include btn-styles($default-color, $default-states-color); } 32 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 33 | .btn-success { @include btn-styles($success-color, $success-states-color); } 34 | .btn-info { @include btn-styles($info-color, $info-states-color); } 35 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 36 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 37 | .btn-neutral { 38 | @include btn-styles($white-color, $white-color); 39 | 40 | &:active, 41 | &.active, 42 | .open > &.dropdown-toggle{ 43 | background-color: $white-color; 44 | color: $default-color; 45 | } 46 | 47 | &.btn-fill, 48 | &.btn-fill:hover, 49 | &.btn-fill:focus{ 50 | color: $default-color; 51 | } 52 | 53 | &.btn-simple:active, 54 | &.btn-simple.active{ 55 | background-color: transparent; 56 | } 57 | } 58 | 59 | .btn{ 60 | &:disabled, 61 | &[disabled], 62 | &.disabled{ 63 | @include opacity(.5); 64 | } 65 | } 66 | .btn-round{ 67 | border-width: $border-thin; 68 | border-radius: $btn-round-radius !important; 69 | padding: $padding-round-vertical $padding-round-horizontal; 70 | 71 | &.btn-icon{ 72 | padding: $padding-round-vertical; 73 | } 74 | } 75 | .btn-simple{ 76 | border: $none; 77 | font-size: $font-size-medium; 78 | padding: $padding-base-vertical $padding-base-horizontal; 79 | 80 | &.btn-icon{ 81 | padding: $padding-base-vertical; 82 | } 83 | } 84 | .btn-lg{ 85 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 86 | font-weight: $font-weight-normal; 87 | } 88 | .btn-sm{ 89 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 90 | } 91 | .btn-xs { 92 | @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small); 93 | } 94 | .btn-wd { 95 | min-width: 140px; 96 | } 97 | 98 | .btn-group.select{ 99 | width: 100%; 100 | } 101 | .btn-group.select .btn{ 102 | text-align: left; 103 | } 104 | .btn-group.select .caret{ 105 | position: absolute; 106 | top: 50%; 107 | margin-top: -1px; 108 | right: 8px; 109 | } 110 | .btn-social{ 111 | opacity: 0.85; 112 | } 113 | 114 | .btn-twitter{ 115 | border-color: $social-twitter; 116 | color: $social-twitter; 117 | &:hover{ 118 | opacity: 1 !important; 119 | border-color: $social-twitter; 120 | color: $social-twitter; 121 | } 122 | } 123 | .btn-facebook{ 124 | border-color: $social-facebook; 125 | color: $social-facebook; 126 | 127 | &:hover{ 128 | opacity: 1 !important; 129 | border-color: $social-facebook; 130 | color: $social-facebook; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /assets/sass/lbd/_checkbox-radio-switch.scss: -------------------------------------------------------------------------------- 1 | .from-check, 2 | .form-check-radio { 3 | margin-bottom: 12px; 4 | position: relative; 5 | } 6 | 7 | .form-check{ 8 | .form-check-label{ 9 | display: inline-block; 10 | position: relative; 11 | cursor: pointer; 12 | padding-left: 35px; 13 | line-height: 26px; 14 | margin-bottom: 0; 15 | } 16 | 17 | .form-check-sign::before, 18 | .form-check-sign::after{ 19 | font-family: 'FontAwesome'; 20 | content: "\f096"; 21 | display: inline-block; 22 | color: $info-color; 23 | position: absolute; 24 | width: 19px; 25 | height: 19px; 26 | margin-top: -12px; 27 | margin-left: -23px; 28 | font-size: 21px; 29 | cursor: pointer; 30 | -webkit-transition: opacity 0.3s linear; 31 | -moz-transition: opacity 0.3s linear; 32 | -o-transition: opacity 0.3s linear; 33 | -ms-transition: opacity 0.3s linear; 34 | transition: opacity 0.3s linear; 35 | } 36 | .form-check-sign::after{ 37 | font-family: 'FontAwesome'; 38 | content: "\f046"; 39 | text-align: center; 40 | opacity: 0; 41 | color: $info-color; 42 | border: 0; 43 | background-color: inherit; 44 | } 45 | &.disabled{ 46 | .form-check-label{ 47 | color: $dark-gray; 48 | opacity: .5; 49 | cursor: not-allowed; 50 | } 51 | } 52 | 53 | } 54 | 55 | .form-check.disabled .form-check-label, 56 | .form-check.disabled .form-check-label { 57 | 58 | } 59 | 60 | .form-check input[type="checkbox"], 61 | .form-check-radio input[type="radio"]{ 62 | opacity: 0; 63 | position: absolute; 64 | visibility: hidden; 65 | } 66 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{ 67 | opacity: 1; 68 | } 69 | 70 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before, 71 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ 72 | cursor: not-allowed; 73 | } 74 | 75 | .form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign, 76 | .form-check-radio input[type="radio"]:disabled + .form-check-sign{ 77 | pointer-events: none !important; 78 | } 79 | 80 | .form-check-radio{ 81 | .form-check-label{ 82 | padding-left: 2rem; 83 | } 84 | &.disabled{ 85 | .form-check-label{ 86 | color: $dark-gray; 87 | opacity: .5; 88 | cursor: not-allowed; 89 | } 90 | } 91 | } 92 | 93 | .form-check-radio .form-check-sign::before{ 94 | font-family: 'FontAwesome'; 95 | content: "\f10c"; 96 | font-size: 22px; 97 | -webkit-font-smoothing: antialiased; 98 | -moz-osx-font-smoothing: grayscale; 99 | display: inline-block; 100 | position: absolute; 101 | opacity: .50; 102 | left: 5px; 103 | top: -5px; 104 | } 105 | 106 | .form-check-label input[type="checkbox"]:checked + .form-check-sign:before{ 107 | // background-color: #66615B; 108 | } 109 | 110 | .form-check-radio input[type="radio"] + .form-check-sign:after, 111 | .form-check-radio input[type="radio"] { 112 | opacity: 0; 113 | -webkit-transition: opacity 0.3s linear; 114 | -moz-transition: opacity 0.3s linear; 115 | -o-transition: opacity 0.3s linear; 116 | -ms-transition: opacity 0.3s linear; 117 | transition: opacity 0.3s linear; 118 | content:" "; 119 | display: block; 120 | } 121 | 122 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after { 123 | font-family: 'FontAwesome'; 124 | content: "\f192"; 125 | top: -5px; 126 | position: absolute; 127 | left: 5px; 128 | opacity: 1; 129 | font-size: 22px; 130 | } 131 | 132 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{ 133 | opacity: 1; 134 | } 135 | 136 | 137 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, 138 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { 139 | color: $dark-gray; 140 | } 141 | -------------------------------------------------------------------------------- /assets/sass/lbd/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control::-moz-placeholder{ 2 | @include placeholder($medium-gray,1); 3 | } 4 | .form-control:-moz-placeholder{ 5 | @include placeholder($medium-gray,1); 6 | } 7 | .form-control::-webkit-input-placeholder{ 8 | @include placeholder($medium-gray,1); 9 | } 10 | .form-control:-ms-input-placeholder{ 11 | @include placeholder($medium-gray,1); 12 | } 13 | 14 | .form-control { 15 | background-color: $white-bg; 16 | border: 1px solid $light-gray; 17 | border-radius: $border-radius-base; 18 | color: #565656; 19 | @include input-size($padding-base-vertical, $padding-base-horizontal - 4, $height-base); 20 | @include box-shadow(none); 21 | 22 | &:focus{ 23 | background-color: $white-bg; 24 | border: 1px solid $medium-dark-gray; 25 | @include box-shadow(none); 26 | outline: 0 !important; 27 | color: #333333; 28 | } 29 | 30 | .has-success &, 31 | .has-error &, 32 | .has-success &:focus, 33 | .has-error &:focus{ 34 | border-color: $light-gray; 35 | @include box-shadow(none); 36 | } 37 | 38 | .has-success &{ 39 | color: $success-color; 40 | } 41 | .has-success &:focus{ 42 | border-color: $success-color; 43 | } 44 | .has-error &{ 45 | color: $danger-color; 46 | } 47 | .has-error &:focus{ 48 | border-color: $danger-color; 49 | } 50 | 51 | & + .form-control-feedback{ 52 | border-radius: $border-radius-large; 53 | font-size: $font-size-base; 54 | margin-top: -7px; 55 | position: absolute; 56 | right: 10px; 57 | top: 50%; 58 | vertical-align: middle; 59 | } 60 | 61 | .open &{ 62 | border-radius: $border-radius-base $border-radius-base 0 0; 63 | border-bottom-color: transparent; 64 | } 65 | } 66 | 67 | .input-lg{ 68 | height: 55px; 69 | padding: $padding-large-vertical $padding-large-horizontal; 70 | } 71 | 72 | .has-error{ 73 | .form-control-feedback{ 74 | color: $danger-color; 75 | } 76 | } 77 | .has-success{ 78 | .form-control-feedback{ 79 | color: $success-color 80 | } 81 | } 82 | 83 | 84 | .input-group-addon { 85 | background-color: $white-color; 86 | border: 1px solid $light-gray; 87 | border-radius: $border-radius-base; 88 | 89 | .has-success &, 90 | .has-error &{ 91 | background-color: $white-color; 92 | border: 1px solid $light-gray; 93 | } 94 | .has-error .form-control:focus + &{ 95 | border-color: $danger-color; 96 | color: $danger-color; 97 | } 98 | .has-success .form-control:focus + &{ 99 | border-color: $success-color; 100 | color: $success-color; 101 | } 102 | .form-control:focus + &, 103 | .form-control:focus ~ &{ 104 | background-color: $white-color; 105 | border-color: $dark-gray; 106 | } 107 | } 108 | 109 | .input-group .form-control:first-child, 110 | .input-group-addon:first-child, 111 | .input-group-btn:first-child > .dropdown-toggle, 112 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 113 | border-right: 0 none; 114 | } 115 | .input-group .form-control:last-child, 116 | .input-group-addon:last-child, 117 | .input-group-btn:last-child > .dropdown-toggle, 118 | .input-group-btn:first-child > .btn:not(:first-child) { 119 | border-left: 0 none; 120 | } 121 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 122 | background-color: $smoke-bg; 123 | color: $default-color; 124 | cursor: not-allowed; 125 | } 126 | 127 | .input-group-btn .btn{ 128 | border-width: $border-thin; 129 | padding: $padding-round-vertical $padding-base-horizontal; 130 | } 131 | .input-group-btn .btn-default:not(.btn-fill){ 132 | border-color: $medium-gray; 133 | } 134 | 135 | .input-group-btn:last-child > .btn{ 136 | margin-left: 0; 137 | } 138 | 139 | .input-group-focus .input-group-addon{ 140 | border-color: $dark-gray; 141 | } 142 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control::-moz-placeholder{ 2 | @include placeholder($medium-gray,1); 3 | } 4 | .form-control:-moz-placeholder{ 5 | @include placeholder($medium-gray,1); 6 | } 7 | .form-control::-webkit-input-placeholder{ 8 | @include placeholder($medium-gray,1); 9 | } 10 | .form-control:-ms-input-placeholder{ 11 | @include placeholder($medium-gray,1); 12 | } 13 | 14 | .form-control { 15 | background-color: $white-bg; 16 | border: 1px solid $light-gray; 17 | border-radius: $border-radius-base; 18 | color: #565656; 19 | @include input-size($padding-base-vertical, $padding-base-horizontal - 4, $height-base); 20 | @include box-shadow(none); 21 | 22 | &:focus{ 23 | background-color: $white-bg; 24 | border: 1px solid $medium-dark-gray; 25 | @include box-shadow(none); 26 | outline: 0 !important; 27 | color: #333333; 28 | } 29 | 30 | .has-success &, 31 | .has-error &, 32 | .has-success &:focus, 33 | .has-error &:focus{ 34 | border-color: $light-gray; 35 | @include box-shadow(none); 36 | } 37 | 38 | .has-success &{ 39 | color: $success-color; 40 | } 41 | .has-success &:focus{ 42 | border-color: $success-color; 43 | } 44 | .has-error &{ 45 | color: $danger-color; 46 | } 47 | .has-error &:focus{ 48 | border-color: $danger-color; 49 | } 50 | 51 | & + .form-control-feedback{ 52 | border-radius: $border-radius-large; 53 | font-size: $font-size-base; 54 | margin-top: -7px; 55 | position: absolute; 56 | right: 10px; 57 | top: 50%; 58 | vertical-align: middle; 59 | } 60 | 61 | .open &{ 62 | border-radius: $border-radius-base $border-radius-base 0 0; 63 | border-bottom-color: transparent; 64 | } 65 | } 66 | 67 | .input-lg{ 68 | height: 55px; 69 | padding: $padding-large-vertical $padding-large-horizontal; 70 | } 71 | 72 | .has-error{ 73 | .form-control-feedback{ 74 | color: $danger-color; 75 | } 76 | } 77 | .has-success{ 78 | .form-control-feedback{ 79 | color: $success-color 80 | } 81 | } 82 | 83 | 84 | .input-group-addon { 85 | background-color: $white-color; 86 | border: 1px solid $light-gray; 87 | border-radius: $border-radius-base; 88 | 89 | .has-success &, 90 | .has-error &{ 91 | background-color: $white-color; 92 | border: 1px solid $light-gray; 93 | } 94 | .has-error .form-control:focus + &{ 95 | border-color: $danger-color; 96 | color: $danger-color; 97 | } 98 | .has-success .form-control:focus + &{ 99 | border-color: $success-color; 100 | color: $success-color; 101 | } 102 | .form-control:focus + &, 103 | .form-control:focus ~ &{ 104 | background-color: $white-color; 105 | border-color: $dark-gray; 106 | } 107 | } 108 | 109 | .input-group .form-control:first-child, 110 | .input-group-addon:first-child, 111 | .input-group-btn:first-child > .dropdown-toggle, 112 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 113 | border-right: 0 none; 114 | } 115 | .input-group .form-control:last-child, 116 | .input-group-addon:last-child, 117 | .input-group-btn:last-child > .dropdown-toggle, 118 | .input-group-btn:first-child > .btn:not(:first-child) { 119 | border-left: 0 none; 120 | } 121 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 122 | background-color: $smoke-bg; 123 | color: $default-color; 124 | cursor: not-allowed; 125 | } 126 | 127 | .input-group-btn .btn{ 128 | border-width: $border-thin; 129 | padding: $padding-round-vertical $padding-base-horizontal; 130 | } 131 | .input-group-btn .btn-default:not(.btn-fill){ 132 | border-color: $medium-gray; 133 | } 134 | 135 | .input-group-btn:last-child > .btn{ 136 | margin-left: 0; 137 | } 138 | 139 | .input-group-focus .input-group-addon{ 140 | border-color: $dark-gray; 141 | } 142 | -------------------------------------------------------------------------------- /BS3/documentation/css/documentation.css: -------------------------------------------------------------------------------- 1 | .tim-row{ 2 | margin-bottom: 40px; 3 | } 4 | pre.prettyprint{ 5 | background-color: #eee; 6 | border: 0px; 7 | margin-bottom: 0; 8 | margin-top: 20px; 9 | padding: 20px; 10 | text-align: left; 11 | } 12 | .atv, .str{ 13 | color: #05AE0E; 14 | } 15 | .tag, .pln, .kwd{ 16 | color: #3472F7; 17 | } 18 | .atn{ 19 | color: #2C93FF; 20 | } 21 | .pln{ 22 | color: #333; 23 | } 24 | .com{ 25 | color: #999; 26 | } 27 | .space-top{ 28 | margin-top: 50px; 29 | } 30 | 31 | h2{ 32 | padding-top: 70px; 33 | } 34 | .btn-primary .caret{ 35 | border-top-color: #3472F7; 36 | color: #3472F7; 37 | } 38 | .area-line{ 39 | border: 1px solid #999; 40 | border-left: 0; 41 | border-right: 0; 42 | color: #666; 43 | display: block; 44 | margin-top: 20px; 45 | padding: 8px 0; 46 | text-align: center; 47 | } 48 | .area-line a{ 49 | color: #666; 50 | } 51 | .container-fluid{ 52 | padding-right: 15px; 53 | padding-left: 15px; 54 | } 55 | .logo-container .logo{ 56 | overflow: hidden; 57 | border-radius: 50%; 58 | border: 1px solid #333333; 59 | width: 50px; 60 | float: left; 61 | } 62 | .header-wrapper { 63 | position: relative; 64 | height: 500px; 65 | } 66 | 67 | .header-wrapper .header { 68 | background-color: #9368e9; 69 | background-position: center center; 70 | background-size: cover; 71 | height: 450px; 72 | overflow: hidden; 73 | position: absolute; 74 | width: 100%; 75 | z-index: 1; 76 | } 77 | .header-wrapper .header .filter::after { 78 | background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #9368e9 0%, #943bea 100%) repeat scroll 0 0 / 150% 150%; 79 | content: ""; 80 | display: block; 81 | height: 450px; 82 | left: 0; 83 | opacity: 0.77; 84 | position: absolute; 85 | top: 0; 86 | width: 100%; 87 | z-index: 2; 88 | } 89 | .header-wrapper .title-container{ 90 | color: #fff; 91 | position: relative; 92 | top: 150px; 93 | z-index: 3; 94 | 95 | } 96 | .logo-container .brand{ 97 | font-size: 18px; 98 | color: #FFFFFF; 99 | line-height: 20px; 100 | float: left; 101 | margin-left: 10px; 102 | margin-top: 5px; 103 | width: 50px; 104 | height: 50px; 105 | } 106 | 107 | .navbar-default .logo-container .brand{ 108 | color: #9A9A9A; 109 | } 110 | .logo-container{ 111 | margin-top: 10px; 112 | margin-left: 15px; 113 | } 114 | .logo-container .logo img{ 115 | width: 100%; 116 | } 117 | .navbar-small .logo-container .brand{ 118 | color: #333333; 119 | } 120 | .fixed-section{ 121 | top: 110px; 122 | max-height: 70vh; 123 | overflow: scroll; 124 | } 125 | .fixed-section ul li{ 126 | list-style: none; 127 | } 128 | .fixed-section li a{ 129 | font-size: 14px; 130 | padding: 2px; 131 | display: block; 132 | color: #666666; 133 | } 134 | .fixed-section li a.active{ 135 | color: #00bbff; 136 | } 137 | .fixed-section.float{ 138 | position: fixed; 139 | top: 100px; 140 | width: 200px; 141 | margin-top: 0; 142 | } 143 | .copyright { 144 | color: #777777; 145 | padding: 10px 15px; 146 | font-size: 14px; 147 | margin: 15px 3px; 148 | line-height: 20px; 149 | text-align: center; 150 | } 151 | 152 | .table-bigboy .img-container{ 153 | width: 130px; 154 | height: 85px; 155 | } 156 | 157 | .table-bigboy .td-name{ 158 | min-width: 170px; 159 | } 160 | 161 | .header-wrapper .header, 162 | .header-wrapper .header .filter:after{ 163 | height: 100vh; 164 | } 165 | 166 | .header-wrapper .title-container{ 167 | position: absolute; 168 | top: 50%; 169 | margin-top: -180px; 170 | left: 0; 171 | width: 100%; 172 | } 173 | 174 | @media (max-width: 991px){ 175 | .navbar-transparent { 176 | background-color: transparent; 177 | } 178 | 179 | .navbar .navbar-collapse.collapse, .navbar .navbar-collapse.collapse.in, .navbar .navbar-collapse.collapsing{ 180 | display: block !important; 181 | } 182 | 183 | .navbar-collapse:before, 184 | .navbar-collapse{ 185 | background-color: transparent; 186 | } 187 | 188 | .navbar-collapse{ 189 | width: 260px; 190 | } 191 | 192 | } 193 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Light Bootstrap Dashboard](http://www.creative-tim.com/product/light-bootstrap-dashboard) 2 | 3 | ![alt text](http://s3.amazonaws.com/creativetim_bucket/products/32/original/opt_lbd_thumbnail.jpg "Light Bootstrap Dashboard") 4 | 5 | Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 4 and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM. 6 | 7 | The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard contains multiple handpicked and optimised plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product. 8 | 9 | It comes with 6 filter colors for the sidebar (`black`, `azure`,`green`,`orange`,`red`,`purple`) and an option to have a background image. 10 | 11 | Special thanks go to: Robert McIntosh for the notification system Chartist for the wonderful charts We are very excited to share this dashboard with you and we look forward to hearing your feedback! 12 | 13 | ## Links: 14 | 15 | - [Live Preview](http://demos.creative-tim.com/light-bootstrap-dashboard/examples/dashboard.html?ref=github-repo) 16 | - [Video Tutorial](https://www.youtube.com/watch?v=c3M3NQtFyqM) 17 | - [Light Bootstrap Dashboard PRO](https://www.creative-tim.com/product/light-bootstrap-dashboard-pro) (from $39) 18 | 19 | ## Quick start 20 | 21 | Quick start options: 22 | 23 | Download from Github. 24 | Download from Creative Tim. 25 | Clone the repo: git clone https://github.com/creativetimofficial/light-bootstrap-dashboard.git. 26 | 27 | ## Deploy 28 | 29 | :rocket: You can deploy your own version of the template to Genezio with one click: 30 | 31 | [![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/light-bootstrap-dashboard&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head) 32 | 33 | ### What's included 34 | 35 | Within the download you'll find the following directories and files: 36 | 37 | ``` 38 | Light Bootstrap Dashboard 39 | ├── CHANGELOG.md 40 | ├── README.md 41 | ├── assets 42 | │   ├── css 43 | │   ├── fonts 44 | │   ├── img 45 | │   ├── js 46 | │   │   ├── core 47 | │   │   │   ├── bootstrap.min.js 48 | │   │   │   ├── jquery.3.2.1.min.js 49 | │   │   │   └── popper.min.js 50 | │   │   ├── demo.js 51 | │   │   ├── light-bootstrap-dashboard.js 52 | │   │   └── plugins 53 | │   │   ├── bootstrap-datepicker.js 54 | │   │   ├── bootstrap-notify.js 55 | │   │   ├── bootstrap-switch.js 56 | │   │   ├── chartist.min.js 57 | │   │   └── nouislider.min.js 58 | │   └── main.css 59 | ├── deploy.sh 60 | ├── documentation 61 | │   ├── template.html 62 | │   └── tutorial-components.html 63 | ├── examples 64 | │   ├── dashboard.html 65 | │   ├── forms 66 | │   │   └── extended.html 67 | │   ├── icons.html 68 | │   ├── maps.html 69 | │   ├── notifications.html 70 | │   ├── table.html 71 | │   ├── typography.html 72 | │   ├── upgrade.html 73 | │   └── user.html 74 | └── package-lock.json 75 | ``` 76 | 77 | ### License 78 | 79 | Copyright 2019 Creative Tim (http://www.creative-tim.com) 80 | Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE.md) 81 | 82 | ## Useful Links 83 | 84 | More products from Creative Tim: http://www.creative-tim.com/products 85 | 86 | Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w 87 | 88 | Freebies: http://www.creative-tim.com/products 89 | 90 | Affiliate Program (earn money): http://www.creative-tim.com/affiliates/new 91 | 92 | Social Media: 93 | 94 | Twitter: https://twitter.com/CreativeTim 95 | 96 | Facebook: https://www.facebook.com/CreativeTim 97 | 98 | Dribbble: https://dribbble.com/creativetim 99 | 100 | Google+: https://plus.google.com/+CreativetimPage 101 | 102 | Instagram: https://instagram.com/creativetimofficial 103 | -------------------------------------------------------------------------------- /assets/sass/lbd/plugins/_animate.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | @charset "UTF-8"; 34 | 35 | /*! 36 | Animate.css - http://daneden.me/animate 37 | Licensed under the MIT license - http://opensource.org/licenses/MIT 38 | 39 | Copyright (c) 2015 Daniel Eden 40 | */ 41 | 42 | .animated { 43 | -webkit-animation-duration: 1s; 44 | animation-duration: 1s; 45 | -webkit-animation-fill-mode: both; 46 | animation-fill-mode: both; 47 | } 48 | 49 | .animated.infinite { 50 | -webkit-animation-iteration-count: infinite; 51 | animation-iteration-count: infinite; 52 | } 53 | 54 | .animated.hinge { 55 | -webkit-animation-duration: 2s; 56 | animation-duration: 2s; 57 | } 58 | 59 | .animated.bounceIn, 60 | .animated.bounceOut { 61 | -webkit-animation-duration: .75s; 62 | animation-duration: .75s; 63 | } 64 | 65 | .animated.flipOutX, 66 | .animated.flipOutY { 67 | -webkit-animation-duration: .75s; 68 | animation-duration: .75s; 69 | } 70 | 71 | @-webkit-keyframes shake { 72 | from, to { 73 | -webkit-transform: translate3d(0, 0, 0); 74 | transform: translate3d(0, 0, 0); 75 | } 76 | 77 | 10%, 30%, 50%, 70%, 90% { 78 | -webkit-transform: translate3d(-10px, 0, 0); 79 | transform: translate3d(-10px, 0, 0); 80 | } 81 | 82 | 20%, 40%, 60%, 80% { 83 | -webkit-transform: translate3d(10px, 0, 0); 84 | transform: translate3d(10px, 0, 0); 85 | } 86 | } 87 | 88 | @keyframes shake { 89 | from, to { 90 | -webkit-transform: translate3d(0, 0, 0); 91 | transform: translate3d(0, 0, 0); 92 | } 93 | 94 | 10%, 30%, 50%, 70%, 90% { 95 | -webkit-transform: translate3d(-10px, 0, 0); 96 | transform: translate3d(-10px, 0, 0); 97 | } 98 | 99 | 20%, 40%, 60%, 80% { 100 | -webkit-transform: translate3d(10px, 0, 0); 101 | transform: translate3d(10px, 0, 0); 102 | } 103 | } 104 | 105 | .shake { 106 | -webkit-animation-name: shake; 107 | animation-name: shake; 108 | } 109 | 110 | 111 | 112 | @-webkit-keyframes fadeInDown { 113 | from { 114 | opacity: 0; 115 | -webkit-transform: translate3d(0, -100%, 0); 116 | transform: translate3d(0, -100%, 0); 117 | } 118 | 119 | to { 120 | opacity: 1; 121 | -webkit-transform: none; 122 | transform: none; 123 | } 124 | } 125 | 126 | @keyframes fadeInDown { 127 | from { 128 | opacity: 0; 129 | -webkit-transform: translate3d(0, -100%, 0); 130 | transform: translate3d(0, -100%, 0); 131 | } 132 | 133 | to { 134 | opacity: 1; 135 | -webkit-transform: none; 136 | transform: none; 137 | } 138 | } 139 | 140 | .fadeInDown { 141 | -webkit-animation-name: fadeInDown; 142 | animation-name: fadeInDown; 143 | } 144 | 145 | 146 | @-webkit-keyframes fadeOut { 147 | from { 148 | opacity: 1; 149 | } 150 | 151 | to { 152 | opacity: 0; 153 | } 154 | } 155 | 156 | @keyframes fadeOut { 157 | from { 158 | opacity: 1; 159 | } 160 | 161 | to { 162 | opacity: 0; 163 | } 164 | } 165 | 166 | .fadeOut { 167 | -webkit-animation-name: fadeOut; 168 | animation-name: fadeOut; 169 | } 170 | 171 | @-webkit-keyframes fadeOutDown { 172 | from { 173 | opacity: 1; 174 | } 175 | 176 | to { 177 | opacity: 0; 178 | -webkit-transform: translate3d(0, 100%, 0); 179 | transform: translate3d(0, 100%, 0); 180 | } 181 | } 182 | 183 | @keyframes fadeOutDown { 184 | from { 185 | opacity: 1; 186 | } 187 | 188 | to { 189 | opacity: 0; 190 | -webkit-transform: translate3d(0, 100%, 0); 191 | transform: translate3d(0, 100%, 0); 192 | } 193 | } 194 | 195 | .fadeOutDown { 196 | -webkit-animation-name: fadeOutDown; 197 | animation-name: fadeOutDown; 198 | } 199 | 200 | @-webkit-keyframes fadeOutUp { 201 | from { 202 | opacity: 1; 203 | } 204 | 205 | to { 206 | opacity: 0; 207 | -webkit-transform: translate3d(0, -100%, 0); 208 | transform: translate3d(0, -100%, 0); 209 | } 210 | } 211 | 212 | @keyframes fadeOutUp { 213 | from { 214 | opacity: 1; 215 | } 216 | 217 | to { 218 | opacity: 0; 219 | -webkit-transform: translate3d(0, -100%, 0); 220 | transform: translate3d(0, -100%, 0); 221 | } 222 | } 223 | 224 | .fadeOutUp { 225 | -webkit-animation-name: fadeOutUp; 226 | animation-name: fadeOutUp; 227 | } 228 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | border-radius: $border-radius-base; 3 | box-shadow: 0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(63,63,68,.1); 4 | background-color: #FFFFFF; 5 | margin-bottom: 30px; 6 | 7 | .image{ 8 | width: 100%; 9 | overflow: hidden; 10 | height: 260px; 11 | border-radius: $border-radius-base $border-radius-base 0 0; 12 | position: relative; 13 | -webkit-transform-style: preserve-3d; 14 | -moz-transform-style: preserve-3d; 15 | transform-style: preserve-3d; 16 | 17 | img { 18 | width: 100%; 19 | } 20 | } 21 | .filter{ 22 | position: absolute; 23 | z-index: 2; 24 | background-color: rgba(0,0,0,.68); 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | text-align: center; 30 | 31 | @include opacity(0); 32 | 33 | .btn{ 34 | @include vertical-align(); 35 | } 36 | } 37 | &:hover .filter{ 38 | @include opacity(1); 39 | } 40 | .btn-hover{ 41 | @include opacity(0); 42 | } 43 | &:hover .btn-hover{ 44 | @include opacity(1); 45 | } 46 | .content{ 47 | padding: 15px 15px 10px 15px; 48 | } 49 | .header{ 50 | padding: 15px 15px 0; 51 | } 52 | .category, 53 | label{ 54 | font-size: $font-size-base; 55 | font-weight: $font-weight-normal; 56 | color: $dark-gray; 57 | margin-bottom: 0px; 58 | 59 | i{ 60 | font-size: $font-paragraph; 61 | } 62 | } 63 | 64 | label{ 65 | font-size: $font-size-small; 66 | margin-bottom: 5px; 67 | text-transform: uppercase; 68 | } 69 | 70 | .title{ 71 | margin: $none; 72 | color: $black-color; 73 | font-weight: $font-weight-light; 74 | } 75 | .avatar{ 76 | width: 30px; 77 | height: 30px; 78 | overflow: hidden; 79 | border-radius: 50%; 80 | margin-right: 5px; 81 | } 82 | .description{ 83 | font-size: $font-size-base; 84 | color: #333; 85 | } 86 | .footer{ 87 | padding: 0; 88 | background-color: $transparent-bg; 89 | line-height: 30px; 90 | 91 | .legend{ 92 | padding: 5px 0; 93 | } 94 | 95 | hr{ 96 | margin-top: 5px; 97 | margin-bottom: 5px; 98 | } 99 | } 100 | .stats{ 101 | color: #a9a9a9; 102 | } 103 | .footer div{ 104 | display: inline-block; 105 | } 106 | 107 | .author{ 108 | font-size: $font-size-small; 109 | font-weight: $font-weight-bold; 110 | text-transform: uppercase; 111 | } 112 | .author i{ 113 | font-size: $font-size-base; 114 | } 115 | h6{ 116 | font-size: $font-size-small; 117 | margin: 0; 118 | } 119 | &.card-separator:after{ 120 | height: 100%; 121 | right: -15px; 122 | top: 0; 123 | width: 1px; 124 | background-color: $medium-gray; 125 | content: ""; 126 | position: absolute; 127 | } 128 | 129 | .ct-chart{ 130 | margin: 30px 0 30px; 131 | height: 245px; 132 | } 133 | 134 | .table{ 135 | tbody td:first-child, 136 | thead th:first-child{ 137 | padding-left: 15px; 138 | } 139 | 140 | tbody td:last-child, 141 | thead th:last-child{ 142 | padding-right: 15px; 143 | } 144 | } 145 | 146 | .alert{ 147 | border-radius: $border-radius-base; 148 | position: relative; 149 | 150 | &.alert-with-icon{ 151 | padding-left: 65px; 152 | } 153 | } 154 | } 155 | .card-user{ 156 | .image{ 157 | height: 110px; 158 | } 159 | .image-plain{ 160 | height: 0; 161 | margin-top: 110px; 162 | } 163 | .author{ 164 | text-align: center; 165 | text-transform: none; 166 | margin-top: -70px; 167 | } 168 | .avatar{ 169 | width: 124px; 170 | height: 124px; 171 | border: 5px solid #FFFFFF; 172 | position: relative; 173 | margin-bottom: 15px; 174 | 175 | &.border-gray{ 176 | border-color: #EEEEEE; 177 | } 178 | } 179 | .title{ 180 | line-height: 24px; 181 | } 182 | .content{ 183 | min-height: 240px; 184 | } 185 | } 186 | 187 | .card-user, 188 | .card-price{ 189 | .footer{ 190 | padding: 5px 15px 10px; 191 | } 192 | hr{ 193 | margin: 5px 15px; 194 | } 195 | } 196 | .card-plain{ 197 | background-color: transparent; 198 | box-shadow: none; 199 | border-radius: 0; 200 | 201 | .image{ 202 | border-radius: 4px; 203 | } 204 | } 205 | 206 | 207 | 208 | -------------------------------------------------------------------------------- /BS3/assets/js/light-bootstrap-dashboard.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Light Bootstrap Dashboard - v1.4.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | var searchVisible = 0; 18 | var transparent = true; 19 | 20 | var transparentDemo = true; 21 | var fixedTop = false; 22 | 23 | var navbar_initialized = false; 24 | 25 | $(document).ready(function(){ 26 | window_width = $(window).width(); 27 | 28 | // check if there is an image set for the sidebar's background 29 | lbd.checkSidebarImage(); 30 | 31 | // Init navigation toggle for small screens 32 | lbd.initRightMenu(); 33 | 34 | // Activate the tooltips 35 | $('[rel="tooltip"]').tooltip(); 36 | 37 | $('.form-control').on("focus", function(){ 38 | $(this).parent('.input-group').addClass("input-group-focus"); 39 | }).on("blur", function(){ 40 | $(this).parent(".input-group").removeClass("input-group-focus"); 41 | }); 42 | 43 | // Fixes sub-nav not working as expected on IOS 44 | $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }); 45 | }); 46 | 47 | $(document).on('click', '.navbar-toggle', function(){ 48 | $toggle = $(this); 49 | 50 | if(lbd.misc.navbar_menu_visible == 1) { 51 | $('html').removeClass('nav-open'); 52 | lbd.misc.navbar_menu_visible = 0; 53 | $('#bodyClick').remove(); 54 | setTimeout(function(){ 55 | $toggle.removeClass('toggled'); 56 | }, 550); 57 | } else { 58 | setTimeout(function(){ 59 | $toggle.addClass('toggled'); 60 | }, 580); 61 | div = '
'; 62 | $(div).appendTo('body').click(function() { 63 | $('html').removeClass('nav-open'); 64 | lbd.misc.navbar_menu_visible = 0; 65 | setTimeout(function(){ 66 | $toggle.removeClass('toggled'); 67 | $('#bodyClick').remove(); 68 | }, 550); 69 | }); 70 | 71 | $('html').addClass('nav-open'); 72 | lbd.misc.navbar_menu_visible = 1; 73 | } 74 | }); 75 | 76 | $(window).on('resize', function(){ 77 | if(navbar_initialized){ 78 | lbd.initRightMenu(); 79 | navbar_initialized = true; 80 | } 81 | }); 82 | 83 | lbd = { 84 | misc:{ 85 | navbar_menu_visible: 0 86 | }, 87 | 88 | checkSidebarImage: function(){ 89 | $sidebar = $('.sidebar'); 90 | image_src = $sidebar.data('image'); 91 | 92 | if(image_src !== undefined){ 93 | sidebar_container = '
' 94 | $sidebar.append(sidebar_container); 95 | } 96 | }, 97 | 98 | initRightMenu: debounce(function(){ 99 | if(!navbar_initialized){ 100 | $sidebar_wrapper = $('.sidebar-wrapper'); 101 | $navbar = $('nav').find('.navbar-collapse').html(); 102 | 103 | mobile_menu_content = ''; 104 | 105 | nav_content = $navbar; 106 | 107 | nav_content = '
    ' + nav_content + '
'; 108 | 109 | // navbar_form = $('nav').find('.navbar-form').get(0).outerHTML; 110 | 111 | $sidebar_nav = $sidebar_wrapper.find(' > .nav'); 112 | 113 | // insert the navbar form before the sidebar list 114 | $nav_content = $(nav_content); 115 | // $navbar_form = $(navbar_form); 116 | $nav_content.insertBefore($sidebar_nav); 117 | // $navbar_form.insertBefore($nav_content); 118 | 119 | $(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) { 120 | event.stopPropagation(); 121 | 122 | }); 123 | 124 | mobile_menu_initialized = true; 125 | } else { 126 | if($(window).width() > 991){ 127 | // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px 128 | // $sidebar_wrapper.find('.navbar-form').remove(); 129 | $sidebar_wrapper.find('.nav-mobile-menu').remove(); 130 | 131 | mobile_menu_initialized = false; 132 | } 133 | } 134 | },200) 135 | } 136 | 137 | 138 | // Returns a function, that, as long as it continues to be invoked, will not 139 | // be triggered. The function will be called after it stops being called for 140 | // N milliseconds. If `immediate` is passed, trigger the function on the 141 | // leading edge, instead of the trailing. 142 | 143 | function debounce(func, wait, immediate) { 144 | var timeout; 145 | return function() { 146 | var context = this, args = arguments; 147 | clearTimeout(timeout); 148 | timeout = setTimeout(function() { 149 | timeout = null; 150 | if (!immediate) func.apply(context, args); 151 | }, wait); 152 | if (immediate && !timeout) func.apply(context, args); 153 | }; 154 | }; 155 | -------------------------------------------------------------------------------- /BS3/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Light Bootstrap Dashboard by Creative Tim 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 40 | 41 |
42 | 47 | 48 | 57 |
58 |
59 | 60 |
61 | 91 | 92 | 93 |
94 |
95 |
96 | 97 |
98 |
99 |
100 | 101 | 102 |
103 |
104 | 114 |

115 | © Creative Tim, made with love for a better web 116 |

117 |
118 |
119 | 120 |
121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /BS3/documentation/tutorial-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tutorial Components - Light Bootstrap Dashboard Pro by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 65 | 66 |
68 |
69 |
70 |

Light Bootstrap Dashboard

71 |

v1.4.0

72 |

We are constantly doing updates for you.

73 | View Documentation 74 |
75 |
76 |
77 | 78 | 79 | 80 | 81 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /assets/sass/lbd/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | border-radius: $border-radius-base; 3 | background-color: $white-color; 4 | margin-bottom: 30px; 5 | 6 | .card-image{ 7 | width: 100%; 8 | overflow: hidden; 9 | height: 260px; 10 | border-radius: $border-radius-base $border-radius-base 0 0; 11 | position: relative; 12 | -webkit-transform-style: preserve-3d; 13 | -moz-transform-style: preserve-3d; 14 | transform-style: preserve-3d; 15 | 16 | img { 17 | width: 100%; 18 | } 19 | } 20 | .filter{ 21 | position: absolute; 22 | z-index: 2; 23 | background-color: rgba(0,0,0,.68); 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | text-align: center; 29 | 30 | @include opacity(0); 31 | 32 | .btn{ 33 | @include vertical-align(); 34 | } 35 | } 36 | &:hover .filter{ 37 | @include opacity(1); 38 | } 39 | .btn-hover{ 40 | @include opacity(0); 41 | } 42 | &:hover .btn-hover{ 43 | @include opacity(1); 44 | } 45 | .card-body{ 46 | padding: 15px 15px 10px 15px; 47 | } 48 | .card-header{ 49 | padding: 15px 15px 0; 50 | background-color: $white-color; 51 | border-bottom: none !important; 52 | 53 | } 54 | .card-category, 55 | label{ 56 | font-size: $font-size-base; 57 | font-weight: $font-weight-normal; 58 | color: $dark-gray; 59 | margin-bottom: 0px; 60 | 61 | i{ 62 | font-size: $font-paragraph; 63 | } 64 | } 65 | 66 | label{ 67 | font-size: $font-size-small; 68 | margin-bottom: 5px; 69 | text-transform: uppercase; 70 | } 71 | 72 | .card-title{ 73 | margin: $none; 74 | color: $black-color; 75 | font-weight: $font-weight-light; 76 | } 77 | .avatar{ 78 | width: 30px; 79 | height: 30px; 80 | overflow: hidden; 81 | border-radius: 50%; 82 | margin-right: 5px; 83 | } 84 | .description{ 85 | font-size: $font-size-base; 86 | color: #333; 87 | } 88 | .card-footer{ 89 | padding-top: 0; 90 | background-color: $transparent-bg; 91 | line-height: 30px; 92 | border-top: none !important; 93 | font-size: 14px; 94 | 95 | .legend{ 96 | padding: 5px 0; 97 | } 98 | 99 | hr{ 100 | margin-top: 5px; 101 | margin-bottom: 5px; 102 | } 103 | } 104 | .stats{ 105 | color: #a9a9a9; 106 | } 107 | .card-footer div{ 108 | display: inline-block; 109 | } 110 | 111 | .author{ 112 | font-size: $font-size-small; 113 | font-weight: $font-weight-bold; 114 | text-transform: uppercase; 115 | } 116 | .author i{ 117 | font-size: $font-size-base; 118 | } 119 | h6{ 120 | font-size: $font-size-small; 121 | margin: 0; 122 | } 123 | &.card-separator:after{ 124 | height: 100%; 125 | right: -15px; 126 | top: 0; 127 | width: 1px; 128 | background-color: $medium-gray; 129 | card-body: ""; 130 | position: absolute; 131 | } 132 | 133 | .ct-chart{ 134 | margin: 30px 0 30px; 135 | height: 245px; 136 | } 137 | 138 | .ct-label{ 139 | font-size: 1rem !important; 140 | } 141 | 142 | .table{ 143 | tbody td:first-child, 144 | thead th:first-child{ 145 | padding-left: 15px; 146 | } 147 | 148 | tbody td:last-child, 149 | thead th:last-child{ 150 | padding-right: 15px; 151 | display: inline-flex; 152 | } 153 | } 154 | 155 | .alert{ 156 | border-radius: $border-radius-base; 157 | position: relative; 158 | 159 | &.alert-with-icon{ 160 | padding-left: 65px; 161 | } 162 | } 163 | } 164 | 165 | 166 | 167 | .card-stats{ 168 | .card-body{ 169 | padding: 15px 15px 0px; 170 | 171 | .numbers{ 172 | font-size: 1.8rem; 173 | text-align: right; 174 | 175 | p{ 176 | margin-bottom: 0; 177 | } 178 | } 179 | } 180 | .card-footer{ 181 | padding: 0px 15px 10px 15px; 182 | 183 | 184 | } 185 | .icon-big { 186 | font-size: 3em; 187 | min-height: 64px; 188 | 189 | i{ 190 | font-weight: 700; 191 | line-height: 59px; 192 | } 193 | } 194 | 195 | 196 | } 197 | 198 | .card-user{ 199 | .card-image{ 200 | height: 110px; 201 | } 202 | .card-image-plain{ 203 | height: 0; 204 | margin-top: 110px; 205 | } 206 | .author{ 207 | text-align: center; 208 | text-transform: none; 209 | margin-top: -70px; 210 | } 211 | .avatar{ 212 | width: 124px; 213 | height: 124px; 214 | border: 5px solid #FFFFFF; 215 | position: relative; 216 | margin-bottom: 15px; 217 | 218 | &.border-gray{ 219 | border-color: #EEEEEE; 220 | } 221 | } 222 | .title{ 223 | line-height: 24px; 224 | } 225 | .card-body{ 226 | min-height: 240px; 227 | } 228 | } 229 | 230 | .card-user, 231 | .card-price{ 232 | .card-footer{ 233 | padding: 5px 15px 10px; 234 | } 235 | hr{ 236 | margin: 5px 15px; 237 | } 238 | } 239 | .card-plain{ 240 | background-color: transparent; 241 | box-shadow: none; 242 | border-radius: 0; 243 | 244 | .card-image{ 245 | border-radius: 4px; 246 | } 247 | } 248 | 249 | .card.card-plain{ 250 | border: none !important; 251 | 252 | .card-header{ 253 | background-color: transparent !important; 254 | } 255 | } 256 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_sidebar-and-main-panel.scss: -------------------------------------------------------------------------------- 1 | .sidebar{ 2 | position: fixed; 3 | top: 0; 4 | bottom: 0; 5 | right: auto; 6 | left: 0; 7 | width: 260px; 8 | display: block; 9 | z-index: 1; 10 | color: #fff; 11 | font-weight: 200; 12 | background-size: cover; 13 | background-position: center center; 14 | 15 | .sidebar-wrapper{ 16 | position: relative; 17 | max-height: calc(100vh - 75px); 18 | min-height: 100%; 19 | overflow: auto; 20 | width: 260px; 21 | z-index: 4; 22 | 23 | padding-bottom: 100px; 24 | } 25 | 26 | .sidebar-background{ 27 | position: absolute; 28 | z-index: 1; 29 | height: 100%; 30 | width: 100%; 31 | display: block; 32 | top: 0; 33 | left: 0; 34 | background-size: cover; 35 | background-position: center center; 36 | } 37 | 38 | .logo{ 39 | padding: $navbar-padding-a; 40 | border-bottom: 1px solid rgba(255, 255, 255, 0.2); 41 | 42 | p{ 43 | float: left; 44 | font-size: 20px; 45 | margin: 10px 10px; 46 | color: $white-color; 47 | line-height: 20px; 48 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 49 | } 50 | 51 | .simple-text{ 52 | text-transform: uppercase; 53 | padding: $padding-small-vertical $padding-zero; 54 | display: block; 55 | font-size: $font-size-large; 56 | color: $white-color; 57 | text-align: center; 58 | font-weight: $font-weight-normal; 59 | line-height: 30px; 60 | } 61 | } 62 | 63 | .logo-tim{ 64 | border-radius: 50%; 65 | border: 1px solid #333; 66 | display: block; 67 | height: 61px; 68 | width: 61px; 69 | float: left; 70 | overflow: hidden; 71 | 72 | img{ 73 | width: 60px; 74 | height: 60px; 75 | } 76 | } 77 | 78 | .nav{ 79 | margin-top: 20px; 80 | float: none; 81 | 82 | .open > a, 83 | li.dropdown .dropdown-menu li:hover > a, 84 | li:hover > a{ 85 | background-color: rgba(255,255,255,0.13); 86 | opacity: 1; 87 | } 88 | 89 | li{ 90 | > a{ 91 | color: #FFFFFF; 92 | margin: 5px 15px; 93 | opacity: .86; 94 | border-radius: 4px; 95 | display: block; 96 | } 97 | 98 | &.active > a{ 99 | color: #FFFFFF; 100 | opacity: 1; 101 | background: rgba(255,255,255,0.23); 102 | 103 | } 104 | 105 | &.separator{ 106 | margin: 15px 0; 107 | border-bottom: 1px solid rgba(255, 255, 255, 0.2); 108 | 109 | & + li { 110 | margin-top: 31px; 111 | } 112 | } 113 | } 114 | 115 | p{ 116 | margin: 0; 117 | line-height: 30px; 118 | font-size: 12px; 119 | font-weight: 600; 120 | text-transform: uppercase; 121 | margin-left: 45px; 122 | } 123 | 124 | i{ 125 | font-size: 28px; 126 | float: left; 127 | margin-right: 15px; 128 | line-height: 30px; 129 | width: 30px; 130 | text-align: center; 131 | } 132 | 133 | .caret{ 134 | margin-top: 13px; 135 | position: absolute; 136 | right: 30px; 137 | } 138 | } 139 | 140 | .logo{ 141 | padding: $navbar-padding-a; 142 | border-bottom: 1px solid rgba(255, 255, 255, 0.2); 143 | 144 | p{ 145 | float: left; 146 | font-size: 20px; 147 | margin: 10px 10px; 148 | color: $white-color; 149 | line-height: 20px; 150 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 151 | } 152 | 153 | .simple-text{ 154 | text-transform: uppercase; 155 | padding: $padding-small-vertical $padding-zero; 156 | display: block; 157 | font-size: $font-size-large; 158 | color: $white-color; 159 | text-align: center; 160 | font-weight: $font-weight-normal; 161 | line-height: 30px; 162 | } 163 | } 164 | 165 | .logo-tim{ 166 | border-radius: 50%; 167 | border: 1px solid #333; 168 | display: block; 169 | height: 61px; 170 | width: 61px; 171 | float: left; 172 | overflow: hidden; 173 | 174 | img{ 175 | width: 60px; 176 | height: 60px; 177 | } 178 | } 179 | 180 | &:after, 181 | &:before{ 182 | display: block; 183 | content: ""; 184 | position: absolute; 185 | width: 100%; 186 | height: 100%; 187 | top: 0; 188 | left: 0; 189 | z-index: 2; 190 | } 191 | 192 | &:before{ 193 | opacity: .33; 194 | background: #000000; 195 | } 196 | 197 | &:after{ 198 | @include icon-gradient($black-color-top, $black-color-bottom); 199 | z-index: 3; 200 | opacity: 1; 201 | } 202 | 203 | &[data-image]:after, 204 | &.has-image:after{ 205 | opacity: .77; 206 | } 207 | 208 | &[data-color="blue"]:after{ 209 | @include icon-gradient($new-dark-blue, $blue-color-bottom); 210 | } 211 | &[data-color="azure"]:after{ 212 | @include icon-gradient($new-blue, $azure-color-bottom); 213 | } 214 | &[data-color="green"]:after{ 215 | @include icon-gradient($new-green, $green-color-bottom); 216 | } 217 | &[data-color="orange"]:after{ 218 | @include icon-gradient($new-orange, $orange-color-bottom); 219 | } 220 | &[data-color="red"]:after{ 221 | @include icon-gradient($new-red, $red-color-bottom); 222 | } 223 | &[data-color="purple"]:after{ 224 | @include icon-gradient($new-purple, $purple-color-bottom); 225 | } 226 | } 227 | 228 | 229 | .main-panel{ 230 | position: relative; 231 | z-index: 2; 232 | float: right; 233 | width: $sidebar-width; 234 | 235 | > .content{ 236 | padding: 30px 15px; 237 | min-height: calc(100% - 123px); 238 | } 239 | 240 | > .footer{ 241 | border-top: 1px solid #e7e7e7; 242 | } 243 | 244 | .navbar{ 245 | margin-bottom: 0; 246 | } 247 | } 248 | 249 | .sidebar, 250 | .main-panel{ 251 | max-height: 100%; 252 | height: 100%; 253 | -webkit-transition-property: top,bottom; 254 | transition-property: top,bottom; 255 | -webkit-transition-duration: .2s,.2s; 256 | transition-duration: .2s,.2s; 257 | -webkit-transition-timing-function: linear,linear; 258 | transition-timing-function: linear,linear; 259 | -webkit-overflow-scrolling: touch; 260 | } 261 | -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // User select 2 | // For selecting text on the page 3 | 4 | @mixin user-select($select) { 5 | -webkit-user-select: $select; 6 | -moz-user-select: $select; 7 | -ms-user-select: $select; // IE10+ 8 | user-select: $select; 9 | } 10 | 11 | @mixin box-shadow($shadow...) { 12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 13 | box-shadow: $shadow; 14 | } 15 | 16 | // Box sizing 17 | @mixin box-sizing($boxmodel) { 18 | -webkit-box-sizing: $boxmodel; 19 | -moz-box-sizing: $boxmodel; 20 | box-sizing: $boxmodel; 21 | } 22 | 23 | 24 | @mixin transition($time, $type){ 25 | -webkit-transition: all $time $type; 26 | -moz-transition: all $time $type; 27 | -o-transition: all $time $type; 28 | -ms-transition: all $time $type; 29 | transition: all $time $type; 30 | } 31 | 32 | @mixin transform-scale($value){ 33 | -webkit-transform: scale($value); 34 | -moz-transform: scale($value); 35 | -o-transform: scale($value); 36 | -ms-transform: scale($value); 37 | transform: scale($value); 38 | } 39 | 40 | @mixin transform-translate-x($value){ 41 | -webkit-transform: translate3d($value, 0, 0); 42 | -moz-transform: translate3d($value, 0, 0); 43 | -o-transform: translate3d($value, 0, 0); 44 | -ms-transform: translate3d($value, 0, 0); 45 | transform: translate3d($value, 0, 0); 46 | } 47 | 48 | @mixin transform-origin($coordinates){ 49 | -webkit-transform-origin: $coordinates; 50 | -moz-transform-origin: $coordinates; 51 | -o-transform-origin: $coordinates; 52 | -ms-transform-origin: $coordinates; 53 | transform-origin: $coordinates; 54 | } 55 | 56 | @mixin icon-gradient ($top-color, $bottom-color){ 57 | background: $top-color; 58 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); 59 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color)); 60 | background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%); 61 | background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%); 62 | background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%); 63 | background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%); 64 | background-size: 150% 150%; 65 | } 66 | 67 | @mixin radial-gradient($extern-color, $center-color){ 68 | background: $extern-color; 69 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 70 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ 71 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ 72 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ 73 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ 74 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ 75 | background-size: 550% 450%; 76 | } 77 | 78 | @mixin vertical-align { 79 | position: relative; 80 | top: 50%; 81 | -webkit-transform: translateY(-50%); 82 | -ms-transform: translateY(-50%); 83 | transform: translateY(-50%); 84 | } 85 | 86 | @mixin rotate-180(){ 87 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 88 | -webkit-transform: rotate(180deg); 89 | -ms-transform: rotate(180deg); 90 | transform: rotate(180deg); 91 | } 92 | 93 | @mixin bar-animation($type){ 94 | -webkit-animation: $type 500ms linear 0s; 95 | -moz-animation: $type 500ms linear 0s; 96 | animation: $type 500ms 0s; 97 | -webkit-animation-fill-mode: forwards; 98 | -moz-animation-fill-mode: forwards; 99 | animation-fill-mode: forwards; 100 | } 101 | 102 | @mixin topbar-x-rotation(){ 103 | @keyframes topbar-x { 104 | 0% {top: 0px; transform: rotate(0deg); } 105 | 45% {top: 6px; transform: rotate(145deg); } 106 | 75% {transform: rotate(130deg); } 107 | 100% {transform: rotate(135deg); } 108 | } 109 | @-webkit-keyframes topbar-x { 110 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 111 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 112 | 75% {-webkit-transform: rotate(130deg); } 113 | 100% { -webkit-transform: rotate(135deg); } 114 | } 115 | @-moz-keyframes topbar-x { 116 | 0% {top: 0px; -moz-transform: rotate(0deg); } 117 | 45% {top: 6px; -moz-transform: rotate(145deg); } 118 | 75% {-moz-transform: rotate(130deg); } 119 | 100% { -moz-transform: rotate(135deg); } 120 | } 121 | } 122 | 123 | @mixin topbar-back-rotation(){ 124 | @keyframes topbar-back { 125 | 0% { top: 6px; transform: rotate(135deg); } 126 | 45% { transform: rotate(-10deg); } 127 | 75% { transform: rotate(5deg); } 128 | 100% { top: 0px; transform: rotate(0); } 129 | } 130 | 131 | @-webkit-keyframes topbar-back { 132 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 133 | 45% { -webkit-transform: rotate(-10deg); } 134 | 75% { -webkit-transform: rotate(5deg); } 135 | 100% { top: 0px; -webkit-transform: rotate(0); } 136 | } 137 | 138 | @-moz-keyframes topbar-back { 139 | 0% { top: 6px; -moz-transform: rotate(135deg); } 140 | 45% { -moz-transform: rotate(-10deg); } 141 | 75% { -moz-transform: rotate(5deg); } 142 | 100% { top: 0px; -moz-transform: rotate(0); } 143 | } 144 | } 145 | 146 | @mixin bottombar-x-rotation(){ 147 | @keyframes bottombar-x { 148 | 0% {bottom: 0px; transform: rotate(0deg);} 149 | 45% {bottom: 6px; transform: rotate(-145deg);} 150 | 75% {transform: rotate(-130deg);} 151 | 100% {transform: rotate(-135deg);} 152 | } 153 | @-webkit-keyframes bottombar-x { 154 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 155 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 156 | 75% {-webkit-transform: rotate(-130deg);} 157 | 100% {-webkit-transform: rotate(-135deg);} 158 | } 159 | @-moz-keyframes bottombar-x { 160 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 161 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 162 | 75% {-moz-transform: rotate(-130deg);} 163 | 100% {-moz-transform: rotate(-135deg);} 164 | } 165 | } 166 | 167 | @mixin bottombar-back-rotation{ 168 | @keyframes bottombar-back { 169 | 0% { bottom: 6px;transform: rotate(-135deg);} 170 | 45% { transform: rotate(10deg);} 171 | 75% { transform: rotate(-5deg);} 172 | 100% { bottom: 0px;transform: rotate(0);} 173 | } 174 | @-webkit-keyframes bottombar-back { 175 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 176 | 45% {-webkit-transform: rotate(10deg);} 177 | 75% {-webkit-transform: rotate(-5deg);} 178 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 179 | } 180 | @-moz-keyframes bottombar-back { 181 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 182 | 45% {-moz-transform: rotate(10deg);} 183 | 75% {-moz-transform: rotate(-5deg);} 184 | 100% {bottom: 0px;-moz-transform: rotate(0);} 185 | } 186 | 187 | } 188 | 189 | 190 | -------------------------------------------------------------------------------- /assets/js/light-bootstrap-dashboard.js: -------------------------------------------------------------------------------- 1 | // ========================================================= 2 | // Light Bootstrap Dashboard - v2.0.1 3 | // ========================================================= 4 | // 5 | // Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard 6 | // Copyright 2019 Creative Tim (https://www.creative-tim.com) 7 | // Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard/blob/master/LICENSE) 8 | // 9 | // Coded by Creative Tim 10 | // 11 | // ========================================================= 12 | // 13 | // The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | var searchVisible = 0; 16 | var transparent = true; 17 | 18 | var transparentDemo = true; 19 | var fixedTop = false; 20 | 21 | var navbar_initialized = false; 22 | var mobile_menu_visible = 0, 23 | mobile_menu_initialized = false, 24 | toggle_initialized = false, 25 | bootstrap_nav_initialized = false, 26 | $sidebar, 27 | isWindows; 28 | 29 | $(document).ready(function() { 30 | window_width = $(window).width(); 31 | 32 | // check if there is an image set for the sidebar's background 33 | lbd.checkSidebarImage(); 34 | 35 | // Init navigation toggle for small screens 36 | if (window_width <= 991) { 37 | lbd.initRightMenu(); 38 | } 39 | 40 | // Activate the tooltips 41 | $('[rel="tooltip"]').tooltip(); 42 | 43 | // Activate regular switches 44 | if ($("[data-toggle='switch']").length != 0) { 45 | $("[data-toggle='switch']").bootstrapSwitch(); 46 | } 47 | 48 | $('.form-control').on("focus", function() { 49 | $(this).parent('.input-group').addClass("input-group-focus"); 50 | }).on("blur", function() { 51 | $(this).parent(".input-group").removeClass("input-group-focus"); 52 | }); 53 | 54 | // Fixes sub-nav not working as expected on IOS 55 | $('body').on('touchstart.dropdown', '.dropdown-menu', function(e) { 56 | e.stopPropagation(); 57 | }); 58 | }); 59 | 60 | // activate collapse right menu when the windows is resized 61 | $(window).resize(function() { 62 | if ($(window).width() <= 991) { 63 | lbd.initRightMenu(); 64 | } 65 | }); 66 | 67 | lbd = { 68 | misc: { 69 | navbar_menu_visible: 0 70 | }, 71 | checkSidebarImage: function() { 72 | $sidebar = $('.sidebar'); 73 | image_src = $sidebar.data('image'); 74 | 75 | if (image_src !== undefined) { 76 | sidebar_container = '
' 77 | $sidebar.append(sidebar_container); 78 | } else if (mobile_menu_initialized == true) { 79 | // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px 80 | $sidebar_wrapper.find('.navbar-form').remove(); 81 | $sidebar_wrapper.find('.nav-mobile-menu').remove(); 82 | 83 | mobile_menu_initialized = false; 84 | } 85 | }, 86 | 87 | initRightMenu: function() { 88 | $sidebar_wrapper = $('.sidebar-wrapper'); 89 | 90 | if (!mobile_menu_initialized) { 91 | 92 | $navbar = $('nav').find('.navbar-collapse').first().clone(true); 93 | 94 | nav_content = ''; 95 | mobile_menu_content = ''; 96 | 97 | //add the content from the regular header to the mobile menu 98 | $navbar.children('ul').each(function() { 99 | 100 | content_buff = $(this).html(); 101 | nav_content = nav_content + content_buff; 102 | }); 103 | 104 | nav_content = '
    ' + nav_content + '
'; 105 | 106 | $navbar_form = $('nav').find('.navbar-form').clone(true); 107 | 108 | $sidebar_nav = $sidebar_wrapper.find(' > .nav'); 109 | 110 | // insert the navbar form before the sidebar list 111 | $nav_content = $(nav_content); 112 | $nav_content.insertBefore($sidebar_nav); 113 | $navbar_form.insertBefore($nav_content); 114 | 115 | $(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) { 116 | event.stopPropagation(); 117 | 118 | }); 119 | 120 | mobile_menu_initialized = true; 121 | } else { 122 | console.log('window with:' + $(window).width()); 123 | if ($(window).width() > 991) { 124 | // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px 125 | $sidebar_wrapper.find('.navbar-form').remove(); 126 | $sidebar_wrapper.find('.nav-mobile-menu').remove(); 127 | 128 | mobile_menu_initialized = false; 129 | } 130 | } 131 | 132 | if (!toggle_initialized) { 133 | $toggle = $('.navbar-toggler'); 134 | 135 | $toggle.click(function() { 136 | 137 | if (mobile_menu_visible == 1) { 138 | $('html').removeClass('nav-open'); 139 | 140 | $('.close-layer').remove(); 141 | setTimeout(function() { 142 | $toggle.removeClass('toggled'); 143 | }, 400); 144 | 145 | mobile_menu_visible = 0; 146 | } else { 147 | setTimeout(function() { 148 | $toggle.addClass('toggled'); 149 | }, 430); 150 | 151 | 152 | main_panel_height = $('.main-panel')[0].scrollHeight; 153 | $layer = $('
'); 154 | $layer.css('height', main_panel_height + 'px'); 155 | $layer.appendTo(".main-panel"); 156 | 157 | setTimeout(function() { 158 | $layer.addClass('visible'); 159 | }, 100); 160 | 161 | $layer.click(function() { 162 | $('html').removeClass('nav-open'); 163 | mobile_menu_visible = 0; 164 | 165 | $layer.removeClass('visible'); 166 | 167 | setTimeout(function() { 168 | $layer.remove(); 169 | $toggle.removeClass('toggled'); 170 | 171 | }, 400); 172 | }); 173 | 174 | $('html').addClass('nav-open'); 175 | mobile_menu_visible = 1; 176 | 177 | } 178 | }); 179 | 180 | toggle_initialized = true; 181 | } 182 | } 183 | } 184 | 185 | 186 | 187 | // Returns a function, that, as long as it continues to be invoked, will not 188 | // be triggered. The function will be called after it stops being called for 189 | // N milliseconds. If `immediate` is passed, trigger the function on the 190 | // leading edge, instead of the trailing. 191 | 192 | function debounce(func, wait, immediate) { 193 | var timeout; 194 | return function() { 195 | var context = this, 196 | args = arguments; 197 | clearTimeout(timeout); 198 | timeout = setTimeout(function() { 199 | timeout = null; 200 | if (!immediate) func.apply(context, args); 201 | }, wait); 202 | if (immediate && !timeout) func.apply(context, args); 203 | }; 204 | }; 205 | -------------------------------------------------------------------------------- /assets/sass/lbd/_chartist.scss: -------------------------------------------------------------------------------- 1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { 2 | display: block; 3 | position: relative; 4 | width: $width; 5 | 6 | &:before { 7 | display: block; 8 | float: left; 9 | content: ""; 10 | width: 0; 11 | height: 0; 12 | padding-bottom: $ratio * 100%; 13 | } 14 | 15 | &:after { 16 | content: ""; 17 | display: table; 18 | clear: both; 19 | } 20 | 21 | > svg { 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | } 28 | 29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { 30 | -webkit-box-align: $ct-text-align; 31 | -webkit-align-items: $ct-text-align; 32 | -ms-flex-align: $ct-text-align; 33 | align-items: $ct-text-align; 34 | -webkit-box-pack: $ct-text-justify; 35 | -webkit-justify-content: $ct-text-justify; 36 | -ms-flex-pack: $ct-text-justify; 37 | justify-content: $ct-text-justify; 38 | // Fallback to text-align for non-flex browsers 39 | @if($ct-text-justify == 'flex-start') { 40 | text-align: left; 41 | } @else if ($ct-text-justify == 'flex-end') { 42 | text-align: right; 43 | } @else { 44 | text-align: center; 45 | } 46 | } 47 | 48 | @mixin ct-flex() { 49 | // Fallback to block 50 | display: block; 51 | display: -webkit-box; 52 | display: -moz-box; 53 | display: -ms-flexbox; 54 | display: -webkit-flex; 55 | display: flex; 56 | } 57 | 58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { 59 | fill: $ct-text-color; 60 | color: $ct-text-color; 61 | font-size: $ct-text-size; 62 | line-height: $ct-text-line-height; 63 | } 64 | 65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { 66 | stroke: $ct-grid-color; 67 | stroke-width: $ct-grid-width; 68 | 69 | @if ($ct-grid-dasharray) { 70 | stroke-dasharray: $ct-grid-dasharray; 71 | } 72 | } 73 | 74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { 75 | stroke-width: $ct-point-size; 76 | stroke-linecap: $ct-point-shape; 77 | } 78 | 79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { 80 | fill: none; 81 | stroke-width: $ct-line-width; 82 | 83 | @if ($ct-line-dasharray) { 84 | stroke-dasharray: $ct-line-dasharray; 85 | } 86 | } 87 | 88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { 89 | stroke: none; 90 | fill-opacity: $ct-area-opacity; 91 | } 92 | 93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { 94 | fill: none; 95 | stroke-width: $ct-bar-width; 96 | } 97 | 98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { 99 | fill: none; 100 | stroke-width: $ct-donut-width; 101 | } 102 | 103 | @mixin ct-chart-series-color($color) { 104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { 105 | stroke: $color; 106 | } 107 | 108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} { 109 | fill: $color; 110 | } 111 | } 112 | 113 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { 114 | 115 | .#{$ct-class-label} { 116 | @include ct-chart-label($ct-text-color, $ct-text-size); 117 | } 118 | 119 | .#{$ct-class-chart-line} .#{$ct-class-label}, 120 | .#{$ct-class-chart-bar} .#{$ct-class-label} { 121 | @include ct-flex(); 122 | } 123 | 124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 125 | @include ct-align-justify(flex-end, flex-start); 126 | // Fallback for browsers that don't support foreignObjects 127 | text-anchor: start; 128 | } 129 | 130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 131 | @include ct-align-justify(flex-start, flex-start); 132 | // Fallback for browsers that don't support foreignObjects 133 | text-anchor: start; 134 | } 135 | 136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 137 | @include ct-align-justify(flex-end, flex-end); 138 | // Fallback for browsers that don't support foreignObjects 139 | text-anchor: end; 140 | } 141 | 142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 143 | @include ct-align-justify(flex-end, flex-start); 144 | // Fallback for browsers that don't support foreignObjects 145 | text-anchor: start; 146 | } 147 | 148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 149 | @include ct-align-justify(flex-end, center); 150 | // Fallback for browsers that don't support foreignObjects 151 | text-anchor: start; 152 | } 153 | 154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 155 | @include ct-align-justify(flex-start, center); 156 | // Fallback for browsers that don't support foreignObjects 157 | text-anchor: start; 158 | } 159 | 160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 161 | @include ct-align-justify(flex-end, flex-start); 162 | // Fallback for browsers that don't support foreignObjects 163 | text-anchor: start; 164 | } 165 | 166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 167 | @include ct-align-justify(flex-start, flex-start); 168 | // Fallback for browsers that don't support foreignObjects 169 | text-anchor: start; 170 | } 171 | 172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); 174 | @include ct-align-justify(center, flex-end); 175 | // Fallback for browsers that don't support foreignObjects 176 | text-anchor: end; 177 | } 178 | 179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 180 | @include ct-align-justify(center, flex-start); 181 | // Fallback for browsers that don't support foreignObjects 182 | text-anchor: end; 183 | } 184 | 185 | .#{$ct-class-grid} { 186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); 187 | } 188 | 189 | .#{$ct-class-point} { 190 | @include ct-chart-point($ct-point-size, $ct-point-shape); 191 | } 192 | 193 | .#{$ct-class-line} { 194 | @include ct-chart-line($ct-line-width); 195 | } 196 | 197 | .#{$ct-class-area} { 198 | @include ct-chart-area(); 199 | } 200 | 201 | .#{$ct-class-bar} { 202 | @include ct-chart-bar($ct-bar-width); 203 | } 204 | 205 | .#{$ct-class-slice-donut} { 206 | @include ct-chart-donut($ct-donut-width); 207 | } 208 | 209 | @if $ct-include-colored-series { 210 | @for $i from 0 to length($ct-series-names) { 211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { 212 | $color: nth($ct-series-colors, $i + 1); 213 | 214 | @include ct-chart-series-color($color); 215 | } 216 | } 217 | } 218 | } 219 | 220 | @if $ct-include-classes { 221 | @include ct-chart(); 222 | 223 | @if $ct-include-alternative-responsive-containers { 224 | @for $i from 0 to length($ct-scales-names) { 225 | .#{nth($ct-scales-names, $i + 1)} { 226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); 227 | } 228 | } 229 | } 230 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_chartist.scss: -------------------------------------------------------------------------------- 1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { 2 | display: block; 3 | position: relative; 4 | width: $width; 5 | 6 | &:before { 7 | display: block; 8 | float: left; 9 | content: ""; 10 | width: 0; 11 | height: 0; 12 | padding-bottom: $ratio * 100%; 13 | } 14 | 15 | &:after { 16 | content: ""; 17 | display: table; 18 | clear: both; 19 | } 20 | 21 | > svg { 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | } 28 | 29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { 30 | -webkit-box-align: $ct-text-align; 31 | -webkit-align-items: $ct-text-align; 32 | -ms-flex-align: $ct-text-align; 33 | align-items: $ct-text-align; 34 | -webkit-box-pack: $ct-text-justify; 35 | -webkit-justify-content: $ct-text-justify; 36 | -ms-flex-pack: $ct-text-justify; 37 | justify-content: $ct-text-justify; 38 | // Fallback to text-align for non-flex browsers 39 | @if($ct-text-justify == 'flex-start') { 40 | text-align: left; 41 | } @else if ($ct-text-justify == 'flex-end') { 42 | text-align: right; 43 | } @else { 44 | text-align: center; 45 | } 46 | } 47 | 48 | @mixin ct-flex() { 49 | // Fallback to block 50 | display: block; 51 | display: -webkit-box; 52 | display: -moz-box; 53 | display: -ms-flexbox; 54 | display: -webkit-flex; 55 | display: flex; 56 | } 57 | 58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { 59 | fill: $ct-text-color; 60 | color: $ct-text-color; 61 | font-size: $ct-text-size; 62 | line-height: $ct-text-line-height; 63 | } 64 | 65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { 66 | stroke: $ct-grid-color; 67 | stroke-width: $ct-grid-width; 68 | 69 | @if ($ct-grid-dasharray) { 70 | stroke-dasharray: $ct-grid-dasharray; 71 | } 72 | } 73 | 74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { 75 | stroke-width: $ct-point-size; 76 | stroke-linecap: $ct-point-shape; 77 | } 78 | 79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { 80 | fill: none; 81 | stroke-width: $ct-line-width; 82 | 83 | @if ($ct-line-dasharray) { 84 | stroke-dasharray: $ct-line-dasharray; 85 | } 86 | } 87 | 88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { 89 | stroke: none; 90 | fill-opacity: $ct-area-opacity; 91 | } 92 | 93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { 94 | fill: none; 95 | stroke-width: $ct-bar-width; 96 | } 97 | 98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { 99 | fill: none; 100 | stroke-width: $ct-donut-width; 101 | } 102 | 103 | @mixin ct-chart-series-color($color) { 104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { 105 | stroke: $color; 106 | } 107 | 108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} { 109 | fill: $color; 110 | } 111 | } 112 | 113 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { 114 | 115 | .#{$ct-class-label} { 116 | @include ct-chart-label($ct-text-color, $ct-text-size); 117 | } 118 | 119 | .#{$ct-class-chart-line} .#{$ct-class-label}, 120 | .#{$ct-class-chart-bar} .#{$ct-class-label} { 121 | @include ct-flex(); 122 | } 123 | 124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 125 | @include ct-align-justify(flex-end, flex-start); 126 | // Fallback for browsers that don't support foreignObjects 127 | text-anchor: start; 128 | } 129 | 130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 131 | @include ct-align-justify(flex-start, flex-start); 132 | // Fallback for browsers that don't support foreignObjects 133 | text-anchor: start; 134 | } 135 | 136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 137 | @include ct-align-justify(flex-end, flex-end); 138 | // Fallback for browsers that don't support foreignObjects 139 | text-anchor: end; 140 | } 141 | 142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 143 | @include ct-align-justify(flex-end, flex-start); 144 | // Fallback for browsers that don't support foreignObjects 145 | text-anchor: start; 146 | } 147 | 148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 149 | @include ct-align-justify(flex-end, center); 150 | // Fallback for browsers that don't support foreignObjects 151 | text-anchor: start; 152 | } 153 | 154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 155 | @include ct-align-justify(flex-start, center); 156 | // Fallback for browsers that don't support foreignObjects 157 | text-anchor: start; 158 | } 159 | 160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 161 | @include ct-align-justify(flex-end, flex-start); 162 | // Fallback for browsers that don't support foreignObjects 163 | text-anchor: start; 164 | } 165 | 166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 167 | @include ct-align-justify(flex-start, flex-start); 168 | // Fallback for browsers that don't support foreignObjects 169 | text-anchor: start; 170 | } 171 | 172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); 174 | @include ct-align-justify(center, flex-end); 175 | // Fallback for browsers that don't support foreignObjects 176 | text-anchor: end; 177 | } 178 | 179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 180 | @include ct-align-justify(center, flex-start); 181 | // Fallback for browsers that don't support foreignObjects 182 | text-anchor: end; 183 | } 184 | 185 | .#{$ct-class-grid} { 186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); 187 | } 188 | 189 | .#{$ct-class-point} { 190 | @include ct-chart-point($ct-point-size, $ct-point-shape); 191 | } 192 | 193 | .#{$ct-class-line} { 194 | @include ct-chart-line($ct-line-width); 195 | } 196 | 197 | .#{$ct-class-area} { 198 | @include ct-chart-area(); 199 | } 200 | 201 | .#{$ct-class-bar} { 202 | @include ct-chart-bar($ct-bar-width); 203 | } 204 | 205 | .#{$ct-class-slice-donut} { 206 | @include ct-chart-donut($ct-donut-width); 207 | } 208 | 209 | @if $ct-include-colored-series { 210 | @for $i from 0 to length($ct-series-names) { 211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { 212 | $color: nth($ct-series-colors, $i + 1); 213 | 214 | @include ct-chart-series-color($color); 215 | } 216 | } 217 | } 218 | } 219 | 220 | @if $ct-include-classes { 221 | @include ct-chart(); 222 | 223 | @if $ct-include-alternative-responsive-containers { 224 | @for $i from 0 to length($ct-scales-names) { 225 | .#{nth($ct-scales-names, $i + 1)} { 226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); 227 | } 228 | } 229 | } 230 | } -------------------------------------------------------------------------------- /BS3/assets/sass/lbd/_navbars.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | > li{ 3 | > a:hover, 4 | > a:focus{ 5 | background-color: transparent; 6 | } 7 | } 8 | } 9 | 10 | .navbar{ 11 | border: $none; 12 | font-size: $font-size-navbar; 13 | border-radius: 0; 14 | 15 | & > .container .navbar-brand, 16 | & > .container-fluid .navbar-brand{ 17 | margin-left: 0; 18 | } 19 | 20 | .navbar-brand { 21 | font-weight: $font-weight-normal; 22 | margin: $navbar-margin-brand; 23 | padding: $navbar-padding-brand; 24 | font-size: $font-size-large-navbar; 25 | } 26 | .navbar-nav{ 27 | > li > a { 28 | padding: $navbar-padding-a; 29 | margin: $navbar-margin-a; 30 | position: relative; 31 | } 32 | > li > a.btn{ 33 | margin: $navbar-margin-a-btn; 34 | padding: $padding-base-vertical $padding-base-horizontal; 35 | } 36 | > li > a.btn-round{ 37 | margin: $navbar-margin-a-btn-round; 38 | } 39 | > li > a [class^="fa"]{ 40 | font-size: $font-size-large + 1; 41 | position: relative; 42 | line-height: 16px; 43 | top: 1px; 44 | } 45 | 46 | .notification{ 47 | position: absolute; 48 | background-color: #FB404B; 49 | text-align: center; 50 | border-radius: 10px; 51 | min-width: 18px; 52 | padding: 0 5px; 53 | height: 18px; 54 | font-size: 12px; 55 | color: #FFFFFF; 56 | font-weight: bold; 57 | line-height: 18px; 58 | top: 0px; 59 | left: 7px; 60 | } 61 | } 62 | .btn{ 63 | margin: $navbar-margin-btn; 64 | font-size: $font-size-base; 65 | } 66 | .btn-simple{ 67 | font-size: $font-size-medium; 68 | } 69 | .caret{ 70 | // @include center-item(); 71 | } 72 | 73 | &.fixed{ 74 | width: calc(100% - $sidebar-width); 75 | right: 0; 76 | left: auto; 77 | border-radius: 0; 78 | } 79 | 80 | } 81 | 82 | .navbar-nav > li > .dropdown-menu{ 83 | border-radius: $border-radius-extreme; 84 | margin-top: -5px; 85 | } 86 | 87 | .navbar-transparent, [class*="navbar-ct"]{ 88 | .navbar-brand{ 89 | color: $white-color; 90 | @include opacity(.9); 91 | 92 | &:focus, 93 | &:hover{ 94 | background-color: transparent; 95 | @include opacity(1); 96 | } 97 | } 98 | 99 | .navbar-nav{ 100 | > li > a:not(.btn){ 101 | color: $white-color; 102 | border-color: $white-color; 103 | @include opacity(0.8); 104 | } 105 | > .active > a:not(.btn), 106 | > .active > a:hover:not(.btn), 107 | > .active > a:focus:not(.btn), 108 | > li > a:hover:not(.btn), 109 | > li > a:focus:not(.btn){ 110 | background-color: transparent; 111 | border-radius: 3px; 112 | color: $white-color; 113 | @include opacity(1); 114 | } 115 | .nav > li > a.btn:hover{ 116 | background-color: transparent; 117 | } 118 | 119 | > .dropdown > a .caret, 120 | > .dropdown > a:hover .caret, 121 | > .dropdown > a:focus .caret{ 122 | border-bottom-color: $white-color; 123 | border-top-color: $white-color; 124 | } 125 | 126 | > .open > a, 127 | > .open > a:hover, 128 | > .open > a:focus { 129 | background-color: transparent; 130 | color: $white-color; 131 | @include opacity(1); 132 | } 133 | } 134 | 135 | .btn-default{ 136 | color: $white-color; 137 | border-color: $white-color; 138 | } 139 | .btn-default.btn-fill{ 140 | color: $dark-gray; 141 | background-color: $white-color; 142 | @include opacity(.9); 143 | } 144 | .btn-default.btn-fill:hover, 145 | .btn-default.btn-fill:focus, 146 | .btn-default.btn-fill:active, 147 | .btn-default.btn-fill.active, 148 | .open .dropdown-toggle.btn-fill.btn-default{ 149 | border-color: $white-color; 150 | @include opacity(1); 151 | } 152 | 153 | } 154 | .navbar-transparent{ 155 | .dropdown-menu .divider{ 156 | background-color: rgba($white-color,.2); 157 | } 158 | } 159 | 160 | .nav-open .nav .caret{ 161 | border-bottom-color: $white-color; 162 | border-top-color: $white-color; 163 | } 164 | 165 | .navbar-default { 166 | background-color: $white-navbar; 167 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 168 | 169 | .navbar-nav{ 170 | > li > a:not(.btn){ 171 | color: $dark-gray; 172 | } 173 | 174 | > .active > a, 175 | > .active > a:not(.btn):hover, 176 | > .active > a:not(.btn):focus, 177 | > li > a:not(.btn):hover, 178 | > li > a:not(.btn):focus { 179 | background-color: transparent; 180 | border-radius: 3px; 181 | color: $info-color; 182 | @include opacity(1); 183 | } 184 | 185 | > .dropdown > a:hover .caret, 186 | > .dropdown > a:focus .caret { 187 | border-bottom-color: $info-color; 188 | border-top-color: $info-color; 189 | 190 | } 191 | 192 | > .open > a, 193 | > .open > a:hover, 194 | > .open > a:focus{ 195 | background-color: transparent; 196 | color: $info-color; 197 | } 198 | 199 | .navbar-toggle:hover,.navbar-toggle:focus { 200 | background-color: transparent; 201 | } 202 | 203 | } 204 | 205 | &:not(.navbar-transparent) .btn-default:hover{ 206 | color: $info-color; 207 | border-color: $info-color; 208 | } 209 | &:not(.navbar-transparent) .btn-neutral, 210 | &:not(.navbar-transparent) .btn-neutral:hover, 211 | &:not(.navbar-transparent) .btn-neutral:active{ 212 | color: $dark-gray; 213 | } 214 | } 215 | 216 | /* Navbar with icons */ 217 | 218 | .navbar-icons{ 219 | &.navbar .navbar-brand{ 220 | margin-top: 12px; 221 | margin-bottom: 12px; 222 | } 223 | .navbar-nav{ 224 | > li > a{ 225 | text-align: center; 226 | padding: $navbar-padding-a-icons; 227 | margin: $navbar-margin-a-icons; 228 | } 229 | 230 | [class^="pe"] { 231 | font-size: 30px; 232 | position: relative; 233 | } 234 | p { 235 | margin: 3px 0 0; 236 | } 237 | } 238 | } 239 | 240 | .navbar-form{ 241 | @include box-shadow(none); 242 | .form-control{ 243 | @include light-form(); 244 | height: 22px; 245 | font-size: $font-size-navbar; 246 | line-height: $line-height-general; 247 | color: $light-gray; 248 | } 249 | .navbar-transparent & .form-control, 250 | [class*="navbar-ct"] & .form-control{ 251 | color: $white-color; 252 | border: $none; 253 | border-bottom: 1px solid rgba($white-color,.6); 254 | } 255 | 256 | } 257 | 258 | .navbar-ct-blue{ 259 | @include navbar-color($blue-navbar); 260 | } 261 | .navbar-ct-azure{ 262 | @include navbar-color($azure-navbar); 263 | } 264 | .navbar-ct-green{ 265 | @include navbar-color($green-navbar); 266 | } 267 | .navbar-ct-orange{ 268 | @include navbar-color($orange-navbar); 269 | } 270 | .navbar-ct-red{ 271 | @include navbar-color($red-navbar); 272 | } 273 | 274 | .navbar-transparent{ 275 | padding-top: 15px; 276 | background-color: transparent; 277 | border-bottom: 1px solid transparent; 278 | } 279 | 280 | .navbar-toggle{ 281 | margin-top: 19px; 282 | margin-bottom: 19px; 283 | border: $none; 284 | 285 | .icon-bar { 286 | background-color: $white-color; 287 | } 288 | .navbar-collapse, 289 | .navbar-form { 290 | border-color: transparent; 291 | } 292 | 293 | &.navbar-default .navbar-toggle:hover, 294 | &.navbar-default .navbar-toggle:focus { 295 | background-color: transparent; 296 | } 297 | } 298 | -------------------------------------------------------------------------------- /assets/sass/lbd/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // User select 2 | // For selecting text on the page 3 | 4 | @mixin user-select($select) { 5 | -webkit-user-select: $select; 6 | -moz-user-select: $select; 7 | -ms-user-select: $select; // IE10+ 8 | user-select: $select; 9 | } 10 | 11 | @mixin box-shadow($shadow...) { 12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 13 | box-shadow: $shadow; 14 | } 15 | 16 | // Box sizing 17 | @mixin box-sizing($boxmodel) { 18 | -webkit-box-sizing: $boxmodel; 19 | -moz-box-sizing: $boxmodel; 20 | box-sizing: $boxmodel; 21 | } 22 | 23 | 24 | @mixin transition($time, $type){ 25 | -webkit-transition: all $time $type; 26 | -moz-transition: all $time $type; 27 | -o-transition: all $time $type; 28 | -ms-transition: all $time $type; 29 | transition: all $time $type; 30 | } 31 | 32 | @mixin transform-scale($value){ 33 | -webkit-transform: scale($value); 34 | -moz-transform: scale($value); 35 | -o-transform: scale($value); 36 | -ms-transform: scale($value); 37 | transform: scale($value); 38 | } 39 | 40 | @mixin transform-translate-x($value){ 41 | -webkit-transform: translate3d($value, 0, 0); 42 | -moz-transform: translate3d($value, 0, 0); 43 | -o-transform: translate3d($value, 0, 0); 44 | -ms-transform: translate3d($value, 0, 0); 45 | transform: translate3d($value, 0, 0); 46 | } 47 | 48 | @mixin transform-translate-3d($value){ 49 | -webkit-transform: translate3d($value, 0, 0); 50 | -moz-transform: translate3d($value, 0, 0); 51 | -o-transform: translate3d($value, 0, 0); 52 | -ms-transform: translate3d($value, 0, 0); 53 | transform: translate3d($value, 0, 0) !important; 54 | } 55 | 56 | @mixin transform-translate-y-dropdown($value){ 57 | -webkit-transform: translate3d(0, $value, 0) !important; 58 | -moz-transform: translate3d(0, $value, 0) !important; 59 | -o-transform: translate3d(0, $value, 0) !important; 60 | -ms-transform: translate3d(0, $value, 0) !important; 61 | transform: translate3d(0, $value, 0) !important; 62 | } 63 | 64 | @mixin transform-translate-3d-0($value){ 65 | -webkit-transform: translate3d(0, $value, 0) !important; 66 | -moz-transform: translate3d(0, $value, 0) !important; 67 | -o-transform: translate3d(0, $value, 0) !important; 68 | -ms-transform: translate3d(0, $value, 0) !important; 69 | transform: translate3d(0, $value, 0) !important; 70 | } 71 | 72 | @mixin transform-origin($coordinates){ 73 | -webkit-transform-origin: $coordinates; 74 | -moz-transform-origin: $coordinates; 75 | -o-transform-origin: $coordinates; 76 | -ms-transform-origin: $coordinates; 77 | transform-origin: $coordinates; 78 | } 79 | 80 | @mixin icon-gradient ($top-color, $bottom-color){ 81 | background: $top-color; 82 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); 83 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color)); 84 | background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%); 85 | background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%); 86 | background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%); 87 | background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%); 88 | background-size: 150% 150%; 89 | } 90 | 91 | @mixin radial-gradient($extern-color, $center-color){ 92 | background: $extern-color; 93 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 94 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ 95 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ 96 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ 97 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ 98 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ 99 | background-size: 550% 450%; 100 | } 101 | 102 | @mixin vertical-align { 103 | position: relative; 104 | top: 50%; 105 | -webkit-transform: translateY(-50%); 106 | -ms-transform: translateY(-50%); 107 | transform: translateY(-50%); 108 | } 109 | 110 | @mixin rotate-180(){ 111 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 112 | -webkit-transform: rotate(180deg); 113 | -ms-transform: rotate(180deg); 114 | transform: rotate(180deg); 115 | } 116 | 117 | @mixin bar-animation($type){ 118 | -webkit-animation: $type 500ms linear 0s; 119 | -moz-animation: $type 500ms linear 0s; 120 | animation: $type 500ms 0s; 121 | -webkit-animation-fill-mode: forwards; 122 | -moz-animation-fill-mode: forwards; 123 | animation-fill-mode: forwards; 124 | } 125 | 126 | @mixin topbar-x-rotation(){ 127 | @keyframes topbar-x { 128 | 0% {top: 0px; transform: rotate(0deg); } 129 | 45% {top: 6px; transform: rotate(145deg); } 130 | 75% {transform: rotate(130deg); } 131 | 100% {transform: rotate(135deg); } 132 | } 133 | @-webkit-keyframes topbar-x { 134 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 135 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 136 | 75% {-webkit-transform: rotate(130deg); } 137 | 100% { -webkit-transform: rotate(135deg); } 138 | } 139 | @-moz-keyframes topbar-x { 140 | 0% {top: 0px; -moz-transform: rotate(0deg); } 141 | 45% {top: 6px; -moz-transform: rotate(145deg); } 142 | 75% {-moz-transform: rotate(130deg); } 143 | 100% { -moz-transform: rotate(135deg); } 144 | } 145 | } 146 | 147 | @mixin topbar-back-rotation(){ 148 | @keyframes topbar-back { 149 | 0% { top: 6px; transform: rotate(135deg); } 150 | 45% { transform: rotate(-10deg); } 151 | 75% { transform: rotate(5deg); } 152 | 100% { top: 0px; transform: rotate(0); } 153 | } 154 | 155 | @-webkit-keyframes topbar-back { 156 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 157 | 45% { -webkit-transform: rotate(-10deg); } 158 | 75% { -webkit-transform: rotate(5deg); } 159 | 100% { top: 0px; -webkit-transform: rotate(0); } 160 | } 161 | 162 | @-moz-keyframes topbar-back { 163 | 0% { top: 6px; -moz-transform: rotate(135deg); } 164 | 45% { -moz-transform: rotate(-10deg); } 165 | 75% { -moz-transform: rotate(5deg); } 166 | 100% { top: 0px; -moz-transform: rotate(0); } 167 | } 168 | } 169 | 170 | @mixin bottombar-x-rotation(){ 171 | @keyframes bottombar-x { 172 | 0% {bottom: 0px; transform: rotate(0deg);} 173 | 45% {bottom: 6px; transform: rotate(-145deg);} 174 | 75% {transform: rotate(-130deg);} 175 | 100% {transform: rotate(-135deg);} 176 | } 177 | @-webkit-keyframes bottombar-x { 178 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 179 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 180 | 75% {-webkit-transform: rotate(-130deg);} 181 | 100% {-webkit-transform: rotate(-135deg);} 182 | } 183 | @-moz-keyframes bottombar-x { 184 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 185 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 186 | 75% {-moz-transform: rotate(-130deg);} 187 | 100% {-moz-transform: rotate(-135deg);} 188 | } 189 | } 190 | 191 | @mixin bottombar-back-rotation{ 192 | @keyframes bottombar-back { 193 | 0% { bottom: 6px;transform: rotate(-135deg);} 194 | 45% { transform: rotate(10deg);} 195 | 75% { transform: rotate(-5deg);} 196 | 100% { bottom: 0px;transform: rotate(0);} 197 | } 198 | @-webkit-keyframes bottombar-back { 199 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 200 | 45% {-webkit-transform: rotate(10deg);} 201 | 75% {-webkit-transform: rotate(-5deg);} 202 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 203 | } 204 | @-moz-keyframes bottombar-back { 205 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 206 | 45% {-moz-transform: rotate(10deg);} 207 | 75% {-moz-transform: rotate(-5deg);} 208 | 100% {bottom: 0px;-moz-transform: rotate(0);} 209 | } 210 | 211 | } 212 | -------------------------------------------------------------------------------- /documentation/tutorial-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Components Documentation - Light Bootstrap Dashboard - Free Bootstrap 4 Admin Dashboard by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 102 | 103 | 104 | 105 | 106 | 131 | 132 |
133 |
134 |
135 |
136 |
137 |

Light Bootstrap Dashboard

138 |

Elements description v2.0.0

139 |

Bootstrap 4 Version

140 |
141 | View Documentation Online 142 |
143 |
144 |
145 | 180 |
181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 209 | 210 | -------------------------------------------------------------------------------- /BS3/maps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Light Bootstrap Dashboard by Creative Tim 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 |
43 | 48 | 49 | 99 |
100 |
101 | 102 |
103 | 182 | 183 |
184 | 185 |
186 |
187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /assets/sass/lbd/_variables.scss: -------------------------------------------------------------------------------- 1 | //== Buttons 2 | // 3 | //## For each of Bootstrap's buttons, define text, background and border color. 4 | 5 | $none: 0 !default; 6 | $border-thin: 1px !default; 7 | $border-thick: 2px !default; 8 | 9 | $white-color: #FFFFFF !default; 10 | $white-bg: #FFFFFF !default; 11 | 12 | $smoke-bg: #F5F5F5 !default; 13 | 14 | $black-bg: rgba(30,30,30,.97) !default; 15 | 16 | $black-color: #333333 !default; 17 | $black-hr: #444444 !default; 18 | 19 | $light-gray: #E3E3E3 !default; 20 | $medium-gray: #DDDDDD !default; 21 | $medium-dark-gray: #AAAAAA !default; 22 | $dark-gray: #9A9A9A !default; 23 | 24 | $transparent-bg: transparent !default; 25 | 26 | $default-color: #888888 !default; 27 | $default-bg: #888888 !default; 28 | $default-states-color: #777777 !default; 29 | 30 | $primary-color: #3472F7 !default; 31 | $primary-bg: #3472F7 !default; 32 | $primary-states-color: #1D62F0 !default; 33 | 34 | $success-color: #87CB16 !default; 35 | $success-bg: #87CB16 !default; 36 | $success-states-color: #049F0C !default; 37 | 38 | $info-color: #1DC7EA !default; 39 | $info-bg: #1DC7EA !default; 40 | $info-states-color: lighten($info-color, 8%) !default; 41 | 42 | $warning-color: #FF9500 !default; 43 | $warning-bg: #FF9500 !default; 44 | $warning-states-color: #ED8D00 !default; 45 | 46 | 47 | $danger-color: #FF4A55 !default; 48 | $danger-bg: #FF4A55 !default; 49 | $danger-states-color: #EE2D20 !default; 50 | 51 | 52 | 53 | $link-disabled-color: #666666 !default; 54 | 55 | 56 | /* light colors */ 57 | $light-blue: rgba($primary-color, .2); 58 | $light-azure: rgba($info-color, .2); 59 | $light-green: rgba($success-color, .2); 60 | $light-orange: rgba($warning-color, .2); 61 | $light-red: rgba($danger-color, .2); 62 | 63 | 64 | //== Components 65 | // 66 | 67 | $padding-base-vertical: 8px !default; 68 | $padding-base-horizontal: 16px !default; 69 | 70 | $padding-round-vertical: 9px !default; 71 | $padding-round-horizontal: 18px !default; 72 | 73 | $padding-simple-vertical: 10px !default; 74 | $padding-simple-horizontal: 18px !default; 75 | 76 | $padding-large-vertical: 14px !default; 77 | $padding-large-horizontal: 30px !default; 78 | 79 | $padding-small-vertical: 5px !default; 80 | $padding-small-horizontal: 10px !default; 81 | 82 | $padding-xs-vertical: 1px !default; 83 | $padding-xs-horizontal: 5px !default; 84 | 85 | $padding-label-vertical: 2px !default; 86 | $padding-label-horizontal: 12px !default; 87 | 88 | $margin-large-vertical: 30px !default; 89 | $margin-base-vertical: 15px !default; 90 | 91 | $padding-zero: 0px !default; 92 | 93 | $margin-bottom: 0 0 10px 0 !default; 94 | $border-radius-small: 3px !default; 95 | $border-radius-base: 4px !default; 96 | $border-radius-large: 6px !default; 97 | $border-radius-extreme: 10px !default; 98 | 99 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; 100 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; 101 | 102 | $btn-round-radius: 30px !default; 103 | 104 | $height-base: 40px !default; 105 | 106 | $font-size-base: 14px !default; 107 | $font-size-small: 12px !default; 108 | $font-size-medium: 16px !default; 109 | $font-size-large: 18px !default; 110 | $font-size-large-navbar: 20px !default; 111 | 112 | $font-size-h1: 52px !default; 113 | $font-size-h2: 36px !default; 114 | $font-size-h3: 28px !default; 115 | $font-size-h4: 22px !default; 116 | $font-size-h5: 16px !default; 117 | $font-size-h6: 14px !default; 118 | $font-paragraph: 16px !default; 119 | $font-size-navbar: 16px !default; 120 | $font-size-small: 12px !default; 121 | 122 | $font-weight-light: 300 !default; 123 | $font-weight-normal: 400 !default; 124 | $font-weight-semi: 500 !default; 125 | $font-weight-bold: 600 !default; 126 | 127 | $line-height-general: 1.5 !default; 128 | $line-height: 20px !default; 129 | $line-height-lg: 54px !default; 130 | 131 | $sidebar-width: calc(100% - 260px) !default; 132 | 133 | 134 | $border-radius-top: 10px 10px 0 0 !default; 135 | $border-radius-bottom: 0 0 10px 10px !default; 136 | 137 | $dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); 138 | 139 | $general-transition-time: 300ms !default; 140 | 141 | $slow-transition-time: 370ms !default; 142 | $dropdown-coordinates: 29px -50px !default; 143 | 144 | $fast-transition-time: 150ms !default; 145 | 146 | $ultra-fast-transition-time: 100ms !default; 147 | 148 | $select-coordinates: 50% -40px !default; 149 | 150 | $transition-linear: linear !default; 151 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 152 | $transition-ease: ease 0s; 153 | $transition-ease-in: ease-in !default; 154 | $transition-ease-out: ease-out !default; 155 | 156 | 157 | $navbar-padding-a: 10px 15px; 158 | $navbar-margin-a: 10px 3px; 159 | 160 | $padding-social-a: 10px 5px; 161 | 162 | $navbar-margin-a-btn: 15px 3px; 163 | $navbar-margin-a-btn-round: 16px 3px; 164 | 165 | $navbar-padding-a-icons: 6px 15px; 166 | $navbar-margin-a-icons: 6px 3px; 167 | 168 | $navbar-padding-brand: 15px 15px; 169 | $navbar-margin-brand: 5px 0px; 170 | 171 | $navbar-margin-brand-icons: 12px auto; 172 | 173 | $navbar-margin-btn: 15px 3px; 174 | 175 | $height-icon: 64px !default; 176 | $width-icon: 64px !default; 177 | $padding-icon: 12px !default; 178 | $border-radius-icon: 15px !default; 179 | 180 | $size-icon: 64px; 181 | $size-icon-sm: 32px; 182 | 183 | 184 | $height-icon-sm: 32px; 185 | $width-icon-sm: 32px; 186 | $padding-icon-sm: 4px; 187 | $border-radius-icon-sm: 7px; 188 | 189 | $height-icon-message: 40px; 190 | $width-icon-message: 40px; 191 | 192 | $height-icon-message-sm: 20px; 193 | $width-icon-message-sm: 20px; 194 | 195 | $default-color-top: #d9d9d9 !default; 196 | $default-color-bottom: #909297 !default; 197 | 198 | $blue-color-top: #4087ea; 199 | $blue-color-bottom: #533ce1; 200 | 201 | $azure-color-top: #45c0fd; 202 | $azure-color-bottom: #4091ff; 203 | 204 | $green-color-top: #a1eb3a; 205 | $green-color-bottom: #6dc030; 206 | 207 | $orange-color-top: #ffb33b; 208 | $orange-color-bottom: #ff5221; 209 | 210 | $red-color-top: #ff3b30; 211 | $red-color-bottom: #bb0502; 212 | 213 | $purple-color-top: #df55e1; 214 | $purple-color-bottom: #943bea; 215 | 216 | $pink-color-top: #ff2a63; 217 | $pink-color-bottom: #ff2e2e; 218 | 219 | $black-color-top: #787878; 220 | $black-color-bottom: #343434; 221 | 222 | $social-facebook: #3b5998; 223 | $social-twitter: #55acee; 224 | $social-pinterest: #cc2127; 225 | $social-google: #dd4b39; 226 | $social-linkedin: #0976b4; 227 | $social-dribbble: #ea4c89; 228 | $social-github: #333333; 229 | $social-youtube: #e52d27; 230 | $social-stumbleupon: #eb4924; 231 | $social-reddit: #ff4500; 232 | $social-tumblr: #35465c; 233 | $social-behance: #1769ff; 234 | 235 | 236 | $filter-blue: darken($primary-color, 10%); 237 | $filter-azure: darken($info-color, 10%); 238 | $filter-green: darken($success-color, 10%); 239 | $filter-orange: darken($warning-color, 10%); 240 | $filter-red: darken($danger-color, 10%); 241 | 242 | 243 | $new-blue: #1DC7EA; 244 | $new-purple: #9368E9; 245 | $new-red: #FB404B; 246 | $new-green: #87CB16; 247 | $new-orange: #FFA534; 248 | $new-dark-blue: #1F77D0; 249 | $new-black: #5e5e5e; 250 | 251 | 252 | $topbar-x: topbar-x !default; 253 | $topbar-back: topbar-back !default; 254 | $bottombar-x: bottombar-x !default; 255 | $bottombar-back: bottombar-back !default; 256 | 257 | 258 | $white-navbar: rgba(#FFFFFF, .96); 259 | $blue-navbar: lighten($new-dark-blue, 10%); 260 | $azure-navbar: lighten($new-blue, 15%); 261 | $green-navbar: lighten($new-green, 10%); 262 | $orange-navbar: lighten($new-orange, 10%); 263 | $red-navbar: lighten($new-red, 10%); 264 | --------------------------------------------------------------------------------