blob: c2459af1662260be568c503a7b8ebb0ae906e242 [file] [log] [blame]
////
/// @group components/focus
////
/// Focus style for formlayout captions.
@mixin os-caption-focus {
color: $v-focus-color;
border-bottom-color: $v-focus-color;
}
/// Focus style for panel borders.
/// @todo does this work?
@mixin os-panel-focus ($tab){
/* border-color: $v-focus-color; */
/* border-width: 1px; */
/* border: 1px inset green; */
/* box-sizing: border-box; */
& >.v-panel-content:after {
/* @if ($tab == 1) { */
/* box-shadow: inset 0px 0px 1px 1px $v-focus-color; */
/* } */
/* @else { */
box-shadow: inset 0px 0px 2px 2px $v-focus-color;
/* } */
content: '';
display: block;
height: 100%;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 99;
}
}
/// @todo something's missing here...
@mixin test {
/* --- TESTS bzgl. HAS FOCUS ... */
.v-panel-os-has-focus .v-panel-captionwrap {
background-color: yellow !important;
}
.v-panel-os-has-focus .v-panel-caption span {
background-color: yellow !important;
color: red !important;
}
.v-textfield-os-has-focus {
color: red !important;
}
.v-customcomponent-os-has-focus {
color: red !important;
}
.v-filterselect-os-has-focus {
color: red !important;
}
.v-checkbox-os-has-focus {
color: red !important;
}
.v-datefield-os-has-focus {
color: red !important;
}
.v-caption-os-has-focus {
background-color: yellow !important;
color: red !important;
}
.v-button-os-has-focus {
background-color: yellow !important;
color: red !important;
}
}