5fcc3b053e
1. Support refresh button to refresh data for the SelectTable component. 2. When creating an instance/ironic/container, you can click to create a network/security group, then create a new resource in a new window, refresh the data in the previous window and select the newly created resource. Closes-Bug: 2042928 Change-Id: I66bdbf848d375e45f0ab8941b0989165ad86a137
388 lines
13 KiB
Plaintext
388 lines
13 KiB
Plaintext
/* init */
|
|
@blue-1: #0c63fa;
|
|
@blue-2: rgba(0, 104, 255, 65%);
|
|
@blue-3: rgba(89, 157, 255, 35%);
|
|
@blue-4: #005ade;
|
|
@blue-5: rgba(25, 128, 255, 10%);
|
|
@blue-6: #e8f2ff;
|
|
@primary-color: @blue-1;
|
|
@info-color: @blue-2;
|
|
@hover-color: @blue-4;
|
|
@heading-color: rgba(0, 0, 0, 65%);
|
|
|
|
@green-1: #57e39b;
|
|
@green-2: rgba(87, 227, 155, 65%);
|
|
@green-3: rgba(87, 227, 155, 35%);
|
|
@success-color: @green-1;
|
|
|
|
@yellow-1: #fedf40;
|
|
@yellow-2: rgba(254, 223, 64, 65%);
|
|
@yellow-3: rgba(254, 223, 64, 35%);
|
|
@warn-color: @yellow-1;
|
|
|
|
@warn-light-color: #f6b23d;
|
|
@warn-dark-color: #fa8c16;
|
|
|
|
@red-1: #eb354d;
|
|
@red-2: rgba(235, 53, 77, 65%);
|
|
@red-3: rgba(235, 53, 77, 35%);
|
|
@error-color: @red-1;
|
|
@danger-color: #c4233e;
|
|
@danger-color-hover: #f76070;
|
|
@red: @red-color03;
|
|
|
|
@gray-1: #d2d2d2;
|
|
@gray-2: #f2f2f2;
|
|
@gray-3: #fafafa;
|
|
@gray-4: #f0f1f7;
|
|
@gray-5: #f2f3f8;
|
|
|
|
@dark-text-title: rgba(0, 0, 0, 100%);
|
|
@dark-text-title-second: rgba(0, 0, 0, 85%);
|
|
@color-text-body: rgba(0, 0, 0, 65%);
|
|
@color-text-caption: rgba(0, 0, 0, 45%);
|
|
@color-text-disable: rgba(0, 0, 0, 25%);
|
|
@color-text-default: rgb(29, 33, 41);
|
|
@color-text-title: rgba(0, 0, 0, 85%);
|
|
|
|
@size-header-1: 38px;
|
|
@size-header-2: 30px;
|
|
@size-header-3: 24px;
|
|
@size-header-4: 16px;
|
|
@size-display: 20px;
|
|
@size-body: 14px;
|
|
@size-caption: 12px;
|
|
|
|
@dark-color01: #79879c;
|
|
@dark-color02: #6b7b95;
|
|
@dark-color03: #5f708a;
|
|
@dark-color04: #4a5974;
|
|
@dark-color05: #404e68;
|
|
@dark-color06: #36435c;
|
|
@dark-color07: #124191;
|
|
@dark-color08: #181d28;
|
|
@dark-color09: rgba(0, 0, 0, 30%);
|
|
@dark-color10: rgba(0, 0, 0, 50%);
|
|
@dark-color11: #241f20;
|
|
@dark-color12: #1d2129;
|
|
@dark-color13: #272e3b;
|
|
|
|
@light-color01: #f9fbfd;
|
|
@light-color02: #eff4f9;
|
|
@light-color03: #e3e9ef;
|
|
@light-color04: #d8dee5;
|
|
@light-color05: #d1d7df;
|
|
@light-color06: #ccd3db;
|
|
@light-color07: #c1c9d1;
|
|
@light-color08: #abb4be;
|
|
|
|
@green-color01: #c4e6d4;
|
|
@green-color02: #a2d8bb;
|
|
@green-color03: #1890ff;
|
|
@green-color04: #479e88;
|
|
@green-color05: #3b747a;
|
|
|
|
@blue-color01: #c7deef;
|
|
@blue-color02: #7eb8dc;
|
|
@blue-color03: #329dce;
|
|
@blue-color04: #3385b0;
|
|
@blue-color05: #326e93;
|
|
|
|
@red-color01: #fae7e5;
|
|
@red-color02: #ea8573;
|
|
@red-color03: #ca2621;
|
|
@red-color04: #ab2f29;
|
|
@red-color05: #8c3231;
|
|
|
|
@yellow-color01: #ffe1be;
|
|
@yellow-color02: #ffc781;
|
|
@yellow-color03: #f5a623;
|
|
@yellow-color04: #e0992c;
|
|
@yellow-color05: #8d663e;
|
|
@yellow-color06: #faad14;
|
|
@yellow-color07: #fff3dc;
|
|
|
|
@white: #fff;
|
|
@black: #000;
|
|
@blue-color: #124191;
|
|
|
|
/* specific color */
|
|
@dark: @dark-color07;
|
|
@dark-grey: @dark-color03;
|
|
@grey: @dark-color01;
|
|
@lightest: @light-color01;
|
|
@light: @light-color02;
|
|
@green: @green-color03;
|
|
@blue: @blue-color03;
|
|
@yellow: @yellow-color03;
|
|
@yellow-dark: @yellow-color04;
|
|
@red: @red-color03;
|
|
@red-dark: @red-color04;
|
|
|
|
@primary: @green-color03;
|
|
@sub: @blue-color03;
|
|
@warning: @yellow-color03;
|
|
@danger: @red-color03;
|
|
|
|
@title-color: @dark-text-title;
|
|
@second-title-color: @dark-color03;
|
|
@text-color: @primary-color;
|
|
@second-text-color: @dark-color01;
|
|
@third-text-color: @dark-color04;
|
|
@placeholder-color: @dark-color03;
|
|
@input-color: @dark-color07;
|
|
@input-bg: #f2f3f8;
|
|
@head-color: @dark-color07;
|
|
|
|
@title-color: @dark-text-title;
|
|
@second-title-color: @dark-color03;
|
|
@text-color: @primary-color;
|
|
@second-text-color: @dark-color01;
|
|
@third-text-color: @dark-color04;
|
|
@placeholder-color: @dark-color03;
|
|
@input-color: @dark-color07;
|
|
@input-bg: #f2f3f8;
|
|
@head-color: @dark-color07;
|
|
|
|
@background-color: #f0f2f5;
|
|
@icon-color: @dark-color07;
|
|
@text-color-secondary: rgba(134, 144, 156);
|
|
|
|
/* border */
|
|
@border-color: @light-color06;
|
|
@border-hover-color: @dark-color01;
|
|
@second-border-color: @light-color02;
|
|
@border-focus-color: @green-color03;
|
|
@border-radius: 2px;
|
|
@border-color-base: rgba(0, 0, 0, 15%);
|
|
|
|
/* input */
|
|
@input-border-color: @light-color08;
|
|
@input-hover-color: @dark-color01;
|
|
@input-focus-color: @green-color03;
|
|
@input-error-color: @red-color03;
|
|
@input-border-radius: @border-radius;
|
|
|
|
/* background */
|
|
@bg-color: @light-color02;
|
|
@body-bg-color: @light-color02;
|
|
@th-bg-color: @light-color01;
|
|
@card-bg-color: @white;
|
|
@dashboard-bg-color: @gray-5;
|
|
|
|
/* button */
|
|
@btn-default-bg: @light-color02;
|
|
@btn-default-border: @light-color06;
|
|
@btn-default-hover-bg: @light-color03;
|
|
@btn-default-hover-border: @light-color07;
|
|
@btn-default-active-bg: @light-color08;
|
|
@btn-default-active-border: @light-color07;
|
|
@btn-primary-bg: @dark-color07;
|
|
@btn-primary-hover-bg: @dark-color07;
|
|
@btn-control-bg: @dark-color07;
|
|
@btn-control-hover-bg: @dark-color07;
|
|
@btn-danger-bg: @red-color03;
|
|
@btn-danger-active-bg: @red-color04;
|
|
@btn-flat-hover-bg: @light-color03;
|
|
@btn-flat-active-bg: @light-color04;
|
|
@text-hover: @dark-color07;
|
|
|
|
@table-expanded-row-bg: #fdfeff;
|
|
@table-row-hover-bg: #f5f8f9;
|
|
@select-option-hover-bg: #f5f7f8;
|
|
|
|
/* shadow */
|
|
@base-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%);
|
|
@title-shadow: 0 2px 4px rgba(72, 91, 127, 40%);
|
|
@head-shadow: 0 4px 8px rgba(36, 46, 66, 10%);
|
|
|
|
@btn-text-shadow: 0 2px 4px rgba(36, 46, 66, 10%);
|
|
@btn-default-shadow: none;
|
|
@btn-default-active-shadow: inset 0 4px 8px 0 rgba(36, 46, 66, 12%);
|
|
@btn-primary-shadow: none;
|
|
@btn-primary-active-shadow: inset 0 4px 8px 0 rgba(35, 45, 65, 24%);
|
|
@btn-control-shadow: 0 8px 16px 0 rgba(35, 45, 65, 28%);
|
|
@btn-danger-shadow: 0 8px 16px 0 rgba(202, 38, 33, 28%);
|
|
|
|
@card-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%);
|
|
@card-hover-shadow: 0 6px 16px 0 rgba(33, 43, 54, 20%);
|
|
@card-selector-shadow: 0 8px 16px 0 rgba(36, 46, 66, 8%);
|
|
|
|
@tr-shadow: inset 0 2px 4px 0 rgba(72, 91, 127, 20%);
|
|
@box-shadow-base: 0 0 8px 0 rgba(0, 0, 0, 15%);
|
|
|
|
/* font */
|
|
@font-family: system-ui, -apple-system, blinkmacsystemfont, segoe ui, roboto,
|
|
'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi', 'Dosis', 'Helvetica Neue',
|
|
helvetica, arial, sans-serif;
|
|
@font-family-id: @font-family;
|
|
@font-family-code: 'PT Mono', monaco, menlo, consolas, 'Courier New', monospace;
|
|
@size-small: 12px;
|
|
@size-normal: 14px;
|
|
@size-medium: 16px;
|
|
@size-mid-large: 24px;
|
|
@size-large: 28px;
|
|
@body-size: @size-small;
|
|
|
|
@font-bold: 600;
|
|
@font-normal: 400;
|
|
@font-thin: 300;
|
|
|
|
/* animation */
|
|
@trans-speed: 0.3s;
|
|
|
|
/* size */
|
|
@nav-width: 260px;
|
|
@narrow-nav-width: 240px;
|
|
@header-height: 50px;
|
|
@body-padding-left: 16px;
|
|
@body-padding-right: 16px;
|
|
@body-padding: 16px;
|
|
@breadcrumb-height: 50px;
|
|
@footer-height: 75px;
|
|
@menu-width: @sider-width;
|
|
|
|
@icon-status-info: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMjE5MUNBIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4ek05IDUuNjgxYTEuMzEyIDEuMzEyIDAgMSAwIDAtMi42MjMgMS4zMTIgMS4zMTIgMCAwIDAgMCAyLjYyM3pNOCA3LjUxNlYxNWgyVjcuNTE2SDh6Ii8+PC9nPjwvc3ZnPg==');
|
|
@icon-status-success: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMDBBQTcyIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4em0tMi4xMTUtNi45NEw0LjQ5NCA4LjY3bC0xLjQxNSAxLjQxNCAzLjgwNiAzLjgwNiA3LjU0OC03LjU0OC0xLjQxNC0xLjQxNC02LjEzNCA2LjEzNHoiLz48L2c+PC9zdmc+');
|
|
@icon-status-warning: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTItM2gyNHYyNEgtMnoiLz48cGF0aCBmaWxsPSIjRjVDNDE0IiBkPSJNMTAgMGwxMCAxNy4zMkgwTDEwIDB6bTAgMTYuMDAxYTEgMSAwIDEgMCAwLTIgMSAxIDAgMCAwIDAgMnpNOSA2bC4yIDdoMS42bC4yLTdIOXoiLz48L2c+PC9zdmc+');
|
|
@icon-status-error: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjQ0EyNjIxIiBkPSJNMTIuNzI4IDBMMTggNS4yNzJ2Ny40NTZMMTIuNzI4IDE4SDUuMjcyTDAgMTIuNzI4VjUuMjcyTDUuMjcyIDBoNy40NTZ6bS0yLjMxNCA5bDMuNDY2LTMuNDY2LTEuNDE0LTEuNDE0TDkgNy41ODYgNS41MzYgNC4xMjIgNC4xMjIgNS41MzYgNy41ODYgOSA0LjEyIDEyLjQ2NmwxLjQxNCAxLjQxNEw5IDEwLjQxNGwzLjQ2NCAzLjQ2NCAxLjQxNC0xLjQxNEwxMC40MTQgOXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTAuNDE0IDlsMy40NjQgMy40NjQtMS40MTQgMS40MTRMOSAxMC40MTQgNS41MzQgMTMuODggNC4xMiAxMi40NjYgNy41ODYgOSA0LjEyMiA1LjUzNmwxLjQxNC0xLjQxNEw5IDcuNTg2bDMuNDY2LTMuNDY2IDEuNDE0IDEuNDE0eiIvPjwvZz48L3N2Zz4=');
|
|
|
|
/* sider */
|
|
@sider-background: #fff;
|
|
@sider-open-background: #222121;
|
|
@sider-collapsed-width: 50px;
|
|
@sider-menu-padding: 0;
|
|
@sider-menu-padding-top: 0;
|
|
@sider-border-right: 1px solid #e5e6eb;
|
|
@sider-width: 192px;
|
|
@sider-menu-item-selected-background: #f6f7fb;
|
|
@sider-sub-menu-item-margin-top: 0;
|
|
@sider-sub-menu-item-margin-bottom: 0;
|
|
@sider-sub-menu-item-selected-background: #f6f7fb;
|
|
@sider-sub-menu-item-hover-background: #f6f7fb;
|
|
@sider-menu-item-selected-border-radius: 0;
|
|
@sider-menu-item-selected-text-color: #1d2129;
|
|
@sider-menu-item-hover-dot-color: #c9cdd4;
|
|
@sider-menu-item-selected-dot-color: @primary-color;
|
|
@sider-menu-item-selected-after-border-right: 0;
|
|
@sider-sub-menu-background: #fff;
|
|
@sider-sub-menu-item-padding-left: 0;
|
|
@sider-sub-menu-item-dot-color: #c9cdd4;
|
|
@sider-trigger-background-color: rgba(0, 0, 0, 15%);
|
|
@sider-menu-title-font-size: 14px;
|
|
@sider-sub-menu-title-font-size: 13px;
|
|
@sider-sub-menu-title-color: #4e5969;
|
|
|
|
@box-shadow01: 0 2px 10px 0 rgba(1, 32, 87, 50%);
|
|
|
|
//layout
|
|
@layout-header-color: @dark-color12;
|
|
@layout-text-color: @white;
|
|
@layout-link-color: @white;
|
|
@layout-header-menu-background-color: @layout-header-color;
|
|
@layout-header-menu-text-color: @white;
|
|
@layout-header-menu-text-hover-color: @white;
|
|
@layout-header-menu-search-background: #282e39;
|
|
@layout-header-menu-search-text-color: @white;
|
|
@layout-header-menu-search-icon: #86909c;
|
|
@layout-header-menu-region-hover: #e8f2ff;
|
|
@layout-header-color-hover: @dark-color09;
|
|
@layout-selected-color: #111418;
|
|
@layout-header-logo-wrapper-width: 141px;
|
|
@layout-header-logo-image-height: 20px;
|
|
|
|
.layout-header-menu-search-border {
|
|
border: none;
|
|
}
|
|
|
|
//products
|
|
@products-icon-background: #272e3b;
|
|
@products-icon-hover-background: @primary-color;
|
|
@products-header-title-color: #fff;
|
|
@products-title-color: #c9cdd4;
|
|
@products-sub-title-color: #86909c;
|
|
@products-icon-fill-color: #c9cdd4;
|
|
@products-drawer-background-1: #101319;
|
|
@products-drawer-hover-background-1: #101319;
|
|
@products-drawer-divider-color-1: #101319;
|
|
@products-drawer-sub-title-hover-background: hsla(0deg, 0%, 100%, 10%);
|
|
@products-drawer-sub-title-hover-color: #fff;
|
|
@products-drawer-background-2: #1b1e24;
|
|
@products-drawer-header-title: #fff;
|
|
@products-drawer-left-icon: #0053ec;
|
|
@products-drawer-close-icon: #fff;
|
|
@products-drawer-search-icon: #838383;
|
|
@products-drawer-search-box-shadow: 0 0 0 2px rgba(12, 99, 250, 20%);
|
|
@products-drawer-search-placeholder-color: #86909c;
|
|
@products-drawer-search-border-color: #e9e9e9;
|
|
@products-drawer-search-border: none;
|
|
@products-drawer-search-hover-border-color: #e9e9e9;
|
|
@products-drawer-search-background: #1d2129;
|
|
@products-drawer-search-input-color: @white;
|
|
@products-column-width: @sider-width;
|
|
|
|
// breadcrumb
|
|
@breadcrumb-item-font-size: 14px;
|
|
|
|
// overview padding
|
|
@overview-padding: 16px;
|
|
|
|
// table
|
|
// @table-header-default-button-background: @background-color;
|
|
// @table-header-search-input-background: @background-color;
|
|
// @table-header-search-input-border-color: @primary-color;
|
|
@table-header-default-button-background: #fff;
|
|
@table-header-default-button-background-gray: #f6f7fb;
|
|
@table-header-default-button-border: #fff;
|
|
@table-header-default-button-color: #1d2129;
|
|
@table-header-search-input-background: #fff;
|
|
@table-header-search-input-border-color: #fff;
|
|
@table-header-search-input-font-size: 12px;
|
|
@table-header-danger-button-color: @error-color;
|
|
@table-header-disable-button-color: #c9cdd4;
|
|
@table-header-disable-button-border: #fff;
|
|
@table-header-disable-button-background: #fff;
|
|
@table-row-selected-background: #f1f2f6;
|
|
@table-checkbox-size: 12px;
|
|
|
|
//form
|
|
@form-item-label-color: @dark-color13;
|
|
@form-item-magic-input-wrapper-border-color: #d9d9d9;
|
|
|
|
//avatar-dropdown
|
|
@avatar-color: #1d2129;
|
|
@avatar-dropdown-background-color: @dark-color12;
|
|
@avatar-dropdown-text-color: @white;
|
|
@avatar-dropdown-button-color: @white;
|
|
@avatar-dropdown-property-text-color: #86909c;
|
|
@avatar-dropdown-copy-icon-color: @white;
|
|
@avatar-dropdown-hover-background-color: @dark-color09;
|
|
@avatar-dropdown-hover-text-color: @white;
|
|
@avatar-dropdown-button-disabled-color: #86909c;
|
|
@avatar-dropdown-divider-color: rgba(134, 144, 156, 20%);
|
|
|
|
.vertical-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* login */
|
|
@login-error: #a43a39;
|
|
|
|
@money-color: #f50;
|
|
|
|
:export {
|
|
primaryColor: @primary-color;
|
|
successColor: @success-color;
|
|
warnColor: @warn-color;
|
|
warnDarkColor: @warn-dark-color;
|
|
warnLightColor: @warn-light-color;
|
|
errorColor: @error-color;
|
|
dangerColor: @danger-color;
|
|
moneyColor: @money-color;
|
|
infoColor: @info-color;
|
|
headerHeight: @header-height;
|
|
productsColumnWidth: @products-column-width;
|
|
}
|