More unifying for CSS styles on Manager/Ruleset

This commit is contained in:
Juanjo Jiménez 2018-01-22 15:42:28 +01:00
parent 1244570bf9
commit 1ac3a4ca92
7 changed files with 48 additions and 93 deletions

View File

@ -6,27 +6,6 @@
box-shadow: none;
}
md-list.agents-preview-table.even.ruleset_rules_row_active,
md-list.agents-preview-table.odd.ruleset_rules_row_active,
md-list.agents-preview-table.ruleset_rules_row_active:hover,
.md-button.agents-preview-table.buttonBlueLight.md-default-theme:not([disabled]):hover,
.md-button.agents-preview-table.buttonMenu.md-default-theme:not([disabled]):hover, {
background-color: rgb(0,121,165);
color: white;
}
div.agents-preview-table:hover,
md-list.agents-preview-table:hover {
background-color: rgb(0,121,165);
color: white;
}
div.agents-preview-table:focus,
md-list.agents-preview-table:focus {
border: none;
outline: none;
}
.agents-groups-preview .md-button:not([disabled]):hover {
background-color: transparent !important;
}
@ -111,4 +90,4 @@ md-tooltip .md-content {
.configBold {
font-weight: bold;
}
}

View File

@ -20,27 +20,11 @@
box-shadow: none !important;
}
.invisibleButton {
margin: 0px !important;
padding: 0px !important;
text-align: left !important;
text-transform: none !important;
}
.md-button.md-no-style {
transition: none !important;
}
.invisibleButton:hover {
color: white !important;
}
.invisibleButton:focus {
color: white !important;
}
.md-button.buttonMenu.md-default-theme:not([disabled]):hover,
.md-button:not([disabled]):hover {
.md-button.buttonMenu.md-default-theme:not([disabled]):hover {
background-color: rgba(60, 174, 210, 0.7)
}
@ -53,8 +37,7 @@ button._md-no-style.md-button.md-ink-ripple {
background: none;
}
.md-button.buttonBlueLight.md-default-theme:not([disabled]):hover,
.md-button:not([disabled]):hover {
.md-button.buttonBlueLight.md-default-theme:not([disabled]):hover {
background-color: rgb(60,174,210);
}

View File

@ -1,23 +1,3 @@
.ruleset_card_info {
background-color: rgb(0,121,165);
}
.ruleset_rules_row_active {
background-color: rgb(0,121,165);
}
.rules-item-list button.md-no-style.md-button.md-ink-ripple {
opacity: 0;
}
md-list-item.ruleset_rules_row_active {
background-color: rgb(0,121,165);
}
.listHover:hover {
font-weight: bold;
}
/* ------------------------------------------------------------------------ */
/* ------------------------ Ruleset Sub-Tab Styles ------------------------ */
/* ------------------------------------------------------------------------ */
@ -106,6 +86,10 @@ md-list-item.ruleset_rules_row_active {
padding-top: 10px;
}
.ruleset_card_info {
background-color: rgb(0,121,165);
}
.manager-ruleset-rules-card-info {
height: 100%;
padding: 0px;

View File

@ -1,8 +1,13 @@
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* --------------------- Wazuh stylesheet for tables ---------------------- */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
/* ---------------------- Wazuh stylesheet for tables ----------------------- */
/* -------------------------------------------------------------------------- */
// Style for text who applies filters when hovering
.listHover {
&:hover {
font-weight: bold;
}
}
md-toolbar {
&.wazuh-toolbar {
@ -17,11 +22,22 @@ md-toolbar {
}
}
md-list,
md-list-item {
&.active {
background-color: rgb(0,121,165);
color: white !important;
}
}
md-list {
&.wazuh-list {
// Style for odd items on the list
&.odd {
background-color: white;
}
// Style for even items on the list
&.even {
background-color: #fafafa;
}
@ -34,8 +50,15 @@ md-list-item {
min-height: 44px;
height: 44px;
// Style when hovering a list item
&:hover {
background-color: rgb(0,121,165);
color: white !important;
}
// Fixing transparent text when hover on list item
& button.md-no-style.md-button.md-ink-ripple{
opacity: 0;
}
}
}
@ -43,18 +66,3 @@ md-list-item {
/* ------------------------------------------------------------------------ */
/* ------------------------------ Old styles ------------------------------ */
/* ------------------------------------------------------------------------ */
// .md-toolbar-tools {
// font-size: 15px !important;
// font-weight: bold !important;
// padding: 16px !important;
// }
//
// .md-toolbar-tools-groups {
// font-size: 15px !important;
// font-weight: bold !important;
// padding: 16px !important;
// min-height: 0px !important;
// height: 30px !important;
// padding-top: 4px !important;
// }

View File

@ -87,8 +87,8 @@
</md-toolbar>
<md-content flex when-scrolled="agents.nextPage('')" class="height-300">
<md-list ng-repeat='agent in agents.items | orderBy : agents.sortValue : agents.sortDir' class="wazuh-list agents-preview-table">
<md-list-item ng-click="showAgent(agent)" class="wazuh-list-item md-subhead agents-groups-preview">
<md-list ng-repeat='agent in agents.items | orderBy : agents.sortValue : agents.sortDir' class="wazuh-list">
<md-list-item ng-click="showAgent(agent)" class="wazuh-list-item">
<span flex="5">{{agent.id || 'Unknown'}}</span>
<span flex="25">{{agent.name || 'Unknown'}}</span>
<span flex="10">{{agent.ip || 'Unknown'}}</span>

View File

@ -71,7 +71,7 @@
</md-chip>
</md-chips>
<md-toolbar layout="row" class="md-toolbar-tools md-toolbar-tools-groups">
<md-toolbar layout="row" class="wazuh-toolbar md-toolbar-tools">
<span flex="20" ng-click="decoders.sort('name')">Name
<i class="fa" ng-class="decoders.sortValue === 'name' ? (decoders.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
aria-hidden="true"></i>
@ -85,14 +85,16 @@
</md-toolbar>
<md-content flex layout="column" class="height-300" when-scrolled="decoders.nextPage('')">
<md-list class="agents-preview-table" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat='decoder in decoders.items | orderBy : decoders.sortValue : decoders.sortDir'
ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'ruleset_rules_row_active' : ''">
<md-list-item class="rules-item-list" ng-click="closeOther(decoder.name+decoder.file+decoder.position)" ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'ruleset_rules_row_active' : ''">
<md-list class="wazuh-list" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat='decoder in decoders.items | orderBy : decoders.sortValue : decoders.sortDir'
ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'active' : ''">
<md-list-item class="wazuh-list-item" ng-click="closeOther(decoder.name+decoder.file+decoder.position)" ng-class="activeItem === decoder.name+decoder.file+decoder.position ? 'active' : ''">
<span flex="20">{{decoder.name}}</span>
<span flex="20">{{decoder.details["program_name"]}}</span>
<span flex="40">{{ decoder.details["order"] | limitTo: 80 }}{{decoder.details["order"].length > 80 ? '...' : ''}}</span>
<md-button md-no-ink class="invisibleButton" flex="20" ng-if="$parent.typeFilter == 'all'" ng-click="decodersApplyFilter({type: 'file', value: decoder.file}); $event.stopPropagation();">{{decoder.file}}</md-button>
<span flex="20" ng-if="$parent.typeFilter != 'all'">{{decoder.file}}</span>
<span flex="20">{{decoder.file}}</span>
<!-- <span flex="20" ng-if="$parent.typeFilter != 'all'">{{decoder.file}}</span> -->
<!-- <md-button md-no-ink class="invisibleButton" flex="20" ng-if="$parent.typeFilte r == 'all'" ng-click="decodersApplyFilter({type: 'file', value: decoder.file}); $event.stopPropagation();">{{decoder.file}}</md-button> -->
</md-list-item>
<div layout="row" ng-if="activeItem === decoder.name+decoder.file+decoder.position" class="ruleset_card_info manager-ruleset-rules-card-info">
<md-card flex>
@ -141,4 +143,4 @@
<md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="decoders.busy"></md-progress-linear>
</md-content>
</div>
</div>
</div>

View File

@ -125,9 +125,8 @@
</md-toolbar>
<md-content flex layout="column" class="height-300" when-scrolled="rules.nextPage('')">
<md-list ng-repeat='rule in rules.items | orderBy : rules.sortValue : rules.sortDir' ng-class-odd="'odd'" ng-class-even="'even'"
class="wazuh-list agents-groups-preview agents-preview-table" ng-class="activeItem === rule.id ? 'ruleset_rules_row_active' : ''">
<md-list-item class="wazuh-list-item rules-item-list" ng-click="closeOther(rule.id)" ng-class="activeItem === rule.id ? 'ruleset_rules_row_active' : ''">
<md-list class="wazuh-list" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat='rule in rules.items | orderBy : rules.sortValue : rules.sortDir' ng-class="activeItem === rule.id ? 'active' : ''">
<md-list-item class="wazuh-list-item" ng-click="closeOther(rule.id)" ng-class="activeItem === rule.id ? 'active' : ''">
<span flex="5">{{rule.id}}</span>
<span flex="15">{{rule.file}}</span>
<span flex="35">{{rule.description}}</span>