Merge pull request #2267 from lvuch/lh-refinement

continued refinement, buttons and inputs

assets/styles/base/_variables.scss

@@ -1,7 +1,10 @@
 $max-width: 1440px !default;
 $min-width: 75% !default;
-$input-height: 55px;
+$input-height: 54px;
-// $input-height-small: 35px;
+
+$input-padding-lg: 18px;
+$input-padding-sm: 10px;
+$input-line-height: 18px;
 
 $column-gutter: 1.75%;
 

assets/styles/global/_button.scss

@@ -1,11 +1,7 @@
-// $btn-padding: 15px 40px;
+$btn-padding: 0 21px 0 21px;
-$btn-padding: 0 20px 0 20px;
 $btn-sm-padding: 0 7px 0 7px;
 $btn-height: 40px;
 $btn-sm-height: 30px;
-// $xs-padding: 2px 3px;
-// $sm-padding: 8px 13px;
-// $lg-padding: 18px 30px;
 
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the button component.
@@ -22,15 +18,16 @@ button,
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid transparent;
+  border: 0;
   padding: $btn-padding;
   border-radius: var(--border-radius);
-  color: white;
+  color: var(--lightest);
-  // height: $btn-height;
+  line-height: $btn-height;
-  line-height: 38px;
+  min-height: $btn-height;
 
   &:hover {
     text-decoration: none;
+    color: var(--lightest);
   }
 
   &.bg-transparent {
@@ -57,13 +54,19 @@ button,
 .btn-group-sm > .btn,
 .btn-sm .btn-label {
   padding: $btn-sm-padding;
-  height: $btn-sm-height;
+  min-height: $btn-sm-height;
   line-height: 28px;
 }
 
 //btn roles
 .role-primary {
   background: var(--link-text);
+  color: var(--primary-text);
+
+  &:hover {
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text);
+  }
 }
 
 .role-secondary {
@@ -81,9 +84,6 @@ button,
 .role-link {
   background: transparent;
   color: var(--link-text) !important;
-  padding: $btn-padding;
-  letter-spacing: 1px;
-  text-transform: uppercase;
 }
 
 .role-multi-action {
@@ -91,9 +91,6 @@ button,
   border: solid thin var(--link-text);
   color: var(--link-text);
   border-radius: 2px;
-  // line-height: 0;
-  // width: $btn-height;
-  // padding: 0;
 }
 
 .icon-group i {

assets/styles/global/_form.scss

@@ -17,7 +17,7 @@ TEXTAREA,
   display: block;
   box-sizing: border-box;
   width: 100%;
-  padding: 10px;
+  padding: $input-padding-sm;
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   border: solid var(--border-width) var(--input-border);
@@ -59,9 +59,13 @@ TEXTAREA,
   }
 }
 
