mirror of
https://github.com/ansible/awx.git
synced 2026-05-11 19:37:38 -02:30
Reorganizes the network-ui code under awx/client/src/network-ui
* Moves network UI source to awx/client/src/network-ui * Moves network ui partials to awx/ui/client/network-ui * Renames widgets with suffix partial.svg * Updates directives to use bundled partials * Uses ~network-ui for loading UI component
This commit is contained in:
Ben Thomasson
763
awx/ui/client/src/network-ui/style.less
Normal file
763
awx/ui/client/src/network-ui/style.less
Normal file
@@ -0,0 +1,763 @@
|
||||
/* Copyright (c) 2017 Red Hat, Inc. */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/static/assets/OpenSans-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: bold;
|
||||
font-weight: 600;
|
||||
src: url(/static/assets/OpenSans-Bold.ttf);
|
||||
}
|
||||
|
||||
@selected-red: #c9232c;
|
||||
@selected-mango: #ff5850;
|
||||
@selected-blue: #5bbddf;
|
||||
@light-background: #ffffff;
|
||||
@light-widget-detail: #ffffff;
|
||||
@dark-widget-detail: #707070;
|
||||
@widget-body: #D7D7D7;
|
||||
@link: #D7D7D7;
|
||||
@group: #707070;
|
||||
@debug-copynot: rgb(77,200,242);
|
||||
@button-body: #ffffff;
|
||||
@button-text: #707070;
|
||||
@button-outline: #b7b7b7;
|
||||
@button-body-hover: #f2f2f2;
|
||||
@button-body-pressed: #848992;
|
||||
@button-text-pressed: #ffffff;
|
||||
@green: #5CB85C;
|
||||
@red: #D9534F;
|
||||
@light-toolbox-background: #f6f6f6;
|
||||
@icon-background-hover:#337AB7;
|
||||
|
||||
.NetworkUI {
|
||||
background-color: @light-toolbox-background;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.NetworkUI__text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__debug-text {
|
||||
fill: @debug-copynot;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI--debug {
|
||||
fill-opacity: 0;
|
||||
stroke: @debug-copynot;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI--construction {
|
||||
fill-opacity: 0;
|
||||
stroke: @debug-copynot;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__link--selected {
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.NetworkUI__link--remote-selected {
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.NetworkUI__link--selected-conflict {
|
||||
stroke: @selected-red;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__link {
|
||||
stroke: @link;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__link--link-pass {
|
||||
stroke: @green;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__link--link-fail {
|
||||
stroke: @red;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__link--debug {
|
||||
stroke: @debug-copynot;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__cursor {
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__debug-cursor {
|
||||
stroke: @debug-copynot;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.NetworkUI--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.NetworkUI__router {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__router--selected {
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.NetworkUI__router--remote-selected {
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.NetworkUI__router--selected-conflict {
|
||||
stroke: @selected-red;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.NetworkUI__router line {
|
||||
stroke: @light-widget-detail;
|
||||
stroke-width: 20;
|
||||
}
|
||||
|
||||
.NetworkUI__router polygon {
|
||||
fill: @light-widget-detail;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.NetworkUI__router-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__router-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__switch {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__switch--selected {
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__switch--remote-selected {
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__switch--selected-conflict {
|
||||
stroke: @selected-red;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__switch line {
|
||||
stroke: @light-widget-detail;
|
||||
stroke-width: 20;
|
||||
}
|
||||
|
||||
.NetworkUI__switch polygon {
|
||||
fill: @light-widget-detail;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.NetworkUI__switch-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__switch-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__rack {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__rack-background {
|
||||
fill: @light-background;
|
||||
stroke: @light-background;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__rack--selected {
|
||||
fill: @selected-blue;
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__rack--remote-selected {
|
||||
fill: @selected-mango;
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__rack--selected-conflict {
|
||||
fill: @selected-red;
|
||||
stroke: @selected-red;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__rack line {
|
||||
stroke: @light-widget-detail;
|
||||
stroke-width: 20;
|
||||
}
|
||||
|
||||
.NetworkUI__rack circle {
|
||||
fill: @light-widget-detail;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__rack-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__rack-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__site {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__site--network {
|
||||
fill: @dark-widget-detail;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__site-background {
|
||||
fill: @light-background;
|
||||
stroke: @light-background;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__site--selected {
|
||||
fill: @selected-blue;
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__site--remote-selected {
|
||||
fill: @selected-mango;
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__site--selected-conflict {
|
||||
fill: @selected-red;
|
||||
stroke: @selected-red;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__site line {
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__site circle {
|
||||
fill: @light-widget-detail;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__site-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__site-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__button {
|
||||
fill: @button-body;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__button-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__button--button-pressed {
|
||||
fill: @button-body-pressed;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__button-text--button-pressed {
|
||||
fill: @button-text-pressed;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__button--button-hover {
|
||||
fill: @button-body-hover;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__button-text--button-hover {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__layer {
|
||||
fill: @button-body;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__layer-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__layer--button-pressed {
|
||||
fill: @button-body-pressed;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__layer-text--button-pressed {
|
||||
fill: @button-text-pressed;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__layer--button-hover {
|
||||
fill: @button-body-hover;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__layer-text--button-hover {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__stencil {
|
||||
fill: @button-body;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__stencil-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__stencil--button-pressed {
|
||||
fill: @button-body-pressed;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__stencil-text--button-pressed {
|
||||
fill: @button-text-pressed;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__stencil--button-hover {
|
||||
fill: @button-body-hover;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.NetworkUI__stencil-text--button-hover {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__host {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__host-background {
|
||||
fill: @light-background;
|
||||
stroke: @light-background;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__host--selected {
|
||||
fill: @selected-blue;
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__host--remote-selected {
|
||||
fill: @selected-mango;
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__host--selected-conflict {
|
||||
fill: @selected-red;
|
||||
stroke: @selected-red;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__host line {
|
||||
stroke: @light-widget-detail;
|
||||
stroke-width: 20;
|
||||
}
|
||||
|
||||
.NetworkUI__host circle {
|
||||
fill: @light-widget-detail;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__host-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__host-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__device {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__device-background {
|
||||
fill: @light-background;
|
||||
stroke: @light-background;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__device--selected {
|
||||
fill: @selected-blue;
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__device--remote-selected {
|
||||
fill: @selected-mango;
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__device--selected-conflict {
|
||||
fill: @selected-red;
|
||||
stroke: @selected-red;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__device line {
|
||||
stroke: @light-widget-detail;
|
||||
stroke-width: 20;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__device-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__device-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__status {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__status--pass {
|
||||
fill: @green;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__status--fail {
|
||||
fill: @red;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__status-path {
|
||||
fill: none;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__circle-debug {
|
||||
fill: @debug-copynot;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__interface {
|
||||
fill: @dark-widget-detail;
|
||||
}
|
||||
|
||||
.NetworkUI__interface--selected {
|
||||
fill: @selected-blue;
|
||||
}
|
||||
|
||||
.NetworkUI__interface-text {
|
||||
fill: @button-text;
|
||||
font-size: 8px;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__interface-text--selected {
|
||||
font-size: 8px;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__link-text {
|
||||
fill: @button-text;
|
||||
font-size: 8px;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__touch {
|
||||
stroke: @debug-copynot;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.NetworkUI__group--selected {
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 6;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.NetworkUI__group--remote-selected {
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 6;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.NetworkUI__group--selected-conflict {
|
||||
stroke: @selected-red;
|
||||
stroke-width: 6;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.NetworkUI__group {
|
||||
stroke: @group;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.NetworkUI__group--debug {
|
||||
stroke: @debug-copynot;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.NetworkUI__group-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__group-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__location-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__toolbox {
|
||||
stroke: none;
|
||||
fill: @light-background;
|
||||
}
|
||||
|
||||
.NetworkUI__toolbox-collapsed{
|
||||
fill: @light-background;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
rx: 0;
|
||||
stroke-dasharray: calc(~"100vh - 40px");
|
||||
stroke-dashoffset: -45;
|
||||
}
|
||||
|
||||
.NetworkUI__toolbox-bezel {
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
rx: 0;
|
||||
stroke-dasharray: calc(~"100vh - 40px");
|
||||
stroke-dashoffset: -200;
|
||||
}
|
||||
|
||||
.NetworkUI__process {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__process-background {
|
||||
fill: @light-background;
|
||||
stroke: @light-background;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__process--selected {
|
||||
fill: @selected-blue;
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__process--remote-selected {
|
||||
fill: @selected-mango;
|
||||
stroke: @selected-mango;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__process--selected-conflict {
|
||||
fill: @selected-red;
|
||||
stroke: @selected-red;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.NetworkUI__process path {
|
||||
fill: @widget-body;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__process-text {
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__process-text--selected {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI__stream {
|
||||
fill: none;
|
||||
stroke: @dark-widget-detail;
|
||||
}
|
||||
|
||||
.NetworkUI__stream-arrow {
|
||||
fill: @dark-widget-detail;
|
||||
stroke: @dark-widget-detail;
|
||||
}
|
||||
|
||||
.NetworkUI__stream--selected {
|
||||
fill: none;
|
||||
stroke: @selected-blue;
|
||||
stroke-width: 6;
|
||||
}
|
||||
.NetworkUI__stream-arrow--selected {
|
||||
fill: @selected-blue;
|
||||
stroke: @selected-blue;
|
||||
}
|
||||
|
||||
.NetworkUI__stream-text {
|
||||
fill: @button-text;
|
||||
font-size: 8px;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI_chevron{
|
||||
fill: @button-body-pressed;
|
||||
}
|
||||
|
||||
.NetworkUI_chevron--hover{
|
||||
cursor: pointer;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.NetworkUI_iconBackground{
|
||||
fill:@button-body;
|
||||
}
|
||||
|
||||
.NetworkUI_iconBackground--hover{
|
||||
fill:@icon-background-hover;
|
||||
}
|
||||
|
||||
.NetworkUI__toolbox--title{
|
||||
fill: @dark-widget-detail;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.NetworkUI__contextMenu{
|
||||
fill: @light-background;
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
|
||||
}
|
||||
|
||||
.NetworkUI__contextMenuButton{
|
||||
fill: @light-background;
|
||||
}
|
||||
|
||||
.NetworkUI__contextMenuButtonText{
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__contextMenuButtonText-hover{
|
||||
fill: @button-text;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.NetworkUI__contextMenuButton-hover,
|
||||
.NetworkUI__contextMenuButton-pressed{
|
||||
fill:@button-body-hover;
|
||||
}
|
||||
Reference in New Issue
Block a user