• Home
• org.dominokit
• theme-processor
• 1.0.7
• source code

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

.theme-processor.1.0.7.source-code.color-css.ftl Maven / Gradle / Ivy

/*======================== ${color.name} ========================*/
.bg${color.cssPostFix}{
    color: #FFF;
}
.modal-content.col${color.cssPostFix}:not([class*="col-white"]) .modal-body,
.modal-content.col${color.cssPostFix}:not([class*="col-white"]) .modal-footer .btn-link,
.modal-content.col${color.cssPostFix}:not([class*="col-white"]) .modal-title,
.panel-group .panel.col${color.cssPostFix}:not([class*="col-white"]) .panel-title,
.panel-group.full-body .panel.col${color.cssPostFix}:not([class*="col-white"]) .panel-body,
.bg${color.cssPostFix}.nav-tabs li a{
    color: #fff;
}
.bg${color.cssPostFix},
.d-checkbox.filled-in.checked.col${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col${color.cssPostFix}.checked label:after,
.radio-option.col${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col${color.cssPostFix}:after,
.modal-content.col${color.cssPostFix},
.panel-group .panel.col${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col${color.cssPostFix} .panel-body{
    background-color: ${color.hex};
}

ul.stepper.stepper-col${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col${color.cssPostFix} .step.done .step-title:before{
    background-color: ${color.hex};
}

.fc-col${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex};
}
.col${color.cssPostFix}{
    color: ${color.hex};
}
.vtabs.col${color.cssPostFix} li.active{
    color: ${color.hex};
    border-right: 2px solid ${color.hex};
}
.d-checkbox.checked.col${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex};
    border-bottom: 2px solid ${color.hex};
}
.d-checkbox.filled-in.checked.col${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col${color.cssPostFix}.checked label:after{
    border: 2px solid ${color.hex};
}
.radio-option.col${color.cssPostFix}.checked label:after {
    border-color: ${color.hex};
}
.nav-tabs.col${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex};
}
.panel-group.col${color.cssPostFix} {
    border: 1px solid ${color.hex};
}

.vtabs.col${color.cssPostFix} .flex-item.active a{
    border-right: 2px solid ${color.hex};
}

.slider.thumb-bg${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex};
}

.slider.thumb-bg${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex};
}

.slider.thumb-bg${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex};
}

.slider.slider-bg${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex};
}

.slider.slider-bg${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex};
}

.slider.slider-bg${color.cssPostFix}::-ms-track {
    background-color: ${color.hex};
}

.bg-l-1${color.cssPostFix},
.d-checkbox.filled-in:checked.col-l-1${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-1${color.cssPostFix}.checked label:after,
.radio-option.col-l-1${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-l-1${color.cssPostFix}:after,
.modal-content.col-l-1${color.cssPostFix},
.panel-group .panel.col-l-1${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-l-1${color.cssPostFix} .panel-body {
    background-color: ${color.hex_lighten_1};
}
ul.stepper.stepper-col-l-1${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-l-1${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-l-1${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-l-1${color.cssPostFix} .step.done .step-title:before  {
    background-color: ${color.hex_lighten_1};
}


.fc-col-l-1${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_lighten_1};
}
.col-l-1${color.cssPostFix} {
    color: ${color.hex_lighten_1};
}
.vtabs.col-l-1${color.cssPostFix} li.active{
    color: ${color.hex_lighten_1};
    border-right: 2px solid ${color.hex_lighten_1};
}
.d-checkbox.checked.col-l-1${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_lighten_1};
    border-bottom: 2px solid ${color.hex_lighten_1};
}
.d-checkbox.filled-in:checked.col-l-1${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-1${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-l-1${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_lighten_1};
}
.radio-option.col-l-1${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_lighten_1};
}
.nav-tabs.col-l-1${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_lighten_1};
}
.panel-group.col-l-1${color.cssPostFix} {
    border: 1px solid ${color.hex_lighten_1};
}

.slider.thumb-bg-l-1${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_lighten_1};
}

.slider.thumb-bg-l-1${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_lighten_1};
}

.slider.thumb-bg-l-1${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_lighten_1};
}

