2021-04-16 11:13:06 +00:00
|
|
|
@import './app';
|
2021-11-23 18:32:11 +00:00
|
|
|
@import './base/icons/debug';
|
2021-03-08 12:22:01 +00:00
|
|
|
@import 'prism-coldark-dark';
|
2021-04-16 11:13:06 +00:00
|
|
|
|
|
|
|
|
// temporary component debugging setup
|
|
|
|
|
@import 'consul-ui/components/main-nav-vertical/debug';
|
2021-06-21 10:40:14 +00:00
|
|
|
@import 'consul-ui/components/badge/debug';
|
|
|
|
|
@import 'consul-ui/components/csv-list/debug';
|
|
|
|
|
@import 'consul-ui/components/horizontal-kv-list/debug';
|
|
|
|
|
@import 'consul-ui/components/icon-definition/debug';
|
2021-06-22 17:56:17 +00:00
|
|
|
@import 'consul-ui/components/inline-alert/debug';
|
2021-07-06 15:57:20 +00:00
|
|
|
@import 'consul-ui/components/definition-table/debug';
|
2021-04-16 11:13:06 +00:00
|
|
|
|
2021-11-23 18:32:11 +00:00
|
|
|
%debug-grid {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
%debug-grid li {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
%debug-grid figure {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 140px;
|
|
|
|
|
}
|
|
|
|
|
%debug-grid figcaption {
|
|
|
|
|
@extend %p3;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
[id^="docfy-demo-preview-color"] ul,
|
|
|
|
|
[id^="docfy-demo-preview-typography"] ul,
|
|
|
|
|
[id^="docfy-demo-preview-icons"] ul {
|
|
|
|
|
@extend %debug-grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[id^="docfy-demo-preview-typography"] figure,
|
|
|
|
|
[id^="docfy-demo-preview-icons"] figure {
|
|
|
|
|
border: var(--decor-border-100);
|
|
|
|
|
border-color: rgb(var(--tone-gray-300));
|
|
|
|
|
height: 80px;
|
|
|
|
|
}
|
|
|
|
|
[id^="docfy-demo-preview-icons"] figure::before {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[id^="docfy-demo-preview-color"] figure {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
#docfy-demo-preview-color0 {
|
|
|
|
|
@extend %theme-light;
|
|
|
|
|
background-color: rgb(var(--white));
|
|
|
|
|
}
|
|
|
|
|
#docfy-demo-preview-color1 {
|
|
|
|
|
background-color: rgb(var(--black));
|
|
|
|
|
@extend %theme-dark;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[id^="docfy-demo-preview-typography"] {
|
|
|
|
|
.debug-h000 {
|
|
|
|
|
@extend %h000;
|
|
|
|
|
}
|
|
|
|
|
.debug-h100 {
|
|
|
|
|
@extend %h100;
|
|
|
|
|
}
|
|
|
|
|
.debug-h200 {
|
|
|
|
|
@extend %h200;
|
|
|
|
|
}
|
|
|
|
|
.debug-h300 {
|
|
|
|
|
@extend %h300;
|
|
|
|
|
}
|
|
|
|
|
.debug-h400 {
|
|
|
|
|
@extend %h400;
|
|
|
|
|
}
|
|
|
|
|
.debug-h500 {
|
|
|
|
|
@extend %h500;
|
|
|
|
|
}
|
|
|
|
|
.debug-h600 {
|
|
|
|
|
@extend %h600;
|
|
|
|
|
}
|
|
|
|
|
.debug-p {
|
|
|
|
|
@extend %p;
|
|
|
|
|
}
|
|
|
|
|
.debug-p1 {
|
|
|
|
|
@extend %p1;
|
|
|
|
|
}
|
|
|
|
|
.debug-p2 {
|
|
|
|
|
@extend %p2;
|
|
|
|
|
}
|
|
|
|
|
.debug-p3 {
|
|
|
|
|
@extend %p3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-07 11:23:29 +00:00
|
|
|
html.is-debug body > .brand-loader {
|
2021-05-03 15:19:09 +00:00
|
|
|
display: none !important;
|
|
|
|
|
}
|
ui: Adds initial CRUD for partitions (#11188)
* Add `is` and `test` helpers in a similar vein to `can`
Adds 2 new helpers in a similar vein to ember-cans can:
- `is` allows you to use vocab/phrases such as (is "something model") which calls isSomething() on the models ability.
- `test` allows you to use vocab/phrases such as (test "is something model") or (test "can something model")which calls isSomething() / canSomething() on the models ability. Mostly using the is helper and the can helper. It's basically the is/can helper combined.
* Adds TextInput component + related modifiers/helpers/machines/services (#11189)
Adds a few new components/modifiers/helpers to aid building forms.
- state-chart helper, used in lieu of a more generic approach for requiring our statecharts.
- A few modifications to our existing disabled modifier.
- A new 'validation' modifier, a super small form validation approach built to make use of state charts (optionally). Eventually we should be able to replace our current validation approach (ember-changeset-validations + extra deps) with this.
- A new TextInput component, which is the first of our new components specifically to make it easy to build forms with validations. This is still a WIP, I left some comments in pointing out where this one would be progressed, but as we don't need the planned functionality yet, I left it where it was. All of this will be fleshed out more at a later date.
Documentation is included for all of ^
* ui: Adds initial CRUD for partitions (#11190)
Adds basic CRUD support for partitions. Engineering-wise probably the biggest takeaway here is that we needed to write very little javascript code to add this entire feature, and the little javascript we did need to write was very straightforwards. Everything is pretty much just HTML. Another note to make is that both ember-changeset and ember-data (model layer things) are now completely abstracted away from the view layer of the application.
New components:
- Consul::Partition::Form
- Consul::Partition::List
- Consul::Partition::Notifications
- Consul::Partition::SearchBar
- Consul::Partition::Selector
See additional documentation here for more details
New Route templates:
- index.hbs partition listing/searching/filtering
- edit.hbs partition editing and creation
Additionally:
There is some additional debug work here for better observability and to prevent any errors regarding our href-to usage when a dc is not available in our documentation site.
Our softDelete functionality has been DRYed out a little to be used across two repos.
isLinkable was removed from our ListCollection component for lists like upstream and service listing, and instead use our new is helper from within the ListCollection, meaning we've added a few more lighterweight templateOnly components.
* ui: Exclude all debug-like files from the build (#11211)
This PR adds **/*-debug.* to our test/prod excluded files (realised I needed to add test-support.js also so added that here as its more or less the same thing). Conditionally juggling ES6 static imports (specifically debug ones) for this was also getting a little hairy, so I moved it all to use the same approach as our conditional routes. All in all it brings the vendor build back down to ~430kb gzipped.
2021-10-08 15:29:30 +00:00
|
|
|
html.is-debug [class*='partition-'] {
|
|
|
|
|
display: block !important;
|
|
|
|
|
}
|
|
|
|
|
html:not(.with-data-source) .data-source-debug {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2021-09-15 18:50:11 +00:00
|
|
|
html:not(.with-data-source) .data-source-debug {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
ui: Adds initial CRUD for partitions (#11188)
* Add `is` and `test` helpers in a similar vein to `can`
Adds 2 new helpers in a similar vein to ember-cans can:
- `is` allows you to use vocab/phrases such as (is "something model") which calls isSomething() on the models ability.
- `test` allows you to use vocab/phrases such as (test "is something model") or (test "can something model")which calls isSomething() / canSomething() on the models ability. Mostly using the is helper and the can helper. It's basically the is/can helper combined.
* Adds TextInput component + related modifiers/helpers/machines/services (#11189)
Adds a few new components/modifiers/helpers to aid building forms.
- state-chart helper, used in lieu of a more generic approach for requiring our statecharts.
- A few modifications to our existing disabled modifier.
- A new 'validation' modifier, a super small form validation approach built to make use of state charts (optionally). Eventually we should be able to replace our current validation approach (ember-changeset-validations + extra deps) with this.
- A new TextInput component, which is the first of our new components specifically to make it easy to build forms with validations. This is still a WIP, I left some comments in pointing out where this one would be progressed, but as we don't need the planned functionality yet, I left it where it was. All of this will be fleshed out more at a later date.
Documentation is included for all of ^
* ui: Adds initial CRUD for partitions (#11190)
Adds basic CRUD support for partitions. Engineering-wise probably the biggest takeaway here is that we needed to write very little javascript code to add this entire feature, and the little javascript we did need to write was very straightforwards. Everything is pretty much just HTML. Another note to make is that both ember-changeset and ember-data (model layer things) are now completely abstracted away from the view layer of the application.
New components:
- Consul::Partition::Form
- Consul::Partition::List
- Consul::Partition::Notifications
- Consul::Partition::SearchBar
- Consul::Partition::Selector
See additional documentation here for more details
New Route templates:
- index.hbs partition listing/searching/filtering
- edit.hbs partition editing and creation
Additionally:
There is some additional debug work here for better observability and to prevent any errors regarding our href-to usage when a dc is not available in our documentation site.
Our softDelete functionality has been DRYed out a little to be used across two repos.
isLinkable was removed from our ListCollection component for lists like upstream and service listing, and instead use our new is helper from within the ListCollection, meaning we've added a few more lighterweight templateOnly components.
* ui: Exclude all debug-like files from the build (#11211)
This PR adds **/*-debug.* to our test/prod excluded files (realised I needed to add test-support.js also so added that here as its more or less the same thing). Conditionally juggling ES6 static imports (specifically debug ones) for this was also getting a little hairy, so I moved it all to use the same approach as our conditional routes. All in all it brings the vendor build back down to ~430kb gzipped.
2021-10-08 15:29:30 +00:00
|
|
|
%debug-box {
|
|
|
|
|
color: red;
|
|
|
|
|
background-color: rgb(255 255 255 / 70%);
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* hi */
|
|
|
|
|
z-index: 100000;
|
|
|
|
|
}
|
|
|
|
|
html.with-href-to [href^='console://']::before {
|
|
|
|
|
@extend %p3;
|
|
|
|
|
@extend %debug-box;
|
|
|
|
|
content: attr(href);
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
2021-09-15 18:50:11 +00:00
|
|
|
html.with-route-announcer .route-title {
|
|
|
|
|
@extend %unvisually-hidden;
|
|
|
|
|
}
|
|
|
|
|
.data-source-debug {
|
ui: Adds initial CRUD for partitions (#11188)
* Add `is` and `test` helpers in a similar vein to `can`
Adds 2 new helpers in a similar vein to ember-cans can:
- `is` allows you to use vocab/phrases such as (is "something model") which calls isSomething() on the models ability.
- `test` allows you to use vocab/phrases such as (test "is something model") or (test "can something model")which calls isSomething() / canSomething() on the models ability. Mostly using the is helper and the can helper. It's basically the is/can helper combined.
* Adds TextInput component + related modifiers/helpers/machines/services (#11189)
Adds a few new components/modifiers/helpers to aid building forms.
- state-chart helper, used in lieu of a more generic approach for requiring our statecharts.
- A few modifications to our existing disabled modifier.
- A new 'validation' modifier, a super small form validation approach built to make use of state charts (optionally). Eventually we should be able to replace our current validation approach (ember-changeset-validations + extra deps) with this.
- A new TextInput component, which is the first of our new components specifically to make it easy to build forms with validations. This is still a WIP, I left some comments in pointing out where this one would be progressed, but as we don't need the planned functionality yet, I left it where it was. All of this will be fleshed out more at a later date.
Documentation is included for all of ^
* ui: Adds initial CRUD for partitions (#11190)
Adds basic CRUD support for partitions. Engineering-wise probably the biggest takeaway here is that we needed to write very little javascript code to add this entire feature, and the little javascript we did need to write was very straightforwards. Everything is pretty much just HTML. Another note to make is that both ember-changeset and ember-data (model layer things) are now completely abstracted away from the view layer of the application.
New components:
- Consul::Partition::Form
- Consul::Partition::List
- Consul::Partition::Notifications
- Consul::Partition::SearchBar
- Consul::Partition::Selector
See additional documentation here for more details
New Route templates:
- index.hbs partition listing/searching/filtering
- edit.hbs partition editing and creation
Additionally:
There is some additional debug work here for better observability and to prevent any errors regarding our href-to usage when a dc is not available in our documentation site.
Our softDelete functionality has been DRYed out a little to be used across two repos.
isLinkable was removed from our ListCollection component for lists like upstream and service listing, and instead use our new is helper from within the ListCollection, meaning we've added a few more lighterweight templateOnly components.
* ui: Exclude all debug-like files from the build (#11211)
This PR adds **/*-debug.* to our test/prod excluded files (realised I needed to add test-support.js also so added that here as its more or less the same thing). Conditionally juggling ES6 static imports (specifically debug ones) for this was also getting a little hairy, so I moved it all to use the same approach as our conditional routes. All in all it brings the vendor build back down to ~430kb gzipped.
2021-10-08 15:29:30 +00:00
|
|
|
@extend %debug-box;
|
2021-09-15 18:50:11 +00:00
|
|
|
}
|
|
|
|
|
.data-source-debug input:checked + pre code::after {
|
|
|
|
|
content: attr(data-json);
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.data-source-debug input {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2021-03-08 12:22:01 +00:00
|
|
|
.docs {
|
2021-11-23 18:32:11 +00:00
|
|
|
& {
|
|
|
|
|
background-color: rgb(var(--tone-gray-000));
|
|
|
|
|
}
|
2021-03-17 15:58:17 +00:00
|
|
|
.tabular-collection,
|
|
|
|
|
.list-collection {
|
|
|
|
|
height: 300px !important;
|
|
|
|
|
}
|
2021-05-24 11:32:23 +00:00
|
|
|
[role='banner'] nav:first-of-type {
|
2021-03-17 15:58:17 +00:00
|
|
|
& {
|
|
|
|
|
padding-top: 0 !important;
|
2021-05-24 11:32:23 +00:00
|
|
|
height: calc(100vh - var(--chrome-height, 47px));
|
2021-03-17 15:58:17 +00:00
|
|
|
}
|
|
|
|
|
ul {
|
|
|
|
|
margin-bottom: 100px;
|
|
|
|
|
padding-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
li.consul-components a::before,
|
|
|
|
|
li.components a::before {
|
2021-06-22 17:56:17 +00:00
|
|
|
@extend %with-logo-glimmer-color-icon, %as-pseudo;
|
2021-03-17 15:58:17 +00:00
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
2021-06-21 10:40:14 +00:00
|
|
|
li.consul-components.css-component a::before,
|
|
|
|
|
li.components.css-component a::before {
|
2021-06-22 17:56:17 +00:00
|
|
|
@extend %with-logo-glimmer-color-icon, %as-pseudo;
|
2021-06-21 10:40:14 +00:00
|
|
|
}
|
2021-03-17 15:58:17 +00:00
|
|
|
li.consul-components.ember-component a::before,
|
|
|
|
|
li.components.ember-component a::before {
|
2021-06-22 17:56:17 +00:00
|
|
|
@extend %with-logo-ember-circle-color-icon, %as-pseudo;
|
2021-03-17 15:58:17 +00:00
|
|
|
}
|
|
|
|
|
}
|
2021-03-08 12:22:01 +00:00
|
|
|
main {
|
2021-03-17 15:58:17 +00:00
|
|
|
& {
|
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
|
}
|
2021-05-13 10:36:51 +00:00
|
|
|
> ol,
|
|
|
|
|
> ul {
|
2021-04-16 11:13:06 +00:00
|
|
|
list-style-position: outside;
|
2021-03-17 15:58:17 +00:00
|
|
|
margin-bottom: 1rem;
|
2021-04-16 11:13:06 +00:00
|
|
|
margin-left: 2rem;
|
|
|
|
|
}
|
2021-05-13 10:36:51 +00:00
|
|
|
> ul {
|
2021-04-16 11:13:06 +00:00
|
|
|
list-style-type: disc;
|
2021-03-17 15:58:17 +00:00
|
|
|
}
|
2021-05-24 11:32:23 +00:00
|
|
|
> h1,
|
|
|
|
|
> h2,
|
2021-06-25 09:41:41 +00:00
|
|
|
> h3,
|
|
|
|
|
> h4 {
|
2021-05-24 11:32:23 +00:00
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
> h1 {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
@extend %h100;
|
|
|
|
|
}
|
|
|
|
|
> h2 {
|
|
|
|
|
@extend %h200;
|
|
|
|
|
}
|
|
|
|
|
> h3 {
|
|
|
|
|
@extend %h300;
|
|
|
|
|
}
|
2021-06-25 09:41:41 +00:00
|
|
|
> h4 {
|
|
|
|
|
@extend %h400;
|
|
|
|
|
}
|
2021-05-24 11:32:23 +00:00
|
|
|
> p {
|
|
|
|
|
@extend %p1;
|
|
|
|
|
}
|
|
|
|
|
> table {
|
|
|
|
|
margin-bottom: 3em;
|
|
|
|
|
}
|
|
|
|
|
> table td {
|
|
|
|
|
font-weight: normal !important;
|
|
|
|
|
cursor: default !important;
|
|
|
|
|
}
|
|
|
|
|
> table td code {
|
|
|
|
|
@extend %inline-code;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
|
|
|
|
> table tr:hover {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
2021-06-21 10:40:14 +00:00
|
|
|
> ol code,
|
|
|
|
|
> ul code {
|
|
|
|
|
@extend %inline-code;
|
|
|
|
|
}
|
2021-03-08 12:22:01 +00:00
|
|
|
}
|
2021-03-17 15:58:17 +00:00
|
|
|
.docfy-demo {
|
|
|
|
|
& {
|
|
|
|
|
margin-bottom: 1rem;
|
2021-05-24 11:32:23 +00:00
|
|
|
position: relative;
|
2021-03-17 15:58:17 +00:00
|
|
|
}
|
|
|
|
|
&__example {
|
|
|
|
|
& {
|
|
|
|
|
border-top: 1px solid;
|
|
|
|
|
border-left: 1px solid;
|
|
|
|
|
border-right: 1px solid;
|
2021-10-07 18:21:11 +00:00
|
|
|
border-color: rgb(var(--tone-gray-200));
|
2021-03-17 15:58:17 +00:00
|
|
|
padding: 1rem;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
ol,
|
|
|
|
|
ul {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2021-05-04 16:25:57 +00:00
|
|
|
figure {
|
2021-05-07 11:23:29 +00:00
|
|
|
margin-bottom: 0.5rem;
|
2021-05-04 16:25:57 +00:00
|
|
|
}
|
|
|
|
|
figcaption {
|
2021-05-07 11:23:29 +00:00
|
|
|
margin-bottom: 0.5rem;
|
2021-10-07 18:21:11 +00:00
|
|
|
color: rgb(var(--tone-gray-400));
|
2021-05-04 16:25:57 +00:00
|
|
|
font-style: italic;
|
|
|
|
|
}
|
2021-05-13 10:36:51 +00:00
|
|
|
figcaption code {
|
|
|
|
|
@extend %inline-code;
|
|
|
|
|
}
|
2021-05-07 11:23:29 +00:00
|
|
|
figure > [type='text'] {
|
2021-10-07 18:21:11 +00:00
|
|
|
border: 1px solid rgb(var(--tone-gray-999));
|
2021-05-04 16:25:57 +00:00
|
|
|
width: 100%;
|
2021-05-07 11:23:29 +00:00
|
|
|
padding: 0.5rem;
|
2021-05-04 16:25:57 +00:00
|
|
|
}
|
2021-05-13 10:36:51 +00:00
|
|
|
figure > select {
|
2021-10-07 18:21:11 +00:00
|
|
|
border: 1px solid rgb(var(--tone-gray-999));
|
2021-05-13 10:36:51 +00:00
|
|
|
padding: 0.5rem;
|
|
|
|
|
}
|
2021-03-17 15:58:17 +00:00
|
|
|
}
|
|
|
|
|
// &__snippets__tabs__button {
|
|
|
|
|
// display: none;
|
|
|
|
|
// }
|
|
|
|
|
&__snippet {
|
|
|
|
|
pre {
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
|
border-bottom-right-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-03-08 12:22:01 +00:00
|
|
|
}
|
|
|
|
|
}
|
