mirror of
https://github.com/status-im/consul.git
synced 2025-01-23 20:19:29 +00:00
3ae91e064c
Adds a 'status' for the filtering/searching in the UI, without this its not super clear that you are filtering a recordset due to the menu selections being hidden once closed. You can also use the pills in this status view to delete individual filters.
134 lines
2.2 KiB
SCSS
134 lines
2.2 KiB
SCSS
body,
|
|
%form-element-text-input {
|
|
@extend %typo-body;
|
|
}
|
|
h1 {
|
|
@extend %h1;
|
|
font-size: $typo-header-100;
|
|
}
|
|
h2 {
|
|
@extend %h2;
|
|
font-size: $typo-header-200;
|
|
}
|
|
h3 {
|
|
@extend %h3;
|
|
font-size: $typo-header-300;
|
|
}
|
|
%radio-card header,
|
|
fieldset > header,
|
|
%main-nav-horizontal-action,
|
|
%definition-table dt,
|
|
%table caption,
|
|
%tbody-th,
|
|
%form-element > span {
|
|
@extend %h4;
|
|
}
|
|
%internal-button,
|
|
%breadcrumbs li > *,
|
|
%tab-nav {
|
|
@extend %h5;
|
|
}
|
|
%healthcheck-output dt,
|
|
%table th,
|
|
%table td strong,
|
|
%sliding-toggle label span {
|
|
@extend %h6;
|
|
}
|
|
|
|
pre code,
|
|
%notice,
|
|
%notice p,
|
|
%flash-message p,
|
|
%filter-bar input,
|
|
%tab-section p {
|
|
@extend %p1;
|
|
}
|
|
%menu-panel dl,
|
|
%empty-state-anchor,
|
|
.type-dialog,
|
|
%table td p,
|
|
%table td,
|
|
%healthcheck-output dl > dd,
|
|
%form-element-label,
|
|
%stats-card header a span,
|
|
%footer,
|
|
%menu-panel-header,
|
|
%app-view h1 span.kind-proxy {
|
|
@extend %p2;
|
|
}
|
|
%empty-state-subheader,
|
|
%empty-state p,
|
|
%button,
|
|
%main-content p,
|
|
%form-element-note,
|
|
%menu-panel-separator,
|
|
%form-element-error > strong {
|
|
@extend %p3;
|
|
}
|
|
|
|
%radio-group label {
|
|
line-height: $typo-lead-200;
|
|
}
|
|
%tab-nav {
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
/*TODO: See if we can collapse these into a */
|
|
/* strong %p3 */
|
|
%form-element-label,
|
|
%button {
|
|
font-weight: $typo-weight-semibold;
|
|
}
|
|
%menu-panel dt,
|
|
%route-card section dt,
|
|
%route-card header:not(.short) dd,
|
|
%splitter-card > header {
|
|
font-weight: $typo-weight-bold;
|
|
}
|
|
%menu-panel-separator {
|
|
font-weight: $typo-weight-medium;
|
|
}
|
|
/**/
|
|
|
|
/* resets */
|
|
%menu-panel dt span,
|
|
%empty-state-subheader,
|
|
%main-content label a[rel*='help'],
|
|
%pill,
|
|
%form-element > strong,
|
|
%tbody-th em,
|
|
%app-view h1 em,
|
|
%route-card header dt {
|
|
font-weight: $typo-weight-normal;
|
|
}
|
|
|
|
%form-element-note,
|
|
%tbody-th em,
|
|
%app-view h1 em {
|
|
font-style: normal;
|
|
}
|
|
/**/
|
|
|
|
/* composite row */
|
|
%composite-row-header {
|
|
font-size: $typo-size-450;
|
|
font-weight: $typo-weight-medium;
|
|
}
|
|
%composite-row-header *:not(button) {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
/**/
|
|
|
|
/* TODO: We have nothing else with a 500 */
|
|
/* either make this the biggest %p or don't use it */
|
|
%app-view h1 em {
|
|
font-size: $typo-size-500;
|
|
}
|
|
/*TODO: This should go in reset, and probably needs select etc adding */
|
|
@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
|
|
input {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|