.slider.slider-bg-l-1${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_lighten_1};
}

.slider.slider-bg-l-1${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_lighten_1};
}

.slider.slider-bg-l-1${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_lighten_1};
}

.bg-l-2${color.cssPostFix},
.d-checkbox.filled-in:checked.col-l-2${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-2${color.cssPostFix}.checked label:after,
.radio-option.col-l-2${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-l-2${color.cssPostFix}:after,
.modal-content.col-l-2${color.cssPostFix},
.panel-group .panel.col-l-2${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-l-2${color.cssPostFix} .panel-body {
    background-color: ${color.hex_lighten_2};
}
ul.stepper.stepper-col-l-2${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-l-2${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-l-2${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-l-2${color.cssPostFix} .step.done .step-title:before   {
    background-color: ${color.hex_lighten_2};
}

.fc-col-l-2${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_lighten_2};
}
.col-l-2${color.cssPostFix} {
    color: ${color.hex_lighten_2};
}
.vtabs.col-l-2${color.cssPostFix} li.active{
    color: ${color.hex_lighten_2};
    border-right: 2px solid ${color.hex_lighten_2};
}
.d-checkbox.checked.col-l-2${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_lighten_2};
    border-bottom: 2px solid ${color.hex_lighten_2};
}
.d-checkbox.filled-in:checked.col-l-2${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-2${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-l-2${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_lighten_2};
}
.radio-option.col-l-2${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_lighten_2};
}
.nav-tabs.col-l-2${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_lighten_2};
}
.panel-group.col-l-2${color.cssPostFix} {
    border: 1px solid ${color.hex_lighten_2};
}

.slider.thumb-bg-l-2${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_lighten_2};
}

.slider.thumb-bg-l-2${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_lighten_2};
}

.slider.thumb-bg-l-2${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_lighten_2};
}

.slider.slider-bg-l-2${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_lighten_2};
}

.slider.slider-bg-l-2${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_lighten_2};
}

.slider.slider-bg-l-2${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_lighten_2};
}

.bg-l-3${color.cssPostFix},
.d-checkbox.filled-in:checked.col-l-3${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-3${color.cssPostFix}.checked label:after,
.radio-option.with-gap.col-l-3${color.cssPostFix}.checked label:after,
.radio-option.col-l-3${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-l-3${color.cssPostFix}:after,
.modal-content.col-l-3${color.cssPostFix},
.panel-group .panel.col-l-3${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-l-3${color.cssPostFix} .panel-body {
    background-color: ${color.hex_lighten_3};
}

ul.stepper.stepper-col-l-3${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-l-3${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-l-3${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-l-3${color.cssPostFix} .step.done .step-title:before   {
    background-color: ${color.hex_lighten_3};
}

.fc-col-l-3${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_lighten_3};
}

.col-l-3${color.cssPostFix} {
    color: ${color.hex_lighten_3};
}
.vtabs.col-l-3${color.cssPostFix} li.active{
    color: ${color.hex_lighten_3};
    border-right: 2px solid ${color.hex_lighten_3};
}
.d-checkbox.checked.col-l-3${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_lighten_3};
    border-bottom: 2px solid ${color.hex_lighten_3};
}
.d-checkbox.filled-in:checked.col-l-3${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-3${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-l-3${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_lighten_3};
}
.radio-option.col-l-3${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_lighten_3};
}
.nav-tabs.col-l-3${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_lighten_3};
}
.panel-group.col-l-3${color.cssPostFix} {
    border: 1px solid ${color.hex_lighten_3};
}

.slider.thumb-bg-l-3${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_lighten_3};
}

.slider.thumb-bg-l-3${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_lighten_3};
}

.slider.thumb-bg-l-3${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_lighten_3};
}

.slider.slider-bg-l-3${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_lighten_3};
}

.slider.slider-bg-l-3${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_lighten_3};
}

.slider.slider-bg-l-3${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_lighten_3};
}