+INPUT[type='search']:not(.vs__search) {
+  padding: calc(#{$input-padding-sm} + 2px);
+}
+
 TEXTAREA {
-  padding: 17px 10px 10px 10px;
+  padding: $input-padding-lg 10px 10px 10px;
-  line-height: 1.25;
+  line-height: $input-line-height;
 }
 
 FORM {
@@ -118,46 +122,10 @@ INPUT.inline-input {
   margin: 0 10px;
 }
 
-
-/*
-.validated-input {
-  INPUT {
-    outline-width: 2px;
-    outline-offset: -2px;
-  }
-
-  &.has-warning INPUT {
-    border-color: var(--warning);
-  }
-
-  &.has-error INPUT {
-    border-color: var(--error);
-  }
-
-  &.has-success INPUT {
-    border-color: var(--success);
-    padding-right: 32px;
-    background-image: url(../images/field-valid.svg);
-    background-size: 30px;
-    background-position: right;
-    background-repeat: no-repeat;
-  }
-
-  .input-warning-message {
-    color: var(--warning-text);
-  }
-
-  .input-error-message {
-    color: var(--error);
-  }
-}
-*/
-
 .input-title {
     clear: both;
     margin-left: 24px;
     font-size: 12px;
-    // color: rgba(255,255,255,.6);
 }
 
 .fixed select, .fixed.v-select, .fixed input:not(.vs__search){

assets/styles/global/_labeled-input.scss

@@ -18,14 +18,6 @@
     }
   }
 
-  /*
-  &.raised LABEL, .corner {
-    transform: translate(0, -20px);
-    font-size: 0.75em;
-    color: var(--input-label);
-  }
-  */
-
   .corner {
     top: 5px;
     right: 10px;
@@ -36,6 +28,10 @@
     transform: none !important;
   }
 
+  .required {
+    color: var(--error);
+  }
+
   INPUT, SELECT {
     position: relative;
     font-size: 14px;
@@ -59,17 +55,17 @@
     background-color: transparent;
     outline: 0;
     box-shadow: none;
-    padding: 17px 0 0 0;
+    padding: $input-padding-lg 0 0 0;
-    line-height: 1.25;
+    line-height: calc(#{$input-line-height} + 1px);
 
     &.no-label {
-      padding: 8.5px 0px 8.5px 0px;
+      padding: $input-padding-sm 0px $input-padding-sm 0px;
     }
   }
 
   &.view > DIV:not(.addon) {
     font-size: 14px;
-    padding: 17px 0 0 0;
+    padding: $input-padding-lg 0 0 0;
 
     &.no-label {
       padding-top:0px;
@@ -111,7 +107,3 @@
     color: var(--input-label);
   }
 }
-
-.required {
-  color: red;
-}

assets/styles/global/_select.scss

@@ -4,7 +4,7 @@
   width: 100%;
 
   .selected {
-    padding-top: 17px;
+    padding-top: $input-padding-lg;
   }
 }
 
@@ -12,13 +12,14 @@
   > .labeled-select:not(.taggable),
   > .unlabeled-select:not(.taggable) {
     min-height: $input-height;
+    padding-bottom: calc(#{$input-padding-sm}/2);
   }
 }
 
 .labeled-select,
 .unlabeled-select {
   min-width: 75px;
-  // min-height: $input-height;
+  // line-height: $input-line-height;
   
   .v-select {
     &.inline {
@@ -63,7 +64,7 @@
   }
 
   .v-select.inline:not(.vs--single) {
-    margin-bottom: -4px; // targets multi-select tag boxes to make the same size as rows next to it
+    margin-bottom: -5px; // targets multi-select tag boxes to make the same size as rows next to it
     min-height: 30px;
 
     .vs__selected {
@@ -93,6 +94,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
+  padding: 3px 0;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;
@@ -104,11 +106,7 @@
       height: 100%;
 
       &.vs--unsearchable {
-        position: absolute;
+
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
       }
 
       .vs__dropdown-toggle {
@@ -122,6 +120,7 @@
 
   &:not(.view) {
     background-color: var(--input-bg);
+    border: solid var(--border-width) var(--input-border);
 
     &:hover {
       &,
@@ -130,4 +129,8 @@
       }
     }
   }
+
+  .labeled-tooltip .status-icon {
+    top: $input-padding-sm;
+  }
 }

assets/styles/global/_tooltip.scss

@@ -61,7 +61,7 @@
         border-top-width: 0;
         border-bottom-color: var(--tooltip-bg);
         top: 1px;
-        left: -$triangle-inner-size;
+        left: -20px;
         background: transparent;
       }
     }

assets/styles/themes/_light.scss

@@ -67,7 +67,7 @@ $selected: rgba($primary, .5);
   --header-bg                  : #3797D5;
   --header-logo                : #{$lightest};
   --header-btn-bg              : #317DB0;
-  --header-btn-text            : white;
+  --header-btn-text            : #{$lightest};
   --header-height              : 55px;
   --nav-width                  : 250px;
   --nav-bg                     : #{$lighter};
@@ -83,7 +83,7 @@ $selected: rgba($primary, .5);
   --border-width              : 1px;
   --border-radius              : 4px;
   --outline                    : #{rgba($medium, 0.75)};
-  --outline-width              : 2px;
+  --outline-width              : 1px;
 
   --accent-btn                 : #{rgba($primary, 0.2)};
   --accent-btn-hover           : #{rgba($primary, 0.5)};

assets/styles/vendor/vue-select.scss

@@ -33,7 +33,7 @@
   position: absolute;
   left: -2px;
   z-index: z-index('dropdownContent');
-  padding: 5px 0;
+  padding: $input-padding-sm 0;
   margin: 0;
   width: calc(100% + 4px);
   max-height: 350px;
@@ -60,7 +60,7 @@
 .vs__dropdown-option {
   line-height: 1.42857143; /* Normalize line height */
   display: block;
-  padding: 3px 20px;
+  padding: 0 calc(#{$input-padding-sm}/2);
   clear: both;
   color: var(--dropdown-text);
   white-space: nowrap;
@@ -200,7 +200,7 @@ $transition-duration: 150ms;
   width: 0;
   max-width: 100%;
   flex-grow: 1;
-  margin-left: 7px;
+  margin-left: $input-padding-sm;
 }
 
 .vs__search::placeholder {
@@ -242,7 +242,7 @@ $transition-duration: 150ms;
   border: 1px solid var(--primary);
   border-radius: 3px;
   color: var(--link-text);
-  margin-left: 7px;
+  margin-left: $input-padding-sm;
 
   &:not(:last-of-type) {
     margin-right: 2px;
@@ -283,7 +283,7 @@ $transition-duration: 150ms;
         opacity: 0.4;
       }
       .vs__search {
-        margin-left: 7px;
+        margin-left: $input-padding-sm;
       }
     }
     .vs__selected {
@@ -346,9 +346,19 @@ $transition-duration: 150ms;
 }
 
 header .vs-select .vs__dropdown-toggle {
-  background: red !important;
+  background: var(--error) !important;
 }
 
 .vs__no-options {
   padding: 3px 20px;
 }
+
+header {
+  .unlabeled-select {
+    padding: 0;
+
+    &.focused {
+      border: 0;
+    }
+  }
+}

components/AsyncButton.vue

@@ -40,7 +40,7 @@ export default {
 
     actionColor: {
       type:    String,
-      default: 'bg-primary',
+      default: 'role-primary',
     },
     waitingColor: {
       type:    String,

components/Glance.vue

@@ -27,7 +27,6 @@ export default {
       flex-direction: row;
       justify-content: space-evenly;
       padding: 11px;
-      align-items: center;
 
     .tile {
           display: flex;

components/ResourceDetail/Masthead.vue

@@ -398,4 +398,18 @@ export default {
     position: relative;
     top: -2px;
   }
+
+  .left-right-split {
+    display: grid;
+    align-items: center;
+
+    .left-half {
+      grid-column: 1;
+    }
+
+    .right-half {
+      grid-column: 2;
+    }
+  }
+
 </style>

components/RoleBindings.vue

@@ -403,7 +403,7 @@ export default {
         />
       </div>
       <div class="remove">
-        <button v-t="'generic.remove'" :disabled="isView" type="button" class="btn bg-transparent role-link" @click="remove(row)" />
+        <button v-t="'generic.remove'" :disabled="isView" type="button" class="btn role-link" @click="remove(row)" />
       </div>
     </div>
     <div>

components/SortableTable/index.vue

@@ -462,7 +462,7 @@ export default {
             v-for="act in availableActions"
             :key="act.action"
             type="button"
-            class="btn bg-primary"
+            class="btn role-primary"
             :disabled="!act.enabled"
             @click="applyTableAction(act, null, $event)"
             @mouseover="setBulkActionOfInterest(act)"
@@ -680,9 +680,6 @@ $spacing: 10px;
   }
 
   tbody {
-    // border-left: 40px solid transparent;
-    // border-right: 40px solid transparent;
-    // border-bottom: 2px solid var(--border);
 
     tr {
       border-bottom: 1px solid var(--sortable-table-top-divider);

components/auth/login/github.vue

@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <button ref="btn" class="btn bg-primary" style="font-size: 18px;" @click="login">
+  <button ref="btn" class="btn role-primary" @click="login">
     Log In with GitHub
   </button>
 </template>

components/form/ArrayListGrouped.vue

@@ -21,7 +21,7 @@ export default {
       </InfoBox>
     </template>
     <template v-slot:remove-button="scope">
-      <button v-if="!isDisabled" type="button" class="btn role-link close" @click="scope.remove">
+      <button v-if="!isDisabled" type="button" class="btn role-link close btn-sm" @click="scope.remove">
         <i class="icon icon-2x icon-x" />
       </button>
       <span v-else></span>

components/form/EnvVars.vue

@@ -110,7 +110,7 @@ export default {
       v-t="'workload.container.command.addEnvVar'"
       :disabled="isView"
       type="button"
-      class="btn btn-sm role-tertiary add"
+      class="btn role-tertiary add"
       @click="addFromReference"
     />
   </div>

components/form/KeyValue.vue

@@ -424,7 +424,7 @@ export default {
 
         <div v-if="removeAllowed" :key="i" class="kv-item remove">
           <slot name="removeButton" :remove="remove" :row="row">
-            <button type="button" :disabled="isView" class="btn bg-transparent role-link" @click="remove(i)">
+            <button type="button" :disabled="isView" class="btn role-link" @click="remove(i)">
               {{ removeLabel || t('generic.remove') }}
             </button>
           </slot>
@@ -434,13 +434,13 @@ export default {
 
     <div v-if="addAllowed || readAllowed" class="footer">
       <slot name="add" :add="add">
-        <button v-if="addAllowed" :disabled="isView" type="button" class="btn btn-sm role-tertiary add" @click="add()">
+        <button v-if="addAllowed" :disabled="isView" type="button" class="btn role-tertiary add" @click="add()">
           {{ addLabel }}
         </button>
         <FileSelector
           v-if="readAllowed"
           :disabled="isView"
-          class="btn-sm role-tertiary"
+          class="role-tertiary"
           :label="t('generic.readFromFile')"
           :include-file-name="true"
           @selected="onFileSelected"

components/form/LabeledSelect.vue

@@ -271,7 +271,7 @@ export default {
 <style lang='scss' scoped>
 .labeled-select {
   .labeled-container {
-    padding: 8px 0 0 8px;
+    padding: $input-padding-sm 0 1px $input-padding-sm;
 
     label {
       margin: 0;
@@ -290,7 +290,7 @@ export default {
     }
   }
   ::v-deep .vs__selected-options {
-    margin-top: -4px;
+    margin-top: -5px;
   }
 
   ::v-deep .v-select:not(.vs--single) {

components/form/LabeledTooltip.vue

@@ -51,7 +51,7 @@ export default {
      .status-icon {
          position:  absolute;
          right: 30px;
-         top: 16px;
+         top: $input-padding-lg;
          font-size: 20px;
          z-index: z-index(hoverOverContent);
 

components/form/MatchExpressions.vue

@@ -237,7 +237,7 @@ export default {
         <button
           v-if="!isView"
           type="button"
-          class="btn bg-transparent role-link"
+          class="btn role-link"
           :style="{padding:'0px'}"
 
           :disabled="mode==='view'"

components/form/Ports.vue

@@ -210,7 +210,7 @@ export default {
             />
           </td>
           <td v-if="showRemove" class="remove">
-            <button type="button" class="btn bg-transparent role-link" @click="remove(idx)">
+            <button type="button" class="btn role-link" @click="remove(idx)">
               Remove
             </button>
           </td>

components/form/ServicePorts.vue

@@ -200,7 +200,7 @@ export default {
           />
         </div>
         <div v-if="showRemove" class="remove">
-          <button type="button" class="btn bg-transparent role-link" @click="remove(idx)">
+          <button type="button" class="btn role-link" @click="remove(idx)">
             <t k="generic.remove" />
           </button>
         </div>

components/form/TextAreaAutoGrow.vue

@@ -14,7 +14,7 @@ export default {
 
     minHeight: {
       type:    Number,
-      default: 33,
+      default: 35,
     },
     maxHeight: {
       type:    Number,

components/form/Tolerations.vue

@@ -180,7 +180,7 @@ export default {
         <button
           v-if="!isView"
           type="button"
-          class="btn bg-transparent role-link"
+          class="btn role-link"
           :disabled="mode==='view'"
           @click="remove(rule)"
         >

components/form/WorkloadPorts.vue

@@ -261,7 +261,7 @@ export default {
       </div>
 
       <div v-if="!row._showHost && row._serviceType !== 'LoadBalancer'" class="add-host">
-        <button :disabled="mode==='view'" type="button" class="btn btn-sm role-tertiary" @click="row._showHost = true">
+        <button :disabled="mode==='view'" type="button" class="btn role-tertiary" @click="row._showHost = true">
           {{ t('workloadPorts.addHost') }}
         </button>
       </div>
@@ -279,7 +279,7 @@ export default {
       </div>
 
       <div v-if="showRemove" class="remove">
-        <button type="button" class="btn bg-transparent role-link" @click="remove(idx)">
+        <button type="button" class="btn role-link" @click="remove(idx)">
           {{ t('workloadPorts.remove') }}
         </button>
       </div>
@@ -305,7 +305,7 @@ $checkbox: 75;
 }
 .ports-headers, .ports-row{
   display: grid;
-  grid-template-columns: 20% 3fr 160px 80px 10% 58px;
+  grid-template-columns: 20% 32% 145px 80px .5fr .5fr;
   grid-column-gap: $column-gutter;
   margin-bottom: 10px;
   align-items: center;
@@ -315,7 +315,7 @@ $checkbox: 75;
   }
 
   &.show-host{
-    grid-template-columns: 20% 3fr 160px 80px 160px 10% 1fr
+    grid-template-columns: 20% 20% 145px 80px 140px .5fr .5fr;
   }
 
 }

components/nav/ClusterSwitcher.vue

@@ -114,6 +114,8 @@ export default {
     width: 100%;
     display: grid;
     grid-template-columns: 15% 85%;
+    align-items: center;
+    align-content: center;
   }
 
   .cluster-switcher-os-logo {
@@ -139,6 +141,8 @@ export default {
       display: grid;
       width: 100%;
       grid-template-columns: 25px fit-content(100%);
+      align-items: center;
+      align-content: center;
     }
   }
 

components/nav/Group.vue

@@ -202,7 +202,6 @@ export default {
   .body ::v-deep > .child {
     A {
       border-left: solid 5px transparent;
-      transition: ease-in-out all .25s;
     }
 
     A:focus {

components/nav/Header.vue

@@ -203,11 +203,19 @@ export default {
     > .import {
       grid-area: import;
       background-color: var(--header-bg);
+
+      .btn {
+        padding: 0 $input-padding-sm;
+      }
     }
 
     > .kubectl {
       grid-area: kubectl;
       background-color: var(--header-bg);
+
+      .btn {
+        padding: 0 $input-padding-sm;
+      }
     }
 
     > .back,

components/nav/NamespaceFilter.vue

@@ -380,10 +380,10 @@ export default {
 
 .filter ::v-deep .unlabeled-select {
   background-color: transparent;
+  border: 0;
 }
 
 .filter ::v-deep .unlabeled-select:not(.focused) {
-  border: var(--outline-width) solid transparent;
   min-height: 0;
 }
 
@@ -400,13 +400,13 @@ export default {
   user-select: none;
   cursor: default;
   background: rgba(255, 255, 255, 0.25);
-  border: solid white thin;
+  border: solid var(--header-btn-text) thin;
-  color: white;
+  color: var(--header-btn-text);
   height: calc(var(--header-height) - 26px);
 }
 
 .filter ::v-deep .unlabeled-select .vs__search::placeholder {
-  color: white;
+  color: var(--header-btn-text);
 }
 
 .filter ::v-deep .unlabeled-select INPUT:hover {
@@ -424,12 +424,12 @@ export default {
 }
 
 .filter ::v-deep .unlabeled-select .vs__deselect:after {
-  color: white;
+  color: var(--header-btn-text);
 }
 
 .filter ::v-deep .unlabeled-select .v-select .vs__actions:after {
-  fill: white !important;
+  fill: var(--header-btn-text) !important;
-  color: white !important;
+  color: var(--header-btn-text) !important;
 }
 
 .filter ::v-deep .unlabeled-select INPUT[type='search'] {

components/nav/WindowManager/ContainerLogs.vue

@@ -457,13 +457,13 @@ export default {
         </template>
       </Select>
       <div class="pull-left ml-5">
-        <button class="btn btn-sm bg-primary" :disabled="isFollowing" @click="follow">
+        <button class="btn bg-primary" :disabled="isFollowing" @click="follow">
           <t k="wm.containerLogs.follow" />
         </button>
-        <button class="btn btn-sm bg-primary" @click="clear">
+        <button class="btn bg-primary" @click="clear">
           <t k="wm.containerLogs.clear" />
         </button>
-        <AsyncButton class="btn-sm" mode="download" @click="download" />
+        <AsyncButton mode="download" @click="download" />
       </div>
 
       <div class="pull-right text-center p-10" style="min-width: 80px;">
@@ -477,7 +477,7 @@ export default {
           trigger="click"
           placement="top"
         >
-          <button class="btn btn-sm bg-primary">
+          <button class="btn bg-primary">
             <i class="icon icon-gear" />
           </button>
 

components/nav/WindowManager/Window.vue

@@ -65,7 +65,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $title-height: 41px;
+  $title-height: 60px;
 
   .window {
     display: grid;
@@ -83,7 +83,7 @@ export default {
     height: 100%;
     vertical-align: middle;
     // line-height: $title-height - 4px;
-    padding: 2px 5px;
+    padding: 10px;
   }
 
   .body {

components/nav/WorkspaceSwitcher.vue

@@ -91,10 +91,11 @@ export default {
 
 .filter ::v-deep .unlabeled-select {
   background-color: transparent;
+  border: 0;
 }
 
 .filter ::v-deep .unlabeled-select:not(.focused) {
-  border: var(--outline-width) solid transparent;
+  min-height: 0;
 }
 
 .filter ::v-deep .unlabeled-select:not(.view):hover .vs__dropdown-menu {
@@ -105,8 +106,14 @@ export default {
   margin: 0;
 }
 
+.filter ::v-deep .unlabeled-select .v-select .vs__selected {
+  margin: $input-padding-sm;
+  user-select: none;
+  color: var(--header-btn-text);
+}
+
 .filter ::v-deep .unlabeled-select .vs__search::placeholder {
-  color: white;
+  color: var(--header-btn-text);
 }
 
 .filter ::v-deep .unlabeled-select INPUT:hover {
@@ -124,12 +131,12 @@ export default {
 }
 
 .filter ::v-deep .unlabeled-select .vs__deselect:after {
-  color: white;
+  color: var(--header-btn-text);
 }
 
 .filter ::v-deep .unlabeled-select .v-select .vs__actions:after {
-  fill: white !important;
+  fill: var(--header-btn-text) !important;
-  color: white !important;
+  color: var(--header-btn-text) !important;
 }
 
 .filter ::v-deep .unlabeled-select INPUT[type='search'] {

edit/monitoring.coreos.com.prometheusrule/GroupRules.vue

@@ -118,7 +118,7 @@ export default {
             v-if="!isView"
             :disabled="disableAddRecord"
             type="button"
-            class="btn btn-sm role-tertiary"
+            class="btn role-tertiary"
             @click="addRule('record')"
           >
             <t k="prometheusRule.recordingRules.addLabel" />
@@ -126,7 +126,7 @@ export default {
           <span v-else></span>
         </template>
         <template v-slot:remove-button="props">
-          <button v-if="!isView" type="button" class="btn role-link close" @click="removeRule(props.i)">
+          <button v-if="!isView" type="button" class="btn role-link close btn-sm" @click="removeRule(props.i)">
             <i class="icon icon-2x icon-x" />
           </button>
           <span v-else></span>
@@ -162,7 +162,7 @@ export default {
             v-if="!isView"
             :disabled="disableAddAlert"
             type="button"
-            class="btn btn-sm role-tertiary"
+            class="btn role-tertiary"
             @click="addRule('alert')"
           >
             <t k="prometheusRule.alertingRules.addLabel" />
@@ -170,7 +170,7 @@ export default {
           <span v-else></span>
         </template>
         <template v-slot:remove-button="props">
-          <button v-if="!isView" type="button" class="btn role-link close" @click="removeRule(props.i)">
+          <button v-if="!isView" type="button" class="btn role-link close btn-sm" @click="removeRule(props.i)">
             <i class="icon icon-2x icon-x" />
           </button>
           <span v-else></span>

edit/rio.cattle.io.service/Permissions.vue

@@ -204,7 +204,7 @@ export default {
             </td>
           </template>
           <td v-if="showRemove" class="remove">
-            <button type="button" class="btn bg-transparent role-link" @click="remove(idx)">
+            <button type="button" class="btn role-link" @click="remove(idx)">
               Remove
             </button>
           </td>

edit/rio.cattle.io.service/index.vue

@@ -187,14 +187,14 @@ function matchingNamespaceGroupedByKey(ary, namespace) {
       <div class="box">
         <p>The primary container</p>
         <p>{{ value.nameDisplay }}</p>
-        <button type="button" class="btn bg-primary" @click="selectContainer('')">
+        <button type="button" class="btn role-primary" @click="selectContainer('')">
           Edit
         </button>
       </div>
       <div v-for="choice in value.spec.containers" :key="choice.name" class="box">
         <p>Sidecar</p>
         <p>{{ choice.name }}</p>
-        <button type="button" class="btn bg-primary" @click="selectContainer(choice.name)">
+        <button type="button" class="btn role-primary" @click="selectContainer(choice.name)">
           Edit
         </button>
         <button type="button" class="btn bg-error" @click="remove(choice.name)">

edit/workload/storage/Mount.vue

@@ -111,7 +111,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <button v-if="mode!=='view'" type="button" class="btn btn-sm role-tertiary" @click="volumeMounts.push({name})">
+      <button v-if="mode!=='view'" type="button" class="btn role-tertiary" @click="volumeMounts.push({name})">
         {{ t('workload.storage.addMount') }}
       </button>
     </div>

layouts/default.vue

@@ -365,6 +365,10 @@ export default {
         align-self: center;
         text-align: right;
       }
+
+      .role-multi-action {
+        padding: 0 $input-padding-sm;
+      }
     }
 
   }

pages/c/_cluster/apps/charts.vue

@@ -320,36 +320,16 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <div class="clearfix">
+    <header>
-      <h1 class="pull-left">
+      <div class="title">
+        <h1 class="m-0">
           {{ t('catalog.charts.header') }}
         </h1>
-      <div class="pull-right">
-        <input ref="searchQuery" v-model="searchQuery" type="search" class="input-sm" :placeholder="t('catalog.charts.search')">
-        <button v-shortkey.once="['/']" class="hide" @shortkey="focusSearch()" />
-      </div>
-      <div class="pull-right pr-10">
-        <Select
-          v-model="category"
-          :clearable="false"
-          :searchable="false"
-          :options="categories"
-          placement="bottom"
-          label="label"
-          style="min-width: 200px;"
-          :reduce="opt => opt.value"
-        >
-          <template #option="opt">
-            {{ opt.label }} ({{ opt.count }})
-          </template>
-        </Select>
-      </div>
-      <div class="pull-right pr-10">
-        <AsyncButton mode="refresh" class="btn-sm" @click="refresh" />
-      </div>
       </div>
+    </header>
 
-    <div class="clearfix mt-5">
+    <div class="left-right-split">
+      <div>
         <Checkbox
           :value="allRepos"
           :label="t('catalog.charts.all')"
@@ -366,6 +346,28 @@ export default {
         />
       </div>
 
+      <Select
+        v-model="category"
+        :clearable="false"
+        :searchable="false"
+        :options="categories"
+        placement="bottom"
+        label="label"
+        style="min-width: 200px;"
+        :reduce="opt => opt.value"
+      >
+        <template #option="opt">
+          {{ opt.label }} ({{ opt.count }})
+        </template>
+      </Select>
+
+      <input ref="searchQuery" v-model="searchQuery" type="search" class="input-sm" :placeholder="t('catalog.charts.search')">
+
+      <button v-shortkey.once="['/']" class="hide" @shortkey="focusSearch()" />
+      <AsyncButton mode="refresh" size="sm" @click="refresh" />
+      <!-- </div> -->
+    </div>
+
     <Banner v-for="err in loadingErrors" :key="err" color="error" :label="err" />
 
     <div v-if="allCharts.length">
@@ -415,4 +417,27 @@ export default {
     &.color8 { background: var(--app-color8-bg); border: 1px solid var(--app-color8-accent); }
   }
 
+  .left-right-split {
+      padding: 0 0 20px 0;
+      width: 100%;
+      z-index: z-index('fixedTableHeader');
+      background: transparent;
+      display: grid;
+      grid-template-columns: 50% auto auto 40px;
+      align-content: center;
+      grid-column-gap: 10px;
+
+    // .left-half {
+    //   background: lavenderblush;
+    //   grid-column: 1;
+    //   // grid-area: left;
+    // }
+
+    // .right-half {
+    //   background: darkslateblue;
+    //   grid-column: 2;
+    //   // grid-area: right;
+    // }
+  }
+
 </style>

pages/design-system/form-controls.vue

@@ -73,7 +73,7 @@ export default {
         :tooltip="tooltip"
       />
     </div>
-    <div class="row m-20">
+    <div class="row m-20" style="background: tomato;">
       <div class="col span-4">
         <LabeledInput
           v-model="x"