/*————————————
Focus state border
————————————*/
/* Primary Colors */ .g-brd-primary {
&--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-primary !important; }
}
/* Black Colors */ .g-brd-black {
&--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-black !important; }
}
/* White */ .g-brd-white {
&--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-white !important; }
}
/* Gray Colors */ .g-brd-gray {
// Dark Gray &-dark { &-v1 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-dark-v1 !important; } } &-v2 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-dark-v2 !important; } } &-v3 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-dark-v3 !important; } } &-v4 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-dark-v4 !important; } } &-v5 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-dark-v5 !important; } } // Light Gray &-light { &-v1 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-light-v1 !important; } } &-v2 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-light-v2 !important; } } &-v3 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-light-v3 !important; } } &-v4 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-light-v4 !important; } } &-v5 { &--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-gray-light-v5 !important; } } } }
}
/* Transparent */ .g-brd-transparent {
&--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: transparent !important; }
}
/* Color Red */ .g-brd-red {
&--focus:focus, &--focus.g-state-focus *, &--focus.g-state-focus *:focus { border-color: $g-color-red !important; }
}