.bg-l-4${color.cssPostFix},
.d-checkbox.filled-in:checked.col-l-4${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-4${color.cssPostFix}.checked label:after,
.radio-option.col-l-4${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-l-4${color.cssPostFix}:after,
.modal-content.col-l-4${color.cssPostFix},
.panel-group .panel.col-l-4${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-l-4${color.cssPostFix} .panel-body {
    background-color: ${color.hex_lighten_4};
}

ul.stepper.stepper-col-l-4${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-l-4${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-l-4${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-l-4${color.cssPostFix} .step.done .step-title:before  {
    background-color: ${color.hex_lighten_4};
}

.fc-col-l-4${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_lighten_4};
}
.col-l-4${color.cssPostFix}{
    color: ${color.hex_lighten_4};
}
.vtabs.col-l-4${color.cssPostFix} li.active{
    color: ${color.hex_lighten_4};
    border-right: 2px solid ${color.hex_lighten_4};
}
.d-checkbox.checked.col-l-4${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_lighten_4};
    border-bottom: 2px solid ${color.hex_lighten_4};
}
.d-checkbox.filled-in.checked.col-l-4${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-4${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-l-4${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_lighten_4};
}
.radio-option.col-l-4${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_lighten_4};
}
.nav-tabs.col-l-4${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_lighten_4};
}
.panel-group.col-l-4${color.cssPostFix} {
    border: 1px solid ${color.hex_lighten_4};
}

.slider.thumb-bg-l-4${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_lighten_4};
}

.slider.thumb-bg-l-4${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_lighten_4};
}

.slider.thumb-bg-l-4${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_lighten_4};
}

.slider.slider-bg-l-4${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_lighten_4};
}

.slider.slider-bg-l-4${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_lighten_4};
}

.slider.slider-bg-l-4${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_lighten_4};
}

.bg-l-5${color.cssPostFix} ,
.d-checkbox.filled-in.checked.col-l-5${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-5${color.cssPostFix}.checked label:after,
.radio-option.col-l-5${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-l-5${color.cssPostFix}:after,
.modal-content.col-l-5${color.cssPostFix},
.panel-group .panel.col-l-5${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-l-5${color.cssPostFix} .panel-body {
    background-color: ${color.hex_lighten_5};
}

ul.stepper.stepper-col-l-5${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-l-5${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-l-5${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-l-5${color.cssPostFix} .step.done .step-title:before   {
    background-color: ${color.hex_lighten_5};
}

.fc-col-l-5${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_lighten_5};
}
.col-l-5${color.cssPostFix} {
    color: ${color.hex_lighten_5};
}
.vtabs.col-l-5${color.cssPostFix} li.active{
    color: ${color.hex_lighten_5};
    border-right: 2px solid ${color.hex_lighten_5};
}
.d-checkbox.checked.col-l-5${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_lighten_5};
    border-bottom: 2px solid ${color.hex_lighten_5};
}
.d-checkbox.filled-in.checked.col-l-5${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-l-5${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-l-5${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_lighten_5};
}
.radio-option.col-l-5${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_lighten_5};
}
.nav-tabs.col-l-5${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_lighten_5};
}
.panel-group.col-l-5${color.cssPostFix} {
    border: 1px solid ${color.hex_lighten_5};
}

.slider.thumb-bg-l-5${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_lighten_5};
}

.slider.thumb-bg-l-5${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_lighten_5};
}

.slider.thumb-bg-l-5${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_lighten_5};
}

.slider.slider-bg-l-5${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_lighten_5};
}

.slider.slider-bg-l-5${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_lighten_5};
}

.slider.slider-bg-l-5${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_lighten_5};
}

