[data-animation].cbp {
visibility: visible;
}
.cbp-slider-next, .cbp-slider-prev {
&::after { display: none; }
}
.cbp-filter-item {
cursor: pointer;
}
/*————————————
Border Colors
————————————*/
/* Primary Colors */ .g-brd-primary {
&--active.cbp-filter-item-active { border-color: $g-color-primary !important; } // Opacity &-opacity { &-0_3 { &--active.cbp-filter-item-active { border-color: rgba($g-color-primary, .3) !important; } } } // Primary dark &-dark { &-dark-v1 { &--active.cbp-filter-item-active { border-color: $g-color-primary-dark-v1 !important; } } &-dark-v2 { &--active.cbp-filter-item-active { border-color: $g-color-primary-dark-v2 !important; } } &-dark-v3 { &--active.cbp-filter-item-active { border-color: $g-color-primary-dark-v3 !important; } } }
}
/* Black Colors */ .g-brd-black {
&--active.cbp-filter-item-active { border-color: $g-color-black !important; }
}
/* White Colors */ .g-brd-white {
&--active.cbp-filter-item-active { border-color: $g-color-white !important; } // White opacity &-opacity { &-0_1 { &--active.cbp-filter-item-active { border-color: rgba($g-color-white, .1) !important; } } &-0_2 { &--active.cbp-filter-item-active { border-color: rgba($g-color-white, .2) !important; } } &-0_3 { &--active.cbp-filter-item-active { border-color: rgba($g-color-white, .3) !important; } } &-0_4 { &--active.cbp-filter-item-active { border-color: rgba($g-color-white, .4) !important; } } &-0_5 { &--active.cbp-filter-item-active { border-color: rgba($g-color-white, .5) !important; } } &-0_6 { &--active.cbp-filter-item-active { border-color: rgba($g-color-white, .6) !important; } } }
}
/* Gray Colors */ .g-brd-gray {
// Dark Gray &-dark { &-v1 { &--active.cbp-filter-item-active { border-color: $g-color-gray-dark-v1 !important; } } &-v2 { &--active.cbp-filter-item-active { border-color: $g-color-gray-dark-v2 !important; } } &-v3 { &--active.cbp-filter-item-active { border-color: $g-color-gray-dark-v3 !important; } } &-v4 { &--active.cbp-filter-item-active { border-color: $g-color-gray-dark-v4 !important; } } &-v5 { &--active.cbp-filter-item-active { border-color: $g-color-gray-dark-v5 !important; } } } // Light Gray &-light { &-v1 { &--active.cbp-filter-item-active { border-color: $g-color-gray-light-v1 !important; } } &-v2 { &--active.cbp-filter-item-active { border-color: $g-color-gray-light-v2 !important; } } &-v3 { &--active.cbp-filter-item-active { border-color: $g-color-gray-light-v3 !important; } } &-v4 { &--active.cbp-filter-item-active { border-color: $g-color-gray-light-v4 !important; } } &-v5 { &--active.cbp-filter-item-active { border-color: $g-color-gray-light-v5 !important; } } }
}
/* Transparent */ .g-brd-transparent {
&--active.cbp-filter-item-active { border-color: transparent !important; }
}
/*————————————
Background Colors
————————————*/ /* Primary Colors */ .g-bg-primary {
// Active &--active { &.cbp-filter-item-active { background-color: $g-color-primary !important; } }
}
/*————————————
Colors
————————————*/
/* Primary Colors */ .g-color-primary {
&--active.cbp-filter-item-active { color: $g-color-primary !important; }
}
/* Black Colors */ .g-color-black {
&--active.cbp-filter-item-active { color: $g-color-black !important; }
}
/* White Colors */ .g-color-white {
&--active.cbp-filter-item-active { color: $g-color-white !important; }
}
/* Gray Colors */ .g-color-gray {
// Gray Light &-light { &-v1 { &--active.cbp-filter-item-active { color: $g-color-gray-light-v1 !important; } } &-v2 { &--active.cbp-filter-item-active { color: $g-color-gray-light-v2 !important; } } &-v3 { &--active.cbp-filter-item-active { color: $g-color-gray-light-v3 !important; } } &-v4 { &--active.cbp-filter-item-active { color: $g-color-gray-light-v4 !important; } } &-v5 { &--active.cbp-filter-item-active { color: $g-color-gray-light-v5 !important; } } } // Gray Dark &-dark { &-v1 { &--active.cbp-filter-item-active { color: $g-color-gray-dark-v1 !important; } } &-v2 { &--active.cbp-filter-item-active { color: $g-color-gray-dark-v2 !important; } } &-v3 { &--active.cbp-filter-item-active { color: $g-color-gray-dark-v3 !important; } } &-v4 { &--active.cbp-filter-item-active { color: $g-color-gray-dark-v4 !important; } } &-v5 { &--active.cbp-filter-item-active { color: $g-color-gray-dark-v5 !important; } } }
}
// // Button Flat Type //
// e.g. @include u-button-flat ($g-color-primary, $g-color-white, $g-color-black); @mixin u-button-flat ($color-bg-brd, $color-text, $color-text-hover) {
&.cbp-filter-item-active { border-color: lighten($color-bg-brd, 10%); background-color: lighten($color-bg-brd, 10%); } &.cbp-filter-item-active { color: $color-text-hover; } // Test from Oleg &.g-btn-hover-reset { &.cbp-filter-item-active { background-color: $color-bg-brd; border-color: $color-bg-brd; } }
}
// // Button Outline Type //
// e.g. @include u-hover-btn-v1-1 ($g-color-primary, $g-color-white); @mixin u-button-outline ($color-bg-brd, $color-text, $color-text-hover) {
&.cbp-filter-item-active { color: $color-text-hover; background-color: $color-bg-brd; }
}
// // Button Gradient Type //
// e.g. @include u-button-gradient ($g-color-primary, $g-color-red); @mixin u-button-gradient ($btn-left, $btn-right){
&.cbp-filter-item-active { opacity: .9; color: $g-color-white; }
}
// // Button Gradient Outline Type //
// e.g. @include u-button-outline-gradient ($g-color-primary, $g-color-red); @mixin u-button-outline-gradient ($btn-left, $btn-right){
&.cbp-filter-item-active { background: linear-gradient(to right, $btn-left 0%, $btn-right 100%); color: $g-color-white; }
}