added messages list, new client form, logic for client Apps plus others
This commit is contained in:
Kwesi Banson Jnr
1682
public/libs/tabulator-master/src/scss/tabulator.scss
Normal file
1682
public/libs/tabulator-master/src/scss/tabulator.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,302 @@
|
||||
@use "variables3.scss" as *;
|
||||
|
||||
// Style conversion file, bootstrap to tabulator
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: $table-bg !default; //background color of tabulator
|
||||
$borderColor:$table-border-color !default; //border to tabulator
|
||||
$textSize:$font-size-base !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#fff !default; //border to tabulator
|
||||
$headerSeparatorColor:$table-border-color !default; //header bottom separator color
|
||||
|
||||
$cellPadding:$table-cell-padding !default; //padding round header
|
||||
$cellPaddingCondensed:$table-condensed-cell-padding !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:$backgroundColor !default; //table row background color
|
||||
$rowAltBackgroundColor:$table-bg-accent !default; //table row background color
|
||||
$rowBorderColor:$table-border-color !default; //table border color
|
||||
$rowHoverBackground:$table-bg-hover !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBorderColor:$table-border-color !default; //footer border color
|
||||
$footerSeparatorColor:$table-border-color !default; //footer bottom separator color
|
||||
$footerActiveColor:#d00 !default; //footer bottom active text color
|
||||
|
||||
@use "../../tabulator.scss";
|
||||
|
||||
.tabulator{
|
||||
background-color: $backgroundColor;
|
||||
margin-bottom: $line-height-computed;
|
||||
border:none;
|
||||
|
||||
.tabulator-header{
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
color:inherit;
|
||||
|
||||
.tabulator-col{
|
||||
background-color: $headerBackgroundColor;
|
||||
border-right:none;
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:$cellPadding;
|
||||
}
|
||||
|
||||
&.tabulator-col-group{
|
||||
.tabulator-col-group-cols{
|
||||
border-top:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
width:100%;
|
||||
border-bottom:1px solid $headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-table{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
border-top:2px solid $footerSeparatorColor;
|
||||
background: inherit;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-paginator{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
//Bootstrap theming classes
|
||||
|
||||
&.table-striped{
|
||||
.tabulator-row{
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-bordered{
|
||||
border:1px solid $borderColor;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-condensed{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding:$cellPaddingCondensed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($cellPaddingCondensed * 2);
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$cellPaddingCondensed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//row colors
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.active{
|
||||
background:$table-bg-active!important;
|
||||
}
|
||||
&.success{
|
||||
background:$state-success-bg!important;
|
||||
}
|
||||
&.info{
|
||||
background: $state-info-bg!important;
|
||||
}
|
||||
&.warning{
|
||||
background:$state-warning-bg!important;
|
||||
}
|
||||
&.danger{
|
||||
background:$state-danger-bg!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($cellPadding * 2);
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground !important;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$cellPadding;
|
||||
border-right:none;
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-right:1px solid $borderColor;
|
||||
border-bottom:none;
|
||||
background:$headerBackgroundColor;
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
border:1px solid #333;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #333;
|
||||
|
||||
&:after {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
.tabulator-edit-select-list-item{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-notice{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-group{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator.tabulator-rtl{
|
||||
.tabulator-header {
|
||||
.tabulator-col{
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
border-collapse: collapse;
|
||||
|
||||
.tabulator-print-table-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
border:1px solid #333;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #333;
|
||||
|
||||
&:after {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,589 @@
|
||||
@use "variables4.scss" as *;
|
||||
|
||||
// Style conversion file, bootstrap to tabulator
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: $table-bg !default; //background color of tabulator
|
||||
$borderColor:$table-border-color !default; //border to tabulator
|
||||
$textSize:16px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#fff !default; //border to tabulator
|
||||
$headerSeparatorColor:$table-border-color !default; //header bottom separator color
|
||||
|
||||
$cellPadding:12px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:$backgroundColor !default; //table row background color
|
||||
$rowAltBackgroundColor: $table-accent-bg !default; //table row background color
|
||||
$rowBorderColor:$table-border-color !default; //table border color
|
||||
$rowHoverBackground:$table-hover-bg !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBorderColor:$pagination-border-color !default; //footer border color
|
||||
$footerSeparatorColor:$table-border-color !default; //footer bottom separator color
|
||||
$footerActiveColor:$pagination-active-color !default; //footer bottom active text color
|
||||
|
||||
$table-cell-padding-sm: 5px;
|
||||
|
||||
@use "../../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
background-color: $backgroundColor;
|
||||
border:none;
|
||||
|
||||
.tabulator-header{
|
||||
border-top:1px solid $headerSeparatorColor;
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
color:inherit;
|
||||
|
||||
.tabulator-col{
|
||||
border-right:none;
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:$cellPadding;
|
||||
|
||||
.tabulator-col-sorter{
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-col-group{
|
||||
.tabulator-col-group-cols{
|
||||
border-top:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-header-filter{
|
||||
input{
|
||||
padding: .375rem .75rem;
|
||||
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
|
||||
&:focus {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border:1px solid $editBoxColor;
|
||||
outline: 0;
|
||||
// box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
width:100%;
|
||||
border-bottom:1px solid $headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-table{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
color:inherit;
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
background-color: tabulator.$spreadsheetActiveTabColor;
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
background-color:$pagination-active-bg;
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-paginator{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-pages{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.tabulator-page{
|
||||
margin:0;
|
||||
margin-top:5px;
|
||||
padding:8px 12px;
|
||||
|
||||
&[data-page="first"]{
|
||||
border-top-left-radius:4px;
|
||||
border-bottom-left-radius:4px;
|
||||
}
|
||||
|
||||
&[data-page="last"]{
|
||||
border:1px solid $footerBorderColor;
|
||||
border-top-right-radius:4px;
|
||||
border-bottom-right-radius:4px;
|
||||
}
|
||||
|
||||
&.active{
|
||||
border-color:$pagination-active-border-color;
|
||||
background-color:$pagination-active-bg;
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
border-color:$pagination-disabled-border-color;
|
||||
background:$pagination-disabled-bg;
|
||||
color:$pagination-disabled-color;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
border-color:$pagination-hover-border-color;
|
||||
background:$pagination-hover-bg;
|
||||
color:$pagination-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Bootstrap theming classes
|
||||
|
||||
&.thead-dark{
|
||||
.tabulator-header{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
.tabulator-col{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-dark{
|
||||
background-color: $table-dark-bg;
|
||||
|
||||
&:not(.thead-light) .tabulator-header{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
.tabulator-col{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
color: $table-dark-color;
|
||||
}
|
||||
|
||||
|
||||
.tabulator-row{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color: $table-dark-border-color;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color: $table-dark-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
border-color: $table-dark-border-color !important;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
border-color: $table-dark-border-color !important;
|
||||
background:$table-dark-bg !important;
|
||||
|
||||
.tabulator-row{
|
||||
border-color: $table-dark-border-color !important;
|
||||
background-color: $table-dark-bg !important;
|
||||
color: $table-dark-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-striped{
|
||||
&:not(.table-dark){
|
||||
.tabulator-row{
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-dark{
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
.tabulator-cell{
|
||||
background-color: $table-dark-accent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-bordered{
|
||||
border:1px solid $borderColor;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.table-borderless{
|
||||
.tabulator-header{
|
||||
border:none;
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-sm{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding:$table-cell-padding-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($table-cell-padding-sm * 2);
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$table-cell-padding-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//row colors
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.table-primary{
|
||||
background:theme-color-level("primary", -9) !important;
|
||||
}
|
||||
&.table-secondary{
|
||||
background:theme-color-level("secondary", -9) !important;
|
||||
}
|
||||
&.table-success{
|
||||
background:theme-color-level("success", -9) !important;
|
||||
}
|
||||
&.table-info{
|
||||
background:theme-color-level("info", -9) !important;
|
||||
}
|
||||
&.table-warning{
|
||||
background:theme-color-level("warning", -9) !important;
|
||||
}
|
||||
&.table-danger{
|
||||
background:theme-color-level("danger", -9) !important;
|
||||
}
|
||||
&.table-light{
|
||||
background:theme-color-level("light", -9) !important;
|
||||
}
|
||||
&.table-dark{
|
||||
background:theme-color-level("dark", -9) !important;
|
||||
}
|
||||
&.table-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
|
||||
&.bg-primary{
|
||||
background:theme-color-level("primary", 0) !important;
|
||||
}
|
||||
&.bg-secondary{
|
||||
background:theme-color-level("secondary", 0) !important;
|
||||
}
|
||||
&.bg-success{
|
||||
background:theme-color-level("success", 0) !important;
|
||||
}
|
||||
&.bg-info{
|
||||
background:theme-color-level("info", 0) !important;
|
||||
}
|
||||
&.bg-warning{
|
||||
background:theme-color-level("warning", 0) !important;
|
||||
}
|
||||
&.bg-danger{
|
||||
background:theme-color-level("danger", 0) !important;
|
||||
}
|
||||
&.bg-light{
|
||||
background:theme-color-level("light", 0) !important;
|
||||
}
|
||||
&.bg-dark{
|
||||
background:theme-color-level("dark", 0) !important;
|
||||
}
|
||||
&.bg-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
&.table-primary{
|
||||
background:theme-color-level("primary", -9) !important;
|
||||
}
|
||||
&.table-secondary{
|
||||
background:theme-color-level("secondary", -9) !important;
|
||||
}
|
||||
&.table-success{
|
||||
background:theme-color-level("success", -9) !important;
|
||||
}
|
||||
&.table-info{
|
||||
background:theme-color-level("info", -9) !important;
|
||||
}
|
||||
&.table-warning{
|
||||
background:theme-color-level("warning", -9) !important;
|
||||
}
|
||||
&.table-danger{
|
||||
background:theme-color-level("danger", -9) !important;
|
||||
}
|
||||
&.table-light{
|
||||
background:theme-color-level("light", -9) !important;
|
||||
}
|
||||
&.table-dark{
|
||||
background:theme-color-level("dark", -9) !important;
|
||||
}
|
||||
&.table-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
|
||||
&.bg-primary{
|
||||
background:theme-color-level("primary", 0) !important;
|
||||
}
|
||||
&.bg-secondary{
|
||||
background:theme-color-level("secondary", 0) !important;
|
||||
}
|
||||
&.bg-success{
|
||||
background:theme-color-level("success", 0) !important;
|
||||
}
|
||||
&.bg-info{
|
||||
background:theme-color-level("info", 0) !important;
|
||||
}
|
||||
&.bg-warning{
|
||||
background:theme-color-level("warning", 0) !important;
|
||||
}
|
||||
&.bg-danger{
|
||||
background:theme-color-level("danger", 0) !important;
|
||||
}
|
||||
&.bg-light{
|
||||
background:theme-color-level("light", 0) !important;
|
||||
}
|
||||
&.bg-dark{
|
||||
background:theme-color-level("dark", 0) !important;
|
||||
}
|
||||
&.bg-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($cellPadding * 2);
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$cellPadding;
|
||||
border-right:none;
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-right:1px solid $borderColor;
|
||||
border-bottom:none;
|
||||
background:$headerBackgroundColor;
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
border:1px solid #ccc;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
background:$headerBackgroundColor;
|
||||
|
||||
.tabulator-edit-select-list-item{
|
||||
&.active{
|
||||
color:$headerBackgroundColor;
|
||||
|
||||
&.focused{
|
||||
outline:1px solid rgba($headerBackgroundColor, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:$headerBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-notice{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-group{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator.tabulator-rtl{
|
||||
.tabulator-header {
|
||||
.tabulator-col{
|
||||
text-align: initial;
|
||||
border-left:initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
color:inherit;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,731 @@
|
||||
@use "variables5.scss" as *;
|
||||
@use "sass:map";
|
||||
|
||||
// Style conversion file, bootstrap to tabulator
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: $table-bg !default; //background color of tabulator
|
||||
$borderColor:$table-border-color !default; //border to tabulator
|
||||
$textSize:16px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:$table-bg !default; //border to tabulator
|
||||
$headerForegroundColor:inherit !default; //border to tabulator
|
||||
$headerSeparatorColor:$table-border-color !default; //header bottom separator color
|
||||
|
||||
$cellPadding:12px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:$backgroundColor !default; //table row background color
|
||||
$rowAltBackgroundColor: $table-striped-bg !default; //table row background color
|
||||
$rowBorderColor:$table-border-color !default; //table border color
|
||||
$rowHoverBackground:$table-hover-bg !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBorderColor:$pagination-border-color !default; //footer border color
|
||||
$footerSeparatorColor:$table-border-color !default; //footer bottom separator color
|
||||
$footerActiveColor:$pagination-active-color !default; //footer bottom active text color
|
||||
|
||||
$table-cell-padding-sm: 5px;
|
||||
|
||||
@use "../../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
background-color: $backgroundColor;
|
||||
border:none;
|
||||
|
||||
.tabulator-header{
|
||||
border-top:1px solid $headerSeparatorColor;
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
color:$headerForegroundColor;
|
||||
|
||||
.tabulator-col{
|
||||
border-right:none;
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:$cellPadding;
|
||||
|
||||
.tabulator-col-sorter{
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-col-group{
|
||||
.tabulator-col-group-cols{
|
||||
border-top:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-header-filter{
|
||||
input{
|
||||
padding: .375rem .75rem;
|
||||
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
|
||||
&:focus {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border:1px solid $editBoxColor;
|
||||
outline: 0;
|
||||
// box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
width:100%;
|
||||
border-bottom:1px solid $headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-table{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
color:inherit;
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
background-color: tabulator.$spreadsheetActiveTabColor;
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
background-color:$pagination-active-bg;
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-paginator{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-pages{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.tabulator-page{
|
||||
margin:0;
|
||||
margin-top:5px;
|
||||
padding:8px 12px;
|
||||
|
||||
&[data-page="first"]{
|
||||
border-top-left-radius:4px;
|
||||
border-bottom-left-radius:4px;
|
||||
}
|
||||
|
||||
&[data-page="last"]{
|
||||
border:1px solid $footerBorderColor;
|
||||
border-top-right-radius:4px;
|
||||
border-bottom-right-radius:4px;
|
||||
}
|
||||
|
||||
&.active{
|
||||
border-color:$pagination-active-border-color;
|
||||
background-color:$pagination-active-bg;
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
border-color:$pagination-disabled-border-color;
|
||||
background:$pagination-disabled-bg;
|
||||
color:$pagination-disabled-color;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
border-color:$pagination-hover-border-color;
|
||||
background:$pagination-hover-bg;
|
||||
color:$pagination-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Bootstrap theming classes
|
||||
|
||||
&.table{
|
||||
background-color: $backgroundColor;
|
||||
|
||||
&:not(.thead-light) .tabulator-header{
|
||||
border-color: $borderColor;
|
||||
background-color: $backgroundColor;
|
||||
color: $table-color;
|
||||
|
||||
.tabulator-col{
|
||||
border-color: $borderColor;
|
||||
background-color: $backgroundColor;
|
||||
color: $table-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
color: $table-color;
|
||||
}
|
||||
|
||||
|
||||
.tabulator-row{
|
||||
border-color: $borderColor;
|
||||
background-color: $backgroundColor;
|
||||
color: $table-color;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color: $borderColor;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
border-color: $borderColor !important;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
border-color: $borderColor !important;
|
||||
background:$backgroundColor !important;
|
||||
|
||||
.tabulator-row{
|
||||
border-color: $borderColor !important;
|
||||
background-color: $backgroundColor !important;
|
||||
color: $table-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-striped{
|
||||
&:not(.table){
|
||||
.tabulator-row{
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table{
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
.tabulator-cell{
|
||||
background-color: $table-accent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-bordered{
|
||||
border:1px solid $borderColor;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.table-borderless{
|
||||
.tabulator-header{
|
||||
border:none;
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-sm{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding:$table-cell-padding-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($table-cell-padding-sm * 2);
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$table-cell-padding-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.thead-dark{
|
||||
.tabulator-header{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
.tabulator-col{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-striped{
|
||||
&:not(.table-dark),
|
||||
html:not([data-bs-theme="dark"]) &{
|
||||
.tabulator-row{
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-dark,
|
||||
html[data-bs-theme="dark"] & {
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
background-color: $table-dark-striped-bg !important;
|
||||
.tabulator-cell{
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-dark,
|
||||
html[data-bs-theme="dark"] &{
|
||||
background-color: $table-dark-bg;
|
||||
|
||||
&:not(.thead-light) .tabulator-header{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
.tabulator-col{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
color: $table-dark-color;
|
||||
}
|
||||
|
||||
.tabulator-cell {
|
||||
color: $table-dark-color;
|
||||
background-color: $table-dark-bg;
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
border-color: $table-dark-border-color;
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color: $table-dark-border-color;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color: $table-dark-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$table-dark-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
border-color: $table-dark-border-color !important;
|
||||
color: $table-dark-bg !important;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
border-color: $table-dark-border-color !important;
|
||||
background:$table-dark-bg !important;
|
||||
|
||||
.tabulator-row{
|
||||
border-color: $table-dark-border-color !important;
|
||||
background-color: $table-dark-bg !important;
|
||||
color: $table-dark-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
color: $table-dark-color !important;
|
||||
background-color: $table-active-bg !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//row colors
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.table-primary{
|
||||
background:map.get($table-variants, "primary") !important;
|
||||
}
|
||||
&.table-secondary{
|
||||
background:map.get($table-variants, "secondary") !important;
|
||||
}
|
||||
&.table-success{
|
||||
background:map.get($table-variants, "success") !important;
|
||||
}
|
||||
&.table-info{
|
||||
background:map.get($table-variants, "info") !important;
|
||||
}
|
||||
&.table-warning{
|
||||
background:map.get($table-variants, "warning") !important;
|
||||
}
|
||||
&.table-danger{
|
||||
background:map.get($table-variants, "danger") !important;
|
||||
}
|
||||
&.table-light{
|
||||
background:map.get($table-variants, "light") !important;
|
||||
}
|
||||
&.table{
|
||||
background:map.get($table-variants, "dark") !important;
|
||||
}
|
||||
&.table-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
|
||||
&.bg-primary{
|
||||
background:map.get($table-variants, "primary") !important;
|
||||
}
|
||||
&.bg-secondary{
|
||||
background:map.get($table-variants, "secondary") !important;
|
||||
}
|
||||
&.bg-success{
|
||||
background:map.get($table-variants, "success") !important;
|
||||
}
|
||||
&.bg-info{
|
||||
background:map.get($table-variants, "info") !important;
|
||||
}
|
||||
&.bg-warning{
|
||||
background:map.get($table-variants, "warning") !important;
|
||||
}
|
||||
&.bg-danger{
|
||||
background:map.get($table-variants, "danger") !important;
|
||||
}
|
||||
&.bg-light{
|
||||
background:map.get($table-variants, "light") !important;
|
||||
}
|
||||
&.bg-dark{
|
||||
background:map.get($table-variants, "dark") !important;
|
||||
}
|
||||
&.bg-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
&.table-primary{
|
||||
background:map.get($table-variants, "primary") !important;
|
||||
}
|
||||
&.table-secondary{
|
||||
background:map.get($table-variants, "secondary") !important;
|
||||
}
|
||||
&.table-success{
|
||||
background:map.get($table-variants, "success") !important;
|
||||
}
|
||||
&.table-info{
|
||||
background:map.get($table-variants, "info") !important;
|
||||
}
|
||||
&.table-warning{
|
||||
background:map.get($table-variants, "warning") !important;
|
||||
}
|
||||
&.table-danger{
|
||||
background:map.get($table-variants, "danger") !important;
|
||||
}
|
||||
&.table-light{
|
||||
background:map.get($table-variants, "light") !important;
|
||||
}
|
||||
&.table{
|
||||
background:map.get($table-variants, "dark") !important;
|
||||
}
|
||||
&.table-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
|
||||
&.bg-primary{
|
||||
background:map.get($table-variants, "primary") !important;
|
||||
}
|
||||
&.bg-secondary{
|
||||
background:map.get($table-variants, "secondary") !important;
|
||||
}
|
||||
&.bg-success{
|
||||
background:map.get($table-variants, "success") !important;
|
||||
}
|
||||
&.bg-info{
|
||||
background:map.get($table-variants, "info") !important;
|
||||
}
|
||||
&.bg-warning{
|
||||
background:map.get($table-variants, "warning") !important;
|
||||
}
|
||||
&.bg-danger{
|
||||
background:map.get($table-variants, "danger") !important;
|
||||
}
|
||||
&.bg-light{
|
||||
background:map.get($table-variants, "light") !important;
|
||||
}
|
||||
&.bg-dark{
|
||||
background:map.get($table-variants, "dark") !important;
|
||||
}
|
||||
&.bg-active{
|
||||
background:$table-active-bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($cellPadding * 2);
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$cellPadding;
|
||||
border-right:none;
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-right:1px solid $borderColor;
|
||||
border-bottom:none;
|
||||
background:$headerBackgroundColor;
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
border:1px solid #ccc;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
background:$headerBackgroundColor;
|
||||
|
||||
.tabulator-edit-select-list-item{
|
||||
&.active{
|
||||
color:$headerBackgroundColor;
|
||||
|
||||
&.focused{
|
||||
outline:1px solid rgba($headerBackgroundColor, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:$headerBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-notice{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-group{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator.tabulator-rtl{
|
||||
.tabulator-header {
|
||||
.tabulator-col{
|
||||
text-align: initial;
|
||||
border-left:initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
color:inherit;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-popup-container{
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.tabulator-edit-list{
|
||||
.tabulator-edit-list-item{
|
||||
&.active{
|
||||
color:#fff;
|
||||
|
||||
&.focused{
|
||||
outline:1px solid rgba(#fff, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,872 @@
|
||||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
$gray-base: #000 !default;
|
||||
$gray-darker: color.adjust($gray-base, $lightness: 13.5%) !default; // #222
|
||||
$gray-dark: color.adjust($gray-base, $lightness: 20%) !default; // #333
|
||||
$gray: color.adjust($gray-base, $lightness: 33.5%) !default; // #555
|
||||
$gray-light: color.adjust($gray-base, $lightness: 46.7%) !default; // #777
|
||||
$gray-lighter: color.adjust($gray-base, $lightness: 93.5%) !default; // #eee
|
||||
|
||||
$brand-primary: color.adjust(#428bca, $lightness: -6.5%) !default; // #337ab7
|
||||
$brand-success: #5cb85c !default;
|
||||
$brand-info: #5bc0de !default;
|
||||
$brand-warning: #f0ad4e !default;
|
||||
$brand-danger: #d9534f !default;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
$body-bg: #fff !default;
|
||||
//** Global text color on `<body>`.
|
||||
$text-color: $gray-dark !default;
|
||||
|
||||
//** Global textual link color.
|
||||
$link-color: $brand-primary !default;
|
||||
//** Link hover color set via `darken()` function.
|
||||
$link-hover-color: color.adjust($link-color, $lightness: -15%) !default;
|
||||
//** Link hover decoration.
|
||||
$link-hover-decoration: underline !default;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
$font-size-large: math.ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-small: math.ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
$font-size-h1: math.floor(($font-size-base * 2.6)) !default; // ~36px
|
||||
$font-size-h2: math.floor(($font-size-base * 2.15)) !default; // ~30px
|
||||
$font-size-h3: math.ceil(($font-size-base * 1.7)) !default; // ~24px
|
||||
$font-size-h4: math.ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-h5: $font-size-base !default;
|
||||
$font-size-h6: math.ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$line-height-base: 1.428571429 !default; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: math.floor(($font-size-base * $line-height-base)) !default; // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
|
||||
//== Iconography
|
||||
//
|
||||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
//** Load fonts from this directory.
|
||||
$icon-font-path: "../fonts/" !default;
|
||||
//** File name for all font files.
|
||||
$icon-font-name: "glyphicons-halflings-regular" !default;
|
||||
//** Element ID within SVG icon file.
|
||||
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
|
||||
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1@mixin 428 line-height (~20px to start).
|
||||
|
||||
$padding-base-vertical: 6px !default;
|
||||
$padding-base-horizontal: 12px !default;
|
||||
|
||||
$padding-large-vertical: 10px !default;
|
||||
$padding-large-horizontal: 16px !default;
|
||||
|
||||
$padding-small-vertical: 5px !default;
|
||||
$padding-small-horizontal: 10px !default;
|
||||
|
||||
$padding-xs-vertical: 1px !default;
|
||||
$padding-xs-horizontal: 5px !default;
|
||||
|
||||
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
|
||||
$line-height-small: 1.5 !default;
|
||||
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
$component-active-color: #fff !default;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
$caret-width-base: 4px !default;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
$caret-width-large: 5px !default;
|
||||
|
||||
|
||||
//== Tables
|
||||
//
|
||||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
//** Padding for `<th>`s and `<td>`s.
|
||||
$table-cell-padding: 8px !default;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
$table-condensed-cell-padding: 5px !default;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
// $table-bg: transparent !default;
|
||||
$table-bg: #fff !default;
|
||||
//** Background color used for `.table-striped`.
|
||||
$table-bg-accent: #f9f9f9 !default;
|
||||
//** Background color used for `.table-hover`.
|
||||
$table-bg-hover: #f5f5f5 !default;
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
$table-border-color: #ddd !default;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-font-weight: normal !default;
|
||||
|
||||
$btn-default-color: #333 !default;
|
||||
$btn-default-bg: #fff !default;
|
||||
$btn-default-border: #ccc !default;
|
||||
|
||||
$btn-primary-color: #fff !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-border: color.adjust($btn-primary-bg, $lightness: -5%) !default;
|
||||
|
||||
$btn-success-color: #fff !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-border: color.adjust($btn-success-bg, $lightness: -5%) !default;
|
||||
|
||||
$btn-info-color: #fff !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-border: color.adjust($btn-info-bg, $lightness: -5%) !default;
|
||||
|
||||
$btn-warning-color: #fff !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-border: color.adjust($btn-warning-bg, $lightness: -5%) !default;
|
||||
|
||||
$btn-danger-color: #fff !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-border: color.adjust($btn-danger-bg, $lightness: -5%) !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius-base: $border-radius-base !default;
|
||||
$btn-border-radius-large: $border-radius-large !default;
|
||||
$btn-border-radius-small: $border-radius-small !default;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
$input-bg: #fff !default;
|
||||
//** `<input disabled>` background color
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
$input-color: $gray !default;
|
||||
//** `<input>` border color
|
||||
$input-border: #ccc !default;
|
||||
|
||||
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
|
||||
//** Default `.form-control` border radius
|
||||
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
$input-border-radius: $border-radius-base !default;
|
||||
//** Large `.form-control` border radius
|
||||
$input-border-radius-large: $border-radius-large !default;
|
||||
//** Small `.form-control` border radius
|
||||
$input-border-radius-small: $border-radius-small !default;
|
||||
|
||||
//** Border color for inputs on focus
|
||||
$input-border-focus: #66afe9 !default;
|
||||
|
||||
//** Placeholder text color
|
||||
$input-color-placeholder: #999 !default;
|
||||
|
||||
//** Default `.form-control` height
|
||||
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
|
||||
//** Large `.form-control` height
|
||||
$input-height-large: (math.ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
||||
//** Small `.form-control` height
|
||||
$input-height-small: (math.floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
//** `.form-group` margin
|
||||
$form-group-margin-bottom: 15px !default;
|
||||
|
||||
$legend-color: $gray-dark !default;
|
||||
$legend-border-color: #e5e5e5 !default;
|
||||
|
||||
//** Background color for textual input addons
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
//** Border color for textual input addons
|
||||
$input-group-addon-border-color: $input-border !default;
|
||||
|
||||
//** Disabled cursor for form controls and buttons.
|
||||
$cursor-disabled: not-allowed !default;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
$dropdown-bg: #fff !default;
|
||||
//** Dropdown menu `border-color`.
|
||||
$dropdown-border: rgba(0,0,0,.15) !default;
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
$dropdown-fallback-border: #ccc !default;
|
||||
//** Divider color for between dropdown items.
|
||||
$dropdown-divider-bg: #e5e5e5 !default;
|
||||
|
||||
//** Dropdown link text color.
|
||||
$dropdown-link-color: $gray-dark !default;
|
||||
//** Hover color for dropdown links.
|
||||
$dropdown-link-hover-color: color.adjust($gray-dark, $lightness: -5%) !default;
|
||||
//** Hover background for dropdown links.
|
||||
$dropdown-link-hover-bg: #f5f5f5 !default;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
//** Active dropdown menu item background color.
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
$dropdown-link-disabled-color: $gray-light !default;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
$dropdown-header-color: $gray-light !default;
|
||||
|
||||
//** Deprecated `$dropdown-caret-color` as of v3.1.0
|
||||
$dropdown-caret-color: #000 !default;
|
||||
|
||||
|
||||
//-- Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
//
|
||||
// Note: These variables are not generated into the Customizer.
|
||||
|
||||
$zindex-navbar: 1000 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
$zindex-navbar-fixed: 1030 !default;
|
||||
$zindex-modal-background: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
|
||||
|
||||
//== Media queries breakpoints
|
||||
//
|
||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra small screen / phone
|
||||
//** Deprecated `$screen-xs` as of v3.0.1
|
||||
$screen-xs: 480px !default;
|
||||
//** Deprecated `$screen-xs-min` as of v3.2.0
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
//** Deprecated `$screen-phone` as of v3.0.1
|
||||
$screen-phone: $screen-xs-min !default;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `$screen-sm` as of v3.0.1
|
||||
$screen-sm: 768px !default;
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
//** Deprecated `$screen-tablet` as of v3.0.1
|
||||
$screen-tablet: $screen-sm-min !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `$screen-md` as of v3.0.1
|
||||
$screen-md: 992px !default;
|
||||
$screen-md-min: $screen-md !default;
|
||||
//** Deprecated `$screen-desktop` as of v3.0.1
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `$screen-lg` as of v3.0.1
|
||||
$screen-lg: 1200px !default;
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
$grid-gutter-width: 30px !default;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
$grid-float-breakpoint: $screen-sm-min !default;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
$container-tablet: (720px + $grid-gutter-width) !default;
|
||||
//** For `$screen-sm-min` and up.
|
||||
$container-sm: $container-tablet !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
$container-desktop: (940px + $grid-gutter-width) !default;
|
||||
//** For `$screen-md-min` and up.
|
||||
$container-md: $container-desktop !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$container-large-desktop: (1140px + $grid-gutter-width) !default;
|
||||
//** For `$screen-lg-min` and up.
|
||||
$container-lg: $container-large-desktop !default;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-height: 50px !default;
|
||||
$navbar-margin-bottom: $line-height-computed !default;
|
||||
$navbar-border-radius: $border-radius-base !default;
|
||||
$navbar-padding-horizontal: math.floor(calc($grid-gutter-width / 2)) !default;
|
||||
$navbar-padding-vertical: calc(($navbar-height - $line-height-computed) / 2) !default;
|
||||
$navbar-collapse-max-height: 340px !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: #f8f8f8 !default;
|
||||
$navbar-default-border: color.adjust($navbar-default-bg, $lightness: -6.5%) !default;
|
||||
|
||||
// Navbar links
|
||||
$navbar-default-link-color: #777 !default;
|
||||
$navbar-default-link-hover-color: #333 !default;
|
||||
$navbar-default-link-hover-bg: transparent !default;
|
||||
$navbar-default-link-active-color: #555 !default;
|
||||
$navbar-default-link-active-bg: color.adjust($navbar-default-bg, $lightness: -6.5%) !default;
|
||||
$navbar-default-link-disabled-color: #ccc !default;
|
||||
$navbar-default-link-disabled-bg: transparent !default;
|
||||
|
||||
// Navbar brand label
|
||||
$navbar-default-brand-color: $navbar-default-link-color !default;
|
||||
$navbar-default-brand-hover-color: color.adjust($navbar-default-brand-color, $lightness: -10%) !default;
|
||||
$navbar-default-brand-hover-bg: transparent !default;
|
||||
|
||||
// Navbar toggle
|
||||
$navbar-default-toggle-hover-bg: #ddd !default;
|
||||
$navbar-default-toggle-icon-bar-bg: #888 !default;
|
||||
$navbar-default-toggle-border-color: #ddd !default;
|
||||
|
||||
|
||||
//=== Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
$navbar-inverse-color: color.adjust($gray-light, $lightness: 15%) !default;
|
||||
$navbar-inverse-bg: #222 !default;
|
||||
$navbar-inverse-border: color.adjust($navbar-inverse-bg, $lightness: -10%) !default;
|
||||
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: color.adjust($gray-light, $lightness: 15%) !default;
|
||||
$navbar-inverse-link-hover-color: #fff !default;
|
||||
$navbar-inverse-link-hover-bg: transparent !default;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
|
||||
$navbar-inverse-link-active-bg: color.adjust($navbar-inverse-bg, $lightness: -10%) !default;
|
||||
$navbar-inverse-link-disabled-color: #444 !default;
|
||||
$navbar-inverse-link-disabled-bg: transparent !default;
|
||||
|
||||
// Inverted navbar brand label
|
||||
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
||||
$navbar-inverse-brand-hover-color: #fff !default;
|
||||
$navbar-inverse-brand-hover-bg: transparent !default;
|
||||
|
||||
// Inverted navbar toggle
|
||||
$navbar-inverse-toggle-hover-bg: #333 !default;
|
||||
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-inverse-toggle-border-color: #333 !default;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
$nav-link-padding: 10px 15px !default;
|
||||
$nav-link-hover-bg: $gray-lighter !default;
|
||||
|
||||
$nav-disabled-link-color: $gray-light !default;
|
||||
$nav-disabled-link-hover-color: $gray-light !default;
|
||||
|
||||
//== Tabs
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter !default;
|
||||
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-color: $gray !default;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd !default;
|
||||
|
||||
$nav-tabs-justified-link-border-color: #ddd !default;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg !default;
|
||||
|
||||
//== Pills
|
||||
$nav-pills-border-radius: $border-radius-base !default;
|
||||
$nav-pills-active-link-hover-bg: $component-active-bg !default;
|
||||
$nav-pills-active-link-hover-color: $component-active-color !default;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: #fff !default;
|
||||
$pagination-border: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-lighter !default;
|
||||
$pagination-hover-border: #ddd !default;
|
||||
|
||||
$pagination-active-color: #fff !default;
|
||||
$pagination-active-bg: $brand-primary !default;
|
||||
$pagination-active-border: $brand-primary !default;
|
||||
|
||||
$pagination-disabled-color: $gray-light !default;
|
||||
$pagination-disabled-bg: #fff !default;
|
||||
$pagination-disabled-border: #ddd !default;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
$pager-bg: $pagination-bg !default;
|
||||
$pager-border: $pagination-border !default;
|
||||
$pager-border-radius: 15px !default;
|
||||
|
||||
$pager-hover-bg: $pagination-hover-bg !default;
|
||||
|
||||
$pager-active-bg: $pagination-active-bg !default;
|
||||
$pager-active-color: $pagination-active-color !default;
|
||||
|
||||
$pager-disabled-color: $pagination-disabled-color !default;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
$jumbotron-padding: 30px !default;
|
||||
$jumbotron-color: inherit !default;
|
||||
$jumbotron-bg: $gray-lighter !default;
|
||||
$jumbotron-heading-color: inherit !default;
|
||||
$jumbotron-font-size: math.ceil(($font-size-base * 1.5)) !default;
|
||||
$jumbotron-heading-font-size: math.ceil(($font-size-base * 4.5)) !default;
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #3c763d !default;
|
||||
$state-success-bg: #dff0d8 !default;
|
||||
$state-success-border: color.adjust(color.adjust($state-success-bg, $hue: -.1, $space: hsl), $lightness: -5%) !default;
|
||||
|
||||
$state-info-text: #31708f !default;
|
||||
$state-info-bg: #d9edf7 !default;
|
||||
$state-info-border: color.adjust(color.adjust($state-info-bg, $hue: -.1, $space: hsl), $lightness: -7%) !default;
|
||||
|
||||
$state-warning-text: #8a6d3b !default;
|
||||
$state-warning-bg: #fcf8e3 !default;
|
||||
$state-warning-border: color.adjust(color.adjust($state-warning-bg, $hue: -.1, $space: hsl), $lightness: -5%) !default;
|
||||
|
||||
$state-danger-text: #a94442 !default;
|
||||
$state-danger-bg: #f2dede !default;
|
||||
$state-danger-border: color.adjust(color.adjust($state-danger-bg, $hue: -.1, $space: hsl), $lightness: -5%) !default;
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
$tooltip-max-width: 200px !default;
|
||||
//** Tooltip text color
|
||||
$tooltip-color: #fff !default;
|
||||
//** Tooltip background color
|
||||
$tooltip-bg: #000 !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
|
||||
//** Tooltip arrow width
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
//** Tooltip arrow color
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
$popover-bg: #fff !default;
|
||||
//** Popover maximum width
|
||||
$popover-max-width: 276px !default;
|
||||
//** Popover border color
|
||||
$popover-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Popover fallback border color
|
||||
$popover-fallback-border-color: #ccc !default;
|
||||
|
||||
//** Popover title background color
|
||||
$popover-title-bg: color.adjust($popover-bg, $lightness: -3%) !default;
|
||||
|
||||
//** Popover arrow width
|
||||
$popover-arrow-width: 10px !default;
|
||||
//** Popover arrow color
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
//** Popover outer arrow width
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
|
||||
//** Popover outer arrow color
|
||||
$popover-arrow-outer-color: fadein($popover-border-color, 5%) !default;
|
||||
//** Popover outer arrow fallback color
|
||||
$popover-arrow-outer-fallback-color: color.adjust($popover-fallback-border-color, $lightness: -20%) !default;
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
$label-default-bg: $gray-light !default;
|
||||
//** Primary label background color
|
||||
$label-primary-bg: $brand-primary !default;
|
||||
//** Success label background color
|
||||
$label-success-bg: $brand-success !default;
|
||||
//** Info label background color
|
||||
$label-info-bg: $brand-info !default;
|
||||
//** Warning label background color
|
||||
$label-warning-bg: $brand-warning !default;
|
||||
//** Danger label background color
|
||||
$label-danger-bg: $brand-danger !default;
|
||||
|
||||
//** Default label text color
|
||||
$label-color: #fff !default;
|
||||
//** Default text color of a linked label
|
||||
$label-link-hover-color: #fff !default;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
$modal-inner-padding: 15px !default;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
$modal-title-padding: 15px !default;
|
||||
//** Modal title line-height
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
//** Background color of modal content area
|
||||
$modal-content-bg: #fff !default;
|
||||
//** Modal content border color
|
||||
$modal-content-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Modal content border color **for IE8**
|
||||
$modal-content-fallback-border-color: #999 !default;
|
||||
|
||||
//** Modal backdrop background color
|
||||
$modal-backdrop-bg: #000 !default;
|
||||
//** Modal backdrop opacity
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
//** Modal header border color
|
||||
$modal-header-border-color: #e5e5e5 !default;
|
||||
//** Modal footer border color
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
|
||||
$modal-lg: 900px !default;
|
||||
$modal-md: 600px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding: 15px !default;
|
||||
$alert-border-radius: $border-radius-base !default;
|
||||
$alert-link-font-weight: bold !default;
|
||||
|
||||
$alert-success-bg: $state-success-bg !default;
|
||||
$alert-success-text: $state-success-text !default;
|
||||
$alert-success-border: $state-success-border !default;
|
||||
|
||||
$alert-info-bg: $state-info-bg !default;
|
||||
$alert-info-text: $state-info-text !default;
|
||||
$alert-info-border: $state-info-border !default;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg !default;
|
||||
$alert-warning-text: $state-warning-text !default;
|
||||
$alert-warning-border: $state-warning-border !default;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg !default;
|
||||
$alert-danger-text: $state-danger-text !default;
|
||||
$alert-danger-border: $state-danger-border !default;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
$progress-bg: #f5f5f5 !default;
|
||||
//** Progress bar text color
|
||||
$progress-bar-color: #fff !default;
|
||||
//** Variable for setting rounded corners on progress bar.
|
||||
$progress-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Default progress bar color
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
//** Success progress bar color
|
||||
$progress-bar-success-bg: $brand-success !default;
|
||||
//** Warning progress bar color
|
||||
$progress-bar-warning-bg: $brand-warning !default;
|
||||
//** Danger progress bar color
|
||||
$progress-bar-danger-bg: $brand-danger !default;
|
||||
//** Info progress bar color
|
||||
$progress-bar-info-bg: $brand-info !default;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
$list-group-bg: #fff !default;
|
||||
//** `.list-group-item` border color
|
||||
$list-group-border: #ddd !default;
|
||||
//** List group border radius
|
||||
$list-group-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
$list-group-hover-bg: #f5f5f5 !default;
|
||||
//** Text color of active list items
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
//** Background color of active list items
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
//** Border color of active list elements
|
||||
$list-group-active-border: $list-group-active-bg !default;
|
||||
//** Text color for content within active list items
|
||||
$list-group-active-text-color: color.adjust($list-group-active-bg, $lightness: 40%) !default;
|
||||
|
||||
//** Text color of disabled list items
|
||||
$list-group-disabled-color: $gray-light !default;
|
||||
//** Background color of disabled list items
|
||||
$list-group-disabled-bg: $gray-lighter !default;
|
||||
//** Text color for content within disabled list items
|
||||
$list-group-disabled-text-color: $list-group-disabled-color !default;
|
||||
|
||||
$list-group-link-color: #555 !default;
|
||||
$list-group-link-hover-color: $list-group-link-color !default;
|
||||
$list-group-link-heading-color: #333 !default;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
$panel-bg: #fff !default;
|
||||
$panel-body-padding: 15px !default;
|
||||
$panel-heading-padding: 10px 15px !default;
|
||||
$panel-footer-padding: $panel-heading-padding !default;
|
||||
$panel-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: #ddd !default;
|
||||
$panel-footer-bg: #f5f5f5 !default;
|
||||
|
||||
$panel-default-text: $gray-dark !default;
|
||||
$panel-default-border: #ddd !default;
|
||||
$panel-default-heading-bg: #f5f5f5 !default;
|
||||
|
||||
$panel-primary-text: #fff !default;
|
||||
$panel-primary-border: $brand-primary !default;
|
||||
$panel-primary-heading-bg: $brand-primary !default;
|
||||
|
||||
$panel-success-text: $state-success-text !default;
|
||||
$panel-success-border: $state-success-border !default;
|
||||
$panel-success-heading-bg: $state-success-bg !default;
|
||||
|
||||
$panel-info-text: $state-info-text !default;
|
||||
$panel-info-border: $state-info-border !default;
|
||||
$panel-info-heading-bg: $state-info-bg !default;
|
||||
|
||||
$panel-warning-text: $state-warning-text !default;
|
||||
$panel-warning-border: $state-warning-border !default;
|
||||
$panel-warning-heading-bg: $state-warning-bg !default;
|
||||
|
||||
$panel-danger-text: $state-danger-text !default;
|
||||
$panel-danger-border: $state-danger-border !default;
|
||||
$panel-danger-heading-bg: $state-danger-bg !default;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
$thumbnail-padding: 4px !default;
|
||||
//** Thumbnail background color
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
//** Thumbnail border color
|
||||
$thumbnail-border: #ddd !default;
|
||||
//** Thumbnail border radius
|
||||
$thumbnail-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
$thumbnail-caption-color: $text-color !default;
|
||||
//** Padding around the thumbnail caption
|
||||
$thumbnail-caption-padding: 9px !default;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
$well-bg: #f5f5f5 !default;
|
||||
$well-border: color.adjust($well-bg, $lightness: -7%) !default;
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
$badge-color: #fff !default;
|
||||
//** Linked badge text color on hover
|
||||
$badge-link-hover-color: #fff !default;
|
||||
$badge-bg: $gray-light !default;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
$badge-active-color: $link-color !default;
|
||||
//** Badge background color in active nav link
|
||||
$badge-active-bg: #fff !default;
|
||||
|
||||
$badge-font-weight: bold !default;
|
||||
$badge-line-height: 1 !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
$breadcrumb-padding-vertical: 8px !default;
|
||||
$breadcrumb-padding-horizontal: 15px !default;
|
||||
//** Breadcrumb background color
|
||||
$breadcrumb-bg: #f5f5f5 !default;
|
||||
//** Breadcrumb text color
|
||||
$breadcrumb-color: #ccc !default;
|
||||
//** Text color of current page in the breadcrumb
|
||||
$breadcrumb-active-color: $gray-light !default;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
$breadcrumb-separator: "/" !default;
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
||||
|
||||
$carousel-control-color: #fff !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-font-size: 20px !default;
|
||||
|
||||
$carousel-indicator-active-bg: #fff !default;
|
||||
$carousel-indicator-border-color: #fff !default;
|
||||
|
||||
$carousel-caption-color: #fff !default;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
$close-font-weight: bold !default;
|
||||
$close-color: #000 !default;
|
||||
$close-text-shadow: 0 1px 0 #fff !default;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
$code-color: #c7254e !default;
|
||||
$code-bg: #f9f2f4 !default;
|
||||
|
||||
$kbd-color: #fff !default;
|
||||
$kbd-bg: #333 !default;
|
||||
|
||||
$pre-bg: #f5f5f5 !default;
|
||||
$pre-color: $gray-dark !default;
|
||||
$pre-border-color: #ccc !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
$component-offset-horizontal: 180px !default;
|
||||
//** Text muted color
|
||||
$text-muted: $gray-light !default;
|
||||
//** Abbreviations and acronyms border color
|
||||
$abbr-border-color: $gray-light !default;
|
||||
//** Headings small color
|
||||
$headings-small-color: $gray-light !default;
|
||||
//** Blockquote small color
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
//** Blockquote font size
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
//** Blockquote border color
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
//** Page header border color
|
||||
$page-header-border-color: $gray-lighter !default;
|
||||
//** Width of horizontal description list titles
|
||||
$dl-horizontal-offset: $component-offset-horizontal !default;
|
||||
//** Point at which .dl-horizontal becomes horizontal
|
||||
$dl-horizontal-breakpoint: $grid-float-breakpoint !default;
|
||||
//** Horizontal line color.
|
||||
$hr-border: $gray-lighter !default;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,316 @@
|
||||
@use "variables.scss" as *;
|
||||
@use "sass:color";
|
||||
|
||||
// Style conversion file, bulma to tabulator
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: $table-background-color !default; //background color of tabulator
|
||||
// $borderColor:#999 !default; //border to tabulator
|
||||
$textSize:16px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:$table-head-background-color !default; //border to tabulator
|
||||
$headerTextColor:$table-head-cell-color !default; //header text color
|
||||
$headerBorderColor:#aaa !default; //header border color
|
||||
$headerSeparatorColor:#999 !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: $headerTextColor !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:$table-body-background-color !default; //table row background color
|
||||
$rowAltBackgroundColor:$table-striped-row-even-background-color !default; //table row background color
|
||||
$rowBorderColor:#aaa !default; //table border color
|
||||
$rowTextColor:$table-color !default; //table text color
|
||||
$rowHoverBackground:$table-row-hover-background-color !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: $table-row-active-background-color !default; //row background color when selected
|
||||
// $rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:$table-foot-background-color !default; //border to tabulator
|
||||
$footerTextColor:$table-foot-cell-color !default; //footer text color
|
||||
$footerBorderColor:$grey-lighter !default; //footer border color
|
||||
// $footerSeparatorColor:#999 !default; //footer bottom separator color
|
||||
// $footerActiveColor:#d00 !default; //footer bottom active text color
|
||||
|
||||
//range selection
|
||||
$rangeBorderColor: #{color.adjust($rowSelectedBackground, $lightness: -10%)} !default; //range border color
|
||||
$rangeHandleColor: $rangeBorderColor !default; //range handle color
|
||||
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
|
||||
$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
|
||||
|
||||
|
||||
@use "../../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$rangeBorderColor: $rangeBorderColor,
|
||||
$rangeHandleColor: $rangeHandleColor,
|
||||
$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
|
||||
$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
border:none;
|
||||
|
||||
.tabulator-header{
|
||||
border:$table-cell-border;
|
||||
border-width:$table-head-cell-border-width;
|
||||
|
||||
.tabulator-col{
|
||||
border-right:none;
|
||||
|
||||
&.tabulator-moving{
|
||||
border:none;
|
||||
}
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:$table-cell-padding;
|
||||
|
||||
.tabulator-col-sorter{
|
||||
right:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-header-filter{
|
||||
input{
|
||||
border:$button-border-width solid $button-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-bottom-width:0;
|
||||
}
|
||||
}
|
||||
|
||||
border:$table-cell-border;
|
||||
border-width:$table-foot-cell-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
&.tabulator-calcs-top{
|
||||
border:$table-cell-border;
|
||||
border-width:$table-head-cell-border-width;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border:$table-cell-border;
|
||||
border-width:$table-foot-cell-border-width;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
border-bottom-width:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
padding:$table-cell-padding;
|
||||
border:$table-cell-border;
|
||||
border-width:$table-foot-cell-border-width;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
margin:-5px -10px 10px -10px;
|
||||
|
||||
border:$table-cell-border;
|
||||
border-width:$table-head-cell-border-width;
|
||||
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-bottom-width:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
margin-top: calc( -0.5em - 5px);
|
||||
|
||||
.tabulator-spreadsheet-tab{
|
||||
// background-color: $spreadsheetActiveTabColor;
|
||||
border-color: $button-border-color;
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
// background-color:$pagination-active-bg;
|
||||
border-color:$button-active-border-color;
|
||||
color:$button-active-color;
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-page{
|
||||
margin:0 0.1875em;
|
||||
padding:$button-padding-vertical $button-padding-horizontal;
|
||||
|
||||
border:$button-border-width solid $button-border-color;
|
||||
|
||||
font-size: $textSize;
|
||||
|
||||
&.active{
|
||||
border-color:$button-active-border-color;
|
||||
color:$button-active-color;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
border-color:$button-hover-border-color;
|
||||
background:inherit;
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Bulma theming classes
|
||||
|
||||
&.is-striped{
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-bordered{
|
||||
border:$table-cell-border;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
border-right:$table-cell-border;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:$table-cell-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-narrow{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding: 0.25em 0.5em
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
padding: 0.25em 0.5em
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
min-height:14px + ($headerMargin * 2);
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground !important;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selected:hover{
|
||||
background-color:color.adjust($rowSelectedBackground, $lightness: -10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$table-cell-padding;
|
||||
border:$table-cell-border;
|
||||
border-width:$table-cell-border-width;
|
||||
|
||||
&.tabulator-row-header{
|
||||
border:$table-cell-border;
|
||||
border-width:$table-cell-border-width;
|
||||
border-right-width: 1px;
|
||||
background:$headerBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
border-bottom:1px solid #999;
|
||||
border-right:none;
|
||||
border-top:1px solid #999;
|
||||
color:$table-cell-heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
box-sizing:border-box;
|
||||
border-bottom:1px solid #999;
|
||||
border-right:none;
|
||||
border-top:1px solid #999;
|
||||
color:$table-cell-heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-popup-container{
|
||||
background: $backgroundColor,
|
||||
}
|
||||
|
||||
.tabulator-edit-list{
|
||||
.tabulator-edit-list-item{
|
||||
&.active{
|
||||
color:$backgroundColor;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:$backgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
////////// from utilities/initial-variables.sass //////////
|
||||
$black: hsl(0, 0%, 4%) !default;
|
||||
$black-bis: hsl(0, 0%, 7%) !default;
|
||||
$black-ter: hsl(0, 0%, 14%) !default;
|
||||
|
||||
$grey-darker: hsl(0, 0%, 21%) !default;
|
||||
$grey-dark: hsl(0, 0%, 29%) !default;
|
||||
$grey: hsl(0, 0%, 48%) !default;
|
||||
$grey-light: hsl(0, 0%, 71%) !default;
|
||||
$grey-lighter: hsl(0, 0%, 86%) !default;
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%) !default;
|
||||
$white-bis: hsl(0, 0%, 98%) !default;
|
||||
$white: hsl(0, 0%, 100%) !default;
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default;
|
||||
$yellow: hsl(48, 100%, 67%) !default;
|
||||
$green: hsl(141, 71%, 48%) !default;
|
||||
$turquoise: hsl(171, 100%, 41%) !default;
|
||||
$cyan: hsl(204, 86%, 53%) !default;
|
||||
$blue: hsl(217, 71%, 53%) !default;
|
||||
$purple: hsl(271, 100%, 71%) !default;
|
||||
$red: hsl(348, 100%, 61%) !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
||||
$family-monospace: monospace !default;
|
||||
$render-mode: optimizeLegibility !default;
|
||||
|
||||
$size-1: 3rem !default;
|
||||
$size-2: 2.5rem !default;
|
||||
$size-3: 2rem !default;
|
||||
$size-4: 1.5rem !default;
|
||||
$size-5: 1.25rem !default;
|
||||
$size-6: 1rem !default;
|
||||
$size-7: 0.75rem !default;
|
||||
|
||||
$weight-light: 300 !default;
|
||||
$weight-normal: 400 !default;
|
||||
$weight-medium: 500 !default;
|
||||
$weight-semibold: 600 !default;
|
||||
$weight-bold: 700 !default;
|
||||
|
||||
////////// from utilities/derived-variables.sass //////////
|
||||
|
||||
$primary: $turquoise !default;
|
||||
|
||||
$info: $cyan !default;
|
||||
$success: $green !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
|
||||
$light: $white-ter !default;
|
||||
$dark: $grey-darker !default;
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default;
|
||||
$yellow-invert: findColorInvert($yellow) !default;
|
||||
$green-invert: findColorInvert($green) !default;
|
||||
$turquoise-invert: findColorInvert($turquoise) !default;
|
||||
$cyan-invert: findColorInvert($cyan) !default;
|
||||
$blue-invert: findColorInvert($blue) !default;
|
||||
$purple-invert: findColorInvert($purple) !default;
|
||||
$red-invert: findColorInvert($red) !default;
|
||||
|
||||
$primary-invert: $turquoise-invert !default;
|
||||
$info-invert: $cyan-invert !default;
|
||||
$success-invert: $green-invert !default;
|
||||
$warning-invert: $yellow-invert !default;
|
||||
$danger-invert: $red-invert !default;
|
||||
$light-invert: $dark !default;
|
||||
$dark-invert: $light !default;
|
||||
|
||||
// General colors
|
||||
|
||||
$background: $white-ter !default;
|
||||
|
||||
$border: $grey-lighter !default;
|
||||
$border-hover: $grey-light !default;
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: $grey-dark !default;
|
||||
$text-invert: findColorInvert($text) !default;
|
||||
$text-light: $grey !default;
|
||||
$text-strong: $grey-darker !default;
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: $red !default;
|
||||
$code-background: $background !default;
|
||||
|
||||
$pre: $text !default;
|
||||
$pre-background: $background !default;
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $blue !default;
|
||||
$link-invert: $blue-invert !default;
|
||||
$link-visited: $purple !default;
|
||||
|
||||
$link-hover: $grey-darker !default;
|
||||
$link-hover-border: $grey-light !default;
|
||||
|
||||
$link-focus: $grey-darker !default;
|
||||
$link-focus-border: $blue !default;
|
||||
|
||||
$link-active: $grey-darker !default;
|
||||
$link-active-border: $grey-dark !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif !default;
|
||||
$family-secondary: $family-sans-serif !default;
|
||||
$family-code: $family-monospace !default;
|
||||
|
||||
$size-small: $size-7 !default;
|
||||
$size-normal: $size-6 !default;
|
||||
$size-medium: $size-5 !default;
|
||||
$size-large: $size-4 !default;
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default;
|
||||
$custom-shades: null !default;
|
||||
|
||||
//$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default;
|
||||
//$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
|
||||
|
||||
|
||||
////////// from elements/button.sass //////////
|
||||
|
||||
$control-border-width: 1px !default;
|
||||
|
||||
$button-color: $grey-darker !default;
|
||||
$button-background-color: $white !default;
|
||||
|
||||
$button-border-color: $grey-lighter !default;
|
||||
$button-border-width: $control-border-width !default;
|
||||
|
||||
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
|
||||
$button-padding-horizontal: 0.75em !default;
|
||||
|
||||
$button-hover-color: $link-hover !default;
|
||||
$button-hover-border-color: $link-hover-border !default;
|
||||
|
||||
$button-focus-color: $link-focus !default;
|
||||
$button-focus-border-color: $link-focus-border !default;
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
|
||||
$button-focus-box-shadow-color: rgba($link, 0.25) !default;
|
||||
|
||||
$button-active-color: $link-active !default;
|
||||
$button-active-border-color: $link-active-border !default;
|
||||
|
||||
$button-text-color: $text !default;
|
||||
$button-text-hover-background-color: $background !default;
|
||||
$button-text-hover-color: $text-strong !default;
|
||||
|
||||
$button-disabled-background-color: $white !default;
|
||||
$button-disabled-border-color: $grey-lighter !default;
|
||||
$button-disabled-shadow: none !default;
|
||||
$button-disabled-opacity: 0.5 !default;
|
||||
|
||||
$button-static-color: $grey !default;
|
||||
$button-static-background-color: $white-ter !default;
|
||||
$button-static-border-color: $grey-lighter !default;
|
||||
|
||||
|
||||
|
||||
////////// from elements/table.sass //////////
|
||||
|
||||
$table-color: $grey-darker !default;
|
||||
$table-background-color: $white !default;
|
||||
|
||||
$table-cell-border: 1px solid $grey-lighter !default;
|
||||
$table-cell-border-width: 0 0 1px !default;
|
||||
$table-cell-padding: 0.5em 0.75em !default;
|
||||
$table-cell-heading-color: $text-strong !default;
|
||||
|
||||
$table-head-cell-border-width: 0 0 2px !default;
|
||||
$table-head-cell-color: $text-strong !default;
|
||||
$table-foot-cell-border-width: 2px 0 0 !default;
|
||||
$table-foot-cell-color: $text-strong !default;
|
||||
|
||||
$table-head-background-color: transparent !default;
|
||||
$table-body-background-color: transparent !default;
|
||||
$table-foot-background-color: transparent !default;
|
||||
|
||||
$table-row-hover-background-color: $white-bis !default;
|
||||
|
||||
$table-row-active-background-color: $primary !default;
|
||||
$table-row-active-color: $primary-invert !default;
|
||||
|
||||
$table-striped-row-even-background-color: $white-bis !default;
|
||||
$table-striped-row-even-hover-background-color: $white-ter !default;
|
||||
@@ -0,0 +1,318 @@
|
||||
@use "sass:color";
|
||||
@use "variables.scss" as *;
|
||||
|
||||
// Style conversion file, bootstrap to tabulator
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff !default; //background color of tabulator
|
||||
$borderColor:$table-border-color !default; //border to tabulator
|
||||
$textSize:16px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#fff !default; //border to tabulator
|
||||
$headerSeparatorColor:$table-border-color !default; //header bottom separator color
|
||||
|
||||
$cellPadding:15px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:#fff !default; //table row background color
|
||||
$rowAltBackgroundColor: $table-striped-color !default; //table row background color
|
||||
$rowBorderColor:$table-border-color !default; //table border color
|
||||
$rowHoverBackground:$table-striped-color !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground:$primary-color !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: $primary-color !default;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:$primary-color !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBorderColor:$table-border-color !default; //footer border color
|
||||
$footerSeparatorColor:$table-border-color !default; //footer bottom separator color
|
||||
$footerActiveColor:$primary-color !default; //footer bottom active text color
|
||||
|
||||
//range selection
|
||||
$rangeBorderColor: #{color.adjust($primary-color, $lightness: -10%)} !default; //range border color
|
||||
$rangeHandleColor: $rangeBorderColor !default; //range handle color
|
||||
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
|
||||
$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
|
||||
|
||||
|
||||
@use "../../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor,
|
||||
$rangeBorderColor: $rangeBorderColor,
|
||||
$rangeHandleColor: $rangeHandleColor,
|
||||
$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
|
||||
$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
border:none;
|
||||
background-color: $backgroundColor;
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
.tabulator-header{
|
||||
color:inherit;
|
||||
|
||||
.tabulator-col{
|
||||
border-right:none;
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:$cellPadding;
|
||||
|
||||
.tabulator-col-sorter{
|
||||
right:-10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-col-group{
|
||||
.tabulator-col-group-cols{
|
||||
border-top:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
width:100%;
|
||||
|
||||
border-bottom:1px solid $headerSeparatorColor;
|
||||
}
|
||||
|
||||
.tabulator-frozen-rows-holder{
|
||||
padding-top: 1em;
|
||||
min-width:600%;
|
||||
|
||||
&:empty{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
background-color:transparent;
|
||||
color:inherit;
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
padding:8px 12px;
|
||||
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-paginator{
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.tabulator-page{
|
||||
margin:0;
|
||||
margin-top:5px;
|
||||
padding:8px 12px;
|
||||
|
||||
border-radius:0;
|
||||
border-right:none;
|
||||
|
||||
background:rgba(255,255,255,.2);
|
||||
|
||||
&[data-page="next"], &:first-of-type {
|
||||
border-top-left-radius:4px;
|
||||
border-bottom-left-radius:4px;
|
||||
}
|
||||
|
||||
&[data-page="prev"], &:last-of-type {
|
||||
border:1px solid $footerBorderColor;
|
||||
border-top-right-radius:4px;
|
||||
border-bottom-right-radius:4px;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//materialize theming classes
|
||||
&.striped{
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
background-color: $rowAltBackgroundColor;
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground !important;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($cellPadding * 2);
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowBackgroundColor;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$cellPadding;
|
||||
border-right:none;
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-right:1px solid $borderColor;
|
||||
border-bottom:none;
|
||||
background:$headerBackgroundColor;
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
border:1px solid #ccc;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
background:$headerBackgroundColor;
|
||||
|
||||
.tabulator-edit-select-list-item{
|
||||
color:inherit;
|
||||
|
||||
&.active{
|
||||
color:$headerBackgroundColor;
|
||||
|
||||
&.focused{
|
||||
outline:1px solid rgba($headerBackgroundColor, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:$headerBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-notice{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-group{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator.tabulator-rtl{
|
||||
.tabulator-header {
|
||||
.tabulator-col{
|
||||
border-left:none;
|
||||
border-right:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
border:1px solid #ccc;
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand{
|
||||
background: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
@use "sass:map";
|
||||
// ==========================================================================
|
||||
// Materialize variables
|
||||
// ==========================================================================
|
||||
//
|
||||
// Table of Contents:
|
||||
//
|
||||
// 1. Colors
|
||||
// 2. Badges
|
||||
// 3. Buttons
|
||||
// 4. Cards
|
||||
// 5. Carousel
|
||||
// 6. Collapsible
|
||||
// 7. Chips
|
||||
// 8. Date + Time Picker
|
||||
// 9. Dropdown
|
||||
// 10. Forms
|
||||
// 11. Global
|
||||
// 12. Grid
|
||||
// 13. Navigation Bar
|
||||
// 14. Side Navigation
|
||||
// 15. Photo Slider
|
||||
// 16. Spinners | Loaders
|
||||
// 17. Tabs
|
||||
// 18. Tables
|
||||
// 19. Toasts
|
||||
// 20. Typography
|
||||
// 21. Footer
|
||||
// 22. Flow Text
|
||||
// 23. Collections
|
||||
// 24. Progress Bar
|
||||
|
||||
|
||||
// 18. Tables
|
||||
// ==========================================================================
|
||||
|
||||
$materialize-red: (
|
||||
"base": #e51c23,
|
||||
"lighten-5": #fdeaeb,
|
||||
"lighten-4": #f8c1c3,
|
||||
"lighten-3": #f3989b,
|
||||
"lighten-2": #ee6e73,
|
||||
"lighten-1": #ea454b,
|
||||
"darken-1": #d0181e,
|
||||
"darken-2": #b9151b,
|
||||
"darken-3": #a21318,
|
||||
"darken-4": #8b1014,
|
||||
);
|
||||
|
||||
$colors: (
|
||||
"materialize-red": $materialize-red,
|
||||
) !default;
|
||||
|
||||
// usage: color("name_of_color", "type_of_color")
|
||||
// to avoid to repeating map-get($colors, ...)
|
||||
@function color($color, $type) {
|
||||
@if map.has-key($colors, $color) {
|
||||
$curr_color: map.get($colors, $color);
|
||||
@if map.has-key($curr_color, $type) {
|
||||
@return map.get($curr_color, $type);
|
||||
}
|
||||
}
|
||||
@warn "Unknown `#{$color}` - `#{$type}` in $colors.";
|
||||
@return null;
|
||||
}
|
||||
|
||||
$table-border-color: rgba(0,0,0,.12) !default;
|
||||
$table-striped-color: #f8f8f8 !default;
|
||||
|
||||
|
||||
$primary-color: color("materialize-red", "lighten-2") !default;
|
||||
@@ -0,0 +1,623 @@
|
||||
@use "sass:color";
|
||||
@use "variables.scss" as *;
|
||||
@use "variables_table.scss" as *;
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: $background !default; //background color of tabulator
|
||||
$textSize:14px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:$headerBackground !default; //border to tabulator
|
||||
$headerTextColor:$headerColor !default; //header text color
|
||||
$headerBorderColor:#ddd !default; //header border color
|
||||
$headerSeparatorColor:#999 !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBorderColor:#ddd !default; //table border color
|
||||
$rowTextColor:#333 !default; //table text color
|
||||
|
||||
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:#fff !default; //border to tabulator
|
||||
$footerTextColor:#555 !default; //footer text color
|
||||
$footerBorderColor:#aaa !default; //footer border color
|
||||
$footerSeparatorColor:#999 !default; //footer bottom separator color
|
||||
$footerActiveColor:#d00 !default; //footer bottom active text color
|
||||
|
||||
@use "../../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
width: 100%;
|
||||
|
||||
margin: $margin;
|
||||
border: $border;
|
||||
box-shadow: $boxShadow;
|
||||
border-radius: $borderRadius;
|
||||
color: $color;
|
||||
|
||||
.tabulator-header{
|
||||
border-right:none;
|
||||
border-bottom: $headerBorder;
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
box-shadow: $headerBoxShadow;
|
||||
|
||||
color: $headerTextColor;
|
||||
font-style: $headerFontStyle;
|
||||
font-weight: $headerFontWeight;
|
||||
text-transform: $headerTextTransform;
|
||||
|
||||
.tabulator-col{
|
||||
border-right: none;
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
.tabulator-col-content{
|
||||
padding: $headerVerticalPadding $headerHorizontalPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
background-color:transparent;
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
background:color.adjust($background, $lightness: -5%) !important;
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
padding: $footerVerticalPadding $footerHorizontalPadding;
|
||||
|
||||
border-top: $footerBorder;
|
||||
box-shadow: $footerBoxShadow;
|
||||
|
||||
background: $footerBackground;
|
||||
|
||||
text-align:right;
|
||||
color: $footerColor;
|
||||
|
||||
font-style: $footerFontStyle;
|
||||
font-weight: $footerFontWeight;
|
||||
text-transform: $footerTextTransform;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
margin:(-$footerVerticalPadding) (-$footerHorizontalPadding) $footerVerticalPadding (-$footerHorizontalPadding);
|
||||
|
||||
background:color.adjust($footerBackground, $lightness: 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($footerBackground, $lightness: 5%) !important;
|
||||
}
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-$footerVerticalPadding;
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
margin-top: calc( -0.78571em - 5px);
|
||||
|
||||
.tabulator-spreadsheet-tab{
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
color:$footerActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.positive, .tabulator-cell.positive{
|
||||
box-shadow: $positiveBoxShadow;
|
||||
background: $positiveBackgroundColor !important;
|
||||
color: $positiveColor !important;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background: $positiveBackgroundHover !important;
|
||||
color: $positiveColorHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.negative, .tabulator-cell.negative{
|
||||
box-shadow: $negativeBoxShadow;
|
||||
background: $negativeBackgroundColor !important;
|
||||
color: $negativeColor !important;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background: $negativeBackgroundHover !important;
|
||||
color: $negativeColorHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error, .tabulator-cell.error{
|
||||
box-shadow: $errorBoxShadow;
|
||||
background: $errorBackgroundColor !important;
|
||||
color: $errorColor !important;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background: $errorBackgroundHover !important;
|
||||
color: $errorColorHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warning, .tabulator-cell.warning{
|
||||
box-shadow: $warningBoxShadow;
|
||||
background: $warningBackgroundColor !important;
|
||||
color: $warningColor !important;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background: $warningBackgroundHover !important;
|
||||
color: $warningColorHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active, .tabulator-cell.active{
|
||||
box-shadow: $activeBoxShadow;
|
||||
background: $activeBackgroundColor !important;
|
||||
color: $activeColor !important;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background: $positiveBackgroundHover !important;
|
||||
color: $positiveColorHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active, .tabulator-cell.active{
|
||||
pointer-events: none;
|
||||
color: $disabledTextColor;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.disabled:hover{
|
||||
pointer-events: none;
|
||||
color: $disabledTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.inverted{
|
||||
|
||||
background: $invertedBackground;
|
||||
color: $invertedCellColor;
|
||||
border: $invertedBorder;
|
||||
|
||||
.tabulator-header{
|
||||
background-color: $invertedHeaderBackground;
|
||||
border-color: $invertedHeaderBorderColor !important;
|
||||
color: $invertedHeaderColor;
|
||||
|
||||
.tabulator-col{
|
||||
border-color: $invertedCellBorderColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
color: $invertedCellColor;
|
||||
border: $invertedBorder;
|
||||
|
||||
.tabulator-cell{
|
||||
border-color: $invertedCellBorderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
background: $definitionPageBackground;
|
||||
}
|
||||
}
|
||||
|
||||
&.striped{
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
background-color: $basicTableStripedBackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.celled{
|
||||
border:1px solid $borderColor;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
border-right:$cellBorder;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:$cellBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
&[class*="single line"]{
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//coloured table varients
|
||||
/* Red */
|
||||
&.red {
|
||||
border-top: $coloredBorderSize solid $red;
|
||||
}
|
||||
&.inverted.red {
|
||||
background-color: $red !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
&.orange {
|
||||
border-top: $coloredBorderSize solid $orange;
|
||||
}
|
||||
&.inverted.orange {
|
||||
background-color: $orange !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
&.yellow {
|
||||
border-top: $coloredBorderSize solid $yellow;
|
||||
}
|
||||
&.inverted.yellow {
|
||||
background-color: $yellow !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Olive */
|
||||
&.olive {
|
||||
border-top: $coloredBorderSize solid $olive;
|
||||
}
|
||||
&.inverted.olive {
|
||||
background-color: $olive !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
&.green {
|
||||
border-top: $coloredBorderSize solid $green;
|
||||
}
|
||||
&.inverted.green {
|
||||
background-color: $green !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Teal */
|
||||
&.teal {
|
||||
border-top: $coloredBorderSize solid $teal;
|
||||
}
|
||||
&.inverted.teal {
|
||||
background-color: $teal !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
&.blue {
|
||||
border-top: $coloredBorderSize solid $blue;
|
||||
}
|
||||
&.inverted.blue {
|
||||
background-color: $blue !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Violet */
|
||||
&.violet {
|
||||
border-top: $coloredBorderSize solid $violet;
|
||||
}
|
||||
&.inverted.violet {
|
||||
background-color: $violet !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Purple */
|
||||
&.purple {
|
||||
border-top: $coloredBorderSize solid $purple;
|
||||
}
|
||||
&.inverted.purple {
|
||||
background-color: $purple !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Pink */
|
||||
&.pink {
|
||||
border-top: $coloredBorderSize solid $pink;
|
||||
}
|
||||
&.inverted.pink {
|
||||
background-color: $pink !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Brown */
|
||||
&.brown {
|
||||
border-top: $coloredBorderSize solid $brown;
|
||||
}
|
||||
&.inverted.brown {
|
||||
background-color: $brown !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Grey */
|
||||
&.grey {
|
||||
border-top: $coloredBorderSize solid $grey;
|
||||
}
|
||||
&.inverted.grey {
|
||||
background-color: $grey !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
/* Black */
|
||||
&.black {
|
||||
border-top: $coloredBorderSize solid $black;
|
||||
}
|
||||
&.inverted.black {
|
||||
background-color: $black !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
&.padded{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding: $paddedVerticalPadding $paddedHorizontalPadding;
|
||||
|
||||
.tabulator-arrow{
|
||||
top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
padding: $paddedVerticalPadding $paddedHorizontalPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.very{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
|
||||
|
||||
.tabulator-arrow{
|
||||
top:26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.compact{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding: $compactVerticalPadding $compactHorizontalPadding;
|
||||
|
||||
.tabulator-arrow{
|
||||
top:12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
padding: $compactVerticalPadding $compactHorizontalPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.very{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
|
||||
|
||||
.tabulator-arrow{
|
||||
top:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-tableholder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
border-bottom: $rowBorder;
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: tabulator.$rowBackgroundColor;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
box-shadow: $activeBoxShadow;
|
||||
background: $activeBackgroundColor !important;
|
||||
color: $activeColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground !important;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
padding: $cellVerticalPadding $cellHorizontalPadding;
|
||||
border-right:none;
|
||||
vertical-align:middle;
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.tabulator-responsive-collapse-toggle{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
background:#fafafa;
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-menu{
|
||||
background:$backgroundColor;
|
||||
|
||||
.tabulator-menu-item{
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:not(.tabulator-menu-item-disabled):hover{
|
||||
background: $headerBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
background:$backgroundColor;
|
||||
|
||||
.tabulator-edit-select-list-item{
|
||||
&.active{
|
||||
color:$backgroundColor;
|
||||
|
||||
&.focused{
|
||||
outline:1px solid rgba($backgroundColor, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:$backgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list-notice{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
background:#fafafa;
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,843 @@
|
||||
@use "sass:meta";
|
||||
@use "sass:math";
|
||||
@use "sass:color";
|
||||
|
||||
/// Remove the unit of a length
|
||||
/// @param {Number} $number - Number to remove unit from
|
||||
/// @author Hugo Giraudel
|
||||
/// @return {Number} - Unitless number
|
||||
@function strip-unit($number) {
|
||||
@if meta.type-of($number) == 'number' and not math.is-unitless($number) {
|
||||
@return math.div($number, $number * 0 + 1);
|
||||
}
|
||||
|
||||
@return $number;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Site Settings
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Fonts
|
||||
--------------------*/
|
||||
|
||||
$fontName : 'Lato' !default;
|
||||
$fontSmoothing : antialiased !default;
|
||||
|
||||
$headerFont : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
|
||||
$pageFont : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
|
||||
|
||||
$googleFontName : $fontName !default;
|
||||
$importGoogleFonts : true !default;
|
||||
$googleFontSizes : '400,700,400italic,700italic' !default;
|
||||
$googleSubset : 'latin' !default;
|
||||
|
||||
$googleProtocol : 'https://' !default;
|
||||
$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}' !default;
|
||||
|
||||
/*-------------------
|
||||
Base Sizes
|
||||
--------------------*/
|
||||
|
||||
/* This is the single variable that controls them all */
|
||||
$emSize : 14px !default;
|
||||
|
||||
/* The size of page text */
|
||||
$fontSize : 14px !default;
|
||||
|
||||
/*-------------------
|
||||
Exact Pixel Values
|
||||
--------------------*/
|
||||
/*
|
||||
These are used to specify exact pixel values in em
|
||||
for things like borders that remain constantly
|
||||
sized as emSize adjusts
|
||||
|
||||
Since there are many more sizes than names for sizes,
|
||||
these are named by their original pixel values.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
$a1px : calc(1 / strip-unit($emSize)) + rem !default;
|
||||
$a4px : calc(4 / strip-unit($emSize)) + rem !default;
|
||||
$a11px : calc(11 / strip-unit($emSize)) + rem !default;
|
||||
$a14px : calc(14 / strip-unit($emSize)) + rem !default;
|
||||
|
||||
$relative1px : calc(1 / strip-unit($emSize)) + em !default;
|
||||
$relative4px : calc(4 / strip-unit($emSize)) + em !default;
|
||||
$relative11px : calc(11 / strip-unit($emSize)) + em !default;
|
||||
$relative14px : calc(14 / strip-unit($emSize)) + em !default;
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Border Radius
|
||||
--------------------*/
|
||||
|
||||
/* See Power-user section below
|
||||
for explanation of $px variables
|
||||
*/
|
||||
$relativeBorderRadius: $relative4px !default;
|
||||
$absoluteBorderRadius: $a4px !default;
|
||||
|
||||
$defaultBorderRadius: $absoluteBorderRadius !default;
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Site Colors
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$red : #DB2828 !default;
|
||||
$orange : #F2711C !default;
|
||||
$yellow : #FBBD08 !default;
|
||||
$olive : #B5CC18 !default;
|
||||
$green : #21BA45 !default;
|
||||
$teal : #00B5AD !default;
|
||||
$blue : #2185D0 !default;
|
||||
$violet : #6435C9 !default;
|
||||
$purple : #A333C8 !default;
|
||||
$pink : #E03997 !default;
|
||||
$brown : #A5673F !default;
|
||||
$grey : #767676 !default;
|
||||
$black : #1B1C1D !default;
|
||||
|
||||
/*--- Light Colors ---*/
|
||||
$lightRed : #FF695E !default;
|
||||
$lightOrange : #FF851B !default;
|
||||
$lightYellow : #FFE21F !default;
|
||||
$lightOlive : #D9E778 !default;
|
||||
$lightGreen : #2ECC40 !default;
|
||||
$lightTeal : #6DFFFF !default;
|
||||
$lightBlue : #54C8FF !default;
|
||||
$lightViolet : #A291FB !default;
|
||||
$lightPurple : #DC73FF !default;
|
||||
$lightPink : #FF8EDF !default;
|
||||
$lightBrown : #D67C1C !default;
|
||||
$lightGrey : #DCDDDE !default;
|
||||
$lightBlack : #545454 !default;
|
||||
|
||||
/*--- Neutrals ---*/
|
||||
$fullBlack : #000000 !default;
|
||||
$offWhite : #F9FAFB !default;
|
||||
$darkWhite : #F3F4F5 !default;
|
||||
$midWhite : #DCDDDE !default;
|
||||
$white : #FFFFFF !default;
|
||||
|
||||
/*--- Colored Backgrounds ---*/
|
||||
$redBackground : #FFE8E6 !default;
|
||||
$orangeBackground : #FFEDDE !default;
|
||||
$yellowBackground : #FFF8DB !default;
|
||||
$oliveBackground : #FBFDEF !default;
|
||||
$greenBackground : #E5F9E7 !default;
|
||||
$tealBackground : #E1F7F7 !default;
|
||||
$blueBackground : #DFF0FF !default;
|
||||
$violetBackground : #EAE7FF !default;
|
||||
$purpleBackground : #F6E7FF !default;
|
||||
$pinkBackground : #FFE3FB !default;
|
||||
$brownBackground : #F1E2D3 !default;
|
||||
|
||||
/*--- Colored Text ---*/
|
||||
$redTextColor : $red !default;
|
||||
$orangeTextColor : $orange !default;
|
||||
$yellowTextColor : #B58105 !default; // Yellow text is difficult to read
|
||||
$oliveTextColor : #8ABC1E !default; // Olive is difficult to read
|
||||
$greenTextColor : #1EBC30 !default; // Green is difficult to read
|
||||
$tealTextColor : #10A3A3 !default; // Teal text is difficult to read
|
||||
$blueTextColor : $blue !default;
|
||||
$violetTextColor : $violet !default;
|
||||
$purpleTextColor : $purple !default;
|
||||
$pinkTextColor : $pink !default;
|
||||
$brownTextColor : $brown !default;
|
||||
|
||||
/*--- Colored Headers ---*/
|
||||
$redHeaderColor : color.adjust($redTextColor, $lightness: -5%) !default;
|
||||
$oliveHeaderColor : color.adjust($oliveTextColor, $lightness: -5%) !default;
|
||||
$greenHeaderColor : color.adjust($greenTextColor, $lightness: -5%) !default;
|
||||
$yellowHeaderColor : color.adjust($yellowTextColor, $lightness: -5%) !default;
|
||||
$blueHeaderColor : color.adjust($blueTextColor, $lightness: -5%) !default;
|
||||
$tealHeaderColor : color.adjust($tealTextColor, $lightness: -5%) !default;
|
||||
$pinkHeaderColor : color.adjust($pinkTextColor, $lightness: -5%) !default;
|
||||
$violetHeaderColor : color.adjust($violetTextColor, $lightness: -5%) !default;
|
||||
$purpleHeaderColor : color.adjust($purpleTextColor, $lightness: -5%) !default;
|
||||
$orangeHeaderColor : color.adjust($orangeTextColor, $lightness: -5%) !default;
|
||||
$brownHeaderColor : color.adjust($brownTextColor, $lightness: -5%) !default;
|
||||
|
||||
/*--- Colored Border ---*/
|
||||
$redBorderColor : $redTextColor !default;
|
||||
$orangeBorderColor : $orangeTextColor !default;
|
||||
$yellowBorderColor : $yellowTextColor !default;
|
||||
$oliveBorderColor : $oliveTextColor !default;
|
||||
$greenBorderColor : $greenTextColor !default;
|
||||
$tealBorderColor : $tealTextColor !default;
|
||||
$blueBorderColor : $blueTextColor !default;
|
||||
$violetBorderColor : $violetTextColor !default;
|
||||
$purpleBorderColor : $purpleTextColor !default;
|
||||
$pinkBorderColor : $pinkTextColor !default;
|
||||
$brownBorderColor : $brownTextColor !default;
|
||||
|
||||
/*-------------------
|
||||
Alpha Colors
|
||||
--------------------*/
|
||||
|
||||
$subtleTransparentBlack : rgba(0, 0, 0, 0.03) !default;
|
||||
$transparentBlack : rgba(0, 0, 0, 0.05) !default;
|
||||
$strongTransparentBlack : rgba(0, 0, 0, 0.10) !default;
|
||||
$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15) !default;
|
||||
|
||||
$subtleTransparentWhite : rgba(255, 255, 255, 0.02) !default;
|
||||
$transparentWhite : rgba(255, 255, 255, 0.08) !default;
|
||||
$strongTransparentWhite : rgba(255, 255, 255, 0.15) !default;
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Brand Colors
|
||||
--------------------*/
|
||||
|
||||
$primaryColor : $blue !default;
|
||||
$secondaryColor : $black !default;
|
||||
|
||||
$lightPrimaryColor : $lightBlue !default;
|
||||
$lightSecondaryColor : $lightBlack !default;
|
||||
|
||||
/*--------------
|
||||
Page Heading
|
||||
---------------*/
|
||||
|
||||
$headerFontWeight : bold !default;
|
||||
$headerLineHeight : calc(18 / 14) * 1em !default;
|
||||
|
||||
$h1 : calc(28 / 14) * 1rem !default;
|
||||
$h2 : calc(24 / 14) * 1rem !default;
|
||||
$h3 : calc(18 / 14) * 1rem !default;
|
||||
$h4 : calc(15 / 14) * 1rem !default;
|
||||
$h5 : calc(14 / 14) * 1rem !default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Page
|
||||
--------------------*/
|
||||
|
||||
$pageBackground : #FFFFFF !default;
|
||||
$pageOverflowX : hidden !default;
|
||||
|
||||
$lineHeight : 1.4285em !default;
|
||||
$textColor : rgba(0, 0, 0, 0.87) !default;
|
||||
|
||||
|
||||
/*--------------
|
||||
Form Input
|
||||
---------------*/
|
||||
|
||||
/* This adjusts the default form input across all elements */
|
||||
$inputBackground : $white !default;
|
||||
$inputVerticalPadding : $relative11px !default;
|
||||
$inputHorizontalPadding : $relative14px !default;
|
||||
$inputPadding : $inputVerticalPadding $inputHorizontalPadding !default;
|
||||
|
||||
/* Input Text Color */
|
||||
$inputColor: $textColor !default;
|
||||
$inputPlaceholderColor: color.adjust($inputColor, $lightness: 75%) !default;
|
||||
$inputPlaceholderFocusColor: color.adjust($inputColor, $lightness: 45%) !default;
|
||||
|
||||
/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
|
||||
$inputLineHeight: calc(17 / 14) * 1em !default;
|
||||
|
||||
/*-------------------
|
||||
Focused Input
|
||||
--------------------*/
|
||||
|
||||
/* Used on inputs, textarea etc */
|
||||
$focusedFormBorderColor: #85B7D9 !default;
|
||||
|
||||
/* Used on dropdowns, other larger blocks */
|
||||
$focusedFormMutedBorderColor: #96C8DA !default;
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
/*
|
||||
Sizes are all expressed in terms of 14px/em (default em)
|
||||
This ensures these "ratios" remain constant despite changes in EM
|
||||
*/
|
||||
|
||||
$miniSize : calc(11 / 14) !default;
|
||||
$tinySize : calc(12 / 14) !default;
|
||||
$smallSize : calc(13 / 14) !default;
|
||||
$mediumSize : calc(14 / 14) !default;
|
||||
$largeSize : calc(16 / 14) !default;
|
||||
$bigSize : calc(18 / 14) !default;
|
||||
$hugeSize : calc(20 / 14) !default;
|
||||
$massiveSize : calc(24 / 14) !default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Paragraph
|
||||
--------------------*/
|
||||
|
||||
$paragraphMargin : 0em 0em 1em !default;
|
||||
$paragraphLineHeight : $lineHeight !default;
|
||||
|
||||
/*-------------------
|
||||
Links
|
||||
--------------------*/
|
||||
|
||||
$linkColor : #4183C4 !default;
|
||||
$linkUnderline : none !default;
|
||||
$linkHoverColor : color.adjust(color.adjust($linkColor, $saturation: 20%), $lightness: -15%) !default;
|
||||
$linkHoverUnderline : $linkUnderline !default;
|
||||
|
||||
/*-------------------
|
||||
Highlighted Text
|
||||
--------------------*/
|
||||
|
||||
$highlightBackground : #CCE2FF !default;
|
||||
$highlightColor : $textColor !default;
|
||||
|
||||
$inputHighlightBackground : rgba(100, 100, 100, 0.4) !default;
|
||||
$inputHighlightColor : $textColor !default;
|
||||
|
||||
/*-------------------
|
||||
Em Sizes
|
||||
--------------------*/
|
||||
|
||||
/*
|
||||
This rounds $size values to the closest pixel then expresses that value in (r)em.
|
||||
This ensures all size values round to exact pixels
|
||||
*/
|
||||
$mini : calc(math.round($miniSize * $emSize) / $emSize) * 1rem !default;
|
||||
$tiny : calc(math.round($tinySize * $emSize) / $emSize) * 1rem !default;
|
||||
$small : calc(math.round($smallSize * $emSize) / $emSize) * 1rem !default;
|
||||
$medium : calc(math.round($mediumSize * $emSize) / $emSize) * 1rem !default;
|
||||
$large : calc(math.round($largeSize * $emSize) / $emSize) * 1rem !default;
|
||||
$big : calc(math.round($bigSize * $emSize) / $emSize) * 1rem !default;
|
||||
$huge : calc(math.round($hugeSize * $emSize) / $emSize) * 1rem !default;
|
||||
$massive : calc(math.round($massiveSize * $emSize) / $emSize) * 1rem !default;
|
||||
|
||||
/* em */
|
||||
$relativeMini : calc(math.round($miniSize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeTiny : calc(math.round($tinySize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeSmall : calc(math.round($smallSize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeMedium : calc(math.round($mediumSize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeLarge : calc(math.round($largeSize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeBig : calc(math.round($bigSize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeHuge : calc(math.round($hugeSize * $emSize) / $emSize) * 1em !default;
|
||||
$relativeMassive : calc(math.round($massiveSize * $emSize) / $emSize) * 1em !default;
|
||||
|
||||
/* rem */
|
||||
$absoluteMini : calc(math.round($miniSize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteTiny : calc(math.round($tinySize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteSmall : calc(math.round($smallSize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteMedium : calc(math.round($mediumSize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteLarge : calc(math.round($largeSize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteBig : calc(math.round($bigSize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteHuge : calc(math.round($hugeSize * $emSize) / $emSize) * 1rem !default;
|
||||
$absoluteMassive : calc(math.round($massiveSize * $emSize) / $emSize) * 1rem !default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Loader
|
||||
--------------------*/
|
||||
|
||||
$loaderSize : $relativeBig !default;
|
||||
$loaderSpeed : 0.6s !default;
|
||||
$loaderLineWidth : 0.2em !default;
|
||||
$loaderFillColor : rgba(0, 0, 0, 0.1) !default;
|
||||
$loaderLineColor : $grey !default;
|
||||
|
||||
$invertedLoaderFillColor : rgba(255, 255, 255, 0.15) !default;
|
||||
$invertedLoaderLineColor : $white !default;
|
||||
|
||||
/*-------------------
|
||||
Grid
|
||||
--------------------*/
|
||||
|
||||
$columnCount: 16 !default;
|
||||
|
||||
/*-------------------
|
||||
Transitions
|
||||
--------------------*/
|
||||
|
||||
$defaultDuration : 0.1s !default;
|
||||
$defaultEasing : ease !default;
|
||||
|
||||
/*-------------------
|
||||
Breakpoints
|
||||
--------------------*/
|
||||
|
||||
$mobileBreakpoint : 320px !default;
|
||||
$tabletBreakpoint : 768px !default;
|
||||
$computerBreakpoint : 992px !default;
|
||||
$largeMonitorBreakpoint : 1200px !default;
|
||||
$widescreenMonitorBreakpoint : 1920px !default;
|
||||
|
||||
|
||||
|
||||
/* Columns */
|
||||
$oneWide : calc(1 / $columnCount * 100%) !default;
|
||||
$twoWide : calc(2 / $columnCount * 100%) !default;
|
||||
$threeWide : calc(3 / $columnCount * 100%) !default;
|
||||
$fourWide : calc(4 / $columnCount * 100%) !default;
|
||||
$fiveWide : calc(5 / $columnCount * 100%) !default;
|
||||
$sixWide : calc(6 / $columnCount * 100%) !default;
|
||||
$sevenWide : calc(7 / $columnCount * 100%) !default;
|
||||
$eightWide : calc(8 / $columnCount * 100%) !default;
|
||||
$nineWide : calc(9 / $columnCount * 100%) !default;
|
||||
$tenWide : calc(10 / $columnCount * 100%) !default;
|
||||
$elevenWide : calc(11 / $columnCount * 100%) !default;
|
||||
$twelveWide : calc(12 / $columnCount * 100%) !default;
|
||||
$thirteenWide : calc(13 / $columnCount * 100%) !default;
|
||||
$fourteenWide : calc(14 / $columnCount * 100%) !default;
|
||||
$fifteenWide : calc(15 / $columnCount * 100%) !default;
|
||||
$sixteenWide : calc(16 / $columnCount * 100%) !default;
|
||||
|
||||
$oneColumn : calc(1 / 1 * 100%) !default;
|
||||
$twoColumn : calc(1 / 2 * 100%) !default;
|
||||
$threeColumn : calc(1 / 3 * 100%) !default;
|
||||
$fourColumn : calc(1 / 4 * 100%) !default;
|
||||
$fiveColumn : calc(1 / 5 * 100%) !default;
|
||||
$sixColumn : calc(1 / 6 * 100%) !default;
|
||||
$sevenColumn : calc(1 / 7 * 100%) !default;
|
||||
$eightColumn : calc(1 / 8 * 100%) !default;
|
||||
$nineColumn : calc(1 / 9 * 100%) !default;
|
||||
$tenColumn : calc(1 / 10 * 100%) !default;
|
||||
$elevenColumn : calc(1 / 11 * 100%) !default;
|
||||
$twelveColumn : calc(1 / 12 * 100%) !default;
|
||||
$thirteenColumn : calc(1 / 13 * 100%) !default;
|
||||
$fourteenColumn : calc(1 / 14 * 100%) !default;
|
||||
$fifteenColumn : calc(1 / 15 * 100%) !default;
|
||||
$sixteenColumn : calc(1 / 16 * 100%) !default;
|
||||
|
||||
|
||||
/*******************************
|
||||
Power-User
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Emotive Colors
|
||||
--------------------*/
|
||||
|
||||
/* Positive */
|
||||
$positiveColor : $green !default;
|
||||
$positiveBackgroundColor : #FCFFF5 !default;
|
||||
$positiveBorderColor : #A3C293 !default;
|
||||
$positiveHeaderColor : #1A531B !default;
|
||||
$positiveTextColor : #2C662D !default;
|
||||
|
||||
/* Negative */
|
||||
$negativeColor : $red !default;
|
||||
$negativeBackgroundColor : #FFF6F6 !default;
|
||||
$negativeBorderColor : #E0B4B4 !default;
|
||||
$negativeHeaderColor : #912D2B !default;
|
||||
$negativeTextColor : #9F3A38 !default;
|
||||
|
||||
/* Info */
|
||||
$infoColor : #31CCEC !default;
|
||||
$infoBackgroundColor : #F8FFFF !default;
|
||||
$infoBorderColor : #A9D5DE !default;
|
||||
$infoHeaderColor : #0E566C !default;
|
||||
$infoTextColor : #276F86 !default;
|
||||
|
||||
/* Warning */
|
||||
$warningColor : #F2C037 !default;
|
||||
$warningBorderColor : #C9BA9B !default;
|
||||
$warningBackgroundColor : #FFFAF3 !default;
|
||||
$warningHeaderColor : #794B02 !default;
|
||||
$warningTextColor : #573A08 !default;
|
||||
|
||||
/*-------------------
|
||||
Paths
|
||||
--------------------*/
|
||||
|
||||
/* For source only. Modified in gulp for dist */
|
||||
$imagePath : '../../themes/default/assets/images' !default;
|
||||
$fontPath : '../../themes/default/assets/fonts' !default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Icons
|
||||
--------------------*/
|
||||
|
||||
/* Maximum Glyph Width of Icon */
|
||||
$iconWidth : 1.18em !default;
|
||||
|
||||
/*-------------------
|
||||
Neutral Text
|
||||
--------------------*/
|
||||
|
||||
$darkTextColor : rgba(0, 0, 0, 0.85) !default;
|
||||
$mutedTextColor : rgba(0, 0, 0, 0.6) !default;
|
||||
$lightTextColor : rgba(0, 0, 0, 0.4) !default;
|
||||
|
||||
$unselectedTextColor : rgba(0, 0, 0, 0.4) !default;
|
||||
$hoveredTextColor : rgba(0, 0, 0, 0.8) !default;
|
||||
$pressedTextColor : rgba(0, 0, 0, 0.9) !default;
|
||||
$selectedTextColor : rgba(0, 0, 0, 0.95) !default;
|
||||
$disabledTextColor : rgba(0, 0, 0, 0.2) !default;
|
||||
|
||||
$invertedTextColor : rgba(255, 255, 255, 0.9) !default;
|
||||
$invertedMutedTextColor : rgba(255, 255, 255, 0.8) !default;
|
||||
$invertedLightTextColor : rgba(255, 255, 255, 0.7) !default;
|
||||
$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5) !default;
|
||||
$invertedHoveredTextColor : rgba(255, 255, 255, 1) !default;
|
||||
$invertedPressedTextColor : rgba(255, 255, 255, 1) !default;
|
||||
$invertedSelectedTextColor : rgba(255, 255, 255, 1) !default;
|
||||
$invertedDisabledTextColor : rgba(255, 255, 255, 0.2) !default;
|
||||
|
||||
/*-------------------
|
||||
Brand Colors
|
||||
--------------------*/
|
||||
|
||||
$facebookColor : #3B5998 !default;
|
||||
$twitterColor : #55ACEE !default;
|
||||
$googlePlusColor : #DD4B39 !default;
|
||||
$linkedInColor : #1F88BE !default;
|
||||
$youtubeColor : #CC181E !default;
|
||||
$pinterestColor : #BD081C !default;
|
||||
$vkColor : #4D7198 !default;
|
||||
$instagramColor : #49769C !default;
|
||||
|
||||
/*-------------------
|
||||
Borders
|
||||
--------------------*/
|
||||
|
||||
$circularRadius : 500rem !default;
|
||||
|
||||
$borderColor : rgba(34, 36, 38, 0.15) !default;
|
||||
$strongBorderColor : rgba(34, 36, 38, 0.22) !default;
|
||||
$internalBorderColor : rgba(34, 36, 38, 0.1) !default;
|
||||
$selectedBorderColor : rgba(34, 36, 38, 0.35) !default;
|
||||
$strongSelectedBorderColor : rgba(34, 36, 38, 0.5) !default;
|
||||
$disabledBorderColor : rgba(34, 36, 38, 0.5) !default;
|
||||
|
||||
$solidInternalBorderColor : #FAFAFA !default;
|
||||
$solidBorderColor : #D4D4D5 !default;
|
||||
$solidSelectedBorderColor : #BCBDBD !default;
|
||||
|
||||
$whiteBorderColor : rgba(255, 255, 255, 0.1) !default;
|
||||
$selectedWhiteBorderColor : rgba(255, 255, 255, 0.8) !default;
|
||||
|
||||
$solidWhiteBorderColor : #555555 !default;
|
||||
$selectedSolidWhiteBorderColor : #999999 !default;
|
||||
|
||||
/*-------------------
|
||||
Accents
|
||||
--------------------*/
|
||||
|
||||
/* Differentiating Neutrals */
|
||||
$subtleGradient: linear-gradient(transparent, $transparentBlack) !default;
|
||||
|
||||
/* Differentiating Layers */
|
||||
$subtleShadow:
|
||||
0px 1px 2px 0 $borderColor
|
||||
!default;
|
||||
$floatingShadow:
|
||||
0px 2px 4px 0px rgba(34, 36, 38, 0.12),
|
||||
0px 2px 10px 0px rgba(34, 36, 38, 0.15)
|
||||
!default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Derived Values
|
||||
--------------------*/
|
||||
|
||||
/* Loaders Position Offset */
|
||||
$loaderOffset : - calc($loaderSize / 2) !default;
|
||||
$loaderMargin : $loaderOffset 0em 0em $loaderOffset !default;
|
||||
|
||||
/* Rendered Scrollbar Width */
|
||||
$scrollbarWidth: 17px !default;
|
||||
|
||||
/* Maximum Single Character Glyph Width, aka Capital "W" */
|
||||
$glyphWidth: 1.1em !default;
|
||||
|
||||
/* Used to match floats with text */
|
||||
$lineHeightOffset : calc(($lineHeight - 1em) / 2) !default;
|
||||
$headerLineHeightOffset : calc(($headerLineHeight - 1em) / 2) !default;
|
||||
|
||||
/* Header Spacing */
|
||||
$headerTopMargin : calc(2rem - #{$headerLineHeightOffset}) !default;
|
||||
$headerBottomMargin : 1rem !default;
|
||||
|
||||
/* Minimum Mobile Width */
|
||||
$pageMinWidth : 320px !default;
|
||||
|
||||
/* Positive / Negative Dupes */
|
||||
$successBackgroundColor : $positiveBackgroundColor !default;
|
||||
$successColor : $positiveColor !default;
|
||||
$successBorderColor : $positiveBorderColor !default;
|
||||
$successHeaderColor : $positiveHeaderColor !default;
|
||||
$successTextColor : $positiveTextColor !default;
|
||||
|
||||
$errorBackgroundColor : $negativeBackgroundColor !default;
|
||||
$errorColor : $negativeColor !default;
|
||||
$errorBorderColor : $negativeBorderColor !default;
|
||||
$errorHeaderColor : $negativeHeaderColor !default;
|
||||
$errorTextColor : $negativeTextColor !default;
|
||||
|
||||
|
||||
/* Responsive */
|
||||
$largestMobileScreen : ($tabletBreakpoint - 1px) !default;
|
||||
$largestTabletScreen : ($computerBreakpoint - 1px) !default;
|
||||
$largestSmallMonitor : ($largeMonitorBreakpoint - 1px) !default;
|
||||
$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px) !default;
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Disabled
|
||||
--------------------*/
|
||||
|
||||
$disabledOpacity: 0.45 !default;
|
||||
$disabledTextColor: rgba(40, 40, 40, 0.3) !default;
|
||||
$invertedDisabledTextColor: rgba(225, 225, 225, 0.3) !default;
|
||||
|
||||
/*-------------------
|
||||
Hover
|
||||
--------------------*/
|
||||
|
||||
/*--- Shadows ---*/
|
||||
$floatingShadowHover:
|
||||
0px 2px 4px 0px rgba(34, 36, 38, 0.15),
|
||||
0px 2px 10px 0px rgba(34, 36, 38, 0.25)
|
||||
!default;
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorHover : color.adjust(color.adjust($primaryColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$secondaryColorHover : color.adjust(color.adjust($secondaryColor, $lightness: 5%), $saturation: 10%) !default;
|
||||
|
||||
$redHover : color.adjust(color.adjust($red, $lightness: -5%), $saturation: 10%) !default;
|
||||
$orangeHover : color.adjust(color.adjust($orange, $lightness: -5%), $saturation: 10%) !default;
|
||||
$yellowHover : color.adjust(color.adjust($yellow, $lightness: -5%), $saturation: 10%) !default;
|
||||
$oliveHover : color.adjust(color.adjust($olive, $lightness: -5%), $saturation: 10%) !default;
|
||||
$greenHover : color.adjust(color.adjust($green, $lightness: -5%), $saturation: 10%) !default;
|
||||
$tealHover : color.adjust(color.adjust($teal, $lightness: -5%), $saturation: 10%) !default;
|
||||
$blueHover : color.adjust(color.adjust($blue, $lightness: -5%), $saturation: 10%) !default;
|
||||
$violetHover : color.adjust(color.adjust($violet, $lightness: -5%), $saturation: 10%) !default;
|
||||
$purpleHover : color.adjust(color.adjust($purple, $lightness: -5%), $saturation: 10%) !default;
|
||||
$pinkHover : color.adjust(color.adjust($pink, $lightness: -5%), $saturation: 10%) !default;
|
||||
$brownHover : color.adjust(color.adjust($brown, $lightness: -5%), $saturation: 10%) !default;
|
||||
|
||||
$lightRedHover : color.adjust(color.adjust($lightRed, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightOrangeHover : color.adjust(color.adjust($lightOrange, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightYellowHover : color.adjust(color.adjust($lightYellow, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightOliveHover : color.adjust(color.adjust($lightOlive, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightGreenHover : color.adjust(color.adjust($lightGreen, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightTealHover : color.adjust(color.adjust($lightTeal, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightBlueHover : color.adjust(color.adjust($lightBlue, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightVioletHover : color.adjust(color.adjust($lightViolet, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightPurpleHover : color.adjust(color.adjust($lightPurple, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightPinkHover : color.adjust(color.adjust($lightPink, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightBrownHover : color.adjust(color.adjust($lightBrown, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightGreyHover : color.adjust(color.adjust($lightGrey, $lightness: -5%), $saturation: 10%) !default;
|
||||
$lightBlackHover : color.adjust(color.adjust($fullBlack, $lightness: -5%), $saturation: 10%) !default;
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorHover : color.adjust(color.adjust($positiveColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$negativeColorHover : color.adjust(color.adjust($negativeColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookHoverColor : color.adjust(color.adjust($facebookColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$twitterHoverColor : color.adjust(color.adjust($twitterColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$googlePlusHoverColor : color.adjust(color.adjust($googlePlusColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$linkedInHoverColor : color.adjust(color.adjust($linkedInColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$youtubeHoverColor : color.adjust(color.adjust($youtubeColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$instagramHoverColor : color.adjust(color.adjust($instagramColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$pinterestHoverColor : color.adjust(color.adjust($pinterestColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
$vkHoverColor : color.adjust(color.adjust($vkColor, $lightness: -5%), $saturation: 10%) !default;
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackHover : color.adjust($fullBlack, $lightness: 5%) !default;
|
||||
$blackHover : color.adjust($black, $lightness: 5%) !default;
|
||||
$greyHover : color.adjust($grey, $lightness: 5%) !default;
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteHover : color.adjust($white, $lightness: -5%) !default;
|
||||
$offWhiteHover : color.adjust($offWhite, $lightness: -5%) !default;
|
||||
$darkWhiteHover : color.adjust($darkWhite, $lightness: -5%) !default;
|
||||
|
||||
/*-------------------
|
||||
Focus
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorFocus : color.adjust(color.adjust($primaryColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$secondaryColorFocus : color.adjust(color.adjust($secondaryColor, $lightness: 8%), $saturation: 20%) !default;
|
||||
|
||||
$redFocus : color.adjust(color.adjust($red, $lightness: -8%), $saturation: 20%) !default;
|
||||
$orangeFocus : color.adjust(color.adjust($orange, $lightness: -8%), $saturation: 20%) !default;
|
||||
$yellowFocus : color.adjust(color.adjust($yellow, $lightness: -8%), $saturation: 20%) !default;
|
||||
$oliveFocus : color.adjust(color.adjust($olive, $lightness: -8%), $saturation: 20%) !default;
|
||||
$greenFocus : color.adjust(color.adjust($green, $lightness: -8%), $saturation: 20%) !default;
|
||||
$tealFocus : color.adjust(color.adjust($teal, $lightness: -8%), $saturation: 20%) !default;
|
||||
$blueFocus : color.adjust(color.adjust($blue, $lightness: -8%), $saturation: 20%) !default;
|
||||
$violetFocus : color.adjust(color.adjust($violet, $lightness: -8%), $saturation: 20%) !default;
|
||||
$purpleFocus : color.adjust(color.adjust($purple, $lightness: -8%), $saturation: 20%) !default;
|
||||
$pinkFocus : color.adjust(color.adjust($pink, $lightness: -8%), $saturation: 20%) !default;
|
||||
$brownFocus : color.adjust(color.adjust($brown, $lightness: -8%), $saturation: 20%) !default;
|
||||
|
||||
$lightRedFocus : color.adjust(color.adjust($lightRed, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightOrangeFocus : color.adjust(color.adjust($lightOrange, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightYellowFocus : color.adjust(color.adjust($lightYellow, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightOliveFocus : color.adjust(color.adjust($lightOlive, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightGreenFocus : color.adjust(color.adjust($lightGreen, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightTealFocus : color.adjust(color.adjust($lightTeal, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightBlueFocus : color.adjust(color.adjust($lightBlue, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightVioletFocus : color.adjust(color.adjust($lightViolet, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightPurpleFocus : color.adjust(color.adjust($lightPurple, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightPinkFocus : color.adjust(color.adjust($lightPink, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightBrownFocus : color.adjust(color.adjust($lightBrown, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightGreyFocus : color.adjust(color.adjust($lightGrey, $lightness: -8%), $saturation: 20%) !default;
|
||||
$lightBlackFocus : color.adjust(color.adjust($fullBlack, $lightness: -8%), $saturation: 20%) !default;
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorFocus : color.adjust(color.adjust($positiveColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$negativeColorFocus : color.adjust(color.adjust($negativeColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookFocusColor : color.adjust(color.adjust($facebookColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$twitterFocusColor : color.adjust(color.adjust($twitterColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$googlePlusFocusColor : color.adjust(color.adjust($googlePlusColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$linkedInFocusColor : color.adjust(color.adjust($linkedInColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$youtubeFocusColor : color.adjust(color.adjust($youtubeColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$instagramFocusColor : color.adjust(color.adjust($instagramColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$pinterestFocusColor : color.adjust(color.adjust($pinterestColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
$vkFocusColor : color.adjust(color.adjust($vkColor, $lightness: -8%), $saturation: 20%) !default;
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackFocus : color.adjust($fullBlack, $lightness: 8%) !default;
|
||||
$blackFocus : color.adjust($black, $lightness: 8%) !default;
|
||||
$greyFocus : color.adjust($grey, $lightness: 8%) !default;
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteFocus : color.adjust($white, $lightness: -8%) !default;
|
||||
$offWhiteFocus : color.adjust($offWhite, $lightness: -8%) !default;
|
||||
$darkWhiteFocus : color.adjust($darkWhite, $lightness: -8%) !default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Down (:active)
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorDown : color.adjust($primaryColor, $lightness: -10%) !default;
|
||||
$secondaryColorDown : color.adjust($secondaryColor, $lightness: 10%) !default;
|
||||
|
||||
$redDown : color.adjust($red, $lightness: -10%) !default;
|
||||
$orangeDown : color.adjust($orange, $lightness: -10%) !default;
|
||||
$yellowDown : color.adjust($yellow, $lightness: -10%) !default;
|
||||
$oliveDown : color.adjust($olive, $lightness: -10%) !default;
|
||||
$greenDown : color.adjust($green, $lightness: -10%) !default;
|
||||
$tealDown : color.adjust($teal, $lightness: -10%) !default;
|
||||
$blueDown : color.adjust($blue, $lightness: -10%) !default;
|
||||
$violetDown : color.adjust($violet, $lightness: -10%) !default;
|
||||
$purpleDown : color.adjust($purple, $lightness: -10%) !default;
|
||||
$pinkDown : color.adjust($pink, $lightness: -10%) !default;
|
||||
$brownDown : color.adjust($brown, $lightness: -10%) !default;
|
||||
|
||||
$lightRedDown : color.adjust($lightRed, $lightness: -10%) !default;
|
||||
$lightOrangeDown : color.adjust($lightOrange, $lightness: -10%) !default;
|
||||
$lightYellowDown : color.adjust($lightYellow, $lightness: -10%) !default;
|
||||
$lightOliveDown : color.adjust($lightOlive, $lightness: -10%) !default;
|
||||
$lightGreenDown : color.adjust($lightGreen, $lightness: -10%) !default;
|
||||
$lightTealDown : color.adjust($lightTeal, $lightness: -10%) !default;
|
||||
$lightBlueDown : color.adjust($lightBlue, $lightness: -10%) !default;
|
||||
$lightVioletDown : color.adjust($lightViolet, $lightness: -10%) !default;
|
||||
$lightPurpleDown : color.adjust($lightPurple, $lightness: -10%) !default;
|
||||
$lightPinkDown : color.adjust($lightPink, $lightness: -10%) !default;
|
||||
$lightBrownDown : color.adjust($lightBrown, $lightness: -10%) !default;
|
||||
$lightGreyDown : color.adjust($lightGrey, $lightness: -10%) !default;
|
||||
$lightBlackDown : color.adjust($fullBlack, $lightness: -10%) !default;
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorDown : color.adjust($positiveColor, $lightness: -10%) !default;
|
||||
$negativeColorDown : color.adjust($negativeColor, $lightness: -10%) !default;
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookDownColor : color.adjust($facebookColor, $lightness: -10%) !default;
|
||||
$twitterDownColor : color.adjust($twitterColor, $lightness: -10%) !default;
|
||||
$googlePlusDownColor : color.adjust($googlePlusColor, $lightness: -10%) !default;
|
||||
$linkedInDownColor : color.adjust($linkedInColor, $lightness: -10%) !default;
|
||||
$youtubeDownColor : color.adjust($youtubeColor, $lightness: -10%) !default;
|
||||
$instagramDownColor : color.adjust($instagramColor, $lightness: -10%) !default;
|
||||
$pinterestDownColor : color.adjust($pinterestColor, $lightness: -10%) !default;
|
||||
$vkDownColor : color.adjust($vkColor, $lightness: -10%) !default;
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackDown : color.adjust($fullBlack, $lightness: 10%) !default;
|
||||
$blackDown : color.adjust($black, $lightness: 10%) !default;
|
||||
$greyDown : color.adjust($grey, $lightness: 10%) !default;
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteDown : color.adjust($white, $lightness: -10%) !default;
|
||||
$offWhiteDown : color.adjust($offWhite, $lightness: -10%) !default;
|
||||
$darkWhiteDown : color.adjust($darkWhite, $lightness: -10%) !default;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Active
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorActive : color.adjust(color.adjust($primaryColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$secondaryColorActive : color.adjust(color.adjust($secondaryColor, $lightness: 5%), $saturation: 15%) !default;
|
||||
|
||||
$redActive : color.adjust(color.adjust($red, $lightness: -5%), $saturation: 15%) !default;
|
||||
$orangeActive : color.adjust(color.adjust($orange, $lightness: -5%), $saturation: 15%) !default;
|
||||
$yellowActive : color.adjust(color.adjust($yellow, $lightness: -5%), $saturation: 15%) !default;
|
||||
$oliveActive : color.adjust(color.adjust($olive, $lightness: -5%), $saturation: 15%) !default;
|
||||
$greenActive : color.adjust(color.adjust($green, $lightness: -5%), $saturation: 15%) !default;
|
||||
$tealActive : color.adjust(color.adjust($teal, $lightness: -5%), $saturation: 15%) !default;
|
||||
$blueActive : color.adjust(color.adjust($blue, $lightness: -5%), $saturation: 15%) !default;
|
||||
$violetActive : color.adjust(color.adjust($violet, $lightness: -5%), $saturation: 15%) !default;
|
||||
$purpleActive : color.adjust(color.adjust($purple, $lightness: -5%), $saturation: 15%) !default;
|
||||
$pinkActive : color.adjust(color.adjust($pink, $lightness: -5%), $saturation: 15%) !default;
|
||||
$brownActive : color.adjust(color.adjust($brown, $lightness: -5%), $saturation: 15%) !default;
|
||||
|
||||
$lightRedActive : color.adjust(color.adjust($lightRed, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightOrangeActive : color.adjust(color.adjust($lightOrange, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightYellowActive : color.adjust(color.adjust($lightYellow, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightOliveActive : color.adjust(color.adjust($lightOlive, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightGreenActive : color.adjust(color.adjust($lightGreen, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightTealActive : color.adjust(color.adjust($lightTeal, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightBlueActive : color.adjust(color.adjust($lightBlue, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightVioletActive : color.adjust(color.adjust($lightViolet, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightPurpleActive : color.adjust(color.adjust($lightPurple, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightPinkActive : color.adjust(color.adjust($lightPink, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightBrownActive : color.adjust(color.adjust($lightBrown, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightGreyActive : color.adjust(color.adjust($lightGrey, $lightness: -5%), $saturation: 15%) !default;
|
||||
$lightBlackActive : color.adjust(color.adjust($fullBlack, $lightness: -5%), $saturation: 15%) !default;
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorActive : color.adjust(color.adjust($positiveColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$negativeColorActive : color.adjust(color.adjust($negativeColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookActiveColor : color.adjust(color.adjust($facebookColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$twitterActiveColor : color.adjust(color.adjust($twitterColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$googlePlusActiveColor : color.adjust(color.adjust($googlePlusColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$linkedInActiveColor : color.adjust(color.adjust($linkedInColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$youtubeActiveColor : color.adjust(color.adjust($youtubeColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$instagramActiveColor : color.adjust(color.adjust($instagramColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$pinterestActiveColor : color.adjust(color.adjust($pinterestColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
$vkActiveColor : color.adjust(color.adjust($vkColor, $lightness: -5%), $saturation: 15%) !default;
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackActive : color.adjust($fullBlack, $lightness: -5%) !default;
|
||||
$blackActive : color.adjust($black, $lightness: -5%) !default;
|
||||
$greyActive : color.adjust($grey, $lightness: -5%) !default;
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteActive : color.adjust($white, $lightness: -5%) !default;
|
||||
$offWhiteActive : color.adjust($offWhite, $lightness: -5%) !default;
|
||||
$darkWhiteActive : color.adjust($darkWhite, $lightness: -5%) !default;
|
||||
@@ -0,0 +1,248 @@
|
||||
@use "sass:color";
|
||||
@use "variables.scss" as *;
|
||||
|
||||
/*******************************
|
||||
Table
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Element
|
||||
--------------------*/
|
||||
|
||||
$verticalMargin: 1em !default;
|
||||
$horizontalMargin: 0em !default;
|
||||
$margin: $verticalMargin $horizontalMargin !default;
|
||||
$borderCollapse: separate !default;
|
||||
$borderSpacing: 0px !default;
|
||||
$borderRadius: $defaultBorderRadius !default;
|
||||
$transition:
|
||||
background $defaultDuration $defaultEasing,
|
||||
color $defaultDuration $defaultEasing !default;
|
||||
$background: $white !default;
|
||||
$color: $textColor !default;
|
||||
$borderWidth: 1px !default;
|
||||
$border: $borderWidth solid $borderColor !default;
|
||||
$boxShadow: none !default;
|
||||
$textAlign: left !default;
|
||||
|
||||
/*--------------
|
||||
Parts
|
||||
---------------*/
|
||||
|
||||
/* Table Row */
|
||||
$rowBorder: 1px solid $internalBorderColor !default;
|
||||
|
||||
/* Table Cell */
|
||||
$cellVerticalPadding: $relativeMini !default;
|
||||
$cellHorizontalPadding: $relativeMini !default;
|
||||
$cellVerticalAlign: inherit !default;
|
||||
$cellTextAlign: inherit !default;
|
||||
$cellBorder: 1px solid $internalBorderColor !default;
|
||||
|
||||
/* Table Header */
|
||||
$headerBorder: 1px solid $internalBorderColor !default;
|
||||
$headerDivider: none !default;
|
||||
$headerBackground: $offWhite !default;
|
||||
$headerAlign: inherit !default;
|
||||
$headerVerticalAlign: inherit !default;
|
||||
$headerColor: $textColor !default;
|
||||
$headerVerticalPadding: $relativeSmall !default;
|
||||
$headerHorizontalPadding: $cellHorizontalPadding !default;
|
||||
$headerFontStyle: none !default;
|
||||
$headerFontWeight: bold !default;
|
||||
$headerTextTransform: none !default;
|
||||
$headerBoxShadow: none !default;
|
||||
|
||||
/* Table Footer */
|
||||
$footerBoxShadow: none !default;
|
||||
$footerBorder: 1px solid $borderColor !default;
|
||||
$footerDivider: none !default;
|
||||
$footerBackground: $offWhite !default;
|
||||
$footerAlign: inherit !default;
|
||||
$footerVerticalAlign: middle !default;
|
||||
$footerColor: $textColor !default;
|
||||
$footerVerticalPadding: $cellVerticalPadding !default;
|
||||
$footerHorizontalPadding: $cellHorizontalPadding !default;
|
||||
$footerFontStyle: normal !default;
|
||||
$footerFontWeight: normal !default;
|
||||
$footerTextTransform: none !default;
|
||||
|
||||
/* Responsive Size */
|
||||
$responsiveHeaderDisplay: block !default;
|
||||
$responsiveFooterDisplay: block !default;
|
||||
$responsiveRowVerticalPadding: 1em !default;
|
||||
$responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important !default;
|
||||
$responsiveCellVerticalPadding: 0.25em !default;
|
||||
$responsiveCellHorizontalPadding: 0.75em !default;
|
||||
$responsiveCellBoxShadow: none !important !default;
|
||||
|
||||
/*-------------------
|
||||
Types
|
||||
--------------------*/
|
||||
|
||||
/* Definition */
|
||||
$definitionPageBackground: $white !default;
|
||||
|
||||
$definitionHeaderBackground: transparent !default;
|
||||
$definitionHeaderColor: $unselectedTextColor !default;
|
||||
$definitionHeaderFontWeight: normal !default;
|
||||
|
||||
$definitionFooterBackground: $definitionHeaderBackground !default;
|
||||
$definitionFooterColor: $definitionHeaderColor !default;
|
||||
$definitionFooterFontWeight: $definitionHeaderFontWeight !default;
|
||||
|
||||
$definitionColumnBackground: $subtleTransparentBlack !default;
|
||||
$definitionColumnFontWeight: bold !default;
|
||||
$definitionColumnColor: $selectedTextColor !default;
|
||||
$definitionColumnFontSize: $relativeMedium !default;
|
||||
$definitionColumnTextTransform: '' !default;
|
||||
$definitionColumnBoxShadow: '' !default;
|
||||
$definitionColumnTextAlign: '' !default;
|
||||
$definitionColumnHorizontalPadding: '' !default;
|
||||
|
||||
|
||||
/*--------------
|
||||
Couplings
|
||||
---------------*/
|
||||
|
||||
$iconVerticalAlign: baseline !default;
|
||||
|
||||
/*--------------
|
||||
States
|
||||
---------------*/
|
||||
|
||||
$stateMarkerWidth: 0px !default;
|
||||
|
||||
/* Positive */
|
||||
$positiveColor: $positiveTextColor !default;
|
||||
$positiveBoxShadow: $stateMarkerWidth 0px 0px $positiveBorderColor inset !default;
|
||||
$positiveBackgroundHover: color.adjust($positiveBackgroundColor, $lightness: -3%) !default;
|
||||
$positiveColorHover: color.adjust($positiveColor, $lightness: -3%) !default;
|
||||
|
||||
/* Negative */
|
||||
$negativeColor: $negativeTextColor !default;
|
||||
$negativeBoxShadow: $stateMarkerWidth 0px 0px $negativeBorderColor inset !default;
|
||||
$negativeBackgroundHover: color.adjust($negativeBackgroundColor, $lightness: -3%) !default;
|
||||
$negativeColorHover: color.adjust($negativeColor, $lightness: -3%) !default;
|
||||
|
||||
/* Error */
|
||||
$errorColor: $errorTextColor !default;
|
||||
$errorBoxShadow: $stateMarkerWidth 0px 0px $errorBorderColor inset !default;
|
||||
$errorBackgroundHover: color.adjust($errorBackgroundColor, $lightness: -3%) !default;
|
||||
$errorColorHover: color.adjust($errorColor, $lightness: -3%) !default;
|
||||
|
||||
/* Warning */
|
||||
$warningColor: $warningTextColor !default;
|
||||
$warningBoxShadow: $stateMarkerWidth 0px 0px $warningBorderColor inset !default;
|
||||
$warningBackgroundHover: color.adjust($warningBackgroundColor, $lightness: -3%) !default;
|
||||
$warningColorHover: color.adjust($warningColor, $lightness: -3%) !default;
|
||||
|
||||
/* Active */
|
||||
$activeColor: $textColor !default;
|
||||
$activeBackgroundColor: #E0E0E0 !default;
|
||||
$activeBoxShadow: $stateMarkerWidth 0px 0px $activeColor inset !default;
|
||||
|
||||
$activeBackgroundHover: #EFEFEF !default;
|
||||
$activeColorHover: $selectedTextColor !default;
|
||||
|
||||
/*--------------
|
||||
Types
|
||||
---------------*/
|
||||
|
||||
/* Attached */
|
||||
$attachedTopOffset: 0px !default;
|
||||
$attachedBottomOffset: 0px !default;
|
||||
$attachedHorizontalOffset: -$borderWidth !default;
|
||||
$attachedWidth: calc(100% + #{$attachedHorizontalOffset * -2}) !default;
|
||||
$attachedBoxShadow: none !default;
|
||||
$attachedBorder: $borderWidth solid $solidBorderColor !default;
|
||||
$attachedBottomBoxShadow:
|
||||
$boxShadow,
|
||||
$attachedBoxShadow
|
||||
!default;
|
||||
|
||||
/* Striped */
|
||||
$stripedBackground: rgba(0, 0, 50, 0.02) !default;
|
||||
$invertedStripedBackground: rgba(255, 255, 255, 0.05) !default;
|
||||
|
||||
/* Selectable */
|
||||
$selectableBackground: $transparentBlack !default;
|
||||
$selectableTextColor: $selectedTextColor !default;
|
||||
$selectableInvertedBackground: $transparentWhite !default;
|
||||
$selectableInvertedTextColor: $invertedSelectedTextColor !default;
|
||||
|
||||
/* Sortable */
|
||||
$sortableBackground: '' !default;
|
||||
$sortableColor: $textColor !default;
|
||||
|
||||
$sortableBorder: 1px solid $borderColor !default;
|
||||
$sortableIconWidth: auto !default;
|
||||
$sortableIconDistance: 0.5em !default;
|
||||
$sortableIconOpacity: 0.8 !default;
|
||||
$sortableIconFont: 'Icons' !default;
|
||||
$sortableIconAscending: '\f0d8' !default;
|
||||
$sortableIconDescending: '\f0d7' !default;
|
||||
$sortableDisabledColor: $disabledTextColor !default;
|
||||
|
||||
$sortableHoverBackground: $transparentBlack !default;
|
||||
$sortableHoverColor: $hoveredTextColor !default;
|
||||
|
||||
$sortableActiveBackground: $transparentBlack !default;
|
||||
$sortableActiveColor: $selectedTextColor !default;
|
||||
|
||||
$sortableActiveHoverBackground: $transparentBlack !default;
|
||||
$sortableActiveHoverColor: $selectedTextColor !default;
|
||||
|
||||
$sortableInvertedBorderColor: transparent !default;
|
||||
$sortableInvertedHoverBackground: $transparentWhite $subtleGradient !default;
|
||||
$sortableInvertedHoverColor: $invertedHoveredTextColor !default;
|
||||
$sortableInvertedActiveBackground: $strongTransparentWhite $subtleGradient !default;
|
||||
$sortableInvertedActiveColor: $invertedSelectedTextColor !default;
|
||||
|
||||
/* Colors */
|
||||
$coloredBorderSize: 0.2em !default;
|
||||
$coloredBorderRadius: 0em 0em $borderRadius $borderRadius !default;
|
||||
|
||||
/* Inverted */
|
||||
$invertedBackground: #333333 !default;
|
||||
$invertedBorder: none !default;
|
||||
$invertedCellBorderColor: $whiteBorderColor !default;
|
||||
$invertedCellColor: $invertedTextColor !default;
|
||||
|
||||
$invertedHeaderBackground: $veryStrongTransparentBlack !default;
|
||||
$invertedHeaderColor: $invertedTextColor !default;
|
||||
$invertedHeaderBorderColor: $invertedCellBorderColor !default;
|
||||
|
||||
$invertedDefinitionColumnBackground: $subtleTransparentWhite !default;
|
||||
$invertedDefinitionColumnColor: $invertedSelectedTextColor !default;
|
||||
$invertedDefinitionColumnFontWeight: bold !default;
|
||||
|
||||
/* Basic */
|
||||
$basicTableBackground: transparent !default;
|
||||
$basicTableBorder: $borderWidth solid $borderColor !default;
|
||||
$basicBoxShadow: none !default;
|
||||
|
||||
$basicTableHeaderBackground: transparent !default;
|
||||
$basicTableCellBackground: transparent !default;
|
||||
$basicTableHeaderDivider: none !default;
|
||||
$basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1) !default;
|
||||
$basicTableCellPadding: '' !default;
|
||||
$basicTableStripedBackground: #f2f2f2 !default;
|
||||
|
||||
/* Padded */
|
||||
$paddedVerticalPadding: 1em !default;
|
||||
$paddedHorizontalPadding: 1em !default;
|
||||
$veryPaddedVerticalPadding: 1.5em !default;
|
||||
$veryPaddedHorizontalPadding: 1.5em !default;
|
||||
|
||||
/* Compact */
|
||||
$compactVerticalPadding: 0.5em !default;
|
||||
$compactHorizontalPadding: 0.7em !default;
|
||||
$veryCompactVerticalPadding: 0.4em !default;
|
||||
$veryCompactHorizontalPadding: 0.6em !default;
|
||||
|
||||
|
||||
/* Sizes */
|
||||
$small: 0.9em !default;
|
||||
$medium: 1em !default;
|
||||
$large: 1.1em !default;
|
||||
@@ -0,0 +1,235 @@
|
||||
@use "sass:color";
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #222 !default; //background color of tabulator
|
||||
$borderColor:#333 !default; //border to tabulator
|
||||
$textSize:14px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#333 !default; //border to tabulator
|
||||
$headerTextColor:#fff !default; //header text color
|
||||
$headerBorderColor:#aaa !default; //header border color
|
||||
$headerSeparatorColor:#999 !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:#666 !default; //table row background color
|
||||
$rowAltBackgroundColor:#444 !default; //table row background color
|
||||
$rowBorderColor:#888 !default; //table border color
|
||||
$rowTextColor:#fff !default; //table text color
|
||||
$rowHoverBackground:#999 !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #000 !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #888 !default;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#999 !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:#333 !default; //border to tabulator
|
||||
$footerTextColor:#333 !default; //footer text color
|
||||
$footerBorderColor:#aaa !default; //footer border color
|
||||
$footerSeparatorColor:#999 !default; //footer bottom separator color
|
||||
$footerActiveColor:#fff !default; //footer bottom active text color
|
||||
|
||||
$headerHighlightBackground: #777 !default; //header background color when highlighted
|
||||
$headerTextHighlightBackground: #fff !default; //header background color when highlighted
|
||||
|
||||
//range selection
|
||||
$rangeBorderColor: #ccc !default; //range border color
|
||||
$rangeHandleColor: $rangeBorderColor !default; //range handle color
|
||||
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
|
||||
$rangeHeaderSelectedTextColor: #333 !default; //header text color when selected
|
||||
$rangeHeaderHighlightBackground: #999 !default; //header background color when highlighted
|
||||
$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
|
||||
|
||||
|
||||
|
||||
@use "../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor,
|
||||
$rangeBorderColor: $rangeBorderColor,
|
||||
$rangeHandleColor: $rangeHandleColor,
|
||||
$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
|
||||
$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor,
|
||||
$rangeHeaderHighlightBackground: $rangeHeaderHighlightBackground,
|
||||
$rangeHeaderTextHighlightBackground: $rangeHeaderTextHighlightBackground
|
||||
);
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
background-color: $backgroundColor;
|
||||
|
||||
.tabulator-header{
|
||||
|
||||
.tabulator-col{
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
.tabulator-col-content{
|
||||
.tabulator-col-title{
|
||||
.tabulator-title-editor{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-header-filter{
|
||||
input, select{
|
||||
border:1px solid #999;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: -10%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: -10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
border-color: $footerBorderColor;
|
||||
|
||||
background:rgba(255,255,255,.2);
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-paginator{
|
||||
label{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-page-counter {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
min-width: 100%;
|
||||
|
||||
color:#333;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-toggle{
|
||||
border-color:#000;
|
||||
background:$headerBackgroundColor;
|
||||
|
||||
// &.tabulator-toggle-on{
|
||||
// background:#25682b;
|
||||
// }
|
||||
|
||||
.tabulator-toggle-switch{
|
||||
border-color:#000;
|
||||
background:#232323;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
background:$rowTextColor;
|
||||
|
||||
.tabulator-edit-select-list-item{
|
||||
color:$rowBackgroundColor;
|
||||
|
||||
&.active{
|
||||
color:$editBoxColor;
|
||||
background:$rowAltBackgroundColor;
|
||||
|
||||
&.focused{
|
||||
outline:1px solid rgba($editBoxColor, .5);
|
||||
}
|
||||
}
|
||||
|
||||
&.focused{
|
||||
outline:1px solid $rowAltBackgroundColor;
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
color:$editBoxColor;
|
||||
background:$rowBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
color:#333;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,308 @@
|
||||
@use "sass:color";
|
||||
|
||||
$primary: #3759D7 !default; //the base text color from which the rest of the theme derives
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff !default; //background color of tabulator
|
||||
$borderColor:#fff !default; //border to tabulator
|
||||
$textSize:16px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#fff !default; //border to tabulator
|
||||
$headerTextColor:$primary !default; //header text color
|
||||
$headerBorderColor:#fff !default; //header border color
|
||||
$headerSeparatorColor:$primary !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: $primary !default;
|
||||
$sortArrowInactive: color.adjust($primary, $lightness: 30%) !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:#f3f3f3 !default; //table row background color
|
||||
$rowAltBackgroundColor:#fff !default; //table row background color
|
||||
$rowBorderColor:#fff !default; //table border color
|
||||
$rowTextColor:#333 !default; //table text color
|
||||
$rowHoverBackground:#bbb !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:#fff !default; //border to tabulator
|
||||
$footerTextColor:$primary !default; //footer text color
|
||||
$footerBorderColor:#aaa !default; //footer border color
|
||||
$footerSeparatorColor:#999 !default; //footer bottom separator color
|
||||
$footerActiveColor:$primary !default; //footer bottom active text color
|
||||
|
||||
$handleWidth:10px !default; //width of the row handle
|
||||
$handleColor: $primary !default; //color for odd numbered rows
|
||||
$handleColorAlt: color.adjust($primary, $lightness: 10%) !default; //color for even numbered rows
|
||||
|
||||
//range selection
|
||||
$rangeBorderColor: #{color.adjust($primary, $lightness: -10%)} !default; //range border color
|
||||
$rangeHandleColor: $rangeBorderColor !default; //range handle color
|
||||
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
|
||||
$rangeHeaderHighlightBackground: $primary !default; //header background color when highlighted
|
||||
$rangeHeaderTextHighlightBackground: #fff !default; //header text color when highlighted
|
||||
|
||||
|
||||
|
||||
@use "../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor,
|
||||
$rangeBorderColor: $rangeBorderColor,
|
||||
$rangeHandleColor: $rangeHandleColor,
|
||||
$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
|
||||
$rangeHeaderHighlightBackground: $rangeHeaderHighlightBackground,
|
||||
$rangeHeaderTextHighlightBackground: $rangeHeaderTextHighlightBackground
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
|
||||
.tabulator-header{
|
||||
border-bottom:3px solid $headerSeparatorColor;
|
||||
margin-bottom:4px;
|
||||
padding-left:$handleWidth;
|
||||
|
||||
font-size: 1.1em;
|
||||
|
||||
.tabulator-col{
|
||||
border-right:2px solid $headerBorderColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
&:nth-child(1) {
|
||||
padding-left: $handleWidth;
|
||||
}
|
||||
|
||||
.tabulator-col-content{
|
||||
.tabulator-col-title{
|
||||
.tabulator-title-editor{
|
||||
border:1px solid $primary;
|
||||
|
||||
font-size: 1em;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-col-group{
|
||||
.tabulator-col-group-cols{
|
||||
border-top:2px solid $headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
&.tabulator-frozen-left{
|
||||
padding-left: $handleWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
border-top:2px solid $headerSeparatorColor !important;
|
||||
|
||||
.tabulator-row{
|
||||
padding-left: 0 !important;
|
||||
|
||||
.tabulator-cell{
|
||||
background:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
.tabulator-calcs-holder{
|
||||
border-top:3px solid $headerSeparatorColor !important;
|
||||
border-bottom:2px solid $headerSeparatorColor !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($footerBackgroundColor, $lightness: 5%) !important;
|
||||
|
||||
.tabulator-cell{
|
||||
background:none;
|
||||
|
||||
&:first-child{
|
||||
border-left: $handleWidth solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child{
|
||||
border-bottom:none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
border-color:$footerBorderColor;
|
||||
|
||||
color:$rowTextColor;
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
font-weight: bold;
|
||||
color:$footerTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabulator-row{
|
||||
margin-bottom: 2px;
|
||||
|
||||
.tabulator-cell{
|
||||
&:first-child{
|
||||
border-left: $handleWidth solid $handleColor;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
background-color: $handleColor;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:nth-child(even){
|
||||
background-color: $handleColorAlt;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
|
||||
&:first-child{
|
||||
border-left: $handleWidth solid $handleColorAlt;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
background-color: $handleColorAlt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selectable:hover{
|
||||
cursor: pointer;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color:$rowHoverBackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
.tabulator-cell{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&.tabulator-selected:hover{
|
||||
.tabulator-cell{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
padding:6px 4px;
|
||||
border-right:2px solid $rowBorderColor;
|
||||
|
||||
background-color: $rowBackgroundColor;
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
min-width: 100%;
|
||||
|
||||
margin-bottom: 2px;
|
||||
|
||||
border-bottom:2px solid $primary;
|
||||
border-top:2px solid $primary;
|
||||
border-right:none;
|
||||
|
||||
background:color.adjust($primary, $lightness: 20%);
|
||||
|
||||
span{
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-toggle{
|
||||
&.tabulator-toggle-on{
|
||||
background:$primary;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-edit-select-list{
|
||||
border:1px solid $editBoxColor;
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
|
||||
.tabulator-print-table-group{
|
||||
border-bottom:2px solid $primary;
|
||||
border-top:2px solid $primary;
|
||||
background:color.adjust($primary, $lightness: 20%);
|
||||
margin-bottom: 2px;
|
||||
|
||||
span{
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
@use "sass:color";
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff !default; //background color of tabulator
|
||||
$borderColor:#999 !default; //border to tabulator
|
||||
$textSize:14px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#fff !default; //border to tabulator
|
||||
$headerTextColor:#555 !default; //header text color
|
||||
$headerBorderColor:#ddd !default; //header border color
|
||||
$headerSeparatorColor:#999 !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:#fff !default; //table row background color
|
||||
$rowAltBackgroundColor:#fff !default; //table row background color
|
||||
$rowBorderColor:#ddd !default; //table border color
|
||||
$rowTextColor:#333 !default; //table text color
|
||||
$rowHoverBackground:#bbb !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:#fff !default; //border to tabulator
|
||||
$footerTextColor:#555 !default; //footer text color
|
||||
$footerBorderColor:#aaa !default; //footer border color
|
||||
$footerSeparatorColor:#999 !default; //footer bottom separator color
|
||||
$footerActiveColor:#d00 !default; //footer bottom active text color
|
||||
|
||||
@use "../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
border:none;
|
||||
background-color: $backgroundColor;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-calcs-holder{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: -5%) !important;
|
||||
|
||||
border-bottom:1px solid $headerSeparatorColor;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: -5%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
.tabulator-calcs-holder{
|
||||
background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
|
||||
|
||||
border-bottom:1px solid $footerBackgroundColor;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
.tabulator-spreadsheet-tab{
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
color:$footerActiveColor;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
.tabulator-cell{
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
span{
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
.tabulator-print-table-group{
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
267
public/libs/tabulator-master/src/scss/themes/tabulator_site.scss
Normal file
267
public/libs/tabulator-master/src/scss/themes/tabulator_site.scss
Normal file
@@ -0,0 +1,267 @@
|
||||
@use "sass:color";
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff !default; //background color of tabulator
|
||||
$borderColor:#222 !default; //border to tabulator
|
||||
$textSize:14px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#222 !default; //border to tabulator
|
||||
$headerTextColor:#fff !default; //header text color
|
||||
$headerBorderColor:#aaa !default; //header border color
|
||||
$headerSeparatorColor:#3FB449 !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #3FB449 !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:#fff !default; //table row background color
|
||||
$rowAltBackgroundColor:#EFEFEF !default; //table row background color
|
||||
$rowBorderColor:#aaa !default; //table border color
|
||||
$rowTextColor:#333 !default; //table text color
|
||||
$rowHoverBackground:#bbb !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #70c28e !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #269b51 !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:#222 !default; //border to tabulator
|
||||
$footerTextColor:#222 !default; //footer text color
|
||||
$footerBorderColor:#aaa !default; //footer border color
|
||||
$footerSeparatorColor:#3FB449 !default; //footer bottom separator color
|
||||
$footerActiveColor:$footerSeparatorColor !default; //footer bottom active text color
|
||||
|
||||
//range selection
|
||||
$rangeBorderColor: $rowSelectedBackgroundHover !default; //range border color
|
||||
$rangeHandleColor: $rangeBorderColor !default; //range handle color
|
||||
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
|
||||
$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
|
||||
$rangeHeaderHighlightBackground: $rowSelectedBackground !default; //header background color when highlighted
|
||||
$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
|
||||
|
||||
@use "../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor,
|
||||
$rangeBorderColor: $rangeBorderColor,
|
||||
$rangeHandleColor: $rangeHandleColor,
|
||||
$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
|
||||
$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor,
|
||||
$rangeHeaderHighlightBackground: $rangeHeaderHighlightBackground,
|
||||
$rangeHeaderTextHighlightBackground: $rangeHeaderTextHighlightBackground
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
border:none;
|
||||
border-bottom: 5px solid $borderColor;
|
||||
|
||||
&[tabulator-layout="fitColumns"]{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-header{
|
||||
border-bottom:3px solid $headerSeparatorColor;
|
||||
|
||||
.tabulator-col{
|
||||
background-color: $headerBackgroundColor;
|
||||
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: 10%) !important;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:none;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:color.adjust($headerBackgroundColor, $lightness: 15%) !important;
|
||||
color:$headerTextColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
padding-top:8px;
|
||||
border-top:3px solid $footerSeparatorColor;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
margin:-8px -10px 8px -10px;
|
||||
|
||||
background:color.adjust($footerBackgroundColor, $lightness: 10%) !important;
|
||||
|
||||
border-top:none;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
.tabulator-row{
|
||||
background:color.adjust($footerBackgroundColor, $lightness: 10%) !important;
|
||||
color:$headerTextColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
margin-top: -13px;
|
||||
margin-bottom: -8px;
|
||||
|
||||
.tabulator-spreadsheet-tab{
|
||||
padding: 8px;
|
||||
margin: 0 2px;
|
||||
|
||||
border-color: $footerActiveColor;
|
||||
border-width: 0 2px 2px 2px;
|
||||
background-color: #333;
|
||||
|
||||
color: #fff;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
background-color:$footerActiveColor;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-paginator{
|
||||
label{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-page-counter{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.tabulator-page{
|
||||
background-color:#fff;
|
||||
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-toggle{
|
||||
&.tabulator-toggle-on{
|
||||
background:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
padding:6px;
|
||||
|
||||
&.tabulator-row-handle{
|
||||
.tabulator-row-handle-box{
|
||||
.tabulator-row-handle-bar{
|
||||
background:$sortArrowActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
border-right:1px solid $rowBorderColor;
|
||||
border-top:1px solid #000;
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
background:$headerBackgroundColor;
|
||||
color:$headerTextColor;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color:color.adjust($headerBackgroundColor, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
color:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
border-collapse: collapse;
|
||||
|
||||
.tabulator-print-table-group{
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
background:$headerBackgroundColor;
|
||||
color:$headerTextColor;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color:color.adjust($headerBackgroundColor, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
color:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,496 @@
|
||||
@use "sass:color";
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff !default; //background color of tabulator
|
||||
$themeColor:#3FB449;
|
||||
$borderColor:#222 !default; //border to tabulator
|
||||
$textSize:14px !default; //table text size
|
||||
|
||||
//header theming
|
||||
$headerBackgroundColor:#222 !default; //border to tabulator
|
||||
$headerTextColor:#fff !default; //header text color
|
||||
$headerBorderColor:#aaa !default; //header border color
|
||||
$headerSeparatorColor:$themeColor !default; //header bottom separator color
|
||||
$headerMargin:4px !default; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: $themeColor !default;
|
||||
$sortArrowInactive: #bbb !default;
|
||||
|
||||
//row theming
|
||||
$rowBackgroundColor:#fff !default; //table row background color
|
||||
$rowAltBackgroundColor:#EFEFEF !default; //table row background color
|
||||
$rowBorderColor:#aaa !default; //table border color
|
||||
$rowTextColor:#333 !default; //table text color
|
||||
$rowHoverBackground:#bbb !default; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #70c28e !default; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #269b51 !default;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD !default; //border color for edit boxes
|
||||
$errorColor:#dd0000 !default; //error indication
|
||||
|
||||
//footer theming
|
||||
$footerBackgroundColor:#222 !default; //border to tabulator
|
||||
$footerTextColor:#222 !default; //footer text color
|
||||
$footerBorderColor:#aaa !default; //footer border color
|
||||
$footerSeparatorColor:$themeColor !default; //footer bottom separator color
|
||||
$footerActiveColor:$footerSeparatorColor !default; //footer bottom active text color
|
||||
|
||||
//range selection
|
||||
$rangeBorderColor: $rowSelectedBackgroundHover !default; //range border color
|
||||
$rangeHandleColor: $rangeBorderColor !default; //range handle color
|
||||
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
|
||||
$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
|
||||
$rangeHeaderHighlightBackground: $rowSelectedBackground !default; //header background color when highlighted
|
||||
$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
|
||||
|
||||
@use "../tabulator.scss" with (
|
||||
$backgroundColor: $backgroundColor,
|
||||
$borderColor: $borderColor,
|
||||
$textSize: $textSize,
|
||||
$headerBackgroundColor: $headerBackgroundColor,
|
||||
$headerTextColor: $headerTextColor,
|
||||
$headerBorderColor: $headerBorderColor,
|
||||
$headerSeparatorColor: $headerSeparatorColor,
|
||||
$headerMargin: $headerMargin,
|
||||
$sortArrowActive: $sortArrowActive,
|
||||
$sortArrowInactive: $sortArrowInactive,
|
||||
$rowBackgroundColor: $rowBackgroundColor,
|
||||
$rowAltBackgroundColor: $rowAltBackgroundColor,
|
||||
$rowBorderColor: $rowBorderColor,
|
||||
$rowTextColor: $rowTextColor,
|
||||
$rowHoverBackground: $rowHoverBackground,
|
||||
$rowSelectedBackground: $rowSelectedBackground,
|
||||
$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
|
||||
$editBoxColor: $editBoxColor,
|
||||
$errorColor: $errorColor,
|
||||
$footerBackgroundColor: $footerBackgroundColor,
|
||||
$footerTextColor: $footerTextColor,
|
||||
$footerBorderColor: $footerBorderColor,
|
||||
$footerSeparatorColor: $footerSeparatorColor,
|
||||
$footerActiveColor: $footerActiveColor,
|
||||
$rangeBorderColor: $rangeBorderColor,
|
||||
$rangeHandleColor: $rangeHandleColor,
|
||||
$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
|
||||
$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor,
|
||||
$rangeHeaderHighlightBackground: $rangeHeaderHighlightBackground,
|
||||
$rangeHeaderTextHighlightBackground: $rangeHeaderTextHighlightBackground
|
||||
);
|
||||
|
||||
.tabulator{
|
||||
border:1px solid #282828;
|
||||
background-color: #111111;
|
||||
|
||||
&[tabulator-layout="fitColumns"]{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-header {
|
||||
.tabulator-col {
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input, select {
|
||||
line-height: normal;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tabulator-header{
|
||||
background-color: #080808;
|
||||
border-bottom:3px solid $headerSeparatorColor;
|
||||
|
||||
.tabulator-col{
|
||||
border-right-color:#393838;
|
||||
background-color: #101010;
|
||||
|
||||
&.range-header-col {
|
||||
border-right:2px solid #3FB449;
|
||||
}
|
||||
|
||||
&.tabulator-col-group {
|
||||
.tabulator-col-group-cols{
|
||||
border-top-color:#393838;
|
||||
border-bottom-color:#393838;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-range-highlight{
|
||||
background-color: #163220;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.tabulator-range-selected{
|
||||
background-color: #3FB449;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-right:1px solid $borderColor !important;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 4px 10px;
|
||||
|
||||
border: 1px solid #4b4b4b;
|
||||
border-radius: 2px;
|
||||
|
||||
background: #1f1f1f;
|
||||
color: #fff;
|
||||
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
input + input{
|
||||
margin-left:5px;
|
||||
}
|
||||
|
||||
.tabulator-col-content{
|
||||
padding:8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
background:color.adjust($headerBackgroundColor, $lightness: 10%) !important;
|
||||
border-top: 1px solid #393838;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:none;
|
||||
|
||||
.tabulator-row{
|
||||
background-color: #292929 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
color:#ccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableholder{
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
/* width of the entire scrollbar */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #333;
|
||||
/* color of the tracking area */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #666;
|
||||
/* color of the scroll thumb */
|
||||
border-radius: 20px;
|
||||
/* roundness of the scroll thumb */
|
||||
border: 3px solid #333;
|
||||
/* creates padding around scroll thumb */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.tabulator-placeholder{
|
||||
span{
|
||||
color:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-table{
|
||||
color:#fff;
|
||||
background-color: #111111;
|
||||
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:color.adjust($headerBackgroundColor, $lightness: 15%) !important;
|
||||
color:$headerTextColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
padding-top:8px;
|
||||
border-top:3px solid $footerSeparatorColor;
|
||||
background-color: #101010;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
margin:-8px -10px 8px -10px;
|
||||
|
||||
background:color.adjust($footerBackgroundColor, $lightness: 10%) !important;
|
||||
border-bottom: 1px solid #393838;
|
||||
|
||||
border-top:none;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
.tabulator-row{
|
||||
background-color: #292929 !important;
|
||||
color:$headerTextColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-spreadsheet-tabs{
|
||||
margin-top: -13px;
|
||||
margin-bottom:-4px;
|
||||
|
||||
.tabulator-spreadsheet-tab{
|
||||
padding: 4px 10px;
|
||||
margin: 0 2px;
|
||||
|
||||
border-color: $footerActiveColor;
|
||||
background-color: #000;
|
||||
border-width:0 1px 1px 1px;
|
||||
|
||||
color:#ececec;
|
||||
font-weight: normal;
|
||||
|
||||
&.tabulator-spreadsheet-tab-active{
|
||||
background-color:$footerActiveColor;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-paginator{
|
||||
label{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-page-counter{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.tabulator-page{
|
||||
background-color:#fff;
|
||||
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
|
||||
.tabulator-page, .tabulator-page-size {
|
||||
background:#ebebeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-row{
|
||||
|
||||
background-color: #151515;
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:#000;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color: #009136;
|
||||
&:hover{
|
||||
background-color:#00531f;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group{
|
||||
border-right-color:#393838;
|
||||
border-top:1px solid #000;
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
background:$headerBackgroundColor;
|
||||
color:$headerTextColor;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color:color.adjust($headerBackgroundColor, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
color:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-range-highlight{
|
||||
.tabulator-cell.tabulator-range-row-header{
|
||||
background-color: #3FB449;
|
||||
color: #fff;
|
||||
|
||||
&.tabulator-range-selected{
|
||||
background-color: #163220;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-range-selected{
|
||||
.tabulator-cell.tabulator-range-row-header{
|
||||
background-color: #3FB449;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
border-right-color:#393838;
|
||||
color: #fff;
|
||||
padding:6px;
|
||||
|
||||
&.tabulator-range-row-header{
|
||||
border-right:2px solid #3FB449;
|
||||
}
|
||||
|
||||
&.tabulator-editing{
|
||||
border: 1px solid $themeColor;
|
||||
}
|
||||
|
||||
&.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header) {
|
||||
background-color: #163220;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.tabulator-row-handle{
|
||||
.tabulator-row-handle-box{
|
||||
.tabulator-row-handle-bar{
|
||||
background:$sortArrowActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-row-header{
|
||||
border-right:1px solid $borderColor !important;
|
||||
border-bottom:1px solid #2b2b2b;
|
||||
background:#101010;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input, select, textarea{
|
||||
background-color: #121212;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control{
|
||||
height:14px;
|
||||
width:14px;
|
||||
|
||||
border: 2px solid $themeColor !important;
|
||||
|
||||
|
||||
.tabulator-data-tree-control-collapse{
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -3px;
|
||||
top: 2px;
|
||||
height: 2px;
|
||||
width: 6px;
|
||||
background: $themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-control-expand {
|
||||
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
background: $themeColor;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -3px;
|
||||
top: 3px;
|
||||
height: 2px;
|
||||
width: 8px;
|
||||
background: $themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-data-tree-branch{
|
||||
border-left: 2px solid $themeColor;
|
||||
border-bottom: 2px solid $themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-responsive-collapse{
|
||||
border-top:1px solid #393838;
|
||||
border-bottom:1px solid #393838;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-print-table{
|
||||
border-collapse: collapse;
|
||||
|
||||
.tabulator-print-table-group{
|
||||
border-bottom:2px solid $headerSeparatorColor;
|
||||
background:$headerBackgroundColor;
|
||||
color:$headerTextColor;
|
||||
|
||||
@media (hover:hover) and (pointer:fine){
|
||||
&:hover{
|
||||
background-color:color.adjust($headerBackgroundColor, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
color:$headerSeparatorColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-toggle{
|
||||
border-color:#000;
|
||||
background:$headerBackgroundColor;
|
||||
|
||||
&.tabulator-toggle-on{
|
||||
background:#25682b;
|
||||
}
|
||||
|
||||
.tabulator-toggle-switch{
|
||||
border-color:#000;
|
||||
background:$themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabulator-menu{
|
||||
.tabulator-menu-item{
|
||||
color:$themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-popup, .tabulator-tooltip {
|
||||
color: #000;
|
||||
}
|
||||
Reference in New Issue
Block a user