Merge pull request #2267 from lvuch/lh-refinement

continued refinement, buttons and inputs
rancher · Feb 18, 2021 · ff41fad · ff41fad
2 parents 224e5fd + 3f29d5c
commit ff41fad
Show file tree

Hide file tree

Showing 39 changed files with 214 additions and 184 deletions.
diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss
@@ -1,7 +1,10 @@
 $max-width: 1440px !default;
 $min-width: 75% !default;
-$input-height: 55px;
-// $input-height-small: 35px;
+$input-height: 54px;
+
+$input-padding-lg: 18px;
+$input-padding-sm: 10px;
+$input-line-height: 18px;
 
 $column-gutter: 1.75%;
 

diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss
@@ -1,11 +1,7 @@
-// $btn-padding: 15px 40px;
-$btn-padding: 0 20px 0 20px;
+$btn-padding: 0 21px 0 21px;
 $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;
-  // height: $btn-height;
-  line-height: 38px;
+  color: var(--lightest);
+  line-height: $btn-height;
+  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,19 +84,13 @@ button,
 .role-link {
   background: transparent;
   color: var(--link-text) !important;
-  padding: $btn-padding;
-  letter-spacing: 1px;
-  text-transform: uppercase;
 }
 
 .role-multi-action {
   background: var(--accent-btn);
   border: solid thin var(--link-text);
   color: var(--link-text);
   border-radius: 2px;
-  // line-height: 0;
-  // width: $btn-height;
-  // padding: 0;
 }
 
 .icon-group i {

diff --git a/assets/styles/global/_form.scss b/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;
-  line-height: 1.25;
+  padding: $input-padding-lg 10px 10px 10px;
+  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){

diff --git a/assets/styles/global/_labeled-input.scss b/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;
-    line-height: 1.25;
+    padding: $input-padding-lg 0 0 0;
+    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;
-}
diff --git a/assets/styles/global/_select.scss b/assets/styles/global/_select.scss
@@ -4,21 +4,22 @@
   width: 100%;
 
   .selected {
-    padding-top: 17px;
+    padding-top: $input-padding-lg;
   }
 }
 
 .col {
   > .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;
+  }
 }
diff --git a/assets/styles/global/_tooltip.scss b/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;
       }
     }

diff --git a/assets/styles/themes/_light.scss b/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)};

diff --git a/assets/styles/vendor/vue-select.scss b/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;
+    }
+  }
+}
diff --git a/components/AsyncButton.vue b/components/AsyncButton.vue
@@ -40,7 +40,7 @@ export default {
 
     actionColor: {
       type:    String,
-      default: 'bg-primary',
+      default: 'role-primary',
     },
     waitingColor: {
       type:    String,

diff --git a/components/Glance.vue b/components/Glance.vue
@@ -27,7 +27,6 @@ export default {
       flex-direction: row;
       justify-content: space-evenly;
       padding: 11px;
-      align-items: center;
 
     .tile {
           display: flex;