mirror of
https://github.com/ansible/awx.git
synced 2026-02-15 18:20:00 -03:30
566 lines
10 KiB
Plaintext
566 lines
10 KiB
Plaintext
/*********************************************
|
|
* Copyright (c) 2015 Ansible, Inc.
|
|
*
|
|
* lists.less
|
|
*
|
|
* custom styles for generated lists
|
|
*
|
|
*/
|
|
|
|
table, tbody {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.List-well {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.List-table{
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
table-layout: fixed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.List-tableHeader{
|
|
height: 30px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
color: @list-header-txt;
|
|
background-color: @list-header-bg;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
border-bottom-width:0px!important;
|
|
}
|
|
|
|
.List-tableHeader:first-of-type {
|
|
border-top-left-radius: 5px;
|
|
}
|
|
|
|
.List-tableHeader:last-of-type {
|
|
border-top-right-radius: 5px;
|
|
}
|
|
|
|
.List-tableHeader--info, .List-tableHeader--actions {
|
|
text-align: right;
|
|
}
|
|
|
|
.List-tableHeader:not([ng-click]) {
|
|
cursor: default !important;
|
|
}
|
|
|
|
.List-tableHeaderSort {
|
|
color: @list-header-icon;
|
|
}
|
|
|
|
.List-tableRow {
|
|
height: 40px;
|
|
font-size: 14px;
|
|
color: @list-item;
|
|
border-bottom: 1px solid @default-border;
|
|
}
|
|
|
|
.List-tableRow:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.List-tableRow:hover {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.List-tableRow--selected {
|
|
border-left: 10px solid @list-row-select-bord;
|
|
}
|
|
|
|
.List-tableRow--selected > :first-child {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.List-tableRow--disabled {
|
|
.List-tableCell, .List-tableCell * {
|
|
color: @b7grey;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.List-tableRow--disabled {
|
|
.List-actionButton:hover {
|
|
color: @list-action-icon;
|
|
background-color: @list-actn-bg !important;
|
|
}
|
|
}
|
|
|
|
.List-tableRow--disabled {
|
|
.List-actionButtonCell * {
|
|
color: @default-err;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.List-tableCell {
|
|
padding: 7px 15px;
|
|
border-top:0px!important;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.List-tableCell.description-column {
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.List-actionButtonCell {
|
|
padding-top:5px;
|
|
padding-right: 15px;
|
|
display:flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.List-actionButton {
|
|
font-size: 16px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
color: @list-action-icon;
|
|
background-color: @list-actn-bg;
|
|
border: none;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.List-actionButton:hover {
|
|
background-color: @list-actn-bg-hov !important;
|
|
color: @list-actn-icn-hov;
|
|
}
|
|
|
|
.List-actionButton--delete:hover {
|
|
background-color: @list-actn-del-bg-hov !important;
|
|
}
|
|
|
|
.List-actionButton + .List-actionButton {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.List-header {
|
|
display: flex;
|
|
}
|
|
|
|
.List-title {
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
}
|
|
|
|
.List-titleBadge {
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
padding: 2px 10px;
|
|
height: 14px;
|
|
line-height: 10px;
|
|
margin: 0;
|
|
background-color: @list-title-badge;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.List-titleBadge--selected {
|
|
background-color: @default-link;
|
|
}
|
|
|
|
.List-titleText {
|
|
color: @list-title-txt;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.List-exitHolder {
|
|
justify-content: flex-end;
|
|
display:flex;
|
|
}
|
|
|
|
.List-exit {
|
|
cursor:pointer;
|
|
padding:0px;
|
|
border: none;
|
|
height:20px;
|
|
font-size: 20px;
|
|
background-color:@default-bg;
|
|
color:@d7grey;
|
|
transition: color 0.2s;
|
|
line-height:1;
|
|
}
|
|
|
|
.List-exit:hover{
|
|
color:@default-icon;
|
|
}
|
|
|
|
.List-actionHolder {
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
// margin-bottom: 20px;
|
|
// float: right;
|
|
}
|
|
|
|
.List-actionHolder--leftAlign {
|
|
width: 50%;
|
|
margin-left: 50%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.List-actions {
|
|
display: flex;
|
|
margin-bottom: -34px;
|
|
}
|
|
|
|
.List-auxAction {
|
|
align-items: center;
|
|
display: flex;
|
|
order: 1;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.List-auxActionStream {
|
|
width: 200px;
|
|
}
|
|
|
|
.List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.List-buttonSubmit {
|
|
background-color: @submit-button-bg;
|
|
color: @submit-button-text;
|
|
}
|
|
|
|
.List-buttonSubmit:hover,
|
|
.List-buttonSubmit:focus {
|
|
color: @submit-button-text;
|
|
background-color: @submit-button-bg-hov;
|
|
}
|
|
|
|
.List-buttonDefault {
|
|
background-color: @btn-bg;
|
|
color: @btn-txt;
|
|
border-color: @b7grey;
|
|
}
|
|
|
|
.List-buttonDefault:hover,
|
|
.List-buttonDefault:focus {
|
|
background-color: @btn-bg-hov;
|
|
color: @btn-txt;
|
|
}
|
|
|
|
.List-buttonDefault[disabled] {
|
|
color: @d7grey;
|
|
border-color: @d7grey;
|
|
}
|
|
|
|
.List-searchDropdown {
|
|
border-top-left-radius: 5px!important;
|
|
border-bottom-left-radius: 5px!important;
|
|
height: 34px!important;
|
|
border-color: @d7grey;
|
|
color: @default-icon;
|
|
background-color: @default-bg;
|
|
border-right: none;
|
|
}
|
|
|
|
.List-searchDropdown:focus,
|
|
.List-searchDropdown:active,
|
|
.List-searchDropdown.active
|
|
{
|
|
color: @default-icon;
|
|
background-color: @default-tertiary-bg;
|
|
}
|
|
|
|
.List-searchDropdown:hover {
|
|
background-color: @default-tertiary-bg;
|
|
color: @default-icon;
|
|
}
|
|
|
|
.List-searchDropdownCarat {
|
|
border-top-color: @default-icon!important;
|
|
}
|
|
|
|
.List-searchInput {
|
|
background-color: @list-srch-inpt-bg!important;
|
|
font-size: 14px!important;
|
|
color: @list-srch-inpt-txt!important;
|
|
border-color: @list-srch-inpt-bord!important;
|
|
border-radius: 0px 5px 5px 0px!important;
|
|
padding-left: 15px!important;
|
|
height: 34px!important;
|
|
padding-right: 45px!important;
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
|
|
.List-searchInput:placeholder-shown {
|
|
color: @list-srch-inpt-ph-txt!important;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.List-searchInput:focus {
|
|
border-color: @list-srch-inpt-focus!important;
|
|
}
|
|
|
|
.List-searchInputIcon {
|
|
height: 32px;
|
|
width: 32px;
|
|
border-left: 1px solid @list-srch-inpt-bord;
|
|
color: @list-srch-btn-icon!important;
|
|
float: right;
|
|
position: relative;
|
|
top: -33px;
|
|
left: -2px;
|
|
z-index: 10;
|
|
font-size: 16px;
|
|
background-color: @list-srch-btn-bg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.List-searchInputIcon:hover {
|
|
cursor: pointer;
|
|
background-color: @list-srch-btn-hov-bg;
|
|
color: @list-srch-btn-icon;
|
|
}
|
|
|
|
.List-searchNoResults {
|
|
color: @default-interface-txt;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.List-noItems {
|
|
margin-top: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 200px;
|
|
border-radius: 5px;
|
|
border: 1px solid @d7grey;
|
|
background-color: @default-no-items-bord;
|
|
color: @list-no-items-txt;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-body > .List-noItems {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.List-actionButton--selected,
|
|
.List-editButton--selected {
|
|
background-color: @list-actn-bg-hov !important;
|
|
color: @list-actn-icn-hov;
|
|
}
|
|
|
|
.List-searchWidget {
|
|
height: 34px;
|
|
}
|
|
|
|
.List-searchWidget--compact {
|
|
max-width: ~"calc(100% - 91px)";
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.List-searchRow {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.List-staticColumn--smallStatus {
|
|
width: 25px;
|
|
padding-right: 0px!important;
|
|
}
|
|
|
|
.List-staticColumn--mediumStatus {
|
|
width: 51px;
|
|
padding-right: 0px!important;
|
|
}
|
|
|
|
.List-staticColumn--toggle {
|
|
width: 55px;
|
|
padding-right: 0px !important;
|
|
}
|
|
|
|
.List-staticColumn--schedulerTime {
|
|
max-width: 164px;
|
|
}
|
|
|
|
.List-staticColumnAdjacent {
|
|
padding-left: 10px!important;
|
|
}
|
|
|
|
.List-staticColumnAdjacent--monospace {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.List-titleLockup {
|
|
margin-left: 4px;
|
|
margin-right: 6px;
|
|
display: inline-block;
|
|
margin-top: 0px;
|
|
padding-bottom: 2px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.List-titleLockup:before {
|
|
content: "\007C";
|
|
color: #d7d7d7;
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.List-action--showTooltipOnDisabled {
|
|
display: inline-block;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.List-action--showTooltipOnDisabled .btn[disabled] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.List-action--showTooltipOnDisabled.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.List-action--notificationAdd {
|
|
text-align: right;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.List-dropdownButton {
|
|
border: none;
|
|
}
|
|
|
|
.List-dropdownSuccess {
|
|
background-color: @submit-button-bg;
|
|
color: @submit-button-text;
|
|
border-color: @submit-button-bg-hov;
|
|
}
|
|
|
|
.List-dropdownSuccess:hover,
|
|
.List-dropdownSuccess:focus {
|
|
color: @submit-button-text;
|
|
background-color: @submit-button-bg-hov;
|
|
}
|
|
|
|
.List-dropdownCarat {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
vertical-align: middle;
|
|
border-top: 4px dashed;
|
|
border-right: 4px solid transparent;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.List-infoCell {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
|
|
.popover-content {
|
|
dl {
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
dt, dd {
|
|
flex: 1 1 50%;
|
|
font-weight: inherit;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.List-infoCell--badge {
|
|
height: 15px;
|
|
color: @default-interface-txt;
|
|
background-color: @default-list-header-bg;
|
|
border-radius: 5px;
|
|
font-size: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
margin-left: 10px;
|
|
text-transform: uppercase;
|
|
font-weight: 100;
|
|
margin-top: 2.25px;
|
|
outline: none;
|
|
}
|
|
|
|
.List-actionsInner {
|
|
display: flex;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.List-searchWidget + .List-searchWidget {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.List-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.List-actionHolder {
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
margin-top: 12px;
|
|
}
|
|
.List-actions {
|
|
margin-bottom: 20px;
|
|
}
|
|
.List-well {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.List-action {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.List-actionsInner {
|
|
margin-left: -20px;
|
|
}
|
|
}
|
|
|
|
.InventoryManage-container, .modal-body {
|
|
.List-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.List-actionHolder {
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
margin-top: 12px;
|
|
}
|
|
.List-actions {
|
|
margin-bottom: 20px;
|
|
}
|
|
.List-well {
|
|
margin-top: 20px;
|
|
}
|
|
.List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// Inventory Manage exceptions
|
|
.InventoryManage-container {
|
|
.List-actionHolder {
|
|
justify-content: flex-end;
|
|
}
|
|
.List-actions {
|
|
margin: 0 0 -34px 0;
|
|
}
|
|
.SmartSearch-searchTermContainer {
|
|
width: 100%;
|
|
}
|
|
}
|