.bg-d-1${color.cssPostFix},
.d-checkbox.filled-in.checked.col-d-1${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-1${color.cssPostFix}.checked label:after,
.radio-option.col-d-1${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-d-1${color.cssPostFix}:after,
.modal-content.col-d-1${color.cssPostFix},
.panel-group .panel.col-d-1${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-d-1${color.cssPostFix} .panel-body {
    background-color: ${color.hex_darken_1};
}

ul.stepper.stepper-col-d-1${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-d-1${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-d-1${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-d-1${color.cssPostFix} .step.done .step-title:before   {
    background-color: ${color.hex_darken_1};
}

.fc-col-d-1${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_darken_1};
}
.col-d-1${color.cssPostFix} {
    color: ${color.hex_darken_1};
}
.vtabs.col-d-1${color.cssPostFix} li.active{
    color: ${color.hex_darken_1};
    border-right: 2px solid ${color.hex_darken_1};
}
.d-checkbox.checked.col-d-1${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_darken_1};
    border-bottom: 2px solid ${color.hex_darken_1};
}
.d-checkbox.filled-in:checked.col-d-1${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-1${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-d-1${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_darken_1};
}
.radio-option.col-d-1${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_darken_1};
}
.nav-tabs.col-d-1${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_darken_1};
}
.panel-group.col-d-1${color.cssPostFix} {
    border: 1px solid ${color.hex_darken_1};
}

.slider.thumb-bg-d-1${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_darken_1};
}

.slider.thumb-bg-d-1${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_darken_1};
}

.slider.thumb-bg-d-1${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_darken_1};
}

.slider.slider-bg-d-1${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_darken_1};
}

.slider.slider-bg-d-1${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_darken_1};
}

.slider.slider-bg-d-1${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_darken_1};
}

.bg-d-2${color.cssPostFix},
.d-checkbox.filled-in:checked.col-d-2${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-2${color.cssPostFix}.checked label:after,
.radio-option.col-d-2${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-d-2${color.cssPostFix}:after,
.modal-content.col-d-2${color.cssPostFix},
.panel-group .panel.col-d-2${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-d-2${color.cssPostFix} .panel-body {
    background-color: ${color.hex_darken_2};
}

ul.stepper.stepper-col-d-2${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-d-2${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-d-2${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-d-2${color.cssPostFix} .step.done .step-title:before  {
    background-color: ${color.hex_darken_2};
}

.fc-col-d-2${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_darken_2};
}
.col-d-2${color.cssPostFix} {
    color: ${color.hex_darken_2};
}
.vtabs.col-d-2${color.cssPostFix} li.active{
    color: ${color.hex_darken_2};
    border-right: 2px solid ${color.hex_darken_2};
}
.d-checkbox.checked.col-d-2${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_darken_2};
    border-bottom: 2px solid ${color.hex_darken_2};
}
.d-checkbox.filled-in.checked.col-d-2${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-2${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-d-2${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_darken_2};
}
.radio-option.col-d-2${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_darken_2};
}
.nav-tabs.col-d-2${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_darken_2};
}
.panel-group.col-d-2${color.cssPostFix} {
    border: 1px solid ${color.hex_darken_2};
}

.slider.thumb-bg-d-2${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_darken_2};
}

.slider.thumb-bg-d-2${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_darken_2};
}

.slider.thumb-bg-d-2${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_darken_2};
}

.slider.slider-bg-d-2${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_darken_2};
}

.slider.slider-bg-d-2${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_darken_2};
}

.slider.slider-bg-d-2${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_darken_2};
}

.bg-d-3${color.cssPostFix},
.d-checkbox.filled-in.checked.col-d-3${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-3${color.cssPostFix}.checked label:after,
.radio-option.col-d-2${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-d-3${color.cssPostFix}:after,
.modal-content.col-d-3${color.cssPostFix},
.panel-group .panel.col-d-3${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-d-3${color.cssPostFix} .panel-body {
    background-color: ${color.hex_darken_3};
}

ul.stepper.stepper-col-d-3${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-d-3${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-d-3${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-d-3${color.cssPostFix} .step.done .step-title:before  {
    background-color: ${color.hex_darken_3};
}

.fc-col-d-3${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_darken_3};
}
.col-d-3${color.cssPostFix}{
    color: ${color.hex_darken_3};
}
.vtabs.col-d-3${color.cssPostFix} li.active{
    color: ${color.hex_darken_3};
    border-right: 2px solid ${color.hex_darken_3};
}
.d-checkbox.checked.col-d-3${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_darken_3};
    border-bottom: 2px solid ${color.hex_darken_3};
}
.d-checkbox.filled-in.checked.col-d-3${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-3${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-d-3${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_darken_3};
}
.radio-option.col-d-3${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_darken_3};
}
.nav-tabs.col-d-3${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_darken_3};
}
.panel-group.col-d-3${color.cssPostFix} {
    border: 1px solid ${color.hex_darken_3};
}

.slider.thumb-bg-d-3${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_darken_3};
}

.slider.thumb-bg-d-3${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_darken_3};
}

.slider.thumb-bg-d-3${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_darken_3};
}

