luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity
open-consul/ui-v2/app/styles/base/components/pill/layout.scss

34 lines
559 B
SCSS
Raw Normal View History

ui: CSS Components Migration (#5913) Migrate roughly half of the base components into base Adds a target for easily formatting CSS Further CSS amends/migration (#5921) 1. tooltips within tables where a slightly bit troublesome due to a mix of `inline-flex`, `overflow` and the need for truncation. This refineds tooltips a slight bit more to work 'everywhere'. 2. We also move tooltip to use the correct color and min-width from structure, but we overwrite the min-width here until we get confirmation on widths/alignment of text within a tooltip. 3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings 4. Now we inline-flex our table cells, it means it is impossible to truncate text without wrapping it in another element. This wraps all Description like text in `<p>` tags. Generally the first column of text is already wrapped in an `<a>` tag. Other items such as consul tags and policy names etc get 'cutoff' rather than truncated. 5. We are now using all the icons from `@hashicorp/structure-icons`
2019-06-14 17:27:37 +00:00
%pill {
display: inline-flex;
align-items: center;
padding: 1px 5px;
position: relative;
}
%pill button {
padding: 0;
ui: Use base fonts throughout the app (#6881) We've had a set of %placeholders in our base styles for quite a while but not butten the bullet to use them. This begins to use them. We had to make a small amount of tweaks to base whilst doing this, but its as we'd prefer there to be as few font placeholders as possible. We might/should be able to reduce these further at somepoint, or potentially rename them. We currently have six header fonts (or 4 header fonts/2 strong body fonts) and 3 body fonts. We also noticed an empty CSS file and deleted that while we were here. We also noticed that the bottom border of structure tabs was a pixel larger than ours so we tweaked that here also.
2019-12-12 09:25:39 +00:00
width: 9px;
height: 9px;
margin-right: 4px;
ui: {{phrase-editor}} amends (#5991) 1. Re-focus the input element on phrase removal 2. Move all actions to `actions:` 3. Move to a form looking `value` rather than `items` 4. Move placeholder functionalit yinto the component 5. Force DDAU instead of two way binding with `slice` and `onchange` 6. Begin to deprecate the `searchable` interface
2019-06-21 10:38:14 +00:00
font-size: 0;
ui: CSS Components Migration (#5913) Migrate roughly half of the base components into base Adds a target for easily formatting CSS Further CSS amends/migration (#5921) 1. tooltips within tables where a slightly bit troublesome due to a mix of `inline-flex`, `overflow` and the need for truncation. This refineds tooltips a slight bit more to work 'everywhere'. 2. We also move tooltip to use the correct color and min-width from structure, but we overwrite the min-width here until we get confirmation on widths/alignment of text within a tooltip. 3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings 4. Now we inline-flex our table cells, it means it is impossible to truncate text without wrapping it in another element. This wraps all Description like text in `<p>` tags. Generally the first column of text is already wrapped in an `<a>` tag. Other items such as consul tags and policy names etc get 'cutoff' rather than truncated. 5. We are now using all the icons from `@hashicorp/structure-icons`
2019-06-14 17:27:37 +00:00
}
ui: Redesign - Service List page with Gateways (#7781) * Return all services except Proxies * Add Gateway icon to the codebase * Create and implement ConsulExternalSource component * Fix tests to work with new mock data and add a Gateway test * Update consul-api-double to 2.14.3
2020-05-05 16:29:51 +00:00
%reduced-pill {
background-color: $gray-100;
padding: 0 8px;
border-radius: $decor-radius-100;
height: 18px;
line-height: 0.7rem;
}
%reduced-pill > span {
font-size: 14px;
font-weight: normal;
position: relative;
color: $gray-500;
}
%reduced-pill::before {
width: 14px;
height: 14px;
margin-right: 2px;
position: relative;
top: 2px;
}