open-consul/ui-v2/app/styles/components/form-elements.scss
John Cowen a9bc935391 ui: Misc CSS amends, mainly changes to empty-state (#7743)
1. empty-state amends to bring it closer to what is in Structure and
optionally support icons.
2. You may have a button that semantically should be a button (it
performs and action not a link), but you want it to look like an anchor,
this means it shouldn't have an outline when :active.
3. Adds `label.type-password` as a `%form-element`
4. Adds an error state to our `%notice` CSS component
2020-05-12 17:14:39 +00:00

44 lines
1,012 B
SCSS

/*TODO: This remains a mix of form-elements */
/* form-elements should probably be a collection of these */
@import '../base/components/inline-alert/index';
@import '../base/components/form-elements/index';
@import '../base/components/sliding-toggle/index';
@import '../base/components/radio-group/index';
@import '../base/components/checkbox-group/index';
label span {
@extend %user-select-none;
}
.has-error {
@extend %form-element-error;
}
%main-content .type-password,
%main-content .type-text {
@extend %form-element;
}
.type-toggle {
@extend %form-element, %sliding-toggle;
}
%form-element,
%radio-group,
%checkbox-group,
form table,
%app-view-content form dl {
@extend %form-row;
}
%app-view-content form:not(.filter-bar) [role='radiogroup'],
%modal-window [role='radiogroup'] {
@extend %radio-group;
}
%radio-group label {
@extend %form-element;
}
.checkbox-group {
@extend %checkbox-group;
}
fieldset > p {
color: $gray-400;
}
%sliding-toggle + .checkbox-group {
margin-top: -1em;
}