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
38 lines
887 B
SCSS
38 lines
887 B
SCSS
td a.is-management::after {
|
|
@extend %with-star-fill-mask, %as-pseudo;
|
|
background-color: var(--swatch-brand-600, $black);
|
|
height: 16px;
|
|
top: 2px;
|
|
padding-left: 32px;
|
|
}
|
|
@media #{$--horizontal-tabs} {
|
|
.template-policy.template-list main header .actions,
|
|
.template-token.template-list main header .actions {
|
|
position: relative;
|
|
top: 42px;
|
|
}
|
|
}
|
|
|
|
@media #{$--lt-wide-form} {
|
|
html.template-acl.template-edit main header .actions {
|
|
float: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1em;
|
|
}
|
|
html.template-acl.template-edit main header .actions .with-feedback {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
html.template-acl.template-edit main header .actions .with-confirmation {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
[name='role[state]'],
|
|
[name='role[state]'] + * {
|
|
display: none;
|
|
}
|
|
[name='role[state]']:checked + * {
|
|
display: block;
|
|
}
|