UI: CSS Additions (mainly %frames) (#4623)
* Move almost everything to use %frames * Fix pill styles of ACL types * Remove horizontal scrollbars from dom recycling scroller component * Make text areas look ok in Firefox * Remove ember-bulma-css * New form elements, break out %toggle * %button design tweaks * %form-element design tweaks * Better hashicorp logo * Small screen CSS improvements (#4624) 1. Reduce header size when there are no breadcrumbs 2. Make the filters toggleable, closed by default 3. Reduce the size of the footer on small screens 4. Hide all non-primary columns for forms 5. Slightly change the layout of various items, mainly buttons within forms 6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small screens
This commit is contained in:
John Cowen
GitHub
parent
a63bad51ef
commit
577dbef70a
|
|
@ -3,7 +3,7 @@ import { get } from '@ember/object';
|
|||
import { assert } from '@ember/debug';
|
||||
export default Mixin.create({
|
||||
resize: function(e) {
|
||||
assert('with-resizing.resize needs to be overridden', false);
|
||||
assert('with-resizing.resize needs to be overridden', false);
|
||||
},
|
||||
win: window,
|
||||
init: function() {
|
||||
|
|
@ -17,14 +17,14 @@ export default Mixin.create({
|
|||
},
|
||||
didInsertElement: function() {
|
||||
this._super(...arguments);
|
||||
get(this, 'win').addEventListener('resize', this.handler);
|
||||
get(this, 'win').addEventListener('resize', this.handler, false);
|
||||
this.didAppear();
|
||||
},
|
||||
didAppear: function() {
|
||||
this.handler({ target: get(this, 'win') });
|
||||
},
|
||||
willDestroyElement: function() {
|
||||
get(this, 'win').removeEventListener('resize', this.handler);
|
||||
get(this, 'win').removeEventListener('resize', this.handler, false);
|
||||
this._super(...arguments);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
@import 'components/anchors';
|
||||
@import 'components/buttons';
|
||||
@import 'components/tabs';
|
||||
@import 'components/pill';
|
||||
@import 'components/table';
|
||||
@import 'components/form-elements';
|
||||
|
||||
|
|
@ -38,3 +39,4 @@
|
|||
@import 'routes/dc/nodes/index';
|
||||
@import 'routes/dc/intention/index';
|
||||
@import 'routes/dc/kv/index';
|
||||
@import 'routes/dc/acls/index';
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
%box-border-000 {
|
||||
/* same as decor-border-000 - but need to think about being able to import color on its own*/
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
%box-color-yellow-500 {
|
||||
@extend %box-border-000;
|
||||
background-color: $ui-yellow-050;
|
||||
border-color: $ui-color-warning;
|
||||
}
|
||||
%box-color-gray-500 {
|
||||
@extend %box-border-000;
|
||||
background-color: $ui-gray-050;
|
||||
border-color: $ui-gray-300;
|
||||
color: $ui-gray-400;
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/*TODO: Move this to the reset */
|
||||
* {
|
||||
border-width: 0;
|
||||
}
|
||||
%frame-border-000 {
|
||||
/* same as decor-border-000 - but need to think about being able to import color on its own*/
|
||||
border-style: solid;
|
||||
// border-width: 0;
|
||||
}
|
||||
%frame-yellow-500 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-yellow-050;
|
||||
border-color: $ui-color-warning;
|
||||
}
|
||||
%frame-green-500 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-green-050;
|
||||
border-color: $ui-green-500;
|
||||
color: $ui-green-500;
|
||||
}
|
||||
%frame-gray-500 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-gray-050;
|
||||
border-color: $ui-gray-300;
|
||||
color: $ui-gray-400;
|
||||
}
|
||||
%frame-blue-600 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-blue-200;
|
||||
border-color: $ui-gray-400;
|
||||
color: $ui-blue-050;
|
||||
}
|
||||
%frame-blue-700 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-blue-400;
|
||||
border-color: $ui-blue-800;
|
||||
color: $ui-white;
|
||||
}
|
||||
%frame-blue-800 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-blue-500;
|
||||
border-color: $ui-blue-800;
|
||||
color: $ui-white;
|
||||
}
|
||||
%frame-blue-900 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-blue-700;
|
||||
border-color: $ui-blue-800;
|
||||
color: $ui-white;
|
||||
}
|
||||
%frame-red-300 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-white;
|
||||
border-color: $ui-red-500;
|
||||
color: $ui-red-500;
|
||||
}
|
||||
%frame-red-500 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-red-050;
|
||||
border-color: $ui-red-500;
|
||||
color: $ui-red-800;
|
||||
}
|
||||
%frame-red-600 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-red-200;
|
||||
border-color: $ui-gray-400;
|
||||
color: $ui-white;
|
||||
}
|
||||
%frame-red-700 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-red-500;
|
||||
border-color: $ui-red-800;
|
||||
color: $ui-white;
|
||||
}
|
||||
%frame-red-900 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-red-700;
|
||||
border-color: $ui-red-800;
|
||||
color: $ui-white;
|
||||
}
|
||||
%frame-magenta-300 {
|
||||
@extend %frame-border-000;
|
||||
background-color: $ui-white;
|
||||
border-color: $brand-magenta-600;
|
||||
color: $brand-magenta-600;
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
@import './base-variables';
|
||||
@import './semantic-variables';
|
||||
@import './box-placeholders';
|
||||
@import './frame-placeholders';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
$hashicorp-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
|
||||
|
||||
$consul-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
|
||||
$nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
|
||||
$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
|
||||
$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
|
||||
|
|
@ -9,3 +9,9 @@
|
|||
%button:not(:last-child) {
|
||||
margin-right: 7px;
|
||||
}
|
||||
%button-compact {
|
||||
// @extend %button;
|
||||
padding-left: calc(1.75em - 1px);
|
||||
padding-right: calc(1.75em - 1px);
|
||||
height: 2.1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,87 +4,84 @@
|
|||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
%primary-button,
|
||||
%secondary-button,
|
||||
%copy-button,
|
||||
%dangerous-button {
|
||||
@extend %button;
|
||||
%button:disabled {
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
%copy-button {
|
||||
@extend %button, %with-clipboard;
|
||||
}
|
||||
%primary-button,
|
||||
%secondary-button,
|
||||
%dangerous-button {
|
||||
border: $decor-border-100;
|
||||
@extend %button;
|
||||
border-width: 1px;
|
||||
border-radius: $radius-small;
|
||||
box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
|
||||
}
|
||||
%primary-button,
|
||||
%copy-button {
|
||||
border: 0;
|
||||
}
|
||||
%copy-button {
|
||||
@extend %with-clipboard;
|
||||
}
|
||||
/* color */
|
||||
%secondary-button,
|
||||
%dangerous-button,
|
||||
%copy-button {
|
||||
border-color: currentColor;
|
||||
}
|
||||
%secondary-button {
|
||||
color: $ui-gray-400;
|
||||
}
|
||||
%secondary-button:hover,
|
||||
%secondary-button:focus {
|
||||
color: $ui-gray-600;
|
||||
}
|
||||
%secondary-button:active {
|
||||
color: $ui-gray-600;
|
||||
}
|
||||
%primary-button {
|
||||
background-color: $ui-color-action;
|
||||
color: $ui-white;
|
||||
}
|
||||
%primary-button:hover,
|
||||
%primary-button:focus {
|
||||
background-color: $ui-blue-700;
|
||||
}
|
||||
%primary-button:disabled {
|
||||
color: rgba($ui-white, 0.5);
|
||||
background-color: rgba($ui-blue-700, 0.5);
|
||||
box-shadow: none;
|
||||
}
|
||||
%primary-button:active {
|
||||
background-color: $ui-blue-900;
|
||||
}
|
||||
%dangerous-button {
|
||||
color: $ui-color-danger;
|
||||
}
|
||||
%dangerous-button:hover,
|
||||
%dangerous-button:focus {
|
||||
background-color: $ui-color-danger;
|
||||
border-color: $ui-color-danger;
|
||||
color: $ui-white;
|
||||
}
|
||||
%dangerous-button:disabled {
|
||||
color: rgba($ui-color-danger, 0.5);
|
||||
border-color: rgba($ui-color-danger, 0.5);
|
||||
background-color: $ui-white;
|
||||
box-shadow: none;
|
||||
}
|
||||
%dangerous-button:active {
|
||||
background-color: $ui-red-700;
|
||||
border-color: $ui-red-700;
|
||||
color: $ui-white;
|
||||
}
|
||||
%copy-button {
|
||||
color: $ui-color-action;
|
||||
background-color: $ui-color-transparent;
|
||||
}
|
||||
%copy-button:hover,
|
||||
%copy-button:hover:not(:disabled):not(:active),
|
||||
%copy-button:focus {
|
||||
color: $ui-color-action;
|
||||
background-color: $ui-gray-050;
|
||||
}
|
||||
%copy-button:disabled {
|
||||
}
|
||||
%copy-button:active {
|
||||
background-color: $ui-gray-200;
|
||||
}
|
||||
%primary-button {
|
||||
@extend %frame-blue-800;
|
||||
}
|
||||
%primary-button:hover:not(:disabled):not(:active),
|
||||
%primary-button:focus {
|
||||
@extend %frame-blue-700;
|
||||
}
|
||||
%primary-button:disabled {
|
||||
@extend %frame-blue-600;
|
||||
}
|
||||
%primary-button:hover:active {
|
||||
@extend %frame-blue-900;
|
||||
}
|
||||
/**/
|
||||
%secondary-button {
|
||||
/* %frame-gray-something */
|
||||
color: $ui-gray-800;
|
||||
background-color: $ui-gray-050;
|
||||
border-color: $ui-gray-300;
|
||||
border-style: solid;
|
||||
}
|
||||
%secondary-button:hover:not(:disabled):not(:active),
|
||||
%secondary-button:focus {
|
||||
/* %frame-gray-something */
|
||||
background-color: $ui-white;
|
||||
color: $ui-gray-800;
|
||||
border-color: $ui-gray-700;
|
||||
}
|
||||
%secondary-button:disabled {
|
||||
color: $ui-gray-600;
|
||||
}
|
||||
%secondary-button:active {
|
||||
/* %frame-gray-something */
|
||||
background-color: $ui-gray-200;
|
||||
color: $ui-gray-800;
|
||||
border-color: $ui-gray-700;
|
||||
}
|
||||
/**/
|
||||
%dangerous-button {
|
||||
@extend %frame-red-300;
|
||||
}
|
||||
%dangerous-button:hover:not(:disabled):not(:active),
|
||||
%dangerous-button:focus {
|
||||
@extend %frame-red-700;
|
||||
}
|
||||
%dangerous-button:disabled {
|
||||
@extend %frame-red-600;
|
||||
}
|
||||
%dangerous-button:hover:active {
|
||||
@extend %frame-red-900;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,19 @@
|
|||
div.with-confirmation {
|
||||
@extend %confirmation-dialog, %confirmation-dialog-inline;
|
||||
}
|
||||
table div.with-confirmation.confirming {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
@media #{$--lt-wide-form} {
|
||||
%confirmation-dialog {
|
||||
float: none;
|
||||
margin-top: 1em;
|
||||
}
|
||||
%confirmation-dialog-inline {
|
||||
display: block;
|
||||
}
|
||||
%confirmation-dialog-inline p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,3 @@
|
|||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
table div.with-confirmation.confirming {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,13 @@
|
|||
main .with-feedback {
|
||||
@extend %feedback-dialog-inline;
|
||||
}
|
||||
@media #{$--lt-spacious-page-header} {
|
||||
.actions .with-feedback p {
|
||||
bottom: auto;
|
||||
top: 0px;
|
||||
}
|
||||
.actions .with-feedback p::after {
|
||||
bottom: auto;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,16 @@
|
|||
%flash-message p {
|
||||
border-width: 1px;
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%flash-message p.success strong {
|
||||
@extend %with-passing;
|
||||
}
|
||||
%flash-message p.error strong {
|
||||
@extend %with-critical;
|
||||
}
|
||||
%flash-message p {
|
||||
border: $decor-border-100;
|
||||
border-radius: $radius-small;
|
||||
}
|
||||
%flash-message p.success {
|
||||
border-color: $ui-color-success;
|
||||
background-color: $ui-green-050;
|
||||
}
|
||||
%flash-message p {
|
||||
color: $ui-color-success;
|
||||
@extend %frame-green-500;
|
||||
}
|
||||
%flash-message p.error {
|
||||
border-color: $ui-color-failure;
|
||||
background-color: $ui-red-050;
|
||||
}
|
||||
%flash-message p.error {
|
||||
color: $ui-color-failure;
|
||||
}
|
||||
%flash-message p strong {
|
||||
color: inherit;
|
||||
@extend %frame-red-500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import './form-elements/index';
|
||||
@import './toggle/index';
|
||||
.type-toggle {
|
||||
@extend %toggle;
|
||||
}
|
||||
|
|
@ -8,3 +9,10 @@ label span {
|
|||
.has-error {
|
||||
@extend %form-element-error;
|
||||
}
|
||||
%app-content .type-text,
|
||||
%app-content .type-toggle {
|
||||
@extend %form-element;
|
||||
}
|
||||
%app-content [role='radiogroup'] {
|
||||
@extend %radio-group;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,94 +1,76 @@
|
|||
%toggle {
|
||||
float: right;
|
||||
margin-bottom: 0 !important;
|
||||
%form-element,
|
||||
%form-element > em,
|
||||
%form-element > span,
|
||||
%form-element textarea {
|
||||
display: block;
|
||||
}
|
||||
%form-element > em > code {
|
||||
display: inline-block;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
%form-element textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
%form-element > span {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
%form-element textarea {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 70px;
|
||||
padding: 0.625em 15px;
|
||||
resize: vertical;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
height: 2.25em;
|
||||
}
|
||||
%form-element,
|
||||
%form-element > em {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
%form-element > em {
|
||||
margin-left: 8px;
|
||||
margin-top: 10px;
|
||||
%form-element > em > code {
|
||||
padding: 0 4px;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
padding: 17px 13px;
|
||||
}
|
||||
%form-element textarea {
|
||||
padding: 6px 13px;
|
||||
}
|
||||
%form-element > span {
|
||||
margin-bottom: 0.4em !important;
|
||||
}
|
||||
%form-element,
|
||||
%radio-group {
|
||||
margin-bottom: 1.55em;
|
||||
}
|
||||
%form-element > span {
|
||||
margin-bottom: 0.4em !important;
|
||||
}
|
||||
%radio-group {
|
||||
overflow: hidden;
|
||||
padding-left: 1px;
|
||||
}
|
||||
%radio-group label {
|
||||
float: left;
|
||||
}
|
||||
%radio-group label > span {
|
||||
float: right;
|
||||
}
|
||||
%radio-group {
|
||||
padding-left: 1px;
|
||||
}
|
||||
%radio-group label:not(:last-child) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
%radio-group label > span {
|
||||
margin-left: 1em;
|
||||
margin-top: 0.2em;
|
||||
float: right;
|
||||
}
|
||||
%radio-group label,
|
||||
%radio-group label > span {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
padding: 17px 15px;
|
||||
}
|
||||
%toggle {
|
||||
position: relative;
|
||||
}
|
||||
%toggle input {
|
||||
display: none;
|
||||
}
|
||||
%toggle span {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
%toggle span::before,
|
||||
%toggle span::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
top: 50%;
|
||||
}
|
||||
%toggle span::before {
|
||||
left: 0px;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
%toggle span::after {
|
||||
left: 2px;
|
||||
margin-top: -6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
%toggle input:checked + span::after {
|
||||
left: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,40 @@
|
|||
%radio-group label {
|
||||
@extend %form-element;
|
||||
}
|
||||
%form-element-error > input,
|
||||
%form-element-error > textarea {
|
||||
border: $decor-border-100;
|
||||
}
|
||||
%radio-group label {
|
||||
@extend %form-element;
|
||||
}
|
||||
[type='radio'],
|
||||
%toggle span::before,
|
||||
%toggle span::after {
|
||||
cursor: pointer;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
border: $decor-border-100;
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
box-shadow: none;
|
||||
border-radius: $radius-small;
|
||||
box-shadow: inset 0 4px 1px rgba(0, 0, 0, .06);
|
||||
border-radius: $decor-radius-100;
|
||||
border: $decor-border-100;
|
||||
}
|
||||
%form-element [type='text']:focus,
|
||||
%form-element [type='password']:focus,
|
||||
%form-element textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: $ui-gray-400;
|
||||
}
|
||||
%form-element > em > code {
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%form-element-error > input {
|
||||
border-color: $ui-color-failure !important;
|
||||
}
|
||||
%toggle input:checked + span::before {
|
||||
background-color: $ui-color-success;
|
||||
}
|
||||
%toggle span {
|
||||
color: $ui-gray-900;
|
||||
}
|
||||
%form-element > em {
|
||||
color: $ui-gray-400;
|
||||
}
|
||||
%toggle span::after {
|
||||
border-radius: 100%;
|
||||
background-color: $ui-white;
|
||||
}
|
||||
%toggle span::before {
|
||||
background-color: $ui-gray-300;
|
||||
border-radius: 7px;
|
||||
%form-element > em > code {
|
||||
background-color: $ui-gray-200;
|
||||
color: $brand-magenta-600;
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%form-element > span {
|
||||
color: $ui-gray-500;
|
||||
color: $ui-black;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
|
|
@ -58,16 +43,16 @@
|
|||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
background-color: $ui-gray-050;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
border-color: $ui-gray-300;
|
||||
}
|
||||
%form-element [type='text']:hover,
|
||||
%form-element [type='password']:hover,
|
||||
%form-element textarea:hover {
|
||||
border-color: $ui-color-action;
|
||||
border-color: $ui-gray-500;
|
||||
}
|
||||
%form-element [type='text']:focus,
|
||||
%form-element [type='password']:focus,
|
||||
%form-element textarea:focus {
|
||||
border-color: $ui-blue-500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,3 +12,24 @@
|
|||
%healthcheck-status.critical {
|
||||
@extend %with-critical;
|
||||
}
|
||||
@media #{$--lt-spacious-healthcheck-status} {
|
||||
.healthcheck-status button.copy-btn {
|
||||
margin-top: -11px;
|
||||
margin-right: -18px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
visibility: hidden;
|
||||
}
|
||||
%healthcheck-status {
|
||||
padding-left: 30px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 15px;
|
||||
padding-right: 13px;
|
||||
}
|
||||
%healthcheck-status::before {
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
left: 9px;
|
||||
top: 13px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
%healthcheck-status {
|
||||
border: $decor-border-100;
|
||||
border-width: 1px;
|
||||
}
|
||||
%healthcheck-status,
|
||||
%healthcheck-status pre {
|
||||
border-radius: $radius-small;
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%healthcheck-status dd:first-of-type {
|
||||
color: $ui-gray-400;
|
||||
|
|
@ -13,19 +13,23 @@
|
|||
color: $ui-white;
|
||||
}
|
||||
%healthcheck-status.passing {
|
||||
/* TODO: this should be a gray frame */
|
||||
// @extend %frame-green-500;
|
||||
color: $ui-gray-900;
|
||||
border-color: $ui-gray-200;
|
||||
border-style: solid;
|
||||
}
|
||||
%healthcheck-status.warning {
|
||||
@extend %frame-yellow-500;
|
||||
color: $ui-gray-900;
|
||||
}
|
||||
%healthcheck-status.critical {
|
||||
@extend %frame-red-500;
|
||||
color: $ui-gray-900;
|
||||
}
|
||||
%healthcheck-status.passing::before {
|
||||
background-color: $ui-color-success !important;
|
||||
}
|
||||
%healthcheck-status.critical {
|
||||
border-color: $ui-color-danger;
|
||||
background-color: rgba($ui-color-danger, 0.1);
|
||||
}
|
||||
%healthcheck-status.critical::before {
|
||||
background-color: $ui-color-danger !important;
|
||||
}
|
||||
%healthcheck-status.warning {
|
||||
border-color: $ui-color-alert;
|
||||
background-color: rgba($ui-color-alert, 0.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,13 +58,18 @@
|
|||
padding-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
%with-hashicorp {
|
||||
background-color: $ui-white;
|
||||
}
|
||||
%with-hashicorp::before {
|
||||
@extend %pseudo-icon;
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="23" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="%23a5b0b7"><path d="M9.753 1L1 5.541v10.911l3.288 1.707V7.25l5.465-2.837z"/><path d="M13.247 1v8.688H9.753V6.446l-3.29 1.708v11.131l3.29 1.711v-8.663h3.494v3.22l3.288-1.707V2.708z"/><path d="M13.247 21L22 16.459V5.548l-3.29-1.707v10.91l-5.463 2.837z"/></g></svg>');
|
||||
width: 23px;
|
||||
height: 22px;
|
||||
opacity: .45;
|
||||
background-image: $hashicorp-svg;
|
||||
background-size: cover;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: -25px;
|
||||
margin-top: -11px;
|
||||
margin-top: -10px;
|
||||
background-color: $ui-color-transparent;
|
||||
}
|
||||
%with-clipboard {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
%notice {
|
||||
border-radius: $radius-small;
|
||||
border-width: 1px;
|
||||
}
|
||||
%notice-success,
|
||||
%notice-info,
|
||||
|
|
@ -26,8 +27,7 @@
|
|||
color: $ui-color-action; /* change to info */
|
||||
}
|
||||
%notice-warning {
|
||||
@extend %box-color-yellow-500, %with-warning;
|
||||
border-width: 1px;
|
||||
@extend %frame-yellow-500, %with-warning;
|
||||
}
|
||||
%notice-error {
|
||||
@extend %with-critical;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import './product/index';
|
||||
@import './filter-bar';
|
||||
@import './form-elements/index';
|
||||
html body > svg {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -19,12 +18,10 @@ main {
|
|||
%app-view header form {
|
||||
@extend %filter-bar;
|
||||
}
|
||||
%app-content .type-text,
|
||||
%app-content .type-toggle {
|
||||
@extend %form-element;
|
||||
}
|
||||
%app-content [role='radiogroup'] {
|
||||
@extend %radio-group;
|
||||
@media #{$--lt-spacious-page-header} {
|
||||
%app-view header .actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
%loader circle {
|
||||
fill: $brand-magenta-100;
|
||||
|
|
@ -49,3 +46,37 @@ main {
|
|||
#wrapper > footer {
|
||||
@extend %footer;
|
||||
}
|
||||
/*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;
|
||||
}
|
||||
}
|
||||
/* toggleable toolbar for short screens */
|
||||
[for='toolbar-toggle'] {
|
||||
@extend %with-magnifier;
|
||||
color: $ui-blue-500;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 15px;
|
||||
top: -3px;
|
||||
}
|
||||
#toolbar-toggle {
|
||||
display: none;
|
||||
}
|
||||
@media #{$--expanded-filters} {
|
||||
[for='toolbar-toggle'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media #{$--lt-expanded-filters} {
|
||||
%app-view header h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
#toolbar-toggle + * {
|
||||
display: none;
|
||||
}
|
||||
#toolbar-toggle:checked + * {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,8 +48,7 @@
|
|||
}
|
||||
%app-view header .actions a,
|
||||
%app-view header .actions button {
|
||||
padding: calc(0.375em - 1px) calc(2.2em - 1px);
|
||||
height: 2.25em;
|
||||
@extend %button-compact;
|
||||
}
|
||||
|
||||
// content
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
border-top: $decor-border-100;
|
||||
}
|
||||
%footer {
|
||||
border-color: $keyline-mid;
|
||||
border-color: $ui-gray-200;
|
||||
background-color: $ui-white;
|
||||
}
|
||||
%footer > * {
|
||||
|
|
@ -16,9 +16,31 @@
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 25px;
|
||||
}
|
||||
%footer > * {
|
||||
display: block;
|
||||
padding: 11px;
|
||||
}
|
||||
@media #{$--tall-footer} {
|
||||
%footer {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
@media #{$--wide-footer} {
|
||||
%footer {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
%footer > * {
|
||||
padding: 11px;
|
||||
}
|
||||
}
|
||||
@media #{$--lt-wide-footer} {
|
||||
%footer > :first-child {
|
||||
padding: 5px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
%footer > :not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,8 @@ table td a {
|
|||
display: block;
|
||||
}
|
||||
tbody {
|
||||
overflow-x: visible !important;
|
||||
/* important required as ember-collection will inline an overflow: visible*/
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
th,
|
||||
td:not(.actions),
|
||||
|
|
@ -124,3 +125,32 @@ td dd {
|
|||
margin-left: 22px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
/* hide actions on narrow screens, you can always click in do everything from there */
|
||||
@media #{$--lt-wide-table} {
|
||||
tr > .actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* ideally these would be in route css files, but left here as they */
|
||||
/* accomplish the same thing (hide non-essential columns for tables) */
|
||||
@media #{$--lt-wide-table} {
|
||||
html.template-intention.template-list tr > :nth-last-child(2) {
|
||||
display: none;
|
||||
}
|
||||
html.template-service.template-list tr > :last-child {
|
||||
display: none;
|
||||
}
|
||||
html.template-node.template-show #services tr > :last-child {
|
||||
display: none;
|
||||
}
|
||||
html.template-node.template-show #lock-sessions tr >
|
||||
:not(:first-child):not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
html.template-node.template-show #lock-sessions td:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
html.template-node.template-show #lock-sessions td:last-child button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import './tabs/index';
|
||||
main header nav:last-child {
|
||||
main header nav:last-of-type:not(:first-of-type) {
|
||||
@extend %tab-nav;
|
||||
}
|
||||
.tab-section {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
%tab-section {
|
||||
/* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
@media #{$--horizontal-tabs} {
|
||||
|
|
@ -6,12 +7,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
%tab-nav ul li:not(:first-child) {
|
||||
margin-left: 37px;
|
||||
}
|
||||
%tab-nav a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
@media #{$--lt-horizontal-tabs} {
|
||||
|
|
@ -21,10 +19,9 @@
|
|||
}
|
||||
%tab-nav a {
|
||||
display: block;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 13px;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
%tab-nav input[type='radio'],
|
||||
%tab-section > input[type='radio'],
|
||||
%tab-section > input[type='radio'] + * {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
%tab-nav label {
|
||||
cursor: pointer;
|
||||
}
|
||||
%tab-nav ul {
|
||||
border: 0;
|
||||
%tab-nav a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
%tab-nav a {
|
||||
border-bottom: $decor-border-300;
|
||||
border-bottom: $decor-border-200;
|
||||
}
|
||||
%tab-nav a {
|
||||
border-color: $ui-color-transparent;
|
||||
color: $ui-gray-500;
|
||||
}
|
||||
%tab-nav a:hover,
|
||||
%tab-nav a:focus,
|
||||
%tab-nav a:active,
|
||||
%tab-nav li:not(.selected) a:hover,
|
||||
%tab-nav li:not(.selected) a:focus,
|
||||
%tab-nav li:not(.selected) a:active {
|
||||
/* %frame-gray-something */
|
||||
border-color: $ui-color-transparent;
|
||||
background-color: $ui-gray-100;
|
||||
}
|
||||
%tab-nav .selected a {
|
||||
border-color: $brand-magenta-600;
|
||||
color: $brand-magenta-600;
|
||||
@extend %frame-magenta-300;
|
||||
}
|
||||
|
||||
%tab-nav a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
%toggle {
|
||||
position: relative;
|
||||
}
|
||||
%toggle input {
|
||||
display: none;
|
||||
}
|
||||
%toggle span {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
%toggle span::before,
|
||||
%toggle span::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
top: 50%;
|
||||
}
|
||||
%toggle span::before {
|
||||
left: 0px;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
%toggle span::after {
|
||||
left: 2px;
|
||||
margin-top: -6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
%toggle input:checked + span::after {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/* TODO: Maybe move this to reset? */
|
||||
[type='radio'],
|
||||
%toggle span::before,
|
||||
%toggle span::after {
|
||||
cursor: pointer;
|
||||
}
|
||||
%toggle span::after {
|
||||
border-radius: $decor-radius-full;
|
||||
}
|
||||
%toggle span::before {
|
||||
border-radius: 7px;
|
||||
}
|
||||
%toggle input:checked + span::before {
|
||||
background-color: $ui-color-success;
|
||||
}
|
||||
%toggle span {
|
||||
color: $ui-gray-900;
|
||||
}
|
||||
%toggle span::after {
|
||||
background-color: $ui-white;
|
||||
}
|
||||
%toggle span::before {
|
||||
background-color: $ui-gray-300;
|
||||
}
|
||||
|
||||
|
|
@ -20,8 +20,26 @@ main,
|
|||
html.template-edit main {
|
||||
@extend %content-container-restricted;
|
||||
}
|
||||
|
||||
@media #{$--lt-spacious-page-header} {
|
||||
html.template-list:not(.template-kv) main {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@media #{$--lt-spacious-page-header} {
|
||||
.actions button.copy-btn {
|
||||
margin-top: -42px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
/* TODO: keep margin below forms, move elsewhere */
|
||||
main form,
|
||||
main form + div .with-confirmation {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@media #{$--lt-wide-form} {
|
||||
main form [type="reset"] {
|
||||
float: right;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,11 +37,13 @@ h2,
|
|||
%healthchecked-resource header span,
|
||||
%healthcheck-status dt,
|
||||
%copy-button,
|
||||
%form-element > span,
|
||||
%app-content div > dl > dt,
|
||||
td a {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
%form-element > span {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
%button {
|
||||
font-weight: $typo-weight-semibold !important;
|
||||
}
|
||||
|
|
@ -63,12 +65,6 @@ td:first-child em,
|
|||
%healthchecked-resource header em {
|
||||
font-style: normal;
|
||||
}
|
||||
%form-element > span {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
%form-element > span > * {
|
||||
text-transform: none;
|
||||
}
|
||||
%footer > * {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
|
@ -87,6 +83,7 @@ td {
|
|||
font-size: $typo-size-600;
|
||||
}
|
||||
th,
|
||||
%form-element > span,
|
||||
%with-tooltip::before,
|
||||
%healthchecked-resource strong,
|
||||
%footer {
|
||||
|
|
@ -100,9 +97,8 @@ th,
|
|||
%app-view > div.disabled > div,
|
||||
.template-error > div,
|
||||
%button,
|
||||
.with-confirmation p,
|
||||
%form-element > em,
|
||||
%form-element > span,
|
||||
.with-confirmation p,
|
||||
%feedback-dialog-inline p {
|
||||
font-size: $typo-size-800;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
@media #{$--lt-wide-form} {
|
||||
html.template-acl.template-edit main header .actions {
|
||||
float: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
html.template-acl.template-edit main header .actions .with-feedback {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
html.template-acl.template-edit main header .actions .with-confirmation {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,3 +2,7 @@ html.template-kv.template-edit div > .with-confirmation {
|
|||
float: none;
|
||||
margin-top: 1.7em;
|
||||
}
|
||||
html.template-kv.template-edit .type-toggle {
|
||||
float: right;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,3 +16,24 @@ $--lt-horizontal-session-list: '(max-width: 899px)';
|
|||
|
||||
$--min-padding: '(max-width: 600px)';
|
||||
$--max-padding: '(min-width: 1260px)';
|
||||
|
||||
$--tall-footer: '(min-height: 815px)';
|
||||
$--lt-tall-footer: '(max-height: 814px)';
|
||||
|
||||
$--wide-footer: '(min-width: 421px)';
|
||||
$--lt-wide-footer: '(max-width: 420px)';
|
||||
|
||||
$--expanded-filters: '(min-width: 421px) (min-height: 815px)';
|
||||
$--lt-expanded-filters: '(max-width: 420px) (max-height: 814px)';
|
||||
|
||||
$--spacious-page-header: '(min-width: 421px) (min-height: 815px)';
|
||||
$--lt-spacious-page-header: '(max-width: 420px) (max-height: 814px)';
|
||||
|
||||
$--spacious-healthcheck-status: '(min-width: 421px)';
|
||||
$--lt-spacious-healthcheck-status: '(max-width: 420px)';
|
||||
|
||||
$--wide-form: '(min-width: 421px)';
|
||||
$--lt-wide-form: '(max-width: 420px)';
|
||||
|
||||
$--wide-table: '(min-width: 421px)';
|
||||
$--lt-wide-table: '(max-width: 420px)';
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@
|
|||
{{#yield-slot 'header'}}{{yield}}{{/yield-slot}}
|
||||
</div>
|
||||
</div>
|
||||
{{#yield-slot 'toolbar'}}{{yield}}{{/yield-slot}}
|
||||
{{#yield-slot 'toolbar'}}
|
||||
<input type="checkbox" id="toolbar-toggle" />
|
||||
{{yield}}
|
||||
{{/yield-slot}}
|
||||
</header>
|
||||
{{/if}}
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div role="radiogroup" class={{if item.error.Type ' has-error'}}>
|
||||
{{#each types as |type|}}
|
||||
<label>
|
||||
<span>{{type}}</span>
|
||||
<span>{{capitalize type}}</span>
|
||||
<input type="radio" name="Type" value="{{type}}" checked={{if (eq item.Type type) 'checked'}} onchange={{ action 'change' }}/>
|
||||
</label>
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<h1>
|
||||
ACL Tokens
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'actions'}}
|
||||
<a data-test-create href="{{href-to 'dc.acls.create'}}" class="type-create">Create</a>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<div role="radiogroup" class={{if item.error.Action ' has-error'}}>
|
||||
{{#each intents as |intent|}}
|
||||
<label>
|
||||
<span>{{intent}}</span>
|
||||
<span>{{ capitalize intent }}</span>
|
||||
<input type="radio" name="Action" value="{{intent}}" checked={{if (eq item.Action intent) 'checked'}} onchange={{ action 'change' }}/>
|
||||
</label>
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<h1>
|
||||
Intentions
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'actions'}}
|
||||
<a data-test-create href="{{href-to 'dc.intentions.create'}}" class="type-create">Create</a>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
{{ take 1 (drop 1 (reverse (split parent.Key '/'))) }}
|
||||
{{/if}}
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'toolbar'}}
|
||||
{{#if (gt items.length 0) }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{{#if (gt items.length 0) }}
|
||||
<input type="checkbox" id="toolbar-toggle" />
|
||||
<form class="filter-bar">
|
||||
{{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name/port"}}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<h1>
|
||||
Nodes
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'toolbar'}}
|
||||
{{#if (gt items.length 0) }}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<h1>
|
||||
{{ item.Node }}
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{tab-nav
|
||||
items=(compact
|
||||
(array
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<h1>
|
||||
Services
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'toolbar'}}
|
||||
{{#if (gt items.length 0) }}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@ module.exports = function(defaults) {
|
|||
'ember-cli-babel': {
|
||||
includePolyfill: true
|
||||
},
|
||||
'ember-cli-string-helpers': {
|
||||
only: ['capitalize']
|
||||
},
|
||||
'babel': {
|
||||
plugins: [
|
||||
'transform-object-rest-spread'
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
"ember-ajax": "^3.0.0",
|
||||
"ember-block-slots": "^1.1.11",
|
||||
"ember-browserify": "^1.2.2",
|
||||
"ember-bulma-css": "^0.2.1",
|
||||
"ember-changeset-validations": "^1.2.11",
|
||||
"ember-cli": "~2.18.2",
|
||||
"ember-cli-app-version": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -1944,10 +1944,6 @@ builtins@^1.0.3:
|
|||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
|
||||
|
||||
bulma@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5"
|
||||
|
||||
bytes@1:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8"
|
||||
|
|
@ -3022,14 +3018,6 @@ ember-browserify@^1.2.2:
|
|||
through2 "^2.0.0"
|
||||
walk-sync "^0.2.7"
|
||||
|
||||
ember-bulma-css@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/ember-bulma-css/-/ember-bulma-css-0.2.1.tgz#4b168a74191c127d5bfec21dd3ceb0b279c72b1c"
|
||||
dependencies:
|
||||
bulma "^0.6.2"
|
||||
ember-cli-babel "^6.6.0"
|
||||
ember-cli-sass "^7.2.0"
|
||||
|
||||
ember-changeset-validations@^1.2.11:
|
||||
version "1.2.11"
|
||||
resolved "https://registry.yarnpkg.com/ember-changeset-validations/-/ember-changeset-validations-1.2.11.tgz#b769c3557f42fae05398869f3904200e21a005d7"
|
||||
|
|
@ -3335,15 +3323,6 @@ ember-cli-sass@^7.1.4:
|
|||
broccoli-sass-source-maps "^2.1.0"
|
||||
ember-cli-version-checker "^2.1.0"
|
||||
|
||||
ember-cli-sass@^7.2.0:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-sass/-/ember-cli-sass-7.2.0.tgz#293d1a94c43c1fdbb3835378e43d255e8ad5c961"
|
||||
dependencies:
|
||||
broccoli-funnel "^1.0.0"
|
||||
broccoli-merge-trees "^1.1.0"
|
||||
broccoli-sass-source-maps "^2.1.0"
|
||||
ember-cli-version-checker "^2.1.0"
|
||||
|
||||
ember-cli-shims@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-shims/-/ember-cli-shims-1.2.0.tgz#0f53aff0aab80b5f29da3a9731bac56169dd941f"
|
||||
|
|
|
|||
Loading…
Reference in New Issue