Merge pull request #1657 from lvuch/lh-1012

mostly input changes

assets/styles/base/_variables.scss

@@ -6,6 +6,7 @@ $column-gutter: 1.75%;
 $sideways-tabs-width: 200px;
 
 $z-indexes: (
+  zero: 0,
   default: 1,
   overContent: 2,
   hoverOverContent: 3,

assets/styles/fonts/_icons.scss

@@ -7,29 +7,25 @@ $icomoon-font-family: 'icons' !global;
 // Animated Icons
 // --------------------------
 .icon-spin {
-  -webkit-animation: icon-spin 2s infinite steps(8);
-          animation: icon-spin 2s infinite steps(8);
+  -webkit-animation: icon-spin 5000ms infinite linear;
+          animation: icon-spin 5000ms infinite linear;
 }
 
 @-webkit-keyframes icon-spin {
-  0% {
-    -webkit-transform: rotateZ(0deg);
-            transform: rotateZ(0deg);
+  from {
+      transform:rotate(0deg);
   }
-  100% {
-    -webkit-transform: rotateZ(360deg);
-            transform: rotateZ(360deg);
+  to {
+      transform:rotate(360deg);
   }
 }
 
 @keyframes icon-spin {
-  0% {
-    -webkit-transform: rotateZ(0deg);
-            transform: rotateZ(0deg);
+  from {
+      transform:rotate(0deg);
   }
-  100% {
-    -webkit-transform: rotateZ(360deg);
-            transform: rotateZ(360deg);
+  to {
+      transform:rotate(360deg);
   }
 }
 

assets/styles/global/_button.scss

@@ -1,6 +1,6 @@
 $btn-padding: 15px 40px;
 $xs-padding: 2px 3px;
-$sm-padding: 8px 14px;
+$sm-padding: 8px 13px;
 $lg-padding: 18px 30px;
 
 // -----------------------------------------------------------------------------

assets/styles/global/_labeled-input.scss

@@ -11,10 +11,11 @@
     transition-property: transform, font-size;
     transition-duration: 0.1s;
     transition-timing-function: ease-in-out;
-    // z-index: z-index('overContent');
     color: var(--input-label);
-    &.has-tooltip{
-      // z-index: z-index('hoverOverContent')
+    pointer-events: none;
+    z-index: z-index('overContent');
+    i {
+      pointer-events: initial;
     }
   }
 

assets/styles/global/_tooltip.scss

@@ -5,6 +5,7 @@
 
   display: block !important;
   z-index: z-index('tooltip');
+  max-width: 50vw;
 
   .tooltip-inner {
     background: var(--tooltip-bg);
@@ -232,14 +233,8 @@
 
     .button-divider {
       border-right: 1px solid var(--link-text);
-      margin: 10px 0;
-    }
-
-    &.btn-xs {
-      .button-divider {
-        margin: 1px 0;
-      }
     }
+    
     &.bg-primary:hover {
       background: var(--accent-btn-hover);
     }

components/form/KeyValue.vue

@@ -463,7 +463,7 @@ export default {
       </div>
     </div>
 
-    <div v-if="!titleAdd && (showAdd || showRead)" class="footer mt-10">
+    <div v-if="!titleAdd && (showAdd || showRead)" class="footer">
       <slot name="add" :add="add">
         <ButtonDropdown size="sm">
           <template #button-content>

components/form/WorkloadPorts.vue

@@ -194,7 +194,7 @@ export default {
       </div>
     </div>
     <div v-if="showAdd" class="footer">
-      <button type="button" class="btn role-tertiary add mt-10" @click="add()">
+      <button type="button" class="btn role-tertiary add" @click="add()">
         Add Port
       </button>
     </div>
@@ -246,9 +246,6 @@ export default {
   }
 
   .footer {
-    margin-top: 10px;
-    margin-left: 5px;
-
     .protip {
       float: right;
       padding: 5px 0;

components/nav/ClusterSwitcher.vue

@@ -104,7 +104,7 @@ export default {
     }
 
     .vs__dropdown-toggle {
-      height: calc(var(--header-height) - 18px);
+      height: calc(var(--header-height) - 19px);
       background-color: transparent;
       border: 0;
 
@@ -117,6 +117,7 @@ export default {
       user-select: none;
       cursor: default;
       color: white;
+      line-height: calc(var(--header-height) - 32px);
     }
   }
 

components/nav/NamespaceFilter.vue

@@ -250,6 +250,10 @@ export default {
     fill: white !important;
     color: white !important;
 }
+
+  .filter ::v-deep INPUT[type='search'] {
+    padding: 7px;
+  }
 </style>
 
 <template>

edit/workload/storage/index.vue

@@ -161,9 +161,11 @@ export default {
     </div>
     <div class="row">
       <div class="col span-6">
-        <ButtonDropdown v-if="!isView" :dual-action="false">
+        <ButtonDropdown v-if="mode!=='view'" ref="buttonDropdown" size="sm">
           <template #button-content>
-            <span>{{ t('workload.storage.addVolume') }}</span>
+            <button v-if="mode!=='view'" type="button" class="btn btn-sm text-primary bg-transparent" @click="addVolume(opt)">
+              {{ t('workload.storage.addVolume') }}
+            </button>
           </template>
           <template #popover-content>
             <ul class="list-unstyled menu">