Commit 74e3e790 by xuchao

Updated: beagle version to 1.7.0

parent e1e8d493

Too many changes to show.

To preserve performance only 1000 of 1000+ files are displayed.

/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () {
'use strict';
App.ajaxLoader = function( ){
var mprogress = new Mprogress();
mprogress.start();
setTimeout(function(){mprogress.end()}, 3000);
$('.toggle-loader').click(function(){
mprogress.start();
setTimeout(function(){mprogress.inc()}, 1000);
setTimeout(function(){mprogress.end()}, 3000);
});
};
return App;
})(App || {});
\ No newline at end of file
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
...@@ -15,7 +22,8 @@ var App = (function () { ...@@ -15,7 +22,8 @@ var App = (function () {
//Select2 //Select2
$(".select2").select2({ $(".select2").select2({
width: '100%' width: '100%',
placeholder: 'Select a state'
}); });
//Select2 tags //Select2 tags
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () {
'use strict';
App.megaMenu = function( ){
var config = {
megaMenuSectionClass: 'be-mega-menu-section',
navTabsClass: 'be-nav-tabs',
subNavClass: 'be-sub-nav'
};
var megaMenu, navTabs;
//Main tabs active state sync
function tabSync() {
var tabs = $( '.navbar-nav > .nav-item', navTabs );
var openTabs = tabs.filter( '.open' );
if( !openTabs.length ) {
tabs.filter( ':first-child' ).addClass( 'open' );
}
}
//Wait for final event on window resize
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "x1x2x3x4";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
//Sub navigation interaction
function subNav(){
$('.be-sub-header .nav-link, .be-sub-header .dropdown-item', navTabs).on('click',function( e ){
var _this = $( this );
var parent = _this.parent();
var openElements = parent.siblings( '.open' );
var subNav = _this.next( '.' + config.subNavClass );
var slideSpeed = config.leftSidebarSlideSpeed;
function closeSubMenu( subMenu ){
var _parent = $( subMenu ).parent();
var openChildren = $( '.nav-item.open, .' + config.megaMenuSectionClass + '.open', _parent );
subMenu.slideUp({ duration: slideSpeed, complete: function(){
_parent.removeClass( 'open' );
openChildren.removeClass( 'open' );
$( this ).removeAttr( 'style' );
}});
}
function openSubMenu( subMenu ){
var _parent = subMenu.parent();
var openSubMenus = false;
// Get the open sub menus
openSubMenus = _parent.siblings( '.open' );
if( _parent.hasClass( config.megaMenuSectionClass ) ) {
var megaColumn = _parent.parent();
openSubMenus = openSubMenus.add( megaColumn.siblings().find( '.' + config.megaMenuSectionClass + '.open' ) );
}
// If there are open sub menus close them
if( openSubMenus ) {
closeSubMenu( $( '> .' + config.subNavClass, openSubMenus ) );
}
subMenu.slideDown({ duration: slideSpeed, complete: function(){
_parent.addClass( 'open' );
$( this ).removeAttr( 'style' );
}});
}
// Check if the event is fired from mobile
if( $.isSm() ) {
if( subNav.length ) {
if( parent.hasClass( 'open' ) ) {
closeSubMenu( subNav );
} else {
openSubMenu( subNav );
}
e.preventDefault();
}
// Stop default bootstrap dropdown interaction
e.stopPropagation();
} else if ( parent.parent().hasClass('navbar-nav') ) {
if ( subNav.length ) {
openElements.removeClass( 'open' );
parent.addClass( 'open' );
e.preventDefault();
}
}
});
// Sync tabs when resize between mobile and desktop resolutions
$(window).resize(function() {
waitForFinalEvent(function() {
if( !$.isSm() ) {
tabSync();
}
}, 100, "sync_tabs");
});
}
/*Navigation tabs*/
subNav();
};
return App;
})(App || {});
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
App.tableFilters = function( ){
//Select2 init
$('.select2').select2({
width: '100%'
});
//Select2 tags init
$('.tags').select2({tags: true, width: '100%'});
App.tableFilters = function( ){ //Bootstrap Slider init
//Put your code here $('.bslider').bootstrapSlider();
//Bootstrap Slider //Date Picker init
$('.bslider').bootstrapSlider({ $(".datetimepicker").datetimepicker({
tooltip: 'hide' autoclose: true,
componentIcon: '.mdi.mdi-calendar',
format: 'mm/dd/yyyy',
navIcons:{
rightIcon: 'mdi mdi-chevron-right',
leftIcon: 'mdi mdi-chevron-left'
}
}); });
$("#milestone_slider").slider().on("slide",function(e){ //Filters
$.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
//Milestone slider
var filter_progress = $('#milestone_slider').val().split(',');
var progress = $(settings.aoData[index].anCells[3]).data('progress').split(',');
//Select2
var filter_project = $('.select2').val();
var project = $(settings.aoData[index].anCells[2]).data('project');
//Date
var filter_date_since = $('#dateSince').val() !== '' ? new Date($('#dateSince').val()) : new Date('01/01/1999');
var filter_date_to = $('#dateTo').val() !== '' ? new Date($('#dateTo').val()) : new Date('01/01/2099');
var date = new Date($('.date', settings.aoData[index].anCells[5]).html());
//Status
var filter_to_do = $('#toDo').is(':checked');
var filter_in_progress = $('#inProgress').is(':checked');
var filter_in_review = $('#inReview').is(':checked');
var filter_done = $('#done').is(':checked');
var status = $(settings.aoData[index].nTr).attr('class').split(" ");
//Conditional filters
if( !(parseInt(progress[1]) >= parseInt(filter_progress[0]) && parseInt(progress[1]) <= parseInt(filter_progress[1])) ){ return false; }
if( !(filter_project == project || filter_project == 'All') ){ return false; }
if( !(date >= filter_date_since && date <= filter_date_to) ){ return false; }
if( !(filter_to_do == false && filter_in_progress == false && filter_in_review == false && filter_done == false || filter_to_do == true && status[1] == 'to-do' || filter_in_progress == true && status[1] == 'in-progress' || filter_in_review == true && status[1] == 'in-review' || filter_done == true && status[1] == 'done') ){ return false; }
return true;
}
);
//Table init
var table = $('#table1').DataTable({
pageLength: 5,
dom: "<'row be-datatable-body'<'col-sm-12'tr>>" +
"<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>"
});
//Slider event
$('#milestone_slider').slider().on('slide',function(e){
var v1 = e.value[0]; var v1 = e.value[0];
var v2 = e.value[1]; var v2 = e.value[1];
$("#slider-value").html( v1 + "%" + " - " + v2 + "%"); $('#slider-value').html( v1 + '%' + ' - ' + v2 + '%');
table.draw();
});
//Select2 event
$('.select2').on('change', function() {
table.draw();
}); });
//Select2 //Date since-to
$(".select2").select2({ $('#dateSince, #dateTo').on('change', function(){
width: '100%' table.draw();
}); });
//Select2 tags //Status
$(".tags").select2({tags: true, width: '100%'}); $('#toDo, #inProgress, #inReview, #done').on('click', function(){
table.draw();
//Js Code
$(".datetimepicker").datetimepicker({
autoclose: true,
componentIcon: '.mdi.mdi-calendar',
navIcons:{
rightIcon: 'mdi mdi-chevron-right',
leftIcon: 'mdi mdi-chevron-left'
}
}); });
}; };
return App; return App;
})(App || {}); })(App || {});
\ No newline at end of file
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
App.dataTables = function( ){ App.dataTables = function( ){
//We use this to apply style to certain elements //We use this to apply style to certain elements
$.fn.DataTable.ext.pager.numbers_length = 4;
$.extend( true, $.fn.dataTable.defaults, { $.extend( true, $.fn.dataTable.defaults, {
dom: dom:
"<'row be-datatable-header'<'col-sm-6'l><'col-sm-6'f>>" + "<'row be-datatable-header'<'col-sm-6'l><'col-sm-6'f>>" +
...@@ -23,7 +31,7 @@ var App = (function () { ...@@ -23,7 +31,7 @@ var App = (function () {
//Enable toolbar button functions //Enable toolbar button functions
$("#table3").dataTable({ $("#table3").dataTable({
buttons: [ buttons: [
'copy', 'excel', 'pdf', 'print' 'copy', 'csv', 'excel', 'pdf', 'print'
], ],
"lengthMenu": [[6, 10, 25, 50, -1], [6, 10, 25, 50, "All"]], "lengthMenu": [[6, 10, 25, 50, -1], [6, 10, 25, 50, "All"]],
dom: "<'row be-datatable-header'<'col-sm-6'l><'col-sm-6 text-right'B>>" + dom: "<'row be-datatable-header'<'col-sm-6'l><'col-sm-6 text-right'B>>" +
...@@ -31,6 +39,34 @@ var App = (function () { ...@@ -31,6 +39,34 @@ var App = (function () {
"<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>" "<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>"
}); });
$("#table4").dataTable({
responsive: true
});
$("#table5").dataTable({
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.childRowImmediate,
type: ''
}
}
});
$("#table6").dataTable({
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal ({
header: function (row) {
var data = row.data();
return 'Details';
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll ({
tableClass: 'table'
})
}
}
});
}; };
return App; return App;
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
/*!
* Beagle v1.7.0
* https://foxythemes.net
*
* Copyright (c) 2019 Foxy Themes
*/
var App = (function () { var App = (function () {
'use strict'; 'use strict';
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
// Bootstrap mixins
@import "bootstrap/scss/mixins";
// Reset and dependencies
@import "bootstrap/scss/print";
// Core CSS
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
// Components
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/spinners";
// Components w/ JavaScript
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
// Utility classes
@import "bootstrap/scss/utilities";
//Color shades
$primary-color-dark: darken(theme-color("primary"), 10%);
$primary-color-darkest: darken(theme-color("primary"), 20%);
$primary-color-light: lighten(theme-color("primary"), 10%);
$primary-color-lightest: lighten(theme-color("primary"), 20%);
$danger-color-dark: darken(theme-color("danger"), 10%);
$danger-color-darkest: darken(theme-color("danger"), 20%);
$danger-color-light: lighten(theme-color("danger"), 10%);
$danger-color-lightest: lighten(theme-color("danger"), 20%);
$warning-color-dark: darken(theme-color("warning"), 10%);
$warning-color-darkest: darken(theme-color("warning"), 20%);
$warning-color-light: lighten(theme-color("warning"), 10%);
$warning-color-lightest: lighten(theme-color("warning"), 20%);
$success-color-dark: darken(theme-color("success"), 10%);
$success-color-darkest: darken(theme-color("success"), 20%);
$success-color-light: lighten(theme-color("success"), 10%);
$success-color-lightest: lighten(theme-color("success"), 20%);
$info-color-dark: darken(theme-color("info"), 10%);
$info-color-darkest: darken(theme-color("info"), 20%);
$info-color-light: lighten(theme-color("info"), 10%);
$info-color-lightest: lighten(theme-color("info"), 20%);
$light-color-dark: darken(theme-color("light"), 10%);
$light-color-darkest: darken(theme-color("light"), 20%);
$light-color-light: lighten(theme-color("light"), 10%);
$light-color-lightest: lighten(theme-color("light"), 20%);
$dark-color-dark: darken(theme-color("dark"), 10%);
$dark-color-darkest: darken(theme-color("dark"), 20%);
$dark-color-light: lighten(theme-color("dark"), 10%);
$dark-color-lightest: lighten(theme-color("dark"), 20%);
$grey-color-dark: darken(theme-color("grey"), 10%);
$grey-color-darkest: darken(theme-color("grey"), 20%);
$grey-color-light: lighten(theme-color("grey"), 10%);
$grey-color-lightest: lighten(theme-color("grey"), 20%);
//Text contrast
$primary-color-text: #5f99f5;
$success-color-text: #37b358;
$info-color-text: #6ba4ff;
$warning-color-text: #f6c163;
$danger-color-text: #eb6357;
$grey-color-text: darken(theme-color("grey"), 6%);
$light-color-text: #ffffff;
$dark-color-text: #333333;
\ No newline at end of file
/*------------------------------------------------------------------
[General elements style]
*/
html{
height:100%;
overflow-x: hidden;
font-size: $font-size-root;
}
body {
padding: 0;
background-color: $body-background;
height: auto;
min-height: 100%;
line-height: 1.42857143;
&.be-alt-bg {
background-color: darken($body-bg, 2%);
}
}
a{
&:hover, &:focus{
text-decoration: none;
}
}
p{
font-size: $paragraph-font-size;
line-height: $paragraph-line-height;
}
//Fix for plugins like charts
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/*------------------------------------------------------------------
[Alerts]
*/
.alert {
padding: 0;
position: relative;
line-height: 25px;
border-width: 0;
margin-bottom: 18px;
color: theme-color("light");
> .icon {
width: $alert-icon-width - 5;
font-size: 1.846rem;
vertical-align: middle;
text-align: center;
line-height: 22px;
display: table-cell;
cursor: default;
padding-top: 1px;
span {
width: 25px;
}
}
.close {
position: absolute;
font-size: 1.538rem;
right: $alert-padding-x;
text-shadow: none;
padding: ($alert-padding-y + .1538rem) 0;
opacity: .2;
}
.message {
display: table-cell;
padding: $alert-padding-y ($alert-padding-x + .7692rem) $alert-padding-y ($alert-padding-x - 1.154rem);
border-left-width: 0;
@include phone {
padding: $alert-padding-y ($alert-padding-x + 1.154rem) $alert-padding-y ($alert-padding-x - 1.154rem);
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
}
.alert-primary {
@include contrast-alert-variation($alert-primary-bg);
}
.alert-success {
@include contrast-alert-variation($alert-success-bg);
}
.alert-info {
@include contrast-alert-variation($alert-info-bg);
}
.alert-warning {
@include contrast-alert-variation($alert-warning-bg);
}
.alert-danger {
@include contrast-alert-variation($alert-danger-bg);
}
.alert-light {
background-color: $alert-light-bg;
outline: 1px solid $light-bg;
@include text-color-variation($state-light-text);
> .icon {
@include text-color-variation($alert-light-icon-color);
}
&.alert-contrast > .icon{
background-color: $light-bg;
}
}
.alert-dark {
@include contrast-alert-variation($alert-dark-bg);
}
.alert-dismissible{
&.alert-primary{
@include dismissible-variation($alert-primary-bg)
}
&.alert-success{
@include dismissible-variation($alert-success-bg)
}
&.alert-info{
@include dismissible-variation($alert-info-bg)
}
&.alert-warning{
@include dismissible-variation($alert-warning-bg)
}
&.alert-danger{
@include dismissible-variation($alert-danger-bg)
}
&.alert-light{
.close{
color: $body-color;
opacity: 0.35;
&:hover{
color: $body-color;
opacity: 0.5;
}
}
}
&.alert-dark{
.close{
color: $body-color;
opacity: 0.35;
&:hover{
color: $body-color;
opacity: 0.5;
}
}
}
}
.alert-contrast{
padding: 0;
position: relative;
> .icon{
display: table-cell;
width: $alert-icon-width;
text-align: center;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.08);
}
> .message{
display: table-cell;
padding: $alert-padding-y $alert-padding-x;
border-left-width: 0;
@include phone {
padding: $alert-padding-y ($alert-padding-x + 1.154rem) $alert-padding-y $alert-padding-x;
}
}
}
.alert-icon{
background-color: theme-color("light");
border: 0;
padding: 0;
position: relative;
width: 100%;
display: table;
table-layout: fixed;
box-shadow: 0.5px 0.9px 0 rgba(0, 0, 0, 0.07);
> .icon{
position: relative;
display: table-cell;
width: $alert-icon-width;
text-align: center;
vertical-align: middle;
cursor: default;
&:after{
position: absolute;
right: -10px;
top: 50%;
margin-top: -10px;
@include triangle(right, theme-color("light"), 11px);
}
}
> .message{
display: table-cell;
padding: $alert-padding-y $alert-padding-x;
color: $body-color;
border: 1px solid darken(theme-color("light"), 17%);
border-left-width: 0;
@include phone {
padding: $alert-padding-y ($alert-padding-x + 1.154rem) $alert-padding-y $alert-padding-x;
}
}
&.alert-dismissible{
.close, .close:focus{
color: $body-color;
opacity: 0.35;
&:hover{
color: $body-color;
opacity: 0.5;
}
}
}
//Colors
&.alert-primary{
@include icon-alert-variation($alert-primary-bg);
}
&.alert-success{
@include icon-alert-variation($alert-success-bg);
}
&.alert-info{
@include icon-alert-variation($alert-info-bg);
}
&.alert-warning{
@include icon-alert-variation($alert-warning-bg);
}
&.alert-danger{
@include icon-alert-variation($alert-danger-bg);
}
&.alert-light{
@include icon-alert-variation($alert-light-bg);
outline-color: darken(theme-color("light"), 17%);
> .icon {
border-right: 1px solid darken(theme-color("light"), 17%);
&:before {
position: absolute;
right: -22px;
top: 50%;
margin-top: -10px;
@include special-light-triangle();
}
}
> .message{
border: 0px;
}
}
&.alert-dark{
@include icon-alert-variation($alert-dark-bg);
}
}
.alert-icon-border{
&.alert-primary{
.message{
border-color: $alert-primary-bg;
}
}
&.alert-success{
.message{
border-color: $alert-success-bg;
}
}
&.alert-info{
.message{
border-color: $alert-info-bg;
}
}
&.alert-warning{
.message{
border-color: $alert-warning-bg;
}
}
&.alert-danger{
.message{
border-color: $alert-danger-bg;
}
}
&.alert-light{
.message{
border-color: $alert-light-bg;
}
}
&.alert-dark{
.message{
border-color: $alert-dark-bg;
}
}
}
.alert-icon.alert-icon-colored{
border: 1px solid darken(theme-color("light"), 17%);
outline-color: transparent;
> .icon{
position: relative;
background-color: darken(theme-color("light"), 2.8%);
border-width: 0;
&:before{
border: unset;
}
&:after{
border-left-color: darken(theme-color("light"), 2.8%);
position: absolute;
right: -11px;
top: 50%;
margin-top: -11px;
@include triangle(right, darken(theme-color("light"), 2.8%), 11px);
}
}
> .message{
border-width: 0;
}
&.alert-primary{
@include alert-icon-colored($alert-primary-bg);
}
&.alert-success{
@include alert-icon-colored($alert-success-bg);
}
&.alert-info{
@include alert-icon-colored($alert-info-bg);
}
&.alert-warning{
@include alert-icon-colored($alert-warning-bg);
}
&.alert-danger{
@include alert-icon-colored($alert-danger-bg);
}
&.alert-light{
@include alert-icon-colored($alert-dark-bg);
}
&.alert-dark{
@include alert-icon-colored($alert-light-icon-color);
}
}
.alert-simple{
border: 1px solid darken(theme-color("light"), 17%);
background-color: theme-color("light");
color: $body-color;
box-shadow: 0.5px 0.9px 0 rgba(0, 0, 0, 0.07);
&.alert-primary{
@include alert-icon-colored($alert-primary-bg);
}
&.alert-success{
@include alert-icon-colored($alert-success-bg);
}
&.alert-info{
@include alert-icon-colored($alert-info-bg);
}
&.alert-warning{
@include alert-icon-colored($alert-warning-bg);
}
&.alert-danger{
@include alert-icon-colored($alert-danger-bg);
}
&.alert-light{
@include alert-icon-colored($alert-dark-bg);
}
&.alert-dark{
@include alert-icon-colored($alert-light-icon-color);
}
}
/*------------------------------------------------------------------
[Badges]
*/
.badge{
font-size: .8462rem;
font-weight: $font-weight-bold;
line-height: 1.55;
border: 1px solid darken(theme-color("light"), 15%);
}
.badge-primary{
@include badge-color(theme-color("primary"));
}
.badge-secondary {
background-color: theme-color("light");
color: $badge-color;
}
.badge-success{
@include badge-color(theme-color("success"));
}
.badge-info{
@include badge-color(theme-color("info"));
}
.badge-warning{
@include badge-color(theme-color("warning"));
}
.badge-danger{
@include badge-color(theme-color("danger"));
}
/*Breadcrumbs*/
.breadcrumb{
background-color: $breadcrumb-bg;
margin-bottom: 18px;
padding: $breadcrumb-padding-y $breadcrumb-padding-x ($breadcrumb-padding-y - 1);
line-height: 16px;
.icon{
font-size: 1.231rem;
}
> li {
+ li:before {
color: $breadcrumb-active-color;
}
}
> .active {
color: $breadcrumb-active-color;
}
}
\ No newline at end of file
//Button group
.btn-group, .input-group-btn, .input-group-prepend, .input-group-append {
> .btn {
//Fix the next button border color when the next element is :focus
&.btn-secondary:hover + .btn,
&.btn-secondary.active + .btn {
border-left-color: darken($btn-secondary-border, 13%);
}
&.btn-primary {
@include colored-btn-group($btn-primary-bg);
}
&.btn-success {
@include colored-btn-group($btn-success-bg);
}
&.btn-warning {
@include colored-btn-group($btn-warning-bg);
}
&.btn-danger {
@include colored-btn-group($btn-danger-bg);
}
&:last-of-type:not(.btn-secondary){
border-right-color: transparent;
&:hover{
border-right-color: transparent;
}
}
& + .dropdown-toggle{
padding-left: 7px;
padding-right: 7px;
}
}
&:first-child{
border-right-color: transparent;
}
&:last-child{
border-right-color: transparent;
}
&.open {
> .btn {
&.btn-primary,
&.btn-success,
&.btn-warning,
&.btn-danger {
&:hover{
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1);
}
}
& + .btn-primary,
& + .btn-success,
& + .btn-warning,
& + .btn-danger {
border-left-color: rgba(0, 0, 0, 0.15);
}
}
}
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
.btn,
.btn-group {
float: none;
display: table-cell;
width: 1%;
.btn {
width: 100%;
}
.dropdown-menu {
left: auto;
}
}
> .btn {
border-right-width: 0;
&:last-child {
border-right-width: 1px;
}
}
}
//Vertical Button groups Style
.btn-group-vertical {
> .btn {
&.btn-secondary {
&:hover,
&:focus {
box-shadow: none;
}
&:active,
&.active {
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
}
}
&.btn-primary {
@include colored-vertical-btn-group($btn-primary-bg);
}
&.btn-success {
@include colored-vertical-btn-group($btn-success-bg);
}
&.btn-warning {
@include colored-vertical-btn-group($btn-warning-bg);
}
&.btn-danger {
@include colored-vertical-btn-group($btn-danger-bg);
}
}
}
//Input group
.input-group-btn, .input-group-prepend, .input-group-append {
> .btn {
& + .dropdown-toggle {
padding-left: 9px;
padding-right: 9px;
}
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Buttons]
*/
.btn{
box-shadow: $btn-box-shadow-base;
@include button-size($btn-padding-vertical, $btn-padding-horizontal, $btn-font-size-base, $btn-line-height-base, $btn-border-radius-base);
&:active,
&.active{
box-shadow: none;
}
&:active:focus{
outline: none;
}
}
.btn-secondary, .btn-light {
color: $btn-secondary-color;
background-color: $btn-secondary-bg;
border-color: $btn-secondary-border;
&:focus,
&.focus {
color: $btn-secondary-color;
background-color: $btn-secondary-bg;
border-color: $btn-secondary-border;
}
&:hover, &.hover{
color: $btn-secondary-color;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
background-color: $btn-secondary-bg;
border-color: darken($btn-secondary-border, 13%);
}
&:active,
&.active,
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
color: darken($btn-secondary-color, 10%);
background-color: darken($btn-secondary-bg, 11%);
border-color: darken($btn-secondary-border, 13%);
&:hover,
&:focus,
&.focus {
color: darken($btn-secondary-color, 10%);
background-color: darken($btn-secondary-bg, 11%);
border-color: darken($btn-secondary-border, 13%);
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
}
}
&:active,
&.active,
.show > &.dropdown-toggle {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
color: $btn-secondary-color;
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
color: $btn-secondary-color;
background-color: $btn-secondary-bg;
border-color: $btn-secondary-border;
box-shadow: none;
.icon {
color: $btn-secondary-color;
}
}
}
//icon color
.icon{
color: lighten($btn-secondary-color, 14%);
}
&:active{
.icon{
color: lighten($btn-secondary-color, 4%);
}
}
.badge {
color: $btn-secondary-bg;
background-color: $btn-secondary-color;
}
}
//Alternative color styles
.btn-primary{
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-info{
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-danger{
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
.btn-warning{
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-success{
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-light{
@include button-variant($btn-light-color, $btn-light-bg, $btn-light-border);
}
.btn-dark{
@include button-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
}
//Button sizes
.btn-xs{
@include button-size($btn-padding-vertical, $btn-xs-padding-horizontal, $btn-xs-font-size, $btn-xs-line-height, $btn-xs-border-radius);
}
.btn-sm{
@include button-size($btn-padding-vertical, $btn-sm-padding-horizontal, $btn-sm-font-size, $btn-sm-line-height, $btn-sm-border-radius);
}
.btn-lg{
@include button-size($btn-padding-vertical, $btn-lg-padding-horizontal, $btn-lg-font-size, $btn-lg-line-height, $btn-lg-border-radius);
font-weight: $font-weight-medium;
}
.btn-xl{
@include button-size($btn-padding-vertical, $btn-xl-padding-horizontal, $btn-xl-font-size, $btn-xl-line-height, $btn-xl-border-radius);
font-weight: $font-weight-medium;
}
//Button with rounded borders
.btn-rounded{
border-radius: ceil( ($btn-line-height-base + 2) / 2 );
&.btn-xs{
border-radius: ceil( ($btn-xs-line-height + 2) / 2 );
}
&.btn-sm{
border-radius: ceil( ($btn-sm-line-height + 2) / 2);
}
&.btn-lg{
border-radius: ceil( ($btn-lg-line-height + 2) / 2 );
}
}
//Buton spacer helpers
.btn-hspace{
margin-right: 5px;
}
.btn-vspace{
margin-bottom: 5px;
}
.btn-space{
margin-right: 5px;
margin-bottom: 5px;
}
//Social buttons colors
.btn-facebook{ .icon{ color: $facebook; } @include button-icon-active-color($facebook) }
.btn-twitter{ .icon{ color: $twitter; } @include button-icon-active-color($twitter) }
.btn-google-plus{ .icon{ color: $google-plus; } @include button-icon-active-color($google-plus) }
.btn-dribbble{ .icon{ color: $dribbble; } @include button-icon-active-color($dribbble) }
.btn-flickr{ .icon{ color: $flickr; } @include button-icon-active-color($flickr) }
.btn-linkedin{ .icon{ color: $linkedin; } @include button-icon-active-color($linkedin) }
.btn-youtube{ .icon{ color: $youtube; } @include button-icon-active-color($youtube) }
.btn-pinterest{ .icon{ color: $pinterest; } @include button-icon-active-color($pinterest) }
.btn-github{ .icon{ color: $github; } @include button-icon-active-color($github) }
.btn-tumblr{ .icon{ color: $tumblr; } @include button-icon-active-color($tumblr) }
.btn-dropbox{ .icon{ color: $dropbox; } @include button-icon-active-color($dropbox) }
.btn-evernote{ .icon{ color: $evernote; } @include button-icon-active-color($evernote) }
//Social buttons
.btn-social{
min-width: 31px;
padding: 0 8px;
.icon{
font-size: 1.308rem;
}
}
.btn-color.btn-facebook{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $facebook, $facebook); }
.btn-color.btn-twitter{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $twitter, $twitter); }
.btn-color.btn-google-plus{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $google-plus, $google-plus); }
.btn-color.btn-dribbble{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $dribbble, $dribbble); }
.btn-color.btn-flickr{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $flickr, $flickr); }
.btn-color.btn-linkedin{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $linkedin, $linkedin); }
.btn-color.btn-youtube{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $youtube, $youtube); }
.btn-color.btn-pinterest{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $pinterest, $pinterest); }
.btn-color.btn-github{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $github, $github); }
.btn-color.btn-tumblr{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $tumblr, $tumblr); }
.btn-color.btn-dropbox{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $dropbox, $dropbox); }
.btn-color.btn-evernote{ .icon{ color: theme-color("light"); } @include button-variant(theme-color("light"), $evernote, $evernote); }
//Icons inside buttons
.btn{
.icon{
font-size: 1.231rem;
line-height: 15px;
vertical-align: middle;
&.icon-left{
margin-right: ($btn-icon-margin + 3px);
}
&.icon-right{
margin-left: $btn-icon-margin;
}
&.fa{
font-size: 1.154rem;
}
}
&.btn-lg .icon{
font-size: 1.615rem;
line-height: 20px;
}
&.btn-sm .icon{
font-size: 1.154rem;
line-height: 15px;
}
&.btn-xs .icon{
font-size: 1.077rem;
line-height: 14px;
}
}
//Butons dropdown
.btn.dropdown-toggle {
.btn-group &.btn-primary,
.btn-group &.btn-success,
.btn-group &.btn-warning,
.btn-group &.btn-danger {
border-right-color: transparent;
&:hover{
border-right-color: transparent;
}
}
.mdi-chevron-down,
.mdi-chevron-up {
font-size: 1.385rem;
vertical-align: middle;
line-height: 17px;
}
.icon-dropdown {
font-size: 1.385rem;
line-height: 17px;
margin-left: 6px;
&-left {
margin-left: 0;
margin-right: 6px;
}
}
}
//Big buttons
.btn-big{
padding: 10px 13px;
text-align: center;
line-height: 13px;
min-width: 62px;
> .icon{
display: block;
font-size: 2rem;
line-height: 20px;
margin-bottom: 7px;
}
}
//Button outline
.btn-outline {
&.btn-primary {
@include btn-transparent-outline($primary-color-text);
}
&.btn-secondary {
@include btn-transparent-outline(darken(theme-color("light"), 15%));
}
&.btn-success {
@include btn-transparent-outline($success-color-text);
}
&.btn-warning {
@include btn-transparent-outline($warning-color-text);
}
&.btn-danger {
@include btn-transparent-outline($danger-color-text);
}
}
/*------------------------------------------------------------------
[Cards]
*/
.card {
background-color: theme-color("light");
margin-bottom: $card-margin-bottom;
box-shadow: $card-box-shadow;
border-width: 0;
border-radius: $card-border-radius;
display: block;
.card-group & {
box-shadow: none;
}
th {
border-top: 0;
vertical-align: middle;
}
&.border-primary,
&.border-secondary,
&.border-success,
&.border-info,
&.border-warning,
&.border-danger,
&.border-light,
&.border-dark {
border-width: 1px;
}
.list-group-item {
padding-left: 20px;
padding-right: 20px;
}
}
//Card body
.card-body {
padding: $card-body-top-padding $card-body-horizontal-padding $card-body-bottom-padding;
border-radius: 0 0 $card-border-radius $card-border-radius;
.card-title {
margin-bottom: $card-header-margin-bottom;
margin-top: 7px;
}
.card-text-no-title {
margin-top: $card-text-no-title-margin-top;
}
.blockquote {
p{
margin-bottom: 25px;
margin-top: 30px;
}
}
}
.card-nav-tabs {
border-radius: 2px 2px 0 0;
}
//Card heading
.card-header {
font-size: $card-heading-font-size;
font-weight: $card-heading-font-weight;
padding-left: 0;
padding-right: 0;
padding-top: $card-heading-top-padding;
margin: 0 $card-heading-horizontal-padding;
border-bottom-width: 0;
border-radius: $card-border-radius $card-border-radius 0 0;
background-color: transparent;
.tools {
float: right;
font-size: 0;
> a {
display: inline-block;
}
.icon {
display: inline-block;
font-size: $card-heading-icon-size;
line-height: $card-heading-icon-line-height;
vertical-align: middle;
cursor: pointer;
color: $card-heading-icon-color;
min-width: $card-heading-icon-size;
text-align: center;
& + .icon {
margin-left: $card-heading-icon-separation;
}
&:hover {
color: $card-heading-icon-hover;
}
}
}
}
//Card title
.card-title {
font-size: $card-heading-font-size;
font-weight: $card-heading-font-weight;
display: block;
margin: 0;
}
//Card subtitle
.card-subtitle {
display: block;
font-size: $font-size-base;
color: darken(theme-color("light"), 56%);
margin-top: 0;
margin-bottom: $card-heading-subtitle-margin;
}
//Card heading divider
.card-header-divider {
border-bottom: 1px solid darken(theme-color("light"), 15%);
margin: 0 $card-heading-horizontal-padding $card-body-top-padding;
padding-left: 0;
padding-right: 0;
padding-bottom: $card-heading-bottom-padding + $card-heading-subtitle-margin;
.card-subtitle {
margin-top: 0;
margin-bottom: 0;
}
}
//Card flat
.card-flat {
border: none;
box-shadow: none;
}
//Card border
.card-border {
box-shadow: none;
border: 1px solid darken(theme-color("light"),17%);
}
//Card contrast
.card-contrast {
.card-header {
margin: 0;
padding: 20px 20px 11px;
&.card-header-featured {
padding-bottom: 17px;
}
}
.card-footer {
margin: 0;
padding: 20px 20px 17px;
}
.card-body {
padding-top: 16px;
}
}
//Card heading and footing contrast
.card-header-contrast, .card-footer-contrast {
background-color: darken(theme-color("light"), 4%);
}
//Card body contrast
.card-body-contrast {
background-color: darken(theme-color("light"), 4%);
}
//Card border color
.card-border-color {
border-top: 3px solid darken(theme-color("light"), 21%);
}
//Card border danger
.card-border-color-primary {
border-top-color: theme-color("primary");
}
//Card border info
.card-border-color-info {
border-top-color: theme-color("info");
}
//Card border danger
.card-border-color-danger {
border-top-color: theme-color("danger");
}
//Card border warning
.card-border-color-warning {
border-top-color: theme-color("warning");
}
//Card border success
.card-border-color-success {
border-top-color: theme-color("success");
}
//Card border light
.card-border-color-light {
border-top-color: theme-color("light");
}
//Card border dark
.card-border-color-dark {
border-top-color: theme-color("dark");
}
//Card full colors
.card-full {
.card-header {
margin: 0;
padding-left: $card-heading-horizontal-padding;
padding-right: $card-heading-horizontal-padding;
.card-title {
border-width: 0;
}
}
}
//Card colors
.card-full-color {
.card-header {
color: theme-color("light");
padding: 27px 20px 15px;
margin: 0;
.card-subtitle, .icon {
color: theme-color("light");
}
}
.card-body {
padding: 20px;
}
&.card-full-light {
.card-header {
color: $body-color;
.card-subtitle, .icon {
color: $body-color;
}
}
}
}
//Full color style
.card-full-primary {
@include card-full-color($primary-color-text);
}
.card-full-success {
@include card-full-color($success-color-text);
}
.card-full-info {
@include card-full-color($info-color-text);
}
.card-full-warning {
@include card-full-color($warning-color-text);
}
.card-full-danger {
@include card-full-color($danger-color-text);
}
.card-full-light {
@include card-full-color($light-color-text, $body-color);
}
.card-full-dark {
@include card-full-color($danger-color-text);
}
.card-full {
@include card-full-color($grey-color-text);
}
.card-full-dark {
@include card-full-color($dark-color-text);
}
//Table Card
.card-table {
.card-body {
padding: 0;
}
}
// Full width card
.card-fullwidth {
.card-header {
margin: 0;
padding-left: $card-heading-horizontal-padding;
padding-right: $card-heading-horizontal-padding;
}
.card-body {
padding-top: $card-body-top-padding * 2;
}
}
.card-footer {
border: unset;
small {
font-size: $small-card-font-size;
}
}
.card-deck,
.card-group {
.card {
margin-bottom: $card-container-margin-bottom;
}
}
// Card Group
.card-group {
.card {
@media (min-width: 576px) {
display: flex;
flex-direction: column;
}
}
}
.card-columns {
margin-bottom: $card-container-margin-bottom;
}
.card-img-overlay{
overflow: hidden;
&.card-img-overlay-center{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
}
.card-title {
font-size: 30px;
margin-bottom: 40px;
}
p {
font-size: 18px;
}
.btn {
margin-top: 55px;
background-color: rgba($color: #000000, $alpha: 0.07);
color: theme-color("light");
border: 1px solid #d8d8d8;
}
@media (max-width: 576px){
.card-title{
font-size: 19px;
font-weight: 500;
margin-bottom: 2px;
}
p{
font-size: 13px;
line-height: 1.2;
}
}
}
/*------------------------------------------------------------------
[Code]
*/
pre{
padding: 20px;
border: 0;
border-radius: 0;
background-color: darken(theme-color("light"), 2%);
font-size: .9231rem;
margin: 0 0 9px;
code {
white-space: pre-wrap;
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Collapse cards style]
*/
.accordion {
margin-bottom: 40px;
padding: 0;
.card {
margin: 0;
padding: 0;
border-radius: 3px;
& + .card {
margin-top: .384rem;
}
}
.card-header {
padding: 0;
margin: 0;
border-radius: 3px;
button {
font-size: 1.385rem;
font-weight: 300;
padding: 1.385rem 1.692rem;
display: block;
color: theme-color("primary");
width: 100%;
color: $body-color;
background-color: transparent;
text-align: left;
&.btn {
box-shadow: none;
border: 0;
&:focus {
background-color: rgba(0,0,0,0.04);
}
}
.icon {
transition: transform 200ms ease-in-out;
font-size: 1.923rem;
vertical-align: middle;
position: relative;
top: -1px;
display: inline-block;
margin-right: 10px;
}
&[aria-expanded='true'] {
color: theme-color("primary");
.icon {
transform: rotate(90deg);
}
}
}
}
.card-body {
padding: 0 1.538rem 1.538rem 1.538rem;
border-top: 0;
line-height: 22px;
border-radius: 0 0 3px 3px;
}
}
//Colored Full Cards
.accordion-color {
.card {
.card-header {
button {
color: theme-color("light");
&[aria-expanded='true'] {
color: theme-color("light");
}
}
}
}
}
// Checkboxes and radios
.form-check {
margin-bottom: 0.5rem
}
.custom-control {
min-height: $custom-control-indicator-size;
min-width: $custom-control-indicator-size;
margin-top: $custom-control-vertical-padding;
margin-bottom: $custom-control-vertical-padding + .923rem;
}
.custom-control-label {
position: static;
display: inline-block;
line-height: $custom-control-label-line-height;
&:before,
&:after {
top: 0;
left: 0;
}
}
.custom-control-input {
&:checked ~ .custom-control-label::after {
color: theme-color("primary");
}
&:checked ~ .custom-control-label::before {
border-color: theme-color("primary");
}
&:checked ~ .custom-control-color::after {
background-color: theme-color("primary");
color: theme-color("light");
border-radius: $input-check-component-border-radius;
.custom-radio & {
border-radius: 50%;
}
}
&:disabled:checked ~ .custom-control-label::before {
border-color: theme-color("grey");
}
&:disabled:checked ~ .custom-control-label::after {
color: theme-color("grey");
}
&:disabled:checked ~ .custom-control-color::after {
background-color: transparent;
}
}
// Checkboxes
.custom-checkbox {
.custom-control-label {
&:before {
content: "";
width: $input-check-component-size;
height: $input-check-component-size;
border: $input-check-component-border;
border-radius: $input-check-component-border-radius;
margin: $input-check-component-margin;
}
}
.custom-control-input:checked ~ .custom-control-label::after {
content: "\f26b";
font-size: $input-check-component-size - .1538rem;
font-family: $icons-font;
margin: $input-check-component-margin;
font-weight: normal;
text-align: center;
line-height: 1.1;
}
}
// Radios
.custom-radio {
.custom-control-label {
&:before {
content: "";
border: 1px solid $input-border-color;
width: $input-check-component-size + .07692rem;
height: $input-check-component-size + .07692rem;
margin: $input-check-component-margin;
}
}
.custom-control-input:checked ~ .custom-control-label::after {
content: "\f26d";
width: $input-check-component-size + .07692rem;
height: $input-check-component-size + .07692rem;
margin: $input-check-component-margin;
font-size: 1rem;
font-family: $icons-font;
text-align: center;
line-height: 1.8;
}
}
// Icon radio
.custom-radio-icon {
padding: 7px 0;
width: $radio-icon-component-size;
height: $radio-icon-component-size;
.custom-control-label::after, .custom-control-label::before {
display: none;
}
.custom-control-label {
cursor: pointer;
margin: 0;
width: $radio-icon-component-size;
height: $radio-icon-component-size;
line-height: $radio-icon-component-size;
border: 1px solid $radio-icon-component-border;
border-radius: 50%;
text-align: center;
font-size: $radio-icon-component-icon-size;
vertical-align: middle;
color: $radio-icon-component-color;
&:hover {
border-color: darken($radio-icon-component-border, 10%);
}
}
// Checked
input[type="radio"]:checked {
& + .custom-control-label {
border-color: theme-color("primary");
color: theme-color("primary");
background-color: theme-color("light");
i {
color: theme-color("primary");
}
}
}
input[type="radio"]:focus {
& + .custom-control-label {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
}
@include custom-form-validation-state("valid", theme-color("success"));
@include custom-form-validation-state("invalid", theme-color("danger"));
// Sizing
.custom-control-sm {
min-width: 1.38462rem;
min-height: 1.38462rem;
.custom-control-input {
~ .custom-control-label {
&::before {
width: 1.38462rem;
height: 1.38462rem;
}
}
&:checked ~ .custom-control-label {
&::after {
width: 1.38462rem;
height: 1.38462rem;
font-size: 15px;
right: 0;
line-height: 1.2;
vertical-align: top;
}
}
}
}
.be-addon {
// Show icon arrow by default
.dropdown-toggle {
&:after {
display: inline-block;
}
}
}
// Select
.custom-select {
@include border-radius(0);
&:focus {
box-shadow: 0 0 0 transparent;
}
}
// Custom file input
.custom-file-label {
.input-group & {
display: flex;
align-items: center;
&:after {
display: flex;
align-items: center;
height: 100%;
}
}
}
/*------------------------------------------------------------------
[Dropdown menu]
*/
// Hide icon arrow by default
.dropdown-toggle {
&:after {
display: none;
}
}
// div container for the dropdown showcase
.dropdown-showcase{
margin: 0;
.showcase{
display: inline-block;
margin-right: 20px;
margin-bottom: 6px;
}
}
//Dropdown Menu Style
.dropdown-menu {
box-shadow: $dropdown-box-shadow;
border-radius: 3px;
padding: 7px 0px;
min-width: 185px;
line-height: 18px;
//First level
> .dropdown-item {
font-weight: $font-weight-normal;
color: $dropdown-text-color;
padding: 8px 20px;
.icon {
font-size: 1.231rem;
line-height: normal;
vertical-align: middle;
margin-right: 8px;
color: darken(theme-color("light"), 59%)
}
&:focus, &:active {
background-color: transparent;
color: $dropdown-text-color;
}
&:hover {
background-color: darken(theme-color("light"), 4%);
}
}
.btn-group {
.btn {
font-size: 1.231rem;
color: darken(theme-color("light"), 59%);
padding: 0 20px;
}
}
//Divider Line
.dropdown-divider {
margin: 6px 0;
border-color: $dropdown-border-color;
}
}
//Dropdown Header
.dropdown-header {
padding: 5px 20px 1px;
font-weight: 600;
color: lighten($dropdown-text-color, 45%);
cursor: default;
}
//Dropdown Tools
.dropdown-tools {
text-align: center;
}
//Dropdown Color Set
.dropdown-menu-primary {
@include dropdown-color($primary-color-text);
}
.dropdown-menu-success {
@include dropdown-color($success-color-text);
}
.dropdown-menu-warning {
@include dropdown-color($warning-color-text);
}
.dropdown-menu-danger {
@include dropdown-color($danger-color-text);
}
/*------------------------------------------------------------------
[Forms]
*/
.form-control {
border-width: 1px;
border-top-color: $input-top-border;
box-shadow: none;
padding: 10px 12px;
font-size: $font-size-base + 0.1538rem;
transition: none;
height: $input-height;
}
.form-control[multiple] {
padding: 0;
@supports #{$ios} {
padding: 10px 12px;
}
option {
padding: 8px 12px;
}
}
// Remove padding bottom
.col-form-label {
padding-bottom: 0;
line-height: 1;
@include phone {
padding-bottom: 8px;
}
}
//Remove default iOs input style
input.form-control, textarea.form-control{
-webkit-appearance: none;
}
// Reset height
textarea.form-control, select[multiple], select[size] {
height: auto;
}
label{
font-weight: $font-weight-normal;
font-size: $font-size-base;
margin-bottom: 8px;
color: $input-label-color;
}
// File input
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
& + label {
padding: $btn-padding-vertical $btn-padding-horizontal;
font-size: $btn-font-size-base;
line-height: $btn-line-height-base;
border: 1px solid transparent;
border-color: $input-border-color;
border-radius: $btn-border-radius-base;
display: inline-block;
cursor: pointer;
i {
margin-right: 10px;
}
}
&:focus + label.btn-secondary,
& + label.btn-secondary:focus {
box-shadow: 0 0 0 $btn-focus-width rgba(theme-color('secondary'), .5);
outline: none;
}
&:focus + label.btn-primary,
& + label.btn-primary:focus {
box-shadow: 0 0 0 $btn-focus-width rgba(theme-color('primary'), .5);
outline: none;
}
}
// Form control sizing
//
.form-control-xs {
height: 30px;
font-size: $font-size-sm * 1.086;
padding: 6px 9px;
}
select.form-control-xs {
&:not([size]):not([multiple]) {
height: $input-height-xs;
}
}
.form-control-sm {
height: 37px;
font-size: $font-size-base;
padding: 4px 12px;
}
.form-control-lg {
height: 57px;
padding: 12px 14px;
font-size: 1.385rem;
font-weight: $font-weight-light;
border-radius: 2px;
}
// Form groups
.form-group {
&.row {
margin-bottom: 0;
padding: 12px 0;
.col-form-label {
.form-horizontal & {
text-align: right;
}
}
label {
white-space: nowrap;
}
}
}
//Input group addon
.input-group-prepend, .input-group-append {
.custom-control-label {
position: static;
&:before,
&:after {
left: 0;
}
}
.custom-control {
width: $input-check-component-size + .07692rem;
height: $input-check-component-size + .07692rem;
}
.input-group-text {
padding: 10px 12px;
}
}
.custom-control {
.input-group-prepend &, .input-group-append & {
margin: 0;
padding: 0;
}
}
// Custom select
.custom-select {
line-height: 1.2;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
-moz-appearance: none;
-webkit-appearance: none;
}
// Form control states
.form-control-success,
.form-control-error {
padding: 10px 45px 10px 12px;
+ span {
padding-right: ($input-btn-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2);
font-size: $form-validation-icon-size;
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
pointer-events: none;
}
&.is-valid {
+ span {
color: theme-color("success");
}
}
&.is-invalid {
+ span {
color: theme-color("danger");
}
}
}
.form-title {
font-size: 1.385rem;
font-weight: 400;
padding-left: 0;
padding-right: 0;
padding-top: 0.2384rem;
padding-bottom: 1.031rem;
margin: 0 0 13px;
border-bottom-width: 0;
border-radius: 3px 3px 0 0;
background-color: transparent;
border-bottom: 1px solid #d9d9d9;
.form-subtitle {
font-size: 1rem;
color: #707070;
}
}
/*------------------------------------------------------------------
[Images]
*/
// Rounded corners
.img-rounded {
border-radius: 4px;
}
\ No newline at end of file
/*------------------------------------------------------------------
[Input Groups]
*/
//Search input component
.input-search {
input{
border: 1px solid $input-border-color;
border-radius: 0;
display: block;
font-size: $font-size-base;
&:focus{
background-color: transparent;
}
}
.input-group-btn {
position: absolute;
right: 0;
display: block;
width: auto;
top: 1px;
right: 1px;
z-index: 3;
button{
box-shadow: none;
border: none;
height: $input-height - .1538rem;
&:active{
background-color: transparent;
box-shadow: none;
}
.icon{
font-size: 1.923rem;
color: lighten($body-color, 20%);
}
&:hover{
.icon{
color: lighten($body-color, 10%);
}
}
}
}
&.input-group-lg{
.input-group-btn {
button{
height: $input-height-lg - .1538rem;
}
}
}
&.input-group-sm{
.input-group-btn{
button{
height: $input-height-sm + .4rem;
&:active,
&:active:hover {
background-color: transparent;
box-shadow: none;
.icon {
color: theme-color("primary");
}
}
.icon{
font-size: 1.692rem;
}
}
}
}
}
.input-group-lg{
> .form-control:not(textarea),
> .input-group-prepend > .input-group-text,
> .input-group-append > .input-group-text,
> .input-group-prepend > .btn,
> .input-group-append > .btn {
height: 57px;
padding: 12px 14px;
font-size: 1.385rem;
font-weight: $font-weight-light;
border-radius: 2px;
}
> .input-group-append {
.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.input-group-prepend {
.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.input-group-sm {
> .form-control:not(textarea),
> .input-group-prepend > .input-group-text,
> .input-group-append > .input-group-text,
> .input-group-prepend > .btn,
> .input-group-append > .btn {
height: 37px;
font-size: $font-size-base;
padding: 4px 12px;
}
}
/*------------------------------------------------------------------
[List group]
*/
.list-group-item {
padding: 13px 15px;
&.active{
.icon{
color: theme-color("light") !important;
}
.badge {
background: theme-color("light");
color: theme-color("primary");
}
& + .active {
border-top: solid 1px theme-color("light");
}
}
.icon{
margin-right: 18px;
font-size: 1.231rem;
}
.text {
flex: 1 1 auto;
}
.badge {
flex: 0 0 auto;
.active & {
background: theme-color("light");
color: theme-color("primary");
}
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Modals]
*/
.modal-content{
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
background-color: theme-color("light");
color: $body-color;
border: none;
}
//Modal Header
.modal-header{
border: 0;
padding: 19px;
h1, h2, h3, h4, h5, h6{
display: block;
margin: 0;
}
.close{
font-size: 1.538rem;
opacity: 0.4;
text-shadow: none;
margin-top: -17px;
&:hover{
opacity: 0.8;
}
&:focus, &:not(:disabled):not(.disabled):focus {
outline: none;
opacity: 0.4;
}
}
}
//Modal Body
.modal-body{
padding: 10px 20px 20px;
//Remove margin bottom from last row form group
.row:last-child{
.form-group{
margin-bottom: 0;
}
}
}
//Modal Main Icon
.modal-main-icon{
display: inline-block;
height: 45px;
width: 45px;
line-height: normal;
font-size: 3.846rem;
}
//Modal Footer
.modal-footer{
padding: 20px;
border: none;
> :not(:first-child) { margin-left: 4px; }
> :not(:last-child) { margin-right: 4px; }
}
// Modal Open
.modal-open {
.modal {
padding: 0 !important;
}
}
//Full Color Alerts
.modal-full-color{
.modal-header{
padding: 19px;
}
.modal-content{
color: theme-color("light");
background-color: transparent;
.close{
color: theme-color("light");
line-height: 40px;
opacity: 0.6;
&:hover{
color: theme-color("light");
opacity: 1;
}
&:focus, .close:not(:disabled):not(.disabled):focus{
color: theme-color("light");
opacity: 0.6 !important;
}
}
.modal-footer{
border: none;
}
}
.btn-secondary{
border-width: 2px;
border-color: transparent;
}
//Transparent style for color buttons
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.5);
border-width: 2px;
&:focus{
background-color: transparent;
border-color: rgba(255, 255, 255, 0.4);
}
&:hover,.hover{
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.8);
}
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
&.active,
&:active {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.8);
}
}
}
//Modal Full Color set
.modal-full-color-success{
@include modal-full-color($success-color-text);
}
.modal-full-color-primary{
@include modal-full-color($primary-color-text);
}
.modal-full-color-warning{
@include modal-full-color($warning-color-text);
}
.modal-full-color-danger{
@include modal-full-color($danger-color-text);
}
.modal-full-color-dark{
@include modal-full-color(theme-color("dark"));
}
//Bootstrap Modals
.full-width{
width: 90%;
max-width:none;
@include tablet {
width: 100%;
}
&.modal-container {
width: 100%;
@include tablet {
width: 100%;
}
.modal-content {
width: 81%;
@include tablet {
width: 100%;
}
}
}
.modal-content {
width: 100%;
max-width:none;
}
}
//Custom Width Modals
.custom-width {
//Bootstrap Modals
.modal-dialog {
width: 700px;
max-width: none;
}
//Nifty Modals
.modal-content {
width: 700px;
max-width: none;
}
@include tablet {
.modal-content, .modal-dialog, .modal-header {
width: 100% !important;
}
}
}
//Colored Header Modals
.colored-header{
.modal-content{
.modal-header{
background-color: darken(theme-color("light"), 10%);
color: theme-color("light");
padding: 30px 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
.modal-title{
font-size: 1.538rem;
}
.close{
color: rgba(0, 0, 0, 0.7);
margin-top: -13px;
}
}
.modal-body{
padding: 35px 20px 20px;
background-color: theme-color("light");
color: $body-color;
}
.modal-footer{
background-color: theme-color("light");
}
}
}
//Colored header color set
.colored-header-success{
@include colored-header($success-color-text);
}
.colored-header-primary{
@include colored-header($primary-color-text);
}
.colored-header-warning{
@include colored-header($warning-color-text);
}
.colored-header-danger{
@include colored-header($danger-color-text);
}
.colored-header-dark{
@include colored-header(theme-color("dark"));
}
//Responsive Design
@include tablet {
.modal-dialog{
margin: 0 auto;
}
}
.be-modal-open{
overflow-x: visible;
}
\ No newline at end of file
/*------------------------------------------------------------------
[Pagination]
*/
.pagination{
padding-left: 0;
border-radius: $border-radius;
flex-wrap: wrap;
}
.page-item {
@include phone {
margin-bottom: 5px;
}
&:first-child {
.page-link {
border-radius: 2px;
}
}
&:last-child {
.page-link {
border-radius: 2px;
}
}
.pagination-rounded & {
&:first-child {
.page-link {
border-radius: 50%;
}
}
&:last-child {
.page-link {
border-radius: 50%;
}
}
}
}
.page-link {
font-size: 1.077rem;
line-height: 14px;
font-weight: $font-weight-normal;
padding: ($pagination-padding-y + 0.2692rem) ($pagination-padding-x + 0.1731rem);
color: $pagination-color;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
border-radius: 2px;
margin-left: 4px;
> span{
line-height: 12px;
}
}
.pagination-rounded{
.page-link {
border-radius: 50%;
width: 35px;
height: 35px;
text-align: center;
line-height: 14px;
}
}
\ No newline at end of file
//
// Popovers
// --------------------------------------------------
.popover {
font-size: $font-size-base;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
.popover-header {
margin: 0;
}
&.bottom > .arrow {
border-bottom-color: darken($popover-bg, 3%);;
top: -10px;
&:after{
background-color: transparent;
top: -2px;
margin-left: -10px;
border-bottom-color:$popover-border-color;
border-top-width: 1px;
z-index: -1;
}
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Progress bars]
*/
.progress {
height: $progress-line-height;
box-shadow: none;
}
.progress-bar{
box-shadow: none;
line-height: $progress-line-height;
background-color: $left-sidebar-progress-bar-color;
}
\ No newline at end of file
/*------------------------------------------------------------------
[Tables]
*/
.table{
> thead{
> tr{
> th{
border-bottom-width: 2px;
font-weight: $font-weight-bold;
}
}
//Color classes
&.primary{
> tr{
> th{
color: theme-color("primary");
}
}
}
&.success{
> tr{
> th{
color: theme-color("success");
}
}
}
}
> tbody{
> tr{
> td{
font-weight: $font-weight-normal;
vertical-align: middle;
}
}
}
}
.be-table-responsive {
scroller-x: hidden;
@include tablet {
display: block;
width: 100%;
overflow-x: auto;
}
}
.table-condensed{
> thead{
> tr{
> th{
padding-top: 10px;
padding-bottom: 8px;
}
}
}
}
.table-bordered{
> thead{
> tr{
> th{
padding: 14px 10px;
}
}
}
tbody{
>tr{
td{
&:first-child{
padding-left: 10px;
}
&:last-child{
padding-right: 10px;
}
}
}
}
}
// Generate the contextual variants
@include table-row-variant(primary, theme-color("primary"));
@include table-row-variant(success, theme-color("success"));
@include table-row-variant(info, theme-color("info"));
@include table-row-variant(warning, theme-color("warning"));
@include table-row-variant(danger, theme-color("danger"));
.table-responsive{
border: 0;
margin-bottom: 0;
tbody{
> tr{
> td{
padding-top: $table-cell-padding-sm + 4px;
padding-bottom: $table-cell-padding-sm + 4px;
@include tablet {
white-space: nowrap;
}
}
}
}
}
//Helpers classes
.table{
tr{
th, td{
.custom-control {
padding: 0;
margin: 0;
vertical-align: middle;
.custom-control-indicator {
top: 0;
}
}
//Actions column
&.actions{
text-align: center;
.icon{
color: darken(theme-color("light"), 37%);
font-size: $font-size-base + 0.3846rem;
line-height: 18px;
&:hover{
color: darken(theme-color("light"), 50%);
}
}
}
}
}
tbody{
tr{
td{
&.user-avatar{
img{
height: 30px;
width: 30px;
border-radius: 50%;
margin-right: 10px;
@include tablet {
display: none;
}
}
}
&.cell-detail{
span{
display: block;
}
.cell-detail-description{
display: block;
font-size: $font-size-base - 0.1538rem;
color: darken(theme-color("light"), 40%);
}
}
&.user-info{
img{
float: left;
}
span{
padding-left: 40px;
@include tablet {
padding-left: 0;
}
}
}
&.milestone{
min-width: 100px;
span{
display: block;
font-size: $font-size-base - 0.1538rem;
color: darken(theme-color("light"), 40%);
margin-bottom: 6px;
&.completed{
float: right;
}
}
.progress{
height: 6px;
background-color: darken(theme-color("light"), 10%);
margin-bottom: 0;
.progress-bar{
border-radius: $border-radius;
}
}
}
}
&.online{
td:first-child{
border-left: 3px solid theme-color("success");
padding-left: 17px;
}
}
&.primary {
td:first-child {
border-left: 3px solid theme-color("primary");
padding-left: 17px;
}
}
&.info {
td:first-child {
border-left: 3px solid theme-color("info");
padding-left: 17px;
}
}
&.success {
td:first-child {
border-left: 3px solid theme-color("success");
padding-left: 17px;
}
}
&.warning {
td:first-child {
border-left: 3px solid theme-color("warning");
padding-left: 17px;
}
}
&.danger {
td:first-child {
border-left: 3px solid theme-color("danger");
padding-left: 17px;
}
}
}
}
.number{
text-align: right;
}
&.table-borderless{
thead{
tr{
th{
border-bottom: 2px solid $gray-300;
}
}
}
tbody{
tr{
td{
border-top-width: 0;
}
}
}
}
}
//Table inside full-width widget
.card-table{
table{
margin-bottom: 0;
}
tr{
th, td{
&:first-child{
padding-left: 20px;
}
&:last-child{
padding-right: 20px;
}
}
}
thead{
tr{
th{
padding-top: 15px;
padding-bottom: 10px;
}
}
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Tabs]
*/
.nav-tabs {
background-color: theme-color("light");
border-bottom: 2px solid darken(theme-color("light"), 8%);
> li.nav-item {
margin-bottom: -2px;
margin-right: 2px;
a.nav-link {
padding: 11px 20px;
margin-right: 0;
min-width: 60px;
text-align: center;
border-radius: 0;
color: $body-color;
border-width: 0;
.icon {
font-size: 1.538rem;
vertical-align: middle;
margin: 0 6px;
line-height: 17px;
}
&:hover {
background: transparent;
color: theme-color("primary");
}
&:active {
background-color: transparent;
}
&.active {
background: transparent;
border-bottom: 2px solid theme-color("primary");
.icon {
color: #555;
}
&:hover, &:focus {
color: $body-color;
}
}
&.disabled{
color: $gray-600;
}
}
}
}
.nav-tabs-classic {
background-color: transparent;
border-bottom: 0;
> li.nav-item {
margin-bottom: 0;
margin-right: 0;
a.nav-link {
border-bottom: 0;
&.active {
background-color: $white;
border-bottom: 0;
border-radius: 3px 3px 0 0;
.tab-left & {
border-radius: 3px 0 0 3px;
}
}
}
}
}
//Tab Left and Tab Rgiht
.tab-left, .tab-right {
.nav-tabs {
float: left;
flex-direction: column;
> li.nav-item {
float:none;
margin-right: 0;
margin-bottom: 0;
> a.nav-link {
text-align: left;
min-width: 38px;
padding: 14px 12px;
}
}
}
.tab-content {
overflow: auto;
}
}
.tab-content {
background: theme-color("light");
padding: 20px;
margin-bottom: 40px;
border-radius: 0 0 3px 3px;
.tab-pane {
//First heading margin-top fix
h1, h2, h3, h4, h5, h6 {
&:first-child {
margin-top: 5px;
}
}
}
.card {
box-shadow: unset;
.card-header {
margin-right: 0px;
margin-left: 0px;
}
.card-body {
padding-right: 0px;
padding-left: 0px;
}
}
}
// Navs Color States
.nav-tabs-primary{
@include tabs-color(theme-color("primary"));
}
.nav-tabs-success{
@include tabs-color(theme-color("success"));
}
.nav-tabs-warning{
@include tabs-color(theme-color("warning"));
}
.nav-tabs-danger{
@include tabs-color(theme-color("danger"));
}
\ No newline at end of file
/*------------------------------------------------------------------
[Tooltips]
*/
.tooltip {
font-size: ($font-size-sm * 1.12);
line-height: 1.5;
}
\ No newline at end of file
/*------------------------------------------------------------------
[Typography]
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
small,
.small {
font-weight: $font-weight-light;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 15px;
margin-bottom: 10px;
small,
.small {
font-size: $small-font-size + 10;
}
}
// Body text
// -------------------------
p {
margin: 0 0 $paragraph-margin;
}
.lead {
font-size: $font-size-base * 1.616;
line-height: 26px;
}
// Emphasis & misc
// -------------------------
p {
small,
.small {
font-size: .8462rem;
}
}
mark,
.mark {
background-color: lighten($state-warning-bg, 44%);
padding: 0;
}
.text-bold {
font-weight: $font-weight-medium !important;
}
// Contextual colors
.text-success {
@include text-emphasis-variant(a, theme-color("success"));
}
.text-warning {
@include text-emphasis-variant(a, theme-color("warning"));
}
.text-danger {
@include text-emphasis-variant(a, theme-color("danger"));
}
// Lists
// -------------------------
// Unordered and Ordered lists
ul,
ol {
line-height: $list-lineheight;
ul,
ol {
padding-left: 25px;
}
}
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
ul,
ol {
padding-left: 40px;
}
}
// Misc
// -------------------------
// Blockquotes
blockquote, .blockquote {
margin-bottom: $spacer;
font-size: $blockquote-font-size;
p{
margin-bottom: 18px;
}
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
footer,
small,
.small {
font-size: 1rem;
}
}
//Display Heading
// -------------------------
.display-heading{
font-size: $display-heading-size;
font-weight: $font-weight-thin;
margin: $display-heading-margin;
@include tablet{
font-size: ceil($display-heading-size - ($display-heading-size * 0.2));
}
}
//Display Description
// -------------------------
.display-description{
font-size: $display-description-size;
font-weight: $font-weight-thin;
line-height: $display-description-line-height;
margin: $display-description-margin;
@include tablet{
font-size: ceil($display-description-size - ($display-description-size * 0.2));
line-height: ceil($display-description-line-height - ($display-description-line-height * 0.2));
}
}
// Addresses
address {
line-height: 20px;
}
\ No newline at end of file
// Contrast alerts Mixin
@mixin contrast-alert-variation($color) {
background-color: darken($color, 1%);
}
//Colored alerts Mixin
@mixin icon-alert-variation($color) {
> .icon{
background-color: $color;
&:after{
border-left-color: $color;
}
}
}
//Dismissible alerts color variations
@mixin dismissible-variation($color) {
.close{
color: darken($color, 30%);
&:hover {
color: darken($color, 30%);
opacity: 0.5;
}
}
}
//Alert Color Icon Bg
@mixin alert-icon-colored($color) {
> .icon{
color: $color;
}
}
@mixin text-color-variation($color) {
color: $color;
}
\ No newline at end of file
//Colored Badges Mixin
@mixin badge-color($color){
color: $badge-text-color;
background-color: $color;
border: transparent;
}
/*------------------------------------------------------------------
[Bootstrap elements]
*/
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
&:focus,
&.focus {
color: $color;
background-color: $background;
border-color: $border;
outline: none;
}
&:hover, &.hover{
color: $color;
box-shadow: inset 0 -1px 0 darken($background, 10%);
background-color: lighten($background, 2%);
border-color: lighten($border, 2%);
border-bottom-color: darken($background, 10%);
}
&:active,
&.active,
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
color: $color;
box-shadow: inset 0 2px 0 darken($background, 10%);
background-color: darken($background, 6%);
border-color: darken($border, 6%);
border-top-color: darken($border, 17%);
.icon{
color: $color;
}
&:hover,
&:focus,
&.focus {
color: $color;
background-color: darken($background, 6%);
border-color: darken($border, 6%);
border-top-color: darken($border, 17%);
box-shadow: inset 0 2px 0 darken($background, 10%);
.icon{
color: $color;
}
}
}
&:active,
&.active,
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $background;
border-color: $border;
color: $color;
box-shadow: none;
}
}
.badge {
color: $background;
background-color: $color;
}
}
@mixin button-shade($background) {
background-color: $background;
border-color: $background;
&:focus,
&.focus {
background-color: $background;
border-color: $background;
}
&:hover {
background-color: lighten($background, 5%);
border-color: lighten($background, 5%);
}
&:active,
&.active,
.show > &.dropdown-toggle {
background-color: darken($background, 3%);
border-color: darken($background, 3%);
&:hover,
&:focus,
&.focus {
background-color: darken($background, 3%);
border-color: darken($background, 3%);
}
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $background;
border-color: $background;
}
}
.badge {
color: $background;
}
}
@mixin button-icon-active-color($color) {
&:active,
&.active,
.show > &.dropdown-toggle {
.icon{
color: $color;
}
&:hover,
&:focus,
&.focus {
.icon{
color: $color;
}
}
}
}
//Colored buttons in buttons groups
@mixin colored-btn-group($bg) {
border-left-color: darken($bg, 7%);
border-right-color: darken($bg, 7%);
&:hover,
&:active,
&.active {
border-left-color: darken($bg, 13%);
border-right-color: darken($bg, 13%);
border-bottom-color: transparent;
}
&.active,
&:active {
box-shadow: inset 0 2px 0 darken($bg, 10%);
}
&:hover + .btn,
&:active + .btn,
&.active + .btn {
border-left-color: darken($bg, 13%);
}
&:first-child {
border-left-color: transparent;
}
&:last-child {
border-right-color: transparent;
}
}
//Colored buttons in buttons groups
@mixin colored-vertical-btn-group($bg) {
border-top-color: darken($bg, 7%);
border-bottom-color: darken($bg, 7%);
&:hover,
&:active,
&.active {
box-shadow: none;
border-top-color: darken($bg, 13%);
border-bottom-color: darken($bg, 13%);
}
&:first-child {
border-top-color: transparent;
}
&:last-child {
border-bottom-color: transparent;
}
&:active,
&.active{
box-shadow: inset 0 1px 0 darken($bg, 13%);
border-top-color: darken($bg, 13%);
border-bottom-color: darken($bg, 13%);
}
}
//Outline transparent button
@mixin btn-transparent-outline($color) {
background-color: transparent;
color: theme-color("light");
border-color: rgba(255,255,255,.5);
border-width: 2px;
&:hover {
border-color: theme-color("light");
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
& + .btn {
border-left-color: transparent;
}
}
&:active,
&.active {
background-color: theme-color("light");
color: $color;
border-color: transparent;
border-width: 2px;
box-shadow: $btn-box-shadow-base;
}
&:focus {
box-shadow: $btn-box-shadow-base;
}
}
\ No newline at end of file
//Full colored panel
@mixin card-full-color($bgcolor, $color:$white){
background-color: $bgcolor;
color: $color;
.card-header-contrast{
background-color: lighten($bgcolor, 3%);
padding: 20px 20px 15px;
margin: 0;
}
.tools{
.icon{
color: $color;
&:hover{
color: darken($bgcolor, 6%);
}
}
}
}
\ No newline at end of file
//Full colored modal
@mixin dropdown-color($color) {
border-color: transparent;
background-color: $color;
&.dropdown-menu {
//First level
> .dropdown-item {
color: theme-color("light");
&:focus, &:active {
color: theme-color("light");
}
&:hover {
background-color: darken($color, 5%);
color: theme-color("light");
}
.icon {
color: theme-color("light");
}
}
.dropdown-tools {
.btn-group {
.btn {
background-color: transparent;
color: theme-color("light");
border-color: lighten($color, 18%);
border-width: 2px;
&:hover {
border-color: theme-color("light");
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
& + .btn {
border-left-color: transparent;
}
}
&:active,
&.active {
background-color: theme-color("light");
color: $color;
border-color: transparent;
border-width: 2px;
box-shadow: $btn-box-shadow-base;
}
&:focus {
box-shadow: $btn-box-shadow-base;
}
}
}
}
}
//Divider Line
.dropdown-divider {
border-color: darken($color, 5%);
}
}
@mixin custom-form-validation-state($state, $color) {
// Color the label and help text
.form-control-feedback,
.col-form-label,
.form-check-label,
.custom-control {
.was-validated &:#{$state},
&.is-#{$state} {
color: $body-color;
}
}
.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
&:focus {
box-shadow: none;
}
}
}
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-file-control {
border-color: $color;
&::before { border-color: inherit; }
}
&:focus {
box-shadow: none;
}
}
}
.custom-control-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-label {
color: theme-color("noir");
&::after {
color: $color;
}
&::before {
background-color: theme-color("light");
border-color: $color;
color: $color;
}
}
&:checked {
~ .custom-control-label::before {
background-color: theme-color("light");
}
}
}
}
.custom-control-input:checked {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-color {
&::after {
background-color: $color;
color: theme-color("light");
}
}
}
}
}
//Colored Labels Mixin
@mixin label-color($color){
color: $light-color;
background-color: $color;
border: transparent;
}
//Full colored modal
@mixin modal-full-color($color){
.modal-header{
background-color: $color;
}
.modal-body, .modal-footer{
background-color: $color;
}
.btn-secondary{
color: $color;
&:active{
color: $color;
}
}
}
//Colored header modal
@mixin colored-header($color){
.modal-content{
.modal-header{
background-color: $color;
}
}
}
\ No newline at end of file
// Tables
@mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table-#{$state} {
&,
> th,
> td {
background-color: $background;
color: theme-color("light");
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover {
$hover-background: darken($background, 5%);
.table-#{$state} {
@include hover {
background-color: $hover-background;
color: theme-color("light");
> td,
> th {
background-color: $hover-background;
color: theme-color("light");
}
}
}
}
}
//Colored Labels Mixin
@mixin tabs-color($color){
> li.nav-item{
a.nav-link {
&:hover, &:focus {
color: $color;
}
&.active{
border-bottom: 2px solid $color;
}
}
}
&.nav-tabs-classic {
> li.nav-item {
a.nav-link {
&.active {
border-bottom: 0;
background-color: $color;
color: $white;
}
}
}
& + .tab-content {
background-color: $color;
color: $white;
}
}
}
/*------------------------------------------------------------------
[Charts]
*/
//Chart legend for widgets (table)
.chart-legend{
table{
width: 100%;
tr{
td{
padding: $chart-legend-padding 0;
vertical-align: middle;
}
}
}
}
//Chart legend color cell
.chart-legend-color{
> span{
display: block;
background-color: hsl(0, 0%, 95%);
height: $chart-legend-color-size;
width: $chart-legend-color-size;
}
}
//Chart legend value cell
.chart-legend-value{
text-align: right;
}
//Chart legend horizontal (list)
.chart-legend-horizontal{
margin: 0;
padding: 0;
list-style: none;
line-height: 14px;
> li{
display: inline-block;
& + li{
margin-left: 14px;
}
> span{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: hsl(0, 0%, 95%);
margin-right: 2px;
}
}
}
//Chart pie counter
.chart-pie-counter{
display: block;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
line-height: $chart-pie-counter-size;
margin-top: -($chart-pie-counter-size / 2);
font-size: $chart-pie-counter-size;
font-weight: $font-weight-light;
}
\ No newline at end of file
/*------------------------------------------------------------------
[Code]
*/
/* Pretty printing styles. Used with prettify.js. */
.prettyprint {
font-size: .9231rem;
line-height: 1.5;
}
/* Light Theme*/
pre{
color: #555555;
.pln {
color: #777777;
}
.str {
color: #DD1144;
}
.kwd {
color: #445588;
}
.com {
color: #b8b6b1;
}
.typ {
color: #008080;
}
.lit {
color: #DD1144;
}
.pun,
.opn,
.clo {
color: #949494;
}
.tag {
color: #4285F4;
}
.atn {
color: hsl(5, 81%, 66%);
}
.atv {
color: hsl(231, 73%, 66%);
}
.dec,
.var {
color: #DD1144;
}
.fun {
color: #445588;
}
}
/*Dark Theme*/
pre.be-code-dark {
background-color: #4d4342;
color: #FFFFFF;
.pln {
color: #ffffff;
}
.str {
color: #b5db99;
}
.kwd {
color: #e9c865;
}
.com {
color: #c3b8b7;
}
.typ {
color: #FF9787;
}
.lit {
color: #b5db99;
}
.pun,
.opn,
.clo {
color: #ffffff;
}
.tag {
color: #e9c865;
}
.atn {
color: #FF9787;
}
.atv {
color: #b5db99;
}
.dec,
.var {
color: #b5db99;
}
.fun {
color: #e9c865;
}
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
/*------------------------------------------------------------------
[Color swatch]
*/
.color-swatch{
margin-top: 20px;
display: inline-block;
min-width: 230px;
overflow: hidden;
border-radius: 3px;
.colors{
margin: 0;
> div{
min-height: 90px;
}
}
.desc{
margin: 0;
> div{
text-align: center;
background-color: $light-color;
line-height: 50px;
font-weight: 600;
color: lighten($text-color, 7.5%);
}
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Colors]
*/
.clr-primary{ background-color: theme-color("primary"); }
.clr-success{ background-color: theme-color("success"); }
.clr-warning{ background-color: theme-color("warning"); }
.clr-danger{ background-color: theme-color("danger"); }
.clr-grey{ background-color: theme-color("grey"); }
\ No newline at end of file
/*------------------------------------------------------------------
[Dividers inside cards]
*/
.card-divider{
margin: $divider-margin 0;
border-top: $divider-border;
&-lg{
margin: $divider-lg-margin 0;
}
&-xl{
margin: $divider-xl-margin 0;
}
}
\ No newline at end of file
/*------------------------------------------------------------------
[Grid]
*/
.bs-grid-block{
border: 2px dashed darken($body-background, 16.8%);
font-weight: 300;
font-size: 1.538rem;
color: lighten(theme-color("dark"), 26%);
display: table;
table-layout: fixed;
width: 100%;
margin-bottom: 40px;
.content{
display: table-cell;
height: 177px;
text-align: center;
vertical-align: middle;
.size{
display: block;
}
.device{
line-height: 0;
&:after{
font-size: 1.154rem;
@include large-desktop {
content: 'Large Desktop';
color: theme-color("primary");
}
@include desktop {
content: 'Desktop';
color: theme-color("primary");
}
@include laptop {
content: 'Laptop';
color: theme-color("primary");;
}
@include tablet {
content: 'Tablet';
color: theme-color("success");
}
@include phone {
content: 'Phone';
color: theme-color("success");
}
}
}
}
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment