![]() Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/mautic.corals.io/app/bundles/CoreBundle/Assets/css/app/less/ |
// // Mixins // -------------------------------------------------- // Background color // ------------------------ .bg-color(@bg-color; @color) { background-color: @bg-color !important; border-color: darken(@bg-color, 3%) !important; color: @color !important; // lighten the base bg-color &.bg-light-xs, .bg-light-xs { background-color: lighten(@bg-color, 1%) !important; border-color: darken(@bg-color, 3%) !important; } &.bg-light-sm, .bg-light-sm { background-color: lighten(@bg-color, 3%) !important; border-color: darken(@bg-color, 3%) !important; } &.bg-light-md, .bg-light-md { background-color: lighten(@bg-color, 5%) !important; border-color: darken(@bg-color, 3%) !important; } &.bg-light-lg, .bg-light-lg { background-color: lighten(@bg-color, 7%) !important; border-color: darken(@bg-color, 3%) !important; } // darken the base bg-color &.bg-dark-xs, .bg-dark-xs { background-color: darken(@bg-color, 1%) !important; border-color: darken(@bg-color, 3%) !important; } &.bg-dark-sm, .bg-dark-sm { background-color: darken(@bg-color, 3%) !important; border-color: darken(@bg-color, 6%) !important; } &.bg-dark-md, .bg-dark-md { background-color: darken(@bg-color, 5%) !important; border-color: darken(@bg-color, 9%) !important; } &.bg-dark-lg, .bg-dark-lg { background-color: darken(@bg-color, 7%) !important; border-color: darken(@bg-color, 12%) !important; } } // Text emphasis // ------------------------ .text-emphasis-variants(@color) { color: @color; a&:hover { color: darken(@color, 10%); } &.light-xs { color: lighten(@color, 15%); a&:hover { color: lighten(@color, 10%); } } &.dark-xs { color: darken(@color, 15%); a&:hover { color: darken(@color, 20%); } } &.dark-sm { color: darken(@color, 30%); a&:hover { color: darken(@color, 35%); } } &.dark-md { color: darken(@color, 45%); a&:hover { color: darken(@color, 50%); } } &.dark-lg { color: darken(@color, 60%); a&:hover { color: darken(@color, 65%); } } } // Switch size // ------------------------ .switch-size(@height) { input { ~ .text { line-height: @height; } ~ .switch { font-size: @height; height: @height; width: (@height * 1.6); border-radius: @height; &:after { border-radius: @height; height: @height; width: @height; } } } } // Switch color // ------------------------ .switch-color(@color) { input { &:checked { + .switch { border-color: @color; box-shadow: inset 0 0 0 0.6em @color; &:after { border-color: @color; } } } } } // Custom checkbox & radio color // ------------------------ .checkbox-radio-color(@color) { label { input { + span { &:after { background-color: @color; } } // checked state &:checked { + span { border: 1px solid @color; } } } // hover state &:hover { input { + span { border: 1px solid rgba(0,0,0,0.3); } &:checked { + span { border: 1px solid @color; } } } } } } // sidebar nav variant // ------------------------ .nav-sidebar-variants(@bgcolor) { > li { // nav-group line &.nav-group { &:after { content: ''; position: absolute; right: 0; left: 50px; bottom: 0; border-bottom: 1px solid lighten(@bgcolor, 1.8%); } } > a { color: fade(contrast(@bgcolor), 50%); &:hover, &:focus { background-color: @bgcolor; color: fade(contrast(@bgcolor), 75%); } } // Active and open state &.active, &.open { > a { background-color: @bgcolor; color: fade(contrast(@bgcolor), 75%); } // `nav-submenu` > .nav-submenu { background-color: darken(@bgcolor, 3%); } } // nav-submenu style > .nav-submenu { background-color: darken(@bgcolor, 1.5%); &:after { background-color: lighten(@bgcolor, 2%); } > li { // the dot &:after { background-color: lighten(@bgcolor, 2.5%); box-shadow: 0 0 0 2px darken(@bgcolor, 1.5%); } > a { color: fade(contrast(@bgcolor), 50%); &:hover, &:focus { color: fade(contrast(@bgcolor), 80%); } } // Active and open state &.active, &.open { > a { color: fade(contrast(@bgcolor), 80%); } } } } } // nav-heading .nav-heading { color: fade(contrast(@bgcolor), 25%); } // nav-divider .nav-divider { background-color: fade(contrast(@bgcolor), 6%); } } // loading bar variant // ------------------------ .loading-bar-variant(@bgcolor) { background-color: lighten(@bgcolor, 45%); &:after, &:before { background-color: @bgcolor; } }