5a67cccd2c
Various CSS tweaks/HTML cleanup around upstreams (but impacts other 'rows')
- Prefer {{tooltip}} to <Tooltip>
- Removed some now unnecessary spans
- Stop using an empty class="" for styling purposes.
- Renamed any classes used to identify response properties to follow the exact property name but kebab-cased.
- Fixed up the alignment of things in the rows when used with a 'tiny copy button' (see screengrab) which was minus positioning and knocking things out (pending a proper refactor of our copy button CSS which is from the very very start of things)
79 lines
1.5 KiB
SCSS
79 lines
1.5 KiB
SCSS
@import './skin';
|
|
@import './layout';
|
|
%form h2 {
|
|
@extend %h200;
|
|
}
|
|
/* TODO: This is positioning the element */
|
|
/* probably should be in a special %form class*/
|
|
%form-element {
|
|
@extend %form-row;
|
|
}
|
|
%form-element > span {
|
|
@extend %form-element-label;
|
|
}
|
|
%form button + em,
|
|
%form-element > em {
|
|
@extend %form-element-note;
|
|
}
|
|
%form-element-note > code {
|
|
@extend %inline-code;
|
|
}
|
|
%form-element-error > strong {
|
|
@extend %inline-alert-error;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'],
|
|
%form-element textarea {
|
|
@extend %form-element-text-input;
|
|
}
|
|
%form-element-text-input:hover {
|
|
@extend %form-element-text-input-hover;
|
|
}
|
|
%form-element-text-input:focus {
|
|
@extend %form-element-text-input-focus;
|
|
}
|
|
|
|
/* project level*/
|
|
label span {
|
|
@extend %user-select-none;
|
|
}
|
|
.has-error {
|
|
@extend %form-element-error;
|
|
}
|
|
// TODO: float right here is too specific, this is currently used just for the role/policy selectors
|
|
label.type-dialog {
|
|
@extend %anchor;
|
|
cursor: pointer;
|
|
float: right;
|
|
}
|
|
.type-toggle {
|
|
@extend %form-element, %sliding-toggle;
|
|
}
|
|
.checkbox-group {
|
|
@extend %checkbox-group;
|
|
}
|
|
%main-content form {
|
|
@extend %form;
|
|
}
|
|
span.label {
|
|
@extend %form-element-label;
|
|
}
|
|
%form table,
|
|
%radio-group,
|
|
%checkbox-group {
|
|
@extend %form-row;
|
|
}
|
|
%radio-group label,
|
|
%main-content .type-select,
|
|
%main-content .type-password,
|
|
%main-content .type-text {
|
|
@extend %form-element;
|
|
}
|
|
%app-view-content form:not(.filter-bar) [role='radiogroup'],
|
|
%modal-window [role='radiogroup'] {
|
|
@extend %radio-group;
|
|
}
|
|
%sliding-toggle + .checkbox-group {
|
|
margin-top: -1em;
|
|
}
|