mirror of https://github.com/rancher/dashboard.git
Merge pull request #2267 from lvuch/lh-refinement
continued refinement, buttons and inputs
This commit is contained in:
Lauren Harden
GitHub
commit
ff41fadb17
|
|
@ -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%;
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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 {
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
border-top-width: 0;
|
||||
border-bottom-color: var(--tooltip-bg);
|
||||
top: 1px;
|
||||
left: -$triangle-inner-size;
|
||||
left: -20px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
|
||||
actionColor: {
|
||||
type: String,
|
||||
default: 'bg-primary',
|
||||
default: 'role-primary',
|
||||
},
|
||||
waitingColor: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ export default {
|
|||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
padding: 11px;
|
||||
align-items: center;
|
||||
|
||||
.tile {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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'"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: 33,
|
||||
default: 35,
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -202,7 +202,6 @@ export default {
|
|||
.body ::v-deep > .child {
|
||||
A {
|
||||
border-left: solid 5px transparent;
|
||||
transition: ease-in-out all .25s;
|
||||
}
|
||||
|
||||
A:focus {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
color: white;
|
||||
border: solid var(--header-btn-text) thin;
|
||||
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;
|
||||
color: white !important;
|
||||
fill: var(--header-btn-text) !important;
|
||||
color: var(--header-btn-text) !important;
|
||||
}
|
||||
|
||||
.filter ::v-deep .unlabeled-select INPUT[type='search'] {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
color: white !important;
|
||||
fill: var(--header-btn-text) !important;
|
||||
color: var(--header-btn-text) !important;
|
||||
}
|
||||
|
||||
.filter ::v-deep .unlabeled-select INPUT[type='search'] {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -365,6 +365,10 @@ export default {
|
|||
align-self: center;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.role-multi-action {
|
||||
padding: 0 $input-padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -320,50 +320,52 @@ export default {
|
|||
<template>
|
||||
<Loading v-if="$fetchState.pending" />
|
||||
<div v-else>
|
||||
<div class="clearfix">
|
||||
<h1 class="pull-left">
|
||||
{{ 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()" />
|
||||
<header>
|
||||
<div class="title">
|
||||
<h1 class="m-0">
|
||||
{{ t('catalog.charts.header') }}
|
||||
</h1>
|
||||
</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">
|
||||
<Checkbox
|
||||
:value="allRepos"
|
||||
:label="t('catalog.charts.all')"
|
||||
:class="{'pull-left': true, 'repo': true}"
|
||||
@input="toggleAll($event)"
|
||||
/>
|
||||
<Checkbox
|
||||
v-for="r in repoOptions"
|
||||
:key="r.label"
|
||||
v-model="r.enabled"
|
||||
:label="r.label"
|
||||
:class="{'pull-left': true, 'repo': true, [r.color]: true}"
|
||||
@input="toggleRepo(r, $event)"
|
||||
/>
|
||||
<div class="left-right-split">
|
||||
<div>
|
||||
<Checkbox
|
||||
:value="allRepos"
|
||||
:label="t('catalog.charts.all')"
|
||||
:class="{'pull-left': true, 'repo': true}"
|
||||
@input="toggleAll($event)"
|
||||
/>
|
||||
<Checkbox
|
||||
v-for="r in repoOptions"
|
||||
:key="r.label"
|
||||
v-model="r.enabled"
|
||||
:label="r.label"
|
||||
:class="{'pull-left': true, 'repo': true, [r.color]: true}"
|
||||
@input="toggleRepo(r, $event)"
|
||||
/>
|
||||
</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" />
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue