| //// |
| /// @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; |
| } |
| } |