blob: 1ca2b02098c5e101433a8ec69c776bc5ea3cab59 [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{
/* border-color: $v-focus-color; */
/* border-width: 1px; */
/* border: 1px inset green; */
/* box-sizing: border-box; */
& >.v-panel-content:after {
box-shadow: inset 0px 0px 8px $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;
}
}