d1cbc3f032
* ui: Adds a tab selection animation to our app tabs 1. Replace all mentions of `magenta` with a themeable CSS property. 2. Add an easy way to inline style DOM nodes 3. Use CSS properties to add tab animation * Fix up rendering test * Avoid DOM noodling as much as possible
31 lines
618 B
SCSS
31 lines
618 B
SCSS
@import './skin';
|
|
@import './layout';
|
|
%with-animated-tab-selection ul::after,
|
|
%tab-button-selected {
|
|
@extend %frame-brand-300;
|
|
}
|
|
%tab-nav li a {
|
|
@extend %tab-button;
|
|
}
|
|
%tab-nav li:not(.selected) a:hover,
|
|
%tab-nav li:not(.selected) a:focus {
|
|
@extend %tab-button-intent;
|
|
}
|
|
%tab-nav li:not(.selected) a:active {
|
|
@extend %tab-button-active;
|
|
}
|
|
/* TODO: need to add an empty class here */
|
|
%tab-nav .selected a {
|
|
@extend %tab-button-selected;
|
|
}
|
|
%display-state,
|
|
%display-state + * {
|
|
display: none;
|
|
}
|
|
%display-state:checked + * {
|
|
display: block;
|
|
}
|
|
%tab-section > input[type='radio'] {
|
|
@extend %display-state;
|
|
}
|