.slider.slider-bg-d-3${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_darken_3};
}

.slider.slider-bg-d-3${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_darken_3};
}

.slider.slider-bg-d-3${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_darken_3};
}

.bg-d-4${color.cssPostFix},
.d-checkbox.filled-in.checked.col-d-4${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-4${color.cssPostFix}.checked label:after,
.radio-option.col-d-4${color.cssPostFix}.checked label:after,
.switch label input[type=checkbox]:checked + .lever.col-d-4${color.cssPostFix}:after,
.modal-content.col-d-4${color.cssPostFix},
.panel-group .panel.col-d-4${color.cssPostFix} .panel-title,
.panel-group.full-body .panel.col-d-4${color.cssPostFix} .panel-body {
    background-color: ${color.hex_darken_4};
}

ul.stepper.stepper-col-d-4${color.cssPostFix} .step.active:before,
ul.stepper.stepper-col-d-4${color.cssPostFix} .step.done:before,
ul.stepper.horizontal.stepper-col-d-4${color.cssPostFix} .step.active .step-title:before,
ul.stepper.horizontal.stepper-col-d-4${color.cssPostFix} .step.done .step-title:before  {
    background-color: ${color.hex_darken_4};
}

.fc-col-d-4${color.cssPostFix}:not([class*="lever"]) {
    border-bottom: 1px solid ${color.hex_darken_4};
}
.col-d-4${color.cssPostFix}{
    color: ${color.hex_darken_4};
}
.vtabs.col-d-4${color.cssPostFix} li.active{
    color: ${color.hex_darken_4};
    border-right: 2px solid ${color.hex_darken_4};
}
.d-checkbox.checked.col-d-4${color.cssPostFix} .field-label:before {
    border-right: 2px solid ${color.hex_darken_4};
    border-bottom: 2px solid ${color.hex_darken_4};
}
.d-checkbox.filled-in.checked.col-d-4${color.cssPostFix} .field-label:after,
.radio-option.with-gap.col-d-4${color.cssPostFix}.checked label:before,
.radio-option.with-gap.col-d-4${color.cssPostFix}.checked label:after {
    border: 2px solid ${color.hex_darken_4};
}
.radio-option.col-d-4${color.cssPostFix}.checked label:after {
    border-color: ${color.hex_darken_4};
}
.nav-tabs.col-d-4${color.cssPostFix} > li > a:before{
    border-bottom: 2px solid ${color.hex_darken_4};
}
.panel-group.col-d-4${color.cssPostFix} {
    border: 1px solid ${color.hex_darken_4};
}

.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever[class*="col${color.cssPostFix}"]:active:after {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(${color.rgba_1});
}

.switch label input[type=checkbox]:checked + .lever[class*="col${color.cssPostFix}"] {
    background-color: rgba(${color.rgba_2});
}

.slider.thumb-bg-d-4${color.cssPostFix}::-webkit-slider-thumb {
    background-color: ${color.hex_darken_4};
}

.slider.thumb-bg-d-4${color.cssPostFix}::-moz-range-thumb {
    background-color: ${color.hex_darken_4};
}

.slider.thumb-bg-d-4${color.cssPostFix}::-ms-thumb {
    background-color: ${color.hex_darken_4};
}

.slider.slider-bg-d-4${color.cssPostFix}::-webkit-slider-runnable-track {
    background-color: ${color.hex_darken_4};
}

.slider.slider-bg-d-4${color.cssPostFix}::-moz-range-track {
    background-color: ${color.hex_darken_4};
}

.slider.slider-bg-d-4${color.cssPostFix}::-ms-track {
    background-color: ${color.hex_darken_4};
}