status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui-v2/app/styles/base/components/pill/layout.scss

24 lines
331 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;
position: relative;
ui: Various CSS amends (#8708) * ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
2020-09-22 17:20:44 +00:00
align-items: center;
white-space: nowrap;
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: Various CSS amends (#8708) * ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
2020-09-22 17:20:44 +00:00
%pill::before {
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
margin-right: 4px;
ui: Various CSS amends (#8708) * ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
2020-09-22 17:20:44 +00:00
font-size: 0.8em;
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: Various CSS amends (#8708) * ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
2020-09-22 17:20:44 +00:00
%pill-200 {
ui: Read-only CRD/Centralized Config Intentions (#8659)
2020-09-18 10:14:06 +00:00
@extend %pill;
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
padding: 0 8px;
}
ui: Various CSS amends (#8708) * ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
2020-09-22 17:20:44 +00:00
%pill-500 {
@extend %pill;
padding: 1px 5px;
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
}
ui: Various CSS amends (#8708) * ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
2020-09-22 17:20:44 +00:00
%pill-700 {
@extend %pill;
padding: 4px 8px;
min-width: 87px;
ui: Redesign Node list page (#8567) * Create ConsulNodeList component * Implement ConsulNodeList and the new Search/Sort to Node List page * Minor styling fix to align the first icons in composite row * Fix-up and add tests for the redesigned Node List page * Add Leader to composite row for Node List page * Add test for node leader
2020-08-28 13:21:03 +00:00
}