ui: Colocate remaining CSS components to the app/components folder (#10328)

ui/packages/consul-ui/app/components/anchors/index.scss

@@ -1,32 +1,28 @@
-%anchor-decoration,
+@import './skin';
-%anchor-decoration-active {
+a[rel*='external']::after {
-  text-decoration: none;
+  @extend %with-exit-icon, %as-pseudo;
+  margin-left: 8px;
 }
-%anchor-decoration-intent {
+%main-content label a[rel*='help'] {
-  text-decoration: underline;
+  color: $gray-400;
 }
-%anchor,
+%main-content a[rel*='help']::after {
-%anchor-intent,
+  @extend %with-info-circle-outline-icon, %as-pseudo;
-%anchor-active {
+  opacity: 0.4;
-  color: $color-action;
 }
-%anchor-decoration:hover,
+%main-content h2 a {
-%anchor-decoration:focus {
+  color: $gray-900;
-  @extend %anchor-decoration-intent;
 }
-%anchor-decoration:active {
+%main-content h2 a[rel*='help']::after {
-  @extend %anchor-decoration-active;
+  font-size: 0.65em;
+  margin-top: 0.2em;
+  margin-left: 0.2em;
 }
-%anchor {
+
-  @extend %anchor-decoration;
+.tab-section > p:only-child [rel*='help']::after {
-  cursor: pointer;
+  content: none;
-  background-color: $transparent;
 }
-%anchor:hover,
+%main-content p a,
-%anchor:focus {
+%main-content dd a {
-  @extend %anchor-intent;
+  @extend %anchor;
-}
-%anchor:active {
-  @extend %anchor-active;
-  outline: 0;
 }

ui/packages/consul-ui/app/components/anchors/skin.scss

@@ -0,0 +1,32 @@
+%anchor-decoration,
+%anchor-decoration-active {
+  text-decoration: none;
+}
+%anchor-decoration-intent {
+  text-decoration: underline;
+}
+%anchor,
+%anchor-intent,
+%anchor-active {
+  color: $color-action;
+}
+%anchor-decoration:hover,
+%anchor-decoration:focus {
+  @extend %anchor-decoration-intent;
+}
+%anchor-decoration:active {
+  @extend %anchor-decoration-active;
+}
+%anchor {
+  @extend %anchor-decoration;
+  cursor: pointer;
+  background-color: $transparent;
+}
+%anchor:hover,
+%anchor:focus {
+  @extend %anchor-intent;
+}
+%anchor:active {
+  @extend %anchor-active;
+  outline: 0;
+}

ui/packages/consul-ui/app/components/auth-form/index.scss

@@ -1,2 +1,5 @@
 @import './skin';
 @import './layout';
+.auth-form {
+  @extend %auth-form;
+}

ui/packages/consul-ui/app/components/auth-modal/index.scss

@@ -5,3 +5,6 @@
 %auth-modal footer button {
   @extend %anchor;
 }
+#login-toggle + div {
+  @extend %auth-modal;
+}

ui/packages/consul-ui/app/components/breadcrumbs/index.scss

@@ -1,5 +1,12 @@
 @import './skin';
 @import './layout';
+main header nav:first-child {
+  position: absolute;
+  top: 12px;
+}
+main header nav:first-child ol {
+  @extend %breadcrumbs;
+}
 %breadcrumbs li a {
   @extend %crumbs;
 }

ui/packages/consul-ui/app/components/buttons/index.scss

@@ -1,2 +1,21 @@
 @import './skin';
 @import './layout';
+button[type='submit'],
+button.type-submit,
+a.type-create {
+  @extend %primary-button;
+}
+// TODO: Once we move action-groups to use aria menu we can get rid of
+// some of this and just use not(aria-haspopup)
+button[type='reset'],
+header .actions button[type='button']:not(.copy-btn),
+button.type-cancel {
+  @extend %secondary-button;
+}
+.with-confirmation .type-delete,
+%app-view-content form button[type='button'].type-delete {
+  @extend %dangerous-button;
+}
+button.copy-btn {
+  @extend %copy-button;
+}

ui/packages/consul-ui/app/components/code-editor/README.mdx

@@ -0,0 +1,11 @@
+---
+class: ember
+state: needs-love
+---
+
+# CodeEditor
+
+```hbs preview-template
+<CodeEditor />
+
+```

ui/packages/consul-ui/app/components/code-editor/index.scss

@@ -1,4 +1,5 @@
-@import './code-editor/index';
+@import './skin';
+@import './layout';
 // yet to pull the CodeMirror skin into the placeholder
 .code-editor {
   @extend %code-editor;

ui/packages/consul-ui/app/components/composite-row/index.scss

@@ -1,4 +1,24 @@
-@import './composite-row/index';
+@import './layout';
+@import './skin';
+%composite-row {
+  @extend %list-row;
+}
+%composite-row > .header {
+  @extend %composite-row-header, %list-row-header;
+}
+%composite-row > .detail {
+  @extend %composite-row-detail, %list-row-detail;
+}
+%composite-row > .actions {
+  @extend %composite-row-actions;
+}
+%with-composite-row-intent:hover,
+%with-composite-row-intent:focus,
+%with-composite-row-intent:active {
+  @extend %list-row-intent;
+}
+
+/* project level */
 
 .list-collection > ul > li:not(:first-child) {
   @extend %composite-row;

ui/packages/consul-ui/app/components/confirmation-dialog/index.scss

@@ -1,4 +1,5 @@
-@import './confirmation-dialog/index';
+@import './skin';
+@import './layout';
 div.with-confirmation {
   @extend %confirmation-dialog, %confirmation-dialog-inline;
 }

ui/packages/consul-ui/app/components/definition-table/index.scss

@@ -1,4 +1,5 @@
-@import './definition-table/index';
+@import './skin';
+@import './layout';
 .definition-table {
   @extend %definition-table;
 }

ui/packages/consul-ui/app/components/dom-recycling-table/layout.scss

@@ -6,7 +6,7 @@
 }
 %dom-recycling-table tr > * {
   flex: 1 0 auto;
-  /* this means no simple CSS drive tooltips in dom-recycling tables */
+  /* this means no simple CSS driven tooltips in dom-recycling tables */
   /* ideally the thing inside the td should be overflow hidden */
   overflow: hidden;
 }

ui/packages/consul-ui/app/components/empty-state/index.scss

@@ -1,5 +1,8 @@
 @import './layout';
 @import './skin';
+.empty-state {
+  @extend %empty-state;
+}
 %empty-state header :first-child {
   @extend %empty-state-header;
 }

ui/packages/consul-ui/app/components/form-elements/index.scss

@@ -32,3 +32,48 @@
 %form-element-text-input:focus {
   @extend %form-element-text-input-focus;
 }
+
+/* project level*/
+label span {
+  @extend %user-select-none;
+}
+.has-error {
+  @extend %form-element-error;
+}
+// TODO: float right here is too specific, this is currently used just for the role/policy selectors
+label.type-dialog {
+  @extend %anchor;
+  cursor: pointer;
+  float: right;
+}
+.type-toggle {
+  @extend %form-element, %sliding-toggle;
+}
+.checkbox-group {
+  @extend %checkbox-group;
+}
+%main-content form {
+  @extend %form;
+}
+span.label {
+  @extend %form-element-label;
+}
+%form table,
+%radio-group,
+%checkbox-group,
+%main-content form dl {
+  @extend %form-row;
+}
+%radio-group label,
+%main-content .type-select,
+%main-content .type-password,
+%main-content .type-text {
+  @extend %form-element;
+}
+%app-view-content form:not(.filter-bar) [role='radiogroup'],
+%modal-window [role='radiogroup'] {
+  @extend %radio-group;
+}
+%sliding-toggle + .checkbox-group {
+  margin-top: -1em;
+}

ui/packages/consul-ui/app/components/inline-alert/README.mdx

@@ -1,11 +1,14 @@
 ---
 class: css
+state: needs-love
 ---
 # inline-alert
 
 CSS component for giving inline feedback to the user, generally used for form
 element feedback like errors and suchlike.
 
+Potentially an improvement here could be that this could make use of `%horizontal-kv-list`, and do we really need a placeholder per state, can we just use a class?
+
 ```hbs preview-template
   <label class="type-text">
     <span>Input some text</span>
@@ -13,19 +16,19 @@ element feedback like errors and suchlike.
     <strong class={{or this.type "info"}}>{{capitalize (or this.type "info")}}</strong>
   </label>
 
-<figure>
+  <figure>
-  <figcaption>Provide a widget to change the <code>class</code></figcaption>
+    <figcaption>Provide a widget to change the <code>class</code></figcaption>
 
-  <select
+    <select
-    onchange={{action (mut this.type) value="target.value"}}
+      onchange={{action (mut this.type) value="target.value"}}
-  >
+    >
-    <option>info</option>
+      <option>info</option>
-    <option>success</option>
+      <option>success</option>
-    <option>warning</option>
+      <option>warning</option>
-    <option>error</option>
+      <option>error</option>
-  </select>
+    </select>
 
-</figure>
+  </figure>
 ```
 
 
@@ -43,4 +46,3 @@ strong.error {
   @extend %inline-alert-error;
 }
 ```
-

ui/packages/consul-ui/app/components/menu-panel/index.scss

@@ -1,6 +1,9 @@
 @import './skin';
 @import './layout';
 
+.menu-panel {
+  @extend %menu-panel;
+}
 %menu-panel [role='separator'] {
   @extend %menu-panel-separator;
 }

ui/packages/consul-ui/app/components/oidc-select/index.scss

@@ -1,5 +1,8 @@
 @import './skin';
 @import './layout';
+.oidc-select {
+  @extend %oidc-select;
+}
 %oidc-select label {
   @extend %form-element;
 }

ui/packages/consul-ui/app/components/pill/index.scss

@@ -1,2 +1,46 @@
 @import './skin';
 @import './layout';
+span.policy-service-identity,
+span.policy-node-identity,
+.leader,
+.consul-auth-method-type,
+.topology-metrics-source-type,
+.consul-transparent-proxy {
+  @extend %pill-200, %frame-gray-600;
+}
+span.policy-service-identity::before,
+span.policy-node-identity::before {
+  width: auto;
+  align-self: start;
+  font-size: inherit;
+}
+span.policy-node-identity::before {
+  content: 'Node Identity: ';
+}
+span.policy-service-identity::before {
+  content: 'Service Identity: ';
+}
+%pill.kubernetes::before {
+  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
+}
+%pill.terraform::before {
+  @extend %with-logo-terraform-color-icon, %as-pseudo;
+}
+%pill.nomad::before {
+  @extend %with-logo-nomad-color-icon, %as-pseudo;
+}
+%pill.consul::before {
+  @extend %with-logo-consul-color-icon, %as-pseudo;
+}
+%pill.aws::before {
+  @extend %with-logo-aws-color-icon, %as-pseudo;
+}
+%pill.leader::before {
+  @extend %with-star-outline-mask, %as-pseudo;
+}
+%pill.jwt::before {
+  @extend %with-logo-jwt-color-icon, %as-pseudo;
+}
+%pill.oidc::before {
+  @extend %with-logo-oidc-color-icon, %as-pseudo;
+}

ui/packages/consul-ui/app/components/progress/index.scss

@@ -1,4 +1,5 @@
-@import './progress/index';
+@import './skin';
+@import './layout';
 .progress.indeterminate {
   @extend %progress-indeterminate;
 }

ui/packages/consul-ui/app/components/radio-card/index.scss

@@ -1,4 +1,5 @@
-@import './radio-card/index';
+@import './skin';
+@import './layout';
 .radio-card {
   @extend %radio-card;
 }

ui/packages/consul-ui/app/components/radio-group/README.mdx

@@ -0,0 +1,31 @@
+---
+class: ember
+state: needs-love
+---
+# radio-group
+
+A component for creating horizontally laid out radio groups. It seems like we
+do not use the Ember component at all, but we do use the CSS component here,
+so we should look at this and decide exactly what to use, and whether it needs
+refactoring/deprecating.
+
+```hbs preview-template
+<RadioGroup @items={{
+  array
+  (hash
+    key="value-1"
+    value="Value 1"
+  )
+  (hash
+    key="value-2"
+    value="Value 2"
+  )
+}} />
+```
+
+
+```css
+[role="radio-group"] {
+  @extend %radio-group;
+}
+```

ui/packages/consul-ui/app/components/secret-button/index.scss

@@ -1,4 +1,5 @@
-@import './secret-button/index';
+@import './skin';
+@import './layout';
 .type-reveal {
   @extend %secret-button;
 }

ui/packages/consul-ui/app/components/table/index.scss

@@ -1,2 +1,53 @@
 @import './skin';
 @import './layout';
+%main-content table {
+  @extend %table;
+}
+%table-actions {
+  @extend %more-popover-menu;
+  overflow: visible;
+}
+%table-actions > [type='checkbox'] + label {
+  position: absolute;
+  right: 5px;
+}
+
+table.consul-metadata-list tbody tr {
+  cursor: default;
+}
+table.consul-metadata-list tbody tr:hover {
+  box-shadow: none;
+}
+
+%table th span::after {
+  @extend %with-info-circle-outline-mask, %as-pseudo;
+  color: $gray-500;
+  margin-left: 4px;
+}
+%table tbody tr {
+  cursor: pointer;
+}
+%table td:first-child {
+  padding: 0;
+}
+%table tbody tr:hover {
+  box-shadow: $decor-elevation-300;
+}
+
+%table td.folder::before {
+  @extend %with-folder-outline-mask, %as-pseudo;
+  background-color: $gray-300;
+  margin-top: 1px;
+  margin-right: 5px;
+}
+/**/
+
+@media #{$--lt-wide-table} {
+  /* hide actions on narrow screens, you can always click in do everything from there */
+  %table tr > .actions {
+    display: none;
+  }
+  .consul-intention-list tr > :nth-last-child(2) {
+    display: none;
+  }
+}

ui/packages/consul-ui/app/components/tabular-collection/index.scss

@@ -1,4 +1,3 @@
-@import './dom-recycling-table/index';
 table.dom-recycling {
   @extend %dom-recycling-table;
 }

ui/packages/consul-ui/app/components/tabular-details/index.scss

@@ -1,4 +1,5 @@
-@import './tabular-details/index';
+@import './skin';
+@import './layout';
 table.with-details {
   @extend %tabular-details;
 }

ui/packages/consul-ui/app/components/tooltip-panel/index.scss

@@ -1,4 +1,5 @@
-@import './tooltip-panel/index';
+@import './skin';
+@import './layout';
 .tooltip-panel {
   @extend %tooltip-panel;
 }

ui/packages/consul-ui/app/styles/components.scss

@@ -1,50 +1,46 @@
 @import 'ember-power-select';
-@import 'consul-ui/components/anchors/index';
+
-@import 'consul-ui/components/breadcrumbs/index';
+@import 'consul-ui/components/anchors';
-@import 'consul-ui/components/buttons/index';
+@import 'consul-ui/components/auth-form';
-@import 'consul-ui/components/checkbox-group/index';
+@import 'consul-ui/components/auth-modal';
-@import 'consul-ui/components/display-toggle/index';
+@import 'consul-ui/components/breadcrumbs';
-@import 'consul-ui/components/form-elements/index';
+@import 'consul-ui/components/buttons';
-@import 'consul-ui/components/inline-alert/index';
+@import 'consul-ui/components/card';
-@import 'consul-ui/components/pill/index';
+@import 'consul-ui/components/checkbox-group';
-@import 'consul-ui/components/popover-menu/index';
+@import 'consul-ui/components/code-editor';
-@import 'consul-ui/components/radio-group/index';
+@import 'consul-ui/components/composite-row';
-@import 'consul-ui/components/sliding-toggle/index';
+@import 'consul-ui/components/confirmation-dialog';
-@import 'consul-ui/components/table/index';
+@import 'consul-ui/components/definition-table';
-@import 'consul-ui/components/toggle-button/index';
+@import 'consul-ui/components/display-toggle';
+@import 'consul-ui/components/dom-recycling-table';
+@import 'consul-ui/components/empty-state';
+@import 'consul-ui/components/expanded-single-select';
+@import 'consul-ui/components/form-elements';
 @import 'consul-ui/components/flash-message';
+@import 'consul-ui/components/icon-definition';
+@import 'consul-ui/components/list-row';
+@import 'consul-ui/components/inline-alert';
+@import 'consul-ui/components/menu-panel';
+@import 'consul-ui/components/more-popover-menu';
+@import 'consul-ui/components/oidc-select';
+@import 'consul-ui/components/radio-card';
+@import 'consul-ui/components/pill';
+@import 'consul-ui/components/popover-menu';
+@import 'consul-ui/components/popover-select';
+@import 'consul-ui/components/progress';
+@import 'consul-ui/components/radio-group';
+@import 'consul-ui/components/secret-button';
+@import 'consul-ui/components/sliding-toggle';
+@import 'consul-ui/components/table';
+@import 'consul-ui/components/toggle-button';
+@import 'consul-ui/components/tabular-collection';
+@import 'consul-ui/components/tabular-details';
+@import 'consul-ui/components/tabular-dl';
+@import 'consul-ui/components/tag-list';
+@import 'consul-ui/components/tooltip-panel';
 
 /**/
 
-@import './components/card/index';
-@import './components/list-row/index';
-@import './components/expanded-single-select/index';
-
-@import './components/form-elements';
-@import './components/breadcrumbs';
-@import './components/anchors';
-@import './components/progress';
-@import './components/buttons';
-@import './components/composite-row';
-@import './components/secret-button';
-@import './components/pill';
-@import './components/table';
-@import './components/code-editor';
-@import './components/confirmation-dialog';
-@import './components/auth-form';
-@import './components/auth-modal';
-@import './components/oidc-select';
-@import './components/empty-state';
-@import './components/tabular-details';
-@import './components/tabular-collection';
-@import './components/popover-select';
-@import './components/tooltip-panel';
-@import './components/menu-panel';
-@import './components/more-popover-menu';
-@import './components/definition-table';
-@import './components/radio-card';
-@import './components/tabular-dl';
-
 @import 'consul-ui/components/app-view';
 @import 'consul-ui/components/brand-loader';
 @import 'consul-ui/components/skip-links';

ui/packages/consul-ui/app/styles/components/anchors.scss

@@ -1,27 +0,0 @@
-a[rel*='external']::after {
-  @extend %with-exit-icon, %as-pseudo;
-  margin-left: 8px;
-}
-%main-content label a[rel*='help'] {
-  color: $gray-400;
-}
-%main-content a[rel*='help']::after {
-  @extend %with-info-circle-outline-icon, %as-pseudo;
-  opacity: 0.4;
-}
-%main-content h2 a {
-  color: $gray-900;
-}
-%main-content h2 a[rel*='help']::after {
-  font-size: 0.65em;
-  margin-top: 0.2em;
-  margin-left: 0.2em;
-}
-
-.tab-section > p:only-child [rel*='help']::after {
-  content: none;
-}
-%main-content p a,
-%main-content dd a {
-  @extend %anchor;
-}

ui/packages/consul-ui/app/styles/components/app-view.scss

@@ -1 +0,0 @@
-@import './app-view/index';

ui/packages/consul-ui/app/styles/components/auth-form.scss

@@ -1,4 +0,0 @@
-@import './auth-form/index';
-.auth-form {
-  @extend %auth-form;
-}

ui/packages/consul-ui/app/styles/components/auth-modal.scss

@@ -1,4 +0,0 @@
-@import './auth-modal/index';
-#login-toggle + div {
-  @extend %auth-modal;
-}

ui/packages/consul-ui/app/styles/components/breadcrumbs.scss

@@ -1,7 +0,0 @@
-main header nav:first-child {
-  position: absolute;
-  top: 12px;
-}
-main header nav:first-child ol {
-  @extend %breadcrumbs;
-}

ui/packages/consul-ui/app/styles/components/buttons.scss

@@ -1,19 +0,0 @@
-button[type='submit'],
-button.type-submit,
-a.type-create {
-  @extend %primary-button;
-}
-// TODO: Once we move action-groups to use aria menu we can get rid of
-// some of this and just use not(aria-haspopup)
-button[type='reset'],
-header .actions button[type='button']:not(.copy-btn),
-button.type-cancel {
-  @extend %secondary-button;
-}
-.with-confirmation .type-delete,
-%app-view-content form button[type='button'].type-delete {
-  @extend %dangerous-button;
-}
-button.copy-btn {
-  @extend %copy-button;
-}

ui/packages/consul-ui/app/styles/components/composite-row/index.scss

@@ -1,19 +0,0 @@
-@import './layout';
-@import './skin';
-%composite-row {
-  @extend %list-row;
-}
-%composite-row > .header {
-  @extend %composite-row-header, %list-row-header;
-}
-%composite-row > .detail {
-  @extend %composite-row-detail, %list-row-detail;
-}
-%composite-row > .actions {
-  @extend %composite-row-actions;
-}
-%with-composite-row-intent:hover,
-%with-composite-row-intent:focus,
-%with-composite-row-intent:active {
-  @extend %list-row-intent;
-}

ui/packages/consul-ui/app/styles/components/confirmation-dialog/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/definition-table/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/empty-state.scss

@@ -1,4 +0,0 @@
-@import 'consul-ui/components/empty-state/index';
-.empty-state {
-  @extend %empty-state;
-}

ui/packages/consul-ui/app/styles/components/expanded-single-select/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/form-elements.scss

@@ -1,43 +0,0 @@
-label span {
-  @extend %user-select-none;
-}
-.has-error {
-  @extend %form-element-error;
-}
-// TODO: float right here is too specific, this is currently used just for the role/policy selectors
-label.type-dialog {
-  @extend %anchor;
-  cursor: pointer;
-  float: right;
-}
-.type-toggle {
-  @extend %form-element, %sliding-toggle;
-}
-.checkbox-group {
-  @extend %checkbox-group;
-}
-%main-content form {
-  @extend %form;
-}
-span.label {
-  @extend %form-element-label;
-}
-%form table,
-%radio-group,
-%checkbox-group,
-%main-content form dl {
-  @extend %form-row;
-}
-%radio-group label,
-%main-content .type-select,
-%main-content .type-password,
-%main-content .type-text {
-  @extend %form-element;
-}
-%app-view-content form:not(.filter-bar) [role='radiogroup'],
-%modal-window [role='radiogroup'] {
-  @extend %radio-group;
-}
-%sliding-toggle + .checkbox-group {
-  margin-top: -1em;
-}

ui/packages/consul-ui/app/styles/components/menu-panel.scss

@@ -1,3 +0,0 @@
-.menu-panel {
-  @extend %menu-panel;
-}

ui/packages/consul-ui/app/styles/components/oidc-select.scss

@@ -1,4 +0,0 @@
-@import './oidc-select/index';
-.oidc-select {
-  @extend %oidc-select;
-}

ui/packages/consul-ui/app/styles/components/pill.scss

@@ -1,44 +0,0 @@
-span.policy-service-identity,
-span.policy-node-identity,
-.leader,
-.consul-auth-method-type,
-.topology-metrics-source-type,
-.consul-transparent-proxy {
-  @extend %pill-200, %frame-gray-600;
-}
-span.policy-service-identity::before,
-span.policy-node-identity::before {
-  width: auto;
-  align-self: start;
-  font-size: inherit;
-}
-span.policy-node-identity::before {
-  content: 'Node Identity: ';
-}
-span.policy-service-identity::before {
-  content: 'Service Identity: ';
-}
-%pill.kubernetes::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
-%pill.terraform::before {
-  @extend %with-logo-terraform-color-icon, %as-pseudo;
-}
-%pill.nomad::before {
-  @extend %with-logo-nomad-color-icon, %as-pseudo;
-}
-%pill.consul::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-}
-%pill.aws::before {
-  @extend %with-logo-aws-color-icon, %as-pseudo;
-}
-%pill.leader::before {
-  @extend %with-star-outline-mask, %as-pseudo;
-}
-%pill.jwt::before {
-  @extend %with-logo-jwt-color-icon, %as-pseudo;
-}
-%pill.oidc::before {
-  @extend %with-logo-oidc-color-icon, %as-pseudo;
-}

ui/packages/consul-ui/app/styles/components/progress/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/radio-card/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/secret-button/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/table.scss

@@ -1,51 +0,0 @@
-%main-content table {
-  @extend %table;
-}
-%table-actions {
-  @extend %more-popover-menu;
-  overflow: visible;
-}
-%table-actions > [type='checkbox'] + label {
-  position: absolute;
-  right: 5px;
-}
-
-table.consul-metadata-list tbody tr {
-  cursor: default;
-}
-table.consul-metadata-list tbody tr:hover {
-  box-shadow: none;
-}
-
-%table th span::after {
-  @extend %with-info-circle-outline-mask, %as-pseudo;
-  color: $gray-500;
-  margin-left: 4px;
-}
-%table tbody tr {
-  cursor: pointer;
-}
-%table td:first-child {
-  padding: 0;
-}
-%table tbody tr:hover {
-  box-shadow: $decor-elevation-300;
-}
-
-%table td.folder::before {
-  @extend %with-folder-outline-mask, %as-pseudo;
-  background-color: $gray-300;
-  margin-top: 1px;
-  margin-right: 5px;
-}
-/**/
-
-@media #{$--lt-wide-table} {
-  /* hide actions on narrow screens, you can always click in do everything from there */
-  %table tr > .actions {
-    display: none;
-  }
-  .consul-intention-list tr > :nth-last-child(2) {
-    display: none;
-  }
-}

ui/packages/consul-ui/app/styles/components/tabular-details/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/tooltip-panel/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';